Wagtail client-side components
    Preparing search index...

    Class CountController

    Adds the ability for a controlled element to update the total count of selected elements within the provided container selector, defaults to body.

    <div data-controller="w-count">
      <span data-w-count-target="label"></span>
      <span class="error-message">An error</span>
    </div>

    <div data-controller="w-count" data-w-count-active-class="is-active" data-w-count-find-value=".items .item" data-w-count-min-value="3">
      <span data-w-count-target="label"></span>
      <span class="error-message">An error</span>
    </div>

    Hierarchy

    Index

    Constructors

    constructor

    Properties

    activeClass containerValue context findValue hasActiveClass hasLabelTarget hasTotalTarget labelsValue labelTarget minValue totalTarget totalValue blessings classes outlets targets values

    Accessors

    application classes data element identifier outlets scope targets shouldLoad

    Methods

    connect count disconnect dispatch getLabel initialize minValueChanged totalValueChanged afterLoad

    Constructors

    • Parameters

      • context: Context

      Returns CountController

    Properties

    activeClass: string
    containerValue: string

    selector string, used to determine the container/s to search through

    context: Context
    findValue: string

    selector string, used to find the elements to count within the container

    hasActiveClass: boolean
    hasLabelTarget: boolean
    hasTotalTarget: boolean
    labelsValue: string[]

    override pluralization strings, e.g. data-w-count-labels-value='["One item","Many items"]'

    labelTarget: HTMLElement
    minValue: number

    minimum value, anything equal or below will trigger blank labels in the UI

    totalTarget: HTMLElement
    totalValue: number

    total current count of found elements

    blessings: (<T>(constructor: Constructor<T>) => any)[]
    classes: string[] = ...
    outlets: string[]
    targets: string[] = ...
    values: {
        container: { default: string; type: StringConstructor };
        find: { default: string; type: StringConstructor };
        labels: { default: never[]; type: ArrayConstructor };
        min: { default: number; type: NumberConstructor };
        total: { default: number; type: NumberConstructor };
    } = ...

    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

    • Parameters

      • eventName: string
      • Optional__namedParameters: Partial<
            {
                bubbles: boolean;
                cancelable: boolean;
                detail: Object;
                prefix: string;
                target: Element
                | Window
                | Document;
            },
        >

      Returns CustomEvent<Object>

    • Returns void

    • Parameters

      • _identifier: string
      • _application: Application

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods