@appartmint/mint 2.1.2 → 2.1.4
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.
- package/dist/css/mint.css +207 -76
- package/dist/css/mint.css.map +1 -1
- package/dist/css/mint.min.css +1 -1
- package/dist/css/mint.min.css.map +1 -1
- package/dist/js/imports/components/header.d.ts +19 -0
- package/dist/js/imports/components/header.d.ts.map +1 -1
- package/dist/js/index.js +45 -7
- package/dist/js/index.js.map +1 -1
- package/dist/js/index.min.js +1 -1
- package/dist/js/index.min.js.map +1 -1
- package/package.json +1 -1
- package/src/scss/imports/components/_buttons.scss +6 -6
- package/src/scss/imports/components/_header.scss +12 -6
- package/src/scss/imports/components/_landing.scss +27 -6
- package/src/scss/imports/components/_video.scss +11 -47
- package/src/scss/imports/global/_animations.scss +1 -1
- package/src/scss/imports/global/_global.scss +1 -1
- package/src/scss/imports/global/_themes.scss +1 -1
- package/src/scss/imports/util/_index.scss +1 -1
- package/src/scss/imports/util/_util.scss +54 -17
- package/src/scss/imports/util/_vars.scss +4 -0
|
@@ -15,16 +15,35 @@ export declare class MintHeader {
|
|
|
15
15
|
el: {
|
|
16
16
|
[key: string]: HTMLElement | null;
|
|
17
17
|
};
|
|
18
|
+
/**
|
|
19
|
+
* Event handlers
|
|
20
|
+
*/
|
|
21
|
+
events: {
|
|
22
|
+
el: HTMLElement | Window | null;
|
|
23
|
+
handlers: EventListener[];
|
|
24
|
+
events: string[];
|
|
25
|
+
}[];
|
|
18
26
|
/**
|
|
19
27
|
* Initializes and closes the menu
|
|
20
28
|
*/
|
|
21
29
|
constructor(settings?: {
|
|
22
30
|
[key: string]: any;
|
|
23
31
|
});
|
|
32
|
+
/**
|
|
33
|
+
* Destroys the header
|
|
34
|
+
*/
|
|
35
|
+
destroy(): void;
|
|
24
36
|
/**
|
|
25
37
|
* Adds elements to {@link el | `this.el`}
|
|
26
38
|
*/
|
|
27
39
|
attachElements(): void;
|
|
40
|
+
/**
|
|
41
|
+
* Attach event to the given element
|
|
42
|
+
* @param element - Element to attach event to
|
|
43
|
+
* @param event - Event to attach
|
|
44
|
+
* @param handler - Handler to attach
|
|
45
|
+
*/
|
|
46
|
+
attachEvent(element: HTMLElement | Window | null | undefined, event: string, handler: EventListener): void;
|
|
28
47
|
/**
|
|
29
48
|
* Adds events to the dom
|
|
30
49
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../src/ts/imports/components/header.ts"],"names":[],"mappings":"AAaA;;;GAGG;AACH,qBAAa,UAAU;
|
|
1
|
+
{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../../src/ts/imports/components/header.ts"],"names":[],"mappings":"AAaA;;;GAGG;AACH,qBAAa,UAAU;IAEtB;;OAEM;IACF,QAAQ,EAAE;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAC,CAG7B;IAEF;;OAEG;IACH,EAAE,EAAE;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,WAAW,GAAG,IAAI,CAAA;KAAC,CAAM;IAEhD;;OAEG;IACH,MAAM,EAAE;QACP,EAAE,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,CAAC;QAChC,QAAQ,EAAE,aAAa,EAAE,CAAC;QAC1B,MAAM,EAAE,MAAM,EAAE,CAAA;KAChB,EAAE,CAAM;IAGN;;OAEG;gBACU,QAAQ,CAAC,EAAE;QAAC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAC;IAQ/C;;OAEG;IACH,OAAO,IAAM,IAAI;IASd;;OAEG;IACH,cAAc,IAAM,IAAI;IAQ3B;;;;;OAKG;IACH,WAAW,CAAE,OAAO,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,GAAI,IAAI;IAiBzG;;OAEG;IACH,YAAY,IAAM,IAAI;IAoBtB;;OAEG;IACH,UAAU,IAAM,IAAI;IAYpB;;;OAGG;IACH,aAAa,CAAE,IAAI,GAAE,OAAe,GAAI,IAAI;IAsD5C;;OAEG;IACH,gBAAgB,IAAM,IAAI;IAI1B;;;;OAIG;IACH,OAAO,CAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,EAC3B,IAAI,GAAE,OAAe,GAAI,IAAI;IActC;;;OAGG;IACH,UAAU,CAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,GAAI,IAAI;IAI/C;;;OAGG;IACH,aAAa,CAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,GAAI,IAAI;IAWlD;;;OAGG;IACH,iBAAiB,CAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,GAAI,IAAI;IAUtD;;OAEG;IACH,aAAa,IAAM,IAAI;IAOvB;;OAEG;IACH,eAAe,IAAM,IAAI;IAezB;;OAEG;IACH,gBAAgB,IAAM,IAAI;IAc1B;;OAEG;IACH,iBAAiB,IAAM,IAAI;IAQ3B;;OAEG;IACH,aAAa,IAAM,IAAI;IAoBvB;;OAEG;IACH,aAAa,IAAM,IAAI;IAIvB;;;OAGG;IACH,QAAQ,CAAE,CAAC,EAAE,aAAa,GAAI,IAAI;IASlC;;;OAGG;IACH,qBAAqB,CAAE,CAAC,EAAE,aAAa,GAAI,IAAI;IAyB/C;;;OAGG;IACH,mBAAmB,CAAE,CAAC,EAAE,aAAa,GAAI,IAAI;IAiB7C;;;OAGG;IACH,eAAe,CAAE,CAAC,EAAE,aAAa,GAAI,IAAI;IAezC;;OAEG;IACH,iBAAiB,IAAM,IAAI;IAI3B;;;OAGG;IACH,WAAW,CAAE,CAAC,EAAE,UAAU,GAAI,IAAI;IAMlC;;OAEG;IACH,cAAc,IAAM,IAAI;CAK3B;AACD,eAAe,UAAU,CAAC"}
|
package/dist/js/index.js
CHANGED
|
@@ -34,6 +34,10 @@ class MintHeader {
|
|
|
34
34
|
* Frequently-referenced elements
|
|
35
35
|
*/
|
|
36
36
|
el = {};
|
|
37
|
+
/**
|
|
38
|
+
* Event handlers
|
|
39
|
+
*/
|
|
40
|
+
events = [];
|
|
37
41
|
/**
|
|
38
42
|
* Initializes and closes the menu
|
|
39
43
|
*/
|
|
@@ -43,6 +47,17 @@ class MintHeader {
|
|
|
43
47
|
this.attachEvents();
|
|
44
48
|
this.addClasses();
|
|
45
49
|
}
|
|
50
|
+
/**
|
|
51
|
+
* Destroys the header
|
|
52
|
+
*/
|
|
53
|
+
destroy() {
|
|
54
|
+
this.events.forEach(event => {
|
|
55
|
+
event.handlers.forEach((handler, index) => {
|
|
56
|
+
event.el?.removeEventListener(event.events[index], handler);
|
|
57
|
+
});
|
|
58
|
+
});
|
|
59
|
+
this.events = [];
|
|
60
|
+
}
|
|
46
61
|
/**
|
|
47
62
|
* Adds elements to {@link el | `this.el`}
|
|
48
63
|
*/
|
|
@@ -53,23 +68,46 @@ class MintHeader {
|
|
|
53
68
|
this.el.mobileButton = this.el.header?.querySelector(_util__WEBPACK_IMPORTED_MODULE_1__.MintSelectors.controls('mint-wrapper')) || null;
|
|
54
69
|
this.el.wrapper = document.getElementById('mint-wrapper');
|
|
55
70
|
}
|
|
71
|
+
/**
|
|
72
|
+
* Attach event to the given element
|
|
73
|
+
* @param element - Element to attach event to
|
|
74
|
+
* @param event - Event to attach
|
|
75
|
+
* @param handler - Handler to attach
|
|
76
|
+
*/
|
|
77
|
+
attachEvent(element, event, handler) {
|
|
78
|
+
if (element) {
|
|
79
|
+
let oldElement = this.events.find(e => e.el === element);
|
|
80
|
+
if (oldElement) {
|
|
81
|
+
oldElement.handlers.push(handler);
|
|
82
|
+
oldElement.events.push(event);
|
|
83
|
+
}
|
|
84
|
+
else {
|
|
85
|
+
this.events.push({
|
|
86
|
+
el: element,
|
|
87
|
+
handlers: [handler],
|
|
88
|
+
events: [event]
|
|
89
|
+
});
|
|
90
|
+
}
|
|
91
|
+
element.addEventListener(event, handler);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
56
94
|
/**
|
|
57
95
|
* Adds events to the dom
|
|
58
96
|
*/
|
|
59
97
|
attachEvents() {
|
|
60
|
-
|
|
61
|
-
|
|
98
|
+
this.attachEvent(window, 'resize', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eHandleResize.bind(this), _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.default));
|
|
99
|
+
this.attachEvent(window, 'scroll', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eHandleScroll.bind(this), _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.default, { trailing: false }));
|
|
62
100
|
let focusables = this.el.header?.querySelectorAll(_util__WEBPACK_IMPORTED_MODULE_1__.MintSelectors.focusable), lastFocusable = focusables?.[focusables?.length - 1];
|
|
63
|
-
lastFocusable
|
|
101
|
+
this.attachEvent(lastFocusable, 'keydown', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eWrapTab.bind(this)));
|
|
64
102
|
focusables?.forEach((focusable) => {
|
|
65
|
-
|
|
103
|
+
this.attachEvent(focusable, 'keydown', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eHandleKeypress.bind(this)));
|
|
66
104
|
});
|
|
67
105
|
let menuButtons = this.el.wrapper?.querySelectorAll(_util__WEBPACK_IMPORTED_MODULE_1__.MintSelectors.controls());
|
|
68
106
|
menuButtons?.forEach((menuButton) => {
|
|
69
|
-
|
|
107
|
+
this.attachEvent(menuButton, 'click', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eToggleMenu.bind(this), _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.slow, { trailing: false }));
|
|
70
108
|
});
|
|
71
|
-
this.el.mobileButton
|
|
72
|
-
this.el.wrapper
|
|
109
|
+
this.attachEvent(this.el.mobileButton, 'click', _util__WEBPACK_IMPORTED_MODULE_1__.MintEvent.throttleEvent(this.eToggleMobileMenu.bind(this), _util__WEBPACK_IMPORTED_MODULE_1__.MintSettings.delay.slow, { trailing: false }));
|
|
110
|
+
this.attachEvent(this.el.wrapper, 'transitionend', this.eTransitionEnd.bind(this));
|
|
73
111
|
}
|
|
74
112
|
/**
|
|
75
113
|
* Adds classes that inform the styles based on settings
|