@creative-web-solution/front-library 7.1.55 → 7.1.57

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.
Files changed (6) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/Events/KeyboardHandler.ts +63 -62
  3. package/Modules/Popin/PopinAccessibility.ts +5 -0
  4. package/README.md +1 -1
  5. package/Types/EventsHelpers.d.ts +6 -9
  6. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # CHANGELOG
2
2
 
3
+ ## 7.1.57
4
+
5
+ - [KeyboardHandler]: Handle onHome and onEnd callbak. Set onNext as RIGHT or DOWN and onPrevious as LEFT or UP.
6
+
7
+ ## 7.1.56
8
+
9
+ - [Popin]: Handle modal tabulation with iframe
10
+
3
11
  ## 7.1.55
4
12
 
5
13
  - [Popin]: Rework accessibility
package/Events/KeyboardHandler.ts CHANGED
@@ -1,6 +1,5 @@
1
- import { on, off } from './EventsManager';
2
- import { extend } from '../Helpers/Extend';
3
-
1
+ import { on, off } from "./EventsManager";
2
+ import { extend } from "../Helpers/Extend";
4
3
 
5
4
  /**
6
5
  * Handle keyboard typing on an elements
@@ -14,102 +13,104 @@ import { extend } from '../Helpers/Extend';
14
13
  * keyboardControls.off();
15
14
  */
16
15
  export default class KeyboardHandler {
17
-
18
16
  #$element;
19
17
  #options;
20
- #eventsName = new Map<string, ( e: KeyboardEvent ) => string[]>();
21
-
22
-
23
- constructor( $element: Element, userOptions: FLib.Events.KeyboardHandler.Options = {} ) {
18
+ #eventsName = new Map<string, (e: KeyboardEvent) => string[]>();
24
19
 
20
+ constructor(
21
+ $element: Element,
22
+ userOptions: FLib.Events.KeyboardHandler.Options = {},
23
+ ) {
25
24
  this.#$element = $element;
26
25
 
27
26
  const DEFAULT_OPTIONS = {
28
- "preventDefault": true
27
+ preventDefault: true,
29
28
  };
30
29
 
31
- this.#options = extend( DEFAULT_OPTIONS, userOptions );
32
-
33
- this.#eventsName.set( 'Enter', () => [ 'onEnter', 'onSelect' ] );
34
- this.#eventsName.set( ' ', () => [ 'onSpace', 'onSelect' ] );
35
- this.#eventsName.set( 'Esc', () => [ 'onEscape' ] );
36
- this.#eventsName.set( 'Escape', () => [ 'onEscape' ] );
37
- this.#eventsName.set( 'Right', () => [ 'onRight', 'onNext' ] );
38
- this.#eventsName.set( 'ArrowRight', () => [ 'onRight', 'onNext' ] );
39
- this.#eventsName.set( 'Left', () => [ 'onLeft', 'onPrevious' ] );
40
- this.#eventsName.set( 'ArrowLeft', () => [ 'onLeft', 'onPrevious' ] );
41
- this.#eventsName.set( 'Up', () => [ 'onUp', 'onNext' ] );
42
- this.#eventsName.set( 'ArrowUp', () => [ 'onUp', 'onNext' ] );
43
- this.#eventsName.set( 'Down', () => [ 'onDown', 'onPrevious' ] );
44
- this.#eventsName.set( 'ArrowDown', () => [ 'onDown', 'onPrevious' ] );
45
- this.#eventsName.set( 'PageUp', () => [ 'onPageUp' ] );
46
- this.#eventsName.set( 'PageDown', () => [ 'onPageDown' ] );
47
- this.#eventsName.set( 'Tab', ( e: KeyboardEvent ) => {
48
- if ( e.shiftKey && this.#options[ 'onTabReverse' ] ) {
49
- return [ 'onTabReverse' ];
30
+ this.#options = extend(DEFAULT_OPTIONS, userOptions);
31
+
32
+ this.#eventsName.set("Enter", () => ["onEnter", "onSelect"]);
33
+ this.#eventsName.set(" ", () => ["onSpace", "onSelect"]);
34
+ this.#eventsName.set("Esc", () => ["onEscape"]);
35
+ this.#eventsName.set("Escape", () => ["onEscape"]);
36
+ this.#eventsName.set("Right", () => ["onRight", "onNext"]);
37
+ this.#eventsName.set("ArrowRight", () => ["onRight", "onNext"]);
38
+ this.#eventsName.set("Left", () => ["onLeft", "onPrevious"]);
39
+ this.#eventsName.set("ArrowLeft", () => ["onLeft", "onPrevious"]);
40
+ this.#eventsName.set("Up", () => ["onUp", "onPrevious"]);
41
+ this.#eventsName.set("ArrowUp", () => ["onUp", "onPrevious"]);
42
+ this.#eventsName.set("Down", () => ["onDown", "onNext"]);
43
+ this.#eventsName.set("ArrowDown", () => ["onDown", "onNext"]);
44
+ this.#eventsName.set("PageUp", () => ["onPageUp"]);
45
+ this.#eventsName.set("PageDown", () => ["onPageDown"]);
46
+ this.#eventsName.set("Home", () => ["onHome"]);
47
+ this.#eventsName.set("End", () => ["onEnd"]);
48
+ this.#eventsName.set("Tab", (e: KeyboardEvent) => {
49
+ if (e.shiftKey && this.#options["onTabReverse"]) {
50
+ return ["onTabReverse"];
50
51
  }
51
- return [ 'onTab' ];
52
- } );
52
+ return ["onTab"];
53
+ });
53
54
 
54
55
  this.on();
55
56
  }
56
57
 
57
-
58
- #handleCallbacks = ( event: KeyboardEvent, $context: EventTarget | null, callbacks: string[] ): void => {
59
- callbacks.forEach( cb => {
60
- if ( this.#options[ cb ] ) {
61
- this.#options[ cb ].call( $context, event, $context );
58
+ #handleCallbacks = (
59
+ event: KeyboardEvent,
60
+ $context: EventTarget | null,
61
+ callbacks: string[],
62
+ ): void => {
63
+ callbacks.forEach((cb) => {
64
+ if (this.#options[cb]) {
65
+ this.#options[cb].call($context, event, $context);
62
66
  }
63
- } );
64
- }
67
+ });
68
+ };
65
69
 
66
-
67
- #onKeypress = ( e: KeyboardEvent, $target: HTMLElement ): void => {
70
+ #onKeypress = (e: KeyboardEvent, $target: HTMLElement): void => {
68
71
  const key = e.key;
69
72
 
70
73
  // Block all key except tab, CTRL R, CMD R or F5
71
- if ( this.#options.preventDefault &&
72
- key !== 'Tab' &&
73
- key !== 'F5' &&
74
- !( key === 'r' && ( e.ctrlKey || e.metaKey ) ) &&
75
- !( key === 'p' && ( e.ctrlKey || e.metaKey ) )
76
-
74
+ if (
75
+ this.#options.preventDefault &&
76
+ key !== "Tab" &&
77
+ key !== "F5" &&
78
+ !(key === "r" && (e.ctrlKey || e.metaKey)) &&
79
+ !(key === "p" && (e.ctrlKey || e.metaKey))
77
80
  ) {
78
81
  e.preventDefault();
79
82
  }
80
83
 
81
- this.#handleCallbacks( e, $target, [ 'onKey' ] );
84
+ this.#handleCallbacks(e, $target, ["onKey"]);
82
85
 
83
- const FNC = this.#eventsName.get( key );
86
+ const FNC = this.#eventsName.get(key);
84
87
 
85
- if ( FNC ) {
86
- this.#handleCallbacks( e, $target, FNC( e ) );
88
+ if (FNC) {
89
+ this.#handleCallbacks(e, $target, FNC(e));
87
90
  }
88
- }
89
-
91
+ };
90
92
 
91
93
  /**
92
94
  * Add the binding
93
95
  */
94
- on(): this {
95
- on( this.#$element, {
96
- "eventsName": "keydown",
97
- "selector": this.#options.selector,
98
- "callback": this.#onKeypress
99
- } );
96
+ on(): this {
97
+ on(this.#$element, {
98
+ eventsName: "keydown",
99
+ selector: this.#options.selector,
100
+ callback: this.#onKeypress,
101
+ });
100
102
 
101
103
  return this;
102
104
  }
103
105
 
104
-
105
106
  /**
106
107
  * Remove the binding
107
108
  */
108
109
  off(): this {
109
- off( this.#$element, {
110
- "eventsName": "keydown",
111
- "callback": this.#onKeypress
112
- } );
110
+ off(this.#$element, {
111
+ eventsName: "keydown",
112
+ callback: this.#onKeypress,
113
+ });
113
114
 
114
115
  return this;
115
116
  }
package/Modules/Popin/PopinAccessibility.ts CHANGED
@@ -30,6 +30,7 @@ export default class PopinAccessibility {
30
30
  }
31
31
 
32
32
  handleBackwardTab(e: Event): void {
33
+ this.#getFocusableElements();
33
34
  if (document.activeElement === this.#$firstElement) {
34
35
  e.preventDefault();
35
36
  this.focusLastElement();
@@ -37,6 +38,7 @@ export default class PopinAccessibility {
37
38
  }
38
39
 
39
40
  handleForwardTab(e: Event): void {
41
+ this.#getFocusableElements();
40
42
  if (document.activeElement === this.#$lastElement) {
41
43
  e.preventDefault();
42
44
  this.focusFirstElement();
@@ -46,7 +48,10 @@ export default class PopinAccessibility {
46
48
  refresh(): void {
47
49
  this.#addSentinels();
48
50
  this.#handleFocusBackInDocument();
51
+ this.#getFocusableElements();
52
+ }
49
53
 
54
+ #getFocusableElements(): void {
50
55
  this.#$elements = Array.from(
51
56
  this.#$popin.querySelectorAll<HTMLElement>(
52
57
  FOCUSABLE_ELEMENTS_SELECTOR,
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Front Library
2
2
 
3
- @version: 7.1.55
3
+ @version: 7.1.57
4
4
 
5
5
 
6
6
  ## Use
package/Types/EventsHelpers.d.ts CHANGED
@@ -114,8 +114,7 @@ declare namespace FLib {
114
114
  };
115
115
 
116
116
  type PreventAndStopPropagation =
117
- | boolean
118
- | ((e, $target: HTMLElement) => boolean);
117
+ boolean | ((e, $target: HTMLElement) => boolean);
119
118
  type Callback = (
120
119
  e: Event,
121
120
  $target: HTMLElement,
@@ -196,11 +195,7 @@ declare namespace FLib {
196
195
  }
197
196
 
198
197
  type Elements =
199
- | Node
200
- | NodeList
201
- | Node[]
202
- | HTMLElement
203
- | HTMLElement[];
198
+ Node | NodeList | Node[] | HTMLElement | HTMLElement[];
204
199
  }
205
200
 
206
201
  /**
@@ -292,10 +287,12 @@ declare namespace FLib {
292
287
  onDown?: Callback;
293
288
  onPageUp?: Callback;
294
289
  onPageDown?: Callback;
295
- /** Called when pressing LEFT or DOWN arrow keys */
290
+ /** Called when pressing LEFT or UP arrow keys */
296
291
  onPrevious?: Callback;
297
- /** Called when pressing RIGHT or UP arrow keys */
292
+ /** Called when pressing RIGHT or DOWN arrow keys */
298
293
  onNext?: Callback;
294
+ onHome?: Callback;
295
+ onEnd?: Callback;
299
296
  /** Called on every key */
300
297
  onKey?: Callback;
301
298
  };
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@creative-web-solution/front-library",
3
3
  "title": "Frontend library",
4
4
  "description": "Frontend functions and modules",
5
- "version": "7.1.55",
5
+ "version": "7.1.57",
6
6
  "homepage": "https://github.com/creative-web-solution/front-library",
7
7
  "author": "Creative Web Solution <contact@cws-studio.com> (https://www.cws-studio.com)",
8
8
  "keywords": [],