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