Wagtail client-side components
    Preparing search index...

    Class CleanController

    Adds ability to clean values of an input element with methods such as slugify or urlify.

    Example: - Using the slugify method

    <input type="text" name="slug" data-controller="w-clean" data-action="blur->w-clean#slugify" />
    <input type="text" name="slug-with-trim" data-controller="w-clean" data-action="blur->w-clean#slugify" data-w-clean-trim-value="true" />

    Example: - Using the urlify method (registered as w-slug)

    <input type="text" name="url-path" data-controller="w-slug" data-action="change->w-slug#urlify" />
    <input type="text" name="url-path-with-unicode" data-controller="w-slug" data-w-slug-allow-unicode="true" data-action="change->w-slug#urlify" />

    Hierarchy

    Index

    Constructors

    constructor

    Properties

    allowUnicodeValue context trimValue blessings outlets targets values

    Accessors

    application classes data element identifier outlets scope targets shouldLoad

    Methods

    compare compareValues connect disconnect dispatch identity initialize prepareValue slugify urlify afterLoad

    Events

    applyUpdate

    Constructors

    • Parameters

      • context: Context

      Returns CleanController

    Properties

    allowUnicodeValue: boolean

    If true, unicode values in the cleaned values will be allowed. Otherwise unicode values will try to be transliterated.

    WAGTAIL_ALLOW_UNICODE_SLUGS in settings

    context: Context
    trimValue: boolean

    If true, value will be trimmed in all clean methods before being processed by that method.

    blessings: (<T>(constructor: Constructor<T>) => any)[]
    outlets: string[]
    targets: string[]
    values: {
        allowUnicode: { default: boolean; type: BooleanConstructor };
        trim: { default: boolean; type: BooleanConstructor };
    } = ...

    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

    • Allow for a comparison value to be provided so that a dispatched event can be prevented. This provides a way for other events to interact with this controller to block further updates if a value is not in sync. By default it will compare to the slugify method, this can be overridden by providing either a Stimulus param value on the element or the event's detail.

      Parameters

      • event: CustomEvent<{ compareAs?: Actions; value: string }> & {
            params?: { compareAs?: Actions };
        }

      Returns boolean

    • Compares the provided strings, ensuring the values are the same.

      Parameters

      • ...values: string[]

      Returns boolean

    • 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 the element's value as is, without any modifications. Useful for identity fields or when no cleaning is required but the event is needed or comparison is required to always pass.

      Returns string

    • Returns void

    • Prepares the value before being processed by an action method.

      Parameters

      • sourceValue: string = ''

      Returns string

    • Basic slugify of a string, updates the controlled element's value or can be used to simply return the transformed value. If a custom event with detail.value is provided, that value will be used instead of the field's value.

      Parameters

      • event: CustomEvent<{ value: string }> | { detail: { value: string } }
      • __namedParameters: { ignoreUpdate?: boolean } = {}

      Returns string

    • Advanced slugify of a string, updates the controlled element's value or can be used to simply return the transformed value.

      The urlify (Django port) function performs extra processing on the string & is more suitable for creating a slug from the title, rather than sanitizing manually. If the urlify util returns an empty string it will fall back to the slugify method.

      If a custom event with detail.value is provided, that value will be used instead of the field's value.

      Parameters

      • event: CustomEvent<{ value: string }> | { detail: { value: string } }
      • __namedParameters: { ignoreUpdate?: boolean } = {}

      Returns string

    • Parameters

      • _identifier: string
      • _application: Application

      Returns void

    Events

    • Writes the new value to the element & dispatches the applied event.

      Parameters

      • action: Actions
      • cleanValue: string
      • OptionalsourceValue: string

      Returns void

      CleanController#applied - If a change applied to the input value, this event is dispatched.

      CleanController#applied

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors
    Methods
    Events