From 0ac1b0e1e4461508320180d046cf3d2cd4ee2d91 Mon Sep 17 00:00:00 2001 From: Erik Brakkee Date: Tue, 13 Aug 2024 11:32:26 +0200 Subject: [PATCH] persistent forms now only leaks ther required event handler and not the functions it uses internally. --- static/js/persistentforms.js | 194 +++++++++++++++++------------------ 1 file changed, 92 insertions(+), 102 deletions(-) diff --git a/static/js/persistentforms.js b/static/js/persistentforms.js index ab24734..2135469 100644 --- a/static/js/persistentforms.js +++ b/static/js/persistentforms.js @@ -1,123 +1,113 @@ -function setCookie(name, value, days) { - let expires = ""; - if (days) { - const date = new Date(); - date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); - expires = "; expires=" + date.toUTCString(); - } - document.cookie = name + "=" + encodeURIComponent(value) + expires + "; path=/"; -} -function getCookie(name) { - const nameEQ = name + "="; - const ca = document.cookie.split(';'); - for(let i=0; i < ca.length; i++) { - let c = ca[i]; - while (c.charAt(0)==' ') c = c.substring(1,c.length); - if (c.indexOf(nameEQ) == 0) return decodeURIComponent(c.substring(nameEQ.length,c.length)); - } - return null; -} +saveFormToCookieEvent = (() => { -function saveFormToCookie(form) { - const formData = new FormData(form); - for (let element of form.elements) { - if (element.id) { - //console.log("Saving " + element.id) - if (element.type === 'checkbox') { - //console.log("Checkbox " + element.checked) - setCookie(element.id, element.checked ? 'true' : 'false', 7); - } else if (element.type === 'radio') { - if (element.checked) { - //console.log("Set cookie " + element.id + " " + element.value) - setCookie(element.id, element.value, 7); - } else { - //console.log("Set cookie " + element.id + " EMPTY") - setCookie(element.id, "", 7) - } - } else { - setCookie(element.id, element.value, 7); - } + function setCookie(name, value, days) { + let expires = ""; + if (days) { + const date = new Date(); + date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); + expires = "; expires=" + date.toUTCString(); } + document.cookie = name + "=" + encodeURIComponent(value) + expires + "; path=/"; } -} -function saveFormToCookieEvent(evt) { - //console.log("save form to cookie: " + evt.target) - form = evt.target - saveFormToCookie(form) -} - -function loadFormFromCookie(form) { - //console.log("Load form from cookie") - if (!form) { - return + function getCookie(name) { + const nameEQ = name + "="; + const ca = document.cookie.split(';'); + for (let i = 0; i < ca.length; i++) { + let c = ca[i]; + while (c.charAt(0) == ' ') c = c.substring(1, c.length); + if (c.indexOf(nameEQ) == 0) return decodeURIComponent(c.substring(nameEQ.length, c.length)); + } + return null; } - let updated = false - for (let element of form.elements) { - if (element.id) { - const value = getCookie(element.id); - //console.log("Loading " + element.id + " value: " + value) - if (value !== null) { + + function saveFormToCookie(form) { + const formData = new FormData(form); + for (let element of form.elements) { + if (element.id) { + //console.log("Saving " + element.id) if (element.type === 'checkbox') { - let newvalue = value === "true" - if (element.checked != newvalue) { - element.checked = newvalue - updated = true - } + //console.log("Checkbox " + element.checked) + setCookie(element.id, element.checked ? 'true' : 'false', 7); } else if (element.type === 'radio') { - let newvalue = element.value === value - if (element.checked != newvalue) { - element.checked = newvalue; - updated = true + if (element.checked) { + //console.log("Set cookie " + element.id + " " + element.value) + setCookie(element.id, element.value, 7); + } else { + //console.log("Set cookie " + element.id + " EMPTY") + setCookie(element.id, "", 7) } } else { - if (element.value != value) { - element.value = value; - updated = true - } + setCookie(element.id, element.value, 7); } } } } - if (updated) { - htmx.trigger(form, 'formdataloaded') + + let saveFormToCookieEvent = function(evt) { + //console.log("save form to cookie: " + evt.target) + form = evt.target + saveFormToCookie(form) } -} -function getPersistentForms() { - return document.getElementsByClassName("persistent-form"); -} - -function loadFormsFromCookie() { - let forms = getPersistentForms(); - for (let i = 0; i < forms.length; i++) { - loadFormFromCookie(forms[i]) + function loadFormFromCookie(form) { + //console.log("Load form from cookie") + if (!form) { + return + } + let updated = false + for (let element of form.elements) { + if (element.id) { + const value = getCookie(element.id); + //console.log("Loading " + element.id + " value: " + value) + if (value !== null) { + if (element.type === 'checkbox') { + let newvalue = value === "true" + if (element.checked != newvalue) { + element.checked = newvalue + updated = true + } + } else if (element.type === 'radio') { + let newvalue = element.value === value + if (element.checked != newvalue) { + element.checked = newvalue; + updated = true + } + } else { + if (element.value != value) { + element.value = value; + updated = true + } + } + } + } + } + if (updated) { + htmx.trigger(form, 'formdataloaded') + } } -} -// Most likely not needed. -/* -( () => { - let forms = getPersistentForms() - for (let i = 0; i < forms.length; i++) { - forms[i].addEventListener('change', function() { - saveFormToCookie(form) - }) - } - })() -*/ + function getPersistentForms() { + return document.getElementsByClassName("persistent-form"); + } -htmx.on('htmx:load', function(event) { - //console.log("htmx:load") - loadFormsFromCookie(); -}); + function loadFormsFromCookie() { + let forms = getPersistentForms(); + for (let i = 0; i < forms.length; i++) { + loadFormFromCookie(forms[i]) + } + } -htmx.on('htmx:afterSettle', function(event) { - //console.log("htmx:afterSettle") - loadFormsFromCookie(); -}); + htmx.on('htmx:load', function (event) { + //console.log("htmx:load") + loadFormsFromCookie(); + }); -// when hx-boost=false -// Load form data from cookie on page load -//document.addEventListener('DOMContentLoaded', loadFormFromCookie); + htmx.on('htmx:afterSettle', function (event) { + //console.log("htmx:afterSettle") + loadFormsFromCookie(); + }); + + return saveFormToCookieEvent +})()