erik/converge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

persistent forms now only leaks ther required event handler and not the functions it uses internally.

Browse Source
This commit is contained in:
Erik Brakkee 2024-08-13 11:32:26 +02:00
parent bac7a9a6f1
commit cfd8b79022
1 changed files with 92 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

194
static/js/persistentforms.js
View File

@ -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) { saveFormToCookieEvent = (() => {
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;
}
function saveFormToCookie(form) { function setCookie(name, value, days) {
const formData = new FormData(form); let expires = "";
for (let element of form.elements) { if (days) {
if (element.id) { const date = new Date();
//console.log("Saving " + element.id) date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
if (element.type === 'checkbox') { expires = "; expires=" + date.toUTCString();
//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);
}
} }
document.cookie = name + "=" + encodeURIComponent(value) + expires + "; path=/";
} }
}
function saveFormToCookieEvent(evt) { function getCookie(name) {
//console.log("save form to cookie: " + evt.target) const nameEQ = name + "=";
form = evt.target const ca = document.cookie.split(';');
saveFormToCookie(form) for (let i = 0; i < ca.length; i++) {
} let c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
function loadFormFromCookie(form) { if (c.indexOf(nameEQ) == 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
//console.log("Load form from cookie") }
if (!form) { return null;
return
} }
let updated = false
for (let element of form.elements) { function saveFormToCookie(form) {
if (element.id) { const formData = new FormData(form);
const value = getCookie(element.id); for (let element of form.elements) {
//console.log("Loading " + element.id + " value: " + value) if (element.id) {
if (value !== null) { //console.log("Saving " + element.id)
if (element.type === 'checkbox') { if (element.type === 'checkbox') {
let newvalue = value === "true" //console.log("Checkbox " + element.checked)
if (element.checked != newvalue) { setCookie(element.id, element.checked ? 'true' : 'false', 7);
element.checked = newvalue
updated = true
}
} else if (element.type === 'radio') { } else if (element.type === 'radio') {
let newvalue = element.value === value if (element.checked) {
if (element.checked != newvalue) { //console.log("Set cookie " + element.id + " " + element.value)
element.checked = newvalue; setCookie(element.id, element.value, 7);
updated = true } else {
//console.log("Set cookie " + element.id + " EMPTY")
setCookie(element.id, "", 7)
} }
} else { } else {
if (element.value != value) { setCookie(element.id, element.value, 7);
element.value = value;
updated = true
}
} }
} }
} }
} }
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() { function loadFormFromCookie(form) {
return document.getElementsByClassName("persistent-form"); //console.log("Load form from cookie")
} if (!form) {
return
function loadFormsFromCookie() { }
let forms = getPersistentForms(); let updated = false
for (let i = 0; i < forms.length; i++) { for (let element of form.elements) {
loadFormFromCookie(forms[i]) 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. function getPersistentForms() {
/* return document.getElementsByClassName("persistent-form");
( () => { }
let forms = getPersistentForms()
for (let i = 0; i < forms.length; i++) {
forms[i].addEventListener('change', function() {
saveFormToCookie(form)
})
}
})()
*/
htmx.on('htmx:load', function(event) { function loadFormsFromCookie() {
//console.log("htmx:load") let forms = getPersistentForms();
loadFormsFromCookie(); for (let i = 0; i < forms.length; i++) {
}); loadFormFromCookie(forms[i])
}
}
htmx.on('htmx:afterSettle', function(event) { htmx.on('htmx:load', function (event) {
//console.log("htmx:afterSettle") //console.log("htmx:load")
loadFormsFromCookie(); loadFormsFromCookie();
}); });
// when hx-boost=false htmx.on('htmx:afterSettle', function (event) {
// Load form data from cookie on page load //console.log("htmx:afterSettle")
//document.addEventListener('DOMContentLoaded', loadFormFromCookie); loadFormsFromCookie();
});
return saveFormToCookieEvent
})()