{"version":3,"sources":["plugins/prevent-scroll.js","header.js"],"names":["D3RSite","preventScroll","active","on","htmlEl","document","querySelector","bodyScrollTop","body","scrollTop","htmlScrollTop","this","currentPosition","style","position","currentOverflow","overflowY","currentWidth","width","classList","add","top","off","parseInt","remove","app","header","_this","el","toggleButton","sentinel","viewport","init","initObserver","watchToggleButton","watchResize","window","IntersectionObserver","observer","entries","forEach","entry","isIntersecting","setAttribute","observe","addEventListener","toggle","bind","matchMedia","addListener","e","matches","contains","deactivate","activate","setTimeout","once"],"mappings":"AAAAA,QAAAC,cAAA,CACAC,QAAA,EACAC,GAAA,WACA,IAAAC,EAAAC,SAAAC,cAAA,QAMAC,EALAF,SAAAG,KAKAC,UACAC,EAAAN,EAAAK,UACAA,EAAAF,GAAAG,EAIAC,KAAAC,gBAAAR,EAAAS,MAAAC,SACAH,KAAAI,gBAAAX,EAAAS,MAAAG,UACAL,KAAAM,aAAAb,EAAAS,MAAAK,MAGAd,EAAAe,UAAAC,IAAA,wBAIAhB,EAAAS,MAAAC,SAAA,QAIAV,EAAAS,MAAAG,UAAA,SAGAZ,EAAAS,MAAAK,MAAA,OAGAd,EAAAS,MAAAQ,IAAA,EAAAZ,EAAA,KAGAE,KAAAT,QAAA,CACA,EAEAoB,IAAA,WACA,IAAAlB,EAAAC,SAAAC,cAAA,QACAE,EAAAH,SAAAG,KAGAJ,EAAAS,MAAAC,SAAAH,KAAAC,gBACAR,EAAAS,MAAAG,UAAAL,KAAAI,gBACAX,EAAAS,MAAAK,MAAAP,KAAAM,aAGA,IAAAR,GAAAc,SAAAnB,EAAAS,MAAAQ,KAGAjB,EAAAK,UAAAA,EACAD,EAAAC,UAAAA,EAGAL,EAAAe,UAAAK,OAAA,wBAGAb,KAAAT,QAAA,CACA,GC3DA,SAAAuB,GAmGAA,EAAAC,OAAA,IAlGA,WAAA,IAAAC,EAAAhB,KACAA,KAAAiB,GAAAvB,SAAAC,cAAA,cACAK,KAAAkB,aAAAxB,SAAAC,cAAA,6BACAK,KAAAmB,SAAAzB,SAAAC,cAAA,gBAEA,IAAAyB,EAAAN,EAAAM,SAGApB,KAAAqB,KAAA,WACAL,EAAAC,KACAD,EAAAM,eACAN,EAAAO,oBACAP,EAAAQ,cAEA,EAEAC,OAAAC,sBAEA1B,KAAA2B,SAAA,IAAAD,qBAAA,SAAAE,GACAA,EAAAC,QAAA,SAAAC,GACAA,EAAAC,eACAf,EAAAC,GAAAe,aAAA,cAAA,UAEAhB,EAAAC,GAAAe,aAAA,cAAA,SAEA,EACA,GAGAhC,KAAAsB,aAAA,WAAA,OAAAN,EAAAW,SAAAM,QAAAjB,EAAAG,SAAA,GAEAnB,KAAAsB,aAAA,WACA,EAIAtB,KAAAuB,kBAAA,WACAP,EAAAE,aAAAgB,iBAAA,QAAAlB,EAAAmB,OAAAC,KAAApB,GACA,EAGAhB,KAAAwB,YAAA,WACAJ,EAAAiB,WAAA,OAAAC,YAAA,SAAAC,GACAA,EAAAC,UACAxB,EAAAC,GAAAT,UAAAK,OAAA,kBACAG,EAAAC,GAAAT,UAAAK,OAAA,sBAEAG,EAAAC,GAAAT,UAAAiC,SAAA,mBACAzB,EAAAC,GAAAe,aAAA,cAAA,UAGA,EACA,EAGAhC,KAAAmC,OAAA,WACAf,EAAAoB,QAAA,SACAxB,EAAAC,GAAAT,UAAAiC,SAAA,mBACAzB,EAAA0B,aACA1B,EAAAE,aAAAc,aAAA,iBAAA,KAEAhB,EAAA2B,WACA3B,EAAAE,aAAAc,aAAA,iBAAA,IAGA,EAGAhC,KAAA2C,SAAA,WACA7B,EAAAxB,cAAAC,QACAuB,EAAAxB,cAAAE,KAGAwB,EAAAC,GAAAT,UAAAC,IAAA,sBAEAmC,WAAA,WACA5B,EAAAC,GAAAT,UAAAC,IAAA,iBACA,EAAA,EACA,EAGAT,KAAA0C,WAAA,WACA5B,EAAAxB,cAAAC,QACAuB,EAAAxB,cAAAqB,MAEAK,EAAAC,GAAAT,UAAAK,OAAA,kBAEAG,EAAAC,GAAAiB,iBAAA,gBAAA,WACAlB,EAAAC,GAAAT,UAAAK,OAAA,qBACA,EAAA,CAAAgC,MAAA,IAGAD,WAAA,WACA5B,EAAAC,GAAAT,UAAAK,OAAA,qBACA,EAAA,IACA,CACA,EAGAC,EAAAC,OAAAM,MACA,CArGA,CAqGAI,OAAApC,QAAAoC,OAAApC,SAAA,CAAA","file":"../../javascript/header.js","sourcesContent":["D3RSite.preventScroll = {\n    active: false,\n    on: function() {\n        var htmlEl = document.querySelector('html');\n        var body = document.body;\n\n\n        // Determine the `scrollTop` to use. Some browsers require checking the\n        // `body`, others use `html`.\n        var bodyScrollTop = body.scrollTop;\n        var htmlScrollTop = htmlEl.scrollTop;\n        var scrollTop = bodyScrollTop ? bodyScrollTop : htmlScrollTop;\n\n        // Store the current value of the htmlEl's styles – we're about to override\n        // them.\n        this.currentPosition = htmlEl.style.position;\n        this.currentOverflow = htmlEl.style.overflowY;\n        this.currentWidth = htmlEl.style.width;\n\n        // Add a class to prevent smooth scrolling from being used on the html and body\n        htmlEl.classList.add('no-transition-scroll');\n\n        // Fixing the position of the `htmlEl` prevents the page from scrolling\n        // at all.\n        htmlEl.style.position = 'fixed';\n        // Setting `overflowY` to `scroll` ensures that any scrollbars that are\n        // around stick around. Otherwise, there would be a \"jump\" when the page\n        // becomes unscrollable as the bar would vanish.\n        htmlEl.style.overflowY = 'scroll';\n        // This makes sure that the page doesn't collapse (usually your CSS will\n        // prevent this, but it's best to be safe)\n        htmlEl.style.width = '100%';\n        // Scoot down the `htmlEl` to be in the same place that the user had\n        // scrolled to.\n        htmlEl.style.top = (0 - scrollTop) + 'px';\n\n        // Set active state\n        this.active = true;\n    },\n\n    off: function() {\n        var htmlEl = document.querySelector('html');\n        var body = document.body;\n\n        // Reset `htmlEl` to the original styles.\n        htmlEl.style.position = this.currentPosition;\n        htmlEl.style.overflowY = this.currentOverflow;\n        htmlEl.style.width = this.currentWidth;\n\n        // Retrieve our original scrollTop from the htmlEl's top\n        var scrollTop = -parseInt(htmlEl.style.top);\n        // Return us to the original scroll position. Once again, we set this on\n        // both the `body` and the `htmlEl` to be safe.\n        htmlEl.scrollTop = scrollTop;\n        body.scrollTop = scrollTop;\n\n        // Remove a class to prevent smooth scrolling from being used on the html and body\n        htmlEl.classList.remove('no-transition-scroll');\n\n        // Unset active state\n        this.active = false;\n    }\n}\n","D3RSite.preventScroll = {\n    active: false,\n    on: function() {\n        var htmlEl = document.querySelector('html');\n        var body = document.body;\n\n\n        // Determine the `scrollTop` to use. Some browsers require checking the\n        // `body`, others use `html`.\n        var bodyScrollTop = body.scrollTop;\n        var htmlScrollTop = htmlEl.scrollTop;\n        var scrollTop = bodyScrollTop ? bodyScrollTop : htmlScrollTop;\n\n        // Store the current value of the htmlEl's styles – we're about to override\n        // them.\n        this.currentPosition = htmlEl.style.position;\n        this.currentOverflow = htmlEl.style.overflowY;\n        this.currentWidth = htmlEl.style.width;\n\n        // Add a class to prevent smooth scrolling from being used on the html and body\n        htmlEl.classList.add('no-transition-scroll');\n\n        // Fixing the position of the `htmlEl` prevents the page from scrolling\n        // at all.\n        htmlEl.style.position = 'fixed';\n        // Setting `overflowY` to `scroll` ensures that any scrollbars that are\n        // around stick around. Otherwise, there would be a \"jump\" when the page\n        // becomes unscrollable as the bar would vanish.\n        htmlEl.style.overflowY = 'scroll';\n        // This makes sure that the page doesn't collapse (usually your CSS will\n        // prevent this, but it's best to be safe)\n        htmlEl.style.width = '100%';\n        // Scoot down the `htmlEl` to be in the same place that the user had\n        // scrolled to.\n        htmlEl.style.top = (0 - scrollTop) + 'px';\n\n        // Set active state\n        this.active = true;\n    },\n\n    off: function() {\n        var htmlEl = document.querySelector('html');\n        var body = document.body;\n\n        // Reset `htmlEl` to the original styles.\n        htmlEl.style.position = this.currentPosition;\n        htmlEl.style.overflowY = this.currentOverflow;\n        htmlEl.style.width = this.currentWidth;\n\n        // Retrieve our original scrollTop from the htmlEl's top\n        var scrollTop = -parseInt(htmlEl.style.top);\n        // Return us to the original scroll position. Once again, we set this on\n        // both the `body` and the `htmlEl` to be safe.\n        htmlEl.scrollTop = scrollTop;\n        body.scrollTop = scrollTop;\n\n        // Remove a class to prevent smooth scrolling from being used on the html and body\n        htmlEl.classList.remove('no-transition-scroll');\n\n        // Unset active state\n        this.active = false;\n    }\n}\n\n\n;(app => {\n    function Header() {\n        this.el = document.querySelector('.js-header');\n        this.toggleButton = document.querySelector('.js-header__toggle-button');\n        this.sentinel = document.querySelector('.js-sentinel');\n\n        const viewport = app.viewport;\n\n        // Initialise the header\n        this.init = () => {\n            if (this.el) {\n                this.initObserver();\n                this.watchToggleButton();\n                this.watchResize();\n            }\n        }\n\n        if (window.IntersectionObserver) {\n            // Set up intersectional observer\n            this.observer = new IntersectionObserver(entries => {\n                entries.forEach(entry => {\n                    if (entry.isIntersecting) {\n                        this.el.setAttribute('data-header', 'static');\n                    } else {\n                        this.el.setAttribute('data-header', 'scroll');\n                    }\n                })\n            });\n\n            // Initialise Observer\n            this.initObserver = () => this.observer.observe(this.sentinel);\n        } else {\n            this.initObserver = () => {\n            };\n        }\n\n        // Watch the toggle button click events\n        this.watchToggleButton = () => {\n            this.toggleButton.addEventListener('click', this.toggle.bind(this));\n        }\n\n        // Watch the window for resize events\n        this.watchResize = () => {\n            viewport.matchMedia('nav').addListener((e) => {\n                if (!e.matches) {\n                    this.el.classList.remove('header--active');\n                    this.el.classList.remove('header--activating');\n\n                    if (!this.el.classList.contains('header--static')) {\n                        this.el.setAttribute('data-header', 'static');\n                    }\n                }\n            });\n        }\n\n        // Toggle the state of the header\n        this.toggle = () => {\n            if (viewport.matches('nav')) {\n                if (this.el.classList.contains('header--active')) {\n                    this.deactivate();\n                    this.toggleButton.setAttribute('aria-expanded', false);\n                } else {\n                    this.activate();\n                    this.toggleButton.setAttribute('aria-expanded', true);\n                }\n            }\n        }\n\n        // Activate the header\n        this.activate = () => {\n            if (!app.preventScroll.active) {\n                app.preventScroll.on();\n            }\n\n            this.el.classList.add('header--activating');\n\n            setTimeout(() => {\n                this.el.classList.add('header--active');\n            }, 1);\n        }\n\n        // Deactivate the header\n        this.deactivate = () => {\n            if (app.preventScroll.active) {\n                app.preventScroll.off();\n            }\n            this.el.classList.remove('header--active');\n\n            this.el.addEventListener('transitionend', () => {\n                this.el.classList.remove('header--activating');\n            }, {once: true});\n\n            // Fallback in case transition hasn't fired\n            setTimeout(() => {\n                this.el.classList.remove('header--activating');\n            }, 500);\n        }\n    }\n\n    app.header = new Header();\n    app.header.init();\n})(window.D3RSite = window.D3RSite || {});\n"]}