This repository has been archived by the owner on Aug 5, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 83
/
index.html
106 lines (94 loc) · 3.64 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<!-- START MOBIFY TAG -->
<script class="mobify" id="mobify-tag">
(function(window, document, detector, mobifyjsUrl, mainUrl) {
// If Mobify has been defined already, or if the detector fails,
// exit
if (this.Mobify || !detector()) {
return;
}
// Start Mobify object with initial timestamp when loaded
window.Mobify = {points: [+new Date]};
function attachScriptBeforeMobifyTag(src, id, classNames) {
var attachedScript = document.createElement('script');
var mobifyTagScript = document.getElementById('mobify-tag');
attachedScript.src = src;
attachedScript.id = id;
attachedScript.setAttribute("class", classNames);
mobifyTagScript.parentNode.insertBefore(attachedScript, mobifyTagScript);
return attachedScript;
}
// Prevent the browser from downloading website resources
document.write('<plaintext style="display:none">');
// On next tick, load library and main executable
setTimeout(function() {
window.capturing = true;
var mobifyjsScript = attachScriptBeforeMobifyTag(mobifyjsUrl, "mobify-js", "mobify");
mobifyjsScript.onload = function(){
if (mainUrl) {
attachScriptBeforeMobifyTag(mainUrl, "mobify-js-main", "mobify");
}
// TODO: If main fails to load, load capture.restore
};
});
})( window, document,
// detector function
function (){
var match = /webkit|msie\s10|(firefox)[\/\s](\d+)|(opera)[\s\S]*version[\/\s](\d+)|3ds/i.exec(navigator.userAgent)
var isCompatible;
if (match) {
if (match[1] && (match[1].toLowerCase() === "firefox") && (+match[2] < 4)) {
isCompatible = false;
} else if (match[3] && (match[3].toLowerCase() === "opera") && (+match[4] < 11)) {
isCompatible = false
} else {
isCompatible = true;
}
}
if (!isCompatible) {
return false;
}
return true;
},
// path to mobify.js
'/mobifyjs/build/mobify-2.0.0alpha1.min.js',
// path to main executable
'/mobifyjs/examples/capturing-mediaquery/main.js'
);
</script>
<!-- END MOBIFY TAG -->
<link rel="stylesheet" href="/mobifyjs/examples/assets/css/stylesheet.css" type="text/css">
<title>Mobify.js Media Query</title>
</head>
<body class="foo">
<div class="small">
<h1 media="(max-width : 480px)">Small images downloaded</h1>
<img src="/mobifyjs/examples/assets/images/leaves-small.jpg" width="100%" media="(max-width : 480px)">
<img src="/mobifyjs/examples/assets/images/office-small.jpg" width="100%" media="(max-width : 480px)">
</div>
<div class="big">
<h1 media="(min-width : 480px)">Big images downloaded</h1>
<img src="/mobifyjs/examples/assets/images/leaves-big.jpg" width="100%" media="(min-width : 480px)">
<img src="/mobifyjs/examples/assets/images/office-big.jpg" width="100%" media="(min-width : 480px)">
</div>
<h1 media="(min-width : 480px)">
<script src="/mobifyjs/examples/assets/js/small.js" media="(max-width: 480px)"></script>
<script src="/mobifyjs/examples/assets/js/large.js" media="(min-width: 480px)"></script>
<script>
// Grab the total time since starting capturing and send it
// to the parent for testing in performance.html
var end = +new Date;
var begin;
if (window.Mobify.points) {
begin = window.Mobify.points[0];
} else {
var pointEl = document.getElementById("mobify-point");
begin = pointEl.innerText || pointEl.textContent;
}
var diff = end - begin;
parent.postMessage(diff, "*");
</script>
</body>
</html>