{"version":3,"sources":["webpack:///./LeLab.Web/src/js/frame-selector.entry.js"],"names":["PageComponent","constructor","node","this","component","id","dropdown","querySelector","prevValue","value","name","links","querySelectorAll","image","imageTemplate","price","changeHandler","change","bind","addEventListener","updateUI","e","selectedOption","options","selectedIndex","PageState","set","selectedValue","get","ds","dataset","innerText","frameSelectorName","forEach","x","setAttribute","frameSelectorUrl","innerHTML","imageKey","imageUrl","frameSelectorImage","newImage","document","importNode","content","srcset","replace","src","append","frameSelectorPrice","destroy","removeEventListener"],"mappings":"4FAAA,kBA+FA,IAAIA,IAAc,oCA7FlB,MACIC,aAAY,KAAEC,IAEVC,KAAKC,UAAYF,EACjBC,KAAKE,GAAKF,KAAKC,UAAUC,GACzBF,KAAKG,SAAWH,KAAKC,UAAUG,cAAc,oCAGxCJ,KAAKG,WAEVH,KAAKK,UAAYL,KAAKG,SAASG,MAC/BN,KAAKO,KAAOP,KAAKC,UAAUG,cAAc,gCACzCJ,KAAKQ,MAAQR,KAAKC,UAAUQ,iBAAiB,gCAC7CT,KAAKU,MAAQV,KAAKC,UAAUG,cAAc,iCAC1CJ,KAAKW,cAAgBX,KAAKC,UAAUG,cAAc,0CAClDJ,KAAKY,MAAQZ,KAAKC,UAAUG,cAAc,iCAG1CJ,KAAKa,cAAgBb,KAAKc,OAAOC,KAAKf,MACtCA,KAAKG,SAASa,iBAAiB,SAAUhB,KAAKa,eAG9Cb,KAAKiB,YAGTH,OAAOI,GAEH,IAAIC,EAAiBnB,KAAKG,SAASiB,QAAQpB,KAAKG,SAASkB,eACzDC,IAAUC,IAAIvB,KAAKE,GAAIiB,EAAeb,OAGtCN,KAAKiB,WAGTA,WACI,MAAMO,EAAgBF,IAAUG,IAAIzB,KAAKE,IAEzC,GAA6B,iBAAlBsB,EAA4B,OACvC,GAAIxB,KAAKK,YAAcmB,EAAe,OAEtCxB,KAAKK,UAAYmB,EACjBxB,KAAKG,SAASG,MAAQkB,EACtB,MAAML,EAAiBnB,KAAKG,SAASiB,QAAQpB,KAAKG,SAASkB,eAE3D,GAAKF,EAAL,CAGA,IAAIO,EAAKP,EAAeQ,QAUxB,GARI3B,KAAKO,OACLP,KAAKO,KAAKqB,UAAYF,EAAGG,mBAGzB7B,KAAKQ,OACLR,KAAKQ,MAAMsB,QAAQC,GAAKA,EAAEC,aAAa,OAAQN,EAAGO,mBAGlDjC,KAAKU,OAASV,KAAKW,cAAe,CAClCX,KAAKU,MAAMwB,UAAY,GAEvB,MAAMC,EAAW,QACXC,EAAWV,EAAGW,mBAEpB,IAAIC,EAAWC,SAASC,WAAWxC,KAAKW,cAAc8B,SAAS,GAC/DH,EAAS7B,iBAAiB,YAAYqB,QAAQC,GAAKA,EAAEW,OAASX,EAAEW,OAAOC,QAAQR,EAAUC,IACzFE,EAAS7B,iBAAiB,SAASqB,QAAQC,GAAKA,EAAEa,IAAMb,EAAEa,IAAID,QAAQR,EAAUC,IAChFpC,KAAKU,MAAMmC,OAAOP,GAClBA,EAAW,KAGXtC,KAAKY,QACLZ,KAAKY,MAAMsB,UAAYR,EAAGoB,qBAIlCC,UAEQ/C,KAAKG,UAAUH,KAAKG,SAAS6C,oBAAoB,SAAUhD,KAAKa,eAChEb,KAAKa,sBAAsBb,KAAKa,cAGhCb,KAAKC,kBAAkBD,KAAKC,UAC5BD,KAAKE,WAAWF,KAAKE,GACrBF,KAAKG,iBAAiBH,KAAKG,SAC3BH,KAAKK,kBAAkBL,KAAKK,UAC5BL,KAAKO,aAAaP,KAAKO,KACvBP,KAAKQ,cAAcR,KAAKQ,MACxBR,KAAKU,cAAcV,KAAKU,MACxBV,KAAKW,sBAAsBX,KAAKW,cAChCX,KAAKY,cAAcZ,KAAKY,W","file":"frame-selector.js","sourcesContent":["import { PageState, PageComponent } from \"barba\"\r\n\r\nclass FrameSelector {\r\n    constructor({ node }) {\r\n        // Props\r\n        this.component = node;\r\n        this.id = this.component.id;\r\n        this.dropdown = this.component.querySelector('[data-frame-selector=\"dropdown\"]');\r\n        \r\n        // Exit when there is only 1 frame\r\n        if (!this.dropdown) return; \r\n\r\n        this.prevValue = this.dropdown.value;\r\n        this.name = this.component.querySelector('[data-frame-selector=\"name\"]');\r\n        this.links = this.component.querySelectorAll('[data-frame-selector=\"link\"]');\r\n        this.image = this.component.querySelector('[data-frame-selector=\"image\"]');\r\n        this.imageTemplate = this.component.querySelector('[data-frame-selector=\"image-template\"]')\r\n        this.price = this.component.querySelector('[data-frame-selector=\"price\"]');\r\n\r\n        // Handlers\r\n        this.changeHandler = this.change.bind(this);\r\n        this.dropdown.addEventListener(\"change\", this.changeHandler);  \r\n\r\n        // Init\r\n        this.updateUI();        \r\n    }\r\n\r\n    change(e) {\r\n        // Save selection in page state\r\n        var selectedOption = this.dropdown.options[this.dropdown.selectedIndex];\r\n        PageState.set(this.id, selectedOption.value);\r\n        \r\n        // Update controls\r\n        this.updateUI();\r\n    }\r\n\r\n    updateUI() {\r\n        const selectedValue = PageState.get(this.id);\r\n        \r\n        if (typeof selectedValue !== \"string\") return;\r\n        if (this.prevValue === selectedValue) return;\r\n\r\n        this.prevValue = selectedValue;\r\n        this.dropdown.value = selectedValue;\r\n        const selectedOption = this.dropdown.options[this.dropdown.selectedIndex];\r\n\r\n        if (!selectedOption) return;\r\n\r\n        // Update link, image, price\r\n        var ds = selectedOption.dataset;\r\n\r\n        if (this.name) {\r\n            this.name.innerText = ds.frameSelectorName;\r\n        }\r\n\r\n        if (this.links) {\r\n            this.links.forEach(x => x.setAttribute(\"href\", ds.frameSelectorUrl));\r\n        }\r\n\r\n        if (this.image && this.imageTemplate) {\r\n            this.image.innerHTML = \"\";\r\n\r\n            const imageKey = \"%URL%\";\r\n            const imageUrl = ds.frameSelectorImage;\r\n\r\n            let newImage = document.importNode(this.imageTemplate.content, true);\r\n            newImage.querySelectorAll('[srcset]').forEach(x => x.srcset = x.srcset.replace(imageKey, imageUrl));\r\n            newImage.querySelectorAll('[src]').forEach(x => x.src = x.src.replace(imageKey, imageUrl));\r\n            this.image.append(newImage);\r\n            newImage = null;\r\n        }\r\n\r\n        if (this.price) {\r\n            this.price.innerHTML = ds.frameSelectorPrice;\r\n        }\r\n    }\r\n\r\n    destroy() {\r\n        // Events\r\n        if (this.dropdown) this.dropdown.removeEventListener(\"change\", this.changeHandler);  \r\n        if (this.changeHandler) delete this.changeHandler;\r\n\r\n        // Props\r\n        if (this.component) delete this.component;\r\n        if (this.id) delete this.id;\r\n        if (this.dropdown) delete this.dropdown;\r\n        if (this.prevValue) delete this.prevValue;\r\n        if (this.name) delete this.name;\r\n        if (this.links) delete this.links;\r\n        if (this.image) delete this.image;\r\n        if (this.imageTemplate) delete this.imageTemplate;\r\n        if (this.price) delete this.price;\r\n    }\r\n}\r\n\r\nnew PageComponent('[data-frame-selector=\"component\"]', FrameSelector);\r\n"],"sourceRoot":""}