Skip to content

Commit 2074f5f

Browse files
samelhusseinisamelhusseini
authored
Support deploying custom demos / examples (google#442)
* Support deploying custom demos to blockly-samples
1 parent b7727fe commit 2074f5f

File tree

154 files changed

+14179
-622
lines changed

Some content is hidden

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

154 files changed

+14179
-622
lines changed

‎.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@ node_modules/
1212
# Generated files
1313
dist/
1414
build/
15+
gh-pages/_site
1516
gh-pages/plugins
17+
gh-pages/examples
1618

1719
# TypeScript cache
1820
*.tsbuildinfo

‎examples/blockly-react/package.json

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"audit": "npm audit fix",
1414
"update": "npm update",
1515
"postinstall": "cp -r node_modules/blockly/media public/media",
16+
"predeploy": "npm run build",
1617
"start": "react-scripts start",
1718
"build": "react-scripts build",
1819
"test": "react-scripts test",
@@ -32,5 +33,13 @@
3233
"last 1 firefox version",
3334
"last 1 safari version"
3435
]
36+
},
37+
"homepage": "./",
38+
"demoConfig": {
39+
"title": "Blockly in React",
40+
"description": "Load Blockly in a React project.",
41+
"files": [
42+
"build/**/*"
43+
]
3544
}
3645
}

‎examples/custom-dialogs-demo/custom-dialog.js

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
/**
2+
* @license
3+
* Copyright 2016 Google LLC
4+
* SPDX-License-Identifier: Apache-2.0
5+
*/
6+
7+
/**
8+
* An example implementation of how one might replace Blockly's browser
9+
* dialogs. This is just an example, and applications are not encouraged to use
10+
* it verbatim.
11+
*
12+
* @namespace
13+
*/
14+
CustomDialog = {};
15+
16+
/** Override Blockly.alert() with custom implementation. */
17+
Blockly.alert = function(message, callback) {
18+
console.log('Alert: ' + message);
19+
CustomDialog.show('Alert', message, {
20+
onCancel: callback
21+
});
22+
};
23+
24+
/** Override Blockly.confirm() with custom implementation. */
25+
Blockly.confirm = function(message, callback) {
26+
console.log('Confirm: ' + message);
27+
CustomDialog.show('Confirm', message, {
28+
showOkay: true,
29+
onOkay: function() {
30+
callback(true);
31+
},
32+
showCancel: true,
33+
onCancel: function() {
34+
callback(false);
35+
}
36+
});
37+
};
38+
39+
/** Override Blockly.prompt() with custom implementation. */
40+
Blockly.prompt = function(message, defaultValue, callback) {
41+
console.log('Prompt: ' + message);
42+
CustomDialog.show('Prompt', message, {
43+
showInput: true,
44+
showOkay: true,
45+
onOkay: function() {
46+
callback(CustomDialog.inputField.value);
47+
},
48+
showCancel: true,
49+
onCancel: function() {
50+
callback(null);
51+
}
52+
});
53+
CustomDialog.inputField.value = defaultValue;
54+
};
55+
56+
/** Hides any currently visible dialog. */
57+
CustomDialog.hide = function() {
58+
if (CustomDialog.backdropDiv_) {
59+
CustomDialog.backdropDiv_.style.display = 'none';
60+
CustomDialog.dialogDiv_.style.display = 'none';
61+
}
62+
};
63+
64+
/**
65+
* Shows the dialog.
66+
* Allowed options:
67+
* - showOkay: Whether to show the OK button.
68+
* - showCancel: Whether to show the Cancel button.
69+
* - showInput: Whether to show the text input field.
70+
* - onOkay: Callback to handle the okay button.
71+
* - onCancel: Callback to handle the cancel button and backdrop clicks.
72+
*/
73+
CustomDialog.show = function(title, message, options) {
74+
var backdropDiv = CustomDialog.backdropDiv_;
75+
var dialogDiv = CustomDialog.dialogDiv_;
76+
if (!dialogDiv) {
77+
// Generate HTML
78+
backdropDiv = document.createElement('div');
79+
backdropDiv.id = 'customDialogBackdrop';
80+
backdropDiv.style.cssText =
81+
'position: absolute;' +
82+
'top: 0; left: 0; right: 0; bottom: 0;' +
83+
'background-color: rgba(0, 0, 0, .7);' +
84+
'z-index: 100;';
85+
document.body.appendChild(backdropDiv);
86+
87+
dialogDiv = document.createElement('div');
88+
dialogDiv.id = 'customDialog';
89+
dialogDiv.style.cssText =
90+
'background-color: #fff;' +
91+
'width: 400px;' +
92+
'margin: 20px auto 0;' +
93+
'padding: 10px;';
94+
backdropDiv.appendChild(dialogDiv);
95+
96+
dialogDiv.onclick = function(event) {
97+
event.stopPropagation();
98+
};
99+
100+
CustomDialog.backdropDiv_ = backdropDiv;
101+
CustomDialog.dialogDiv_ = dialogDiv;
102+
}
103+
backdropDiv.style.display = 'block';
104+
dialogDiv.style.display = 'block';
105+
106+
dialogDiv.innerHTML =
107+
'<header class="customDialogTitle"></header>' +
108+
'<p class="customDialogMessage"></p>' +
109+
(options.showInput ? '<div><input id="customDialogInput"></div>' : '') +
110+
'<div class="customDialogButtons">' +
111+
(options.showCancel ? '<button id="customDialogCancel">Cancel</button>': '') +
112+
(options.showOkay ? '<button id="customDialogOkay">OK</button>': '') +
113+
'</div>';
114+
dialogDiv.getElementsByClassName('customDialogTitle')[0]
115+
.appendChild(document.createTextNode(title));
116+
dialogDiv.getElementsByClassName('customDialogMessage')[0]
117+
.appendChild(document.createTextNode(message));
118+
119+
var onOkay = function(event) {
120+
CustomDialog.hide();
121+
options.onOkay && options.onOkay();
122+
event && event.stopPropagation();
123+
};
124+
var onCancel = function(event) {
125+
CustomDialog.hide();
126+
options.onCancel && options.onCancel();
127+
event && event.stopPropagation();
128+
};
129+
130+
var dialogInput = document.getElementById('customDialogInput');
131+
CustomDialog.inputField = dialogInput;
132+
if (dialogInput) {
133+
dialogInput.focus();
134+
135+
dialogInput.onkeyup = function(event) {
136+
if (event.keyCode == 13) {
137+
// Process as OK when user hits enter.
138+
onOkay();
139+
return false;
140+
} else if (event.keyCode == 27) {
141+
// Process as cancel when user hits esc.
142+
onCancel();
143+
return false;
144+
}
145+
};
146+
} else {
147+
var okay = document.getElementById('customDialogOkay');
148+
okay && okay.focus();
149+
}
150+
151+
if (options.showOkay) {
152+
document.getElementById('customDialogOkay')
153+
.addEventListener('click', onOkay);
154+
}
155+
if (options.showCancel) {
156+
document.getElementById('customDialogCancel')
157+
.addEventListener('click', onCancel);
158+
}
159+
160+
backdropDiv.onclick = onCancel;
161+
};

‎examples/custom-dialogs-demo/index.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Blockly Demo: Custom Dialog</title>
6+
<script src="https://unpkg.com/blockly/blockly_compressed.js"></script>
7+
<script src="https://unpkg.com/blockly/blocks_compressed.js"></script>
8+
<script src="https://unpkg.com/blockly/msg/en.js"></script>
9+
<style>
10+
body {
11+
background-color: #fff;
12+
font-family: sans-serif;
13+
}
14+
h1 {
15+
font-weight: normal;
16+
font-size: 140%;
17+
}
18+
</style>
19+
</head>
20+
<body>
21+
<p>This is a simple demo of replacing modal browser dialogs with HTML.
22+
To see how it works, see the source code in
23+
<a href="custom-dialog.js">custom-dialog.js</a>
24+
</p>
25+
26+
<p>Try creating new variables, creating variables with names already in
27+
use, or deleting multiple blocks on the workspace.
28+
</p>
29+
30+
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
31+
32+
<xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
33+
<category name="Inputs" colour="%{BKY_MATH_HUE}">
34+
<block type="math_number" gap="32">
35+
<field name="NUM">123</field>
36+
</block>
37+
<block type="text"></block>
38+
<block type="text_prompt_ext">
39+
<value name="TEXT">
40+
<shadow type="text">
41+
<field name="TEXT">abc</field>
42+
</shadow>
43+
</value>
44+
</block>
45+
</category>
46+
<sep></sep>
47+
<category name="Variables" colour="%{BKY_VARIABLES_HUE}" custom="VARIABLE"></category>
48+
<category name="Functions" colour="%{BKY_PROCEDURES_HUE}" custom="PROCEDURE"></category>
49+
</xml>
50+
51+
<script>
52+
var demoWorkspace = Blockly.inject('blocklyDiv',
53+
{media: 'https://unpkg.com/blockly/media/',
54+
toolbox: document.getElementById('toolbox')});
55+
</script>
56+
<script src="custom-dialog.js"></script>
57+
58+
</body>
59+
</html>

‎examples/custom-dialogs-demo/package.json

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
"name": "blockly-custom-dialog-demo",
3+
"version": "0.0.0",
4+
"private": true,
5+
"demoConfig": {
6+
"title": "Custom Dialogs",
7+
"description": "Override Blockly browser dialogs with custom implementations.",
8+
"files": [
9+
"index.html",
10+
"custom-dialog.js"
11+
]
12+
}
13+
}

‎examples/fixed-demo/index.html

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Blockly Demo: Fixed Blockly</title>
6+
<script src="https://unpkg.com/blockly/blockly_compressed.js"></script>
7+
<script src="https://unpkg.com/blockly/blocks_compressed.js"></script>
8+
<script src="https://unpkg.com/blockly/msg/en.js"></script>
9+
<style>
10+
body {
11+
background-color: #fff;
12+
font-family: sans-serif;
13+
}
14+
h1 {
15+
font-weight: normal;
16+
font-size: 140%;
17+
}
18+
.demo {
19+
padding: 1rem;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
<div class="demo">
25+
<p>This is a simple demo of injecting Blockly into a fixed-sized 'div' element.</p>
26+
27+
<p>&rarr; More info on <a href="https://developers.google.com/blockly/guides/configure-blockly/web/fixed-size">injecting fixed-sized Blockly</a>&hellip;</p>
28+
29+
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
30+
</div>
31+
<xml xmlns="https://developers.google.com/blockly/xml" id="toolbox" style="display: none">
32+
<block type="controls_if"></block>
33+
<block type="logic_compare"></block>
34+
<block type="controls_repeat_ext"></block>
35+
<block type="math_number">
36+
<field name="NUM">123</field>
37+
</block>
38+
<block type="math_arithmetic"></block>
39+
<block type="text"></block>
40+
<block type="text_print"></block>
41+
</xml>
42+
43+
<script>
44+
var demoWorkspace = Blockly.inject('blocklyDiv',
45+
{media: 'https://unpkg.com/blockly/media/',
46+
toolbox: document.getElementById('toolbox')});
47+
</script>
48+
49+
</body>
50+
</html>

‎examples/fixed-demo/package.json

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "blockly-fixed-demo",
3+
"version": "0.0.0",
4+
"private": true,
5+
"demoConfig": {
6+
"title": "Fixed Blockly",
7+
"description": "Inject Blockly into a page as a fixed element.",
8+
"files": [
9+
"index.html"
10+
]
11+
}
12+
}

0 commit comments

Comments
 (0)