@peckadesign/pd-naja 1.6.0 → 2.0.0

package/src/classes/Suggest.ts

@@ -0,0 +1,215 @@
+import { SpinnerPropsFn, SpinnerType, WithSpinner } from '../types'
+import { hideSpinner, showSpinner } from '../utils'
+
+type SuggestOptions = {
+	minLength: number
+	timeout: number
+}
+
+export class Suggest {
+	public readonly spinner?: SpinnerType
+	public readonly getSpinnerProps?: SpinnerPropsFn
+
+	public static readonly className = 'js-suggest'
+	public readonly inputClassName = `${Suggest.className}__input`
+	public readonly buttonClassName = `${Suggest.className}__btn`
+	public readonly suggestClassName = `${Suggest.className}__suggest`
+	public readonly linkClassName = `${Suggest.className}__link`
+
+	private readonly form: HTMLFormElement
+	private readonly input: HTMLInputElement
+	private readonly button: HTMLButtonElement
+	private readonly suggest: HTMLElement
+
+	private suggestSpinner: Element | undefined
+
+	private isOpen: boolean = false
+	private timer: ReturnType<typeof setTimeout> | undefined = undefined
+
+	private lastSearched: string = ''
+
+	private readonly options: SuggestOptions = {
+		minLength: 2,
+		timeout: 200
+	}
+
+	public constructor(
+		form: HTMLFormElement,
+		options: Partial<SuggestOptions> = {},
+		spinner: SpinnerType | undefined = undefined,
+		getSpinnerProps: SpinnerPropsFn = undefined
+	) {
+		this.form = form
+		this.spinner = spinner
+		this.getSpinnerProps = getSpinnerProps
+
+		const input = form.querySelector<HTMLInputElement>(`.${this.inputClassName}`)
+		const button = form.querySelector<HTMLButtonElement>(`.${this.buttonClassName}`)
+		const suggest = form.querySelector<HTMLElement>(`.${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
+	}
+
+	private isEmpty(): boolean {
+		return this.suggest.childElementCount === 0
+	}
+
+	private showSuggest(): void {
+		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`)
+	}
+
+	private hideSuggest(): void {
+		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`)
+	}
+
+	private emptySuggest(): void {
+		this.suggest.classList.add(`${this.suggestClassName}--empty`)
+		this.suggest.replaceChildren()
+	}
+
+	public startSuggest(): void {
+		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 as WithSpinner, this.form)
+		}
+	}
+
+	public finishSuggest(): void {
+		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
+		}
+	}
+
+	private handleInputKeydown(event: KeyboardEvent): void {
+		let anchors: HTMLAnchorElement[]
+		let activeAnchor: HTMLAnchorElement | null | undefined
+		let activeAnchorIndex: number | undefined
+		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<HTMLAnchorElement>(`.${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<HTMLAnchorElement>(`.${activeClassName}`)
+
+				if (activeAnchor) {
+					event.preventDefault()
+					event.stopPropagation()
+
+					location.href = activeAnchor.href
+				}
+				break
+		}
+	}
+
+	private handleInputKeyup(): void {
+		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)
+	}
+
+	private handleSuggestMousedown(event: MouseEvent): void {
+		event.preventDefault()
+	}
+}

package/src/extensions/BtnSpinnerExtension.ts

@@ -1,6 +1,7 @@
 import { InteractionEvent } from 'naja/dist/core/UIHandler'
 import { CompleteEvent, Extension, Naja, StartEvent } from 'naja/dist/Naja'
-import { isDatasetTruthy } from '../utils'
+import { SpinnerPropsFn, SpinnerType, WithSpinner } from '../types'
+import { hideSpinner, isDatasetTruthy, showSpinner } from '../utils'
 
 declare module 'naja/dist/Naja' {
 	interface Options {
@@ -9,15 +10,12 @@ declare module 'naja/dist/Naja' {
 	}
 }
 
-type spinnerType = ((props?: any) => Element) | Element
-type spinnerPropsFn = ((initiator: Element) => any) | undefined
-
-export class BtnSpinnerExtension implements Extension {
+export class BtnSpinnerExtension implements Extension, WithSpinner {
 	public readonly timeout: number
-	public readonly spinner: spinnerType
-	public readonly getSpinnerProps?: spinnerPropsFn
+	public readonly spinner: SpinnerType
+	public readonly getSpinnerProps: SpinnerPropsFn
 
-	public constructor(spinner: spinnerType, getSpinnerProps: spinnerPropsFn = undefined, timeout = 60000) {
+	public constructor(spinner: SpinnerType, getSpinnerProps: SpinnerPropsFn = undefined, timeout = 60000) {
 		this.spinner = spinner
 		this.getSpinnerProps = getSpinnerProps
 		this.timeout = timeout
@@ -36,11 +34,11 @@ export class BtnSpinnerExtension implements Extension {
 				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)
 			)
@@ -70,7 +68,7 @@ export class BtnSpinnerExtension implements Extension {
 			return
 		}
 
-		options.btnSpinner = this.showSpinner(options.btnSpinnerInitiator)
+		options.btnSpinner = showSpinner.call(this, options.btnSpinnerInitiator)
 	}
 
 	private handleCompleteEvent(event: CompleteEvent): void {
@@ -80,26 +78,6 @@ export class BtnSpinnerExtension implements Extension {
 			return
 		}
 
-		this.hideSpinner(options.btnSpinner)
-	}
-
-	private showSpinner(button: Element): Element {
-		let spinner: Element
-
-		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
-	}
-
-	private hideSpinner(spinner: Element): void {
-		const animation = spinner.animate({ opacity: 0 }, { duration: 100 })
-		animation.finished.then(() => spinner?.remove())
+		hideSpinner(options.btnSpinner)
 	}
 }

package/src/extensions/SpinnerExtension.ts

@@ -1,5 +1,7 @@
 import { CompleteEvent, Extension, Naja, StartEvent } from 'naja/dist/Naja'
 import { InteractionEvent } from 'naja/dist/core/UIHandler'
+import { SpinnerPropsFn, SpinnerType, WithSpinner } from '../types'
+import { hideSpinner, showSpinner } from '../utils'
 
 /**
  * @author Radek Šerý
@@ -21,19 +23,16 @@ declare module 'naja/dist/Naja' {
 	}
 }
 
-type spinnerType = ((props?: any) => Element) | Element
-type spinnerPropsFn = ((initiator: Element) => any) | undefined
-
-export class SpinnerExtension implements Extension {
-	public readonly spinner: spinnerType
-	public readonly getSpinnerProps?: spinnerPropsFn
+export class SpinnerExtension implements Extension, WithSpinner {
+	public readonly spinner: SpinnerType
+	public readonly getSpinnerProps: SpinnerPropsFn
 
 	public readonly ajaxSpinnerWrapSelector: string
 	public readonly ajaxSpinnerPlaceholderSelector: string
 
 	public constructor(
-		spinner: spinnerType,
-		getSpinnerProps: spinnerPropsFn = undefined,
+		spinner: SpinnerType,
+		getSpinnerProps: SpinnerPropsFn = undefined,
 		ajaxSpinnerWrapSelector = '.ajax-wrap',
 		ajaxSpinnerPlaceholderSelector = '.ajax-spinner'
 	) {
@@ -71,18 +70,7 @@ export class SpinnerExtension implements Extension {
 			options.spinnerQueue = options.spinnerQueue || []
 
 			placeholders.forEach((placeholder) => {
-				let spinner: Element
-
-				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))
 			})
 		}
 	}
@@ -94,10 +82,7 @@ export class SpinnerExtension implements Extension {
 			return
 		}
 
-		options.spinnerQueue?.forEach((spinner: Element) => {
-			const animation = spinner.animate({ opacity: 0 }, { duration: 100 })
-			animation.finished.then(() => spinner.remove())
-		})
+		options.spinnerQueue?.forEach((spinner: Element) => hideSpinner(spinner))
 	}
 
 	private getPlaceholders(element: Element): Element[] {

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/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'
@@ -12,8 +13,7 @@ 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;
-}