@stimulus-library/controllers/dist/element_save_controller.js

A library of useful controllers for Stimulus

import { BaseController, debounce, get as _get, set as _set } from "@stimulus-library/utilities";
import { useLocalStorage } from "@stimulus-library/mixins";
export class ElementSaveController extends BaseController {
    get _id() {
        if (this.hasIdValue) {
            return this.idValue;
        }
        const elementID = this.el.id;
        if (elementID !== "") {
            return elementID;
        }
        else {
            throw new Error(`No ID value to uniquely identify this element. Please either specify data-${this.identifier}-id-value or give this element an 'id' attribute. `);
        }
    }
    get _uniqueIdentifier() {
        const url = location.href;
        return `${url} ${this._id}`;
    }
    get _restoreOnLoad() {
        return this.hasRestoreOnLoadValue ? this.restoreOnLoadValue : true;
    }
    get _element() {
        return this.hasElementTarget ? this.elementTarget : this.el;
    }
    initialize() {
        this.save = debounce(this.save.bind(this), 300);
    }
    connect() {
        this._store = useLocalStorage(this, this._uniqueIdentifier);
        requestAnimationFrame(() => {
            if (this._restoreOnLoad) {
                this.restore();
            }
        });
    }
    clear(event) {
        if (event) {
            event.preventDefault();
        }
        this._store.clear();
        this.dispatchEvent(this._element, this.eventName("cleared"));
    }
    save(event) {
        if (event) {
            event.preventDefault();
        }
        const element = this._element;
        const attributes = this.attributesValue.split(" ");
        const data = {};
        attributes.forEach((attr) => data[attr] = _get(element, attr));
        this._store.value = data;
        this.dispatchEvent(element, this.eventName("save:success"));
    }
    restore(event) {
        if (event) {
            event.preventDefault();
        }
        const element = this._element;
        if (!this._store.isEmpty()) {
            const savedData = this._store.value;
            Object.keys(savedData).forEach((attr) => _set(element, attr, savedData[attr]));
            this.dispatchEvent(element, this.eventName("restore:success"));
        }
        else {
            this.dispatchEvent(element, this.eventName("restore:empty"));
        }
    }
}
ElementSaveController.targets = [
    "element",
];
ElementSaveController.values = {
    id: String,
    attributes: String,
    restoreOnLoad: Boolean,
};