svgedit
Version:
Powerful SVG-Editor for your browser
271 lines (255 loc) • 9.6 kB
JavaScript
/**
* @file ext-storage.js
*
* This extension allows automatic saving of the SVG canvas contents upon
* page unload (which can later be automatically retrieved upon future
* editor loads).
*
* The functionality was originally part of the SVG Editor, but moved to a
* separate extension to make the setting behavior optional, and adapted
* to inform the user of its setting of local data.
*
* @license MIT
*
* @copyright 2010 Brett Zamir
* @todo Revisit on whether to use `svgEditor.pref` over directly setting
* `curConfig` in all extensions for a more public API (not only for `extPath`
* and `imagePath`, but other currently used config in the extensions)
* @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',
init () {
const svgEditor = this
const { svgCanvas, storage } = svgEditor
// We could empty any already-set data for users when they decline storage,
// but it would be a risk for users who wanted to store but accidentally
// said "no"; instead, we'll let those who already set it, delete it themselves;
// to change, set the "emptyStorageOnDecline" config setting to true
// in svgedit-config-iife.js/svgedit-config-es.js.
const {
// When the code in svg-editor.js prevents local storage on load per
// user request, we also prevent storing on unload here so as to
// avoid third-party sites making XSRF requests or providing links
// which would cause the user's local storage not to load and then
// upon page unload (such as the user closing the window), the storage
// would thereby be set with an empty value, erasing any of the
// user's prior work. To change this behavior so that no use of storage
// or adding of new storage takes place regardless of settings, set
// the "noStorageOnLoad" config setting to true in svgedit-config-*.js.
noStorageOnLoad,
forceStorage,
canvasName
} = svgEditor.configObj.curConfig
// LOAD STORAGE CONTENT IF ANY
if (
storage && // Cookies do not have enough available memory to hold large documents
(forceStorage ||
(!noStorageOnLoad &&
/(?:^|;\s*)svgeditstore=prefsAndContent/.test(document.cookie)))
) {
const key = 'svgedit-' + canvasName
const cached = storage.getItem(key)
if (cached) {
svgEditor.loadFromString(cached)
const name = storage.getItem(`title-${key}`) ?? 'untitled.svg'
svgEditor.topPanel.updateTitle(name)
svgEditor.layersPanel.populateLayers()
}
}
// storageDialog added to DOM
const storageBox = document.createElement('se-storage-dialog')
storageBox.setAttribute('id', 'se-storage-dialog')
svgEditor.$container.append(storageBox)
storageBox.init(svgEditor.i18next)
// 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
) {
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.
* @param {string} svgString
* @returns {void}
*/
const setSvgContentStorage = svgString => {
const name = `svgedit-${svgEditor.configObj.curConfig.canvasName}`
if (!svgString) {
storage.removeItem(name)
storage.removeItem(`${name}-title`)
} else {
storage.setItem(name, svgString)
storage.setItem(`title-${name}`, svgEditor.title)
}
}
/**
* Listen for unloading: If and only if opted in by the user, set the content
* document and preferences into storage:
* 1. Prevent save warnings (since we're automatically saving unsaved
* content into storage)
* 2. Use localStorage to set SVG contents (potentially too large to allow in cookies)
* 3. Use localStorage (where available) or cookies to set preferences.
* @returns {void}
*/
const setupBeforeUnloadListener = () => {
window.addEventListener('beforeunload', function () {
// Don't save anything unless the user opted in to storage
if (
!/(?:^|;\s*)svgeditstore=(?:prefsAndContent|prefsOnly)/.test(
document.cookie
)
) {
return
}
if (/(?:^|;\s*)svgeditstore=prefsAndContent/.test(document.cookie)) {
setSvgContentStorage(svgCanvas.getSvgString())
}
svgEditor.setConfig({ no_save_warning: true }) // No need for explicit saving at all once storage is on
const { curPrefs } = svgEditor.configObj
Object.entries(curPrefs).forEach(([key, val]) => {
const store = val !== undefined
key = 'svg-edit-' + key
if (!store) {
return
}
if (storage) {
storage.setItem(key, val)
} else if (window.widget) {
window.widget.setPreferenceForKey(val, key)
} else {
val = encodeURIComponent(val)
document.cookie =
encodeURIComponent(key) +
'=' +
val +
'; expires=Fri, 31 Dec 9999 23:59:59 GMT'
}
})
})
}
let loaded = false
return {
name: 'storage',
callback () {
const storagePrompt = new URL(top.location).searchParams.get(
'storagePrompt'
)
// No need to run this one-time dialog again just because the user
// changes the language
if (loaded) {
return
}
loaded = true
// Note that the following can load even if "noStorageOnLoad" is
// set to false; to avoid any chance of storage, avoid this
// extension! (and to avoid using any prior storage, set the
// config option "noStorageOnLoad" to true).
if (
!forceStorage &&
// If the URL has been explicitly set to always prompt the
// user (e.g., so one can be pointed to a URL where one
// can alter one's settings, say to prevent future storage)...
(storagePrompt === 'true' ||
// ...or...if the URL at least doesn't explicitly prevent a
// storage prompt (as we use for users who
// don't want to set cookies at all but who don't want
// continual prompts about it)...
(storagePrompt !== 'false' &&
// ...and this user hasn't previously indicated a desire for storage
!/(?:^|;\s*)svgeditstore=(?:prefsAndContent|prefsOnly)/.test(
document.cookie
)))
// ...then show the storage prompt.
) {
const options = Boolean(storage)
// Open select-with-checkbox dialog
// From svg-editor.js
svgEditor.storagePromptState = 'waiting'
const $storageDialog = document.getElementById('se-storage-dialog')
$storageDialog.setAttribute('dialog', 'open')
$storageDialog.setAttribute('storage', options)
} else if (!noStorageOnLoad || forceStorage) {
setupBeforeUnloadListener()
}
}
}
}
}