Skip to content

Commit 2888e31

Browse files
author
Ke, Mingze
committed
Optimized page loading
1 parent 7333845 commit 2888e31

5 files changed

Lines changed: 89 additions & 82 deletions

File tree

‎code.js‎

Lines changed: 79 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,27 @@ Code.getDemoPage = function () {
9696
return 'default';
9797
};
9898

99+
Code.loadDoc = function (href, callback) {
100+
var link = document.createElement('link'),
101+
tag = document.getElementsByTagName('script')[0];
102+
link.rel = 'import';
103+
link.href = href;
104+
if (typeof callback === 'function') {
105+
link.onload = function (e) {
106+
callback(e.target.import);
107+
};
108+
}
109+
tag.parentNode.insertBefore(link, tag);
110+
};
111+
112+
Code.loadJs = function (src) {
113+
var js = document.createElement('script'),
114+
tag = document.getElementsByTagName('script')[0];
115+
js.async = 1;
116+
js.src = src;
117+
tag.parentNode.insertBefore(js, tag);
118+
};
119+
99120
/**
100121
* Is the current language (Code.LANG) an RTL language?
101122
* @return {boolean} True if RTL, false if LTR.
@@ -572,31 +593,14 @@ Code.renderContent = function() {
572593
}
573594
};
574595

575-
Code.getToolBox = function (callback) {
576-
var toolboxContent = new XMLHttpRequest();
577-
var toolboxXML, toolbox;
578-
579-
toolboxContent.overrideMimeType('text/xml');
580-
toolboxContent.open('GET', 'toolbox/' + Code.PAGE + '.xml', true);
581-
582-
toolboxContent.onreadystatechange = function () {
583-
if (toolboxContent.readyState !== 4) return;
584-
toolboxXML = toolboxContent.responseXML;
585-
var categories =
586-
slice.call(toolboxXML.querySelectorAll('category')).map(function (e) {
587-
return e.id;
588-
});
589-
for (var i = 0, cat; cat = categories[i]; i++) {
590-
toolboxXML.getElementById(cat).setAttribute('name', MSG[cat]);
591-
}
592-
toolbox = new XMLSerializer().serializeToString(toolboxXML);
593-
594-
if (typeof callback === 'function') {
595-
callback(toolbox);
596-
}
597-
};
598-
599-
toolboxContent.send();
596+
Code.getToolBox = function (toolboxXML) {
597+
var categories = slice.call(toolboxXML.querySelectorAll('category')).map(function (e) {
598+
return e.id;
599+
});
600+
for (var i = 0, cat; cat = categories[i]; i++) {
601+
toolboxXML.querySelector('#' + cat).setAttribute('name', MSG[cat]);
602+
}
603+
return new XMLSerializer().serializeToString(toolboxXML);
600604
};
601605

602606
/**
@@ -729,36 +733,24 @@ Code.init = function(toolbox) {
729733
window.addEventListener('message', messageDelegator, false);
730734
};
731735

732-
Code.renderPage = function (callback) {
733-
var tpl = Code.PAGE.split('/')[0],
734-
req = new XMLHttpRequest(),
735-
head = document.head,
736-
body = document.body;
737-
738-
req.addEventListener('load', function () {
739-
var template = Handlebars.compile(this.responseText);
740-
body.innerHTML = template(MSG);
741-
742-
slice.call(body.querySelectorAll('script')).forEach(function (sc) {
743-
var script = document.createElement('script');
744-
if (sc.getAttribute('src')) {
745-
script.setAttribute('src', sc.getAttribute('src'));
746-
head.appendChild(script);
747-
body.removeChild(sc);
748-
} else if (sc.text) {
749-
script.text = sc.text;
750-
head.appendChild(script);
751-
body.removeChild(sc);
752-
}
753-
});
754-
755-
if (typeof callback === 'function') {
756-
callback();
736+
Code.renderPage = function (templateStr) {
737+
var head = document.head,
738+
body = document.body,
739+
template = Handlebars.compile(templateStr);
740+
741+
body.innerHTML = template(MSG);
742+
slice.call(body.querySelectorAll('script')).forEach(function (sc) {
743+
var script = document.createElement('script');
744+
if (sc.getAttribute('src')) {
745+
script.setAttribute('src', sc.getAttribute('src'));
746+
head.appendChild(script);
747+
body.removeChild(sc);
748+
} else if (sc.text) {
749+
script.text = sc.text;
750+
head.appendChild(script);
751+
body.removeChild(sc);
757752
}
758753
});
759-
760-
req.open("get", baseUrl + '/views/' + tpl + '.handlebars', true);
761-
req.send();
762754
};
763755

764756
/**
@@ -807,10 +799,14 @@ Code.initLanguage = function() {
807799
Code.runJS = function () {
808800
var now = Date.now();
809801

810-
if (now - Code.lastRun < 500) {
811-
return;
802+
if (navigator.userAgent.match(/iPhone/i) ||
803+
navigator.userAgent.match(/iPad/i) ||
804+
navigator.userAgent.match(/iPod/i)) {
805+
if (now - Code.lastRun < 1000) {
806+
return;
807+
}
808+
Code.lastRun = now;
812809
}
813-
Code.lastRun = now;
814810

815811
Code.toggleRunning();
816812
Code.reloadSandbox();
@@ -882,6 +878,7 @@ Code.reloadSandbox = function () {
882878
frame.id = 'demo-frame';
883879
frame.style.display = 'block';
884880
container.appendChild(frame);
881+
Code.tabClick('blocks');
885882

886883
launcher.sandbox(frame, data);
887884

@@ -1320,10 +1317,31 @@ if (Code.PAGE !== 'index') {
13201317
document.write('<script src="' + baseUrl + '/generators/' + Code.PAGE.split('/')[0] + '.js"></script>\n');
13211318
}
13221319

1323-
window.addEventListener('load', function () {
1324-
Code.renderPage(function () {
1325-
Code.getToolBox(function (toolbox) {
1326-
Code.init(toolbox);
1320+
Promise.all([
1321+
new Promise(function (resolve) {
1322+
Code.loadDoc(baseUrl + '/views/' + Code.PAGE.split('/')[0] + '.handlebars', function (doc) {
1323+
resolve(doc.body.innerHTML);
1324+
});
1325+
}),
1326+
new Promise(function (resolve) {
1327+
Code.loadDoc(baseUrl + '/toolbox/' + Code.PAGE + '.xml', function (doc) {
1328+
resolve(doc.body.firstChild);
13271329
});
1330+
}),
1331+
new Promise(function (resolve) {
1332+
window.addEventListener('load', function () {
1333+
resolve();
1334+
}, false);
1335+
})
1336+
]).then(function (values) {
1337+
Code.renderPage(values[0]);
1338+
Code.init(Code.getToolBox(values[1]));
1339+
[
1340+
'/lib/babel.min.js',
1341+
'/lib/saveSvgAsPng.js',
1342+
'/lib/webduino-all-0.4.0.min.js',
1343+
'/webduino-samples.js',
1344+
].forEach(function (url) {
1345+
Code.loadJs(baseUrl + url);
13281346
});
1329-
}, false);
1347+
});

‎index.html‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -19,28 +19,18 @@
1919
<link rel="stylesheet" href="css/iconfont.css">
2020
<link rel="stylesheet" href="css/style.css">
2121
<link rel="stylesheet" href="css/blockly.css">
22-
<script src="storage.js"></script>
23-
<script src="launcher.js"></script>
24-
<script src="components/webcomponentsjs/webcomponents-lite.min.js"></script>
22+
2523
<script src="components/blockly-src/blockly_compressed.js"></script>
2624
<script src="components/blockly-src/blocks_compressed.js"></script>
2725
<script src="components/blockly-src/javascript_compressed.js"></script>
26+
<script src="components/webcomponentsjs/webcomponents-lite.min.js"></script>
2827
<script src="lib/handlebars-3.0.3.min.js"></script>
28+
<script src="storage.js"></script>
29+
<script src="launcher.js"></script>
2930
<script src="code.js"></script>
30-
<script src="webduino-blockly.js"></script>
31-
<script src="webduino-samples.js"></script>
32-
<script src="webduino-fish.js"></script>
3331
<script src="blocks/webduino.js"></script>
3432
<script src="generators/webduino.js"></script>
35-
<script src="lib/runtime.min.js"></script>
36-
<script src="lib/babel.min.js"></script>
37-
<script src="lib/jquery-2.2.1.min.js"></script>
38-
<script src="lib/firebase.js"></script>
3933
<script src="lib/clipboard.js"></script>
40-
<script src="lib/tracking-min.js"></script>
41-
<script src="lib/face-min.js"></script>
42-
<script src="lib/saveSvgAsPng.js"></script>
43-
<script src="lib/webduino-all-0.4.0.min.js"></script>
4434
</head>
4535

4636
<body>

‎launcher.js‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515
'use strict';
1616

1717
function loadTemplate(url, callback) {
18-
var link = document.createElement('link');
18+
var link = document.createElement('link'),
19+
tag = document.getElementsByTagName('script')[0];
1920

2021
link.rel = 'import';
2122
link.href = url;
@@ -32,7 +33,7 @@
3233
});
3334
};
3435

35-
document.head.appendChild(link);
36+
tag.parentNode.insertBefore(link, tag);
3637
}
3738

3839
function assembleHtml(head, body, css, js) {
@@ -121,9 +122,6 @@
121122

122123
frame.addEventListener('load', function () {
123124
frame.style.display = 'block';
124-
setTimeout(function () {
125-
window.scrollTo(0, 0);
126-
}, 1);
127125
}, false);
128126
frame.style.display = 'none';
129127
frame.contentWindow.document.open();

‎storage.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,8 @@ BlocklyStorage.monitorChanges_ = function (workspace) {
180180
var xmlDom = Blockly.Xml.workspaceToDom(workspace);
181181
var xmlText = Blockly.Xml.domToText(xmlDom);
182182
if (startXmlText != xmlText) {
183-
window.location.hash = '';
183+
history.pushState('', document.title,
184+
window.location.pathname + window.location.search);
184185
workspace.removeChangeListener(bindData);
185186
}
186187
}

‎views/tutorials.handlebars‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<link rel="stylesheet" href="css/tutorials.css">
1+
<link rel="stylesheet" href="../css/tutorials.css">
22

33
<header>
44
<a href="index.html" title="Webduino Blockly"><img class="logo" src="media/logo.png"></a>

0 commit comments

Comments
 (0)