@peckadesign/pd-naja 1.5.2 → 2.0.0

package/dist/classes/Suggest.d.ts

@@ -0,0 +1,34 @@
+import { SpinnerPropsFn, SpinnerType } from '../types';
+type SuggestOptions = {
+    minLength: number;
+    timeout: number;
+};
+export declare class Suggest {
+    readonly spinner?: SpinnerType;
+    readonly getSpinnerProps?: SpinnerPropsFn;
+    static readonly className = "js-suggest";
+    readonly inputClassName: string;
+    readonly buttonClassName: string;
+    readonly suggestClassName: string;
+    readonly linkClassName: string;
+    private readonly form;
+    private readonly input;
+    private readonly button;
+    private readonly suggest;
+    private suggestSpinner;
+    private isOpen;
+    private timer;
+    private lastSearched;
+    private readonly options;
+    constructor(form: HTMLFormElement, options?: Partial<SuggestOptions>, spinner?: SpinnerType | undefined, getSpinnerProps?: SpinnerPropsFn);
+    private isEmpty;
+    private showSuggest;
+    private hideSuggest;
+    private emptySuggest;
+    startSuggest(): void;
+    finishSuggest(): void;
+    private handleInputKeydown;
+    private handleInputKeyup;
+    private handleSuggestMousedown;
+}
+export {};

package/dist/extensions/BtnSpinnerExtension.d.ts

@@ -1,22 +1,18 @@
 import { Extension, Naja } from 'naja/dist/Naja';
+import { SpinnerPropsFn, SpinnerType, WithSpinner } from '../types';
 declare module 'naja/dist/Naja' {
     interface Options {
         btnSpinnerInitiator?: Element;
         btnSpinner?: Element;
     }
 }
-type spinnerType = ((props?: any) => Element) | Element;
-type spinnerPropsFn = ((initiator: Element) => any) | undefined;
-export declare class BtnSpinnerExtension implements Extension {
+export declare class BtnSpinnerExtension implements Extension, WithSpinner {
     readonly timeout: number;
-    readonly spinner: spinnerType;
-    readonly getSpinnerProps?: spinnerPropsFn;
-    constructor(spinner: spinnerType, getSpinnerProps?: spinnerPropsFn, timeout?: number);
+    readonly spinner: SpinnerType;
+    readonly getSpinnerProps: SpinnerPropsFn;
+    constructor(spinner: SpinnerType, getSpinnerProps?: SpinnerPropsFn, timeout?: number);
     initialize(naja: Naja): void;
     private checkExtensionEnabled;
     private handleStartEvent;
     private handleCompleteEvent;
-    private showSpinner;
-    private hideSpinner;
 }
-export {};

package/dist/extensions/ScrollToExtension.d.ts

@@ -0,0 +1,16 @@
+import { Extension, Naja } from 'naja/dist/Naja';
+type NajaScrollToEvent = 'before' | 'success';
+declare module 'naja/dist/Naja' {
+    interface Options {
+        scrollToEvent?: NajaScrollToEvent;
+        scrollToSelector?: string;
+    }
+}
+export declare class ScrollToExtension implements Extension {
+    defaultScrollToEvent: NajaScrollToEvent;
+    constructor(defaultScrollToEvent?: NajaScrollToEvent);
+    initialize(naja: Naja): void;
+    private checkExtensionEnabled;
+    private checkScroll;
+}
+export {};

package/dist/extensions/SpinnerExtension.d.ts

@@ -1,4 +1,5 @@
 import { Extension, Naja } from 'naja/dist/Naja';
+import { SpinnerPropsFn, SpinnerType, WithSpinner } from '../types';
 /**
  * @author Radek Šerý
  *
@@ -17,14 +18,12 @@ declare module 'naja/dist/Naja' {
         spinnerInitiator?: Element;
     }
 }
-type spinnerType = ((props?: any) => Element) | Element;
-type spinnerPropsFn = ((initiator: Element) => any) | undefined;
-export declare class SpinnerExtension implements Extension {
-    readonly spinner: spinnerType;
-    readonly getSpinnerProps?: spinnerPropsFn;
+export declare class SpinnerExtension implements Extension, WithSpinner {
+    readonly spinner: SpinnerType;
+    readonly getSpinnerProps: SpinnerPropsFn;
     readonly ajaxSpinnerWrapSelector: string;
     readonly ajaxSpinnerPlaceholderSelector: string;
-    constructor(spinner: spinnerType, getSpinnerProps?: spinnerPropsFn, ajaxSpinnerWrapSelector?: string, ajaxSpinnerPlaceholderSelector?: string);
+    constructor(spinner: SpinnerType, getSpinnerProps?: SpinnerPropsFn, ajaxSpinnerWrapSelector?: string, ajaxSpinnerPlaceholderSelector?: string);
     initialize(naja: Naja): void;
     private getSpinnerInitiator;
     private showSpinners;
@@ -33,4 +32,3 @@ export declare class SpinnerExtension implements Extension {
     private getPlaceholdersByQuerySelector;
     private getPlaceholdersByDOM;
 }
-export {};

package/dist/extensions/SuggestExtension.d.ts

@@ -0,0 +1,18 @@
+import { Extension, Naja } from 'naja/dist/Naja';
+import { Suggest } from '../classes/Suggest';
+import { SpinnerPropsFn, SpinnerType } from '../types';
+declare module 'naja/dist/Naja' {
+    interface Options {
+        suggest?: Suggest;
+    }
+}
+export declare class SuggestExtension implements Extension {
+    private requestQueue;
+    readonly spinner: SpinnerType | undefined;
+    readonly getSpinnerProps?: SpinnerPropsFn;
+    constructor(spinner?: SpinnerType | undefined, getSpinnerProps?: SpinnerPropsFn);
+    initialize(naja: Naja): void;
+    private checkExtensionEnabled;
+    private start;
+    private complete;
+}

package/dist/extensions/ToggleClassExtension.d.ts

@@ -0,0 +1,19 @@
+import { Extension, Naja } from 'naja/dist/Naja';
+type ToggleClassRecord = Record<string, string>;
+type ToggleClassOptions = {
+    element: Element;
+    toggleClass: ToggleClassRecord;
+};
+declare module 'naja/dist/Naja' {
+    interface Options {
+        toggleClassOptions?: ToggleClassOptions;
+    }
+}
+export declare class ToggleClassExtension implements Extension {
+    initialize(naja: Naja): void;
+    private checkExtensionEnabled;
+    private start;
+    private complete;
+    private applyToggleClass;
+}
+export {};

package/dist/index.esm.d.ts

@@ -1,4 +1,5 @@
-import ControlManager from './utils/ControlManager';
+export { ControlManager } from './classes/ControlManager';
+export { Suggest } from './classes/Suggest';
 export { AjaxModalExtension } from './extensions/AjaxModalExtension';
 export { AjaxModalPreventRedrawExtension } from './extensions/AjaxModalPreventRedrawExtension';
 export { AjaxOnceExtension } from './extensions/AjaxOnceExtension';
@@ -7,8 +8,10 @@ export { ConfirmExtension } from './extensions/ConfirmExtension';
 export { FollowUpRequestExtension } from './extensions/FollowUpRequestExtension';
 export { ForceRedirectExtension } from './extensions/ForceRedirectExtension';
 export { ForceReplaceExtension } from './extensions/ForceReplaceExtension';
+export { ScrollToExtension } from './extensions/ScrollToExtension';
 export { SingleSubmitExtension } from './extensions/SingleSubmitExtension';
 export { SnippetFormPartExtension } from './extensions/SnippetFormPartExtension';
 export { SpinnerExtension } from './extensions/SpinnerExtension';
-export { isDatasetTruthy, isDatasetFalsy } from './utils';
-export declare const controlManager: ControlManager;
+export { SuggestExtension } from './extensions/SuggestExtension';
+export { ToggleClassExtension } from './extensions/ToggleClassExtension';
+export { isDatasetFalsy, isDatasetTruthy, showSpinner, hideSpinner } from './utils';

package/dist/index.esm.js

@@ -5,21 +5,20 @@
  * @author PeckaDesign, s.r.o <support@peckadesign.cz>
  * @license MIT
  *
- * @version 1.5.2
+ * @version 2.0.0
  */
 
-import naja from 'naja';
-
 let instance = null;
 class ControlManager {
-    constructor() {
+    constructor(naja) {
         this.onLoadControl = [];
         this.onLiveControl = [];
         if (instance === null) {
             // eslint-disable-next-line @typescript-eslint/no-this-alias
             instance = this;
-            naja.snippetHandler.addEventListener('beforeUpdate', this.onBeforeSnippetUpdate.bind(this));
-            naja.snippetHandler.addEventListener('afterUpdate', this.onSnippetUpdate.bind(this));
+            this.naja = naja;
+            this.naja.snippetHandler.addEventListener('beforeUpdate', this.onBeforeSnippetUpdate.bind(this));
+            this.naja.snippetHandler.addEventListener('afterUpdate', this.onSnippetUpdate.bind(this));
         }
         return instance;
     }
@@ -28,8 +27,8 @@ class ControlManager {
         this.initialize(this.onLiveControl);
     }
     onBeforeSnippetUpdate(event) {
-        if (event.detail.operation === naja.snippetHandler.op.append ||
-            event.detail.operation === naja.snippetHandler.op.prepend) {
+        if (event.detail.operation === this.naja.snippetHandler.op.append ||
+            event.detail.operation === this.naja.snippetHandler.op.prepend) {
             return;
         }
         this.destroy(this.onLiveControl, event.detail.snippet);
@@ -57,6 +56,180 @@ class ControlManager {
     }
 }
 
+function showSpinner(target, initiator = target) {
+    let spinner;
+    if (typeof this.spinner === 'function') {
+        spinner = this.getSpinnerProps ? this.spinner(this.getSpinnerProps(initiator)) : this.spinner();
+    }
+    else {
+        spinner = this.spinner;
+    }
+    target.appendChild(spinner);
+    spinner.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 100 });
+    return spinner;
+}
+function hideSpinner(spinner) {
+    const animation = spinner.animate({ opacity: 0 }, { duration: 100 });
+    animation.finished.then(() => spinner?.remove());
+}
+const isDatasetTruthy = (element, datasetName) => {
+    const datasetValue = element.dataset[datasetName];
+    return datasetValue !== undefined && datasetValue !== 'false' && datasetValue !== 'off';
+};
+const isDatasetFalsy = (element, datasetName) => {
+    const datasetValue = element.dataset[datasetName];
+    return datasetValue === 'off' || datasetValue === 'false';
+};
+
+class Suggest {
+    constructor(form, options = {}, spinner = undefined, getSpinnerProps = undefined) {
+        this.inputClassName = `${Suggest.className}__input`;
+        this.buttonClassName = `${Suggest.className}__btn`;
+        this.suggestClassName = `${Suggest.className}__suggest`;
+        this.linkClassName = `${Suggest.className}__link`;
+        this.isOpen = false;
+        this.timer = undefined;
+        this.lastSearched = '';
+        this.options = {
+            minLength: 2,
+            timeout: 200
+        };
+        this.form = form;
+        this.spinner = spinner;
+        this.getSpinnerProps = getSpinnerProps;
+        const input = form.querySelector(`.${this.inputClassName}`);
+        const button = form.querySelector(`.${this.buttonClassName}`);
+        const suggest = form.querySelector(`.${this.suggestClassName}`);
+        if (!input || !button || !suggest) {
+            throw new Error('Suggest: Missing input, button or suggest element.');
+        }
+        this.input = input;
+        this.button = button;
+        this.suggest = suggest;
+        this.options = { ...this.options, ...options };
+        this.input.addEventListener('focus', this.showSuggest.bind(this));
+        this.input.addEventListener('blur', this.hideSuggest.bind(this));
+        this.input.addEventListener('keydown', this.handleInputKeydown.bind(this));
+        this.input.addEventListener('keyup', this.handleInputKeyup.bind(this));
+        this.suggest.addEventListener('mousedown', this.handleSuggestMousedown.bind(this));
+        this.form._suggest = this;
+    }
+    isEmpty() {
+        return this.suggest.childElementCount === 0;
+    }
+    showSuggest() {
+        if (this.isEmpty() || this.input.value.length < this.options.minLength) {
+            return;
+        }
+        const event = new CustomEvent('show.suggest', { bubbles: true, cancelable: true });
+        this.suggest.dispatchEvent(event);
+        if (event.defaultPrevented) {
+            return;
+        }
+        this.isOpen = true;
+        this.suggest.classList.add(`${this.suggestClassName}--shown`);
+    }
+    hideSuggest() {
+        const event = new CustomEvent('hide.suggest', { bubbles: true, cancelable: true });
+        this.suggest.dispatchEvent(event);
+        if (event.defaultPrevented) {
+            return;
+        }
+        this.isOpen = false;
+        this.suggest.classList.remove(`${this.suggestClassName}--shown`);
+    }
+    emptySuggest() {
+        this.suggest.classList.add(`${this.suggestClassName}--empty`);
+        this.suggest.replaceChildren();
+    }
+    startSuggest() {
+        this.suggest.dispatchEvent(new CustomEvent('loading.suggest', { bubbles: true }));
+        this.input.classList.add(`${this.inputClassName}--loading`);
+        if (this.spinner && !this.suggestSpinner) {
+            this.suggestSpinner = showSpinner.call(this, this.form);
+        }
+    }
+    finishSuggest() {
+        this.suggest.dispatchEvent(new CustomEvent('loaded.suggest', { bubbles: true }));
+        this.input.classList.remove(`${this.inputClassName}--loading`);
+        this.suggest.classList.toggle(`${this.suggestClassName}--empty`, this.isEmpty());
+        if (this.isEmpty() || document.activeElement !== this.input) {
+            this.hideSuggest();
+        }
+        else {
+            this.showSuggest();
+        }
+        if (this.suggestSpinner) {
+            hideSpinner(this.suggestSpinner);
+            this.suggestSpinner = undefined;
+        }
+    }
+    handleInputKeydown(event) {
+        let anchors;
+        let activeAnchor;
+        let activeAnchorIndex;
+        const activeClassName = `${this.linkClassName}--active`;
+        switch (event.key) {
+            case 'Escape':
+                event.preventDefault();
+                this.hideSuggest();
+                this.input.blur();
+                break;
+            case 'ArrowDown':
+            case 'ArrowUp':
+                event.preventDefault();
+                anchors = Array.from(this.suggest.querySelectorAll(`.${this.linkClassName}`));
+                activeAnchor = anchors.find((element) => element.classList.contains(activeClassName));
+                activeAnchorIndex = activeAnchor ? anchors.indexOf(activeAnchor) : undefined;
+                activeAnchor?.classList.remove(activeClassName);
+                if (event.key === 'ArrowDown') {
+                    activeAnchorIndex = activeAnchorIndex !== undefined ? activeAnchorIndex + 1 : 0;
+                }
+                else {
+                    activeAnchorIndex = activeAnchorIndex !== undefined ? activeAnchorIndex - 1 : anchors.length - 1;
+                }
+                anchors[activeAnchorIndex]?.classList.add(activeClassName);
+                break;
+            case 'Enter':
+                activeAnchor = this.suggest.querySelector(`.${activeClassName}`);
+                if (activeAnchor) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    location.href = activeAnchor.href;
+                }
+                break;
+        }
+    }
+    handleInputKeyup() {
+        clearTimeout(this.timer);
+        const query = this.input.value;
+        if (query.length < this.options.minLength) {
+            this.hideSuggest();
+            return;
+        }
+        if (!this.isOpen) {
+            // If the suggestion wasn't open and this query is different from the last query, we need to clear the
+            // results because they are not relevant. This only needs to be done if the suggestion has been closed.
+            if (query !== this.lastSearched) {
+                this.emptySuggest();
+            }
+            this.showSuggest();
+        }
+        // If the query is the same, there's nothing more to do.
+        if (query === this.lastSearched) {
+            return;
+        }
+        this.timer = setTimeout(() => {
+            this.lastSearched = query;
+            this.button.click();
+        }, this.options.timeout);
+    }
+    handleSuggestMousedown(event) {
+        event.preventDefault();
+    }
+}
+Suggest.className = 'js-suggest';
+
 class AjaxModalExtension {
     constructor(modal) {
         this.uniqueExtKey = 'modal';
@@ -373,15 +546,6 @@ class AjaxModalPreventRedrawExtension {
     }
 }
 
-const isDatasetTruthy = (element, datasetName) => {
-    const datasetValue = element.dataset[datasetName];
-    return datasetValue !== undefined && datasetValue !== 'false' && datasetValue !== 'off';
-};
-const isDatasetFalsy = (element, datasetName) => {
-    const datasetValue = element.dataset[datasetName];
-    return datasetValue === 'off' || datasetValue === 'false';
-};
-
 class AjaxOnceExtension {
     initialize(naja) {
         naja.uiHandler.addEventListener('interaction', this.checkAjaxOnce.bind(this));
@@ -422,9 +586,9 @@ class BtnSpinnerExtension {
                 isDatasetTruthy(button, 'noBtnSpinner')) {
                 return true;
             }
-            const spinner = this.showSpinner(button);
+            const spinner = showSpinner.call(this, button);
             form.dataset.btnSpinnerTimeout = String(setTimeout(() => {
-                this.hideSpinner(spinner);
+                hideSpinner(spinner);
                 delete form.dataset.btnSpinnerTimeout;
             }, this.timeout));
         });
@@ -446,30 +610,14 @@ class BtnSpinnerExtension {
         if (!options.btnSpinnerInitiator) {
             return;
         }
-        options.btnSpinner = this.showSpinner(options.btnSpinnerInitiator);
+        options.btnSpinner = showSpinner.call(this, options.btnSpinnerInitiator);
     }
     handleCompleteEvent(event) {
         const { options } = event.detail;
         if (options.forceRedirect || !options.btnSpinner) {
             return;
         }
-        this.hideSpinner(options.btnSpinner);
-    }
-    showSpinner(button) {
-        let spinner;
-        if (typeof this.spinner === 'function') {
-            spinner = this.getSpinnerProps ? this.spinner(this.getSpinnerProps(button)) : this.spinner();
-        }
-        else {
-            spinner = this.spinner;
-        }
-        button.appendChild(spinner);
-        spinner.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 100 });
-        return spinner;
-    }
-    hideSpinner(spinner) {
-        const animation = spinner.animate({ opacity: 0 }, { duration: 100 });
-        animation.finished.then(() => spinner?.remove());
+        hideSpinner(options.btnSpinner);
     }
 }
 
@@ -535,6 +683,36 @@ class ForceReplaceExtension {
     }
 }
 
+class ScrollToExtension {
+    constructor(defaultScrollToEvent) {
+        this.defaultScrollToEvent = 'before';
+        if (defaultScrollToEvent) {
+            this.defaultScrollToEvent = defaultScrollToEvent;
+        }
+    }
+    initialize(naja) {
+        naja.uiHandler.addEventListener('interaction', this.checkExtensionEnabled.bind(this));
+        naja.addEventListener('before', this.checkScroll.bind(this));
+        naja.addEventListener('success', this.checkScroll.bind(this));
+    }
+    checkExtensionEnabled(event) {
+        const { element, options } = event.detail;
+        const selector = element.getAttribute('data-naja-scroll-to');
+        if (selector) {
+            const event = element.getAttribute('data-naja-scroll-to-event');
+            options.scrollToSelector = selector;
+            options.scrollToEvent = event ?? this.defaultScrollToEvent;
+        }
+    }
+    checkScroll(event) {
+        const { options } = event.detail;
+        if (options.scrollToSelector && event.type === options.scrollToEvent) {
+            const scrollToElement = document.querySelector(options.scrollToSelector);
+            scrollToElement?.scrollIntoView();
+        }
+    }
+}
+
 class SingleSubmitExtension {
     constructor(buttonDisabledClass, timeout = 60000) {
         this.timeout = 60000;
@@ -677,16 +855,7 @@ class SpinnerExtension {
         else {
             options.spinnerQueue = options.spinnerQueue || [];
             placeholders.forEach((placeholder) => {
-                let spinner;
-                if (typeof this.spinner === 'function') {
-                    spinner = this.getSpinnerProps ? this.spinner(this.getSpinnerProps(spinnerInitiator)) : this.spinner();
-                }
-                else {
-                    spinner = this.spinner;
-                }
-                placeholder.appendChild(spinner);
-                options.spinnerQueue.push(spinner);
-                spinner.animate([{ opacity: 0 }, { opacity: 1 }], { duration: 100 });
+                options.spinnerQueue.push(showSpinner.call(this, placeholder, spinnerInitiator));
             });
         }
     }
@@ -695,10 +864,7 @@ class SpinnerExtension {
         if (options.forceRedirect) {
             return;
         }
-        options.spinnerQueue?.forEach((spinner) => {
-            const animation = spinner.animate({ opacity: 0 }, { duration: 100 });
-            animation.finished.then(() => spinner.remove());
-        });
+        options.spinnerQueue?.forEach((spinner) => hideSpinner(spinner));
     }
     getPlaceholders(element) {
         if (!element) {
@@ -725,7 +891,84 @@ class SpinnerExtension {
     }
 }
 
-const controlManager = new ControlManager();
+class SuggestExtension {
+    constructor(spinner = undefined, getSpinnerProps = undefined) {
+        this.requestQueue = new Set();
+        this.spinner = spinner;
+        this.getSpinnerProps = getSpinnerProps;
+        const forms = document.querySelectorAll(`.${Suggest.className}`);
+        forms.forEach((form) => {
+            new Suggest(form, {}, spinner, getSpinnerProps);
+        });
+    }
+    initialize(naja) {
+        naja.uiHandler.addEventListener('interaction', this.checkExtensionEnabled.bind(this));
+        naja.addEventListener('start', this.start.bind(this));
+        naja.addEventListener('complete', this.complete.bind(this));
+    }
+    checkExtensionEnabled(event) {
+        const { element, options } = event.detail;
+        const inputElement = element;
+        if (inputElement.form && inputElement.form._suggest) {
+            options.suggest = inputElement.form._suggest;
+        }
+    }
+    start(event) {
+        const { options, request } = event.detail;
+        if (options.suggest) {
+            this.requestQueue.add(request);
+            options.suggest.startSuggest();
+        }
+    }
+    complete(event) {
+        const { options, request } = event.detail;
+        if (!options.suggest) {
+            return;
+        }
+        this.requestQueue.delete(request);
+        if (this.requestQueue.size === 0) {
+            options.suggest.finishSuggest();
+        }
+    }
+}
+
+class ToggleClassExtension {
+    initialize(naja) {
+        naja.uiHandler.addEventListener('interaction', this.checkExtensionEnabled.bind(this));
+        naja.addEventListener('start', this.start.bind(this));
+        naja.addEventListener('complete', this.complete.bind(this));
+    }
+    checkExtensionEnabled(event) {
+        const { element, options } = event.detail;
+        const toggleClass = JSON.parse(element.getAttribute('data-naja-toggle-class') || String(null));
+        if (toggleClass) {
+            options.toggleClassOptions = {
+                element,
+                toggleClass
+            };
+        }
+    }
+    start(event) {
+        const { options } = event.detail;
+        if (options.toggleClassOptions) {
+            this.applyToggleClass(options.toggleClassOptions);
+        }
+    }
+    complete(event) {
+        const { error, options } = event.detail;
+        if (error && options.toggleClassOptions) {
+            this.applyToggleClass(options.toggleClassOptions);
+        }
+    }
+    applyToggleClass(toggleClassOptions) {
+        for (const [selector, classNames] of Object.entries(toggleClassOptions.toggleClass)) {
+            const targets = toggleClassOptions.element.querySelectorAll(selector);
+            targets.forEach((target) => {
+                classNames.split(' ').forEach((className) => target.classList.toggle(className));
+            });
+        }
+    }
+}
 
-export { AjaxModalExtension, AjaxModalPreventRedrawExtension, AjaxOnceExtension, BtnSpinnerExtension, ConfirmExtension, FollowUpRequestExtension, ForceRedirectExtension, ForceReplaceExtension, SingleSubmitExtension, SnippetFormPartExtension, SpinnerExtension, controlManager, isDatasetFalsy, isDatasetTruthy };
+export { AjaxModalExtension, AjaxModalPreventRedrawExtension, AjaxOnceExtension, BtnSpinnerExtension, ConfirmExtension, ControlManager, FollowUpRequestExtension, ForceRedirectExtension, ForceReplaceExtension, ScrollToExtension, SingleSubmitExtension, SnippetFormPartExtension, SpinnerExtension, Suggest, SuggestExtension, ToggleClassExtension, hideSpinner, isDatasetFalsy, isDatasetTruthy, showSpinner };
 //# sourceMappingURL=index.esm.js.map