-
Notifications
You must be signed in to change notification settings - Fork 0
/
portal.js
102 lines (92 loc) · 2.57 KB
/
portal.js
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
// Adding some styles with transitions
const style = document.createElement('style');
style.innerHTML = `
portal {
position:fixed;
width: 100%;
height: 100%;
opacity: 0;
box-shadow: 0 0 20px 10px #999;
transform: scale(0.4);
transform-origin: center center;
animation-name: fade-in;
animation-duration: 1s;
animation-delay: 0s;
animation-fill-mode: forwards;
}
body {
background-image: url("portal.png");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
img {
margin-left: auto;
margin-right: auto;
}
.portal-transition {
transition: transform 0.4s;
}
@media (prefers-reduced-motion: reduce) {
.portal-transition {
transition: transform 0.001s;
}
}
.portal-reveal {
transform: scale(1.0) translateX(-20px) translateY(20px);
}
@keyframes fade-in {
0% { opacity: 0; }
100% { opacity: 1; }
}
`;
var ORIGIN = "https://highb.github.io/portal-sandbox/"
function create_portal(depth) {
const portal = document.createElement('portal');
// Let's navigate into ourself
portal.src = ORIGIN;
// Add a class that defines the transition. Consider using
// `prefers-reduced-motion` media query to control the animation.
// https://developers.google.com/web/updates/2019/03/prefers-reduced-motion
portal.classList.add('portal-transition');
portal.addEventListener('click', evt => {
// Animate the portal once user interacts
portal.classList.add('portal-reveal');
});
portal.addEventListener('transitionend', evt => {
if (evt.propertyName == 'transform') {
// Activate the portal once the transition has completed
portal.activate();
}
});
document.body.append(style, portal);
portal.onload = (evt => {
portal.postMessage({'depth': depth}, ORIGIN);
});
return portal
}
function create_link_to_github() {
const gh_link = document.createElement('a');
gh_link.setAttribute('href', 'https://github.com/highb/portal-sandbox')
const github = document.createElement('img');
github.setAttribute('src', 'Octocat.png')
gh_link.append(github)
document.body.append(gh_link)
return gh_link
}
if (window.portalHost) {
console.log("I'm inside a portal, so I won't create another one... yet")
// Receive message via window.portalHost
window.portalHost.addEventListener('message', evt => {
const depth = evt.data.depth;
if (depth > 0) {
create_portal(depth - 1);
} else {
create_link_to_github();
}
});
}
if (!window.portalHost) {
initial_depth = 5
create_portal(initial_depth)
}