baseframe-js/dist/cjs/Parallax.js

A suite of useful Javascript plugins and functions to help with Front-end Development on websites

"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); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _cashDom = _interopRequireWildcard(require("cash-dom"));
var _Store = _interopRequireDefault(require("./core/Store"));
var _helpers = require("./util/helpers");
var _throttleResize = _interopRequireDefault(require("./fn/throttleResize"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
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 _classPrivateGetter(s, r, a) { return a(_assertClassBrand(s, 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 VERSION = "2.0.1";
var DATA_NAME = 'Parallax';
var EVENT_NAME = 'parallax';
var DEFAULTS = {
  speed: 7,
  zSpeed: 5,
  cssPrefix: 'parallax',
  axis: 'y',
  scrollAxis: 'y',
  zAxis: false,
  relativeElem: false,
  bgFill: false,
  rootMargin: 0,
  scrollMaxPxStop: 5000,
  zScrollMaxPxStop: 2000,
  minWidth: null,
  maxWidth: null
};
var _Parallax_brand = /*#__PURE__*/new WeakSet();
var Parallax = exports["default"] = /*#__PURE__*/function () {
  function Parallax(element, options, index) {
    _classCallCheck(this, Parallax);
    //getters
    _classPrivateMethodInitSpec(this, _Parallax_brand);
    _defineProperty(this, "params", void 0);
    _defineProperty(this, "zInitOffset", void 0);
    _defineProperty(this, "index", void 0);
    _defineProperty(this, "instanceEvent", void 0);
    _defineProperty(this, "$window", void 0);
    _defineProperty(this, "$element", void 0);
    _defineProperty(this, "element", void 0);
    _defineProperty(this, "elementOffset", void 0);
    _defineProperty(this, "$relElem", void 0);
    _defineProperty(this, "winHeight", void 0);
    _defineProperty(this, "winWidth", void 0);
    _defineProperty(this, "elemHeight", void 0);
    _defineProperty(this, "elemWidth", void 0);
    _defineProperty(this, "speed", void 0);
    _defineProperty(this, "zSpeed", void 0);
    _defineProperty(this, "fillAmount", void 0);
    _defineProperty(this, "bgFill", void 0);
    _defineProperty(this, "bgFillProp", void 0);
    _defineProperty(this, "axis", void 0);
    _defineProperty(this, "zAxis", void 0);
    _defineProperty(this, "scrollMaxPxStop", void 0);
    _defineProperty(this, "zScrollMaxPxStop", void 0);
    _defineProperty(this, "rootMargin", void 0);
    _defineProperty(this, "lastZSpeed", void 0);
    _defineProperty(this, "lastCssInProps", void 0);
    _defineProperty(this, "minWidthIfSet", void 0);
    _defineProperty(this, "maxWidthIfSet", void 0);
    _defineProperty(this, "effectCleared", void 0);
    _defineProperty(this, "cssPrevDir", void 0);
    var _s = this;
    var dataOptions = (0, _helpers.getDataOptions)(element, EVENT_NAME);
    _s.$window = (0, _cashDom["default"])(window);
    _s.$element = (0, _cashDom["default"])(element);
    _s.element = element;
    _s.params = _cashDom["default"].extend({}, Parallax.defaults, options, dataOptions);
    _s.zInitOffset = 0;
    _s.index = index;
    _s.instanceEvent = EVENT_NAME + index;
    _s.$relElem = _classPrivateGetter(_Parallax_brand, _s, _get_relElem);
    _s.cssPrevDir = '';
    //props to get updated on resize
    _s.updatableProps();
    _s.handleEvents();
    return _s;
  }
  return _createClass(Parallax, [{
    key: "handleEvents",
    value: function handleEvents() {
      var s = this;
      (0, _throttleResize["default"])(function () {
        s.updatableProps();
        // $(window).trigger(s.instanceEvent);
        s.parallax(s);
      }, "".concat(s.instanceEvent, "_resize"), true);
      (0, _cashDom["default"])(window).on("scroll.".concat(s.instanceEvent, " ").concat(s.instanceEvent), function () {
        window.requestAnimationFrame(function () {
          s.parallax(s);
        });
      }).trigger(s.instanceEvent);
    }
  }, {
    key: "handleUpdate",
    value: function handleUpdate() {
      var s = this;
      s.updatableProps();
      (0, _cashDom["default"])(window).trigger(s.instanceEvent);
    }
  }, {
    key: "updatableProps",
    value: function updatableProps() {
      var s = this;
      var speed = _classPrivateGetter(_Parallax_brand, s, _get_speed),
        zSpeed = _classPrivateGetter(_Parallax_brand, s, _get_zSpeed),
        cssPrefix = s.params.cssPrefix,
        speedCss = "".concat(cssPrefix, "--").concat(s.params.axis, "-").concat(zSpeed > 0 ? 'pos' : 'neg'),
        zSpeedCss = s.params.zAxis ? " ".concat(cssPrefix, "--z-").concat(zSpeed > 0 ? 'pos' : 'neg') : '',
        newCssDir = "".concat(speedCss).concat(zSpeedCss),
        rm = s.params.rootMargin;
      //reset to get new measurements
      s.$element.css({
        transform: null,
        height: null,
        width: null
      }).removeClass(s.cssPrevDir).addClass(newCssDir);
      s.cssPrevDir = newCssDir;
      s.winHeight = s.$window.height();
      s.winWidth = s.$window.width();
      s.elemHeight = s.$relElem[0].scrollHeight;
      s.elemWidth = s.$relElem[0].scrollWidth;
      s.speed = speed;
      s.zSpeed = zSpeed;
      s.fillAmount = _classPrivateGetter(_Parallax_brand, s, _get_fillAmount);
      s.bgFill = s.params.bgFill;
      s.axis = s.params.axis;
      s.bgFillProp = s.axis === 'y' ? 'height' : 'width';
      s.zAxis = s.params.zAxis;
      s.$relElem = _classPrivateGetter(_Parallax_brand, s, _get_relElem);
      s.scrollMaxPxStop = s.params.scrollMaxPxStop;
      s.zScrollMaxPxStop = s.params.zScrollMaxPxStop;
      s.lastZSpeed = 0;
      s.rootMargin = typeof s.params.rootMargin === 'number' ? [rm, rm] : rm;
      s.minWidthIfSet = s.params.minWidth ? s.winWidth > s.params.minWidth : true;
      s.maxWidthIfSet = s.params.maxWidth ? s.winWidth < s.params.maxWidth : true;
      s.elementOffset = s.getElementRects();
      if (s.lastCssInProps) {
        s.$element.css(s.lastCssInProps);
      }
    }
  }, {
    key: "getElementRects",
    value: function getElementRects() {
      var s = this;
      var elPos = s.$element.offset(),
        top = elPos.top,
        left = elPos.left,
        bottom = top + s.elemHeight,
        right = left + s.elemWidth;
      return {
        top: top,
        left: left,
        bottom: bottom,
        right: right
      };
    }
  }, {
    key: "parallax",
    value: function parallax(s) {
      var scrollAxis = s.params.scrollAxis,
        _s$rootMargin = _slicedToArray(s.rootMargin, 2),
        rootMStart = _s$rootMargin[0],
        rootMEnd = _s$rootMargin[1],
        withinMinAndMaxIfSet = s.minWidthIfSet && s.maxWidthIfSet,
        scrollVertical = scrollAxis === 'y',
        offset = scrollVertical ? s.elementOffset.top : s.elementOffset.left,
        winSide = (scrollVertical ? s.winHeight : s.winWidth) - rootMStart,
        scrollDir = scrollVertical ? window.scrollY : window.scrollX,
        pixelStart = offset > winSide ? winSide - offset + scrollDir : offset + (scrollDir - offset);
      if (s.isInView(scrollVertical, pixelStart, scrollDir, rootMEnd) && withinMinAndMaxIfSet) {
        var speed = pixelStart * s.speed,
          zSpeed = pixelStart * s.zSpeed,
          speedPx = speed < s.zScrollMaxPxStop ? speed : s.zScrollMaxPxStop,
          zSpeedPx = s.params.zAxis ? s.lastZSpeed < s.zScrollMaxPxStop ? zSpeed : s.lastZSpeed : 0,
          translateParams = s.axis === 'y' ? "0, ".concat(speedPx, "px, ").concat(zSpeedPx, "px") : "".concat(speedPx, "px, 0, ").concat(zSpeedPx, "px");
        var cssProps = _defineProperty({
          transform: "translate3d(".concat(translateParams, ")")
        }, s.bgFillProp, s.bgFill ? "calc(100% + ".concat(s.fillAmount, "px)") : null);
        s.lastZSpeed = zSpeedPx;
        s.lastCssInProps = cssProps;
        s.$element.css(cssProps);
      }
    }
  }, {
    key: "isInView",
    value: function isInView(scrollVertical, pixelStart, scrollDir, rootMargin) {
      var s = this;
      var elemOffsetEnd = scrollVertical ? s.elementOffset.bottom : s.elementOffset.right;
      return scrollDir + rootMargin <= elemOffsetEnd && pixelStart >= 0;
    }
  }], [{
    key: "remove",
    value: function remove(element, plugin) {
      (0, _cashDom["default"])(element).each(function () {
        var s = plugin || (0, _Store["default"])(this, DATA_NAME);
        (0, _cashDom["default"])(window).off("scroll.".concat(s.instanceEvent, " resize.").concat(s.instanceEvent, " ").concat(s.instanceEvent, "_resize ").concat(s.instanceEvent));
        s.$element.css({
          'transform': null,
          height: null,
          width: null
        }).removeClass(s.cssPrevDir);
        (0, _Store["default"])(this, DATA_NAME, null);
      });
    }
  }]);
}();
function _get_fillAmount(_this) {
  var s = _this;
  var saY = s.params.scrollAxis === 'y';
  var winSide = s.params.axis === 'y' ? s.winHeight : s.winWidth + (saY ? 0 : s.elemWidth);
  return winSide * Math.abs(s.speed);
}
function _get_speed(_this2) {
  var s = _this2;
  return s.params.speed / 100;
}
function _get_zSpeed(_this3) {
  var s = _this3;
  return s.params.zSpeed / 100;
}
function _get_relElem(_this4) {
  var s = _this4;
  return s.params.relativeElem ? s.$element.closest(s.params.relativeElem) : s.$element;
}
_defineProperty(Parallax, "defaults", DEFAULTS);
_defineProperty(Parallax, "version", VERSION);
_defineProperty(Parallax, "pluginName", DATA_NAME);