diff --git a/src/editor/components/seList.js b/src/editor/components/seList.js
index fbf3e73d..78e2521a 100644
--- a/src/editor/components/seList.js
+++ b/src/editor/components/seList.js
@@ -3,8 +3,20 @@ import 'elix/define/DropdownList.js';
const template = document.createElement('template');
template.innerHTML = `
-
+
diff --git a/src/editor/dialogs/index.js b/src/editor/dialogs/index.js
index 8201da2a..1278f74d 100644
--- a/src/editor/dialogs/index.js
+++ b/src/editor/dialogs/index.js
@@ -7,4 +7,3 @@ import './seSelectDialog.js';
import './seConfirmDialog.js';
import './sePromptDialog.js';
import './seAlertDialog.js';
-import './storageDialog.js';
diff --git a/src/editor/extensions/ext-storage/ext-storage.js b/src/editor/extensions/ext-storage/ext-storage.js
index 8435ed72..8018cedf 100644
--- a/src/editor/extensions/ext-storage/ext-storage.js
+++ b/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.
diff --git a/src/editor/dialogs/storageDialog.js b/src/editor/extensions/ext-storage/storageDialog.js
similarity index 92%
rename from src/editor/dialogs/storageDialog.js
rename to src/editor/extensions/ext-storage/storageDialog.js
index 4797be7f..403d945d 100644
--- a/src/editor/dialogs/storageDialog.js
+++ b/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
diff --git a/src/editor/panels/TopPanelHandlers.js b/src/editor/panels/TopPanelHandlers.js
index 7764d595..cffddb3b 100644
--- a/src/editor/panels/TopPanelHandlers.js
+++ b/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();
diff --git a/src/editor/svgedit.js b/src/editor/svgedit.js
index 5bcef500..278e5c6c 100644
--- a/src/editor/svgedit.js
+++ b/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');