import $ from 'jquery'; import Events from "../_events"; const FormStorage = (($) => { // Constants const NAME = 'jsFormStorage'; const DATA_KEY = NAME; const STORAGE = window.localStorage; class FormStorage { constructor(element) { const ui = this; const $element = $(element); const $elements = $element.find('input, textarea, select'); const setRangeValues = function(el) { const $el = $(el); $el.siblings('.value').text($el.val()); }; ui._element = element; $element.data(DATA_KEY, this); $element.addClass(`${NAME}-active`); // restore form data from localStorage $elements.each((i, el) => { const $el = $(el); const id = $el.attr('id'); const type = $el.attr('type'); const val = STORAGE.getItem(NAME + id); if (type === 'file') { return true; } if (id && val && type) { if (type && (type === 'checkbox' || type === 'radio')) { $el.prop('checked', val); } else { $el.val(val); } } $el.trigger(Events.RESTORE_FIELD); }); // range fields $('input[type="range"]').each((i, el) => { setRangeValues(el); }); $element.trigger(Events.RESTORE_FIELD); $('input[type="range"]').on('change', (e) => { setRangeValues(e.currentTarget); }); // store form data into localStorage $elements.on('change', (e) => { const $el = $(e.currentTarget); const id = $el.attr('id'); const type = $el.attr('type'); // skip some elements if ($el.hasClass('no-storage')) { return true; } let val = $el.val(); if (type && (type === 'checkbox' || type === 'radio')) { val = !!$el.is(':checked'); } if (id && type && type !== 'password') { STORAGE.setItem(NAME + id, val); } }); $element.on('submit', () => { $element.data(DATA_KEY).clear(); }); $element.find('button,[type="submit"],[type="clear"]').on('click', () => { $element.data(DATA_KEY).clear(); }); $element.addClass(`${NAME}-active`); $element.trigger(Events.FORM_INIT_STORAGE); } // Public methods dispose() { const $element = $(this._element); $element.removeClass(`${NAME}-active`); $.removeData(this._element, DATA_KEY); this._element = null; } clear() { STORAGE.clear(); } static _jQueryInterface() { if (typeof window.localStorage !== 'undefined') { return this.each(function() { // attach functionality to element const $element = $(this); let data = $element.data(DATA_KEY); if (!data) { data = new FormStorage(this); $element.data(DATA_KEY, data); } }); } } } // jQuery interface $.fn[NAME] = FormStorage._jQueryInterface; $.fn[NAME].Constructor = FormStorage; $.fn[NAME].noConflict = function() { $.fn[NAME] = JQUERY_NO_CONFLICT; return FormStorage._jQueryInterface; }; // auto-apply $(window).on(`${Events.AJAX} ${Events.LOADED}`, () => { $('form').each((i, el) => { const $el = $(el); // skip some forms if ($el.hasClass('no-storage')) { return true; } $el.jsFormStorage(); }); }); return FormStorage; })($); export default FormStorage;