scratchfoundation/scratch-blocks
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-blocks.git synced 2025-08-28 22:10:31 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Addressing comments from #703

Browse source
This commit is contained in:
Andrew n marshall 2016-10-28 16:04:57 -07:00 • committed by GitHub
parent 0c015fd439
commit 0156f2e103
2 changed files with 124 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

2
core/workspace_svg.js
View file

@ -1010,7 +1010,7 @@ Blockly.WorkspaceSvg.prototype.showContextMenu_ = function(e) {
deleteNext(); deleteNext();
} else { } else {
Blockly.confirm(Blockly.Msg.DELETE_ALL_BLOCKS. Blockly.confirm(Blockly.Msg.DELETE_ALL_BLOCKS.
replace('%1',String(deleteList.length)), replace('%1', deleteList.length),
function(ok) { function(ok) {
if (ok) { if (ok) {
deleteNext(); deleteNext();

236
demos/custom-dialogs/custom-dialog.js
View file

@ -17,55 +17,62 @@
* limitations under the License. * limitations under the License.
*/ */
CustomDialog = {} /**
* An example implementation of how one might replace Blockly's browser
* dialogs. This is just an example, and applications are not encouraged to use
* it verbatim.
*
* @namespace
*/
CustomDialog = {};
/** Override Blockly.alert() with custom implementation. */ /** Override Blockly.alert() with custom implementation. */
Blockly.alert = function(message, callback) { Blockly.alert = function(message, callback) {
console.log('Alert: ' + message); console.log('Alert: ' + message);
CustomDialog.show('Alert', message, { CustomDialog.show('Alert', message, {
onCancel: callback onCancel: callback
}); });
}; };
/** Override Blockly.confirm() with custom implementation. */ /** Override Blockly.confirm() with custom implementation. */
Blockly.confirm = function(message, callback) { Blockly.confirm = function(message, callback) {
console.log('Confirm: ' + message); console.log('Confirm: ' + message);
CustomDialog.show('Confirm', message, { CustomDialog.show('Confirm', message, {
showOkay: true, showOkay: true,
onOkay: function() { onOkay: function() {
callback(true) callback(true)
}, },
showCancel: true, showCancel: true,
onCancel: function() { onCancel: function() {
callback(false) callback(false)
} }
}); });
}; };
/** Override Blockly.prompt() with custom implementation. */ /** Override Blockly.prompt() with custom implementation. */
Blockly.prompt = function(message, defaultValue, callback) { Blockly.prompt = function(message, defaultValue, callback) {
console.log('Prompt: ' + message); console.log('Prompt: ' + message);
CustomDialog.show('Prompt', message, { CustomDialog.show('Prompt', message, {
showInput: true, showInput: true,
showOkay: true, showOkay: true,
onOkay: function() { onOkay: function() {
callback(CustomDialog.inputField.value) callback(CustomDialog.inputField.value)
}, },
showCancel: true, showCancel: true,
onCancel: function() { onCancel: function() {
callback(null) callback(null)
} }
}); });
CustomDialog.inputField.value = defaultValue; CustomDialog.inputField.value = defaultValue;
}; };
/** Hides any currently visible dialog. */
CustomDialog.hide = function() { CustomDialog.hide = function() {
if (CustomDialog.backdropDiv_) { if (CustomDialog.backdropDiv_) {
CustomDialog.backdropDiv_.style.display = 'none' CustomDialog.backdropDiv_.style.display = 'none'
CustomDialog.dialogDiv_.style.display = 'none' CustomDialog.dialogDiv_.style.display = 'none'
} }
} };
/** /**
* Shows the dialog. * Shows the dialog.
@ -74,90 +81,93 @@ CustomDialog.hide = function() {
* - showCancel: Whether to show the Cancel button. * - showCancel: Whether to show the Cancel button.
* - showInput: Whether to show the text input field. * - showInput: Whether to show the text input field.
* - onOkay: Callback to handle the okay button. * - onOkay: Callback to handle the okay button.
* - onCancel: Callback to handle the cancel button. * - onCancel: Callback to handle the cancel button and backdrop clicks.
*/ */
CustomDialog.show = function(title, message, options) { CustomDialog.show = function(title, message, options) {
var backdropDiv = CustomDialog.backdropDiv_; var backdropDiv = CustomDialog.backdropDiv_;
var dialogDiv = CustomDialog.dialogDiv_; var dialogDiv = CustomDialog.dialogDiv_;
if (!dialogDiv) { if (!dialogDiv) {
// Generate HTML // Generate HTML
var body = document.getElementsByTagName('body')[0]; backdropDiv = document.createElement('div');
backdropDiv = document.createElement('div'); backdropDiv.id = 'customDialogBackdrop';
backdropDiv.setAttribute('id', 'backdrop'); backdropDiv.style.cssText =
backdropDiv.style.cssText = 'position: absolute;' +
'position: absolute;' 'top: 0; left: 0; right: 0; bottom: 0;' +
+ 'top: 0px;' 'background-color: rgba(0, 0, 0, .7);';
+ 'left: 0px;' document.body.appendChild(backdropDiv);
+ 'right: 0px;'
+ 'bottom: 0px;'
+ 'background-color: rgba(0, 0, 0, 0.7);';
body.appendChild(backdropDiv);
dialogDiv = document.createElement('div'); dialogDiv = document.createElement('div');
dialogDiv.setAttribute('id', 'dialog'); dialogDiv.id = 'customDialog';
dialogDiv.style.cssText = dialogDiv.style.cssText =
'background-color: white;' 'background-color: #fff;' +
+ 'width: 400px;' 'width: 400px;' +
+ 'margin: 20px auto 0;' 'margin: 20px auto 0;' +
+ 'padding: 10px;'; 'padding: 10px;';
backdropDiv.appendChild(dialogDiv); backdropDiv.appendChild(dialogDiv);
dialogDiv.onclick = function(event) { dialogDiv.onclick = function(event) {
event.stopPropagation(); 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.backdropDiv_ = backdropDiv;
CustomDialog.inputField = dialogInput; CustomDialog.dialogDiv_ = dialogDiv;
if (dialogInput) { }
dialogInput.focus(); backdropDiv.style.display = 'block';
dialogDiv.style.display = 'block';
dialogInput.onkeyup = function(event) { dialogDiv.innerHTML =
if (event.keyCode == 13) { '<header class="customDialogTitle"></header>' +
// Process as OK when user hits enter. '<p class="customDialogMessage"></p>' +
onOkay(); (options.showInput ? '<div><input id="customDialogInput"></div>' : '') +
return false; '<div class="customDialogButtons">' +
} else if (event.keyCode == 27) { (options.showCancel ? '<button id="customDialogCancel">Cancel</button>': '') +
// Process as cancel when user hits esc. (options.showOkay ? '<button id="customDialogOkay">OK</button>': '') +
onCancel(); '</div>';
return false; dialogDiv.getElementsByClassName('customDialogTitle')[0]
} .appendChild(document.createTextNode(title));
}; dialogDiv.getElementsByClassName('customDialogMessage')[0]
} else { .appendChild(document.createTextNode(message));
var okay = document.getElementById('dialogOkay');
okay && okay.focus();
}
if (options.showOkay) { var onOkay = function(event) {
document.getElementById('dialogOkay').onclick = onOkay; CustomDialog.hide();
} options.onOkay && options.onOkay();
if (options.showCancel) { event && event.stopPropagation();
document.getElementById('dialogCancel').onclick = onCancel; };
} var onCancel = function(event) {
CustomDialog.hide();
options.onCancel && options.onCancel();
event && event.stopPropagation();
};
backdropDiv.onclick = onCancel; var dialogInput = document.getElementById('customDialogInput');
} 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('customDialogOkay');
okay && okay.focus();
}
if (options.showOkay) {
document.getElementById('customDialogOkay')
.addEventListener('click', onOkay);
}
if (options.showCancel) {
document.getElementById('customDialogCancel')
.addEventListener('click', onCancel);
}
backdropDiv.onclick = onCancel;
};