Skip to content
This repository was archived by the owner on Nov 22, 2021. It is now read-only.

Commit b73abf4

Browse files
author
Ke, Mingze
committed
Dynamically update toolbox according to demo page
1 parent 897a085 commit b73abf4

File tree

4 files changed

+42
-48
lines changed

4 files changed

+42
-48
lines changed

‎code.js

+24-23
Original file line numberDiff line numberDiff line change
@@ -94,18 +94,11 @@ Code.getTags = function () {
9494
};
9595

9696
Code.getDemoPage = function () {
97-
var area = document.querySelector('#demo-area.show');
98-
if (area) {
99-
var select = document.querySelector('#demo-select');
100-
var link;
101-
if ((select.value) * 1 < 10) {
102-
link = '0' + select.value;
103-
} else {
104-
link = select.value;
105-
}
106-
return 'demo-area-' + link;
97+
var area = Code.getStringParamFromUrl('demo', '').trim();
98+
if (!area.length) {
99+
area = 'default';
107100
}
108-
return 'default';
101+
return area;
109102
};
110103

111104
Code.getPinDropdown = function () {
@@ -436,6 +429,7 @@ Code.loadDemoArea = function () {
436429
var close = document.querySelector('.close-btn');
437430
var contentHeight = document.getElementById('content_blocks').offsetHeight;
438431
var resizeBar = document.getElementById('demo-resize-bar');
432+
var demoPage = Code.getDemoPage();
439433

440434
area.style.height = (contentHeight - 110) + 'px';
441435
area.className = area.className.replace("show", "");
@@ -444,16 +438,13 @@ Code.loadDemoArea = function () {
444438
area.style.width = localStorage.demoAreaWidth;
445439
}
446440

447-
if (localStorage.demoArea == 'open') {
441+
if (demoPage !== 'default') {
448442
area.className = area.className + "show";
449443
btn.className = "notext toolMenu opened";
444+
Code.queryString.set('demo', demoPage);
450445
}
451446

452-
if (!localStorage.demoAreaSelect) {
453-
localStorage.demoAreaSelect = 1;
454-
}
455-
456-
select.value = localStorage.demoAreaSelect;
447+
select.value = demoPage === 'default' ? 'demo-area-01' : demoPage;
457448
Code.reloadSandbox();
458449

459450
window.addEventListener('resize', function () {
@@ -485,27 +476,35 @@ Code.loadDemoArea = function () {
485476
};
486477

487478
btn.onclick = function () {
488-
if (localStorage.demoArea == 'open') {
479+
var demoPage = Code.getDemoPage();
480+
if (demoPage !== 'default') {
489481
area.className = area.className.replace("show", "");
490-
localStorage.demoArea = 'close';
491482
btn.className = "notext toolMenu";
483+
localStorage.demoAreaSelect = demoPage;
484+
Code.queryString.unset('demo');
492485
} else {
493486
area.className += " show";
494-
localStorage.demoArea = 'open';
495487
btn.className = "notext toolMenu opened";
488+
Code.queryString.set('demo', localStorage.demoAreaSelect || 'demo-area-01');
489+
select.value = localStorage.demoAreaSelect || 'demo-area-01';
490+
delete localStorage.demoAreaSelect;
496491
}
492+
Code.workspace.updateToolbox(Code.getToolBox());
497493
Code.reloadSandbox();
498494
};
499495

500496
close.onclick = function () {
501497
area.className = area.className.replace("show", "");
502-
localStorage.demoArea = 'close';
503498
btn.className = "notext toolMenu";
499+
localStorage.demoAreaSelect = Code.getDemoPage();
500+
Code.queryString.unset('demo');
501+
Code.workspace.updateToolbox(Code.getToolBox());
504502
};
505503

506504
select.onchange = function () {
507505
ga('send', 'event', 'Webduino-blockly', 'demo select', this.value);
508-
localStorage.demoAreaSelect = this.value;
506+
Code.queryString.set('demo', this.value);
507+
Code.workspace.updateToolbox(Code.getToolBox());
509508
Code.reloadSandbox();
510509
};
511510
};
@@ -750,7 +749,9 @@ Code.pruneNode = function (node) {
750749
};
751750

752751
Code.getToolBox = function () {
753-
var toolbox = Code.filterXML(Code.rawToolbox, 'tags', Code.getTags()),
752+
var toolbox = Code.filterXML(
753+
Code.filterXML(Code.rawToolbox, 'tags', Code.getTags()),
754+
'demo', [Code.getDemoPage()]),
754755
categories = slice.call(toolbox.querySelectorAll('category')).map(function (e) {
755756
return e.id;
756757
});

‎env.js

-5
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,6 @@
99
location.protocol = 'http:';
1010
return;
1111
}
12-
13-
window.addEventListener('load', function () {
14-
document.querySelector('#check-device-online').style.display = 'none';
15-
document.querySelector('#blockly-to-website').style.display = 'none';
16-
}, false);
1712
}
1813

1914
}(window, document));

‎toolbox/index.xml

+9-11
Original file line numberDiff line numberDiff line change
@@ -858,8 +858,7 @@
858858
<sep></sep>
859859
</category>
860860
<sep></sep>
861-
<category id="catDemo">
862-
<category id="catDemoText">
861+
<category id="catDemoText" demo="demo-area-01">
863862
<block type="demo_show_text"></block>
864863
<block type="demo_text_size">
865864
<value name="size_">
@@ -883,13 +882,13 @@
883882
</value>
884883
</block>
885884
</category>
886-
<category id="catDemoLight">
885+
<category id="catDemoLight" demo="demo-area-02">
887886
<block type="demo_light_click"></block>
888887
<block type="demo_light_state"></block>
889888
<block type="demo_light_ifelse"></block>
890889
<block type="demo_light_toggle"></block>
891890
</category>
892-
<category id="catDemoImage">
891+
<category id="catDemoImage" demo="demo-area-03">
893892
<block type="demo_image_url">
894893
<value name="url_">
895894
<block type="text">
@@ -931,7 +930,7 @@
931930
</value>
932931
</block>
933932
</category>
934-
<category id="catDemoArea">
933+
<category id="catDemoArea" demo="demo-area-04">
935934
<block type="demo_area_input"></block>
936935
<block type="demo_area_input_color"></block>
937936
<block type="demo_area_color">
@@ -942,10 +941,10 @@
942941
</value>
943942
</block>
944943
</category>
945-
<category id="catDemoButton">
944+
<category id="catDemoButton" demo="demo-area-05">
946945
<block type="demo_button_click"></block>
947946
</category>
948-
<category id="catDemoRange">
947+
<category id="catDemoRange" demo="demo-area-06">
949948
<block type="demo_range_set">
950949
<value name="min_">
951950
<block type="math_number">
@@ -971,7 +970,7 @@
971970
<block type="demo_range_show"></block>
972971
<block type="demo_range_input_value"></block>
973972
</category>
974-
<category id="catDemoYoutube">
973+
<category id="catDemoYoutube" demo="demo-area-07">
975974
<block type="demo_youtube">
976975
<value name="name_">
977976
<block type="variables_get">
@@ -1014,7 +1013,7 @@
10141013
</value>
10151014
</block>
10161015
</category>
1017-
<category id="catDemoTracking">
1016+
<category id="catDemoTracking" demo="demo-area-08">
10181017
<block type="demo_tracking">
10191018
<value name="var_">
10201019
<block type="variables_get">
@@ -1026,7 +1025,7 @@
10261025
<block type="demo_tracking_val"></block>
10271026
<block type="demo_tracking_face"></block>
10281027
</category>
1029-
<category id="catDemoController">
1028+
<category id="catDemoController" demo="demo-area-09">
10301029
<block type="demo_controller"></block>
10311030
<block type="demo_controller_show"></block>
10321031
<block type="demo_controller_showcolor">
@@ -1060,5 +1059,4 @@
10601059
</block>
10611060
<block type="demo_controller_range_value"></block>
10621061
</category>
1063-
</category>
10641062
</xml>

‎views/index.handlebars

+9-9
Original file line numberDiff line numberDiff line change
@@ -112,15 +112,15 @@
112112
<h4>{{demoAreaTitle}}</h4>
113113
<span>{{demoAreaChoose}}</span>
114114
<select id="demo-select">
115-
<option value="1">{{demoAreaSelect1}}</option>
116-
<option value="2">{{demoAreaSelect2}}</option>
117-
<option value="3">{{demoAreaSelect3}}</option>
118-
<option value="4">{{demoAreaSelect4}}</option>
119-
<option value="5">{{demoAreaSelect5}}</option>
120-
<option value="6">{{demoAreaSelect6}}</option>
121-
<option value="7">{{demoAreaSelect7}}</option>
122-
<option value="8">{{demoAreaSelect8}}</option>
123-
<option value="9">{{demoAreaSelect9}}</option>
115+
<option value="demo-area-01">{{demoAreaSelect1}}</option>
116+
<option value="demo-area-02">{{demoAreaSelect2}}</option>
117+
<option value="demo-area-03">{{demoAreaSelect3}}</option>
118+
<option value="demo-area-04">{{demoAreaSelect4}}</option>
119+
<option value="demo-area-05">{{demoAreaSelect5}}</option>
120+
<option value="demo-area-06">{{demoAreaSelect6}}</option>
121+
<option value="demo-area-07">{{demoAreaSelect7}}</option>
122+
<option value="demo-area-08">{{demoAreaSelect8}}</option>
123+
<option value="demo-area-09">{{demoAreaSelect9}}</option>
124124
</select>
125125
</div>
126126
</div>

0 commit comments

Comments
 (0)