@creative-web-solution/front-library 7.1.48 → 7.1.50

package/Modules/Autocomplete/index.ts

@@ -0,0 +1,534 @@
+import { off, on } from "../../Events/EventsManager";
+import { debounce } from "../../Helpers/Debounce";
+import AbstractAutocompleteAdapter from "./AbstractAutocompleteAdapter";
+import { extend } from "../../Helpers/Extend";
+import { strToDOM } from "../../DOM/StrToDOM";
+import { offset } from "DOM/Offset";
+import { height } from "../../DOM/Size";
+import { position } from "../../DOM/Position";
+import { outerHeight, outerWidth } from "../../DOM/OuterSize";
+import { remove } from "../../DOM/Manipulation";
+import { index } from "../../DOM/Index";
+
+type AutocompleteOptions<ItemDataType> = {
+    adapter: AbstractAutocompleteAdapter<ItemDataType>;
+    cssPositionning?: boolean;
+    debounceDelay?: number;
+    hideLayerDelay?: number;
+    layerPosition?: "top" | "bottom";
+    $layerWrapper: HTMLElement;
+    minChar?: number;
+    onSelect?: (options: {
+        item: ItemDataType;
+        index: number;
+        query: string;
+        results: ItemDataType[];
+    }) => void;
+    $searchField: HTMLInputElement;
+    shouldMarkValue?: boolean;
+};
+
+const PREVENT_DEFAULT_KEY_LIST = [
+    "Up",
+    "ArrowUp",
+    "Down",
+    "ArrowDown",
+    "Esc",
+    "Escape",
+];
+
+const ARIA_SELECTED_ATTRIBUTE = "aria-selected";
+const HOVERED_ATTRIBUTE = "data-hovered";
+const ITEM_ATTRIBUTE = "data-ac-item";
+const ITEM_SELECTOR = `[${ITEM_ATTRIBUTE}]`;
+
+const DEFAULT_OPTIONS = {
+    cssPositionning: true,
+    debounceDelay: 800,
+    hideLayerDelay: 300,
+    layerPosition: "top",
+    $layerWrapper: document.body,
+    minChar: 3,
+    shouldMarkValue: false,
+};
+
+export default class Autocomplete<ItemDataType> {
+    #adapter: AbstractAutocompleteAdapter<ItemDataType>;
+    #debouncedSourceCall!: (query: string) => Promise<void>;
+    #currentQuery: string = "";
+    #currentResults: { $item: HTMLElement; item: ItemDataType }[] = [];
+    #hideTimeoutId;
+    #hoveredItemIndex: number = -1;
+    #isDisabled: boolean = false;
+    #$layerWrapper: HTMLElement;
+    #$layer!: HTMLElement;
+    #$list!: HTMLElement;
+    #options: AutocompleteOptions<ItemDataType>;
+    #$searchField: HTMLInputElement;
+    #selectedItemIndex: number = -1;
+    #selectionLocked: boolean = false;
+
+    get isDisable(): boolean {
+        return this.#isDisabled || this.#$searchField.disabled;
+    }
+
+    constructor(options: AutocompleteOptions<ItemDataType>) {
+        this.#options = extend(DEFAULT_OPTIONS, options);
+
+        this.#adapter = this.#options.adapter;
+        this.#$layerWrapper = this.#options.$layerWrapper;
+        this.#$layerWrapper = this.#options.$layerWrapper;
+        this.#$searchField = this.#options.$searchField;
+
+        this.#initElements();
+        this.#init();
+    }
+
+    #initElements(): void {
+        this.#$layer = strToDOM(this.#adapter.layerRender()) as HTMLElement;
+        this.#$list = strToDOM(this.#adapter.listRender()) as HTMLElement;
+        this.#$layer.appendChild(this.#$list);
+        this.#$layerWrapper.appendChild(this.#$layer);
+
+        this.#$layer.inert = true;
+        this.#$searchField.setAttribute("autocomplete", "off");
+    }
+
+    #init(): void {
+        this.#debouncedSourceCall = debounce(
+            this.#sourceCall,
+            this.#options.debounceDelay,
+        ) as (query: string) => Promise<void>;
+
+        on(this.#$searchField, {
+            eventsName: "keyup",
+            callback: this.#onKeyup,
+        });
+
+        on(this.#$searchField, {
+            eventsName: "keydown",
+            callback: this.#onKeydown,
+        });
+
+        on(this.#$searchField, {
+            eventsName: "focus",
+            callback: this.#onFocus,
+        });
+
+        on(this.#$list, {
+            selector: ITEM_SELECTOR,
+            eventsName: "click",
+            callback: this.#onItemClick,
+        });
+
+        on(this.#$list, {
+            selector: ITEM_SELECTOR,
+            eventsName: "mouseover",
+            callback: this.#onItemOver,
+        });
+    }
+
+    #onItemClick = (e: Event, $item: HTMLElement): void => {
+        if (this.isDisable) {
+            return;
+        }
+
+        this.#select(index($item));
+    };
+
+    #onKeydown = (e: KeyboardEvent): void => {
+        if (
+            PREVENT_DEFAULT_KEY_LIST.includes(e.key) ||
+            (e.key === "Enter" && this.#hoveredItemIndex !== -1)
+        ) {
+            e.preventDefault();
+        }
+    };
+
+    #onKeyup = (e: KeyboardEvent): void => {
+        if (this.isDisable) {
+            return;
+        }
+
+        const query = this.#$searchField.value;
+
+        switch (e.key) {
+            case "Up":
+            case "ArrowUp":
+                this.#hoverPrevious();
+                break;
+
+            case "Down":
+            case "ArrowDown":
+                this.#hoverNext();
+                break;
+
+            case "Enter":
+                this.#select();
+                break;
+
+            case "Esc":
+            case "Escape":
+                this.hideLayer();
+                break;
+
+            case "Left":
+            case "ArrowLeft":
+            case "Right":
+            case "ArrowRight":
+            case "Shift":
+            case "Control":
+            case "Alt":
+            case "CapsLock":
+            case "End":
+            case "Home":
+            case "PageDown":
+            case "PageUp":
+            case "Meta":
+            case "OS":
+                break;
+
+            default:
+                if (query.trim().length >= this.#options.minChar!) {
+                    this.#debouncedSourceCall(query.trim());
+                } else {
+                    this.hideLayer();
+                    this.#adapter.abortSource?.();
+                }
+                break;
+        }
+    };
+
+    async #sourceCall(query: string): Promise<void> {
+        this.#currentQuery = query;
+
+        try {
+            const results = await this.#adapter.source(query);
+            this.#parseResults(results);
+        } catch (e: any) {
+            this.#createErrorDisplay(e.message);
+        }
+    }
+
+    #parseResults(results: ItemDataType[]): void {
+        if (!results.length) {
+            this.#createEmptyResultDisplay();
+            return;
+        }
+        this.#createResults(results);
+    }
+
+    #createResults(results: ItemDataType[]): void {
+        this.resetResults();
+
+        this.#currentResults = results.map((item, index) => {
+            const markedItem = this.#options.shouldMarkValue
+                ? this.#adapter.markValue({
+                      item,
+                      index,
+                      query: this.#currentQuery,
+                  })
+                : item;
+            const $item = strToDOM(
+                this.#adapter.itemRender({
+                    item: markedItem,
+                    index,
+                }),
+            ) as HTMLElement;
+
+            $item.setAttribute(ARIA_SELECTED_ATTRIBUTE, "false");
+            $item.setAttribute(ITEM_ATTRIBUTE, String(index));
+
+            this.#$list.appendChild($item);
+
+            return {
+                $item,
+                item: markedItem,
+            };
+        });
+
+        this.#show();
+    }
+
+    #createEmptyResultDisplay(): void {
+        this.resetResults();
+        this.#$list.appendChild(
+            strToDOM(this.#adapter.noResultRender(this.#currentQuery)),
+        );
+        this.#show();
+    }
+
+    #createErrorDisplay(errorMessage: string): void {
+        this.resetResults();
+        this.#$list.appendChild(
+            strToDOM(
+                this.#adapter.errorRender(errorMessage, this.#currentQuery),
+            ),
+        );
+        this.#show();
+    }
+
+    #select = (_selectedIndex?: number): void => {
+        if (this.#selectionLocked) {
+            return;
+        }
+
+        const newSelectedItemIndex =
+            typeof _selectedIndex === "undefined"
+                ? this.#hoveredItemIndex
+                : _selectedIndex;
+
+        if (
+            newSelectedItemIndex < 0 ||
+            newSelectedItemIndex > this.#currentResults.length - 1
+        ) {
+            return;
+        }
+
+        const newSelectedResult = this.#currentResults[newSelectedItemIndex];
+
+        if (!newSelectedResult) {
+            return;
+        }
+        const currentlySelectedResult =
+            this.#currentResults[this.#selectedItemIndex];
+
+        if (currentlySelectedResult) {
+            currentlySelectedResult.$item.setAttribute(
+                ARIA_SELECTED_ATTRIBUTE,
+                "false",
+            );
+        }
+
+        newSelectedResult.$item.setAttribute(ARIA_SELECTED_ATTRIBUTE, "true");
+
+        this.#selectedItemIndex = newSelectedItemIndex;
+
+        const data = {
+            index: this.#selectedItemIndex,
+            item: newSelectedResult.item,
+            query: this.#currentQuery,
+            results: this.#currentResults.map((result) => result.item),
+        };
+
+        if (this.#adapter.updateInputValueFromItem) {
+            this.#$searchField.value =
+                this.#adapter.updateInputValueFromItem(data);
+        }
+
+        this.hideLayer();
+
+        this.#options.onSelect?.(data);
+    };
+
+    #show = (): void => {
+        const wrapperStyle = this.#$layer.style;
+
+        wrapperStyle.display = "block";
+
+        if (!this.#options.cssPositionning) {
+            const parentFieldOffset = offset(this.#$searchField.parentElement!);
+            const wrapperHeight = height(this.#$layer);
+            const fieldHeight = outerHeight(this.#$searchField);
+
+            const topVal =
+                this.#options.layerPosition === "top"
+                    ? parentFieldOffset.top - wrapperHeight + 1
+                    : parentFieldOffset.top + fieldHeight + 1;
+
+            wrapperStyle.top = `${topVal}px`;
+            wrapperStyle.left = `${parentFieldOffset.left}px`;
+            wrapperStyle.width = `${outerWidth(this.#$searchField)}px`;
+        }
+
+        this.#$layer.scrollTop = 0;
+        this.#$layer.inert = false;
+        this.#selectionLocked = false;
+
+        setTimeout(() => {
+            on(document.body, {
+                eventsName: "click",
+                callback: this.#clickOutsideHandler,
+            });
+        }, 0);
+    };
+
+    hideLayer = (): void => {
+        clearTimeout(this.#hideTimeoutId);
+        off(document.body, {
+            eventsName: "click",
+            callback: this.#clickOutsideHandler,
+        });
+
+        this.#$layer.style.display = "none";
+        this.#$layer.inert = true;
+        this.#selectionLocked = true;
+        this.#hoveredItemIndex = -1;
+        this.#selectedItemIndex = -1;
+    };
+
+    #clickOutsideHandler = (e: Event): void => {
+        const $target = e.target as HTMLElement;
+
+        if (
+            this.#$layer !== $target &&
+            !this.#$layer.contains($target) &&
+            $target !== this.#$searchField
+        ) {
+            this.#hideTimeoutId = setTimeout(() => {
+                this.hideLayer();
+            }, this.#options.hideLayerDelay!);
+        }
+    };
+
+    #onFocus = (): void => {
+        clearTimeout(this.#hideTimeoutId);
+
+        if (this.isDisable) {
+            return;
+        }
+
+        if (this.#currentResults.length) {
+            this.#show();
+        }
+    };
+
+    #onItemOver = (e: Event, $item: HTMLElement): void => {
+        if (this.isDisable) {
+            return;
+        }
+
+        this.#hover(index($item));
+    };
+
+    #hover = (_index: number): void => {
+        if (
+            this.#selectionLocked ||
+            _index < 0 ||
+            _index >= this.#currentResults.length
+        ) {
+            return;
+        }
+
+        const currentlyHoveredItem =
+            this.#currentResults[this.#hoveredItemIndex];
+
+        const nextHoveredItem = this.#currentResults[_index];
+        this.#hoveredItemIndex = _index;
+
+        if (currentlyHoveredItem) {
+            currentlyHoveredItem.$item.removeAttribute(HOVERED_ATTRIBUTE);
+        }
+
+        if (nextHoveredItem) {
+            nextHoveredItem.$item.setAttribute(HOVERED_ATTRIBUTE, "true");
+        }
+
+        if (this.#$list) {
+            const listOuterHeight = outerHeight(this.#$list);
+            const itemPos = position(nextHoveredItem.$item);
+            const itemHeight = outerHeight(nextHoveredItem.$item);
+            const top = this.#$list.scrollTop;
+
+            if (itemPos.top + itemHeight > listOuterHeight + top) {
+                this.#$list.scrollTop =
+                    itemPos.top - listOuterHeight + itemHeight;
+            } else if (top > 0 && itemPos.top < top) {
+                this.#$list.scrollTop = itemPos.top;
+            }
+        }
+    };
+
+    #hoverNext = (): void => {
+        this.#hover(
+            this.#hoveredItemIndex + 1 < this.#currentResults.length
+                ? this.#hoveredItemIndex + 1
+                : 0,
+        );
+    };
+
+    #hoverPrevious = (): void => {
+        this.#hover(
+            this.#hoveredItemIndex - 1 >= 0
+                ? this.#hoveredItemIndex - 1
+                : this.#currentResults.length - 1,
+        );
+    };
+
+    resetField(): this {
+        this.#currentQuery = "";
+        this.#$searchField.value = "";
+
+        return this;
+    }
+
+    resetResults(): this {
+        this.#currentResults.length;
+        this.#selectedItemIndex = -1;
+        this.#hoveredItemIndex = -1;
+        this.#$list.innerHTML = "";
+
+        return this;
+    }
+
+    reset(): this {
+        this.resetField();
+        this.resetResults();
+
+        return this;
+    }
+
+    disable(): this {
+        this.#isDisabled = true;
+        this.#$searchField.disabled = true;
+
+        return this;
+    }
+
+    enable(): this {
+        this.#isDisabled = false;
+        this.#$searchField.disabled = false;
+
+        return this;
+    }
+
+    dispose(): this {
+        off(this.#$searchField, {
+            eventsName: "keyup",
+            callback: this.#onKeyup,
+        });
+
+        off(this.#$searchField, {
+            eventsName: "keydown",
+            callback: this.#onKeydown,
+        });
+
+        off(this.#$searchField, {
+            eventsName: "focus",
+            callback: this.#onFocus,
+        });
+
+        off(this.#$list, {
+            eventsName: "click",
+            callback: this.#onItemClick,
+        });
+
+        off(document.body, {
+            eventsName: "click",
+            callback: this.#clickOutsideHandler,
+        });
+
+        off(this.#$list, {
+            eventsName: "mouseover",
+            callback: this.#onItemOver,
+        });
+
+        clearTimeout(this.#hideTimeoutId);
+
+        this.#adapter.abortSource?.();
+
+        remove(this.#$layer);
+
+        return this;
+    }
+}

package/Modules/QuickTemplate.ts

@@ -4,12 +4,29 @@
  * @example
  * ```ts
  * let HTML = quickTemplate( 'My name is {{ lastname }}. {{ firstname }} {{ lastname }}.', { "firstname": "James", "lastname": "Bond" } );
+ * let HTML2 = quickTemplate( 'My name is < lastname >. < firstname > < lastname >.',
+ *                           { "firstname": "James", "lastname": "Bond" },
+ *                           {
+ *                              "open": "<",
+ *                              "close": ">"
+ *                           }
+ *              );
  * ```
  */
-export default function quickTemplate( template: string, data: { [ key: string ]: string } ): string {
-    Object.keys( data ).forEach( key => {
-        template = template.replace( new RegExp( `{{\\s*${ key }\\s*}}`, 'g' ), data[ key ] );
-    } );
+export default function quickTemplate(
+    template: string,
+    data: { [key: string]: string },
+    options?: { open: string; close: string },
+): string {
+    Object.keys(data).forEach((key) => {
+        template = template.replace(
+            new RegExp(
+                `${options?.open ?? "{{"}\\s*${key}\\s*${options?.close ?? "}}"}`,
+                "g",
+            ),
+            data[key],
+        );
+    });
 
     return template;
 }

package/Modules/Validator/MaxFileSize.ts

@@ -1,30 +1,37 @@
-import { addValidator } from './index';
+import { addValidator } from "./index";
 
 /**
  * File size validation
  */
-addValidator( 'maxfilesize', '[data-max-file-size]', ( $input, value, isLiveValidation ) => {
-    if (!($input as HTMLInputElement).files?.length) {
+addValidator(
+    "maxfilesize",
+    "[data-max-file-size]",
+    ($input, value, isLiveValidation) => {
+        if (!($input as HTMLInputElement).files?.length) {
+            return Promise.resolve({
+                $input,
+                value,
+                isValid: true,
+                label: "maxfilesize",
+                isLiveValidation,
+            });
+        }
+
+        const size = ($input as HTMLInputElement).files![0].size;
+        const maxSize = Number(
+            $input.getAttribute("data-max-file-size") ?? "0",
+        );
+
         return Promise.resolve({
             $input,
             value,
-            "isValid": true,
-            "label": "maxfilesize",
-            isLiveValidation
+            isValid:
+                ($input as HTMLInputElement).files?.length === 0 ||
+                size <= 0 ||
+                maxSize <= 0 ||
+                size <= maxSize,
+            label: "maxfilesize",
+            isLiveValidation,
         });
-    }
-
-    const size = ($input as HTMLInputElement).files![0].size;
-    const maxSize = Number($input.getAttribute('data-max-file-size') ?? "0");
-    console.log({size, maxSize})
-    return Promise.resolve({
-        $input,
-        value,
-        "isValid": ($input as HTMLInputElement).files?.length === 0 ||
-                    size <= 0 ||
-                    maxSize <= 0 ||
-                    size <= maxSize,
-        "label": "maxfilesize",
-        isLiveValidation
-    });
-} );
+    },
+);

package/README.md

@@ -1,6 +1,6 @@
 # Front Library
 
-@version: 7.1.48
+@version: 7.1.50
 
 
 ## Use

package/Types/Accordion.d.ts

@@ -1,35 +1,41 @@
 declare namespace FLib {
     namespace Accordion {
-
-        type AnimationFunction = ( $tab: HTMLElement, $panel: HTMLElement ) => Promise<void>;
-        type Callback          = ( $tab: HTMLElement, $panel: HTMLElement ) => void;
-        type CloseCallback     = ( $tab: HTMLElement, $panel: HTMLElement, autoclose: boolean ) => void;
+        type AnimationFunction = (
+            $tab: HTMLElement,
+            $panel: HTMLElement,
+        ) => Promise<void>;
+        type Callback = ($tab: HTMLElement, $panel: HTMLElement) => void;
+        type CloseCallback = (
+            $tab: HTMLElement,
+            $panel: HTMLElement,
+            autoclose: boolean,
+        ) => void;
 
         interface AnimationOptions {
-            open:          AnimationFunction;
-            close:         AnimationFunction;
-            destroy:       AnimationFunction;
+            open: AnimationFunction;
+            close: AnimationFunction;
+            destroy: AnimationFunction;
         }
 
         interface Options {
             /** @defaultValue 'button[aria-expanded]' */
-            tabSelector:       string;
+            tabSelector: string;
             /** @defaultValue false */
-            allowMultipleTab:  boolean;
+            allowMultipleTab: boolean;
             /** @defaultValue false */
-            atLeastOneOpen:    boolean;
-            onOpenAtStart:     Callback;
-            onOpen:            Callback;
-            onClose:           CloseCallback;
-            animations:        Partial<AnimationOptions>;
+            atLeastOneOpen: boolean;
+            onOpenAtStart: Callback;
+            onOpen: Callback;
+            onClose: CloseCallback;
+            animations: Partial<AnimationOptions>;
         }
 
         interface OptionsInit extends Partial<Options> {
-            animations?:        Partial<AnimationOptions>;
+            animations?: Partial<AnimationOptions>;
         }
 
         interface TabOptions extends Options {
-            index:     number;
+            index: number;
         }
     }
 }

package/package.json

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