Add autosave draft system for partage form with HTMX-based session persistence

- New fragment endpoint POST/GET /partage/fragments/draft.php:
  saves all form fields to PHP session, excludes file/csrf/slug fields
  GET returns JSON for JS hydration on page load
  rotates both global CSRF and share CSRF tokens in sync

- form.php accepts optional $formExtraAttrs and $showAutosaveStatus:
  allows injecting HTMX attributes and 'Brouillon enregistré' indicator

- renderShareLinkForm adds hx-post with change/input debounce trigger,
  loads autosave-handler.js, hydrate fields from draft on page load

- Draft cleared on successful form submission in handleShareLinkSubmission

- autosave-handler.js now also updates share_link_token hidden input
  when rotating CSRF token (partage form uses both csrf_token and share_link_token)

- Added .autosave-status CSS to form.css (was admin.css-only)

- Updated fragment routing to accept GET requests (needed for draft hydration)
This commit is contained in:
Pontoporeia
2026-06-11 10:32:53 +02:00
parent 4b37a05be3
commit 99125cc8e3
33 changed files with 1388 additions and 806 deletions

View File

@@ -6,4 +6,118 @@
/* eslint-disable */
!function(e,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(e=e||self).FilePondPluginFileValidateSize=i()}(this,function(){"use strict";var e=function(e){var i=e.addFilter,E=e.utils,l=E.Type,_=E.replaceInString,n=E.toNaturalFileSize;return i("ALLOW_HOPPER_ITEM",function(e,i){var E=i.query;if(!E("GET_ALLOW_FILE_SIZE_VALIDATION"))return!0;var l=E("GET_MAX_FILE_SIZE");if(null!==l&&e.size>l)return!1;var _=E("GET_MIN_FILE_SIZE");return!(null!==_&&e.size<_)}),i("LOAD_FILE",function(e,i){var E=i.query;return new Promise(function(i,l){if(!E("GET_ALLOW_FILE_SIZE_VALIDATION"))return i(e);var I=E("GET_FILE_VALIDATE_SIZE_FILTER");if(I&&!I(e))return i(e);var t=E("GET_MAX_FILE_SIZE");if(null!==t&&e.size>t)l({status:{main:E("GET_LABEL_MAX_FILE_SIZE_EXCEEDED"),sub:_(E("GET_LABEL_MAX_FILE_SIZE"),{filesize:n(t,".",E("GET_FILE_SIZE_BASE"),E("GET_FILE_SIZE_LABELS",E))})}});else{var L=E("GET_MIN_FILE_SIZE");if(null!==L&&e.size<L)l({status:{main:E("GET_LABEL_MIN_FILE_SIZE_EXCEEDED"),sub:_(E("GET_LABEL_MIN_FILE_SIZE"),{filesize:n(L,".",E("GET_FILE_SIZE_BASE"),E("GET_FILE_SIZE_LABELS",E))})}});else{var a=E("GET_MAX_TOTAL_FILE_SIZE");if(null!==a)if(E("GET_ACTIVE_ITEMS").reduce(function(e,i){return e+i.fileSize},0)>a)return void l({status:{main:E("GET_LABEL_MAX_TOTAL_FILE_SIZE_EXCEEDED"),sub:_(E("GET_LABEL_MAX_TOTAL_FILE_SIZE"),{filesize:n(a,".",E("GET_FILE_SIZE_BASE"),E("GET_FILE_SIZE_LABELS",E))})}});i(e)}}})}),{options:{allowFileSizeValidation:[!0,l.BOOLEAN],maxFileSize:[null,l.INT],minFileSize:[null,l.INT],maxTotalFileSize:[null,l.INT],fileValidateSizeFilter:[null,l.FUNCTION],labelMinFileSizeExceeded:["File is too small",l.STRING],labelMinFileSize:["Minimum file size is {filesize}",l.STRING],labelMaxFileSizeExceeded:["File is too large",l.STRING],labelMaxFileSize:["Maximum file size is {filesize}",l.STRING],labelMaxTotalFileSizeExceeded:["Maximum total size exceeded",l.STRING],labelMaxTotalFileSize:["Maximum total file size is {filesize}",l.STRING]}}};return"undefined"!=typeof window&&void 0!==window.document&&document.dispatchEvent(new CustomEvent("FilePond:pluginloaded",{detail:e})),e});
!((e, i) => {
"object" == typeof exports && "undefined" != typeof module
? (module.exports = i())
: "function" == typeof define && define.amd
? define(i)
: ((e = e || self).FilePondPluginFileValidateSize = i());
})(this, () => {
var e = (e) => {
var i = e.addFilter,
E = e.utils,
l = E.Type,
_ = E.replaceInString,
n = E.toNaturalFileSize;
return (
i("ALLOW_HOPPER_ITEM", (e, i) => {
var E = i.query;
if (!E("GET_ALLOW_FILE_SIZE_VALIDATION")) return !0;
var l = E("GET_MAX_FILE_SIZE");
if (null !== l && e.size > l) return !1;
var _ = E("GET_MIN_FILE_SIZE");
return !(null !== _ && e.size < _);
}),
i("LOAD_FILE", (e, i) => {
var E = i.query;
return new Promise((i, l) => {
if (!E("GET_ALLOW_FILE_SIZE_VALIDATION")) return i(e);
var I = E("GET_FILE_VALIDATE_SIZE_FILTER");
if (I && !I(e)) return i(e);
var t = E("GET_MAX_FILE_SIZE");
if (null !== t && e.size > t)
l({
status: {
main: E("GET_LABEL_MAX_FILE_SIZE_EXCEEDED"),
sub: _(E("GET_LABEL_MAX_FILE_SIZE"), {
filesize: n(
t,
".",
E("GET_FILE_SIZE_BASE"),
E("GET_FILE_SIZE_LABELS", E),
),
}),
},
});
else {
var L = E("GET_MIN_FILE_SIZE");
if (null !== L && e.size < L)
l({
status: {
main: E("GET_LABEL_MIN_FILE_SIZE_EXCEEDED"),
sub: _(E("GET_LABEL_MIN_FILE_SIZE"), {
filesize: n(
L,
".",
E("GET_FILE_SIZE_BASE"),
E("GET_FILE_SIZE_LABELS", E),
),
}),
},
});
else {
var a = E("GET_MAX_TOTAL_FILE_SIZE");
if (null !== a)
if (
E("GET_ACTIVE_ITEMS").reduce((e, i) => e + i.fileSize, 0) > a
)
return void l({
status: {
main: E("GET_LABEL_MAX_TOTAL_FILE_SIZE_EXCEEDED"),
sub: _(E("GET_LABEL_MAX_TOTAL_FILE_SIZE"), {
filesize: n(
a,
".",
E("GET_FILE_SIZE_BASE"),
E("GET_FILE_SIZE_LABELS", E),
),
}),
},
});
i(e);
}
}
});
}),
{
options: {
allowFileSizeValidation: [!0, l.BOOLEAN],
maxFileSize: [null, l.INT],
minFileSize: [null, l.INT],
maxTotalFileSize: [null, l.INT],
fileValidateSizeFilter: [null, l.FUNCTION],
labelMinFileSizeExceeded: ["File is too small", l.STRING],
labelMinFileSize: ["Minimum file size is {filesize}", l.STRING],
labelMaxFileSizeExceeded: ["File is too large", l.STRING],
labelMaxFileSize: ["Maximum file size is {filesize}", l.STRING],
labelMaxTotalFileSizeExceeded: [
"Maximum total size exceeded",
l.STRING,
],
labelMaxTotalFileSize: [
"Maximum total file size is {filesize}",
l.STRING,
],
},
}
);
};
return (
"undefined" != typeof window &&
void 0 !== window.document &&
document.dispatchEvent(
new CustomEvent("FilePond:pluginloaded", { detail: e }),
),
e
);
});