for semantic reasons\n// - do not set width of the wrapping element to prevent issues\n\n/* eslint-disable */\n\nfunction _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError('Cannot call a class as a function')\n }\n}\n\n/**\n * Sticky.js\n * Library for sticky elements written in vanilla javascript. With this library you can easily set sticky elements on your website. It's also responsive.\n *\n * @version 1.2.0\n * @author Rafal Galus
\n * @website https://rgalus.github.io/sticky-js/\n * @repo https://github.com/rgalus/sticky-js\n * @license https://github.com/rgalus/sticky-js/blob/master/LICENSE\n */\n\nvar Sticky = (function() {\n /**\n * Sticky instance constructor\n * @constructor\n * @param {string} selector - Selector which we can find elements\n * @param {string} options - Global options for sticky elements (could be overwritten by data-{option}=\"\" attributes)\n */\n function Sticky() {\n var selector =\n arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ''\n var options =\n arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}\n\n _classCallCheck(this, Sticky)\n\n this.selector = selector\n this.elements = []\n\n this.version = '1.2.0'\n\n this.vp = this.getViewportSize()\n this.body = document.querySelector('body')\n\n this.options = {\n wrap: options.wrap || false,\n marginTop: options.marginTop || 0,\n stickyFor: options.stickyFor || 0,\n stickyClass: options.stickyClass || null,\n stickyContainer: options.stickyContainer || 'body',\n }\n\n this.updateScrollTopPosition = this.updateScrollTopPosition.bind(this)\n\n this.updateScrollTopPosition()\n window.addEventListener('load', this.updateScrollTopPosition)\n window.addEventListener('scroll', this.updateScrollTopPosition)\n\n this.run()\n }\n\n /**\n * Function that waits for page to be fully loaded and then renders & activates every sticky element found with specified selector\n * @function\n */\n\n Sticky.prototype.run = function run() {\n var _this = this\n\n // wait for page to be fully loaded\n var pageLoaded = setInterval(function() {\n if (document.readyState === 'complete') {\n clearInterval(pageLoaded)\n\n var elements = document.querySelectorAll(_this.selector)\n _this.forEach(elements, function(element) {\n return _this.renderElement(element)\n })\n }\n }, 10)\n }\n\n /**\n * Function that assign needed variables for sticky element, that are used in future for calculations and other\n * @function\n * @param {node} element - Element to be rendered\n */\n\n Sticky.prototype.renderElement = function renderElement(element) {\n var _this2 = this\n\n // create container for variables needed in future\n element.sticky = {}\n\n // set default variables\n element.sticky.active = false\n\n element.sticky.marginTop =\n parseInt(element.getAttribute('data-margin-top')) ||\n this.options.marginTop\n element.sticky.stickyFor =\n parseInt(element.getAttribute('data-sticky-for')) ||\n this.options.stickyFor\n element.sticky.stickyClass =\n element.getAttribute('data-sticky-class') || this.options.stickyClass\n element.sticky.wrap = element.hasAttribute('data-sticky-wrap')\n ? true\n : this.options.wrap\n // @todo attribute for stickyContainer\n // element.sticky.stickyContainer = element.getAttribute('data-sticky-container') || this.options.stickyContainer;\n element.sticky.stickyContainer = this.options.stickyContainer\n\n element.sticky.container = this.getStickyContainer(element)\n element.sticky.container.rect = this.getRectangle(element.sticky.container)\n\n element.sticky.rect = this.getRectangle(element)\n\n // fix when element is image that has not yet loaded and width, height = 0\n if (element.tagName.toLowerCase() === 'img') {\n element.onload = function() {\n return (element.sticky.rect = _this2.getRectangle(element))\n }\n }\n\n if (element.sticky.wrap) {\n this.wrapElement(element)\n }\n\n // activate rendered element\n this.activate(element)\n }\n\n /**\n * Wraps element into placeholder element\n * @function\n * @param {node} element - Element to be wrapped\n */\n\n Sticky.prototype.wrapElement = function wrapElement(element) {\n element.insertAdjacentHTML(\n 'beforebegin',\n ''\n )\n element.previousSibling.appendChild(element)\n }\n\n /**\n * Function that activates element when specified conditions are met and then initalise events\n * @function\n * @param {node} element - Element to be activated\n */\n\n Sticky.prototype.activate = function activate(element) {\n if (\n element.sticky.rect.top + element.sticky.rect.height <\n element.sticky.container.rect.top +\n element.sticky.container.rect.height &&\n element.sticky.stickyFor < this.vp.width &&\n !element.sticky.active\n ) {\n element.sticky.active = true\n }\n\n if (this.elements.indexOf(element) < 0) {\n this.elements.push(element)\n }\n\n if (!element.sticky.resizeEvent) {\n this.initResizeEvents(element)\n element.sticky.resizeEvent = true\n }\n\n if (!element.sticky.scrollEvent) {\n this.initScrollEvents(element)\n element.sticky.scrollEvent = true\n }\n\n this.setPosition(element)\n }\n\n /**\n * Function which is adding onResizeEvents to window listener and assigns function to element as resizeListener\n * @function\n * @param {node} element - Element for which resize events are initialised\n */\n\n Sticky.prototype.initResizeEvents = function initResizeEvents(element) {\n var _this3 = this\n\n element.sticky.resizeListener = function() {\n return _this3.onResizeEvents(element)\n }\n window.addEventListener('resize', element.sticky.resizeListener)\n }\n\n /**\n * Removes element listener from resize event\n * @function\n * @param {node} element - Element from which listener is deleted\n */\n\n Sticky.prototype.destroyResizeEvents = function destroyResizeEvents(element) {\n window.removeEventListener('resize', element.sticky.resizeListener)\n }\n\n /**\n * Function which is fired when user resize window. It checks if element should be activated or deactivated and then run setPosition function\n * @function\n * @param {node} element - Element for which event function is fired\n */\n\n Sticky.prototype.onResizeEvents = function onResizeEvents(element) {\n this.vp = this.getViewportSize()\n\n element.sticky.rect = this.getRectangle(element)\n element.sticky.container.rect = this.getRectangle(element.sticky.container)\n\n if (\n element.sticky.rect.top + element.sticky.rect.height <\n element.sticky.container.rect.top +\n element.sticky.container.rect.height &&\n element.sticky.stickyFor < this.vp.width &&\n !element.sticky.active\n ) {\n element.sticky.active = true\n } else if (\n element.sticky.rect.top + element.sticky.rect.height >=\n element.sticky.container.rect.top +\n element.sticky.container.rect.height ||\n (element.sticky.stickyFor >= this.vp.width && element.sticky.active)\n ) {\n element.sticky.active = false\n }\n\n this.setPosition(element)\n }\n\n /**\n * Function which is adding onScrollEvents to window listener and assigns function to element as scrollListener\n * @function\n * @param {node} element - Element for which scroll events are initialised\n */\n\n Sticky.prototype.initScrollEvents = function initScrollEvents(element) {\n var _this4 = this\n\n element.sticky.scrollListener = function() {\n return _this4.onScrollEvents(element)\n }\n window.addEventListener('scroll', element.sticky.scrollListener)\n }\n\n /**\n * Removes element listener from scroll event\n * @function\n * @param {node} element - Element from which listener is deleted\n */\n\n Sticky.prototype.destroyScrollEvents = function destroyScrollEvents(element) {\n window.removeEventListener('scroll', element.sticky.scrollListener)\n }\n\n /**\n * Function which is fired when user scroll window. If element is active, function is invoking setPosition function\n * @function\n * @param {node} element - Element for which event function is fired\n */\n\n Sticky.prototype.onScrollEvents = function onScrollEvents(element) {\n if (element.sticky.active) {\n this.setPosition(element)\n }\n }\n\n /**\n * Main function for the library. Here are some condition calculations and css appending for sticky element when user scroll window\n * @function\n * @param {node} element - Element that will be positioned if it's active\n */\n\n Sticky.prototype.setPosition = function setPosition(element) {\n // this.css(element, { position: '', width: '', top: '', left: '' })\n this.css(element, { position: '', top: '', left: '' })\n\n if (this.vp.height < element.sticky.rect.height || !element.sticky.active) {\n return\n }\n\n if (!element.sticky.rect.width) {\n element.sticky.rect = this.getRectangle(element)\n }\n\n if (element.sticky.wrap) {\n this.css(element.parentNode, {\n display: 'block',\n // width: element.sticky.rect.width + 'px',\n height: element.sticky.rect.height + 'px',\n })\n\n this.css(element, {\n width: element.parentNode.offsetWidth + 'px',\n })\n }\n\n if (\n element.sticky.rect.top === 0 &&\n element.sticky.container === this.body\n ) {\n this.css(element, {\n position: 'fixed',\n top: element.sticky.rect.top + 'px',\n left: element.sticky.rect.left + 'px',\n // width: element.sticky.rect.width + 'px',\n })\n } else if (\n this.scrollTop >\n element.sticky.rect.top - element.sticky.marginTop\n ) {\n this.css(element, {\n position: 'fixed',\n // width: element.sticky.rect.width + 'px',\n left: element.sticky.rect.left + 'px',\n })\n\n if (\n this.scrollTop + element.sticky.rect.height + element.sticky.marginTop >\n element.sticky.container.rect.top +\n element.sticky.container.offsetHeight\n ) {\n if (element.sticky.stickyClass) {\n element.classList.remove(element.sticky.stickyClass)\n }\n\n this.css(element, {\n top:\n element.sticky.container.rect.top +\n element.sticky.container.offsetHeight -\n (this.scrollTop + element.sticky.rect.height) +\n 'px',\n })\n } else {\n if (element.sticky.stickyClass) {\n element.classList.add(element.sticky.stickyClass)\n }\n\n this.css(element, { top: element.sticky.marginTop + 'px' })\n }\n } else {\n if (element.sticky.stickyClass) {\n element.classList.remove(element.sticky.stickyClass)\n }\n\n // this.css(element, { position: '', width: '', top: '', left: '' })\n this.css(element, { position: '', top: '', left: '' })\n\n if (element.sticky.wrap) {\n this.css(element.parentNode, {\n display: '',\n // width: '',\n height: '',\n })\n }\n }\n }\n\n /**\n * Function that updates element sticky rectangle (with sticky container), then activate or deactivate element, then update position if it's active\n * @function\n */\n\n Sticky.prototype.update = function update() {\n var _this5 = this\n\n this.forEach(this.elements, function(element) {\n element.sticky.rect = _this5.getRectangle(element)\n element.sticky.container.rect = _this5.getRectangle(\n element.sticky.container\n )\n\n _this5.activate(element)\n _this5.setPosition(element)\n })\n }\n\n /**\n * Destroys sticky element, remove listeners\n * @function\n */\n\n Sticky.prototype.destroy = function destroy() {\n var _this6 = this\n\n window.removeEventListener('load', this.updateScrollTopPosition)\n window.removeEventListener('scroll', this.updateScrollTopPosition)\n\n this.forEach(this.elements, function(element) {\n _this6.destroyResizeEvents(element)\n _this6.destroyScrollEvents(element)\n delete element.sticky\n })\n }\n\n /**\n * Function that returns container element in which sticky element is stuck (if is not specified, then it's stuck to body)\n * @function\n * @param {node} element - Element which sticky container are looked for\n * @return {node} element - Sticky container\n */\n\n Sticky.prototype.getStickyContainer = function getStickyContainer(element) {\n var container = element.parentNode\n\n while (\n !container.hasAttribute('data-sticky-container') &&\n !container.parentNode.querySelector(element.sticky.stickyContainer) &&\n container !== this.body\n ) {\n container = container.parentNode\n }\n\n return container\n }\n\n /**\n * Function that returns element rectangle & position (width, height, top, left)\n * @function\n * @param {node} element - Element which position & rectangle are returned\n * @return {object}\n */\n\n Sticky.prototype.getRectangle = function getRectangle(element) {\n // this.css(element, { position: '', width: '', top: '', left: '' })\n this.css(element, { position: '', top: '', left: '' })\n\n // var width = Math.max(\n // element.offsetWidth,\n // element.clientWidth,\n // element.scrollWidth\n // )\n var height = Math.max(\n element.offsetHeight,\n element.clientHeight,\n element.scrollHeight\n )\n\n var top = 0\n var left = 0\n\n do {\n top += element.offsetTop || 0\n left += element.offsetLeft || 0\n element = element.offsetParent\n } while (element)\n\n // return { top: top, left: left, width: width, height: height }\n return { top: top, left: left, height: height }\n }\n\n /**\n * Function that returns viewport dimensions\n * @function\n * @return {object}\n */\n\n Sticky.prototype.getViewportSize = function getViewportSize() {\n return {\n width: Math.max(\n document.documentElement.clientWidth,\n window.innerWidth || 0\n ),\n height: Math.max(\n document.documentElement.clientHeight,\n window.innerHeight || 0\n ),\n }\n }\n\n /**\n * Function that updates window scroll position\n * @function\n * @return {number}\n */\n\n Sticky.prototype.updateScrollTopPosition = function updateScrollTopPosition() {\n this.scrollTop =\n (window.pageYOffset || document.scrollTop) - (document.clientTop || 0) ||\n 0\n }\n\n /**\n * Helper function for loops\n * @helper\n * @param {array}\n * @param {function} callback - Callback function (no need for explanation)\n */\n\n Sticky.prototype.forEach = function forEach(array, callback) {\n for (var i = 0, len = array.length; i < len; i++) {\n callback(array[i])\n }\n }\n\n /**\n * Helper function to add/remove css properties for specified element.\n * @helper\n * @param {node} element - DOM element\n * @param {object} properties - CSS properties that will be added/removed from specified element\n */\n\n Sticky.prototype.css = function css(element, properties) {\n for (var property in properties) {\n if (properties.hasOwnProperty(property)) {\n element.style[property] = properties[property]\n }\n }\n }\n\n return Sticky\n})()\n\n/**\n * Export function that supports AMD, CommonJS and Plain Browser.\n */\n;(function(root, factory) {\n if (typeof exports !== 'undefined') {\n module.exports = factory\n } else if (typeof define === 'function' && define.amd) {\n define([], factory)\n } else {\n root.Sticky = factory\n }\n})(this, Sticky)\n","// const breakpoints = {\n// xs: 0,\n// md: 768,\n// lg: 1440,\n// xl: 1920,\n// }\n\nconst breakpoints = {\n xs: 0,\n sm: 415,\n md: 601,\n lg: 801,\n xl: 1025,\n xxl: 1441,\n}\n\nconst mediaQueries = {\n xs: '',\n sm: `(min-width: ${breakpoints.sm}px)`,\n md: `(min-width: ${breakpoints.md}px)`,\n lg: `(min-width: ${breakpoints.lg}px)`,\n xl: `(min-width: ${breakpoints.xl}px)`,\n xxl: `(min-width: ${breakpoints.xxl}px)`,\n}\n\n// CommonJS export used so breakpoints can be imported even in files\n// not supporting imports/exports such as package-scripts.js\n\nmodule.exports = {\n breakpoints,\n DPR: 3, // Device Pixel Ratio\n mediaQueries,\n}\n"],"sourceRoot":""}