#process_cancel alert and process_cancel changes

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';

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');
-  }
 
-  /**
+const dialog = new AlertDialog();
-   * @function set
+const seAlert = (type, text) => {
-   * @returns {void}
+  dialog.textContent = text;
-   */
+  dialog.choices = (type === 'alert') ? ['Ok'] : ['Cancel'];
-  set title (value) {
+  dialog.open();
-    this.setAttribute('title', value);
+};
-  }
-  /**
-   * @function get
-   * @returns {any}
-   */
-  get type () {
-    return this.getAttribute('type');
-  }
 
-  /**
+window.seAlert = seAlert;
-   * @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);

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);

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');
+        seAlert('alert', 'Data URL conversion failed: ' + err);
-        document.getElementById('se-alert-dialog').title = 'Data URL conversion failed: ' + err;
         data = '';
       }
       post({href, data});

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');
+    seAlert('alert', 'There was a problem downloading the results');
-    document.getElementById('se-alert-dialog').title = 'There was a problem downloading the results';
     return;
   }
   const {payload, info: {

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');
+              seAlert('alert', 'Failed loading MathJax. You will not be able to change the mathematics.');
-              // eslint-disable-next-line max-len
-              document.getElementById('se-alert-dialog').title = 'Failed loading MathJax. You will not be able to change the mathematics.';
             }
           }
         }

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 {
           <input type="hidden" name="contenttype" value="application/x-svgdraw">
         `).appendTo('body')
           .submit().remove();
-        document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
+        seAlert('alert', strings.saved);
-        document.getElementById('se-alert-dialog').title = strings.saved;
         top.window.location = '/' + name;
       }
     });

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');
+          seAlert('alert', `save complete for pathID ${pathID}!`);
-          document.getElementById('se-alert-dialog').title = `save complete for pathID ${pathID}!`;
           break;
         default:
           throw new Error('Unexpected WebAppFind event type');

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');
+      seAlert('alert', this.uiStrings.notification.dupeLayerName);
-      document.getElementById('se-alert-dialog').title = 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');
+      seAlert('alert', this.uiStrings.notification.dupeLayerName);
-      document.getElementById('se-alert-dialog').title = 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');
+      seAlert('alert', this.uiStrings.notification.layerHasThatName);
-      document.getElementById('se-alert-dialog').title = this.uiStrings.notification.layerHasThatName;
       return;
     }
     this.svgCanvas.renameCurrentLayer(newName);

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');
+      seAlert('alert', this.uiStrings.notification.invalidAttrValGiven);
-      document.getElementById('se-alert-dialog').title = this.uiStrings.notification.invalidAttrValGiven;
       return false;
     }
 

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
+    // promptDialog added to DOM
-    const alertBox = document.createElement('se-alert-dialog');
+    const promptBox = document.createElement('se-prompt-dialog');
-    alertBox.setAttribute('id', 'se-alert-dialog');
+    promptBox.setAttribute('id', 'se-prompt-dialog');
-    document.body.append(alertBox);
+    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');
+        seAlert('alert', note);
-        document.getElementById('se-alert-dialog').title = 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');
+      seAlert('alert', uiStrings.notification.popupWindowBlocked);
-      document.getElementById('se-alert-dialog').title = 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');
+    seAlert('alert', this.title);
-    document.getElementById('se-alert-dialog').title = 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-prompt-dialog').title = uiStrings.notification.loadingImage;
-      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) {
-        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-prompt-dialog').title = uiStrings.notification.loadingImage;
-        document.getElementById('se-alert-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-prompt-dialog').title = uiStrings.notification.loadingImage;
-          document.getElementById('se-alert-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);
+          seAlert('alert', uiStrings.notification.URLLoadFail + ': \n' + err);
-          document.getElementById('se-alert-dialog').setAttribute('type', 'alert');
-          document.getElementById('se-alert-dialog').title = uiStrings.notification.URLLoadFail + ': \n' + err;
           resolve();
         },
         complete () {
-          document.getElementById('se-alert-dialog').setAttribute('close', true);
+          document.getElementById('se-prompt-dialog').setAttribute('close', true);
         }
       });
     });