move all storage related code to ext-storage

src/editor/components/seList.js

@@ -3,8 +3,20 @@ import 'elix/define/DropdownList.js';
 
 const template = document.createElement('template');
 template.innerHTML = `
-  <style>
-  </style>
+<style>
+[part~="source"] {
+  grid-template-columns: 20px 1fr auto;
+}
+::slotted(*) {
+  padding: 4px;
+  background: #E8E8E8;
+  border: 1px solid #B0B0B0;
+  width: 100%;
+}
+[part~="popup"] {
+  width: 150%;
+}
+</style>
   <label>Label</label>
   <elix-dropdown-list>
     <slot></slot>

src/editor/dialogs/index.js

@@ -7,4 +7,3 @@ import './seSelectDialog.js';
 import './seConfirmDialog.js';
 import './sePromptDialog.js';
 import './seAlertDialog.js';
-import './storageDialog.js';

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

@@ -18,6 +18,41 @@
  * @todo We might provide control of storage settings through the UI besides the
  *   initial (or URL-forced) dialog. *
 */
+import './storageDialog.js';
+
+/**
+ * Expire the storage cookie.
+ * @returns {void}
+ */
+const removeStoragePrefCookie = () => {
+  expireCookie('svgeditstore');
+};
+/**
+ * Set the cookie to expire.
+ * @param {string} cookie
+ * @returns {void}
+ */
+const expireCookie = (cookie) => {
+  document.cookie = encodeURIComponent(cookie) + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT';
+};
+
+/**
+ * Replace `storagePrompt` parameter within URL.
+ * @param {string} val
+ * @returns {void}
+ * @todo Replace the string manipulation with `searchParams.set`
+ */
+const replaceStoragePrompt = (val) => {
+  val = val ? 'storagePrompt=' + val : '';
+  const loc = top.location; // Allow this to work with the embedded editor as well
+  if (loc.href.includes('storagePrompt=')) {
+    loc.href = loc.href.replace(/([&?])storagePrompt=[^&]*(&?)/, function (n0, n1, amp) {
+      return (val ? n1 : '') + val + (!val && amp ? n1 : (amp || ''));
+    });
+  } else {
+    loc.href += (loc.href.includes('?') ? '&' : '?') + val;
+  }
+};
 
 export default {
   name: 'storage',
@@ -45,6 +80,48 @@ export default {
     } = svgEditor.configObj.curConfig;
     const {storage} = svgEditor;
 
+    // storageDialog added to DOM
+    const storageBox = document.createElement('se-storage-dialog');
+    storageBox.setAttribute('id', 'se-storage-dialog');
+    document.body.append(storageBox);
+
+    // manage the change in the storageDialog
+
+    storageBox.addEventListener('change', (e) => {
+      storageBox.setAttribute('dialog', 'close');
+      if (e?.detail?.trigger === 'ok') {
+        if (e?.detail?.select !== 'noPrefsOrContent') {
+          const storagePrompt = new URL(top.location).searchParams.get('storagePrompt');
+          document.cookie = 'svgeditstore=' + encodeURIComponent(e.detail.select) + '; expires=Fri, 31 Dec 9999 23:59:59 GMT';
+          if (storagePrompt === 'true' && e?.detail?.checkbox) {
+            replaceStoragePrompt();
+            return;
+          }
+        } else {
+          removeStoragePrefCookie();
+          if (svgEditor.configObj.curConfig.emptyStorageOnDecline && e?.detail?.checkbox) {
+            this.setSVGContentStorage('');
+            Object.keys(svgEditor.curPrefs).forEach((name) => {
+              name = 'svg-edit-' + name;
+              if (svgEditor.storage) {
+                svgEditor.storage.removeItem(name);
+              }
+              expireCookie(name);
+            });
+          }
+          if (e?.detail?.select && e?.detail?.checkbox) {
+            replaceStoragePrompt('false');
+            return;
+          }
+        }
+      } else if (e?.detail?.trigger === 'cancel') {
+        removeStoragePrefCookie();
+      }
+      setupBeforeUnloadListener();
+      svgEditor.storagePromptState = 'closed';
+      svgEditor.updateCanvas(true);
+    });
+
     /**
      * Sets SVG content as a string with "svgedit-" and the current
      *   canvas name as namespace.

src/editor/extensions/ext-storage/storageDialog.js

@@ -161,6 +161,22 @@ export class SeStorageDialog extends HTMLElement {
     this.$okBtn.addEventListener('click', (evt) => onSubmitHandler(evt, 'ok'));
     this.$cancelBtn.addEventListener('click', (evt) => onSubmitHandler(evt, 'cancel'));
   }
+  /**
+ * Sets SVG content as a string with "svgedit-" and the current
+ *   canvas name as namespace.
+ * @param {string} val
+ * @returns {void}
+ */
+  setSVGContentStorage (val) {
+    if (this.storage) {
+      const name = 'svgedit-' + this.configObj.curConfig.canvasName;
+      if (!val) {
+        this.storage.removeItem(name);
+      } else {
+        this.storage.setItem(name, val);
+      }
+    }
+  }
 }
 
 // Register

src/editor/panels/TopPanelHandlers.js

@@ -316,7 +316,7 @@ class TopPanelHandlers {
   * @returns {void}
   */
   clickUndo () {
-    const {undoMgr} = this.editor.canvas;
+    const {undoMgr} = this.editor.svgCanvas;
     if (undoMgr.getUndoStackSize() > 0) {
       undoMgr.undo();
       this.editor.layersPanel.populateLayers();
@@ -328,7 +328,7 @@ class TopPanelHandlers {
   * @returns {void}
   */
   clickRedo () {
-    const {undoMgr} = this.editor.canvas;
+    const {undoMgr} = this.editor.svgCanvas;
     if (undoMgr.getRedoStackSize() > 0) {
       undoMgr.redo();
       this.editor.layersPanel.populateLayers();

src/editor/svgedit.js

@@ -508,10 +508,6 @@ class Editor {
       const alertBox = document.createElement('se-alert-dialog');
       alertBox.setAttribute('id', 'se-alert-dialog');
       document.body.append(alertBox);
-      // storageDialog added to DOM
-      const storageBox = document.createElement('se-storage-dialog');
-      storageBox.setAttribute('id', 'se-storage-dialog');
-      document.body.append(storageBox);
       // promptDialog added to DOM
       const promptBox = document.createElement('se-prompt-dialog');
       promptBox.setAttribute('id', 'se-prompt-dialog');