{"version":3,"sources":["webpack:///./LeLab.Web/src/js/drawer.entry.js"],"names":["PageComponent","constructor","node","this","drawer","id","head","querySelector","body","subdrawers","querySelectorAll","isOpen","scrollInView","hasAttribute","toggleHandler","toggle","bind","updateMaxHeightHandler","updateMaxHeight","addEventListener","window","PageState","get","open","close","forEach","x","subHead","style","setProperty","requestAnimationFrame","scrollToNode","updatePageState","ticks","i","length","setTimeout","scrollHeight","classList","add","remove","set","destroy","removeEventListener"],"mappings":"4FAAA,iCAsGA,IAAIA,IAAc,gBAlGlB,MACIC,aAAY,KAAEC,IACVC,KAAKC,OAASF,EACdC,KAAKE,GAAKF,KAAKC,OAAOC,IAAM,KAC5BF,KAAKG,KAAOH,KAAKC,OAAOG,cAAc,sBACtCJ,KAAKK,KAAOL,KAAKC,OAAOG,cAAc,sBACtCJ,KAAKM,WAAaN,KAAKC,OAAOM,iBAAiB,iBAC/CP,KAAKQ,QAAS,EACdR,KAAKS,aAAeT,KAAKC,OAAOS,aAAa,8BAE7CV,KAAKW,cAAgBX,KAAKY,OAAOC,KAAKb,MACtCA,KAAKc,uBAAyBd,KAAKe,gBAAgBF,KAAKb,MAEpDA,KAAKG,MACLH,KAAKG,KAAKa,iBAAiB,QAAShB,KAAKW,eAE7CM,OAAOD,iBAAiB,SAAUhB,KAAKc,wBAEnCd,KAAKE,IAAMgB,IAAUC,IAAInB,KAAKE,IAC9BF,KAAKoB,OAELpB,KAAKqB,QAGLrB,KAAKM,YACLN,KAAKM,WAAWgB,QAASC,IACrB,MAAMC,EAAUD,EAAEnB,cAAc,sBAC5BoB,GACAA,EAAQR,iBAAiB,QAAShB,KAAKc,0BAKnDd,KAAKC,OAAOwB,MAAMC,YAAY,uBAAwB,QAG1DN,OACIpB,KAAKQ,QAAS,EACdR,KAAKe,kBAEDf,KAAKS,cACLQ,OAAOU,sBAAsB,IAAMC,YAAa5B,KAAKC,SAI7DoB,QACIrB,KAAKQ,QAAS,EACdR,KAAKe,kBAGTH,SACIZ,KAAKQ,OAASR,KAAKqB,QAAUrB,KAAKoB,OAClCpB,KAAK6B,kBAGTd,kBACI,GAAIf,KAAKQ,OAAT,CACI,MAAMsB,EAAQ,CAAC,EAAG,GAAI,IAAK,KAE3B,IAAK,IAAIC,EAAI,EAAGA,EAAID,EAAME,OAAQD,IAC9Bd,OAAOgB,WAAW,KACdhB,OAAOU,sBACH,KACK3B,KAAKC,QACND,KAAKC,OAAOwB,MAAMC,YAAY,2BAA9B,UAA6D1B,KAAKK,KAAK6B,aAAvE,SAETJ,EAAMC,IAGb/B,KAAKC,OAAOkC,UAAUC,IAAI,gBAG9BpC,KAAKC,OAAOwB,MAAMC,YAAY,2BAA4B,KAC1D1B,KAAKC,OAAOkC,UAAUE,OAAO,WAGjCR,kBACQ7B,KAAKE,IACLgB,IAAUoB,IAAItC,KAAKE,GAAIF,KAAKQ,QAIpC+B,UACIvC,KAAKG,KAAKqC,oBAAoB,QAASxC,KAAKW,eAC5CM,OAAOuB,oBAAoB,SAAUxC,KAAKc,+BAEnCd,KAAKW,qBACLX,KAAKc,8BAELd,KAAKM,kBACLN,KAAKC,cACLD,KAAKG,YACLH,KAAKK,YACLL,KAAKQ,cACLR,KAAKS,iB","file":"drawer.js","sourcesContent":["import \"./drawer.scss\";\r\nimport { PageState, PageComponent } from \"barba\";\r\nimport scrollToNode from \"utils/scroll-to-node\";\r\n\r\nclass Drawer {\r\n    constructor({ node }) {\r\n        this.drawer = node;\r\n        this.id = this.drawer.id || null;\r\n        this.head = this.drawer.querySelector(\"[data-drawer-head]\");\r\n        this.body = this.drawer.querySelector(\"[data-drawer-body]\");\r\n        this.subdrawers = this.drawer.querySelectorAll(\"[data-drawer]\");\r\n        this.isOpen = false;\r\n        this.scrollInView = this.drawer.hasAttribute(\"data-drawer-scroll-in-view\");\r\n\r\n        this.toggleHandler = this.toggle.bind(this);\r\n        this.updateMaxHeightHandler = this.updateMaxHeight.bind(this);\r\n\r\n        if (this.head) {\r\n            this.head.addEventListener(\"click\", this.toggleHandler);\r\n        }\r\n        window.addEventListener(\"resize\", this.updateMaxHeightHandler);\r\n\r\n        if (this.id && PageState.get(this.id)) {\r\n            this.open();\r\n        } else {\r\n            this.close();\r\n        }\r\n\r\n        if (this.subdrawers) {\r\n            this.subdrawers.forEach((x) => {\r\n                const subHead = x.querySelector(\"[data-drawer-head]\");\r\n                if (subHead) {\r\n                    subHead.addEventListener(\"click\", this.updateMaxHeightHandler);\r\n                }\r\n            });\r\n        }\r\n\r\n        this.drawer.style.setProperty(\"--drawer-body-height\", \"auto\");\r\n    }\r\n\r\n    open() {\r\n        this.isOpen = true;\r\n        this.updateMaxHeight();\r\n\r\n        if (this.scrollInView) {\r\n            window.requestAnimationFrame(() => scrollToNode(this.drawer));\r\n        }\r\n    }\r\n\r\n    close() {\r\n        this.isOpen = false;\r\n        this.updateMaxHeight();\r\n    }\r\n\r\n    toggle() {\r\n        this.isOpen ? this.close() : this.open();\r\n        this.updatePageState();\r\n    }\r\n\r\n    updateMaxHeight() {\r\n        if (this.isOpen) {\r\n            const ticks = [0, 50, 100, 300];\r\n\r\n            for (let i = 0; i < ticks.length; i++) {\r\n                window.setTimeout(() => {\r\n                    window.requestAnimationFrame(\r\n                        () =>\r\n                            !this.drawer ||\r\n                            this.drawer.style.setProperty(\"--drawer-body-max-height\", `${this.body.scrollHeight}px`)\r\n                    );\r\n                }, ticks[i]);\r\n            }\r\n\r\n            this.drawer.classList.add(\"is-open\");\r\n            return;\r\n        }\r\n        this.drawer.style.setProperty(\"--drawer-body-max-height\", \"0\");\r\n        this.drawer.classList.remove(\"is-open\");\r\n    }\r\n\r\n    updatePageState() {\r\n        if (this.id) {\r\n            PageState.set(this.id, this.isOpen);\r\n        }\r\n    }\r\n\r\n    destroy() {\r\n        this.head.removeEventListener(\"click\", this.toggleHandler);\r\n        window.removeEventListener(\"resize\", this.updateMaxHeightHandler);\r\n\r\n        delete this.toggleHandler;\r\n        delete this.updateMaxHeightHandler;\r\n\r\n        delete this.subdrawers;\r\n        delete this.drawer;\r\n        delete this.head;\r\n        delete this.body;\r\n        delete this.isOpen;\r\n        delete this.scrollInView;\r\n    }\r\n}\r\n\r\nnew PageComponent(\"[data-drawer]\", Drawer);\r\n"],"sourceRoot":""}