diff --git a/core/workspace_svg.js b/core/workspace_svg.js index 8cdb06b6..80fe7e38 100644 --- a/core/workspace_svg.js +++ b/core/workspace_svg.js @@ -1010,7 +1010,7 @@ Blockly.WorkspaceSvg.prototype.showContextMenu_ = function(e) { deleteNext(); } else { Blockly.confirm(Blockly.Msg.DELETE_ALL_BLOCKS. - replace('%1',String(deleteList.length)), + replace('%1', deleteList.length), function(ok) { if (ok) { deleteNext(); diff --git a/demos/custom-dialogs/custom-dialog.js b/demos/custom-dialogs/custom-dialog.js index 77a79660..1892303a 100644 --- a/demos/custom-dialogs/custom-dialog.js +++ b/demos/custom-dialogs/custom-dialog.js @@ -17,55 +17,62 @@ * 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. */ Blockly.alert = function(message, callback) { - console.log('Alert: ' + message); - CustomDialog.show('Alert', message, { - onCancel: callback - }); + console.log('Alert: ' + message); + CustomDialog.show('Alert', message, { + onCancel: callback + }); }; /** Override Blockly.confirm() with custom implementation. */ Blockly.confirm = function(message, callback) { - console.log('Confirm: ' + message); - CustomDialog.show('Confirm', message, { - showOkay: true, - onOkay: function() { - callback(true) - }, - showCancel: true, - onCancel: 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) { - 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; + 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; }; - +/** Hides any currently visible dialog. */ CustomDialog.hide = function() { - if (CustomDialog.backdropDiv_) { - CustomDialog.backdropDiv_.style.display = 'none' - CustomDialog.dialogDiv_.style.display = 'none' - } -} + if (CustomDialog.backdropDiv_) { + CustomDialog.backdropDiv_.style.display = 'none' + CustomDialog.dialogDiv_.style.display = 'none' + } +}; /** * Shows the dialog. @@ -74,90 +81,93 @@ CustomDialog.hide = function() { * - 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. + * - onCancel: Callback to handle the cancel button and backdrop clicks. */ 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); + var backdropDiv = CustomDialog.backdropDiv_; + var dialogDiv = CustomDialog.dialogDiv_; + if (!dialogDiv) { + // Generate HTML + backdropDiv = document.createElement('div'); + backdropDiv.id = 'customDialogBackdrop'; + backdropDiv.style.cssText = + 'position: absolute;' + + 'top: 0; left: 0; right: 0; bottom: 0;' + + 'background-color: rgba(0, 0, 0, .7);'; + document.body.appendChild(backdropDiv); - 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 = document.createElement('div'); + dialogDiv.id = 'customDialog'; + dialogDiv.style.cssText = + 'background-color: #fff;' + + '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 = '
' + title + '
' - + '

' + message + '

' - + (options.showInput? '
' : '') - + '
' - + (options.showCancel ? '': '') - + (options.showOkay ? '': '') - + '
'; - - 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(); + dialogDiv.onclick = function(event) { + event.stopPropagation(); }; - var dialogInput = document.getElementById('dialogInput'); - CustomDialog.inputField = dialogInput; - if (dialogInput) { - dialogInput.focus(); + CustomDialog.backdropDiv_ = backdropDiv; + CustomDialog.dialogDiv_ = dialogDiv; + } + backdropDiv.style.display = 'block'; + dialogDiv.style.display = 'block'; - 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(); - } + dialogDiv.innerHTML = + '
' + + '

' + + (options.showInput ? '
' : '') + + '
' + + (options.showCancel ? '': '') + + (options.showOkay ? '': '') + + '
'; + dialogDiv.getElementsByClassName('customDialogTitle')[0] + .appendChild(document.createTextNode(title)); + dialogDiv.getElementsByClassName('customDialogMessage')[0] + .appendChild(document.createTextNode(message)); - if (options.showOkay) { - document.getElementById('dialogOkay').onclick = onOkay; - } - if (options.showCancel) { - document.getElementById('dialogCancel').onclick = onCancel; - } + 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(); + }; - 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; +};