Skip to content

Commit 0d7ca18

Browse files
oxxostudioKe, Mingze
oxxostudio
authored and
Ke, Mingze
committed
Use iframe to load template in pages of tutorials
1 parent 527d3bd commit 0d7ca18

117 files changed

Lines changed: 4004 additions & 8130 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎code.js‎

Lines changed: 40 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -325,7 +325,7 @@ Code.loadDemoArea = function () {
325325
var contentHeight = document.getElementById('content_blocks').offsetHeight;
326326
var resizeBar = document.getElementById('demo-resize-bar');
327327

328-
area.style.height = (contentHeight - 130) + 'px';
328+
area.style.height = (contentHeight - 110) + 'px';
329329
area.className = area.className.replace("show", "");
330330

331331
if (localStorage.demoAreaWidth) {
@@ -345,7 +345,7 @@ Code.loadDemoArea = function () {
345345

346346
window.addEventListener('resize', function () {
347347
contentHeight = document.getElementById('content_blocks').offsetHeight;
348-
area.style.height = (contentHeight - 130) + 'px';
348+
area.style.height = (contentHeight - 110) + 'px';
349349
});
350350

351351
resizeBar.onmousedown = function (e) {
@@ -572,10 +572,37 @@ Code.renderContent = function() {
572572
}
573573
};
574574

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();
600+
};
601+
575602
/**
576603
* Initialize Blockly. Called on page load.
577604
*/
578-
Code.init = function() {
605+
Code.init = function(toolbox) {
579606
Code.initLanguage();
580607

581608
var rtl = Code.isRtl();
@@ -611,7 +638,6 @@ Code.init = function() {
611638
};
612639
window.addEventListener('resize', onresize, false);
613640

614-
var toolbox = document.getElementById('toolbox');
615641
Code.workspace = Blockly.inject('content_blocks',
616642
{grid:
617643
{spacing: 25,
@@ -704,7 +730,8 @@ Code.init = function() {
704730
};
705731

706732
Code.renderPage = function (callback) {
707-
var req = new XMLHttpRequest(),
733+
var tpl = Code.PAGE.split('/')[0],
734+
req = new XMLHttpRequest(),
708735
head = document.head,
709736
body = document.body;
710737

@@ -725,10 +752,12 @@ Code.renderPage = function (callback) {
725752
}
726753
});
727754

728-
callback();
755+
if (typeof callback === 'function') {
756+
callback();
757+
}
729758
});
730759

731-
req.open("get", baseUrl + '/views/' + Code.PAGE + '.handlebars', true);
760+
req.open("get", baseUrl + '/views/' + tpl + '.handlebars', true);
732761
req.send();
733762
};
734763

@@ -769,13 +798,6 @@ Code.initLanguage = function() {
769798

770799
// Inject language strings.
771800
document.title += ' ' + MSG['title'];
772-
var toolbox = document.getElementById('toolbox');
773-
var categories = slice.call(toolbox.querySelectorAll('category')).map(function (e) {
774-
return e.id
775-
});
776-
for (var i = 0, cat; cat = categories[i]; i++) {
777-
document.getElementById(cat).setAttribute('name', MSG[cat]);
778-
}
779801
};
780802

781803
/**
@@ -878,7 +900,7 @@ Code.reloadSandbox = function () {
878900
Code.getContext = function () {
879901
var code = Blockly.JavaScript.workspaceToCode(Code.workspace),
880902
babelize = code.indexOf('async function') !== -1,
881-
page = Code.getPage();
903+
page = Code.PAGE;
882904

883905
return {
884906
tpl: page === 'index' ? Code.getDemoPage() : page,
@@ -1301,6 +1323,8 @@ if (Code.PAGE !== 'index') {
13011323

13021324
window.addEventListener('load', function () {
13031325
Code.renderPage(function () {
1304-
Code.init();
1326+
Code.getToolBox(function (toolbox) {
1327+
Code.init(toolbox);
1328+
});
13051329
});
13061330
}, false);

‎css/tutorials.css‎

Lines changed: 45 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ table.nav{
1111
bottom:15px;
1212
width:calc(32% - 40px);
1313
height:calc(100% - 126px);
14-
padding:20px;
14+
padding:20px 20px 0;
1515
background:#fff;
1616
box-sizing:border-box;
17-
border-radius:0 0 100px 0;
17+
border-radius:0 0 20px 0;
1818
}
1919
#demoTitle{
2020
position:absolute;
@@ -65,7 +65,48 @@ table.nav{
6565
right:-5px;
6666
width:160px;
6767
height:103px;
68+
z-index:999;
69+
}
70+
#cuteman01:before{
71+
width:500px;
72+
height:15px;
73+
content:'';
74+
position:absolute;
75+
bottom:0;
76+
right:0;
77+
background:#333;
78+
z-index:1;
79+
pointer-events: none;
80+
}
81+
#cuteman01:after{
82+
content:'';
83+
width:100%;
84+
height:100%;
85+
position:absolute;
6886
background:url(../media/cuteman01.png);
6987
background-size:cover;
70-
cursor:pointer;
71-
}
88+
cursor:pointer;
89+
z-index:2;
90+
}
91+
#sampleButton,#smaple-menu,#demo-resize-bar,#demo-select,#demoButton,.close-btn{
92+
display:none;
93+
}
94+
#demo-area{
95+
display:block!important;
96+
position:relative;
97+
top:0;
98+
right:auto;
99+
border:none;
100+
border-radius:0;
101+
width:100%;
102+
min-width:0;
103+
max-width:100%;
104+
height:calc(100% - 34px)!important;
105+
}
106+
#demo-area .demo-area-content{
107+
padding:0;
108+
}
109+
#demo-frame{
110+
width:100%;
111+
height:100%;
112+
}

‎generators/tutorials.js‎

Lines changed: 45 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -278,35 +278,30 @@ oooooo oooo . .o8
278278
Blockly.JavaScript['tutorial_youtube'] = function (block) {
279279
var value_name_ = Blockly.JavaScript.valueToCode(block, 'name_', Blockly.JavaScript.ORDER_ATOMIC);
280280
var text_id_ = block.getFieldValue('id_');
281-
var code = 'var checkYoutubeLoad=0;\n' +
282-
'onYouTubeIframeAPIReady();\n' +
283-
'function onYouTubeIframeAPIReady() {\n' +
284-
' ' + value_name_ + ' = new YT.Player("player", {\n' +
285-
' height: "240",\n' +
286-
' width: "100%",\n' +
287-
' videoId: "' + text_id_ + '",\n' +
288-
' playerVars: {\n' +
289-
' "autoplay": 1,\n' +
290-
' "controls": 1},\n' +
291-
' events: {\n' +
292-
' "onReady": onPlayerReady,\n' +
293-
' "onStateChange": onPlayerStateChange\n' +
294-
' }\n' +
295-
' });\n' +
296-
'}\n' +
297-
'function onPlayerReady(event) {\n' +
298-
' event.target.playVideo();\n' +
299-
' checkYoutubeLoad=1;\n' +
300-
'}\n' +
301-
'var done = false;\n' +
302-
'function onPlayerStateChange(event) {\n' +
303-
' if (event.data == YT.PlayerState.PLAYING && !done) {\n' +
304-
' done = true;\n' +
281+
var code =
282+
'(function () {\n' +
283+
' var tag = document.createElement("script");\n' +
284+
' tag.src = "https://www.youtube.com/iframe_api";\n' +
285+
' var scptTag = document.getElementsByTagName("script")[0];\n' +
286+
' scptTag.parentNode.insertBefore(tag, scptTag);\n' +
287+
' window.onYouTubeIframeAPIReady = playVideo;\n\n' +
288+
' function playVideo() {\n' +
289+
' ' + value_name_ + ' = new YT.Player("player", {\n' +
290+
' height: "240",\n' +
291+
' width: "96%",\n' +
292+
' videoId: "' + text_id_ + '",\n' +
293+
' playerVars: {\n' +
294+
' autoplay: 1,\n' +
295+
' controls: 1\n' +
296+
' },\n' +
297+
' events: {\n' +
298+
' onReady: function (evt) {\n' +
299+
' ' + value_name_ + '.playerReady = true;\n' +
300+
' }\n' +
301+
' }\n' +
302+
' });\n' +
305303
' }\n' +
306-
'}\n' +
307-
'function stopVideo() {\n' +
308-
' ' + value_name_ + '.stopVideo();\n' +
309-
'}\n';
304+
'}());\n\n';
310305
return code;
311306
};
312307

@@ -316,42 +311,42 @@ Blockly.JavaScript['tutorial_youtube_volume'] = function (block) {
316311
var varA = Blockly.JavaScript.variableDB_.getDistinctName(
317312
'varA', Blockly.Variables.NAME_TYPE);
318313
var code = 'var ' + varA + ' = ' + value_volume_ + ';\n' +
319-
' if(' + varA + '>=100){\n' +
320-
' ' + varA + '=100;\n' +
321-
' }\n' +
322-
' if(checkYoutubeLoad==1){\n' +
323-
' ' + variable_name_ + '.setVolume(' + varA + ');\n' +
324-
' }\n';
314+
'if (' + varA + ' >= 100) {\n' +
315+
' ' + varA + ' = 100;\n' +
316+
'}\n' +
317+
'if (' + variable_name_ + '.playerReady) {\n' +
318+
' ' + variable_name_ + '.setVolume(' + varA + ');\n' +
319+
'}\n';
325320
return code;
326321
};
327322

328323

329324
Blockly.JavaScript['tutorial_youtube_speed'] = function (block) {
330325
var variable_name_ = Blockly.JavaScript.variableDB_.getName(block.getFieldValue('name_'), Blockly.Variables.NAME_TYPE);
331326
var dropdown_speed_ = block.getFieldValue('speed_');
332-
var code = ' if(checkYoutubeLoad==1){\n' +
333-
' ' + variable_name_ + '.setPlaybackRate(' + dropdown_speed_ + ');\n' +
334-
' }\n';
327+
var code = 'if (' + variable_name_ + '.playerReady) {\n' +
328+
' ' + variable_name_ + '.setPlaybackRate(' + dropdown_speed_ + ');\n' +
329+
'}\n';
335330
return code;
336331
};
337332

338333
Blockly.JavaScript['tutorial_youtube_control'] = function (block) {
339334
var variable_name_ = Blockly.JavaScript.variableDB_.getName(block.getFieldValue('name_'), Blockly.Variables.NAME_TYPE);
340335
var dropdown_status_ = block.getFieldValue('status_');
341336
var code;
342-
if(dropdown_status_=='1'){
343-
code = ' if(checkYoutubeLoad==1){\n' +
344-
' ' + variable_name_ + '.playVideo();\n' +
345-
' }\n';
346-
}else if(dropdown_status_=='2'){
347-
code = ' if(checkYoutubeLoad==1){\n' +
348-
' ' + variable_name_ + '.pauseVideo();\n' +
349-
' }\n';
350-
}else if(dropdown_status_=='0'){
351-
code = ' if(checkYoutubeLoad==1){\n' +
352-
' ' + variable_name_ + '.stopVideo();\n' +
353-
' ' + variable_name_ + '.seekTo(0);\n' +
354-
' }\n';
337+
if (dropdown_status_ == '1') {
338+
code = 'if (' + variable_name_ + '.playerReady) {\n' +
339+
' ' + variable_name_ + '.playVideo();\n' +
340+
'}\n';
341+
} else if (dropdown_status_ == '2') {
342+
code = 'if (' + variable_name_ + '.playerReady) {\n' +
343+
' ' + variable_name_ + '.pauseVideo();\n' +
344+
'}\n';
345+
} else if (dropdown_status_ == '0') {
346+
code = 'if (' + variable_name_ + '.playerReady) {\n' +
347+
' ' + variable_name_ + '.seekTo(0);\n' +
348+
' ' + variable_name_ + '.stopVideo();\n' +
349+
'}\n';
355350
}
356351
return code;
357352
};

‎msg/en.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
var MSG = {
2-
update: "update 2015.11.04",
2+
catLoadingBlocks: "Loading...",
3+
update: "update 2016.06.29",
34
title: "Webduino Blockly Editor",
45
gotoTutorials: "Tutorials",
56
gotoWebSite: "Official site",

‎msg/zh-hant.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
var MSG = {
2-
update: "update 2015.11.04",
2+
catLoadingBlocks: "載入積木",
3+
update: "update 2016.06.29",
34
title: "Webduino Blockly 編輯器",
45
gotoTutorials: "教學範例",
56
gotoWebSite: "官方網站",

‎templates/tutorials/button-5.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
44
<title>Webduino Blockly 課程 4-5：點擊按鈕開關控制 Youtube</title>
55
<!-- webduino -->
6+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
67
<script src="https://webduino.io/components/webduino-js/dist/webduino-all.min.js"></script>
78
<script src="https://blockly.webduino.io/webduino-blockly.js"></script>
89
<script src="https://blockly.webduino.io/lib/runtime.min.js"></script>

‎templates/tutorials/buzzer-2.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@
88
<script src="https://blockly.webduino.io/lib/runtime.min.js"></script>
99
</template>
1010
<template id="body">
11-
嘗試用其他的方式製作一首音樂，並用蜂鳴器播放
11+
<div id="show">
12+
音符：<span id="buzzerNotes"></span><br/>
13+
節奏：<span id="buzzerTempos"></span>
14+
</div>
1215
</template>
1316
<template id="css">
1417

0 commit comments

Comments
 (0)