diff options
Diffstat (limited to 'app/assets/javascripts/autosave.js')
-rw-r--r-- | app/assets/javascripts/autosave.js | 59 |
1 files changed, 30 insertions, 29 deletions
diff --git a/app/assets/javascripts/autosave.js b/app/assets/javascripts/autosave.js index 5ab66acaf80..2e187eae17c 100644 --- a/app/assets/javascripts/autosave.js +++ b/app/assets/javascripts/autosave.js @@ -1,56 +1,57 @@ -/* eslint-disable no-param-reassign, consistent-return */ - +import { parseBoolean } from '~/lib/utils/common_utils'; import AccessorUtilities from './lib/utils/accessor'; export default class Autosave { constructor(field, key, fallbackKey, lockVersion) { this.field = field; - this.type = this.field.prop('type'); + this.type = this.field.getAttribute('type'); this.isLocalStorageAvailable = AccessorUtilities.canUseLocalStorage(); - if (key.join != null) { - key = key.join('/'); - } - this.key = `autosave/${key}`; + this.key = Array.isArray(key) ? `autosave/${key.join('/')}` : `autosave/${key}`; this.fallbackKey = fallbackKey; this.lockVersionKey = `${this.key}/lockVersion`; this.lockVersion = lockVersion; - this.field.data('autosave', this); this.restore(); - this.field.on('input', () => this.save()); + this.saveAction = this.save.bind(this); + // used by app/assets/javascripts/deprecated_notes.js + this.field.$autosave = this; + this.field.addEventListener('input', this.saveAction); } restore() { if (!this.isLocalStorageAvailable) return; - if (!this.field.length) return; const text = window.localStorage.getItem(this.key); const fallbackText = window.localStorage.getItem(this.fallbackKey); + const newValue = text || fallbackText; + if (newValue == null) return; + + let originalValue = this.field.value; if (this.type === 'checkbox') { - this.field.prop('checked', text || fallbackText); - } else if (text) { - this.field.val(text); - } else if (fallbackText) { - this.field.val(fallbackText); + originalValue = this.field.checked; + this.field.checked = parseBoolean(newValue); + } else { + this.field.value = newValue; } - this.field.trigger('input'); - // v-model does not update with jQuery trigger - // https://github.com/vuejs/vue/issues/2804#issuecomment-216968137 - const event = new Event('change', { bubbles: true, cancelable: false }); - const field = this.field.get(0); - if (field) { - field.dispatchEvent(event); - } + if (originalValue === newValue) return; + this.triggerInputEvents(); + } + + triggerInputEvents() { + // trigger events so @input, @change and v-model trigger in Vue components + const inputEvent = new Event('input', { bubbles: true, cancelable: false }); + const changeEvent = new Event('change', { bubbles: true, cancelable: false }); + this.field.dispatchEvent(inputEvent); + this.field.dispatchEvent(changeEvent); } getSavedLockVersion() { - if (!this.isLocalStorageAvailable) return; + if (!this.isLocalStorageAvailable) return undefined; return window.localStorage.getItem(this.lockVersionKey); } save() { - if (!this.field.length) return; - const value = this.type === 'checkbox' ? this.field.is(':checked') : this.field.val(); + const value = this.type === 'checkbox' ? this.field.checked : this.field.value; if (this.isLocalStorageAvailable && value) { if (this.fallbackKey) { @@ -66,7 +67,7 @@ export default class Autosave { } reset() { - if (!this.isLocalStorageAvailable) return; + if (!this.isLocalStorageAvailable) return undefined; window.localStorage.removeItem(this.lockVersionKey); window.localStorage.removeItem(this.fallbackKey); @@ -74,7 +75,7 @@ export default class Autosave { } dispose() { - // eslint-disable-next-line @gitlab/no-global-event-off - this.field.off('input'); + delete this.field.$autosave; + this.field.removeEventListener('input', this.saveAction); } } |