Wagtail client-side components
    Preparing search index...

    Class SwapController

    Allow for an element to trigger an async query that will patch the results into a results DOM container. The controlled element can be the query input, the containing form, or a button. It supports the ability to update the URL with the query when processed or simply make a query based on a form's values.

    Example: - A form that will update the results based on the form's input

    <div id="results"></div>
    <form
      data-controller="w-swap"
      data-action="input->w-swap#submitLazy"
      data-w-swap-src-value="path/to/search"
      data-w-swap-target-value="#results"
    >
      <input id="search" type="text" name="query" />
      <input id="filter" type="text" name="filter" />
    </form>

    Example: - A single input that will update the results & the URL

    <div id="results"></div>
    <input
      id="search"
      type="text"
      name="q"
      data-controller="w-swap"
      data-action="input->w-swap#searchLazy"
      data-w-swap-src-value="path/to/search"
      data-w-swap-target-value="#listing-results"
    />

    Example: - A single button that will update the results

    <div id="results"></div>
    <button
      id="clear"
      data-controller="w-swap"
      data-action="input->w-swap#replaceLazy"
      data-w-swap-src-value="path/to/results/?type=bar"
      data-w-swap-target-value="#results"
    >
      Clear owner filter
    </button>

    Hierarchy

    Index

    Constructors

    constructor

    Properties

    abortController? context deferValue hasInputTarget hasJsonPathValue hasTargetValue hasUrlValue iconElement? iconValue inputTarget jsonPathValue loadingValue reflectValue replaceLazy? searchLazy? srcValue submitLazy? targetValue waitValue writeDeferred? blessings defaultClearParam outlets targets values

    Accessors

    application classes data element formElement identifier outlets scope target targets shouldLoad

    Methods

    connect disconnect dispatch initialize loadingValueChanged reflectParams replace search submit afterLoad

    Constructors

    • Parameters

      • context: Context

      Returns SwapController

    Properties

    abortController?: AbortController

    Allow cancelling of in flight async request if disconnected

    context: Context
    deferValue: boolean

    Defer writing the results while there is interaction with the target container

    hasInputTarget: boolean
    hasJsonPathValue: boolean
    hasTargetValue: boolean
    hasUrlValue: boolean
    iconElement?: null | SVGUseElement

    The related icon element to attach the spinner to

    iconValue: string
    inputTarget: HTMLInputElement
    jsonPathValue: string

    A dotted path to the HTML string value to extract from the JSON response

    loadingValue: boolean
    reflectValue: boolean
    replaceLazy?: { cancel(): void; (...args: any[]): void }

    Debounced function to request a URL and then replace the DOM with the results

    searchLazy?: { cancel(): void; (...args: any[]): void }

    Debounced function to search results and then replace the DOM

    srcValue: string
    submitLazy?: { cancel(): void; (...args: any[]): void }

    Debounced function to submit the serialized form and then replace the DOM

    targetValue: string
    waitValue: number
    writeDeferred?: () => Promise<string>

    A function that writes the HTML to the target

    blessings: (<T>(constructor: Constructor<T>) => any)[]
    defaultClearParam: string = 'p'
    outlets: string[]
    targets: string[] = ...
    values: {
        defer: { default: boolean; type: BooleanConstructor };
        icon: { default: string; type: StringConstructor };
        jsonPath: { default: string; type: StringConstructor };
        loading: { default: boolean; type: BooleanConstructor };
        reflect: { default: boolean; type: BooleanConstructor };
        src: { default: string; type: StringConstructor };
        target: { default: string; type: StringConstructor };
        wait: { default: number; type: NumberConstructor };
    } = ...

    Accessors

    • get application(): Application

      Returns Application

    • get classes(): ClassMap

      Returns ClassMap

    • get data(): DataMap

      Returns DataMap

    • get element(): ElementType

      Returns ElementType

    • get identifier(): string

      Returns string

    • get outlets(): OutletSet

      Returns OutletSet

    • get scope(): Scope

      Returns Scope

    • get targets(): TargetSet

      Returns TargetSet

    • get shouldLoad(): boolean

      Returns boolean

    Methods

    • When disconnecting, ensure we reset any visual related state values and cancel any in-flight requests.

      Returns void

    • Parameters

      • eventName: string
      • Optional__namedParameters: Partial<
            {
                bubbles: boolean;
                cancelable: boolean;
                detail: Object;
                prefix: string;
                target: Element
                | Window
                | Document;
            },
        >

      Returns CustomEvent<Object>

    • Returns void

    • Toggle the visual spinner icon if available and ensure content about to be replaced is flagged as busy.

      Parameters

      • isLoading: boolean
      • isLoadingPrevious: any

      Returns void

    • Abort any existing requests & set up new abort controller, then fetch and replace the HTML target with the new results. Cancel any in progress results request using the AbortController so that a faster response does not replace an in flight request.

      Parameters

      • OptionalurlSource: string | CustomEvent<{ url: string }> & { params?: { url?: string } }
      • Optionaldata: FormData

      Returns Promise<unknown>

    • Perform a URL search param update based on the input's value with a comparison against the matching URL search params. Will replace the target element's content with the results of the async search request based on the query.

      Search will only be performed with the URL param value is different to the input value. Cleared params will be removed from the URL if present.

      clear can be provided as Event detail or action param to override the default of 'p'.

      Parameters

      • Optionaldata: CustomEvent<{ clear: string }> & { params?: { clear?: string } }

      Returns void

    • Update the target element's content with the response from a request based on the input's form values serialized. Do not account for anything in the main location/URL, simply replace the content within the target element.

      Returns void

    • Parameters

      • _identifier: string
      • _application: Application

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods