https://www.nebelung.de/theme/fc6be77f01289e2dacedb59fa252fa79/js/…rch.image-upload-search.plugin.ts.aa1540.js

1"use strict";(self.webpackChunk=self.webpackChunk||[]).push([[73116],{156:e=>{var t=function(e){var t;return!!e&&"object"==typeof e&&"[object RegExp]"!==(t=Object.prototype.toString.call(e))&&"[object Date]"!==t&&e.$$typeof!==i},i="function"==typeof Symbol&&Symbol.for?Symbol.for("react.element"):60103;function r(e,t){return!1!==t.clone&&t.isMergeableObject(e)?a(Array.isArray(e)?[]:{},e,t):e}function s(e,t,i){return e.concat(t).map(function(e){return r(e,i)})}function n(e){return Object.keys(e).concat(Object.getOwnPropertySymbols?Object.getOwnPropertySymbols(e).filter(function(t){return Object.propertyIsEnumerable.call(e,t)}):[])}function o(e,t){try{return t in e}catch(e){return!1}}function a(e,i,l){(l=l||{}).arrayMerge=l.arrayMerge||s,l.isMergeableObject=l.isMergeableObject||t,l.cloneUnlessOtherwiseSpecified=r;var h,c,d=Array.isArray(i);return d!==Array.isArray(e)?r(i,l):d?l.arrayMerge(e,i,l):(c={},(h=l).isMergeableObject(e)&&n(e).forEach(function(t){c[t]=r(e[t],h)}),n(i).forEach(function(t){(!o(e,t)||Object.hasOwnProperty.call(e,t)&&Object.propertyIsEnumerable.call(e,t))&&(o(e,t)&&h.isMergeableObject(i[t])?c[t]=(function(e,t){if(!t.customMerge)return a;var i=t.customMerge(e);return"function"==typeof i?i:a})(t,h)(e[t],i[t],h):c[t]=r(i[t],h))}),c)}a.all=function(e,t){if(!Array.isArray(e))throw Error("first argument should be an array");return e.reduce(function(e,i){return a(e,i,t)},{})},e.exports=a},795:(e,t,i)=>{i.d(t,{A:()=>s});var r=i(707);class s{static isNode(e){return"object"==typeof e&&null!==e&&(e===document||e===window||e instanceof Node)}static hasAttribute(e,t){if(!s.isNode(e))throw Error("The element must be a valid HTML Node!");return"function"==typeof e.hasAttribute&&e.hasAttribute(t)}static getAttribute(e,t){let i=!(arguments.length>2)||void 0===arguments[2]||arguments[2];if(i&&!1===s.hasAttribute(e,t))throw Error(`The required property "${t}" does not exist!`);if("function"!=typeof e.getAttribute){if(i)throw Error("This node doesn't support the getAttribute function!");return}return e.getAttribute(t)}static getDataAttribute(e,t){let i=!(arguments.length>2)||void 0===arguments[2]||arguments[2],n=t.replace(/^data(|-)/,""),o=r.A.toLowerCamelCase(n,"-");if(!s.isNode(e)){if(i)throw Error("The passed node is not a valid HTML Node!");return}if(void 0===e.dataset){if(i)throw Error("This node doesn't support the dataset attribute!");return}let a=e.dataset[o];if(void 0===a){if(i)throw Error(`The required data attribute "${t}" does not exist on ${e}!`);return a}return r.A.parsePrimitive(a)}static querySelector(e,t){let i=!(arguments.length>2)||void 0===arguments[2]||arguments[2];if(i&&!s.isNode(e))throw Error("The parent node is not a valid HTML Node!");let r=e.querySelector(t)||!1;if(i&&!1===r)throw Error(`The required element "${t}" does not exist in parent node!`);return r}static querySelectorAll(e,t){let i=!(arguments.length>2)||void 0===arguments[2]||arguments[2];if(i&&!s.isNode(e))throw Error("The parent node is not a valid HTML Node!");let r=e.querySelectorAll(t);if(0===r.length&&(r=!1),i&&!1===r)throw Error(`At least one item of "${t}" must exist in parent node!`);return r}static getFocusableElements(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:document.body,t=`
2            input:not([tabindex^="-"]):not([disabled]):not([type="hidden"]),
3            select:not([tabindex^="-"]):not([disabled]),
4            textarea:not([tabindex^="-"]):not([disabled]),
5            button:not([tabindex^="-"]):not([disabled]),
6            a[href]:not([tabindex^="-"]):not([disabled]),
7            [tabindex]:not([tabindex^="-"]):not([disabled])
8        `;return e.querySelectorAll(t)}static getFirstFocusableElement(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:document.body;return this.getFocusableElements(e)[0]}static getLastFocusableElement(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:document,t=this.getFocusableElements(e);return t[t.length-1]}}},707:(e,t,i)=>{i.d(t,{A:()=>r});class r{static ucFirst(e){return e.charAt(0).toUpperCase()+e.slice(1)}static lcFirst(e){return e.charAt(0).toLowerCase()+e.slice(1)}static toDashCase(e){return e.replace(/([A-Z])/g,"-$1").replace(/^-/,"").toLowerCase()}static toLowerCamelCase(e,t){let i=r.toUpperCamelCase(e,t);return r.lcFirst(i)}static toUpperCamelCase(e,t){return t?e.split(t).map(e=>

8r.ucFirst(e.toLowerCase())).join(""):r.ucFirst(e.toLowerCase())}static parsePrimitive(e){try{return/^\d+(.|,)\d+$/.test(e)&&(e=e.replace(",",".")),JSON.parse(e)}catch(t){return e.toString()}}}},737:(e,t,i)=>{i.d(t,{A:()=>a});var r=i(156),s=i.n(r),n=i(707);class o{constructor(e=document){this._el=e,e.$emitter=this,this._listeners=[]}publish(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=arguments.length>2&&void 0!==arguments[2]&&arguments[2],r=new CustomEvent(e,{detail:t,cancelable:i});return this.el.dispatchEvent(r),r}subscribe(e,t){let i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=this,s=e.split("."),n=i.scope?t.bind(i.scope):t;if(i.once&&!0===i.once){let t=n;n=function(i){r.unsubscribe(e),t(i)}}return this.el.addEventListener(s[0],n),this.listeners.push({splitEventName:s,opts:i,cb:n}),!0}unsubscribe(e){let t=e.split(".");return this.listeners=this.listeners.reduce((e,i)=>([...i.splitEventName].sort().toString()===t.sort().toString()?this.el.removeEventListener(i.splitEventName[0],i.cb):e.push(i),e),[]),!0}reset(){return this.listeners.forEach(e=>{this.el.removeEventListener(e.splitEventName[0],e.cb)}),this.listeners=[],!0}get el(){return this._el}set el(e){this._el=e}get listeners(){return this._listeners}set listeners(e){this._listeners=e}}class a{constructor(e,t={},i=!1){if(!(e instanceof Node)){console.warn(`There is no valid element given while trying to create a plugin instance for "${i}".`);return}this.el=e,this.$emitter=new o(this.el),this._pluginName=this._getPluginName(i),this.options=this._mergeOptions(t),this._initialized=!1,this._registerInstance(),this._init()}init(){console.warn(`The "init" method for the plugin "${this._pluginName}" is not defined. The plugin will not be initialized.`)}update(){}_init(){this._initialized||(this.init(),this._initialized=!0)}_update(){this._initialized&&this.update()}_mergeOptions(e){let t=[this.constructor.options,this.options,e];return t.push(this._getConfigFromDataAttribute()),t.push(this._getOptionsFromDataAttribute()),s().all(t.filter(e=>e instanceof Object&&!(e instanceof Array)).map(e=>e||{}))}_getConfigFromDataAttribute(){let e={};if("function"!=typeof this.el.getAttribute)return e;let t=n.A.toDashCase(this._pluginName),i=this.el.getAttribute(`data-${t}-config`);return i?window.PluginConfigManager.get(this._pluginName,i):e}_getOptionsFromDataAttribute(){let e={};if("function"!=typeof this.el.getAttribute)return e;let t=n.A.toDashCase(this._pluginName),i=this.el.getAttribute(`data-${t}-options`);if(i)try{return JSON.parse(i)}catch(e){console.error(`The data attribute "data-${t}-options" could not be parsed to json: ${e.message}`)}return e}_registerInstance(){window.PluginManager.getPluginInstancesFromElement(this.el).set(this._pluginName,this),window.PluginManager.getPlugin(this._pluginName,!1).get("instances").push(this)}_getPluginName(e){return e||(e=this.constructor.name),e}}},68:(e,t,i)=>{i.d(t,{A:()=>r});class r{constructor(){this._request=null,this._errorHandlingInternal=!1}get(e,t){let i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"application/json",r=this._createPreparedRequest("GET",e,i);return this._sendRequest(r,null,t)}post(e,t,i){let r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"application/json";r=this._getContentType(t,r);let s=this._createPreparedRequest("POST",e,r);return this._sendRequest(s,t,i)}delete(e,t,i){let r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"application/json";r=this._getContentType(t,r);let s=this._createPreparedRequest("DELETE",e,r);return this._sendRequest(s,t,i)}patch(e,t,i){let r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:"application/json";r=this._getContentType(t,r);let s=this._createPreparedRequest("PATCH",e,r);return this._sendRequest(s,t,i)}abort(){if(this._request)return this._request.abort()}setErrorHandlingInternal(e){this._errorHandlingInternal=e}_registerOnLoaded(e,t){t&&(!0===this._errorHandlingInternal?(e.addEventListener("load",()=>{t(e.responseText,e)}),e.addEventListener("abort",()=>{console.warn(`the request to ${e.responseURL} was aborted`)}),e.addEventListener("error",()=>{console.warn(`the request to ${e.responseURL} failed with status ${e.status}`)}),e.addEventListener("timeout",()=>{console.warn(`the request to ${e.responseURL} timed out`)})):e.addEventListener("loadend",()=>{t(e.responseText,e)}))}_sendRequest(e,t,i){return this._registerOnLoaded(e,i),e.send(t),e}_getContentType(e,t){return e instanceof FormData&&(t=!1),t}_createPreparedRequest(e,t,i){return this._request=new XMLHttpRequest,this._request.open(e,t),this._request.setRequestHeader("X-Requested-With","XMLHttpRequest"),i&&this._request.setRequestHeader("Content-type",i),this._request}}},116:(e,t,i)=>{i.r(t),i.d(t,{default:()=>a});var r=i(737),s=i(795),n=i(68);let o=["image/jpeg","image/png"];class a extends r.A{static #e=this.options={fieldSelector:{inputField:".

8image-upload__input",thumbnailCanvas:"#thumbnailCanvas",searchButton:".btn-image-search",emptyFileContainer:".image-upload__empty-file",hasFileContainer:".image-upload__has-file",fileNameText:".image-upload__file-name",removeImageButton:".image-upload__btn-remove",submitButton:"btn-image-search",primaryTitle:".ai-search-title-primary",secondaryTitle:".ai-search-title-secondary",searchResults:".ai-search-results",loadingSpinner:".ai-search-loading-spinner",serviceError:".image-search-error",serviceErrorContent:".image-search-error .alert-content-container",fileTypeSizeError:".image-upload-error",imageUploadSearchWrapper:".image-upload-search-wrapper",selectFileButton:".btn-select-file",dropzone:".image-upload__dropzone"}};init(){this.inputField=s.A.querySelector(this.el,this.options.fieldSelector.inputField),this.thumbnailCanvas=s.A.querySelector(this.el,this.options.fieldSelector.thumbnailCanvas),this.submitButton=s.A.querySelector(this.el,this.options.fieldSelector.searchButton),this.emptyFileContainer=s.A.querySelector(this.el,this.options.fieldSelector.emptyFileContainer),this.hasFileContainer=s.A.querySelector(this.el,this.options.fieldSelector.hasFileContainer),this.fileNameText=s.A.querySelector(this.el,this.options.fieldSelector.fileNameText),this.removeImageButton=s.A.querySelector(this.el,this.options.fieldSelector.removeImageButton),this.searchResults=s.A.querySelector(this.el,this.options.fieldSelector.searchResults),this.titlePrimary=s.A.querySelector(this.el,this.options.fieldSelector.primaryTitle),this.loadingSpinner=s.A.querySelector(this.el,this.options.fieldSelector.loadingSpinner),this.serviceError=s.A.querySelector(this.el,this.options.fieldSelector.serviceError),this.serviceErrorContent=s.A.querySelector(this.el,this.options.fieldSelector.serviceErrorContent),this.fileTypeSizeError=s.A.querySelector(this.el,this.options.fieldSelector.fileTypeSizeError),this.imageUploadSearchWrapper=s.A.querySelector(this.el,this.options.fieldSelector.imageUploadSearchWrapper),this.selectFileButton=s.A.querySelector(this.el,this.options.fieldSelector.selectFileButton),this.dropzone=s.A.querySelector(this.el,this.options.fieldSelector.dropzone),this.store=function(){let e="searchByImage";return new Proxy(window.localStorage,{get(t,i){let r=`${e}.${i}`,s=window.localStorage.getItem(r);return s?JSON.parse(s):null},set:(t,i,r)=>(window.localStorage.setItem(`${e}.${i}`,JSON.stringify(r)),!0)})}(),this.client=new n.A,this.registerEvents()}registerEvents(){this.submitButton.addEventListener("click",this.onSearchButtonClick.bind(this)),this.inputField.addEventListener("change",this.onFileInputChanged.bind(this)),this.removeImageButton.addEventListener("click",this.onRemoveImageButtonClick.bind(this)),this.selectFileButton.addEventListener("click",this.onSelectFileButtonClick.bind(this)),this.dropzone.addEventListener("drop",this.onDropFile.bind(this)),document.addEventListener("dragenter",this.onDragEnter.bind(this)),document.addEventListener("dragleave",this.onDragLeave.bind(this)),document.addEventListener("dragover",this.onDragOver.bind(this)),document.addEventListener("drop",this.onDropOnDocument.bind(this)),document.onreadystatechange=()=>{"complete"===document.readyState&&this.onDocumentReady.bind(this)()}}onFileInputChanged(e){this.onFileAdded(e.target.files[0])}successFileUpload(e){this.fileUpload=e,this.emptyFileContainer.classList.add("d-none"),this.hasFileContainer.classList.remove("d-none"),this.fileNameText.innerText=e.name,this.submitButton.classList.remove("d-none");let t=new FileReader;t.addEventListener("load",this.handleFileReaderLoad.bind(this),!1),t.readAsDataURL(e)}handleFileReaderLoad(e){let t=new Image;t.src=e.target.result,t.addEventListener("load",this.handleImageLoad.bind(this),!1)}handleImageLoad(e){let t=this.thumbnailCanvas.getContext("2d"),i=Math.min(this.thumbnailCanvas.width/e.srcElement.width,this.thumbnailCanvas.height/e.srcElement.height),r=e.srcElement.width*i,s=e.srcElement.height*i;this.thumbnailCanvas.width=r,this.thumbnailCanvas.height=s,t.drawImage(e.srcElement,0,0,r,s)}showErrorMessage(){this.fileTypeSizeError.classList.remove("d-none")}onRemoveImageButtonClick(){this.emptyFileContainer.classList.remove("d-none"),this.hasFileContainer.classList.add("d-none"),this.submitButton.classList.add("d-none"),this.fileNameText.innerText="",this.inputField.value="",this.fileUpload=null,this.thumbnailCanvas.getContext("2d").clearRect(0,0,this.thumbnailCanvas.width,this.thumbnailCanvas.height)}onSearchButtonClick(e){e.preventDefault(),e.stopPropagation(),this.searchImage()}async searchImage(){if(!this.fileUpload)return;this.showState("loading");let e=new FormData;e.append("file",this.fileUpload,this.fileUpload.name);try{let t=await this.fetchSearchTerms(e);if(0===t.length){this.showState("empty");return}let i=this.generateResultsUrl(t);this.store[i.search]=t,window.history.pushState({},"",i),this.searchBySearchTerms(t)}catch(e){this.setErrorMessage(e),this.showState("error");return}}setErrorMessage(e){let t="";switch(e){case"IMAGE_SEARCH__NO_IMAGE":t=this.options.snippets.serviceErrorNoImage;break;case"IMAGE_SEARCH__IMAGE_TOO_LARGE":t=this.options.snippets.serviceErrorImageTooLarge;break;case"IMAGE_SEARCH__INVALID_FILE_TYPE":t=this.options.snippets.serviceErrorInvalidFileType;break;case"IMAGE_SEARCH__EMPTY_CONTEXT":t=this.options.snippets.serviceErrorEmptyContext;break;case"IMAGE_SEARCH__LONG_CONTEXT":t=this.options.snippets.serviceErrorLongContext;break;case"IMAGE_SEARCH__NOT_AN_IMAGE":t=this.options.snippets.serviceErrorNotAnImage;break;default:t=this.options.snippets.serviceErrorDefault}this.serviceErrorContent.innerText=t}searchBySearchTerms(e){Promise.all(e.map(e=>this.searchProducts(e))).then(e=>{if(this.searchResults.innerHTML=e.join(""),""===this.searchResults.innerHTML){this.showState("empty");return}window.PluginManager.initializePlugins(),this.showState("finish")}).catch(()=>{this.showState("error")})}fetchSearchTerms(e){return new Promise((t,i)=>{this.client.abort(),this.client.post(this.options.searchImageUrl,e,(e,r)=>{if(200!==r.status)try{let t=JSON.parse(e);i(t.code)}catch{i(`Request status of ${r.status}`)}t(JSON.parse(e))})})}searchProducts(e){return new Promise((t,i)=>{this.client.post(this.options.searchProductsUrl,JSON.stringify({term:e?.term??e}),(e,r)=>{if(200!==r.status){i();return}t(e.trim())})})}showState(e){let t=s.A.querySelector(this.el,this.options.fieldSelector.secondaryTitle,!1);switch(t instanceof HTMLElement&&t.remove(),e){case"loading":this.searchResults.innerHTML="",this.serviceError.classList.add("d-none"),this.loadingSpinner.classList.remove("d-none"),this.imageUploadSearchWra

8pper.classList.add("d-none"),this.titlePrimary.innerText=this.options.snippets.loadingTitle;break;case"error":this.loadingSpinner.classList.add("d-none"),this.serviceError.classList.remove("d-none"),this.imageUploadSearchWrapper.classList.remove("d-none");break;case"empty":this.loadingSpinner.classList.add("d-none"),this.imageUploadSearchWrapper.classList.remove("d-none"),this.titlePrimary.innerText=this.options.snippets.noResultsTitle,this.titlePrimary.insertAdjacentHTML("afterend",`<h2 class="ai-search-title-secondary align-self-stretch text-primary m-0">${this.options.snippets.noResultsSubTitle}</h2>`);break;case"finish":this.loadingSpinner.classList.add("d-none"),this.titlePrimary.innerText=this.options.snippets.resultTitle}}onSelectFileButtonClick(){this.inputField.click()}onDropFile(e){this.fileUpload||(this.dropzone.classList.remove("dragover"),this.onFileAdded(e.dataTransfer.files[0]))}onFileAdded(e){if(!e||!o.includes(e.type)||e.size>this.options.maxUploadSize){this.showErrorMessage();return}this.fileTypeSizeError.classList.add("d-none"),this.successFileUpload(e)}onDragEnter(e){!this.fileUpload&&(e.preventDefault(),e.target.closest(this.options.fieldSelector.dropzone)&&(this.dropzone.classList.add("dragover"),this.selectFileButton.setAttribute("disabled","disabled")))}onDragLeave(e){e.target.closest(this.options.fieldSelector.dropzone)||(this.dropzone.classList.remove("dragover"),this.selectFileButton.removeAttribute("disabled"))}generateResultsUrl(e){let t=new URLSearchParams;e.forEach(e=>t.append("searchTerms",e.term));let i=new URL("",window.location.toString());return i.search=t.toString(),i}onDragOver(e){e.preventDefault()}onDropOnDocument(e){e.preventDefault(),this.dropzone.classList.remove("dragover"),this.selectFileButton.removeAttribute("disabled")}onDocumentReady(){let e=new URLSearchParams(window.location.search).getAll("searchTerms");e.length&&null!==this.store[window.location.search]&&(this.showState("loading"),this.searchBySearchTerms(e))}}}}]);