Wagtail client-side components
    Preparing search index...

    Class ZoneController

    Enables the controlled element to respond to specific user interactions by adding or removing CSS classes dynamically.

    Example: - Shows a hover effect when files are dragged over the element.

    <div
      data-controller="w-zone"
      data-w-zone-active-class="hovered active"
      data-action="dragover->w-zone#activate dragleave->w-zone#deactivate"
    >
      Drag files here and see the effect.
    </div>

    Example: - Switches the active state of the element based on a key value from the switch event.

    <div
      class="super-indicator"
      data-controller="w-zone"
      data-action="w-privacy:changed@document->w-zone#switch"
      data-w-zone-active-class="public"
      data-w-zone-inactive-class="private"
      data-w-zone-switch-key-value="isPublic"
    >
     Content
    </div>

    Hierarchy

    • Controller
      • ZoneController
    Index

    Constructors

    constructor

    Properties

    activeClasses context delayValue inactiveClasses modeValue switchKeyValue blessings classes outlets targets values

    Accessors

    application classes data element identifier outlets scope targets shouldLoad

    Methods

    activate connect deactivate disconnect dispatch initialize modeValueChanged noop switch afterLoad

    Constructors

    • Parameters

      • context: Context

      Returns ZoneController

    Properties

    activeClasses: string[]

    Classes to append when the mode is active & remove when inactive.

    context: Context
    delayValue: number

    Delay, in milliseconds, to use when debouncing the mode updates.

    inactiveClasses: string[]

    Classes to append when the mode is inactive & remove when active.

    modeValue: ZoneMode

    Tracks the current mode for this zone.

    switchKeyValue: string

    Key to use when switching the active state via the switch method.

    blessings: (<T>(constructor: Constructor<T>) => any)[]
    classes: string[] = ...
    outlets: string[]
    targets: string[]
    values: {
        delay: { default: number; type: NumberConstructor };
        mode: { default: ZoneMode; type: StringConstructor };
        switchKey: { default: string; type: 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

    • 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>

    • Parameters

      • current: ZoneMode
      • Optionalprevious: ZoneMode

      Returns void

    • Intentionally does nothing.

      Useful for attaching data-action to leverage the built in Stimulus options without needing any extra functionality. e.g. preventDefault (:prevent) and stopPropagation (:stop).

      Returns void

    • Switches the active state of the zone, based ont he provided key from the event detail or params. If there is no key provided, it will use the fallback key of 'active'.

      If the key's value is truthy, it will set the mode to active, otherwise it will set it to inactive.

      If the key is not found in the event detail or params, it will do nothing.

      Parameters

      • Optionalevent: CustomEvent<{ mode?: ZoneMode }> & { params?: { mode: ZoneMode } }

      Returns void

    • Parameters

      • _identifier: string
      • _application: Application

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods