-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathparent.html
88 lines (80 loc) · 2.13 KB
/
parent.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
<head>
<title>Parent - Embeddable App Test</title>
<script type="text/javascript" src="//unhassle.brennanmceachran.com/embedded-app.js"></script>
<style>
#app-backdrop {
display:block;
position:fixed;
top:100%;right:0;bottom:0;left:0;
background:#000;
opacity:0;
z-index:0;
-webkit-transition: opacity 3s linear;
-moz-transition: opacity 3s linear;
-o-transition: opacity 3s linear;
-ms-transition: opacity 3s linear;
transition: opacity 3s linear;
}
#app-area {
position:relative;
border:1px solid red;
z-index:1;
}
</style>
</head>
<body>
<h1>Parent Page</h1>
<p>sadas</p>
<p>sadas</p>
<p>sadas</p>
<p>sadas</p>
<p>sadas</p>
<p>sadas</p>
<p>sadas</p>
<p>sadas</p>
<hr>
<div id="app-backdrop"></div>
<div id="app-area"></div>
<script type="text/javascript">
(function () {
'use strict';
var addevent = function addevent(element, eventName, eventFunction) {
if(element.attachEvent) {
//Internet Explorer
element.attachEvent("on" + eventName, function() {eventFunction.call(element);});
} else if(element.addEventListener) {
// Standards
element.addEventListener(eventName, eventFunction, false); //don't need the 'call' trick because in FF everything already works in the right way
}
};
var appBackdrop = document.getElementById('app-backdrop');
var embeddedApp = EmbeddableApp.insert('app-area', {
url: 'http://soapbox.dev/',
proxyUrl: 'http://soapbox.dev/tools/proxy',
proxyHash: true,
resize: true,
debug: true
});
embeddedApp.on({
modalOpen: function (payload) {
//debugger;
appBackdrop.style.top = '0%';
appBackdrop.style.opacity = '0.3';
},
modalClose: function(payload) {
//debugger;
appBackdrop.style.top = '100%';
appBackdrop.style.opacity = '0';
}
});
addevent(appBackdrop, 'click', function(){
appBackdrop.style.top = '100%';
appBackdrop.style.opacity = '0';
embeddedApp.send('modalClose', {});
});
}());
</script>
</body>
</html>