-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
executable file
·119 lines (99 loc) · 4.11 KB
/
index.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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Onsen UI App</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<!-- Styler tabbar -->
<div id="styler">
<label class="styler-ios">iOS Style</label>
<label class="styler-android">MD Style</label>
</div>
<!-- App -->
<div id="mockup">
<iframe id="app-iframe" scrolling="no"></iframe>
</div>
<!-- Placeholder -->
<div id="placeholder">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="86.000000pt" height="81.000000pt" viewBox="0 0 86.000000 81.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
</metadata>
<g transform="translate(0.000000,81.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path style="fill: #FC3429;" d="M651 777 c-19 -7 -43 -24 -54 -38 -18 -25 -18 -33 -7 -137 14 -129 5
-204 -34 -282 -22 -45 -23 -49 -7 -40 35 18 84 74 103 118 14 31 21 80 27 187
6 107 12 150 24 169 10 14 17 28 17 31 0 8 -33 5 -69 -8z"/>
<path style="fill: #FC3429;" d="M478 705 c-23 -15 -47 -46 -65 -82 -26 -54 -28 -66 -29 -188 0 -72
-2 -136 -2 -142 -3 -23 -40 -13 -66 17 -32 38 -40 81 -34 178 5 80 26 135 68
180 26 27 20 28 -29 2 -111 -56 -141 -111 -146 -259 -2 -74 -8 -117 -19 -138
-15 -30 -15 -31 7 -37 12 -4 60 -9 108 -13 72 -5 92 -3 131 15 77 34 82 50 88
252 5 140 9 181 23 208 21 38 14 40 -35 7z"/>
<path style="fill: #FC3429;" d="M738 487 c62 -66 50 -156 -35 -248 -127 -137 -372 -191 -526 -115
-71 34 -98 71 -106 145 l-6 56 -13 -34 c-16 -46 -15 -116 3 -150 90 -174 483
-156 681 31 65 61 94 118 94 182 0 56 -18 94 -60 130 -39 32 -61 34 -32 3z"/>
</g>
</svg>
</div>
<!-- Preload images -->
<div class="mockup-ios mockup-android" style="display: none"></div>
</div>
<script>
var getParam = function(param) {
var regex = new RegExp(param + '=([^&]+)');
return ((window.location.search.match(regex) || [])[1] || '');
};
// Default selected platform
var defaultPlatform = getParam('platform').trim().toLowerCase();
if (['ios', 'android'].indexOf(defaultPlatform) === -1) {
defaultPlatform = 'ios';
}
// Add mockup
document.querySelector('#mockup').classList.add('mockup-' + defaultPlatform);
document.querySelector('.styler-' + defaultPlatform).classList.add('selected');
// Hide scrollbar
var style = document.createElement('style');
style.innerHTML = '.hide-scrollbar ::-webkit-scrollbar { display: none }';
var styler = {
ios: document.querySelector('.styler-ios'),
android: document.querySelector('.styler-android')
};
var refresh = getParam('refresh').trim().toLowerCase() === 'true';
var selectedPlatform = defaultPlatform;
var onClick = function(platform) {
if (platform !== selectedPlatform) {
selectedPlatform = platform;
if (refresh) {
document.querySelector('#app-iframe').setAttribute('src', appSrc);
} else {
window.frames[0]._superSecretOns.forcePlatformStyling(platform);
}
Object.keys(styler).forEach(function(p) {
styler[p].classList.toggle('selected');
document.querySelector('#mockup').classList.toggle('mockup-' + p);
});
}
};
// Apply everything when the iframe is ready
document.querySelector('#app-iframe').onload = function() {
window.frames[0]._superSecretOns.platform.select(selectedPlatform);
window.frames[0].document.body.appendChild(style);
window.frames[0].document.body.classList.add('hide-scrollbar');
var placeholder = document.querySelector('#placeholder');
if (placeholder) {
styler.ios.onclick = onClick.bind(null, 'ios');
styler.android.onclick = onClick.bind(null, 'android');
placeholder.remove();
document.querySelector('#app-iframe').classList.add('loaded');
}
};
// Set source URL
var appSrc = getParam('src').trim();
document.querySelector('#app-iframe').setAttribute('src', appSrc);
</script>
</body>
</html>