From 816f9fbbb7575f8c1f5990be9e1d4f0cad526417 Mon Sep 17 00:00:00 2001 From: Agriya Dev5 Date: Tue, 29 Dec 2020 23:21:47 +0530 Subject: [PATCH] #process_cancel alert and process_cancel changes --- src/editor/dialogs/index.js | 1 + src/editor/dialogs/seAlertDialog.js | 107 ++---------------- src/editor/dialogs/sePromptDialog.js | 83 ++++++++++++++ src/editor/extensions/ext-imagelib/index.js | 5 +- .../extensions/ext-imagelib/openclipart.js | 4 +- .../extensions/ext-mathjax/ext-mathjax.js | 6 +- .../ext-server_moinsave.js | 4 +- .../ext-webappfind/ext-webappfind.js | 4 +- src/editor/panels/LayersPanel.js | 11 +- src/editor/panels/TopPanelHandlers.js | 5 +- src/editor/svgedit.js | 49 ++++---- 11 files changed, 127 insertions(+), 152 deletions(-) create mode 100644 src/editor/dialogs/sePromptDialog.js 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 3ae405e2..2d178ee8 100644 --- a/src/editor/dialogs/seAlertDialog.js +++ b/src/editor/dialogs/seAlertDialog.js @@ -1,104 +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', 'type', '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.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; - } - } - /** - * @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 type () { - return this.getAttribute('type'); - } +const dialog = new AlertDialog(); +const seAlert = (type, text) => { + dialog.textContent = text; + dialog.choices = (type === 'alert') ? ['Ok'] : ['Cancel']; + dialog.open(); +}; - /** - * @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 -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/index.js b/src/editor/extensions/ext-imagelib/index.js index 84835d42..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,8 +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; + 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 c1dbb0a5..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,8 +40,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'; + 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 b9108506..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,9 +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.'; + 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 51efa601..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,8 +65,7 @@ export default { `).appendTo('body') .submit().remove(); - document.getElementById('se-alert-dialog').setAttribute('type', 'alert'); - document.getElementById('se-alert-dialog').title = strings.saved; + seAlert('alert', strings.saved); top.window.location = '/' + name; } }); diff --git a/src/editor/extensions/ext-webappfind/ext-webappfind.js b/src/editor/extensions/ext-webappfind/ext-webappfind.js index 70ed0610..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,8 +64,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}!`; + 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 3c160a71..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,8 +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; + seAlert('alert', this.uiStrings.notification.dupeLayerName); return; } this.svgCanvas.createLayer(newName); @@ -191,8 +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').setAttribute('type', 'alert'); - document.getElementById('se-alert-dialog').title = this.uiStrings.notification.dupeLayerName; + seAlert('alert', this.uiStrings.notification.dupeLayerName); return; } this.svgCanvas.cloneLayer(newName); @@ -237,8 +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').setAttribute('type', 'alert'); - 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 3fb4ee04..10d14179 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,8 +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; + seAlert('alert', this.uiStrings.notification.invalidAttrValGiven); return false; } diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js index 3d140a11..3b31034a 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 */ /** * 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,8 +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; + seAlert('alert', note); } } }; @@ -474,8 +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').setAttribute('type', 'alert'); - document.getElementById('se-alert-dialog').title = uiStrings.notification.popupWindowBlocked; + seAlert('alert', uiStrings.notification.popupWindowBlocked); return; } @@ -791,7 +789,7 @@ editor.init = () => { } if (editor.configObj.urldata.storagePrompt !== true && editor.storagePromptState === 'ignore') { - document.getElementById('se-alert-dialog').setAttribute('close', true); + document.getElementById('se-prompt-dialog').setAttribute('close', true); } }; @@ -1904,17 +1902,16 @@ 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; + 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 @@ -2004,8 +2001,7 @@ editor.init = () => { }); $('#url_notice').click(() => { - document.getElementById('se-alert-dialog').setAttribute('type', 'alert'); - document.getElementById('se-alert-dialog').title = this.title; + seAlert('alert', this.title); }); $('#stroke_width').val(editor.configObj.curConfig.initStroke.width); @@ -2442,14 +2438,13 @@ editor.init = () => { * @returns {void} */ const importImage = function (e) { - document.getElementById('se-alert-dialog').setAttribute('type', 'prompt_cancel'); - document.getElementById('se-alert-dialog').title = 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) { - document.getElementById('se-alert-dialog').setAttribute('close', true); + document.getElementById('se-prompt-dialog').setAttribute('close', true); return; } @@ -2470,7 +2465,7 @@ editor.init = () => { svgCanvas.alignSelectedElements('c', 'page'); // highlight imported element, otherwise we get strange empty selectbox svgCanvas.selectOnly([newElement]); - document.getElementById('se-alert-dialog').setAttribute('close', true); + document.getElementById('se-prompt-dialog').setAttribute('close', true); }; reader.readAsText(file); } else { @@ -2500,7 +2495,7 @@ editor.init = () => { svgCanvas.alignSelectedElements('m', 'page'); svgCanvas.alignSelectedElements('c', 'page'); editor.topPanelHandlers.updateContextPanel(); - document.getElementById('se-alert-dialog').setAttribute('close', true); + document.getElementById('se-prompt-dialog').setAttribute('close', true); }; // create dummy img so we know the default dimensions let imgWidth = 100; @@ -2528,8 +2523,7 @@ editor.init = () => { if (!ok) { return; } svgCanvas.clear(); if (this.files.length === 1) { - document.getElementById('se-alert-dialog').setAttribute('type', 'prompt_cancel'); - document.getElementById('se-alert-dialog').title = 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); @@ -2695,8 +2689,7 @@ editor.loadFromURL = function (url, {cache, noAlert} = {}) { dataType: 'text', cache: Boolean(cache), beforeSend () { - document.getElementById('se-alert-dialog').setAttribute('type', 'prompt_cancel'); - document.getElementById('se-alert-dialog').title = uiStrings.notification.loadingImage; + document.getElementById('se-prompt-dialog').title = uiStrings.notification.loadingImage; }, success (str) { loadSvgString(str, {noAlert}); @@ -2710,13 +2703,11 @@ 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; + seAlert('alert', uiStrings.notification.URLLoadFail + ': \n' + err); resolve(); }, complete () { - document.getElementById('se-alert-dialog').setAttribute('close', true); + document.getElementById('se-prompt-dialog').setAttribute('close', true); } }); });