mirror of
https://github.com/google/blockly.git
synced 2026-01-31 04:30:11 +01:00
Adding a demo for custom dialogs.
This commit is contained in:
Andrew n marshall
@@ -1,101 +1,163 @@
|
||||
/**
|
||||
* Blockly Demos: Custom Dialogs
|
||||
*
|
||||
* Copyright 2016 Google Inc.
|
||||
* https://developers.google.com/blockly/
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
CustomDialog = {}
|
||||
|
||||
/** Override Blockly.alert() with custom implementation. */
|
||||
Blockly.alert = function(message, callback) {
|
||||
showDialog('Alert', message, {
|
||||
okay: callback
|
||||
});
|
||||
}
|
||||
console.log('Alert: ' + message);
|
||||
CustomDialog.show('Alert', message, {
|
||||
onCancel: callback
|
||||
});
|
||||
};
|
||||
|
||||
/** Override Blockly.confirm() with custom implementation. */
|
||||
Blockly.confirm = function(message, callback) {
|
||||
showDialog('Confirm', message, {
|
||||
showOkay: true,
|
||||
okay: function() {
|
||||
callback(true)
|
||||
},
|
||||
showCancel: true,
|
||||
cancel: function() {
|
||||
callback(false)
|
||||
}
|
||||
});
|
||||
}
|
||||
console.log('Confirm: ' + message);
|
||||
CustomDialog.show('Confirm', message, {
|
||||
showOkay: true,
|
||||
onOkay: function() {
|
||||
callback(true)
|
||||
},
|
||||
showCancel: true,
|
||||
onCancel: function() {
|
||||
callback(false)
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/** Override Blockly.prompt() with custom implementation. */
|
||||
Blockly.prompt = function(message, defaultValue, callback) {
|
||||
showDialog('Prompt', message, {
|
||||
showInput: true,
|
||||
showOkay: true,
|
||||
okay: function() {
|
||||
callback(dialogInput.value)
|
||||
},
|
||||
showCancel: true,
|
||||
cancel: function() {
|
||||
callback(null)
|
||||
}
|
||||
});
|
||||
dialogInput.value = defaultValue
|
||||
console.log('Prompt: ' + message);
|
||||
CustomDialog.show('Prompt', message, {
|
||||
showInput: true,
|
||||
showOkay: true,
|
||||
onOkay: function() {
|
||||
callback(CustomDialog.inputField.value)
|
||||
},
|
||||
showCancel: true,
|
||||
onCancel: function() {
|
||||
callback(null)
|
||||
}
|
||||
});
|
||||
CustomDialog.inputField.value = defaultValue;
|
||||
};
|
||||
|
||||
|
||||
CustomDialog.hide = function() {
|
||||
if (CustomDialog.backdropDiv_) {
|
||||
CustomDialog.backdropDiv_.style.display = 'none'
|
||||
CustomDialog.dialogDiv_.style.display = 'none'
|
||||
}
|
||||
}
|
||||
|
||||
// Implementation details below...
|
||||
var backdropDiv, dialogDiv, dialogInput
|
||||
/**
|
||||
* Shows the dialog.
|
||||
* Allowed options:
|
||||
* - showOkay: Whether to show the OK button.
|
||||
* - showCancel: Whether to show the Cancel button.
|
||||
* - showInput: Whether to show the text input field.
|
||||
* - onOkay: Callback to handle the okay button.
|
||||
* - onCancel: Callback to handle the cancel button.
|
||||
*/
|
||||
CustomDialog.show = function(title, message, options) {
|
||||
var backdropDiv = CustomDialog.backdropDiv_;
|
||||
var dialogDiv = CustomDialog.dialogDiv_;
|
||||
if (!dialogDiv) {
|
||||
// Generate HTML
|
||||
var body = document.getElementsByTagName('body')[0];
|
||||
backdropDiv = document.createElement('div');
|
||||
backdropDiv.setAttribute('id', 'backdrop');
|
||||
backdropDiv.style.cssText =
|
||||
'position: absolute;'
|
||||
+ 'top: 0px;'
|
||||
+ 'left: 0px;'
|
||||
+ 'right: 0px;'
|
||||
+ 'bottom: 0px;'
|
||||
+ 'background-color: rgba(0, 0, 0, 0.7);';
|
||||
body.appendChild(backdropDiv);
|
||||
|
||||
function hideDialog() {
|
||||
backdropDiv.style.display = 'none'
|
||||
dialogDiv.style.display = 'none'
|
||||
dialogDiv = document.createElement('div');
|
||||
dialogDiv.setAttribute('id', 'dialog');
|
||||
dialogDiv.style.cssText =
|
||||
'background-color: white;'
|
||||
+ 'width: 400px;'
|
||||
+ 'margin: 20px auto 0;'
|
||||
+ 'padding: 10px;';
|
||||
backdropDiv.appendChild(dialogDiv);
|
||||
|
||||
dialogDiv.onclick = function(event) {
|
||||
event.stopPropagation();
|
||||
};
|
||||
|
||||
CustomDialog.backdropDiv_ = backdropDiv;
|
||||
CustomDialog.dialogDiv_ = dialogDiv;
|
||||
}
|
||||
backdropDiv.style.display = 'block';
|
||||
dialogDiv.style.display = 'block';
|
||||
|
||||
dialogDiv.innerHTML = '<div id="dialogTitle"><strong>' + title + '</strong></div>'
|
||||
+ '<p>' + message + '</p>'
|
||||
+ (options.showInput? '<div><input id="dialogInput"></div>' : '')
|
||||
+ '<div class="buttons">'
|
||||
+ (options.showCancel ? '<button id="dialogCancel">Cancel</button>': '')
|
||||
+ (options.showOkay ? '<button id="dialogOkay">OK</button>': '')
|
||||
+ '</div>';
|
||||
|
||||
var onOkay = function(event) {
|
||||
CustomDialog.hide();
|
||||
options.onOkay && options.onOkay();
|
||||
event && event.stopPropagation();
|
||||
};
|
||||
var onCancel = function(event) {
|
||||
CustomDialog.hide();
|
||||
options.onCancel && options.onCancel();
|
||||
event && event.stopPropagation();
|
||||
};
|
||||
|
||||
var dialogInput = document.getElementById('dialogInput');
|
||||
CustomDialog.inputField = dialogInput;
|
||||
if (dialogInput) {
|
||||
dialogInput.focus();
|
||||
|
||||
dialogInput.onkeyup = function(event) {
|
||||
if (event.keyCode == 13) {
|
||||
// Process as OK when user hits enter.
|
||||
onOkay();
|
||||
return false;
|
||||
} else if (event.keyCode == 27) {
|
||||
// Process as cancel when user hits esc.
|
||||
onCancel();
|
||||
return false;
|
||||
}
|
||||
};
|
||||
} else {
|
||||
var okay = document.getElementById('dialogOkay');
|
||||
okay && okay.focus();
|
||||
}
|
||||
|
||||
if (options.showOkay) {
|
||||
document.getElementById('dialogOkay').onclick = onOkay;
|
||||
}
|
||||
if (options.showCancel) {
|
||||
document.getElementById('dialogCancel').onclick = onCancel;
|
||||
}
|
||||
|
||||
backdropDiv.onclick = onCancel;
|
||||
}
|
||||
|
||||
function showDialog(title, message, options) {
|
||||
if (!backdropDiv) {
|
||||
// Generate HTML
|
||||
var body = document.getElementsByTagName('body')[0]
|
||||
backdropDiv = document.createElement('div')
|
||||
backdropDiv.setAttribute('id', 'backdrop')
|
||||
body.appendChild(backdropDiv)
|
||||
|
||||
dialogDiv = document.createElement('div')
|
||||
dialogDiv.setAttribute('id', 'dialog')
|
||||
backdropDiv.appendChild(dialogDiv)
|
||||
dialogDiv.onclick = function(event) {
|
||||
event.stopPropagation()
|
||||
}
|
||||
|
||||
}
|
||||
backdropDiv.style.display = 'block'
|
||||
dialogDiv.style.display = 'block'
|
||||
|
||||
dialogDiv.innerHTML = '<div id="dialogTitle"><strong>' + title + '</strong></div>'
|
||||
+ '<p>' + message + '</p>'
|
||||
+ (options.showInput? '<div><input id="dialogInput"></div>' : '')
|
||||
+ '<div class="buttons">'
|
||||
+ (options.showCancel ? '<button id="dialogCancel">Cancel</button>': '')
|
||||
+ (options.showOkay ? '<button id="dialogOkay">OK</button>': '')
|
||||
+ '</div>'
|
||||
dialogInput = document.getElementById('dialogInput')
|
||||
|
||||
document.getElementById('dialogOkay').onclick = function(event) {
|
||||
hideDialog()
|
||||
if (options.okay) {
|
||||
options.okay()
|
||||
}
|
||||
event.stopPropagation()
|
||||
}
|
||||
document.getElementById('dialogCancel').onclick = function(event) {
|
||||
hideDialog()
|
||||
if (options.cancel) {
|
||||
options.cancel()
|
||||
}
|
||||
event.stopPropagation()
|
||||
}
|
||||
|
||||
backdropDiv.onclick = function(event) {
|
||||
hideDialog()
|
||||
if (options.cancel) {
|
||||
options.cancel();
|
||||
} else if (options.okay) {
|
||||
options.okay();
|
||||
}
|
||||
event.stopPropagation()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -15,20 +15,6 @@
|
||||
font-weight: normal;
|
||||
font-size: 140%;
|
||||
}
|
||||
#backdrop {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
#dialog {
|
||||
background-color: white;
|
||||
width: 400px;
|
||||
margin: 20px auto 0;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -43,202 +29,10 @@
|
||||
|
||||
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
|
||||
|
||||
<xml id="toolbox" style="display: none">
|
||||
<category name="Logic" colour="210">
|
||||
<block type="controls_if"></block>
|
||||
<block type="logic_compare"></block>
|
||||
<block type="logic_operation"></block>
|
||||
<block type="logic_negate"></block>
|
||||
<block type="logic_boolean"></block>
|
||||
<block type="logic_null" disabled="true"></block>
|
||||
<block type="logic_ternary"></block>
|
||||
</category>
|
||||
<category name="Loops" colour="120">
|
||||
<block type="controls_repeat_ext">
|
||||
<value name="TIMES">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">10</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="controls_repeat" disabled="true"></block>
|
||||
<block type="controls_whileUntil"></block>
|
||||
<block type="controls_for">
|
||||
<value name="FROM">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">1</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="TO">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">10</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="BY">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">1</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="controls_forEach"></block>
|
||||
<block type="controls_flow_statements"></block>
|
||||
</category>
|
||||
<category name="Math" colour="230">
|
||||
<xml id="toolbox" style="display: none">
|
||||
<category name="Inputs" colour="230">
|
||||
<block type="math_number" gap="32"></block>
|
||||
<block type="math_arithmetic">
|
||||
<value name="A">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">1</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="B">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">1</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="math_single">
|
||||
<value name="NUM">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">9</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="math_trig">
|
||||
<value name="NUM">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">45</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="math_constant"></block>
|
||||
<block type="math_number_property">
|
||||
<value name="NUMBER_TO_CHECK">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">0</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="math_round">
|
||||
<value name="NUM">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">3.1</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="math_on_list"></block>
|
||||
<block type="math_modulo">
|
||||
<value name="DIVIDEND">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">64</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="DIVISOR">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">10</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="math_constrain">
|
||||
<value name="VALUE">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">50</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="LOW">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">1</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="HIGH">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">100</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="math_random_int">
|
||||
<value name="FROM">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">1</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="TO">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">100</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="math_random_float"></block>
|
||||
</category>
|
||||
<category name="Text" colour="160">
|
||||
<block type="text"></block>
|
||||
<block type="text_join"></block>
|
||||
<block type="text_append">
|
||||
<value name="TEXT">
|
||||
<shadow type="text"></shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="text_length">
|
||||
<value name="VALUE">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">abc</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="text_isEmpty">
|
||||
<value name="VALUE">
|
||||
<shadow type="text">
|
||||
<field name="TEXT"></field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="text_indexOf">
|
||||
<value name="VALUE">
|
||||
<block type="variables_get">
|
||||
<field name="VAR">text</field>
|
||||
</block>
|
||||
</value>
|
||||
<value name="FIND">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">abc</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="text_charAt">
|
||||
<value name="VALUE">
|
||||
<block type="variables_get">
|
||||
<field name="VAR">text</field>
|
||||
</block>
|
||||
</value>
|
||||
</block>
|
||||
<block type="text_getSubstring">
|
||||
<value name="STRING">
|
||||
<block type="variables_get">
|
||||
<field name="VAR">text</field>
|
||||
</block>
|
||||
</value>
|
||||
</block>
|
||||
<block type="text_changeCase">
|
||||
<value name="TEXT">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">abc</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="text_trim">
|
||||
<value name="TEXT">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">abc</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="text_print">
|
||||
<value name="TEXT">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">abc</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="text_prompt_ext">
|
||||
<value name="TEXT">
|
||||
<shadow type="text">
|
||||
@@ -247,95 +41,6 @@
|
||||
</value>
|
||||
</block>
|
||||
</category>
|
||||
<category name="Lists" colour="260">
|
||||
<block type="lists_create_with">
|
||||
<mutation items="0"></mutation>
|
||||
</block>
|
||||
<block type="lists_create_with"></block>
|
||||
<block type="lists_repeat">
|
||||
<value name="NUM">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">5</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="lists_length"></block>
|
||||
<block type="lists_isEmpty"></block>
|
||||
<block type="lists_indexOf">
|
||||
<value name="VALUE">
|
||||
<block type="variables_get">
|
||||
<field name="VAR">list</field>
|
||||
</block>
|
||||
</value>
|
||||
</block>
|
||||
<block type="lists_getIndex">
|
||||
<value name="VALUE">
|
||||
<block type="variables_get">
|
||||
<field name="VAR">list</field>
|
||||
</block>
|
||||
</value>
|
||||
</block>
|
||||
<block type="lists_setIndex">
|
||||
<value name="LIST">
|
||||
<block type="variables_get">
|
||||
<field name="VAR">list</field>
|
||||
</block>
|
||||
</value>
|
||||
</block>
|
||||
<block type="lists_getSublist">
|
||||
<value name="LIST">
|
||||
<block type="variables_get">
|
||||
<field name="VAR">list</field>
|
||||
</block>
|
||||
</value>
|
||||
</block>
|
||||
<block type="lists_split">
|
||||
<value name="DELIM">
|
||||
<shadow type="text">
|
||||
<field name="TEXT">,</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="lists_sort"></block>
|
||||
</category>
|
||||
<category name="Colour" colour="20">
|
||||
<block type="colour_picker"></block>
|
||||
<block type="colour_random"></block>
|
||||
<block type="colour_rgb">
|
||||
<value name="RED">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">100</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="GREEN">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">50</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="BLUE">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">0</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
<block type="colour_blend">
|
||||
<value name="COLOUR1">
|
||||
<shadow type="colour_picker">
|
||||
<field name="COLOUR">#ff0000</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="COLOUR2">
|
||||
<shadow type="colour_picker">
|
||||
<field name="COLOUR">#3333ff</field>
|
||||
</shadow>
|
||||
</value>
|
||||
<value name="RATIO">
|
||||
<shadow type="math_number">
|
||||
<field name="NUM">0.5</field>
|
||||
</shadow>
|
||||
</value>
|
||||
</block>
|
||||
</category>
|
||||
<sep></sep>
|
||||
<category name="Variables" colour="330" custom="VARIABLE"></category>
|
||||
<category name="Functions" colour="290" custom="PROCEDURE"></category>
|
||||
|
||||
Reference in New Issue
Block a user