{"version":3,"file":"PreviewImageField-B_t-poFO.js","sources":["../../../app/javascript/entrypoints/shared/PreviewImageField.ts"],"sourcesContent":["export class PreviewImageField {\n\n  removeImage: boolean = false;\n  constructor(element: HTMLElement) {\n    const imageInput: HTMLInputElement = element.querySelector(\"input.custom-file-input\");\n    const fieldName = imageInput.getAttribute('name');\n    const fieldId = imageInput.getAttribute('id');\n    let fieldValue = imageInput.dataset.imageUrl || \"\";\n    if (!fieldValue.startsWith('http')) fieldValue = \"\";\n    document.querySelector(`label[for=${imageInput.id}]`).classList.add(\"mb-2\");\n\n    const removeImageField = this.createRemoveImageHiddenField(fieldName);\n    const removeButton = this.createRemoveButton();\n    const undoButton = this.createUndoButton();\n    element.parentElement.prepend(removeImageField);\n    imageInput.parentElement.append(undoButton)\n    imageInput.parentElement.append(removeButton)\n\n    let preview: HTMLImageElement = element.querySelector(`#${fieldId}Preview`);\n    if (preview === null) {\n      preview = this.createImagePreviewElement(fieldValue);\n\n      const container = this.createImagePreviewContainer();\n      container.appendChild(preview);\n      preview.onload = () => container.classList.add(\"border\");\n      element.parentElement.insertBefore(container, element);\n    }\n    if (fieldValue !== \"\") {\n      preview.classList.remove(\"visually-hidden\");\n    }\n    removeButton.classList.toggle('disabled', fieldValue === \"\");\n\n    imageInput.onchange = function (_event) {\n      undoButton.click()\n      const file = imageInput.files[0];\n      preview.src = URL.createObjectURL(file);\n      preview.classList.remove(\"visually-hidden\");\n      fieldValue = preview.src\n      removeButton.classList.remove('disabled');\n    }\n    removeButton.onclick = function () {\n      preview.style.opacity = \"0.5\";\n      removeImageField.value = '1';\n      //undoButton.style.display = 'block';\n      undoButton.classList.toggle('visually-hidden', false);\n      //removeButton.style.display = 'none';\n      removeButton.classList.toggle('visually-hidden', true);\n    };\n    undoButton.onclick = function () {\n      preview.style.opacity = \"1.0\";\n      removeImageField.value = '';\n      //undoButton.style.display = 'none';\n      undoButton.classList.toggle('visually-hidden', true);\n      //removeButton.style.display = 'block';\n      removeButton.classList.toggle('visually-hidden', false);\n    };\n  }\n\n  createRemoveImageHiddenField(inputName: string) {\n    const element = document.createElement(\"input\");\n    element.type = \"hidden\";\n    element.name = inputName.replace(/\\[([^[]+)]$/, \"[remove_$1]\");\n    return element;\n  }\n\n  createUndoButton() {\n    const element = document.createElement(\"button\");\n    element.type = \"button\";\n    element.className = \"btn btn-outline-primary rounded-end\";\n    //element.style.display = \"none\";\n    element.classList.add(\"visually-hidden\");\n    element.innerHTML = \"<span class=\\\"fas fa-undo\\\"></span>\";\n    return element;\n  }\n\n  createRemoveButton() {\n    const element = document.createElement(\"button\");\n    element.type = \"button\";\n    element.className = \"btn btn-danger disabled\";\n    element.innerHTML = \"<span class=\\\"fas fa-trash\\\"></span>\";\n    return element;\n  }\n\n  createImagePreviewContainer(): HTMLDivElement {\n    const container = document.createElement(\"div\");\n    container.className = \"rounded w-100 text-center mb-1 bg-light\";\n\n    return container\n  }\n\n  createImagePreviewElement(imageUrl: string) {\n    const element = document.createElement(\"img\");\n    //element.style.display = \"none\";\n    element.classList.add(\"visually-hidden\");\n    element.src = imageUrl;\n    element.className = \"mx-auto d-block\";\n    element.style.maxHeight = \"10rem\";\n    return element;\n  }\n}\n"],"names":["PreviewImageField","element","imageInput","fieldName","fieldId","fieldValue","removeImageField","removeButton","undoButton","preview","container","_event","file","inputName","imageUrl"],"mappings":"AAAO,MAAMA,CAAkB,CAG7B,YAAYC,EAAsB,CADX,KAAA,YAAA,GAEf,MAAAC,EAA+BD,EAAQ,cAAc,yBAAyB,EAC9EE,EAAYD,EAAW,aAAa,MAAM,EAC1CE,EAAUF,EAAW,aAAa,IAAI,EACxC,IAAAG,EAAaH,EAAW,QAAQ,UAAY,GAC3CG,EAAW,WAAW,MAAM,IAAgBA,EAAA,IACxC,SAAA,cAAc,aAAaH,EAAW,EAAE,GAAG,EAAE,UAAU,IAAI,MAAM,EAEpE,MAAAI,EAAmB,KAAK,6BAA6BH,CAAS,EAC9DI,EAAe,KAAK,mBAAmB,EACvCC,EAAa,KAAK,iBAAiB,EACjCP,EAAA,cAAc,QAAQK,CAAgB,EACnCJ,EAAA,cAAc,OAAOM,CAAU,EAC/BN,EAAA,cAAc,OAAOK,CAAY,EAE5C,IAAIE,EAA4BR,EAAQ,cAAc,IAAIG,CAAO,SAAS,EAC1E,GAAIK,IAAY,KAAM,CACVA,EAAA,KAAK,0BAA0BJ,CAAU,EAE7C,MAAAK,EAAY,KAAK,4BAA4B,EACnDA,EAAU,YAAYD,CAAO,EAC7BA,EAAQ,OAAS,IAAMC,EAAU,UAAU,IAAI,QAAQ,EAC/CT,EAAA,cAAc,aAAaS,EAAWT,CAAO,CAAA,CAEnDI,IAAe,IACTI,EAAA,UAAU,OAAO,iBAAiB,EAE5CF,EAAa,UAAU,OAAO,WAAYF,IAAe,EAAE,EAEhDH,EAAA,SAAW,SAAUS,EAAQ,CACtCH,EAAW,MAAM,EACX,MAAAI,EAAOV,EAAW,MAAM,CAAC,EACvBO,EAAA,IAAM,IAAI,gBAAgBG,CAAI,EAC9BH,EAAA,UAAU,OAAO,iBAAiB,EAC1CJ,EAAaI,EAAQ,IACRF,EAAA,UAAU,OAAO,UAAU,CAC1C,EACAA,EAAa,QAAU,UAAY,CACjCE,EAAQ,MAAM,QAAU,MACxBH,EAAiB,MAAQ,IAEdE,EAAA,UAAU,OAAO,kBAAmB,EAAK,EAEvCD,EAAA,UAAU,OAAO,kBAAmB,EAAI,CACvD,EACAC,EAAW,QAAU,UAAY,CAC/BC,EAAQ,MAAM,QAAU,MACxBH,EAAiB,MAAQ,GAEdE,EAAA,UAAU,OAAO,kBAAmB,EAAI,EAEtCD,EAAA,UAAU,OAAO,kBAAmB,EAAK,CACxD,CAAA,CAGF,6BAA6BM,EAAmB,CACxC,MAAAZ,EAAU,SAAS,cAAc,OAAO,EAC9C,OAAAA,EAAQ,KAAO,SACfA,EAAQ,KAAOY,EAAU,QAAQ,cAAe,aAAa,EACtDZ,CAAA,CAGT,kBAAmB,CACX,MAAAA,EAAU,SAAS,cAAc,QAAQ,EAC/C,OAAAA,EAAQ,KAAO,SACfA,EAAQ,UAAY,sCAEZA,EAAA,UAAU,IAAI,iBAAiB,EACvCA,EAAQ,UAAY,oCACbA,CAAA,CAGT,oBAAqB,CACb,MAAAA,EAAU,SAAS,cAAc,QAAQ,EAC/C,OAAAA,EAAQ,KAAO,SACfA,EAAQ,UAAY,0BACpBA,EAAQ,UAAY,qCACbA,CAAA,CAGT,6BAA8C,CACtC,MAAAS,EAAY,SAAS,cAAc,KAAK,EAC9C,OAAAA,EAAU,UAAY,0CAEfA,CAAA,CAGT,0BAA0BI,EAAkB,CACpC,MAAAb,EAAU,SAAS,cAAc,KAAK,EAEpC,OAAAA,EAAA,UAAU,IAAI,iBAAiB,EACvCA,EAAQ,IAAMa,EACdb,EAAQ,UAAY,kBACpBA,EAAQ,MAAM,UAAY,QACnBA,CAAA,CAEX"}