2019-11-21 09:06:16 +00:00
|
|
|
/* eslint-disable no-param-reassign, consistent-return */
|
2017-10-12 16:31:29 +00:00
|
|
|
|
2017-05-05 17:59:41 +00:00
|
|
|
import AccessorUtilities from './lib/utils/accessor';
|
2016-07-24 20:45:11 +00:00
|
|
|
|
2017-10-12 16:31:29 +00:00
|
|
|
export default class Autosave {
|
2020-04-27 15:10:16 +00:00
|
|
|
constructor(field, key, fallbackKey, lockVersion) {
|
2017-03-11 07:30:44 +00:00
|
|
|
this.field = field;
|
2022-09-15 12:13:55 +00:00
|
|
|
this.type = this.field.prop('type');
|
2021-09-16 18:11:32 +00:00
|
|
|
this.isLocalStorageAvailable = AccessorUtilities.canUseLocalStorage();
|
2017-03-11 07:30:44 +00:00
|
|
|
if (key.join != null) {
|
2017-08-13 11:02:31 +00:00
|
|
|
key = key.join('/');
|
2017-03-11 07:30:44 +00:00
|
|
|
}
|
2019-09-24 12:06:20 +00:00
|
|
|
this.key = `autosave/${key}`;
|
2019-11-21 09:06:16 +00:00
|
|
|
this.fallbackKey = fallbackKey;
|
2020-04-27 15:10:16 +00:00
|
|
|
this.lockVersionKey = `${this.key}/lockVersion`;
|
|
|
|
this.lockVersion = lockVersion;
|
2017-08-13 11:02:31 +00:00
|
|
|
this.field.data('autosave', this);
|
2017-03-11 07:30:44 +00:00
|
|
|
this.restore();
|
2018-07-17 23:58:01 +00:00
|
|
|
this.field.on('input', () => this.save());
|
2017-03-11 07:30:44 +00:00
|
|
|
}
|
2016-07-24 20:45:11 +00:00
|
|
|
|
2017-10-12 16:31:29 +00:00
|
|
|
restore() {
|
2017-05-05 17:59:41 +00:00
|
|
|
if (!this.isLocalStorageAvailable) return;
|
2018-02-28 00:10:43 +00:00
|
|
|
if (!this.field.length) return;
|
|
|
|
const text = window.localStorage.getItem(this.key);
|
2019-11-21 09:06:16 +00:00
|
|
|
const fallbackText = window.localStorage.getItem(this.fallbackKey);
|
2017-05-05 17:59:41 +00:00
|
|
|
|
2022-09-15 12:13:55 +00:00
|
|
|
if (this.type === 'checkbox') {
|
|
|
|
this.field.prop('checked', text || fallbackText);
|
|
|
|
} else if (text) {
|
2017-03-11 07:30:44 +00:00
|
|
|
this.field.val(text);
|
2019-11-21 09:06:16 +00:00
|
|
|
} else if (fallbackText) {
|
|
|
|
this.field.val(fallbackText);
|
2017-03-11 07:30:44 +00:00
|
|
|
}
|
2018-02-28 00:10:43 +00:00
|
|
|
|
|
|
|
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);
|
2018-06-21 12:22:40 +00:00
|
|
|
if (field) {
|
|
|
|
field.dispatchEvent(event);
|
|
|
|
}
|
2017-10-12 16:31:29 +00:00
|
|
|
}
|
2016-07-24 20:45:11 +00:00
|
|
|
|
2020-04-27 15:10:16 +00:00
|
|
|
getSavedLockVersion() {
|
|
|
|
if (!this.isLocalStorageAvailable) return;
|
|
|
|
return window.localStorage.getItem(this.lockVersionKey);
|
|
|
|
}
|
|
|
|
|
2017-10-12 16:31:29 +00:00
|
|
|
save() {
|
2018-02-28 00:10:43 +00:00
|
|
|
if (!this.field.length) return;
|
2022-09-15 12:13:55 +00:00
|
|
|
const value = this.type === 'checkbox' ? this.field.is(':checked') : this.field.val();
|
2018-02-28 00:10:43 +00:00
|
|
|
|
2022-09-15 12:13:55 +00:00
|
|
|
if (this.isLocalStorageAvailable && value) {
|
2019-11-21 09:06:16 +00:00
|
|
|
if (this.fallbackKey) {
|
2022-09-15 12:13:55 +00:00
|
|
|
window.localStorage.setItem(this.fallbackKey, value);
|
2019-11-21 09:06:16 +00:00
|
|
|
}
|
2020-04-27 15:10:16 +00:00
|
|
|
if (this.lockVersion !== undefined) {
|
|
|
|
window.localStorage.setItem(this.lockVersionKey, this.lockVersion);
|
|
|
|
}
|
2022-09-15 12:13:55 +00:00
|
|
|
return window.localStorage.setItem(this.key, value);
|
2017-03-11 07:30:44 +00:00
|
|
|
}
|
2017-05-05 17:59:41 +00:00
|
|
|
|
|
|
|
return this.reset();
|
2017-10-12 16:31:29 +00:00
|
|
|
}
|
2017-03-11 07:30:44 +00:00
|
|
|
|
2017-10-12 16:31:29 +00:00
|
|
|
reset() {
|
2017-05-05 17:59:41 +00:00
|
|
|
if (!this.isLocalStorageAvailable) return;
|
|
|
|
|
2020-04-27 15:10:16 +00:00
|
|
|
window.localStorage.removeItem(this.lockVersionKey);
|
2019-11-21 09:06:16 +00:00
|
|
|
window.localStorage.removeItem(this.fallbackKey);
|
2017-05-05 17:59:41 +00:00
|
|
|
return window.localStorage.removeItem(this.key);
|
2017-10-12 16:31:29 +00:00
|
|
|
}
|
2018-07-31 19:24:16 +00:00
|
|
|
|
|
|
|
dispose() {
|
2020-12-08 21:10:06 +00:00
|
|
|
// eslint-disable-next-line @gitlab/no-global-event-off
|
2018-07-31 19:24:16 +00:00
|
|
|
this.field.off('input');
|
|
|
|
}
|
2017-10-12 16:31:29 +00:00
|
|
|
}
|