@appartmint/tsm-mint 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var y=Object.defineProperty;var v=(o,a,t)=>a in o?y(o,a,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[a]=t;var m=(o,a,t)=>v(o,typeof a!="symbol"?a+"":a,t);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("../../types/breakpoints.cjs.js"),r=require("../../types/side.cjs.js"),h=require("../../types/time.cjs.js"),E=require("../../abstract/attaches-events.cjs.js"),w=require("../../util/window.cjs.js"),p=require("../../util/event.cjs.js"),g=require("../../util/selectors.cjs.js");class b extends E.AttachesEvents{constructor(t){super();m(this,"settings",{title:"panel",from:r.sides[0],fixed:!0});m(this,"el",{});if(this.settings={...this.settings,...t},!this.settings.id||!this.settings.wrapperId)throw new Error("Panel ID and wrapper ID are required");this.attachElements(),this.attachEvents(),this.addClasses(),requestAnimationFrame(()=>{this.setPanel()})}attachElements(){var t;this.el.html=document.querySelector("html"),this.el.main=document.querySelector("main"),this.el.panel=document.getElementById(this.settings.id),this.el.wrapper=document.getElementById(this.settings.wrapperId),this.el.toggleButton=((t=this.el.panel)==null?void 0:t.querySelector(g.controls(this.settings.wrapperId)))||null}attachEvents(){var n;this.attachEvent(window,"resize",p.throttleEvent(this.eHandleResize.bind(this),h.delay.default)),this.attachEvent(this.el.main,"click",p.throttleEvent(this.eClose.bind(this),h.delay.default,{trailing:!1})),this.attachEvent(this.el.wrapper,"transitionend",this.eTransitionEnd.bind(this));const t=g.getFocusables(this.el.panel);t==null||t.forEach(i=>{this.attachEvent(i,"keydown",p.throttleEvent(this.eWrapTab.bind(this)))});const e=(n=this.el.panel)==null?void 0:n.querySelectorAll(g.controls(this.settings.wrapperId));e==null||e.forEach(i=>{this.attachEvent(i,"click",p.throttleEvent(this.eToggle.bind(this),h.delay.slower,{trailing:!1}))})}addClasses(){var t,e,n,i,s,l,d,c,u;(t=this.el.panel)==null||t.classList.add("mint-panel"),(e=this.el.wrapper)==null||e.classList.add("mint-panel-wrapper"),(n=this.el.toggleButton)==null||n.classList.add("mint-panel-toggle"),this.settings.from&&(console.log(this.settings.from),console.log(r.sides[this.settings.from]),console.log((i=r.sides[this.settings.from])==null?void 0:i.toLowerCase()),console.log(`mint-${(s=r.sides[this.settings.from])==null?void 0:s.toLowerCase()}`),(l=this.el.panel)==null||l.classList.remove("mint-top","mint-right","mint-bottom","mint-left"),(c=this.el.panel)==null||c.classList.add(`mint-${(d=r.sides[this.settings.from])==null?void 0:d.toLowerCase()}`)),this.settings.tray&&((u=this.el.panel)==null||u.classList.add("mint-tray"))}setPanel(t=!1){var i;let e=t?"true":"false",n=t?`close ${this.settings.title}`:`open ${this.settings.title}`;(i=this.el.toggleButton)==null||i.setAttribute("aria-expanded",e),setTimeout(()=>{var s;(s=this.el.toggleButton)==null||s.setAttribute("aria-label",n)},h.delay.faster),t?(this.closeOtherPanels(),this.settings.fixed!==!0&&window.scroll({top:0,left:0,behavior:"smooth"}),setTimeout(()=>{if(this.el.html){let s=w.windowWidth()<=f.breakpoints.sm,l="auto";this.settings.tray?s&&(l="hidden"):l="hidden",this.el.html.style.overflow=l}},this.settings.from===r.sides[3]?h.delay.default:h.delay.instant),this.el.wrapper&&(this.el.wrapper.style.display="flex"),requestAnimationFrame(()=>{var s;(s=this.el.wrapper)==null||s.classList.add("mint-open")})):(this.el.html&&(this.el.html.style.overflow="auto"),requestAnimationFrame(()=>{var s;(s=this.el.wrapper)==null||s.classList.remove("mint-open")}))}togglePanel(){var t,e;this.setPanel(((e=(t=this.el.toggleButton)==null?void 0:t.getAttribute("aria-expanded"))==null?void 0:e.toLowerCase())==="false")}closeOtherPanels(){const t=`.mint-panel-toggle[aria-expanded="true"]:not([aria-controls="${this.settings.wrapperId}"])`,e=document.querySelector(t);e==null||e.click()}eHandleResize(){var s,l,d,c;const t=w.windowWidth()<=f.breakpoints.sm;let e=!0;(s=this.el.panel)!=null&&s.classList.contains("mint-tray")?e=!1:(l=this.el.panel)!=null&&l.classList.contains("mint-expand")||(e=!1),!t&&e&&this.setPanel(!1);const n=((c=(d=this.el.toggleButton)==null?void 0:d.getAttribute("aria-expanded"))==null?void 0:c.toLowerCase())==="true";let i="auto";n&&(this.settings.tray?t&&(i="hidden"):i="hidden"),this.el.html&&(this.el.html.style.overflow=i)}eWrapTab(t){var l;const e=g.getFocusables(this.el.panel),n=e==null?void 0:e[(e==null?void 0:e.length)-1],i=(e==null?void 0:e.length)>1&&document.activeElement===n;t.key.toLowerCase()==="tab"&&!t.shiftKey&&i&&((l=this.el.toggleButton)==null||l.focus(),document.activeElement===this.el.toggleButton&&t.preventDefault())}eToggle(){this.togglePanel()}eClose(){this.setPanel(!1)}eTransitionEnd(){var t;((t=this.el.wrapper)==null?void 0:t.classList.contains("mint-open"))===!1&&(this.el.wrapper.style.display="none")}}exports.Panel=b;
|
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var
|
|
1
|
+
var E = Object.defineProperty;
|
|
2
|
+
var v = (o, a, t) => a in o ? E(o, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[a] = t;
|
|
3
|
+
var c = (o, a, t) => v(o, typeof a != "symbol" ? a + "" : a, t);
|
|
4
4
|
import { breakpoints as f } from "../../types/breakpoints.es.js";
|
|
5
|
-
import { sides as
|
|
6
|
-
import { delay as
|
|
7
|
-
import { AttachesEvents as
|
|
8
|
-
import { windowWidth as
|
|
9
|
-
import { throttleEvent as
|
|
10
|
-
import { controls as
|
|
11
|
-
class B extends
|
|
5
|
+
import { sides as r } from "../../types/side.es.js";
|
|
6
|
+
import { delay as h } from "../../types/time.es.js";
|
|
7
|
+
import { AttachesEvents as b } from "../../abstract/attaches-events.es.js";
|
|
8
|
+
import { windowWidth as u } from "../../util/window.es.js";
|
|
9
|
+
import { throttleEvent as p } from "../../util/event.es.js";
|
|
10
|
+
import { controls as w, getFocusables as y } from "../../util/selectors.es.js";
|
|
11
|
+
class B extends b {
|
|
12
12
|
constructor(t) {
|
|
13
13
|
super();
|
|
14
|
-
|
|
14
|
+
c(this, "settings", {
|
|
15
15
|
title: "panel",
|
|
16
|
-
from:
|
|
16
|
+
from: r[0],
|
|
17
17
|
fixed: !0
|
|
18
18
|
});
|
|
19
|
-
|
|
19
|
+
c(this, "el", {});
|
|
20
20
|
if (this.settings = { ...this.settings, ...t }, !this.settings.id || !this.settings.wrapperId)
|
|
21
21
|
throw new Error("Panel ID and wrapper ID are required");
|
|
22
22
|
this.attachElements(), this.attachEvents(), this.addClasses(), requestAnimationFrame(() => {
|
|
@@ -25,40 +25,40 @@ class B extends v {
|
|
|
25
25
|
}
|
|
26
26
|
attachElements() {
|
|
27
27
|
var t;
|
|
28
|
-
this.el.html = document.querySelector("html"), this.el.main = document.querySelector("main"), this.el.panel = document.getElementById(this.settings.id), this.el.wrapper = document.getElementById(this.settings.wrapperId), this.el.toggleButton = ((t = this.el.panel) == null ? void 0 : t.querySelector(
|
|
28
|
+
this.el.html = document.querySelector("html"), this.el.main = document.querySelector("main"), this.el.panel = document.getElementById(this.settings.id), this.el.wrapper = document.getElementById(this.settings.wrapperId), this.el.toggleButton = ((t = this.el.panel) == null ? void 0 : t.querySelector(w(this.settings.wrapperId))) || null;
|
|
29
29
|
}
|
|
30
30
|
attachEvents() {
|
|
31
|
-
var
|
|
32
|
-
this.attachEvent(window, "resize",
|
|
33
|
-
const t =
|
|
31
|
+
var n;
|
|
32
|
+
this.attachEvent(window, "resize", p(this.eHandleResize.bind(this), h.default)), this.attachEvent(this.el.main, "click", p(this.eClose.bind(this), h.default, { trailing: !1 })), this.attachEvent(this.el.wrapper, "transitionend", this.eTransitionEnd.bind(this));
|
|
33
|
+
const t = y(this.el.panel);
|
|
34
34
|
t == null || t.forEach((i) => {
|
|
35
|
-
this.attachEvent(i, "keydown",
|
|
35
|
+
this.attachEvent(i, "keydown", p(this.eWrapTab.bind(this)));
|
|
36
36
|
});
|
|
37
|
-
const e = (
|
|
37
|
+
const e = (n = this.el.panel) == null ? void 0 : n.querySelectorAll(w(this.settings.wrapperId));
|
|
38
38
|
e == null || e.forEach((i) => {
|
|
39
|
-
this.attachEvent(i, "click",
|
|
39
|
+
this.attachEvent(i, "click", p(this.eToggle.bind(this), h.slower, { trailing: !1 }));
|
|
40
40
|
});
|
|
41
41
|
}
|
|
42
42
|
addClasses() {
|
|
43
|
-
var t, e,
|
|
44
|
-
(t = this.el.panel) == null || t.classList.add("mint-panel"), (e = this.el.wrapper) == null || e.classList.add("mint-panel-wrapper"), (
|
|
43
|
+
var t, e, n, i, s, l, d, m, g;
|
|
44
|
+
(t = this.el.panel) == null || t.classList.add("mint-panel"), (e = this.el.wrapper) == null || e.classList.add("mint-panel-wrapper"), (n = this.el.toggleButton) == null || n.classList.add("mint-panel-toggle"), this.settings.from && (console.log(this.settings.from), console.log(r[this.settings.from]), console.log((i = r[this.settings.from]) == null ? void 0 : i.toLowerCase()), console.log(`mint-${(s = r[this.settings.from]) == null ? void 0 : s.toLowerCase()}`), (l = this.el.panel) == null || l.classList.remove("mint-top", "mint-right", "mint-bottom", "mint-left"), (m = this.el.panel) == null || m.classList.add(`mint-${(d = r[this.settings.from]) == null ? void 0 : d.toLowerCase()}`)), this.settings.tray && ((g = this.el.panel) == null || g.classList.add("mint-tray"));
|
|
45
45
|
}
|
|
46
46
|
setPanel(t = !1) {
|
|
47
47
|
var i;
|
|
48
|
-
let e = t ? "true" : "false",
|
|
48
|
+
let e = t ? "true" : "false", n = t ? `close ${this.settings.title}` : `open ${this.settings.title}`;
|
|
49
49
|
(i = this.el.toggleButton) == null || i.setAttribute("aria-expanded", e), setTimeout(() => {
|
|
50
50
|
var s;
|
|
51
|
-
(s = this.el.toggleButton) == null || s.setAttribute("aria-label",
|
|
52
|
-
},
|
|
51
|
+
(s = this.el.toggleButton) == null || s.setAttribute("aria-label", n);
|
|
52
|
+
}, h.faster), t ? (this.closeOtherPanels(), this.settings.fixed !== !0 && window.scroll({
|
|
53
53
|
top: 0,
|
|
54
54
|
left: 0,
|
|
55
55
|
behavior: "smooth"
|
|
56
56
|
}), setTimeout(() => {
|
|
57
57
|
if (this.el.html) {
|
|
58
|
-
let s =
|
|
58
|
+
let s = u() <= f.sm, l = "auto";
|
|
59
59
|
this.settings.tray ? s && (l = "hidden") : l = "hidden", this.el.html.style.overflow = l;
|
|
60
60
|
}
|
|
61
|
-
}, this.settings.from ===
|
|
61
|
+
}, this.settings.from === r[3] ? h.default : h.instant), this.el.wrapper && (this.el.wrapper.style.display = "flex"), requestAnimationFrame(() => {
|
|
62
62
|
var s;
|
|
63
63
|
(s = this.el.wrapper) == null || s.classList.add("mint-open");
|
|
64
64
|
})) : (this.el.html && (this.el.html.style.overflow = "auto"), requestAnimationFrame(() => {
|
|
@@ -75,17 +75,17 @@ class B extends v {
|
|
|
75
75
|
e == null || e.click();
|
|
76
76
|
}
|
|
77
77
|
eHandleResize() {
|
|
78
|
-
var s, l,
|
|
79
|
-
const t =
|
|
78
|
+
var s, l, d, m;
|
|
79
|
+
const t = u() <= f.sm;
|
|
80
80
|
let e = !0;
|
|
81
81
|
(s = this.el.panel) != null && s.classList.contains("mint-tray") ? e = !1 : (l = this.el.panel) != null && l.classList.contains("mint-expand") || (e = !1), !t && e && this.setPanel(!1);
|
|
82
|
-
const
|
|
82
|
+
const n = ((m = (d = this.el.toggleButton) == null ? void 0 : d.getAttribute("aria-expanded")) == null ? void 0 : m.toLowerCase()) === "true";
|
|
83
83
|
let i = "auto";
|
|
84
|
-
|
|
84
|
+
n && (this.settings.tray ? t && (i = "hidden") : i = "hidden"), this.el.html && (this.el.html.style.overflow = i);
|
|
85
85
|
}
|
|
86
86
|
eWrapTab(t) {
|
|
87
87
|
var l;
|
|
88
|
-
const e =
|
|
88
|
+
const e = y(this.el.panel), n = e == null ? void 0 : e[(e == null ? void 0 : e.length) - 1], i = (e == null ? void 0 : e.length) > 1 && document.activeElement === n;
|
|
89
89
|
t.key.toLowerCase() === "tab" && !t.shiftKey && i && ((l = this.el.toggleButton) == null || l.focus(), document.activeElement === this.el.toggleButton && t.preventDefault());
|
|
90
90
|
}
|
|
91
91
|
eToggle() {
|