Wagtail client-side components
    Preparing search index...

    Class CloneController

    Adds the ability for a controlled element to pick an element from a template and then clone that element, adding it to the container. Additionally, it will allow for clearing all previously added elements.

    Example: - Using with the w-messages identifier

    <div
      data-controller="w-messages"
      data-action="w-messages:add@document->w-messages#add"
      data-w-messages-added-class="new"
      data-w-messages-show-class="appear"
    >
      <ul data-w-messages-target="container"></ul>
      <template data-w-messages-target="template">
        <li data-message-status="error-or-success"><span></span></li>
      </template>
    </div>

    Example: - Using to show a temporary element with auto-clearing

    <div
     data-controller="w-clone"
     data-action="readystatechange@document->w-clone#add:once"
     data-w-clone-auto-clear-value="5_000"
    >
      <div data-w-clone-target="container"></div>
        <template data-w-clone-target="template">
          <p>Page has loaded, this will be removed in 5 seconds.</p>
        </template>
      </div>
    </div>

    Hierarchy

    Index

    Constructors

    constructor

    Properties

    addedClasses autoClearValue clearDelayValue containerTarget context hideClasses isClearing? showClasses showDelayValue templateTarget templateTargets blessings classes outlets targets values

    Accessors

    application classes data element identifier outlets scope targets shouldLoad

    Methods

    add clear connect disconnect dispatch getTemplateContent initialize afterLoad

    Constructors

    • Parameters

      • context: Context

      Returns CloneController

    Properties

    addedClasses: string[]

    Classes to set on the controlled element after the first usage of add.

    autoClearValue: number

    Auto clears after adding with the declared duration, in milliseconds. If zero or below, will not be used.

    clearDelayValue: number

    Delay, in milliseconds, after adjusting classes before the content should be cleared.

    containerTarget: HTMLElement

    Target element that will be used to insert the cloned elements.

    context: Context
    hideClasses: string[]

    Classes to set on the controlled element when clearing content or removed when adding content.

    isClearing?: boolean

    Internal tracking of whether a clearing delay is in progress.

    showClasses: string[]

    Classes to set on the controlled element when adding content or removed when clearing content.

    showDelayValue: number

    Delay, in milliseconds, before adjusting classes on show.

    templateTarget: HTMLTemplateElement
    templateTargets: HTMLTemplateElement[]
    blessings: (<T>(constructor: Constructor<T>) => any)[]
    classes: string[] = ...
    outlets: string[]
    targets: string[] = ...
    values: {
        autoClear: { default: number; type: NumberConstructor };
        clearDelay: { default: number; type: NumberConstructor };
        showDelay: { 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

    • Adds a new element to the container based on the type argument provided in the event or action params objects. Optionally clearing the container first with support for added custom text inside the added element.

      Parameters

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

      Returns void

    • If called with an event (or any truthy argument) reset the classes for show/hide so the this method can be used intentionally via actions allowing clearing after animations have run.

      Parameters

      Returns void

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

    • If no type provided, return the first template target, otherwise try to find a matching target, finally fall back on the first template target if nothing is found.

      Parameters

      • Optionaltype: null | string

      Returns null | HTMLElement

    • Returns void

    • Parameters

      • _identifier: string
      • _application: Application

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods