Manage the visual effects on this site:
';\r\n siteSettings.fx.forEach(i => {\r\n settingsModalContent.appendChild(i.controller);\r\n });\r\n }\r\n}\r\n\r\nexport const siteSettings = {\r\n reducedMotionPref: detectReducedMotionPref.matches,\r\n fx: [],\r\n fxAdd: (fxType, fxEnable, fxCallback = null) => {\r\n let exists = false;\r\n siteSettings.fx.forEach(i => {\r\n if(i.type == fxType) exists = true;\r\n });\r\n if(!exists) {\r\n siteSettings.fx.push({\r\n type: fxType,\r\n enabled: fxEnable,\r\n callback: fxCallback,\r\n controller: document.createElement('div')\r\n });\r\n let thisIndex = siteSettings.fx.length - 1,\r\n thisFX = siteSettings.fx[thisIndex];\r\n thisFX.controller.setAttribute('class','form-check form-switch');\r\n let checkbox = document.createElement('input');\r\n checkbox.setAttribute('id',`site-settings--fx--${thisIndex}`);\r\n checkbox.setAttribute('class','form-check-input');\r\n checkbox.setAttribute('type','checkbox');\r\n checkbox.setAttribute('role','switch');\r\n if(fxEnable) checkbox.setAttribute('checked',true);\r\n checkbox.addEventListener('click',() => {\r\n siteSettings.fxToggle(thisFX.type,checkbox.checked);\r\n });\r\n thisFX.controller.appendChild(checkbox);\r\n let label = document.createElement('label');\r\n label.setAttribute('for',`site-settings--fx--${thisIndex}`);\r\n label.setAttribute('class','form-check-label');\r\n label.innerHTML = thisFX.type;\r\n thisFX.controller.appendChild(label);\r\n }\r\n if(fxCallback) fxCallback(fxEnable);\r\n // add settings links if not already added\r\n if(!settingsLinksAdded) addSettingsLinks();\r\n // refresh modal content\r\n refreshModalContent();\r\n },\r\n fxToggle: (fxType, mode) => {\r\n siteSettings.fx.forEach(i => {\r\n if(i.type == fxType) {\r\n i.enabled = mode;\r\n if(i.callback) i.callback(mode);\r\n }\r\n });\r\n }\r\n};\r\n\r\n// viewport size\r\n\r\nexport const viewport = {\r\n vw: 0,\r\n vh: 0,\r\n setVw: (val) => {\r\n viewport.vw = val;\r\n },\r\n setVh: (val) => {\r\n viewport.vh = val;\r\n }\r\n};\r\n\r\n// component states\r\n\r\nexport const mainNavigation = {\r\n mobileActive: false,\r\n setMobileActive: (mode) => {\r\n mainNavigation.mobileActive = mode;\r\n },\r\n desktopActive: false,\r\n setDesktopActive: (mode) => {\r\n mainNavigation.desktopActive = mode;\r\n }\r\n};\r\n\r\nexport const headerSearch = {\r\n active: false,\r\n setActive: (mode) => {\r\n headerSearch.active = mode;\r\n }\r\n};","// Check if the module is initialised during server-side rendering\nconst isSSR = typeof window === 'undefined';\n\n/**\n * Simple throttling helper that limits a \n * function to only run once every {delay}ms\n * @param {Number} delay The delay in ms\n * @param {Function} fn the function to throttle\n */\nfunction throttled(delay, fn) {\n let lastCall = 0;\n return function(...args) {\n const now = new Date().getTime();\n if (now - lastCall < delay) {\n return;\n }\n lastCall = now;\n return fn(...args);\n };\n}\n\n/**\n * Calculates the mean value in an array\n * @param {Array} arr The array to average\n */\nfunction getMean(arr) {\n return Math.floor(arr.reduce((acc, curr) => {\n return acc + curr;\n }, 0) / arr.length);\n}\n\n/**\n * Main Tornis singleton class\n */\nclass Tornis {\n // set a whole load of initial values\n constructor() {\n\n // Exit out if this is running server-side\n if (isSSR) return;\n\n this.lastX = 0;\n this.lastY = 0;\n this.lastWidth = window.innerWidth;\n this.lastHeight = window.innerHeight;\n this.lastMouseX = 0;\n this.lastMouseY = 0;\n this.lastWindowX = window.screenX;\n this.lastWindowY = window.screenY;\n\n // device orientation\n this.lastAlpha = 0;\n this.lastBeta = 0;\n this.lastGamma = 0;\n this.currAlpha = 0;\n this.currBeta = 0;\n this.currGamma = 0;\n\n this.scrollHeight = document.body.scrollHeight;\n\n this.scrollChange = false;\n this.sizeChange = false;\n this.mouseChange = false;\n this.positionChange = false;\n this.orientationChange = false;\n this.devicePixelRatioChange = false;\n\n this.currX = 0;\n this.currY = 0;\n this.currWidth = window.innerWidth;\n this.currHeight = window.innerHeight;\n this.currMouseX = 0;\n this.currMouseY = 0;\n this.currWindowX = 0;\n \n // device pixel ratio (where able)\n this.currDevicePixelRatio = this.lastDevicePixelRatio = Math.max( window.devicePixelRatio || 1.0, 1.0 );\n \n // initialise array buffers for mouse velocity\n this.mouseXVelocity = [];\n this.mouseYVelocity = [];\n this.lastMouseXVelocity = 0;\n this.lastMouseYVelocity = 0;\n\n // initialise array buffers for window velocity\n this.windowXVelocity = [];\n this.windowYVelocity = [];\n this.lastWindowXVelocity = 0;\n this.lastWindowYVelocity = 0;\n\n\n // flag to limit rAF renders\n this.updating = false;\n\n // initialise the watched function queue\n this.callbacks = [];\n\n // bind this to ease class methods\n this.update = this.update.bind(this);\n this.handleResize = this.handleResize.bind(this);\n this.handleMouse = this.handleMouse.bind(this);\n this.handleOrientation = this.handleOrientation.bind(this);\n this.recalibrateOrientation = this.recalibrateOrientation.bind(this);\n this.formatData = this.formatData.bind(this);\n this.watch = this.watch.bind(this);\n this.unwatch = this.unwatch.bind(this);\n\n // throttled event handlers\n this.handleResize = throttled(110, this.handleResize); // resize is brutal, so throttle it more\n this.handleMouse = throttled(75, this.handleMouse);\n\n // bind event handlers to the window\n window.addEventListener('resize', this.handleResize);\n window.addEventListener('mousemove', this.handleMouse);\n window.addEventListener('deviceorientation', this.handleOrientation);\n\n // begin the update loop\n requestAnimationFrame(this.update);\n }\n\n /**\n * Event handler to capture screen size\n */\n handleResize(e) {\n this.currWidth = window.innerWidth;\n this.currHeight = window.innerHeight;\n }\n\n /**\n * Event handler to capture mouse position\n */\n handleMouse(e) {\n this.currMouseX = e.clientX;\n this.currMouseY = e.clientY;\n }\n\n /**\n * Event handler to capture device orientation\n */\n handleOrientation(e) {\n // cache initial position for calibration\n if (!this.initialAlpha) { this.initialAlpha = e.alpha; }\n if (!this.initialBeta) { this.initialBeta = e.beta; }\n if (!this.initialGamma) { this.initialGamma = e.gamma; }\n \n this.currAlpha = e.alpha;\n this.currBeta = e.beta;\n this.currGamma = e.gamma;\n }\n\n /** \n * Allow initial orientation to be reset to the last recorded values\n */\n recalibrateOrientation() {\n // cache the old values\n const calibration = {\n prev: {\n alpha: this.initialAlpha,\n beta: this.initialBeta,\n gamma: this.initialGamma,\n }\n };\n\n // reset the values to the last recorded position\n this.initialAlpha = this.lastAlpha;\n this.initialBeta = this.lastBeta;\n this.initialGamma = this.lastGamma;\n \n // add the new values to the cached calibration data\n calibration.current = {\n alpha: this.initialAlpha,\n beta: this.initialBeta,\n gamma: this.initialGamma,\n };\n\n return calibration;\n }\n\n /**\n * Returns a copy of the store data, formatted for public use\n */\n formatData() {\n return {\n scroll: {\n changed: this.scrollChange,\n left: Math.floor(this.lastX),\n right: Math.floor(this.lastX + this.lastWidth),\n top: Math.floor(this.lastY),\n bottom: Math.floor(this.lastY + this.lastHeight),\n velocity: {\n x: Math.floor(this.scrollXVelocity) || 0,\n y: Math.floor(this.scrollYVelocity) || 0\n }\n },\n size: {\n changed: this.sizeChange,\n x: Math.floor(this.lastWidth),\n y: Math.floor(this.lastHeight),\n docY: Math.floor(this.scrollHeight)\n },\n mouse: {\n changed: this.mouseChange,\n x: Math.floor(this.lastMouseX),\n y: Math.floor(this.lastMouseY),\n velocity: {\n x: Math.floor(this.lastMouseXVelocity) || 0,\n y: Math.floor(this.lastMouseYVelocity) || 0\n }\n },\n position: {\n changed: this.positionChange,\n left: Math.floor(this.lastWindowX),\n right: Math.floor(this.lastWindowX + this.lastWidth),\n top: Math.floor(this.lastWindowY),\n bottom: Math.floor(this.lastWindowY + this.lastHeight),\n velocity: {\n x: Math.floor(this.lastWindowXVelocity) || 0,\n y: Math.floor(this.lastWindowYVelocity) || 0\n }\n },\n orientation: {\n changed: this.orientationChange,\n // These values are relative to the first calibrated value\n alpha: Math.floor(this.lastAlpha - this.initialAlpha) || 0,\n beta: Math.floor(this.lastBeta - this.initialBeta) || 0,\n gamma: Math.floor(this.lastGamma - this.initialGamma) || 0\n },\n devicePixelRatio: {\n changed: this.devicePixelRatioChange,\n ratio: this.currDevicePixelRatio\n }\n };\n }\n\n /**\n * Update function to be looped by requestAnimationFrame\n */\n update() {\n const {\n currWidth,\n currHeight,\n currMouseX,\n currMouseY,\n currAlpha,\n currBeta,\n currGamma,\n currDevicePixelRatio\n } = this;\n if (this.updating) return false;\n\n // reset the flags\n this.scrollChange = this.sizeChange = this.mouseChange = this.positionChange = this.orientationChange = this.devicePixelRatioChange = false;\n\n // we need to grab a buffer of the last five values and average them\n if (this.windowXVelocity.length > 5) { this.windowXVelocity.shift(); }\n this.windowXVelocity.push(window.screenX - this.lastWindowX);\n\n // see if the average velocity changed\n if (getMean(this.windowXVelocity) != this.lastWindowXVelocity) {\n this.lastWindowXVelocity = getMean(this.windowXVelocity);\n this.positionChange = true;\n }\n\n // check window X position\n if (window.screenX != this.lastWindowX) {\n this.positionChange = true;\n this.lastWindowX = window.screenX;\n }\n\n // we need to grab a buffer of the last five values and average them\n if (this.windowYVelocity.length > 5) { this.windowYVelocity.shift(); }\n this.windowYVelocity.push(window.screenY - this.lastWindowY);\n\n // see if the average velocity changed\n if (getMean(this.windowYVelocity) != this.lastWindowYVelocity) {\n this.lastWindowYVelocity = getMean(this.windowYVelocity);\n this.positionChange = true;\n }\n\n // check window Y position\n if (window.screenY != this.lastWindowY) {\n this.positionChange = true;\n this.lastWindowY = window.screenY;\n }\n \n\n // reset scroll X velocity\n if (window.pageXOffset == this.lastX && this.scrollXVelocity != 0) {\n this.scrollXVelocity = 0;\n this.scrollChange = true;\n }\n\n // reset scroll Y velocity\n if (window.pageYOffset == this.lastY && this.scrollYVelocity != 0) {\n this.scrollYVelocity = 0;\n this.scrollChange = true;\n }\n \n // check scroll X\n if (window.pageXOffset != this.lastX) {\n this.scrollChange = true;\n this.scrollXVelocity = Math.floor(window.pageXOffset - this.lastX);\n this.lastX = window.pageXOffset;\n }\n \n // check scroll Y\n if (window.pageYOffset != this.lastY) {\n this.scrollChange = true;\n this.scrollYVelocity = Math.floor(window.pageYOffset - this.lastY);\n this.lastY = window.pageYOffset;\n }\n\n // check width\n if (currWidth != this.lastWidth) {\n this.lastWidth = currWidth;\n this.scrollHeight = document.body.scrollHeight;\n this.sizeChange = true;\n }\n\n // check height\n if (currHeight != this.lastHeight) {\n this.lastHeight = currHeight;\n this.sizeChange = true;\n }\n\n // Mouse input is throttled so in order to capture the velocity\n // we need to grab a buffer of the last five values and average them\n if (this.mouseXVelocity.length > 5) { this.mouseXVelocity.shift(); }\n this.mouseXVelocity.push(currMouseX - this.lastMouseX);\n\n // see if the average velocity changed\n if (getMean(this.mouseXVelocity) != this.lastMouseXVelocity) {\n this.lastMouseXVelocity = getMean(this.mouseXVelocity);\n this.mouseChange = true;\n }\n \n // check mouse X\n if (currMouseX != this.lastMouseX) {\n this.lastMouseX = currMouseX;\n this.mouseChange = true;\n }\n\n // grab the mouse Y velocity\n if (this.mouseYVelocity.length > 5) { this.mouseYVelocity.shift(); }\n this.mouseYVelocity.push(currMouseY - this.lastMouseY);\n\n // see if the average velocity changed\n if (getMean(this.mouseYVelocity) != this.lastMouseYVelocity) {\n this.lastMouseYVelocity = getMean(this.mouseYVelocity);\n this.mouseChange = true;\n }\n \n // check mouse y\n if (currMouseY != this.lastMouseY || getMean(this.mouseYVelocity) != 0) {\n this.lastMouseY = currMouseY;\n this.mouseChange = true;\n }\n\n // orientation\n if (currAlpha != this.lastAlpha) {\n this.lastAlpha = currAlpha;\n this.orientationChange = true;\n }\n\n if (currBeta != this.lastBeta) {\n this.lastBeta = currBeta;\n this.orientationChange = true;\n }\n\n if (currGamma != this.lastGamma) {\n this.lastGamma = currGamma;\n this.orientationChange = true;\n }\n \n // device pixel ratio, but only if the window has moved\n if ( this.positionChange || this.sizeChange )\n {\n this.currDevicePixelRatio = Math.max( window.devicePixelRatio || 1, 1 );\n \n if ( this.currDevicePixelRatio !== this.lastDevicePixelRatio )\n {\n this.devicePixelRatioChange = true;\n this.lastDevicePixelRatio = this.currDevicePixelRatio;\n }\n }\n\n // Finally, we can invoke the callbacks, but if something has changed\n if (\n this.scrollChange ||\n this.sizeChange ||\n this.mouseChange ||\n this.positionChange ||\n this.orientationChange ||\n this.devicePixelRatioChange\n ) {\n // pass the formatted data into each watched function\n this.callbacks.forEach(cb => cb(this.formatData()));\n }\n\n // reset and loop this method\n this.updating = false;\n requestAnimationFrame(this.update);\n }\n\n /**\n * Subscribes a function to the 'watched functions' list.\n * Watched functions will be automatically called on update\n * @param {Function} callback The function to call on update\n * @param {Boolean} callOnWatch Call the function on subscribe? defaults to true\n */\n watch(callback, callOnWatch = true) {\n if (typeof callback !== 'function') {\n throw new Error('Value passed to Watch is not a function');\n }\n\n // Exit out if this is running server-side\n if (isSSR) return;\n\n if (callOnWatch) {\n // get a copy of the store\n const firstRunData = this.formatData();\n\n // Most watch functions will have guard clauses that check for change\n // To cicumvent this, we simulate that all values have changed on first run\n firstRunData.scroll.changed = true;\n firstRunData.mouse.changed = true;\n firstRunData.size.changed = true;\n firstRunData.position.changed = true;\n firstRunData.orientation.changed = true;\n firstRunData.devicePixelRatio.changed = true;\n \n // run the callback using the simulated data\n callback(firstRunData);\n }\n\n // push the callback to the queue to ensure it runs on future updates\n this.callbacks.push(callback);\n }\n\n /**\n * Unsubscribe a function from the 'watched functions' list\n * @param {Function} callback The function to be removed\n */\n unwatch(callback) {\n if (typeof callback !== 'function') {\n throw new Error('The value passed to unwatch is not a function');\n }\n\n // Exit out if this is running server-side\n if (isSSR) return;\n\n // remove the callback from the list\n this.callbacks = this.callbacks.filter(cb => cb !== callback);\n }\n\n}\n\n\n// Create a singleton instance of Tornis\nconst TORNIS = new Tornis();\n\nif (!isSSR) {\n // Expose a limited set of functions to a global, in order to allow access for basic script usage with