#process_cancel prompt changes to alertDialog and seConfirmDialog

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

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 = $('<div>').text(message).data('id', curMeta.id);
           preview.append(entry);

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

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

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

src/editor/extensions/ext-server_moinsave/ext-server_moinsave.js

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

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]) {

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:

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

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

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