Wagtail client-side components
    Preparing search index...

    Class DrilldownController

    Drilldown menu interaction combined with URL-driven state management for listing filters.

    <section>
      <div data-controller="w-drilldown" data-w-drilldown-count-attr-value="data-w-active-filter-id">
        <div data-w-drilldown-target="menu">
          <h2>Filter by</h2>
          <button type="button" aria-expanded="false" aria-controls="drilldown-field-0" data-w-drilldown-target="toggle" data-action="click->w-drilldown#open">Field 1</button>
          <button type="button" aria-expanded="false" aria-controls="drilldown-field-1" data-w-drilldown-target="toggle" data-action="click->w-drilldown#open">Field 2</button>
        </div>
        <div id="drilldown-field-0" hidden tabIndex="-1">
          <p>...items for field 1</p>
          <button type="button" data-action="click->w-drilldown#close">Back</button>
        </div>
        <div id="drilldown-field-1" hidden tabIndex="-1">
          <p>...items for field 2</p>
          <button type="button" data-action="click->w-drilldown#close">Back</button>
        </div>
      </div>
    </section>

    Hierarchy

    Index

    Constructors

    constructor

    Properties

    activeSubmenuValue context countAttrValue countTargets hasWDropdownOutlet menuTarget toggleTargets wActionOutlets wDropdownOutlet blessings outlets targets values

    Accessors

    application classes data element identifier outlets scope targets shouldLoad

    Methods

    activeSubmenuValueChanged close connect countTargetConnected delayedClose disconnect dispatch initialize open preventOutletClickaway toggle updateCount wActionOutletConnected wActionOutletDisconnected afterLoad

    Constructors

    • Parameters

      • context: Context

      Returns DrilldownController

    Properties

    activeSubmenuValue: string

    Currently active submenu id.

    context: Context
    countAttrValue: string

    Attribute used to count items.

    countTargets: HTMLElement[]

    Targets for displaying item counts.

    hasWDropdownOutlet: boolean

    Indicates if w-dropdown outlet is present.

    menuTarget: HTMLElement

    Main menu target element.

    toggleTargets: HTMLButtonElement[]

    Targets for submenu toggle buttons.

    wActionOutlets: ActionController[]

    Outlets for action controllers.

    wDropdownOutlet: DropdownController

    Outlet for the dropdown controller.

    blessings: (<T>(constructor: Constructor<T>) => any)[]
    outlets: string[] = ...
    targets: string[] = ...
    values: {
        activeSubmenu: { default: string; type: StringConstructor };
        countAttr: { 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

    • Derive the component’s targets based on the state, so the drilldown state can be controlled externally more easily.

      Parameters

      • activeSubmenu: string
      • OptionalprevActiveSubmenu: string

      Returns void

    • Delay closing the submenu to allow the top-level menu to fade out first. Useful for resetting the state when the user clicks outside the menu. This can be used as an action for the w-dropdown:hidden event of the menu, e.g. data-action="w-dropdown:hidden->w-drilldown#delayedClose".

      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

    • Prevent clicks on the w-action outlets from closing the dropdown. Usage: data-action="w-dropdown:clickaway->w-drilldown#preventOutletClickaway"

      Parameters

      Returns void

    • Update the count of items in the menu. This is done by counting the number of elements with the data attribute specified by the countAttrValue value that have the same value as the data-count-name attribute of the countTarget. If the countTarget does not have a data-count-name attribute, then all elements with the data attribute specified by the countAttrValue value are counted.

      Returns void

    • Parameters

      • _identifier: string
      • _application: Application

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods