diff --git a/src/editor/dialogs/index.js b/src/editor/dialogs/index.js index e45048fd..1278f74d 100644 --- a/src/editor/dialogs/index.js +++ b/src/editor/dialogs/index.js @@ -5,4 +5,5 @@ import './cmenuDialog.js'; import './cmenuLayersDialog.js'; import './seSelectDialog.js'; import './seConfirmDialog.js'; +import './sePromptDialog.js'; import './seAlertDialog.js'; diff --git a/src/editor/dialogs/seAlertDialog.js b/src/editor/dialogs/seAlertDialog.js index 6d417f22..2d178ee8 100644 --- a/src/editor/dialogs/seAlertDialog.js +++ b/src/editor/dialogs/seAlertDialog.js @@ -1,59 +1,11 @@ // eslint-disable-next-line node/no-unpublished-import import AlertDialog from 'elix/define/AlertDialog.js'; -/** - * @class SeAlertDialog - */ -export class SeAlertDialog extends HTMLElement { - /** - * @function constructor - */ - constructor () { - super(); - // create the shadowDom and insert the template - this._shadowRoot = this.attachShadow({mode: 'open'}); - this.dialog = new AlertDialog(); - } - /** - * @function observedAttributes - * @returns {any} observed - */ - static get observedAttributes () { - return ['title']; - } - /** - * @function attributeChangedCallback - * @param {string} name - * @param {string} oldValue - * @param {string} newValue - * @returns {void} - */ - attributeChangedCallback (name, oldValue, newValue) { - switch (name) { - case 'title': - this.dialog.textContent = newValue; - this.dialog.open(); - break; - default: - console.error('unkonw attr for:', name, 'newValue =', newValue); - break; - } - } - /** - * @function get - * @returns {any} - */ - get title () { - return this.getAttribute('title'); - } - /** - * @function set - * @returns {void} - */ - set title (value) { - this.setAttribute('title', value); - } -} +const dialog = new AlertDialog(); +const seAlert = (type, text) => { + dialog.textContent = text; + dialog.choices = (type === 'alert') ? ['Ok'] : ['Cancel']; + dialog.open(); +}; -// Register -customElements.define('se-alert-dialog', SeAlertDialog); +window.seAlert = seAlert; diff --git a/src/editor/dialogs/sePromptDialog.js b/src/editor/dialogs/sePromptDialog.js new file mode 100644 index 00000000..10fdf802 --- /dev/null +++ b/src/editor/dialogs/sePromptDialog.js @@ -0,0 +1,83 @@ +// eslint-disable-next-line node/no-unpublished-import +import AlertDialog from 'elix/define/AlertDialog.js'; +/** + * @class SePromptDialog + */ +export class SePromptDialog extends HTMLElement { + /** + * @function constructor + */ + constructor () { + super(); + // create the shadowDom and insert the template + this._shadowRoot = this.attachShadow({mode: 'open'}); + this.dialog = new AlertDialog(); + } + /** + * @function observedAttributes + * @returns {any} observed + */ + static get observedAttributes () { + return ['title', 'close']; + } + /** + * @function attributeChangedCallback + * @param {string} name + * @param {string} oldValue + * @param {string} newValue + * @returns {void} + */ + attributeChangedCallback (name, oldValue, newValue) { + switch (name) { + case 'title': + if (this.dialog.opened) { + this.dialog.close(); + } + this.dialog.textContent = newValue; + this.dialog.choices = ['Cancel']; + this.dialog.open(); + break; + case 'close': + if (this.dialog.opened) { + this.dialog.close(); + } + break; + default: + console.error('unkonw attr for:', name, 'newValue =', newValue); + break; + } + } + /** + * @function get + * @returns {any} + */ + get title () { + return this.getAttribute('title'); + } + + /** + * @function set + * @returns {void} + */ + set title (value) { + this.setAttribute('title', value); + } + /** + * @function get + * @returns {any} + */ + get close () { + return this.getAttribute('close'); + } + + /** + * @function set + * @returns {void} + */ + set close (value) { + this.setAttribute('close', value); + } +} + +// Register +customElements.define('se-prompt-dialog', SePromptDialog); diff --git a/src/editor/extensions/ext-imagelib/ext-imagelib.js b/src/editor/extensions/ext-imagelib/ext-imagelib.js index e9931c16..10af6e74 100644 --- a/src/editor/extensions/ext-imagelib/ext-imagelib.js +++ b/src/editor/extensions/ext-imagelib/ext-imagelib.js @@ -1,3 +1,4 @@ +/* globals seConfirm */ /** * @file ext-imagelib.js * @@ -181,11 +182,9 @@ export default { const message = uiStrings.notification.retrieving.replace('%s', name); if (mode !== 'm') { - await $.process_cancel(message); + await seConfirm(message, [uiStrings.common.cancel]); transferStopped = true; // Should a message be sent back to the frame? - - $('#dialog_box').hide(); } else { entry = $('
').text(message).data('id', curMeta.id); preview.append(entry); diff --git a/src/editor/extensions/ext-imagelib/index.js b/src/editor/extensions/ext-imagelib/index.js index 2e48c220..3bbe9047 100644 --- a/src/editor/extensions/ext-imagelib/index.js +++ b/src/editor/extensions/ext-imagelib/index.js @@ -1,4 +1,4 @@ -/* globals jQuery */ +/* globals jQuery seAlert */ const $ = jQuery; $('a').click(function () { const {href} = this; @@ -32,7 +32,7 @@ $('a').click(function () { data = canvas.toDataURL(); } catch (err) { // This fails in Firefox with `file:///` URLs :( - document.getElementById('se-alert-dialog').title = 'Data URL conversion failed: ' + err; + seAlert('alert', 'Data URL conversion failed: ' + err); data = ''; } post({href, data}); diff --git a/src/editor/extensions/ext-imagelib/openclipart.js b/src/editor/extensions/ext-imagelib/openclipart.js index d66b3e84..d724528a 100644 --- a/src/editor/extensions/ext-imagelib/openclipart.js +++ b/src/editor/extensions/ext-imagelib/openclipart.js @@ -1,3 +1,4 @@ +/* globals seAlert */ // eslint-disable-next-line node/no-unpublished-import import {jml, body, nbsp} from 'jamilih'; // eslint-disable-next-line node/no-unpublished-import @@ -39,7 +40,7 @@ async function processResults (url) { // console.log('json', json); if (!json || json.msg !== 'success') { - document.getElementById('se-alert-dialog').title = 'There was a problem downloading the results'; + seAlert('alert', 'There was a problem downloading the results'); return; } const {payload, info: { diff --git a/src/editor/extensions/ext-mathjax/ext-mathjax.js b/src/editor/extensions/ext-mathjax/ext-mathjax.js index 85687cbe..c7a304b5 100644 --- a/src/editor/extensions/ext-mathjax/ext-mathjax.js +++ b/src/editor/extensions/ext-mathjax/ext-mathjax.js @@ -1,4 +1,4 @@ -/* globals MathJax */ +/* globals MathJax seAlert */ /** * @file ext-mathjax.js * @@ -202,8 +202,7 @@ export default { }); } catch (e) { console.log('Failed loading MathJax.'); // eslint-disable-line no-console - // eslint-disable-next-line max-len - document.getElementById('se-alert-dialog').title = 'Failed loading MathJax. You will not be able to change the mathematics.'; + seAlert('alert', 'Failed loading MathJax. You will not be able to change the mathematics.'); } } } diff --git a/src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js b/src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js index be51a83a..9249ed84 100644 --- a/src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js +++ b/src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js @@ -1,3 +1,4 @@ +/* globals seAlert */ /** * @file ext-server_moinsave.js * @@ -64,7 +65,7 @@ export default { `).appendTo('body') .submit().remove(); - document.getElementById('se-alert-dialog').title = strings.saved; + seAlert('alert', strings.saved); top.window.location = '/' + name; } }); diff --git a/src/editor/extensions/ext-server_opensave/ext-server_opensave.js b/src/editor/extensions/ext-server_opensave/ext-server_opensave.js index 5310aca4..0ec8b68c 100644 --- a/src/editor/extensions/ext-server_opensave/ext-server_opensave.js +++ b/src/editor/extensions/ext-server_opensave/ext-server_opensave.js @@ -1,3 +1,4 @@ +/* globals seConfirm */ /** * @file ext-server_opensave.js * @@ -245,9 +246,8 @@ export default { form.submit(); rebuildInput(form); - await $.process_cancel(strings.uploading); + await seConfirm(strings.uploading, ['Cancel']); cancelled = true; - $('#dialog_box').hide(); } if (form[0] === openSvgForm[0]) { diff --git a/src/editor/extensions/ext-webappfind/ext-webappfind.js b/src/editor/extensions/ext-webappfind/ext-webappfind.js index 176b226a..d878130c 100644 --- a/src/editor/extensions/ext-webappfind/ext-webappfind.js +++ b/src/editor/extensions/ext-webappfind/ext-webappfind.js @@ -1,3 +1,4 @@ +/* globals seAlert */ /** * Depends on Firefox add-on and executables from * {@link https://github.com/brettz9/webappfind}. @@ -63,7 +64,7 @@ export default { } */ break; case 'save-end': - document.getElementById('se-alert-dialog').title = `save complete for pathID ${pathID}!`; + seAlert('alert', `save complete for pathID ${pathID}!`); break; default: throw new Error('Unexpected WebAppFind event type'); diff --git a/src/editor/panels/LayersPanel.js b/src/editor/panels/LayersPanel.js index 400a3bd8..3a2a7e27 100644 --- a/src/editor/panels/LayersPanel.js +++ b/src/editor/panels/LayersPanel.js @@ -1,5 +1,5 @@ /* eslint-disable no-alert */ -/* globals $ */ +/* globals $ seAlert */ import SvgCanvas from '../../svgcanvas/svgcanvas.js'; const SIDEPANEL_MAXWIDTH = 300; @@ -156,7 +156,7 @@ class LayersPanel { const newName = prompt(this.uiStrings.notification.enterUniqueLayerName, uniqName); if (!newName) { return; } if (this.svgCanvas.getCurrentDrawing().hasLayer(newName)) { - document.getElementById('se-alert-dialog').title = this.uiStrings.notification.dupeLayerName; + seAlert('alert', this.uiStrings.notification.dupeLayerName); return; } this.svgCanvas.createLayer(newName); @@ -190,7 +190,7 @@ class LayersPanel { const newName = prompt(this.uiStrings.notification.enterUniqueLayerName, name); if (!newName) { return; } if (this.svgCanvas.getCurrentDrawing().hasLayer(newName)) { - document.getElementById('se-alert-dialog').title = this.uiStrings.notification.dupeLayerName; + seAlert('alert', this.uiStrings.notification.dupeLayerName); return; } this.svgCanvas.cloneLayer(newName); @@ -235,7 +235,7 @@ class LayersPanel { const newName = prompt(this.uiStrings.notification.enterNewLayerName, ''); if (!newName) { return; } if (oldName === newName || this.svgCanvas.getCurrentDrawing().hasLayer(newName)) { - document.getElementById('se-alert-dialog').title = this.uiStrings.notification.layerHasThatName; + seAlert('alert', this.uiStrings.notification.layerHasThatName); return; } this.svgCanvas.renameCurrentLayer(newName); diff --git a/src/editor/panels/TopPanelHandlers.js b/src/editor/panels/TopPanelHandlers.js index 09b31291..70045f66 100644 --- a/src/editor/panels/TopPanelHandlers.js +++ b/src/editor/panels/TopPanelHandlers.js @@ -1,4 +1,4 @@ -/* globals $ */ +/* globals $ seAlert */ import SvgCanvas from '../../svgcanvas/svgcanvas.js'; import {isValidUnit, getTypeMap, convertUnit} from '../../common/units.js'; @@ -403,7 +403,7 @@ class TopPanelHandlers { if (!valid) { e.target.value = this.selectedElement().getAttribute(attr); - document.getElementById('se-alert-dialog').title = this.uiStrings.notification.invalidAttrValGiven; + seAlert('alert', this.uiStrings.notification.invalidAttrValGiven); return false; } diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index cf8f3313..11752843 100644 --- a/src/editor/svgedit.js +++ b/src/editor/svgedit.js @@ -1,5 +1,5 @@ /* eslint-disable no-alert */ -/* globals jQuery seSelect */ +/* globals jQuery seSelect seAlert seConfirm */ /** * The main module for the visual SVG Editor. * @@ -222,10 +222,10 @@ editor.init = () => { const dialogBox = document.createElement('se-cmenu_canvas-dialog'); dialogBox.setAttribute('id', 'se-cmenu_canvas'); document.body.append(dialogBox); - // alertDialog added to DOM - const alertBox = document.createElement('se-alert-dialog'); - alertBox.setAttribute('id', 'se-alert-dialog'); - document.body.append(alertBox); + // promptDialog added to DOM + const promptBox = document.createElement('se-prompt-dialog'); + promptBox.setAttribute('id', 'se-prompt-dialog'); + document.body.append(promptBox); } catch (err) {} editor.configObj.load(); @@ -456,7 +456,7 @@ editor.init = () => { editor.pref('save_notice_done', 'all'); } if (done !== 'part') { - document.getElementById('se-alert-dialog').title = note; + seAlert('alert', note); } } }; @@ -473,7 +473,7 @@ editor.init = () => { exportWindow = window.open(blankPageObjectURL || '', exportWindowName); // A hack to get the window via JSON-able name without opening a new one if (!exportWindow || exportWindow.closed) { - document.getElementById('se-alert-dialog').title = uiStrings.notification.popupWindowBlocked; + seAlert('alert', uiStrings.notification.popupWindowBlocked); return; } @@ -789,7 +789,7 @@ editor.init = () => { } if (editor.configObj.urldata.storagePrompt !== true && editor.storagePromptState === 'ignore') { - $('#dialog_box').hide(); + document.getElementById('se-prompt-dialog').setAttribute('close', true); } }; @@ -1903,17 +1903,16 @@ editor.init = () => { const {title, w, h, save} = e.detail; // set document title svgCanvas.setDocumentTitle(title); - if (w !== 'fit' && !isValidUnit('width', w)) { - document.getElementById('se-alert-dialog').title = uiStrings.notification.invalidAttrValGiven; + seAlert('alert', uiStrings.notification.invalidAttrValGiven); return false; } if (h !== 'fit' && !isValidUnit('height', h)) { - document.getElementById('se-alert-dialog').title = uiStrings.notification.invalidAttrValGiven; + seAlert('alert', uiStrings.notification.invalidAttrValGiven); return false; } if (!svgCanvas.setResolution(w, h)) { - document.getElementById('se-alert-dialog').title = uiStrings.notification.noContentToFitTo; + seAlert('alert', uiStrings.notification.noContentToFitTo); return false; } // Set image save option @@ -1960,7 +1959,6 @@ editor.init = () => { * @returns {void} Resolves to `undefined` */ const cancelOverlays = async (e) => { - $('#dialog_box').hide(); const $editorDialog = document.getElementById('se-svg-editor-dialog'); const editingsource = $editorDialog.getAttribute('dialog') === 'open'; if (!editingsource && !docprops && !preferences) { @@ -2005,7 +2003,7 @@ editor.init = () => { }); $('#url_notice').click(() => { - document.getElementById('se-alert-dialog').title = this.title; + seAlert('alert', this.title); }); $('#stroke_width').val(editor.configObj.curConfig.initStroke.width); @@ -2442,13 +2440,13 @@ editor.init = () => { * @returns {void} */ const importImage = function (e) { - $.process_cancel(uiStrings.notification.loadingImage); + document.getElementById('se-prompt-dialog').title = uiStrings.notification.loadingImage; e.stopPropagation(); e.preventDefault(); $('#main_menu').hide(); const file = (e.type === 'drop') ? e.dataTransfer.files[0] : this.files[0]; if (!file) { - $('#dialog_box').hide(); + document.getElementById('se-prompt-dialog').setAttribute('close', true); return; } @@ -2469,7 +2467,7 @@ editor.init = () => { svgCanvas.alignSelectedElements('c', 'page'); // highlight imported element, otherwise we get strange empty selectbox svgCanvas.selectOnly([newElement]); - $('#dialog_box').hide(); + document.getElementById('se-prompt-dialog').setAttribute('close', true); }; reader.readAsText(file); } else { @@ -2499,7 +2497,7 @@ editor.init = () => { svgCanvas.alignSelectedElements('m', 'page'); svgCanvas.alignSelectedElements('c', 'page'); editor.topPanelHandlers.updateContextPanel(); - $('#dialog_box').hide(); + document.getElementById('se-prompt-dialog').setAttribute('close', true); }; // create dummy img so we know the default dimensions let imgWidth = 100; @@ -2527,7 +2525,7 @@ editor.init = () => { if (!ok) { return; } svgCanvas.clear(); if (this.files.length === 1) { - $.process_cancel(uiStrings.notification.loadingImage); + document.getElementById('se-prompt-dialog').title = uiStrings.notification.loadingImage; const reader = new FileReader(); reader.onloadend = async function ({target}) { await loadSvgString(target.result); @@ -2693,7 +2691,7 @@ editor.loadFromURL = function (url, {cache, noAlert} = {}) { dataType: 'text', cache: Boolean(cache), beforeSend () { - $.process_cancel(uiStrings.notification.loadingImage); + document.getElementById('se-prompt-dialog').title = uiStrings.notification.loadingImage; }, success (str) { loadSvgString(str, {noAlert}); @@ -2707,11 +2705,11 @@ editor.loadFromURL = function (url, {cache, noAlert} = {}) { reject(new Error('URLLoadFail')); return; } - document.getElementById('se-alert-dialog').title = uiStrings.notification.URLLoadFail + ': \n' + err; + seAlert('alert', uiStrings.notification.URLLoadFail + ': \n' + err); resolve(); }, complete () { - $('#dialog_box').hide(); + document.getElementById('se-prompt-dialog').setAttribute('close', true); } }); });