@peckadesign/pd-naja 1.5.2 → 2.0.0

package/src/extensions/SuggestExtension.ts

@@ -0,0 +1,66 @@
+import { InteractionEvent } from 'naja/dist/core/UIHandler'
+import { CompleteEvent, Extension, Naja, StartEvent } from 'naja/dist/Naja'
+import { Suggest } from '../classes/Suggest'
+import { SpinnerPropsFn, SpinnerType } from '../types'
+
+declare module 'naja/dist/Naja' {
+	interface Options {
+		suggest?: Suggest
+	}
+}
+
+export class SuggestExtension implements Extension {
+	private requestQueue: Set<Request> = new Set()
+
+	public readonly spinner: SpinnerType | undefined
+	public readonly getSpinnerProps?: SpinnerPropsFn
+
+	public constructor(spinner: SpinnerType | undefined = undefined, getSpinnerProps: SpinnerPropsFn = undefined) {
+		this.spinner = spinner
+		this.getSpinnerProps = getSpinnerProps
+
+		const forms = document.querySelectorAll<HTMLFormElement>(`.${Suggest.className}`)
+
+		forms.forEach((form) => {
+			new Suggest(form, {}, spinner, getSpinnerProps)
+		})
+	}
+
+	public initialize(naja: Naja): void {
+		naja.uiHandler.addEventListener('interaction', this.checkExtensionEnabled.bind(this))
+		naja.addEventListener('start', this.start.bind(this))
+		naja.addEventListener('complete', this.complete.bind(this))
+	}
+
+	private checkExtensionEnabled(event: InteractionEvent): void {
+		const { element, options } = event.detail
+
+		const inputElement = element as HTMLInputElement
+		if (inputElement.form && inputElement.form._suggest) {
+			options.suggest = inputElement.form._suggest
+		}
+	}
+
+	private start(event: StartEvent): void {
+		const { options, request } = event.detail
+
+		if (options.suggest) {
+			this.requestQueue.add(request)
+			options.suggest.startSuggest()
+		}
+	}
+
+	private complete(event: CompleteEvent): void {
+		const { options, request } = event.detail
+
+		if (!options.suggest) {
+			return
+		}
+
+		this.requestQueue.delete(request)
+
+		if (this.requestQueue.size === 0) {
+			options.suggest.finishSuggest()
+		}
+	}
+}

package/src/extensions/ToggleClassExtension.ts

@@ -0,0 +1,61 @@
+import { InteractionEvent } from 'naja/dist/core/UIHandler'
+import { CompleteEvent, Extension, Naja, StartEvent } 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 class ToggleClassExtension implements Extension {
+	public initialize(naja: Naja) {
+		naja.uiHandler.addEventListener('interaction', this.checkExtensionEnabled.bind(this))
+		naja.addEventListener('start', this.start.bind(this))
+		naja.addEventListener('complete', this.complete.bind(this))
+	}
+
+	private checkExtensionEnabled(event: InteractionEvent): void {
+		const { element, options } = event.detail
+		const toggleClass = JSON.parse(element.getAttribute('data-naja-toggle-class') || String(null))
+
+		if (toggleClass) {
+			options.toggleClassOptions = {
+				element,
+				toggleClass
+			}
+		}
+	}
+
+	private start(event: StartEvent): void {
+		const { options } = event.detail
+
+		if (options.toggleClassOptions) {
+			this.applyToggleClass(options.toggleClassOptions)
+		}
+	}
+
+	private complete(event: CompleteEvent): void {
+		const { error, options } = event.detail
+
+		if (error && options.toggleClassOptions) {
+			this.applyToggleClass(options.toggleClassOptions)
+		}
+	}
+
+	private applyToggleClass(toggleClassOptions: ToggleClassOptions): void {
+		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))
+			})
+		}
+	}
+}

package/src/extensions/ViewTransitionExtension.txt

@@ -0,0 +1,32 @@
+import { Extension, Naja } from 'naja/dist/Naja'
+import { BeforeUpdateEvent } from 'naja/dist/core/SnippetHandler'
+
+type SnippetUpdateOperation = (snippet: Element, content: string) => void
+
+export class ViewTransitionExtension implements Extension {
+	private operation: SnippetUpdateOperation | undefined
+
+	public initialize(naja: Naja): void {
+		naja.snippetHandler.addEventListener('beforeUpdate', this.handleBeforeUpdate.bind(this))
+	}
+
+	private handleBeforeUpdate(event: BeforeUpdateEvent): void {
+		const { operation, changeOperation } = event.detail
+
+		if (document.startViewTransition !== undefined) {
+			this.operation = operation
+			changeOperation(this.replace.bind(this))
+		}
+	}
+
+	public replace(snippet: Element, content: string): ViewTransition {
+		return document.startViewTransition(() => {
+			if (!this.operation) {
+				return
+			}
+
+			this.operation(snippet, content)
+			this.operation = undefined
+		})
+	}
+}

package/src/index.esm.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'
@@ -8,10 +9,11 @@ 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 { SuggestExtension } from './extensions/SuggestExtension'
+export { ToggleClassExtension } from './extensions/ToggleClassExtension'
 
-export { isDatasetTruthy, isDatasetFalsy } from './utils'
-
-export const controlManager = new ControlManager()
+export { isDatasetFalsy, isDatasetTruthy, showSpinner, hideSpinner } from './utils'

package/src/{utils/Control.ts → types.ts}

@@ -1,3 +1,11 @@
+export type SpinnerType = ((props?: any) => Element) | Element
+export type SpinnerPropsFn = ((initiator: Element) => any) | undefined
+
+export interface WithSpinner {
+	spinner: SpinnerType
+	getSpinnerProps: SpinnerPropsFn
+}
+
 // `Control` is meant to be used for standalone components, that might be dependent on ajax. It should be used together
 // with ControlManager. Class implementing the `Control` interface should export its instance. Then the intended
 // lifecycle of class is as follows:
@@ -16,8 +24,7 @@
 //
 //    2. The `initialize` method is called for each snippet. It is called immediately after the snippet has been
 //       updated. The `context` argument is equal to the modified nette snippet.
-
-export default interface Control {
+export interface Control {
 	initialize(context: Element | Document): void
 
 	destroy?(context: Element): void

package/src/utils.ts

@@ -1,3 +1,25 @@
+import { WithSpinner } from './types'
+
+export function showSpinner(this: WithSpinner, target: Element, initiator: Element = target): Element {
+	let spinner: Element
+
+	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
+}
+
+export function hideSpinner(spinner: Element): void {
+	const animation = spinner.animate({ opacity: 0 }, { duration: 100 })
+	animation.finished.then(() => spinner?.remove())
+}
+
 export const isDatasetTruthy = (element: Element, datasetName: string): boolean => {
 	const datasetValue = (element as HTMLElement).dataset[datasetName]
 

package/dist/utils/Control.d.ts

@@ -1,4 +0,0 @@
-export default interface Control {
-    initialize(context: Element | Document): void;
-    destroy?(context: Element): void;
-}