| | |
|---|
| | | window.jvbPopulate=class{constructor(e,t={},a={},r={}){for(let[l,i]of Object.entries(t)){let t=e.querySelector(`[data-field="${l}"]`);t&&this.populateField(t,l,i,a,r)}}populateField(e,t,a,r={},l={}){if(e&&null!=a)switch(this.getFieldType(e)){case"image":this.populateImageField(e,t,a,r);break;case"gallery":this.populateGalleryField(e,t,a,r);break;case"repeater":this.populateRepeaterField(e,t,a,l);break;case"taxonomy":this.populateTaxonomyField(e,t,a);break;case"user":this.populateUserField(e,t,a);break;case"location":this.populateLocationField(e,t,a);break;case"set":case"checkbox":this.populateSetField(e,t,a);break;case"select":case"radio":this.populateSelectField(e,t,a);break;case"true_false":this.populateBooleanField(e,t,a);break;case"date":case"time":case"datetime":this.populateDateField(e,t,a);break;case"number":this.populateNumberField(e,t,a);break;case"textarea":e.querySelector(".editor-container")?this.populateEditorField(e,t,a):this.populateTextareaField(e,t,a);break;default:this.populateTextField(e,t,a)}}getFieldType(e){const t=["image","gallery","repeater","taxonomy","user","location","set","checkbox","select","radio","true_false","date","time","datetime","editor","number","text","textarea","email","url","tel","phone"];for(const a of t)if(e.classList.contains(a))return a;if(e.dataset.type)return e.dataset.type;const a=e.querySelector("input, select, textarea");if(a){if("TEXTAREA"===a.tagName)return"true"===a.dataset.editor?"editor":"textarea";if(a.type)return"checkbox"!==a.type||e.classList.contains("true_false")?a.type:"set"}return"text"}populateTextField(e,t,a){const r=e.querySelector(`[name="${t}"], input, textarea`);if(r&&(r.value=String(a||""),r.dataset.limit)){const t=e.querySelector(".char-count .current");t&&(t.textContent=r.value.length)}}populateTextareaField(e,t,a){const r=e.querySelector(`textarea[name="${t}"]`)||e.querySelector('textarea:not([data-editor="true"])');if(r){if(r.value,r.value=String(a||""),r.dispatchEvent(new Event("change",{bubbles:!0})),r.dataset.limit){const t=e.querySelector(".char-count .current");if(t){t.textContent=r.value.length;const a=parseInt(r.dataset.limit,10);r.value.length>=a?e.classList.add("reached"):e.classList.remove("reached")}}}else console.warn(`No textarea found for field ${t} in wrapper:`,e)}populateNumberField(e,t,a){const r=e.querySelector(`[name="${t}"], input[type="number"]`);r&&(r.value=Number(a)||0)}populateBooleanField(e,t,a){const r=e.querySelector(`[name="${t}"], input[type="checkbox"]`);r&&(r.checked=Boolean(a))}populateSelectField(e,t,a){const r=String(a||""),l=e.querySelector(`select[name="${t}"]`);if(l)return void(l.value=r);const i=e.querySelector(`input[type="radio"][name="${t}"][value="${r}"]`);i&&(i.checked=!0)}populateSetField(e,t,a){let r=a;if("string"==typeof a)try{r=JSON.parse(a)}catch(e){r=a.split(",").map((e=>e.trim()))}Array.isArray(r)||(r=[String(r)]),e.querySelectorAll(`input[type="checkbox"][name*="${t}"]`).forEach((e=>{e.checked=r.includes(e.value)}))}populateDateField(e,t,a){const r=e.querySelector(`[name="${t}"], input`);if(r&&a){let e=a;"object"==typeof a&&a.date&&(e=a.date);try{const t=new Date(e);if(!isNaN(t.getTime()))switch(r.type){case"date":r.value=t.toISOString().split("T")[0];break;case"time":r.value=t.toTimeString().slice(0,5);break;case"datetime-local":r.value=t.toISOString().slice(0,16);break;default:r.value=e}}catch(t){r.value=e}}}populateEditorField(e,t,a){const r=e.querySelector(`textarea[name="${t}"]`)||e.querySelector('textarea[data-editor="true"]')||e.querySelector("textarea");if(!r)return void console.warn(`Editor field ${t}: textarea not found`);const l=String(a||"");r.value=l;const i=e.querySelector(".editor");if(i){let e=null;if(i.__quill)e=i.__quill;else if(i.quill)e=i.quill;else if(window.Quill&&window.Quill.find)e=window.Quill.find(i);else if(window.Quill&&window.Quill.instances)for(let t of window.Quill.instances)if(t.container===i){e=t;break}e?(e.root.innerHTML=l,i.__quill=e):(console.warn(`Quill instance not found for ${t}, setting HTML directly`),i.innerHTML=l)}else console.warn(`Editor container not found for ${t}`);r.dispatchEvent(new Event("change",{bubbles:!0}))}populateLocationField(e,t,a){a&&"object"==typeof a&&["address","lat","lng","street","city","province","postal_code","country"].forEach((r=>{if(void 0!==a[r]){const l=e.querySelector(`[name="${t}_${r}"], [name="${r}"]`);l&&(l.value=String(a[r]||""))}}))}populateTaxonomyField(e,t,a){let r=[];if(Array.isArray(a))r=a.map((e=>String(e)));else if("string"==typeof a)try{const e=JSON.parse(a);r=Array.isArray(e)?e.map((e=>String(e))):[String(e)]}catch(e){r=a.split(",").map((e=>e.trim()))}else a&&(r=[String(a)]);if(0===r.length)return;const l=e.querySelector(`input[type="hidden"][name="${t}"]`);l&&(l.value=r.join(","))}populateUserField(e,t,a){this.populateTaxonomyField(e,t,a)}populateImageField(e,t,a,r={}){if(!a)return;const l=String(a).split(",").filter((e=>parseInt(e.trim())));if(0===l.length)return;const i=e.querySelector(`input[type="hidden"][name="${t}"]`);i&&(i.value=l.join(","));const o=e.querySelector(".item-grid"),n=e.querySelector(".file-upload-container");e.querySelector(".progress")?.remove(),o&&(window.removeChildren(o),l.forEach((e=>{let t=window.getTemplate("uploadItem"),a=t.querySelector("img"),l=t.querySelector("details"),i=window.getTemplate("uploadMeta");l.append(i),[a.src,a.alt,t.querySelector('[name="image-title"]').value,t.querySelector('[name="image-alt-text"]').value,t.querySelector('[name="image-caption"]').value]=[r[e].medium,r[e].alt,r[e].title,r[e].alt,r[e].caption],l.querySelector(".upload-meta > .hint")?.remove(),o.append(t)})),l.length>0&&n&&(n.hidden=!0))}populateGalleryField(e,t,a,r={}){this.populateImageField(e,t,a,r)}populateRepeaterField(e,t,a,r={}){if(!a||!Array.isArray(a))return;const l=e.querySelector(".repeater-items"),i=e.querySelector("template");l&&i?(window.removeChildren(l),a.forEach(((a,r)=>{if(!a||"object"!=typeof a)return;const o=window.getTemplate(i.className);if(!o)return void console.warn(`Repeater field ${t}: template not found`);o.id=`${e.closest("form").id}-${t}-row-${r}`,o.dataset.index=r;const n=o.querySelector(".row-number");n&&(n.textContent=`#${r+1}`),o.querySelectorAll("input, select, textarea").forEach((e=>{const l=e.name,i=`${t}:${r}:${l}`,o=`${t}-${r}-${l}-${e.value}`;e.name=i,e.id=o;const n=e.nextElementSibling;n&&"LABEL"===n.tagName&&(n.htmlFor=o),void 0!==a[l]&&this.populateRepeaterFieldValue(e,l,a[l])})),l.appendChild(o)}))):console.warn(`Repeater field ${t}: missing container or template`)}populateRepeaterFieldValue(e,t,a){switch(e.type){case"checkbox":e.checked=Boolean(a);break;case"radio":e.checked=e.value===String(a);break;default:e.value=String(a||"")}}}; |
|---|
| | | (()=>{class e{constructor(){this.templates=window.jvbTemplates,this.formHelper=window.jvbForm,this.defineTemplates(),this.data=null,this.form=null}populate(e,t={}){if(this.data=t,this.mergeRootData(),this.form=e,this.formHelper||(this.formHelper=window.jvbForm),this.formHelper){if(Object.hasOwn(this.data,"fields")&&0!==Object.keys(this.data.fields).length)for(let[t,i]of Object.entries(this.data.fields)){let a=e.querySelector(`[data-field="${t}"]`);a&&this.populateField(a,t,i,Object.hasOwn(this.data,"prefix")?this.data.prefix:null)}}else requestAnimationFrame(()=>{this.populate(e,t)})}mergeRootData(){["status","date","modified"].forEach(e=>{this.data.fields[`post_${e}`]=this.data[e]})}populateField(e,t,i,a=null){let l=this.formHelper.getFieldType(e);if(!l||this.isEmptyValue(t))return;const o={repeater:this.populateRepeater.bind(this),"tag-list":this.populateTagList.bind(this),group:this.populateGroup.bind(this),location:this.populateLocation.bind(this),selector:this.populateTaxonomy.bind(this),user:this.populateUser.bind(this),upload:this.populateUpload.bind(this),gallery:this.populateUpload.bind(this),image:this.populateUpload.bind(this),set:this.populateMultiValue.bind(this),checkbox:this.populateMultiValue.bind(this),select:this.populateSingleValue.bind(this),radio:this.populateSingleValue.bind(this),"true-false":this.populateBoolean.bind(this),"toggle-text":this.populateBoolean.bind(this),date:this.populateDate.bind(this),time:this.populateDate.bind(this),datetime:this.populateDate.bind(this),number:this.populateNumber.bind(this),textarea:this.populateTextarea.bind(this),quantity:this.populateNumber.bind(this)};Object.hasOwn(o,l)?o[l](e,t,i,a):this.populateText(e,t,i,a)}populateRepeater(e,t,i,a=null){const l=e.querySelector(".repeater-items");let o=e.querySelector("template")?.className??!1;if(l&&o){if("string"==typeof i)try{i=JSON.parse(i)}catch(e){i=[]}i&&!Array.isArray(i)&&"object"==typeof i&&(i=Object.values(i)),i&&Array.isArray(i)&&0!==i.length?(window.removeChildren(l),i.forEach((t,i)=>{const r={...t,index:i,repeater:e};a&&(r.prefix=a);const n=this.templates.create(o,r);if(!n)return;l.append(n);const s=this.formHelper.getForm(n);s&&this.formHelper.initializeFields(n,s);for(let[e,i]of Object.entries(t)){let t=n.querySelector(`[data-field="${e}"]`);t&&this.populateField(t,e,i,a)}})):window.removeChildren(l)}}populateTagList(e,t,i,a=null){const l=e.querySelector(".tag-items");let o=e.querySelector("template")?.className??!1;if(l&&o){if("string"==typeof i)try{i=JSON.parse(i)}catch(e){i=[]}i&&!Array.isArray(i)&&"object"==typeof i&&(i=Object.values(i)),i&&Array.isArray(i)&&0!==i.length?(window.removeChildren(l),i.forEach((i,r)=>{const n=this.templates.create(o,{label:this.getTagLabel(i,e.dataset.tagFormat??"first_field"),fieldName:t,...i});n&&(n.querySelectorAll('input[type="hidden"]').forEach(t=>{const l=t.dataset.field;l&&void 0!==i[l]&&(a&&window.prefixInput(t,a,e,!1,!0),t.value=i[l])}),l.append(n))})):window.removeChildren(l)}}getTagLabel(e,t){const i=Object.values(e).filter(e=>!this.isEmptyValue(e));switch(t){case"first_field":return i[0]??"New Item";case"all_fields":return i.join(", ")||"New Item";default:if(t.includes("{")){let i=t;for(const[t,a]of Object.entries(e))i=i.replace(`{${t}}`,a);return i}return e[t]??i[0]??"New Item"}}populateGroup(e,t,i,a=null){if(i&&"object"==typeof i){console.log(i,"Populating Group Value: ");for(let[t,l]of Object.entries(i)){let i=e.querySelector(`[data-field="${t}"]`);i&&this.populateField(i,t,l,a)}}}populateLocation(e,t,i,a=null){["address","lat","lng","street","city","province","postal_code","country"].forEach(t=>{if(Object.hasOwn(i,t)){let l=e.querySelector(`[data-location-field="${t}"]`);a&&l&&window.prefixInput(l,a,e,!1,!0),l&&(l.value=String(i[t]||""))}})}populateTaxonomy(e,t,i,a=null){let l=this.splitIDs(i);const o=e.querySelector(`input[type="hidden"][name="${t}"]`);o&&(a&&window.prefixInput(o,a,e,!1,!0),o.value=l.join(","),window.jvbSelector&&requestAnimationFrame(()=>{window.jvbSelector.updateFieldFromInput(o)}))}populateUser(e,t,i,a=null){this.populateTaxonomy(e,t,i,a)}populateUpload(e,t,i,a=null){if(e.dataset.subtype&&"timeline"===e.dataset.subtype)return void this.populateTimelineGallery(e,t,i,a);const l=this.splitIDs(i);if(0===l.length)return;const o=e.querySelector('input[type="hidden"]');o&&(a&&window.prefixInput(o,a,e,!1,!0),o.value=l.join(","));const r=e.querySelector(".item-grid");e.querySelector(".progress")?.remove(),r&&(window.removeChildren(r),l.forEach(e=>{let t=this.data.images[e]??{};t.field={config:{showMeta:!0}},t.id=e,r.append(this.templates.create("uploadItem",t));let i=r.children,a=Array.from(i).filter(t=>t.dataset.id===`${e}`);a=a[0]??!1,a&&this.populateUploadMeta(a,null,e)}))}populateUploadMeta(e,t,i,a=null){const l=e.querySelector('[data-field="image_data"]');if(!l)return;let o=this.data.images[i]??!1;if(!o)return;l.dataset.attachmentId=o.id,l.setAttribute("data-ignore","");const r=["image-title","image-alt-text","image-caption"];for(const t of r){const i=l.querySelector(`[data-field="image_data|${t}"] input, [data-field="image_data|${t}"] textarea`);i&&a&&window.prefixInput(i,a,e,!1,!0),i&&""!==o[t]&&(i.value=window.decodeHTMLEntities(o[t]))}}populateTimelineGallery(e,t,i,a=null){if(!i||!Array.isArray(i)||0===i.length)return;let l=e.querySelector(".item-grid");if(l){window.removeChildren(l),e.querySelector(".progress")?.remove();for(let e of i){a&&(e.prefix=a);let t=this.templates.create("timelineItem",e);t&&l.append(t)}}}populateMultiValue(e,t,i,a=null){if("string"==typeof i)try{i=JSON.parse(i)}catch(e){i=i.split(",").map(e=>e.trim())}Array.isArray(i)||(i=[String(i)]);let l=e.querySelector(`select[name="${t}"]`);if(l&&l.multiple){for(let e of l.options)e.selected=i.includes(e.value);a&&window.prefixInput(l,a,e,!1,!0)}else e.querySelectorAll(`input[type="checkbox"][name="${t}[]"], input[type="checkbox"][name="${t}"]`).forEach(t=>{a&&window.prefixInput(t,a,e,!1,!0),t.checked=i.includes(t.value)})}populateSingleValue(e,t,i,a=null){i=String(i||"");let l=e.querySelector(`select[name="${t}"]`);if(l)return a&&window.prefixInput(l,a,e,!1,!0),void(l.value=i);let o=e.querySelector(`input[type="radio"][value="${i}"], input[type="checkbox"][value="${i}"]`)||e.querySelector(`[name="${t}"][value="${i}"]`);o&&(a&&window.prefixInput(o,a,e,!1,!0),o.checked=!0),a&&e.querySelectorAll(`input[type="radio"],input[type="checkbox"], input[name="${t}"]`).forEach(t=>{t!==o&&window.prefixInput(o,a,e,!1,!0)})}populateBoolean(e,t,i,a=null){const l=e.querySelector(`[name="${t}"], input[type="checkbox"]`);l&&(a&&window.prefixInput(l,a,e,!1,!0),l.checked=Boolean(i))}populateDate(e,t,i,a=null){const l=e.querySelector(`[name="${t}"], input`);if(l){a&&window.prefixInput(l,a,e,!1,!0),"object"==typeof i&&Object.hasOwn(i,"date")&&(i=i.date);try{const e=new Date(i);if(!isNaN(e.getTime()))switch(l.type){case"date":l.value=e.toISOString().split("T")[0];break;case"time":l.value=e.toTimeString().slice(0,5);break;case"datetime-local":l.value=e.toISOString().slice(0,16);break;default:l.value=i}}catch(e){l.value=i}}}populateNumber(e,t,i,a=null){const l=e.querySelector(`[name="${t}"], input[type="number"]`);l&&(a&&window.prefixInput(l,a,e,!1,!0),l.value=Number(i)||0)}populateTextarea(e,t,i,a=null){let l=e.querySelector("textarea[data-editor], textarea");if(this.populateText(e,t,i,a),l?.dataset.editor){const t=e.querySelector(".ql-editor");t?t.innerHTML=i:l.dispatchEvent(new Event("change",{bubbles:!0}))}}populateText(e,t,i,a=null){let l=e.querySelector(`[name="${t}"]`)||e.querySelector("textarea[data-editor]")||e.querySelector('input:not([type="hidden"]):not([type="file"]), textarea, select');l&&(a&&window.prefixInput(l,a,e,!1,!0),l.value=window.decodeHTMLEntities(i??""))}splitIDs(e){return String(e).split(",").map(e=>parseInt(e.trim())).filter(e=>!isNaN(e)&&e>0)}isEmptyValue(e){return null==e||""===e||(!(!Array.isArray(e)||0!==e.length)||"object"==typeof e&&0===Object.keys(e).length)}defineTemplates(){const e=this.templates,t=this;e.define("timelineItem",{refs:{select:'[name="select-item"]',video:"video",file:".select-item span",img:"img",details:'[data-field="image_data"] details',imgAlt:'[data-field="image-alt-text"]',imgTitle:'[data-field="image-title"]',imgDesc:'[data-field="image-caption"]'},manyRefs:{fields:".field"},setup({el:e,refs:i,manyRefs:a,data:l}){if(e.dataset.itemId=l.id,i.select){let e=i.select.closest(".preview");window.prefixInput(i.select,`${l.id}-`,e)}i.video&&i.video.remove(),i.file&&i.file.remove();let o=t.data.images[l.post_thumbnail]??!1;if(i.img&&o&&(i.img.src=o.medium||o.small||o.large||"",i.img.title=o.large.split("/").pop()??"",i.img.alt=o["image-alt-text"]??""),i.details){let e=t.data.images[l.post_thumbnail];i.details.setAttribute("data-ignore",""),i.details.dataset.attachmentId=l.post_thumbnail;let a=i.imgAlt.querySelector("input"),o=i.imgTitle.querySelector("input"),r=i.imgDesc.querySelector("textarea");window.prefixInput(a,`[${l.post_thumbnail}]`,i.imgAlt,!1,!0),window.prefixInput(o,`[${l.post_thumbnail}]`,i.imgTitle,!1,!0),window.prefixInput(r,`[${l.post_thumbnail}]`,i.imgDesc,!1,!0),Object.hasOwn(e,"image-alt-text")&&i.imgAlt&&(a.value=window.decodeHTMLEntities(e["image-alt-text"])),(Object.hasOwn(e,"image-title")||Object.hasOwn(l,"file"))&&i.imgTitle&&(o.value=window.decodeHTMLEntities(e["image-title"]||l.file.name)),Object.hasOwn(e,"image-caption")&&i.imgDesc&&(r.value=window.decodeHTMLEntities(e["image-caption"]))}if(a.fields)for(let e of a.fields){if(e.closest("[data-ignore]"))continue;if("group"===e.dataset.fieldType)continue;if("post_thumbnail"===e.dataset.field){e.remove();continue}let i=e.dataset.field;const a=e.querySelector('input:not([type="file"]), textarea, select');a&&window.prefixInput(a,`[${l.id}]`,e,!1,!0);let o=l[i]??"";t.isEmptyValue(o)||t.populateField(e,i,o)}}})}}document.addEventListener("DOMContentLoaded",function(){window.auth.subscribe(t=>{"auth-loaded"===t&&(window.jvbPopulate=new e)})})})(); |
|---|
