baseframe-js
Version:
A suite of useful Javascript plugins and functions to help with Front-end Development on websites
260 lines (259 loc) • 13 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 _Store = _interopRequireDefault(require("./core/Store"));
var _UrlState = _interopRequireDefault(require("./core/UrlState"));
var _transition2 = _interopRequireDefault(require("./fn/transition"));
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 = "1.5.0";
var DATA_NAME = 'Tabs';
var EVENT_NAME = 'tabs';
var DEFAULTS = {
tabsEvent: 'click',
cssPrefix: 'tabs',
locationFilter: null,
urlFilterType: 'hash',
historyType: 'push',
loadLocation: true,
addIDtoPanel: true,
ariaLabel: true,
defaultContent: 0,
tabChange: function tabChange() {},
onInit: function onInit() {}
};
var getTabIDFromEl = function getTabIDFromEl(el) {
var _ref;
return ((_ref = el instanceof HTMLButtonElement ? el.dataset.href : el.hash) === null || _ref === void 0 ? void 0 : _ref.replace(/^\#/, '')) || '';
};
var _transition = /*#__PURE__*/new WeakMap();
var Tabs = exports["default"] = /*#__PURE__*/function () {
function Tabs(element, options) {
_classCallCheck(this, Tabs);
_defineProperty(this, "$element", void 0);
_defineProperty(this, "params", void 0);
_defineProperty(this, "$tabsNav", void 0);
_defineProperty(this, "$tabsNavClickElems", void 0);
_defineProperty(this, "tabsNavClickElems", void 0);
_defineProperty(this, "$tabsBody", void 0);
_defineProperty(this, "$tabsBodyPanels", void 0);
_defineProperty(this, "prevTabId", void 0);
_defineProperty(this, "initTabId", void 0);
_defineProperty(this, "initDefaultContent", void 0);
_classPrivateFieldInitSpec(this, _transition, (0, _transition2["default"])());
var s = this;
var dataOptions = (0, _helpers.getDataOptions)(element, EVENT_NAME);
s.$element = (0, _cashDom["default"])(element);
s.params = _cashDom["default"].extend({}, Tabs.defaults, options, dataOptions);
var p = s.params;
s.$tabsNav = s.$element.find(".".concat(p.cssPrefix, "__nav")).first();
s.$tabsBody = s.$element.find(".".concat(p.cssPrefix, "__body")).first();
var tabsBody = s.$tabsBody[0];
s.$tabsBodyPanels = s.$tabsBody.find(".".concat(p.cssPrefix, "__panel"))
// ensure they're the children of the body
// must be direct child
.filter(function (i, el) {
return el.parentElement.isSameNode(tabsBody);
});
s.$tabsNavClickElems = s.$tabsNav.find('a, button');
s.tabsNavClickElems = _toConsumableArray(s.$tabsNavClickElems);
s.prevTabId = null;
s.initDefaultContent = s.$tabsBodyPanels.eq(p.defaultContent).data('tab-id');
//init
s.setAriaAttrs();
s.handleEvents();
s.loadDefaultContent();
s.loadFromUrl();
s.params.onInit(s.$tabsNav, s.$tabsBody);
return s;
}
return _createClass(Tabs, [{
key: "loadDefaultContent",
value: function loadDefaultContent() {
var s = this;
var tabId = s.initDefaultContent;
var clickElem = s.getClickElemFromTabId(tabId);
s.changeTabElements(clickElem, tabId, false);
}
}, {
key: "loadFromUrl",
value: function loadFromUrl() {
var s = this;
var p = s.params;
if (p.locationFilter !== null && p.loadLocation && p.urlFilterType !== 'none') {
var tabId = _UrlState["default"].get(p.urlFilterType, p.locationFilter);
if (tabId) {
var clickElem = s.getClickElemFromTabId(tabId);
clickElem && s.changeTabElements(clickElem, tabId, false);
}
}
}
}, {
key: "getClickElemFromTabId",
value: function getClickElemFromTabId(tabId) {
var $clickElem = this.$tabsNavClickElems.filter(function (i, el) {
return getTabIDFromEl(el) === tabId;
});
if ($clickElem.length) {
return $clickElem[0];
}
return null;
}
}, {
key: "setAriaAttrs",
value: function setAriaAttrs() {
var s = this;
var p = s.params;
s.$tabsNavClickElems.each(function () {
var tabId = getTabIDFromEl(this);
var $tabBodyItem = s.$tabsBodyPanels.filter(function (i, el) {
return el.dataset.tabId === tabId;
});
(0, _cashDom["default"])(this).attr({
'aria-selected': 'false',
'role': 'tab',
'aria-controls': tabId
});
$tabBodyItem.attr({
'aria-label': p.ariaLabel ? this.textContent : null,
'role': 'tabpanel',
tabindex: '-1'
});
if (p.addIDtoPanel) {
$tabBodyItem.attr({
'id': tabId
});
}
});
}
}, {
key: "handleEvents",
value: function handleEvents() {
var s = this;
s.$tabsNav.on("".concat(s.params.tabsEvent, ".").concat(EVENT_NAME, " ").concat(EVENT_NAME), "a, button", function (e) {
var clickElem = this;
var tabId = getTabIDFromEl(clickElem);
s.changeTabElements(clickElem, tabId);
e.preventDefault();
});
s.$tabsNav.on('keydown.' + EVENT_NAME, function (e) {
var target = e.target;
var index = s.tabsNavClickElems.findIndex(function (el) {
return el.isSameNode(target);
});
var next = e.key === 'ArrowRight' || e.key === 'ArrowDown';
var prev = e.key === 'ArrowLeft' || e.key === 'ArrowUp';
if (index !== -1 && (next || prev)) {
var changeIndex = next ? index + 1 : index - 1;
var nextBtn = s.tabsNavClickElems[changeIndex];
if (nextBtn) {
// $(target).attr({'tabindex': '-1'});
var tabId = getTabIDFromEl(nextBtn);
s.changeTabElements(nextBtn, tabId);
(0, _cashDom["default"])(nextBtn)[0].focus();
}
e.preventDefault();
}
});
(0, _cashDom["default"])(window).on("popstate.".concat(EVENT_NAME, " ").concat(EVENT_NAME), function (e) {
if (s.params.historyType === 'push') {
s.loadFromUrl();
e.preventDefault();
}
});
}
}, {
key: "changeTabElements",
value: function changeTabElements(clickElem, tabId) {
var updateUrl = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
var s = this;
var p = s.params;
var hasTab = false;
var cssOpen = "".concat(p.cssPrefix, "__panel--open"),
cssToggling = "".concat(p.cssPrefix, "__panel--toggling"),
cssOpening = "".concat(p.cssPrefix, "__panel--opening"),
cssClosing = "".concat(p.cssPrefix, "__panel--closing");
_classPrivateFieldGet(_transition, s).call(s, function () {
s.$tabsBodyPanels.each(function () {
var thisTabId = this.dataset.tabId;
if (thisTabId === tabId) {
(0, _cashDom["default"])(this).addClass("".concat(cssToggling, " ").concat(cssOpening)).attr({
'aria-hidden': null,
tabindex: '0'
});
hasTab = true;
}
if (s.prevTabId && s.prevTabId === thisTabId) {
(0, _cashDom["default"])(this).addClass("".concat(cssToggling, " ").concat(cssClosing)).attr({
'aria-hidden': 'true',
tabindex: '-1'
});
}
});
if (hasTab) {
s.params.tabChange(tabId, s.prevTabId, s.$tabsNav, s.$tabsBody);
s.prevTabId = tabId;
s.$tabsNavClickElems.attr({
'aria-selected': 'false',
tabindex: '-1'
}).parent('li').removeClass("".concat(p.cssPrefix, "__nav-li--active"));
(0, _cashDom["default"])(clickElem).attr({
'aria-selected': 'true',
tabindex: '0'
}).parent('li').addClass("".concat(p.cssPrefix, "__nav-li--active"));
if (updateUrl && p.urlFilterType !== 'none') {
var paramVal = s.initDefaultContent === tabId ? null : tabId;
if (p.urlFilterType === 'hashVal') {
_UrlState["default"].setHashVal(paramVal, p.historyType);
} else if (p.urlFilterType === 'hash' || p.urlFilterType === 'search') {
_UrlState["default"].set(p.urlFilterType, p.locationFilter, paramVal, p.historyType);
}
}
}
}, function () {
s.$tabsBodyPanels.each(function () {
var isTab = this.dataset.tabId === tabId;
(0, _cashDom["default"])(this).toggleClass(cssOpen, isTab).removeClass("".concat(cssToggling, " ").concat(cssOpening, " ").concat(cssClosing));
});
});
}
}], [{
key: "remove",
value: function remove(element, plugin) {
(0, _cashDom["default"])(element).each(function () {
var s = plugin || (0, _Store["default"])(this, DATA_NAME);
var params = s.params;
s.$tabsNav.off("".concat(params.tabsEvent, ".").concat(EVENT_NAME, " ").concat(EVENT_NAME));
s.$tabsNav.off('keydown.' + EVENT_NAME);
s.$tabsNav.find('a, button').attr({
tabndex: null
});
(0, _cashDom["default"])(window).off("popstate.".concat(EVENT_NAME, " ").concat(EVENT_NAME));
(0, _Store["default"])(this, DATA_NAME, null);
});
}
}]);
}();
_defineProperty(Tabs, "defaults", DEFAULTS);
_defineProperty(Tabs, "version", VERSION);
_defineProperty(Tabs, "pluginName", DATA_NAME);