diff --git a/src/editor/dialogs/seAlertDialog.js b/src/editor/dialogs/seAlertDialog.js index 6d417f22..3ae405e2 100644 --- a/src/editor/dialogs/seAlertDialog.js +++ b/src/editor/dialogs/seAlertDialog.js @@ -18,7 +18,7 @@ export class SeAlertDialog extends HTMLElement { * @returns {any} observed */ static get observedAttributes () { - return ['title']; + return ['title', 'type', 'close']; } /** * @function attributeChangedCallback @@ -30,9 +30,24 @@ export class SeAlertDialog extends HTMLElement { attributeChangedCallback (name, oldValue, newValue) { switch (name) { case 'title': + if (this.dialog.opened) { + this.dialog.close(); + } this.dialog.textContent = newValue; this.dialog.open(); break; + case 'type': + if (newValue === 'prompt_cancel') { + this.dialog.choices = ['Cancel']; + } else { + this.dialog.choices = ['Ok']; + } + break; + case 'close': + if (this.dialog.opened) { + this.dialog.close(); + } + break; default: console.error('unkonw attr for:', name, 'newValue =', newValue); break; @@ -53,6 +68,36 @@ export class SeAlertDialog extends HTMLElement { set title (value) { this.setAttribute('title', value); } + /** + * @function get + * @returns {any} + */ + get type () { + return this.getAttribute('type'); + } + + /** + * @function set + * @returns {void} + */ + set type (value) { + this.setAttribute('type', value); + } + /** + * @function get + * @returns {any} + */ + get close () { + return this.getAttribute('close'); + } + + /** + * @function set + * @returns {void} + */ + set close (value) { + this.setAttribute('close', value); + } } // Register diff --git a/src/editor/extensions/ext-imagelib/ext-imagelib.js b/src/editor/extensions/ext-imagelib/ext-imagelib.js index e9931c16..88fd9887 100644 --- a/src/editor/extensions/ext-imagelib/ext-imagelib.js +++ b/src/editor/extensions/ext-imagelib/ext-imagelib.js @@ -181,11 +181,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..84835d42 100644 --- a/src/editor/extensions/ext-imagelib/index.js +++ b/src/editor/extensions/ext-imagelib/index.js @@ -32,6 +32,7 @@ $('a').click(function () { data = canvas.toDataURL(); } catch (err) { // This fails in Firefox with `file:///` URLs :( + document.getElementById('se-alert-dialog').setAttribute('type', 'alert'); document.getElementById('se-alert-dialog').title = 'Data URL conversion failed: ' + err; data = ''; } diff --git a/src/editor/extensions/ext-imagelib/openclipart.js b/src/editor/extensions/ext-imagelib/openclipart.js index d66b3e84..c1dbb0a5 100644 --- a/src/editor/extensions/ext-imagelib/openclipart.js +++ b/src/editor/extensions/ext-imagelib/openclipart.js @@ -39,6 +39,7 @@ async function processResults (url) { // console.log('json', json); if (!json || json.msg !== 'success') { + document.getElementById('se-alert-dialog').setAttribute('type', 'alert'); document.getElementById('se-alert-dialog').title = 'There was a problem downloading the results'; return; } diff --git a/src/editor/extensions/ext-mathjax/ext-mathjax.js b/src/editor/extensions/ext-mathjax/ext-mathjax.js index 85687cbe..b9108506 100644 --- a/src/editor/extensions/ext-mathjax/ext-mathjax.js +++ b/src/editor/extensions/ext-mathjax/ext-mathjax.js @@ -202,6 +202,7 @@ export default { }); } catch (e) { console.log('Failed loading MathJax.'); // eslint-disable-line no-console + document.getElementById('se-alert-dialog').setAttribute('type', 'alert'); // eslint-disable-next-line max-len document.getElementById('se-alert-dialog').title = '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..51efa601 100644 --- a/src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js +++ b/src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js @@ -64,6 +64,7 @@ export default { `).appendTo('body') .submit().remove(); + document.getElementById('se-alert-dialog').setAttribute('type', 'alert'); document.getElementById('se-alert-dialog').title = 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..fdbe99f6 100644 --- a/src/editor/extensions/ext-server_opensave/ext-server_opensave.js +++ b/src/editor/extensions/ext-server_opensave/ext-server_opensave.js @@ -245,9 +245,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..70ed0610 100644 --- a/src/editor/extensions/ext-webappfind/ext-webappfind.js +++ b/src/editor/extensions/ext-webappfind/ext-webappfind.js @@ -63,6 +63,7 @@ export default { } */ break; case 'save-end': + document.getElementById('se-alert-dialog').setAttribute('type', 'alert'); document.getElementById('se-alert-dialog').title = `save complete for pathID ${pathID}!`; break; default: diff --git a/src/editor/panels/LayersPanel.js b/src/editor/panels/LayersPanel.js index 400a3bd8..3c160a71 100644 --- a/src/editor/panels/LayersPanel.js +++ b/src/editor/panels/LayersPanel.js @@ -156,6 +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').setAttribute('type', 'alert'); document.getElementById('se-alert-dialog').title = this.uiStrings.notification.dupeLayerName; return; } @@ -190,6 +191,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').setAttribute('type', 'alert'); document.getElementById('se-alert-dialog').title = this.uiStrings.notification.dupeLayerName; return; } @@ -235,6 +237,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').setAttribute('type', 'alert'); document.getElementById('se-alert-dialog').title = this.uiStrings.notification.layerHasThatName; return; } diff --git a/src/editor/panels/TopPanelHandlers.js b/src/editor/panels/TopPanelHandlers.js index 2dac9259..3fb4ee04 100644 --- a/src/editor/panels/TopPanelHandlers.js +++ b/src/editor/panels/TopPanelHandlers.js @@ -403,6 +403,7 @@ class TopPanelHandlers { if (!valid) { e.target.value = this.selectedElement().getAttribute(attr); + document.getElementById('se-alert-dialog').setAttribute('type', 'alert'); document.getElementById('se-alert-dialog').title = this.uiStrings.notification.invalidAttrValGiven; return false; } diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index ce81af8f..3d140a11 100644 --- a/src/editor/svgedit.js +++ b/src/editor/svgedit.js @@ -456,6 +456,7 @@ editor.init = () => { editor.pref('save_notice_done', 'all'); } if (done !== 'part') { + document.getElementById('se-alert-dialog').setAttribute('type', 'alert'); document.getElementById('se-alert-dialog').title = note; } } @@ -473,6 +474,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').setAttribute('type', 'alert'); document.getElementById('se-alert-dialog').title = uiStrings.notification.popupWindowBlocked; return; } @@ -789,7 +791,7 @@ editor.init = () => { } if (editor.configObj.urldata.storagePrompt !== true && editor.storagePromptState === 'ignore') { - $('#dialog_box').hide(); + document.getElementById('se-alert-dialog').setAttribute('close', true); } }; @@ -1902,7 +1904,7 @@ editor.init = () => { const {title, w, h, save} = e.detail; // set document title svgCanvas.setDocumentTitle(title); - + document.getElementById('se-alert-dialog').setAttribute('type', 'alert'); if (w !== 'fit' && !isValidUnit('width', w)) { document.getElementById('se-alert-dialog').title = uiStrings.notification.invalidAttrValGiven; return false; @@ -1959,7 +1961,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) { @@ -2003,6 +2004,7 @@ editor.init = () => { }); $('#url_notice').click(() => { + document.getElementById('se-alert-dialog').setAttribute('type', 'alert'); document.getElementById('se-alert-dialog').title = this.title; }); @@ -2440,13 +2442,14 @@ editor.init = () => { * @returns {void} */ const importImage = function (e) { - $.process_cancel(uiStrings.notification.loadingImage); + document.getElementById('se-alert-dialog').setAttribute('type', 'prompt_cancel'); + document.getElementById('se-alert-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-alert-dialog').setAttribute('close', true); return; } @@ -2467,7 +2470,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-alert-dialog').setAttribute('close', true); }; reader.readAsText(file); } else { @@ -2497,7 +2500,7 @@ editor.init = () => { svgCanvas.alignSelectedElements('m', 'page'); svgCanvas.alignSelectedElements('c', 'page'); editor.topPanelHandlers.updateContextPanel(); - $('#dialog_box').hide(); + document.getElementById('se-alert-dialog').setAttribute('close', true); }; // create dummy img so we know the default dimensions let imgWidth = 100; @@ -2525,7 +2528,8 @@ editor.init = () => { if (!ok) { return; } svgCanvas.clear(); if (this.files.length === 1) { - $.process_cancel(uiStrings.notification.loadingImage); + document.getElementById('se-alert-dialog').setAttribute('type', 'prompt_cancel'); + document.getElementById('se-alert-dialog').title = uiStrings.notification.loadingImage; const reader = new FileReader(); reader.onloadend = async function ({target}) { await loadSvgString(target.result); @@ -2691,7 +2695,8 @@ editor.loadFromURL = function (url, {cache, noAlert} = {}) { dataType: 'text', cache: Boolean(cache), beforeSend () { - $.process_cancel(uiStrings.notification.loadingImage); + document.getElementById('se-alert-dialog').setAttribute('type', 'prompt_cancel'); + document.getElementById('se-alert-dialog').title = uiStrings.notification.loadingImage; }, success (str) { loadSvgString(str, {noAlert}); @@ -2705,11 +2710,13 @@ editor.loadFromURL = function (url, {cache, noAlert} = {}) { reject(new Error('URLLoadFail')); return; } + document.getElementById('se-alert-dialog').setAttribute('close', true); + document.getElementById('se-alert-dialog').setAttribute('type', 'alert'); document.getElementById('se-alert-dialog').title = uiStrings.notification.URLLoadFail + ': \n' + err; resolve(); }, complete () { - $('#dialog_box').hide(); + document.getElementById('se-alert-dialog').setAttribute('close', true); } }); });