@a2lix/symfony-collection
Version:
Manage your Symfony Form collection simply with vanilla JS
2 lines (1 loc) • 3.03 kB
JavaScript
;const d={};d.sfCollection=(()=>{let m;(n=>(n.ADD="add",n.REMOVE="remove"))(m||={});const o={collectionsSelector:"div[data-prototype]",entry:{add:{enabled:!0,prototype:`<button class="__class__" data-entry-action="${"add"}">__label__</button>`,class:"btn btn-primary btn-sm mt-2",label:"Add",customFn:null,onBeforeFn:null,onAfterFn:null},remove:{enabled:!0,prototype:`<button class="__class__" data-entry-action="${"remove"}">__label__</button>`,class:"btn btn-danger btn-sm mt-2",label:"Remove",customFn:null,onAfterFn:null}}},c=(e=o)=>{if(!("content"in document.createElement("template"))){console.error("HTML template will not working...");return}const t={...o,...e,entry:{add:{...o.entry.add,...e.entry?.add||{}},remove:{...o.entry.remove,...e.entry?.remove||{}}}};l(document.querySelectorAll(t.collectionsSelector),t)},l=(e,t)=>{e.length&&e.forEach(n=>{y(n,t)})},y=(e,t)=>{e.setAttribute("data-entry-index",e.children.length+""),(e.getAttribute("data-entry-add-enabled")??t.entry.add.enabled)&&u(e,t.entry.add),(e.getAttribute("data-entry-remove-enabled")??t.entry.remove.enabled)&&p(e,t.entry.remove),e.addEventListener("click",n=>b(n,t))},u=(e,t)=>{const n=(e.getAttribute("data-entry-add-prototype")??t.prototype).replace(/__class__/g,e.getAttribute("data-entry-add-class")??t.class).replace(/__label__/g,e.getAttribute("data-entry-add-label")??t.label);e.appendChild(a(n))},p=(e,t)=>{const n=i(e,t);Array.from(e.children).filter(r=>!r.hasAttribute("data-entry-action")).forEach(r=>{r.appendChild(n.cloneNode(!0))})},i=(e,t)=>{const n=(e.getAttribute("data-entry-remove-prototype")??t.prototype).replace(/__class__/g,e.getAttribute("data-entry-remove-class")??t.class).replace(/__label__/g,e.getAttribute("data-entry-remove-label")??t.label);return a(n)},b=(e,t)=>{if(!e.target.hasAttribute("data-entry-action"))return;e.preventDefault(),e.stopPropagation();const n=e.currentTarget.closest(t.collectionsSelector);switch(e.target.getAttribute("data-entry-action")){case"add":C(n,e.target,t);break;case"remove":E(n,e.target,t);break}},C=(e,t,n)=>{const r=g(e,n);if(n.entry.add.customFn){n.entry.add.customFn(e,t,r,n);return}_(e,t,r,n)},E=(e,t,n)=>{if(n.entry.remove.customFn){n.entry.remove.customFn(e,t,n);return}f(e,t,n)},g=(e,t)=>{const n=e.getAttribute("data-entry-index")??0;e.setAttribute("data-entry-index",+n+1+"");const r=e.getAttribute("data-prototype-name")??"__name__",A=e.getAttribute("data-prototype").replace(new RegExp(`${r}label__`,"g"),`!New! ${n}`).replace(new RegExp(r,"g"),n+""),s=a(A);return(e.getAttribute("data-entry-remove-enabled")??t.entry.remove.enabled)&&s.firstChild.appendChild(i(e,t.entry.remove)),s},_=(e,t,n,r)=>{r.entry.add.onBeforeFn?.(e,t,n),t.parentElement.insertBefore(n,t),l(t.previousElementSibling.querySelectorAll(r.collectionsSelector),r),r.entry.add.onAfterFn?.(e,t)},f=(e,t,n)=>{t.parentElement.remove(),n.entry.remove.onAfterFn?.(e,t)},a=e=>{const t=document.createElement("template");return t.innerHTML=e.trim(),t.content};return{init:c}})();export default d;