joomla-ui-custom-elements
Version:
Joomla UI components as custom elements
362 lines (331 loc) • 14.1 kB
JavaScript
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function t(e) {
return (t = "function" == typeof Symbol && "symbol" == _typeof(Symbol.iterator) ? function (t) {
return _typeof(t);
} : function (t) {
return t && "function" == typeof Symbol && t.constructor === Symbol && t !== Symbol.prototype ? "symbol" : _typeof(t);
})(e);
}
function e(t, e) {
for (var i = 0; i < e.length; i++) {
var n = e[i];
n.enumerable = n.enumerable || !1, n.configurable = !0, "value" in n && (n.writable = !0), Object.defineProperty(t, n.key, n);
}
}
function i(e, i) {
return !i || "object" !== t(i) && "function" != typeof i ? function (t) {
if (void 0 === t) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
return t;
}(e) : i;
}
function n(t) {
var e = "function" == typeof Map ? new Map() : void 0;
return (n = function n(t) {
if (null === t || (i = t, -1 === Function.toString.call(i).indexOf("[native code]"))) return t;
var i;
if ("function" != typeof t) throw new TypeError("Super expression must either be null or a function");
if (void 0 !== e) {
if (e.has(t)) return e.get(t);
e.set(t, n);
}
function n() {
return r(t, arguments, s(this).constructor);
}
return n.prototype = Object.create(t.prototype, {
constructor: {
value: n,
enumerable: !1,
writable: !0,
configurable: !0
}
}), o(n, t);
})(t);
}
function r(t, e, i) {
return (r = a() ? Reflect.construct : function (t, e, i) {
var n = [null];
n.push.apply(n, e);
var r = new (Function.bind.apply(t, n))();
return i && o(r, i.prototype), r;
}).apply(null, arguments);
}
function a() {
if ("undefined" == typeof Reflect || !Reflect.construct) return !1;
if (Reflect.construct.sham) return !1;
if ("function" == typeof Proxy) return !0;
try {
return Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})), !0;
} catch (t) {
return !1;
}
}
function o(t, e) {
return (o = Object.setPrototypeOf || function (t, e) {
return t.__proto__ = e, t;
})(t, e);
}
function s(t) {
return (s = Object.setPrototypeOf ? Object.getPrototypeOf : function (t) {
return t.__proto__ || Object.getPrototypeOf(t);
})(t);
}
customElements.define("joomla-panels", function (t) {
!function (t, e) {
if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function");
t.prototype = Object.create(e && e.prototype, {
constructor: {
value: t,
writable: !0,
configurable: !0
}
}), e && o(t, e);
}(f, n(HTMLElement));
var r,
c,
u,
l,
h,
b = (r = f, c = a(), function () {
var t,
e = s(r);
if (c) {
var n = s(this).constructor;
t = Reflect.construct(e, arguments, n);
} else t = e.apply(this, arguments);
return i(this, t);
});
function f() {
var t;
return function (t, e) {
if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function");
}(this, f), (t = b.call(this)).hasActive = !1, t.currentActive = "", t.hasNested = !1, t.isNested = !1, t.tabs = [], t.tabsLinks = [], t.panels = [], t.tabLinkHash = [], t;
}
return u = f, h = [{
key: "observedAttributes",
get: function get() {
return ["recall", "orientation", "view", "responsive", "collapse-width"];
}
}], (l = [{
key: "recall",
get: function get() {
return this.getAttribute("recall");
},
set: function set(t) {
return this.setAttribute("recall", t);
}
}, {
key: "view",
get: function get() {
return this.getAttribute("view");
},
set: function set(t) {
this.setAttribute("view", t);
}
}, {
key: "orientation",
get: function get() {
return this.getAttribute("orientation") || "horizontal";
},
set: function set(t) {
this.setAttribute("orientation", t);
}
}, {
key: "responsive",
get: function get() {
return this.getAttribute("responsive");
},
set: function set(t) {
this.setAttribute("responsive", t);
}
}, {
key: "collapseWidth",
get: function get() {
return this.getAttribute("collapse-width");
},
set: function set(t) {
this.setAttribute("collapse-width", t);
}
}, {
key: "connectedCallback",
value: function value() {
var t = this;
if ((!this.orientation || this.orientation && -1 === ["horizontal", "vertical"].indexOf(this.orientation)) && this.setAttribute("orientation", "horizontal"), this.view = this.getAttribute("view") || "tabs", this.recall = this.recall || "false", this.responsive = this.getAttribute("responsive") || "false", this.collapseWidth = this.getAttribute("collapseWidth") || 0, this.panels = [].slice.call(this.querySelectorAll("section")), !this.panels.length) throw new Error("`Joomla-panels` require one ore more panels!");
if (this.findAncestorByTagNme(this, "joomla-tab") && (this.isNested = !0), this.querySelector("joomla-tab") && (this.hasNested = !0), this.recall) {
var e = sessionStorage.getItem(this.getStorageKey());
e && !/@\[/.test(e) && this.tabLinkHash.push(e), this.setTabState();
}
"ul" !== this.firstElementChild.tagName && this.createNavigation(), this.panels.forEach(function (e) {
e.setAttribute("role", "tabpanel"), t.tabs.push("#tab-".concat(e.id)), e.hasAttribute("active") && (t.hasActive = !0, t.currentActive = e.id, t.querySelector("#tab-".concat(e.id)).setAttribute("aria-selected", "true"), t.querySelector("#tab-".concat(e.id)).setAttribute("active", ""), t.querySelector("#tab-".concat(e.id)).setAttribute("tabindex", "0"));
}), this.hasActive || (this.tabsLinks[0].setAttribute("active", ""), this.hasActive = !0, this.currentActive = this.panels[0].id, this.tabsLinks[0].setAttribute("aria-selected", "true"), this.tabsLinks[0].setAttribute("tabindex", "0"), this.tabsLinks[0].setAttribute("active", ""), this.panels[0].setAttribute("active", "")), window.location.href.match(/#tab-/), "accordion" === this.view && this.toAccordion.bind(this)(), "true" === this.responsive && (this.changeView.bind(this), window.addEventListener("resize", this.changeView.bind(this)));
}
}, {
key: "disconnectedCallback",
value: function value() {
var t = this,
e = this.querySelector("ul");
[].slice.call(e.querySelectorAll("a")).forEach(function (e) {
e.removeEventListener("click", t.activateTabFromLink, !0);
}), e.removeEventListener("keydown", t.keyBehaviour, !0);
}
}, {
key: "createNavigation",
value: function value() {
var t = this,
e = this,
i = "";
"ul" !== this.firstElementChild.tagName.toLowerCase() && (i = document.createElement("ul")), i.setAttribute("role", "tablist"), this.panels.forEach(function (n) {
if (!n.id) throw new Error("`joomla-panels` All panels require an ID");
if (n.parentNode === t) {
var r = n.getAttribute("active") || !1,
a = document.createElement("li"),
o = document.createElement("a");
a.setAttribute("role", "presentation"), o.setAttribute("role", "tab"), o.setAttribute("aria-controls", n.id), o.setAttribute("aria-selected", r ? "true" : "false"), o.setAttribute("tabindex", r ? "0" : "-1"), o.setAttribute("href", "#".concat(n.id)), o.setAttribute("id", "tab-".concat(n.id)), o.innerHTML = n.getAttribute("name"), r && o.setAttribute("active", ""), o.addEventListener("click", e.activateTabFromLink.bind(e)), t.tabsLinks.push(o), a.append(o), i.append(a), n.setAttribute("aria-labelledby", "tab-".concat(n.id)), r || n.setAttribute("aria-hidden", "true");
}
}), this.insertAdjacentElement("afterbegin", i), this.querySelector("ul").addEventListener("keydown", this.keyBehaviour.bind(this));
}
}, {
key: "hideCurrent",
value: function value() {
if (this.currentActive) {
var t = this.querySelector('a[aria-controls="'.concat(this.currentActive, '"]'));
this.dispatchCustomEvent("joomla.tab.hide", t, this.querySelector("#tab-".concat(this.currentActive))), t.removeAttribute("active"), t.setAttribute("tabindex", "-1"), this.querySelector("#".concat(this.currentActive)).removeAttribute("active"), this.querySelector("#".concat(this.currentActive)).setAttribute("aria-hidden", "true"), t.removeAttribute("aria-selected"), this.dispatchCustomEvent("joomla.tab.hidden", t, this.querySelector("#tab-".concat(this.currentActive)));
}
}
}, {
key: "activateTabFromLink",
value: function value(t) {
t.preventDefault();
var e = this.currentActive;
this.hasActive && this.hideCurrent(), this.dispatchCustomEvent("joomla.tab.show", t.target, this.querySelector("#tab-".concat(e))), t.target.setAttribute("active", ""), t.target.setAttribute("aria-selected", "true"), t.target.setAttribute("tabindex", "0"), this.querySelector(t.target.hash).setAttribute("active", ""), this.querySelector(t.target.hash).removeAttribute("aria-hidden"), this.currentActive = t.target.hash.substring(1), this.dispatchCustomEvent("joomla.tab.shown", t.target, this.querySelector("#tab-".concat(e))), this.saveState("#tab-".concat(t.target.hash.substring(1)));
}
}, {
key: "showTab",
value: function value(t) {
document.querySelector("#tab-".concat(t.id)).click();
}
}, {
key: "show",
value: function value(t) {
t.click();
}
}, {
key: "keyBehaviour",
value: function value(t) {
var e = this.querySelector("#tab-".concat(this.currentActive)),
i = e.parentNode.previousElementSibling || e.parentNode.parentNode.lastElementChild,
n = e.parentNode.nextElementSibling || e.parentNode.parentNode.firstElementChild;
if (!t.metaKey && !t.altKey && -1 !== this.tabs.indexOf("#".concat(document.activeElement.id))) switch (t.keyCode) {
case 37:
case 38:
t.preventDefault(), t.stopPropagation(), i.querySelector("a").click(), i.querySelector("a").focus();
break;
case 39:
case 40:
t.preventDefault(), t.stopPropagation(), n.querySelector("a").click(), n.querySelector("a").focus();
}
}
}, {
key: "getStorageKey",
value: function value() {
return window.location.href.toString().split(window.location.host)[1].replace(/&return=[a-zA-Z0-9%]+/, "").split("#")[0];
}
}, {
key: "saveState",
value: function value(t) {
var e = this.getStorageKey();
sessionStorage.setItem(e, t);
}
}, {
key: "setTabState",
value: function value() {
var t = this,
e = this,
i = this.tabsLinks;
if (this.hasNested) {
if (this.tabLinkHash.length && "" !== this.tabLinkHash[0]) {
var n = this.tabLinkHash[0].substring(5),
r = this.querySelector("".concat(n));
if (r) {
var a = this.findAncestorByTagNme(r, "joomla-tab");
if (this.findAncestorByTagNme(a, "joomla-tab")) {
var o = this.findAncestorByTagNme(a, "section");
o && this.tabLinkHash.push("#tab-".concat(o.id));
}
}
}
i.forEach(function (i) {
if (t.tabLinkHash.length) {
var n = "#tab-".concat(i.id);
-1 === t.tabLinkHash.indexOf(n) ? i.removeAttribute("active") : i.setAttribute("active", "");
}
i.parentNode === e && t.tabsLinks.push(i);
});
} else i.forEach(function (e) {
if (t.tabLinkHash.length) {
var i = "#tab-".concat(e.hash);
t.tabLinkHash.indexOf(i) > -1 ? e.removeAttribute("active") : e.setAttribute("active", "");
}
}), this.tabsLinks = i;
}
}, {
key: "toTabs",
value: function value() {
for (var t = this, e = 0, i = this.panels.length; e < i; ++e) {
this.panels[e].parentNode.parentNode.parentNode === this && this.tabsLinks.push(this.panels[e]);
}
this.tabsLinks.length && this.tabsLinks.forEach(function (e) {
t.appendChild(e);
});
}
}, {
key: "toAccordion",
value: function value() {
var t = this;
this.panels.length && this.panels.forEach(function (e) {
t.querySelector('a[aria-controls="' + e.id + '"]').parentNode.appendChild(e);
});
}
}, {
key: "changeView",
value: function value() {
if (window.outerWidth > 920) {
if ("tabs" === this.view) return;
this.toTabs.bind(this), this.view = "tabs";
} else {
if ("accordion" === this.view) return;
this.toAccordion.bind(this), this.view = "accordion";
}
}
}, {
key: "activateUriHash",
value: function value() {
var t = window.location.href.match(/#\S[^&]*/),
e = this.querySelector(t[0]);
if (e) {
var i = this.findAncestorByTagNme(e, "joomla-tab"),
n = this.findAncestorByTagNme(i, "joomla-tab");
if (n) {
var r = this.findAncestorByTagNme(i, "section");
n.showTab(r), this.show(e);
} else this.showTab(e);
}
}
}, {
key: "findAncestorByTagNme",
value: function value(t, e) {
for (; (t = t.parentElement) && t.nodeName.toLowerCase() !== e;) {
;
}
return t;
}
}, {
key: "dispatchCustomEvent",
value: function value(t, e, i) {
var n = new CustomEvent(t, {
bubbles: !0,
cancelable: !0
});
i && (n.relatedTarget = i), e.dispatchEvent(n), e.removeEventListener(t, e);
}
}]) && e(u.prototype, l), h && e(u, h), f;
}());