@creative-web-solution/front-library 7.1.54 → 7.1.56

package/Modules/Popin/PopinAccessibility.ts

@@ -1,67 +1,110 @@
-import { toggleTabIndex, FOCUSABLE_ELEMENTS_SELECTOR } from './Tools';
-
+import { FOCUSABLE_ELEMENTS_SELECTOR } from "./Tools";
 
 export default class PopinAccessibility {
-
-    #$elements:      NodeListOf<HTMLElement> | undefined;
-    #$firstElement:  HTMLElement | undefined;
-    #$lastElement:   HTMLElement | undefined;
-    #$popin:         HTMLElement;
-
-
-    constructor( $popin: HTMLElement ) {
+    #$elements: HTMLElement[] | undefined;
+    #$firstElement: HTMLElement | undefined;
+    #$lastElement: HTMLElement | undefined;
+    #$startSentinel: HTMLElement | null = null;
+    #$endSentinel: HTMLElement | null = null;
+    #$popin: HTMLElement;
+    #isFocusBackHandled: boolean = false;
+
+    constructor($popin: HTMLElement) {
         this.#$popin = $popin;
 
         this.refresh();
-        this.toggleTabIndexNavigation( false );
     }
 
-
-
     focusFirstElement(): void {
-        if ( !this.#$firstElement ) {
+        if (!this.#$firstElement) {
             return;
         }
         this.#$firstElement.focus();
     }
 
-
-    handleBackwardTab( e: Event ): void {
-        if ( !this.#$elements?.length || !this.#$firstElement ) {
-            e.preventDefault();
+    focusLastElement(): void {
+        if (!this.#$lastElement) {
             return;
         }
-        if ( document.activeElement === this.#$firstElement ) {
-            e.preventDefault();
-            this.#$lastElement?.focus();
-        }
+        this.#$lastElement.focus();
     }
 
-
-    handleForwardTab( e: Event ): void {
-        if ( !this.#$elements?.length || !this.#$lastElement ) {
+    handleBackwardTab(e: Event): void {
+        this.#getFocusableElements();
+        if (document.activeElement === this.#$firstElement) {
             e.preventDefault();
-            return;
+            this.focusLastElement();
         }
-        if ( document.activeElement === this.#$lastElement ) {
+    }
+
+    handleForwardTab(e: Event): void {
+        this.#getFocusableElements();
+        if (document.activeElement === this.#$lastElement) {
             e.preventDefault();
-            this.#$firstElement?.focus();
+            this.focusFirstElement();
         }
     }
 
+    refresh(): void {
+        this.#addSentinels();
+        this.#handleFocusBackInDocument();
+        this.#getFocusableElements();
+    }
 
-    toggleTabIndexNavigation( activate: boolean ): void {
-        toggleTabIndex( this.#$elements, this.#$popin, activate );
+    #getFocusableElements(): void {
+        this.#$elements = Array.from(
+            this.#$popin.querySelectorAll<HTMLElement>(
+                FOCUSABLE_ELEMENTS_SELECTOR,
+            ),
+        ).filter(($element) => $element.offsetParent !== null);
+        this.#$firstElement = this.#$elements[0] ?? this.#$popin;
+        this.#$lastElement = this.#$elements[this.#$elements.length - 1];
+    }
 
-        if ( activate ) {
-            this.#$popin.focus();
+    #addSentinels(): void {
+        if (this.#$startSentinel) {
+            return;
         }
+        this.#$startSentinel = document.createElement("div");
+        this.#$endSentinel = document.createElement("div");
+        [this.#$startSentinel, this.#$endSentinel].forEach(($sentinel) => {
+            $sentinel.tabIndex = 0;
+            $sentinel.setAttribute("aria-hidden", "true");
+            $sentinel.style.cssText =
+                "position:fixed;width:1px;height:1px;overflow:hidden;";
+        });
+        this.#$popin.prepend(this.#$startSentinel);
+        this.#$popin.append(this.#$endSentinel);
+        this.#$startSentinel.addEventListener("focus", () =>
+            this.focusLastElement(),
+        );
+        this.#$endSentinel.addEventListener("focus", () =>
+            this.focusFirstElement(),
+        );
     }
 
+    #handleFocusBackInDocument(): void {
+        if (this.#isFocusBackHandled) {
+            return;
+        }
+        this.#isFocusBackHandled = true;
+        document.addEventListener("focusin", this.#onFocusBackInDocument);
+    }
 
-    refresh(): void {
-        this.#$elements     = this.#$popin.querySelectorAll( FOCUSABLE_ELEMENTS_SELECTOR );
-        this.#$firstElement = this.#$elements[ 0 ] as HTMLElement;
-        this.#$lastElement  = this.#$elements[ this.#$elements.length - 1 ] as HTMLElement;
+    #onFocusBackInDocument = (e: FocusEvent): void => {
+        if (!this.#$popin.contains(e.target as Node)) {
+            this.focusFirstElement();
+        }
+    };
+
+    clean(): void {
+        document.removeEventListener("focusin", this.#onFocusBackInDocument);
+        this.#isFocusBackHandled = false;
+
+        this.#$startSentinel?.remove();
+        this.#$endSentinel?.remove();
+
+        this.#$startSentinel = null;
+        this.#$endSentinel = null;
     }
 }

package/Modules/Popin/PopinBackground.ts

@@ -1,68 +1,63 @@
-import { strToDOM }         from '../../DOM/StrToDOM';
-import PopinController      from './PopinController';
-import Popin                from './Popin';
-import { CLICK_EVENT_NAME } from './Tools';
-
+import { strToDOM } from "../../DOM/StrToDOM";
+import PopinController from "./PopinController";
+import Popin from "./Popin";
+import { CLICK_EVENT_NAME } from "./Tools";
 
 export default class PopinBackground implements FLib.Popin.Background {
-
     #$bgLayer: HTMLElement;
     #isOpened: boolean;
-    #options:  FLib.Popin.Options;
-    #popin:    Popin | PopinController;
-
+    #options: FLib.Popin.Options;
+    #popin: Popin | PopinController;
 
     get isOpened(): boolean {
         return this.#isOpened;
     }
 
-
-    constructor( popin: Popin | PopinController, options: FLib.Popin.Options ) {
+    constructor(popin: Popin | PopinController, options: FLib.Popin.Options) {
         this.#isOpened = false;
-        this.#popin    = popin;
-        this.#options  = options;
-        this.#$bgLayer = strToDOM( options.templates.bgLayer ) as HTMLElement;
+        this.#popin = popin;
+        this.#options = options;
+        this.#$bgLayer = strToDOM(options.templates.bgLayer) as HTMLElement;
 
-        document.body.appendChild( this.#$bgLayer );
+        document.body.appendChild(this.#$bgLayer);
     }
 
-
     open(): Promise<any> {
-        if ( this.#isOpened ) {
+        if (this.#isOpened) {
             return Promise.resolve();
         }
 
-        if ( !this.#options.modal ) {
-            this.#$bgLayer.addEventListener( CLICK_EVENT_NAME, this.#onBgClick );
+        if (!this.#options.modal) {
+            this.#$bgLayer.addEventListener(CLICK_EVENT_NAME, this.#onBgClick);
         }
 
-        return this.#options.animations.openBg( this.#$bgLayer ).then( () => {
+        return this.#options.animations.openBg(this.#$bgLayer).then(() => {
             this.#isOpened = true;
-        } );
+        });
     }
 
-
     close(): Promise<any> {
-        if ( !this.#isOpened ) {
+        if (!this.#isOpened) {
             return Promise.resolve();
         }
 
-        if ( !this.#options.modal ) {
-            this.#$bgLayer.removeEventListener( CLICK_EVENT_NAME, this.#onBgClick );
+        if (!this.#options.modal) {
+            this.#$bgLayer.removeEventListener(
+                CLICK_EVENT_NAME,
+                this.#onBgClick,
+            );
         }
 
-        return this.#options.animations.closeBg( this.#$bgLayer ).then( () => {
+        return this.#options.animations.closeBg(this.#$bgLayer).then(() => {
             this.#isOpened = false;
-        } );
+        });
     }
 
-
     #onBgClick = (): void => {
         this.#popin.close();
-    }
-
+    };
 
     destroy(): void {
-        this.#$bgLayer.removeEventListener( CLICK_EVENT_NAME, this.#onBgClick );
+        this.#$bgLayer.removeEventListener(CLICK_EVENT_NAME, this.#onBgClick);
     }
 }

package/Modules/Popin/PopinController.ts

@@ -1,9 +1,8 @@
-import { on, off }        from '../../Events/EventsManager';
-import { extend }         from '../../Helpers/Extend';
-import Popin              from './Popin';
-import PopinBackground    from './PopinBackground';
-import { CLICK_EVENT_NAME, defaultOptions, toggleTabIndex } from './Tools';
-
+import { on, off } from "../../Events/EventsManager";
+import { extend } from "../../Helpers/Extend";
+import Popin from "./Popin";
+import PopinBackground from "./PopinBackground";
+import { CLICK_EVENT_NAME, defaultOptions } from "./Tools";
 
 /**
  * Create a controller tha manage all popin in the page
@@ -15,138 +14,136 @@ import { CLICK_EVENT_NAME, defaultOptions, toggleTabIndex } from './Tools';
  * popin.loadForm( $form );
  */
 export default class PopinController implements FLib.Popin.Controller {
-    #options:    FLib.Popin.Options;
-    #selectors:  FLib.Popin.SelectorsOptions;
+    #options: FLib.Popin.Options;
+    #selectors: FLib.Popin.SelectorsOptions;
     #background: PopinBackground;
-    #popin:      Popin;
-
-
-    constructor( userOptions: FLib.Popin.OptionsInit = {}, $popin?: HTMLElement ) {
-
-        if ( !( "AbortController" in window ) ) {
-            throw 'This plugin uses fecth and AbortController. You may need to add a polyfill for this browser.';
+    #popin: Popin;
+
+    constructor(
+        userOptions: FLib.Popin.OptionsInit = {},
+        $popin?: HTMLElement,
+    ) {
+        if (!("AbortController" in window)) {
+            throw "This plugin uses fecth and AbortController. You may need to add a polyfill for this browser.";
         }
 
-        this.#options = extend( defaultOptions, userOptions );
+        this.#options = extend(defaultOptions, userOptions);
 
         this.#selectors = this.#options.selectors;
 
         // global var, only one background for all popin
-        this.#background = new PopinBackground( this, this.#options );
-
-        this.#popin = new Popin( {
-            ...this.#options
-        },
-        $popin,
-        {
-            "controller": this,
-            "background": this.#background
-         } );
+        this.#background = new PopinBackground(this, this.#options);
 
+        this.#popin = new Popin(
+            {
+                ...this.#options,
+            },
+            $popin,
+            {
+                controller: this,
+                background: this.#background,
+            },
+        );
 
         // ------------------- BINDING
 
-        if ( $popin ) {
-            toggleTabIndex( null, $popin, false );
-
-            on( document.body,
-                {
-                    "eventsName": CLICK_EVENT_NAME,
-                    "selector":   `a[href="#${ $popin.id }"]`,
-                    "callback":   this.#openPopinHandler
-                } );
+        if ($popin) {
+            on(document.body, {
+                eventsName: CLICK_EVENT_NAME,
+                selector: `a[href="#${$popin.id}"]`,
+                callback: this.#openPopinHandler,
+            });
             return;
         }
 
-        on( document.body,
-            {
-                "eventsName": CLICK_EVENT_NAME,
-                "selector":  this.#selectors.links,
-                "callback":  this.#openPopinHandler
-
-            } );
-        on( document.body,
-            {
-                "eventsName": "submit",
-                "selector":  this.#selectors.forms,
-                "callback":  this.#openPopinHandler
-
-            } );
-
-        const $triggerOnLoadPopin = document.querySelector( `[${ this.#selectors.openOnLoadAttribute }]` );
+        on(document.body, {
+            eventsName: CLICK_EVENT_NAME,
+            selector: this.#selectors.links,
+            callback: this.#openPopinHandler,
+        });
+        on(document.body, {
+            eventsName: "submit",
+            selector: this.#selectors.forms,
+            callback: this.#openPopinHandler,
+        });
+
+        const $triggerOnLoadPopin = document.querySelector(
+            `[${this.#selectors.openOnLoadAttribute}]`,
+        );
 
-        if ( $triggerOnLoadPopin ) {
+        if ($triggerOnLoadPopin) {
             this.#parseElement(
                 $triggerOnLoadPopin as HTMLElement,
-                $triggerOnLoadPopin.getAttribute( this.#selectors.openOnLoadAttribute )
+                $triggerOnLoadPopin.getAttribute(
+                    this.#selectors.openOnLoadAttribute,
+                ),
             );
         }
     }
 
-
-    #parseElement = ( $dom: HTMLElement, customUrl?: string | null ): Promise<void> => {
-        if ( customUrl ) {
-            return this.#popin.load( customUrl );
+    #parseElement = (
+        $dom: HTMLElement,
+        customUrl?: string | null,
+    ): Promise<void> => {
+        if (customUrl) {
+            return this.#popin.load(customUrl);
         }
 
-        if ( $dom.nodeName === 'FORM' ) {
-            return this.#popin.loadForm( $dom as HTMLFormElement );
+        if ($dom.nodeName === "FORM") {
+            return this.#popin.loadForm($dom as HTMLFormElement);
         }
 
-        const anchor = $dom.getAttribute( 'href' );
+        const anchor = $dom.getAttribute("href");
 
-        if ( anchor && anchor.indexOf( '#' ) === 0 ) {
+        if (anchor && anchor.indexOf("#") === 0) {
             return this.#popin.open();
         }
 
-        return this.#popin.loadLink( $dom as HTMLAnchorElement );
-    }
-
+        return this.#popin.loadLink($dom as HTMLAnchorElement);
+    };
 
-
-    #openPopinHandler = ( e: Event, $target: HTMLElement): void => {
+    #openPopinHandler = (e: Event, $target: HTMLElement): void => {
         e.preventDefault();
 
-        this.#parseElement( $target );
-    }
-
+        this.#parseElement($target);
+    };
 
     /**
      * Load a file and display it in the popin
      *
      * @param data - All parameters available for window.fetch
      */
-    load( url: string, data: RequestInit, type?: FLib.Popin.ResponseType ): Promise<void> {
-        return this.#popin.load( url, data, type );
+    load(
+        url: string,
+        data: RequestInit,
+        type?: FLib.Popin.ResponseType,
+    ): Promise<void> {
+        return this.#popin.load(url, data, type);
     }
 
-
     /**
      * Send a form and display the result it in the popin
      */
-    loadForm( $form: HTMLFormElement ): Promise<void> {
-        return this.#popin.loadForm( $form );
+    loadForm($form: HTMLFormElement): Promise<void> {
+        return this.#popin.loadForm($form);
     }
 
-
     /**
      * Load a page from a link and display the result it in the popin
      */
-    loadLink( $link: HTMLAnchorElement ): Promise<void> {
-        return this.#popin.loadLink( $link );
+    loadLink($link: HTMLAnchorElement): Promise<void> {
+        return this.#popin.loadLink($link);
     }
 
-
     /**
      * Insert some html in the popin and open it
      *
      * @param openFirst - Open the popin THEN insert the html
      */
-    set( html: string, openFirst?: boolean ): Promise<void> {
-        return this.#popin.set( html, openFirst );
+    set(html: string, openFirst?: boolean): Promise<void> {
+        return this.#popin.set(html, openFirst);
     }
 
-
     /**
      * Remove the content of the popin
      */
@@ -154,7 +151,6 @@ export default class PopinController implements FLib.Popin.Controller {
         return this.#popin.clear();
     }
 
-
     /**
      * Close the popin
      */
@@ -162,7 +158,6 @@ export default class PopinController implements FLib.Popin.Controller {
         return this.#popin.close();
     }
 
-
     /**
      * Open the popin
      */
@@ -170,7 +165,6 @@ export default class PopinController implements FLib.Popin.Controller {
         return this.#popin.open();
     }
 
-
     /**
      * Remove all events, css class or inline styles
      */
@@ -178,15 +172,11 @@ export default class PopinController implements FLib.Popin.Controller {
         this.#background.destroy();
         this.#popin.destroy();
 
-        off(
-            document.body,
-            {
-                "eventsName": `${ CLICK_EVENT_NAME } submit`,
-                "callback":   this.#openPopinHandler
-            }
-        );
+        off(document.body, {
+            eventsName: `${CLICK_EVENT_NAME} submit`,
+            callback: this.#openPopinHandler,
+        });
 
         return this;
     }
-
 }

package/Modules/Popin/Tools.ts

@@ -1,86 +1,80 @@
+export const FOCUSABLE_ELEMENTS_SELECTOR =
+    'a[href],button:not([disabled]),textarea,input,select,[tabindex]:not([tabindex="-1"])';
 
-export const FOCUSABLE_ELEMENTS_SELECTOR = 'a,button,input,select,textarea,iframe';
-
-export function toggleTabIndex( $elements: NodeListOf<HTMLElement> | undefined | null, $popin: HTMLElement, activate: boolean ): void {
-    $elements = $elements || $popin.querySelectorAll( FOCUSABLE_ELEMENTS_SELECTOR );
-    const tabIndex = activate ? '0' : '-1';
-    $elements.forEach( e => e.setAttribute( 'tabindex', tabIndex ) );
-    $popin.setAttribute( 'tabindex', tabIndex );
-    $popin.setAttribute( 'aria-hidden', activate ? 'false' : 'true' );
-}
-
-export const CLICK_EVENT_NAME = window.matchMedia( '(hover: none)' ).matches ? 'touchend' : 'click';
+export const CLICK_EVENT_NAME = window.matchMedia("(hover: none)").matches
+    ? "touchend"
+    : "click";
 
 export const defaultOptions = {
-    "modal": false,
-    "errorMessage": 'Error while loading...',
-    "marginHeight": 20,
-    "autoResize": false,
-    "enableKeyboard": true,
-    "isBackgroundAside": true,
-    "onLoad": (): Promise<any> => {
+    modal: false,
+    errorMessage: "Error while loading...",
+    marginHeight: 20,
+    autoResize: false,
+    enableKeyboard: true,
+    isBackgroundAside: true,
+    onLoad: (): Promise<any> => {
         return Promise.resolve();
     },
-    "setLinkResponseType": (): string => {
-        return 'text';
+    setLinkResponseType: (): string => {
+        return "text";
     },
-    "setFormResponseType": (): string => {
-        return 'text';
+    setFormResponseType: (): string => {
+        return "text";
     },
-    "checkValidity": (): boolean => {
+    checkValidity: (): boolean => {
         return true;
     },
-    "normalize": <V>( body: V ): { success: boolean, data: V } => {
+    normalize: <V>(body: V): { success: boolean; data: V } => {
         return {
-            "success": true,
-            "data": body
+            success: true,
+            data: body,
         };
     },
-    "autoHandleAjaxError": true,
-    "templates": {
-        "popinLoader": "<div class=\"popin-loader\"></div>",
-        "popin": "<div class=\"popin\"><div class=\"popin-content\"></div></div>",
-        "bgLayer": "<div class=\"bg-popin\"></div>",
-        "errorMessage": "<div class=\"error\">{{ message }}</div>"
+    autoHandleAjaxError: true,
+    templates: {
+        popinLoader: '<div class="popin-loader"></div>',
+        popin: '<div class="popin"><div class="popin-content"></div></div>',
+        bgLayer: '<div class="bg-popin"></div>',
+        errorMessage: '<div class="error">{{ message }}</div>',
     },
-    "selectors": {
-        "popin": ".popin",
-        "popinBody": ".popin",
-        "popinContent": ".popin-content",
-        "links": "a[data-popin]",
-        "forms": "form[data-popin]",
-        "btClosePopin": "button[data-close-popin]",
-        "openOnLoadAttribute": "data-onload-popin"
+    selectors: {
+        popin: ".popin",
+        popinBody: ".popin",
+        popinContent: ".popin-content",
+        links: "a[data-popin]",
+        forms: "form[data-popin]",
+        btClosePopin: "button[data-close-popin]",
+        openOnLoadAttribute: "data-onload-popin",
     },
-    "animations": {
-        "openBg": ( $bg: HTMLElement ): Promise<any> => {
-            $bg.style.display = 'block';
+    animations: {
+        openBg: ($bg: HTMLElement): Promise<any> => {
+            $bg.style.display = "block";
             return Promise.resolve();
         },
-        "closeBg": ( $bg: HTMLElement ): Promise<any> => {
-            $bg.style.display = 'none';
+        closeBg: ($bg: HTMLElement): Promise<any> => {
+            $bg.style.display = "none";
             return Promise.resolve();
         },
-        "initOpenPopin": ( $popin: HTMLElement ): Promise<any> => {
-            $popin.style.display = 'block';
-            $popin.style.opacity = '0';
+        initOpenPopin: ($popin: HTMLElement): Promise<any> => {
+            $popin.style.display = "block";
+            $popin.style.opacity = "0";
             return Promise.resolve();
         },
-        "openPopin": ( $popin: HTMLElement ): Promise<any> => {
-            $popin.style.opacity = '1';
+        openPopin: ($popin: HTMLElement): Promise<any> => {
+            $popin.style.opacity = "1";
             return Promise.resolve();
         },
-        "closePopin": ( $popin: HTMLElement ): Promise<any> => {
-            $popin.style.display = 'none';
+        closePopin: ($popin: HTMLElement): Promise<any> => {
+            $popin.style.display = "none";
             return Promise.resolve();
         },
-        "openLoader": ( $loader: HTMLElement ): Promise<any> => {
-            $loader.style.display = 'block';
+        openLoader: ($loader: HTMLElement): Promise<any> => {
+            $loader.style.display = "block";
             return Promise.resolve();
         },
-        "closeLoader": ( $loader : HTMLElement): Promise<any> => {
-            $loader.style.display = 'none';
+        closeLoader: ($loader: HTMLElement): Promise<any> => {
+            $loader.style.display = "none";
             return Promise.resolve();
-        }
-    }
-}
+        },
+    },
+};

package/README.md

@@ -1,6 +1,6 @@
 # Front Library
 
-@version: 7.1.54
+@version: 7.1.56
 
 
 ## Use

package/package.json

@@ -2,7 +2,7 @@
   "name": "@creative-web-solution/front-library",
   "title": "Frontend library",
   "description": "Frontend functions and modules",
-  "version": "7.1.54",
+  "version": "7.1.56",
   "homepage": "https://github.com/creative-web-solution/front-library",
   "author": "Creative Web Solution <contact@cws-studio.com> (https://www.cws-studio.com)",
   "keywords": [],