Wagtail client-side components
    Preparing search index...

    Class BulkController

    Adds the ability to collectively toggle a set of (non-disabled) checkboxes.

    <div data-controller="w-bulk">
      <input type="checkbox" data-action="w-bulk#toggleAll" data-w-bulk-target="all">
      <div>
        <input type="checkbox" data-action="w-bulk#toggle" data-w-bulk-target="item" disabled>
        <input type="checkbox" data-action="w-bulk#toggle" data-w-bulk-target="item">
        <input type="checkbox" data-action="w-bulk#toggle" data-w-bulk-target="item">
      </div>
      <button type="button" data-action="w-bulk#toggleAll" data-w-bulk-force-param="false">Clear all</button>
      <button type="button" data-action="w-bulk#toggleAll" data-w-bulk-force-param="true">Select all</button>
    </div>

    @example - Showing and hiding an actions container
    ```html
    <div data-controller="w-bulk" data-w-bulk-action-inactive-class="w-invisible">
      <div class="w-invisible" data-w-bulk-target="action" id="inner-actions">
        <button type="button">Some action</button>
      </div>
      <input data-action="w-bulk#toggleAll" data-w-bulk-target="all" type="checkbox"/>
      <div id="checkboxes">
        <input data-action="w-bulk#toggle" data-w-bulk-target="item" disabled="" type="checkbox" />
        <input data-action="w-bulk#toggle" data-w-bulk-target="item" type="checkbox"/>
        <input data-action="w-bulk#toggle" data-w-bulk-target="item" type="checkbox" />
      </div>
    </div>

    @example - Using groups to allow toggles to be controlled separately or together

    <table data-controller="w-bulk">
      <thead>
        <tr>
          <th>Name</th>
          <th>Add</th>
          <th>Change</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Item 1</td>
          <td><input data-action="w-bulk#toggle" data-w-bulk-target="item" data-w-bulk-group-param="add" type="checkbox"/></td>
          <td><input data-action="w-bulk#toggle" data-w-bulk-target="item" data-w-bulk-group-param="change" type="checkbox"/></td>
        </tr>
        <tr>
          <td>Item 2</td>
          <td><input data-action="w-bulk#toggle" data-w-bulk-target="item" data-w-bulk-group-param="add" type="checkbox"/></td>
          <td><input data-action="w-bulk#toggle" data-w-bulk-target="item" data-w-bulk-group-param="change" type="checkbox"/></td>
        </tr>
      </tbody>
      <tfoot>
        <th scope="row">
          Check all (Add & Change)
          <input data-action="w-bulk#toggleAll" data-w-bulk-target="all" type="checkbox"/>
        </th>
        <td>
          Check all (Add)
          <input data-action="w-bulk#toggleAll" data-w-bulk-target="all" data-w-bulk-group-param="add" type="checkbox"/>
        </td>
        <td>
          Check all (Change)
          <input data-action="w-bulk#toggleAll" data-w-bulk-target="all" data-w-bulk-group-param="change" type="checkbox"/>
        </td>
       </tfoot>
    </table>

    Hierarchy

    Index

    Constructors

    constructor

    Properties

    actionInactiveClasses actionTargets allTargets context itemTargets lastChanged? shiftActive? blessings classes outlets targets values

    Accessors

    application classes data element identifier outlets scope targets shouldLoad

    Methods

    connect disconnect dispatch getValidTargets handleShiftKey initialize toggle toggleAll afterLoad

    Constructors

    • Parameters

      • context: Context

      Returns BulkController

    Properties

    actionInactiveClasses: string[]

    Classes to remove on the actions target if any actions are checked

    actionTargets: HTMLElement[]

    Target(s) that will have the actionInactive classes removed if any actions are checked

    allTargets: HTMLInputElement[]

    All select-all checkbox targets

    context: Context
    itemTargets: HTMLInputElement[]

    All item checkbox targets

    lastChanged?: HTMLElement | null

    Internal tracking of last clicked for shift+click behavior

    shiftActive?: boolean

    Internal tracking of whether the shift key is active for multiple selection

    blessings: (<T>(constructor: Constructor<T>) => any)[]
    classes: string[] = ...
    outlets: string[]
    targets: string[] = ...
    values: ValueDefinitionMap

    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

    • On creation, ensure that the select all checkboxes are in sync. Set up the event listeners for shift+click behavior.

      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

    • When an item is toggled, ensure the select all targets are kept in sync. Update the classes on the action targets to reflect the current state. If the shift key is pressed, toggle all the items between the last clicked item and the current item.

      Parameters

      • Optionalevent: CustomEvent<ToggleOptions> & { params?: ToggleOptions }

      Returns void

    • Toggles all item checkboxes, can be used to force check or uncheck all. If the event used to trigger this method does not have a suitable target, the first allTarget will be used to determine the current checked value.

      Parameters

      • event: CustomEvent<ToggleAllOptions> & { params?: ToggleAllOptions }

      Returns void

    • Parameters

      • _identifier: string
      • _application: Application

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods