baseframe-js
Version:
A suite of useful Javascript plugins and functions to help with Front-end Development on websites
239 lines (238 loc) • 12.1 kB
JavaScript
;
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 = _interopRequireDefault(require("cash-dom"));
var _helpers = require("./util/helpers");
var _smoothScroll = _interopRequireDefault(require("./fn/smoothScroll"));
var _transition2 = _interopRequireDefault(require("./fn/transition"));
var _UrlState = _interopRequireDefault(require("./core/UrlState"));
var _Store = _interopRequireDefault(require("./core/Store"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread 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 _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
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 _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 _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
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 _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"); }
;
var VERSION = "4.0.0";
var DATA_NAME = 'Collapse';
var EVENT_NAME = 'collapse';
var DEFAULTS = {
cssPrefix: 'collapse',
toggleDuration: 500,
toggleGroup: false,
moveToTopOnOpen: false,
moveToTopOffset: 0,
scrollSpeed: 100,
urlFilterType: 'hash',
historyType: 'replace',
locationFilter: null,
loadLocation: true,
afterOpen: _helpers.noop,
afterClose: _helpers.noop,
afterInit: _helpers.noop
};
var _transition = /*#__PURE__*/new WeakMap();
var Collapse = exports["default"] = /*#__PURE__*/function () {
function Collapse(element, options, index) {
_classCallCheck(this, Collapse);
_defineProperty(this, "$element", void 0);
_defineProperty(this, "params", void 0);
_defineProperty(this, "toggling", void 0);
_defineProperty(this, "$btnElems", void 0);
_defineProperty(this, "$activeItem", void 0);
_defineProperty(this, "initLoaded", void 0);
_classPrivateFieldInitSpec(this, _transition, (0, _transition2["default"])());
var s = this;
s.$element = (0, _cashDom["default"])(element);
var dataOptions = (0, _helpers.getDataOptions)(element, EVENT_NAME);
s.params = _cashDom["default"].extend({}, Collapse.defaults, options, dataOptions);
s.toggling = false;
s.$btnElems = s.$element.find(".".concat(s.params.cssPrefix, "__btn")).attr({
'aria-expanded': 'false'
});
s.$activeItem = null;
s.initLoaded = false;
// init
s.loadFromUrl();
s.handleEvents();
s.params.afterInit(s.$element);
(0, _Store["default"])(element, DATA_NAME, s);
return s;
}
return _createClass(Collapse, [{
key: "handleEvents",
value: function handleEvents() {
var s = this;
var cssPrefix = s.params.cssPrefix;
s.$element.on("click.".concat(EVENT_NAME, " ").concat(EVENT_NAME), ".".concat(cssPrefix, "__btn"), function (e) {
var elemId = (0, _cashDom["default"])(this).attr('aria-controls') || this.hash.substring(1);
s.toggleAction(elemId);
e.preventDefault();
});
(0, _cashDom["default"])(window).on("popstate.".concat(EVENT_NAME), function (e) {
if (s.params.historyType === 'push') {
s.loadFromUrl();
s.initLoaded = true;
e.preventDefault();
}
});
}
}, {
key: "loadFromUrl",
value: function loadFromUrl() {
var s = this;
var p = s.params;
var loadElem = function loadElem(filterEl) {
var cssOpen = "".concat(p.cssPrefix, "--open");
var $tryElem = s.$element.find('#' + filterEl);
if ($tryElem.length) {
s.$activeItem = $tryElem;
s.$activeItem.addClass(cssOpen);
s.$btnElems.filter(function (i, el) {
return (0, _cashDom["default"])(el).attr('aria-controls') === filterEl;
}).attr({
'aria-expanded': 'true'
});
}
};
if (p.locationFilter !== null && p.loadLocation && p.urlFilterType !== 'none') {
var filterEl = _UrlState["default"].get(p.urlFilterType, p.locationFilter);
var cssOpen = "".concat(p.cssPrefix, "--open");
s.$element.find(".".concat(p.cssPrefix, "__body.").concat(cssOpen)).removeClass(cssOpen);
s.$btnElems.attr({
'aria-expanded': 'false'
});
if (filterEl) {
if (Array.isArray(filterEl)) {
filterEl.forEach(loadElem);
} else {
loadElem(filterEl);
}
}
}
}
}, {
key: "toggleAction",
value: function toggleAction(currElemID) {
var s = this;
if (s.toggling || currElemID === null) return;
var cssPrefix = s.params.cssPrefix;
var p = s.params;
s.$activeItem = s.$element.find('#' + currElemID);
if (s.$activeItem.length) {
var cssOpen = "".concat(cssPrefix, "--open"),
cssToggling = "".concat(cssPrefix, "--toggling"),
cssOpening = "".concat(cssPrefix, "--opening"),
cssClosing = "".concat(cssPrefix, "--closing"),
cssBodyOpen = ".".concat(cssPrefix, "__body.").concat(cssOpen);
var $currOpenItems = s.$element.find(cssBodyOpen);
var $itemsToClose = $currOpenItems.filter(function (i, el) {
return p.toggleGroup || el.id === currElemID;
});
var activeAlreadyOpen = s.$activeItem.hasClass(cssOpen);
$itemsToClose.each(function () {
(0, _cashDom["default"])(this).css({
height: this.scrollHeight
});
});
_classPrivateFieldGet(_transition, s).call(s, function () {
s.toggling = true;
s.$btnElems.each(function () {
var $btn = (0, _cashDom["default"])(this);
var isCurrent = $btn.attr('aria-controls') === currElemID;
var expanded = isCurrent && $btn.attr('aria-expanded') === 'false';
if (p.toggleGroup) {
$btn.attr({
'aria-expanded': expanded + ''
});
} else {
if (isCurrent) {
$btn.attr({
'aria-expanded': expanded + ''
});
}
}
});
$itemsToClose.removeClass(cssOpen).addClass("".concat(cssToggling, " ").concat(cssClosing)).css({
height: 0
});
if (!activeAlreadyOpen) {
s.$activeItem.addClass("".concat(cssToggling, " ").concat(cssOpening)).css({
height: s.$activeItem[0].scrollHeight
});
}
}, function () {
s.toggling = false;
$itemsToClose.removeClass("".concat(cssToggling, " ").concat(cssClosing)).css({
height: null
});
s.params.afterClose(s.$btnElems, $itemsToClose);
if (!activeAlreadyOpen) {
s.$activeItem.addClass(cssOpen).removeClass("".concat(cssToggling, " ").concat(cssOpening)).css({
height: null
});
}
// Update History in URL
if (p.urlFilterType !== 'none') {
var paramList = _toConsumableArray(s.$element.find(cssBodyOpen)).map(function (el) {
return el.id;
});
var paramVal = paramList.length === 1 ? paramList[0] : paramList.length > 0 ? paramList : null;
_UrlState["default"].set(p.urlFilterType, p.locationFilter, paramVal, p.historyType);
}
s.params.afterOpen(s.$btnElems, s.$activeItem);
s.moveToTopOnOpen();
}, s.params.toggleDuration);
}
}
}, {
key: "moveToTopOnOpen",
value: function moveToTopOnOpen() {
var s = this;
var _s$params = s.params,
cssPrefix = _s$params.cssPrefix,
moveToTopOffset = _s$params.moveToTopOffset,
moveToTopOnOpen = _s$params.moveToTopOnOpen,
scrollSpeed = _s$params.scrollSpeed;
if (s.$activeItem) {
var $item = s.$activeItem.parent(".".concat(cssPrefix, "__item")) || s.$activeItem;
if ($item.length && moveToTopOnOpen) {
// get the compiler to stop from throwing
// an error it'll never throw by setting to 'any'
var elemOffsetTop = $item.offset().top;
var top = elemOffsetTop - moveToTopOffset;
(0, _smoothScroll["default"])(top, scrollSpeed);
}
}
}
}], [{
key: "remove",
value: function remove(element, plugin) {
(0, _cashDom["default"])(element).each(function () {
var s = plugin || (0, _Store["default"])(this, DATA_NAME);
s.$element.off("click.".concat(EVENT_NAME, " ").concat(EVENT_NAME));
(0, _cashDom["default"])(window).off("popstate.".concat(EVENT_NAME));
// delete the Store item
(0, _Store["default"])(this, DATA_NAME, null);
});
}
}]);
}();
_defineProperty(Collapse, "defaults", DEFAULTS);
_defineProperty(Collapse, "version", VERSION);
_defineProperty(Collapse, "pluginName", DATA_NAME);