Wagtail client-side components
    Preparing search index...

    Class RevealController

    Adds the ability to make the controlled element be used as an opening/closing (aka collapsing) element. Supports, and relies on, correct usage of aria-* attributes.

    https://w3c.github.io/aria/#aria-expanded

    <section data-controller="w-reveal">
      <button type="button" data-action="w-reveal#toggle" data-w-reveal-target="toggle" aria-controls="my-content" type="button">Toggle</button>
      <div id="my-content">CONTENT</div>
    </section>

    <section data-controller="w-reveal" data-w-reveal-storage-key="saved-state">
      <button type="button" aria-controls="my-content" type="button" data-action="w-reveal#toggle" data-w-reveal-target="toggle">Toggle</button>
      <div id="my-content">CONTENT</div>
    </section>

    Hierarchy

    Index

    Constructors

    constructor

    Properties

    cleanUpPeekListener? closedClasses closedValue closeIconClass contentTargets context hasCloseIconClass hasOpenIconClass openedClasses openedContentClasses openIconClass peekingValue peekTargetValue storageKeyValue toggleTargets blessings classes outlets targets values

    Accessors

    application classes data element identifier localStorageKey outlets scope stored targets toggles shouldLoad

    Methods

    close closedValueChanged connect disconnect dispatch initialize open peek toggle updateToggleIcon afterLoad

    Constructors

    • Parameters

      • context: Context

      Returns RevealController

    Properties

    cleanUpPeekListener?: () => void
    closedClasses: string[]
    closedValue: boolean
    closeIconClass: string
    contentTargets: HTMLElement[]

    Content element target, to be shown/hidden with classes when opened/closed.

    context: Context
    hasCloseIconClass: string
    hasOpenIconClass: string
    openedClasses: string[]
    openedContentClasses: string[]
    openIconClass: string
    peekingValue: boolean
    peekTargetValue: string

    Global selector string to be used to determine the container to add the mouseleave listener to.

    storageKeyValue: string

    Local storage key to be used to backup the open state of this controller, this can be unique or shared across multiple controllers, it uses the controller identifier for the base.If not provided, the controller will not attempt to store the state to local storage.

    toggleTargets: HTMLButtonElement[]

    Toggle button element(s) to have their classes and aria attributes updated.

    blessings: (<T>(constructor: Constructor<T>) => any)[]
    classes: string[] = ...
    outlets: string[]
    targets: string[] = ...
    values: {
        closed: { default: boolean; type: BooleanConstructor };
        peeking: { default: boolean; type: BooleanConstructor };
        peekTarget: { default: string; type: StringConstructor };
        storageKey: { 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 localStorageKey(): string | null

      Prepare a unique local storage key for this controller joined with the store value, if not provided then assume we do not want to store the state of this controller.

      Returns string | null

    • get outlets(): OutletSet

      Returns OutletSet

    • get scope(): Scope

      Returns Scope

    • get stored(): boolean | undefined

      Get the stored (closed) state of this controller from local storage. If the key is not available, return undefined.

      Returns boolean | undefined

    • set stored(isClosed: boolean): void

      Set the stored state of this controller in the local storage. If the store key value is not set, do nothing.

      Parameters

      • isClosed: boolean

      Returns void

    • get targets(): TargetSet

      Returns TargetSet

    • get shouldLoad(): boolean

      Returns boolean

    Methods

    • Handles changes to the closed state,updating element classes and aria-expanded attributes accordingly.

      Note: This may not trigger when clicking the toggle button if the element is already open in peeking mode.

      Parameters

      • shouldClose: boolean
      • OptionalpreviouslyClosed: boolean

      Returns void

    • Connect the controller, setting up the peeking listener if required, and setting the initial state based on the stored value if available.

      Finally, dispatch the ready event to signal the controller is ready.

      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 open/closed state of the controller, accounting for the peeking state (visually open, but not 'fixed' as open). The updated closed value will be stored in local storage if available.

      Returns void

    • Set the inner icon on any toggles (in scope or out of scope).

      Parameters

      • isOpenIcon: boolean = false

      Returns void

    • Parameters

      • _identifier: string
      • _application: Application

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods