Wagtail client-side components
    Preparing search index...

    Class SyncController

    Adds ability to sync the value or interactions with one input with one or more targeted other inputs.

    <section>
      <input type="text" name="title" id="title" />
      <input
        type="date"
        id="event-date"
        name="event-date"
        value="2025-07-22"
        data-controller="w-sync"
        data-action="change->w-sync#apply cut->w-sync#clear focus->w-sync#check"
        data-w-sync-target-value="#title"
      />
    </section>

    Hierarchy

    Index

    Constructors

    constructor

    Properties

    context debounceValue delayValue disabledValue quietValue targetValue blessings outlets targets values

    Accessors

    application classes data element identifier outlets scope targets shouldLoad

    Methods

    apply check clear connect disconnect dispatch initialize ping processTargetElements afterLoad

    Constructors

    • Parameters

      • context: Context

      Returns SyncController

    Properties

    context: Context
    debounceValue: number
    delayValue: number
    disabledValue: boolean
    quietValue: boolean
    targetValue: string
    blessings: (<T>(constructor: Constructor<T>) => any)[]
    outlets: string[]
    targets: string[]
    values: {
        debounce: { default: number; type: NumberConstructor };
        delay: { default: number; type: NumberConstructor };
        disabled: { default: boolean; type: BooleanConstructor };
        quiet: { default: boolean; type: BooleanConstructor };
        target: StringConstructor;
    } = ...

    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

    • Applies a value from the controlled element to the targeted elements. Calls to this method are debounced based on the controller's debounceValue.

      Applying of the value to the targets can be done with a delay, based on the controller's delayValue.

      Parameters

      • Optionalevent: Event & { params?: { apply?: string } }

      Returns void

    • Allows for targeted elements to determine, via preventing the default event, whether this sync controller should be disabled.

      Returns void

    • Dispatches an event to all target elements so that they can be notified that a sync has started, allowing them to disable the sync by preventing default.

      Returns void

    • 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

    • Returns the non-default prevented elements that are targets of this sync controller. Additionally allows this processing to enable or disable this controller instance's sync behavior.

      Parameters

      • eventName: string
      • resetDisabledValue: boolean = false
      • options: {} = {}

      Returns HTMLElement[]

    • Parameters

      • _identifier: string
      • _application: Application

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods