Wagtail client-side components
    Preparing search index...

    Class CleanController

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

    <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" />

    <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" />
    <input type="text" name="url-path-with-locale" data-controller="w-slug" data-w-slug-locale="uk-UK" data-action="blur->w-slug#urlify" />

    <input type="text" name="no-spaces-or-digits" data-controller="w-clean" data-w-clean-formatters='[["\\s+", ""], ["[^\d-]", ""]]' data-action="blur->w-clean#format" />
    <input type="text" name="no-yelling" data-controller="w-clean" data-w-clean-formatters='[["!", ""]]' data-action="blur->w-clean#format" />

    Hierarchy

    Index

    Constructors

    constructor

    Properties

    allowUnicodeValue context defaultRegexFlags formattersValue localeValue regexCache trimValue undeterminedLocale blessings outlets targets values

    Accessors

    application classes data element identifier outlets scope targets shouldLoad

    Methods

    compare compareValues connect disconnect dispatch format formattersValueChanged getRegex identity initialize localeValueChanged 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
    defaultRegexFlags: string = 'gu'

    Align with the default flags that can be assumed when pulling from Python.

    formattersValue: FormatterEntry[]

    An array of formatter entries with a regex (pattern or pattern & flags array) and an optional replace value.

    localeValue: string

    Locale code, used to provide a more specific cleaned value.

    regexCache: { [key: string]: RegExp } = {}

    Cache the compiled regex for performance.

    trimValue: boolean

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

    undeterminedLocale: string = 'und'

    und (undetermined) locale as per ISO 639-2

    blessings: (<T>(constructor: Constructor<T>) => any)[]
    outlets: string[]
    targets: string[]
    values: {
        allowUnicode: { default: boolean; type: BooleanConstructor };
        formatters: { default: never[]; type: ArrayConstructor };
        locale: { default: string; type: StringConstructor };
        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>

    • Formats the source value based on supplied formatters and formatting options. Runs as part of the prepare method on methods called (when used as Stimulus actions) or can be used directly as a standalone action.

      Parameters

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

      Returns any

    • Run the format method when the formatters change to ensure that the regex cache is populated with the latest values and that the formatters are valid.

      Parameters

      • Optionalformatters: FormatterEntry[]

      Returns void

    • 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

    • If the locale is not provided, attempt to find the most suitable target locale:

      1. Use the active content locale if available (for translations)
      2. Fall back to und (undetermined) as per ISO 639-2

      This only makes a difference when using the urlify method and where there are overlapping characters that need to be downcoded but are not in the desired order by default.

      Parameters

      • currentValue: string

      Returns void

    • Prepares the value before being processed by an action method. If runFormat is true, it will run the format method on the value.

      Parameters

      • sourceValue: string = ''
      • __namedParameters: { runFormat?: boolean } = {}

      Returns any

    • 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; runFormat?: 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; runFormat?: 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