@smartimpact-it/scroll-utils 1.1.0

package/README.md

@@ -0,0 +1,158 @@
+# Scroll-related utilities
+
+This library contains multiple scroll-related utilities, very useful in websites.
+
+## ScrollDirection
+
+This will put some classes on the `body` element depending on the scroll direction.
+
+```javascript
+import { ScrollDirection } from '@smartimpact-it/scroll-utils';
+
+window.addEventListener('DOMContentLoaded', () => {
+  new ScrollDirection({
+    onlyFor: () => window.innerWidth > 992,
+    threshold: 30,
+  });
+});
+```
+
+The `options` argument of the constructor has the following parameters:
+
+- `onlyFor` - a callback to enable/disable the functionality based on some external factors (e.g. based on the viewport size)
+- `threshold` - the minimum number of pixels for a change to be taken into consideration.
+
+The classes it adds to the `body` element are:
+
+- `scrolling-down`
+- `scrolling-up`
+
+Events:
+
+- `scrollDirectionChange` - dispatched on the window
+
+## ScrollPages
+
+This plugin will add some classes to the body depending on the scroll position: above or below the fold (the first "visible part" of the website).
+
+```javascript
+import { ScrollPages } from '@smartimpact-it/scroll-utils';
+
+window.addEventListener('DOMContentLoaded', () => {
+  new ScrollPages();
+
+  // or, with options:
+  new ScrollPages({
+    belowTheFoldClass: 'below-the-fold',
+    aboveTheFoldClass: 'above-the-fold',
+  });
+});
+```
+
+The plugin can also accept an `intersectionElement` if you want to provide yourself the HTML element that will "separate" the "above-the-fold" part from the "below-the-fold" part. If not provided, the plugin generates this element automatically.
+
+## ScrollOffset
+
+This plugin monitors the size of specific UI elements (e.g. header elements) and creates CSS variables for their sizes. These are extremely useful when you have sticky headers and you need to adjust the `scroll-margin-top` property to take into account the sticky header.
+
+```javascript
+import { ScrollOffsetPart, ScrollOffset } from '@smartimpact-it/scroll-utils';
+
+window.addEventListener('DOMContentLoaded', () => {
+  const header = document.querySelector('.page-header'),
+    headerTop = header.querySelector('.page-header-inner-top'),
+    headerBottom = header.querySelector('.page-header-bottom'),
+    anchorSection = document.querySelector('.anchors-section');
+  const topPart = new ScrollOffsetPart({
+    name: 'top',
+    elements: [headerTop],
+    fixedHeight: headerTopHeight,
+    condition: () => !body.classList.contains('sticky-pinned') && isLarge(),
+  });
+  const bottomPart = new ScrollOffsetPart({
+    name: 'bottom',
+    elements: [headerBottom],
+  });
+  const anchorsPart = new ScrollOffsetPart({
+    name: 'anchors',
+    elements: [anchorSection],
+  });
+
+  new ScrollOffset({
+    variables: {
+      'menu-space': [topPart, bottomPart],
+      'full-menu-space': [topPart, bottomPart, anchorsPart],
+    },
+  });
+});
+```
+
+You begin by defining `ScrollOffsetPart` objects - these are the UI elements that we are monitoring.
+Then, you create the `ScrollOffset` instance and you pass the variables that you want to be created and which elements those variables should contain. For example, in the code above, the "--menu-space" CSS variable will contain the size of the `topPart` + `bottomPart`.
+
+In CSS, you can use those variables to set `scroll-margin-top` or for other purposes:
+
+```css
+* {
+  scroll-margin-top: var(--full-menu-space, 0);
+}
+```
+
+## ScrollWithMarginTop
+
+This is a function that allows you to scroll to an element using the correct `scroll-margin-top` or `scroll-snap-margin-top`. Safari < 14.5 doesn't properly support `scroll-margin-top`, so we are using `scroll-snap-margin-top` (which it can read, but doesn't do anything in this case).
+
+You can then force the correct scroll-margin-top when the `hash` of the page changes (when you click on an anchor):
+
+```javascript
+import { scrollWithMarginTop, FixHashScrollPosition } from '@smartimpact-it/scroll-utils';
+
+window.addEventListener('DOMContentLoaded', () => {
+  // fix for scroll-margin-top
+  window.addEventListener(
+    'hashchange',
+    () => {
+      const hash = window.location.hash;
+      const element = document.querySelector(hash);
+      if (element) {
+        setTimeout(() => scrollWithMarginTop(element));
+      }
+    },
+    false
+  );
+
+  // or use the existing class:
+  new FixHashScrollPosition();
+});
+```
+
+And in CSS you do the following (put `scroll-snap-margin-top` above `scroll-margin-top`):
+
+```css
+* {
+  scroll-snap-margin-top: var(--full-menu-space, 0);
+  scroll-margin-top: var(--full-menu-space, 0);
+}
+```
+
+The `scrollWithMarginTop` function has 3 parameters:
+
+- `element` (HTMLElement) - the element to scroll to
+- `offset` (numeric, default = `0`) - the offset for the scroll position (number of pixels)
+- `onlyWhenNeeded` (boolean, default = `false`) - if this is `true`, it will not scroll if the element is already visible in the first half of the viewport
+
+## Fix the scroll position for Bootstrap or Foundation accordions
+
+When accordions open while another accordion tab above is open, the result is that some part of the new tab may be hidden. To fix this, we need to fix the scroll. You can use the `BootstrapAccordionScrollIntoView` and `FoundationAccordionScrollIntoView` classes, which in turn use the `scrollWithMarginTop` function.
+
+```javascript
+import { BootstrapAccordionScrollIntoView, FoundationAccordionScrollIntoView } from '@smartimpact-it/scroll-utils';
+
+window.addEventListener('DOMContentLoaded', () => {
+  // for bootstrap accordion
+  new BootstrapAccordionScrollIntoView();
+
+  // for foundation accordion
+  new FoundationAccordionScrollIntoView();
+}
+```

package/dist/cjs/Bootstrap4AccordionScrollIntoView.js

@@ -0,0 +1,74 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
+function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
+function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
+function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Bootstrap4AccordionScrollIntoView = void 0;
+var scrollWithMarginTop_1 = require("./scrollWithMarginTop");
+var onReady_1 = require("./utils/onReady");
+/**
+ * Scroll to the opened accordion tab
+ */
+var _Bootstrap4AccordionScrollIntoView_brand = /*#__PURE__*/new WeakSet();
+var _handle = /*#__PURE__*/new WeakMap();
+var Bootstrap4AccordionScrollIntoView = /*#__PURE__*/_createClass(function Bootstrap4AccordionScrollIntoView() {
+  var _this = this;
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$extraOffset = _ref.extraOffset,
+    extraOffset = _ref$extraOffset === void 0 ? 0 : _ref$extraOffset;
+  _classCallCheck(this, Bootstrap4AccordionScrollIntoView);
+  _classPrivateMethodInitSpec(this, _Bootstrap4AccordionScrollIntoView_brand);
+  _defineProperty(this, "extraOffset", void 0);
+  _classPrivateFieldInitSpec(this, _handle, function (e) {
+    var _target$closest;
+    var header = null;
+    var target = e.target;
+    // Skip scrolling if the clicked element or any of its parents has the class 'skip-scroll-into-view'.
+    if ((_target$closest = target.closest) !== null && _target$closest !== void 0 && _target$closest.call(target, '.skip-scroll-into-view, [data-skip-scroll-into-view]')) {
+      return;
+    }
+    var tabId = target.id;
+    var headerId = target.getAttribute('aria-labelledby');
+    if (headerId) {
+      header = document.querySelector("#".concat(headerId));
+    }
+    if (!header && tabId) {
+      header = document.querySelector("[data-target=\"#".concat(tabId, "\"]"));
+    }
+    if (header) {
+      (0, scrollWithMarginTop_1.scrollWithMarginTop)(header, _this.extraOffset, true);
+    }
+  });
+  this.extraOffset = extraOffset;
+  (0, onReady_1.onComplete)(function () {
+    return setTimeout(function () {
+      return _assertClassBrand(_Bootstrap4AccordionScrollIntoView_brand, _this, _addEventListeners).call(_this);
+    }, 1000);
+  });
+});
+function _addEventListeners() {
+  var _this2 = this;
+  if ('$' in window) {
+    window.$(document).on('shown.collapse', function (e) {
+      _classPrivateFieldGet(_handle, _this2).call(_this2, e);
+    });
+  } else {
+    document.addEventListener('shown.collapse', function (e) {
+      _classPrivateFieldGet(_handle, _this2).call(_this2, e);
+    });
+  }
+}
+exports.Bootstrap4AccordionScrollIntoView = Bootstrap4AccordionScrollIntoView;
+exports["default"] = Bootstrap4AccordionScrollIntoView;

package/dist/cjs/BootstrapAccordionScrollIntoView.js

@@ -0,0 +1,68 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
+function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
+function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
+function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BootstrapAccordionScrollIntoView = void 0;
+var scrollWithMarginTop_1 = require("./scrollWithMarginTop");
+var onReady_1 = require("./utils/onReady");
+/**
+ * Scroll to the opened accordion tab
+ */
+var _BootstrapAccordionScrollIntoView_brand = /*#__PURE__*/new WeakSet();
+var _handle = /*#__PURE__*/new WeakMap();
+var BootstrapAccordionScrollIntoView = /*#__PURE__*/_createClass(function BootstrapAccordionScrollIntoView() {
+  var _this = this;
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$extraOffset = _ref.extraOffset,
+    extraOffset = _ref$extraOffset === void 0 ? 0 : _ref$extraOffset;
+  _classCallCheck(this, BootstrapAccordionScrollIntoView);
+  _classPrivateMethodInitSpec(this, _BootstrapAccordionScrollIntoView_brand);
+  _defineProperty(this, "extraOffset", void 0);
+  _classPrivateFieldInitSpec(this, _handle, function (e) {
+    var _target$closest;
+    var header = null;
+    var target = e.target;
+    // Skip scrolling if the clicked element or any of its parents has the class 'skip-scroll-into-view'.
+    if ((_target$closest = target.closest) !== null && _target$closest !== void 0 && _target$closest.call(target, '.skip-scroll-into-view, [data-skip-scroll-into-view]')) {
+      return;
+    }
+    var tabId = target.id;
+    var headerId = target.getAttribute('aria-labelledby');
+    if (headerId) {
+      header = document.querySelector("#".concat(headerId));
+    }
+    if (!header && tabId) {
+      header = document.querySelector("[data-bs-target=\"#".concat(tabId, "\"]"));
+    }
+    if (header) {
+      (0, scrollWithMarginTop_1.scrollWithMarginTop)(header, _this.extraOffset, true);
+    }
+  });
+  this.extraOffset = extraOffset;
+  (0, onReady_1.onComplete)(function () {
+    return setTimeout(function () {
+      return _assertClassBrand(_BootstrapAccordionScrollIntoView_brand, _this, _addEventListeners).call(_this);
+    }, 1000);
+  });
+});
+function _addEventListeners() {
+  var _this2 = this;
+  document.addEventListener('shown.bs.collapse', function (e) {
+    _classPrivateFieldGet(_handle, _this2).call(_this2, e);
+  });
+}
+exports.BootstrapAccordionScrollIntoView = BootstrapAccordionScrollIntoView;
+exports["default"] = BootstrapAccordionScrollIntoView;

package/dist/cjs/FixHashScrollPosition.js

@@ -0,0 +1,38 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FixHashScrollPosition = void 0;
+var scrollWithMarginTop_1 = require("./scrollWithMarginTop");
+/**
+ * Fix the scroll offset when loading a page with a #hash (anchor)
+ */
+var FixHashScrollPosition = /*#__PURE__*/_createClass(function FixHashScrollPosition() {
+  _classCallCheck(this, FixHashScrollPosition);
+  // fix for scroll-margin-top
+  window.addEventListener('hashchange', function () {
+    var hash = window.location.hash;
+    if (!hash || hash === '#') {
+      return;
+    }
+    try {
+      var element = document.querySelector(hash);
+      if (element) {
+        setTimeout(function () {
+          return (0, scrollWithMarginTop_1.scrollWithMarginTop)(element);
+        });
+      }
+    } catch (e) {
+      console.warn(e);
+    }
+  }, false);
+});
+exports.FixHashScrollPosition = FixHashScrollPosition;
+exports["default"] = FixHashScrollPosition;

package/dist/cjs/FoundationAccordionScrollIntoView.js

@@ -0,0 +1,52 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
+function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FoundationAccordionScrollIntoView = void 0;
+var scrollWithMarginTop_1 = require("./scrollWithMarginTop");
+var onReady_1 = require("./utils/onReady");
+/**
+ * Scroll to the opened accordion tab
+ */
+var _FoundationAccordionScrollIntoView_brand = /*#__PURE__*/new WeakSet();
+var FoundationAccordionScrollIntoView = /*#__PURE__*/_createClass(function FoundationAccordionScrollIntoView() {
+  var _this = this;
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$extraOffset = _ref.extraOffset,
+    extraOffset = _ref$extraOffset === void 0 ? 0 : _ref$extraOffset;
+  _classCallCheck(this, FoundationAccordionScrollIntoView);
+  _classPrivateMethodInitSpec(this, _FoundationAccordionScrollIntoView_brand);
+  _defineProperty(this, "extraOffset", void 0);
+  this.extraOffset = extraOffset;
+  (0, onReady_1.onComplete)(function () {
+    return setTimeout(function () {
+      return _assertClassBrand(_FoundationAccordionScrollIntoView_brand, _this, _addEventListeners).call(_this);
+    }, 1000);
+  });
+});
+function _addEventListeners() {
+  var _this2 = this;
+  if (!('$' in window)) return;
+  window.$(document).on('down.zf.accordion', function (e, $content) {
+    var _target$closest;
+    var target = $content.get(0).parentNode;
+    // Skip scrolling if the clicked element or any of its parents has the class 'skip-scroll-into-view'.
+    if ((_target$closest = target.closest) !== null && _target$closest !== void 0 && _target$closest.call(target, '.skip-scroll-into-view, [data-skip-scroll-into-view]')) {
+      return;
+    }
+    (0, scrollWithMarginTop_1.scrollWithMarginTop)(target, _this2.extraOffset, true);
+  });
+}
+exports.FoundationAccordionScrollIntoView = FoundationAccordionScrollIntoView;
+exports["default"] = FoundationAccordionScrollIntoView;

package/dist/cjs/ScrollDirection.js

@@ -0,0 +1,120 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
+function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
+function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
+function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
+function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScrollDirection = void 0;
+var isFunction_1 = __importDefault(require("lodash/isFunction"));
+var throttle_1 = __importDefault(require("lodash/throttle"));
+var _lastScrollTop = /*#__PURE__*/new WeakMap();
+var _throttle = /*#__PURE__*/new WeakMap();
+var _throttleOptions = /*#__PURE__*/new WeakMap();
+var _ScrollDirection_brand = /*#__PURE__*/new WeakSet();
+var ScrollDirection = /*#__PURE__*/_createClass(
+/**
+ * start an instance
+ * @param {{onlyFor: a callback to determine where to modify classes; threshold: amount in px to take into account }} param0
+ */
+function ScrollDirection() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    _ref$onlyFor = _ref.onlyFor,
+    onlyFor = _ref$onlyFor === void 0 ? null : _ref$onlyFor,
+    _ref$threshold = _ref.threshold,
+    threshold = _ref$threshold === void 0 ? 0 : _ref$threshold,
+    _ref$thresholdCallbac = _ref.thresholdCallback,
+    thresholdCallback = _ref$thresholdCallbac === void 0 ? null : _ref$thresholdCallbac,
+    _ref$throttle = _ref.throttle,
+    throttle = _ref$throttle === void 0 ? 16 : _ref$throttle,
+    _ref$throttleOptions = _ref.throttleOptions,
+    throttleOptions = _ref$throttleOptions === void 0 ? {
+      trailing: false
+    } : _ref$throttleOptions;
+  _classCallCheck(this, ScrollDirection);
+  /**
+   * setup the scroll event listener
+   */
+  _classPrivateMethodInitSpec(this, _ScrollDirection_brand);
+  _defineProperty(this, "onlyForCallback", null);
+  _classPrivateFieldInitSpec(this, _lastScrollTop, 0);
+  _defineProperty(this, "threshold", 0);
+  _defineProperty(this, "thresholdCallback", null);
+  _classPrivateFieldInitSpec(this, _throttle, void 0);
+  _classPrivateFieldInitSpec(this, _throttleOptions, void 0);
+  this.onlyForCallback = onlyFor;
+  this.threshold = threshold;
+  this.thresholdCallback = thresholdCallback;
+  _classPrivateFieldSet(_throttle, this, throttle);
+  _classPrivateFieldSet(_throttleOptions, this, throttleOptions);
+  _classPrivateFieldSet(_lastScrollTop, this, window.pageYOffset || document.documentElement.scrollTop);
+  _assertClassBrand(_ScrollDirection_brand, this, _setupListeners).call(this);
+});
+function _setupListeners() {
+  var _this = this;
+  var update = function update() {
+    var isValid = !_this.onlyForCallback || _this.onlyForCallback();
+    if (!isValid) return;
+    _assertClassBrand(_ScrollDirection_brand, _this, _determineDirection).call(_this);
+  };
+  if (_classPrivateFieldGet(_throttle, this)) {
+    var throttledUpdate = (0, throttle_1["default"])(update, _classPrivateFieldGet(_throttle, this), _classPrivateFieldGet(_throttleOptions, this) || {});
+    window.addEventListener('scroll', throttledUpdate, {
+      passive: true
+    });
+  } else {
+    window.addEventListener('scroll', update, {
+      passive: true
+    });
+  }
+}
+/**
+ * dispatch an event on the window
+ */
+function _dispatchEvent(name) {
+  requestAnimationFrame(function () {
+    window.dispatchEvent(new CustomEvent(name));
+  });
+}
+/**
+ * determine the scroll direction
+ */
+function _determineDirection() {
+  var body = document.body,
+    classList = body.classList;
+  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+  var localThreshold = this.thresholdCallback && (0, isFunction_1["default"])(this.thresholdCallback) ? this.thresholdCallback({
+    scrollTop: scrollTop,
+    threshold: this.threshold,
+    lastScrollTop: _classPrivateFieldGet(_lastScrollTop, this)
+  }) : this.threshold;
+  if (Math.abs(scrollTop - _classPrivateFieldGet(_lastScrollTop, this)) < localThreshold) return;
+  if (scrollTop > _classPrivateFieldGet(_lastScrollTop, this) + localThreshold && !classList.contains('scrolling-down')) {
+    classList.add('scrolling-down');
+    classList.remove('scrolling-up');
+    _assertClassBrand(_ScrollDirection_brand, this, _dispatchEvent).call(this, 'scrollDirectionChange');
+  } else if (scrollTop < _classPrivateFieldGet(_lastScrollTop, this) - localThreshold && !classList.contains('scrolling-up')) {
+    classList.add('scrolling-up');
+    classList.remove('scrolling-down');
+    _assertClassBrand(_ScrollDirection_brand, this, _dispatchEvent).call(this, 'scrollDirectionChange');
+  }
+  _classPrivateFieldSet(_lastScrollTop, this, Math.max(scrollTop, 0));
+}
+exports.ScrollDirection = ScrollDirection;
+exports["default"] = ScrollDirection;