@deltablot/malle
    Preparing search index...

    Interface Options

    Configuration object for the Malle class.

    interface Options {
        cancel?: string;
        cancelClasses?: string[];
        debug?: boolean;
        event?: EventType;
        focus?: boolean;
        formClasses?: string[];
        inputClasses?: string[];
        inputType?: InputType;
        inputValue?: string;
        listenNow?: boolean;
        listenOn?: string;
        onBlur?: Action;
        onEnter?: Action;
        onEscape?: Action;
        placeholder?: string;
        requireDiff?: boolean;
        returnedValueIsTrustedHtml?: boolean;
        selectOptions?: Lazy<SelectOptions[]>;
        selectOptionsTextKey?: string;
        selectOptionsValueKey?: string;
        submit?: string;
        submitClasses?: string[];
        tooltip?: string;
        after?(original: HTMLElement, event: Event, value: string): boolean;
        before?(original: HTMLElement, event: Event): boolean;
        fun(
            value: string,
            original: HTMLElement,
            event: Event,
            input: HTMLInputElement | HTMLSelectElement,
        ): Promise<string>;
        onCancel?(
            original: HTMLElement,
            event: Event,
            input: HTMLInputElement | HTMLSelectElement,
        ): boolean | Promise<boolean>;
        onEdit?(
            original: HTMLElement,
            event: Event,
            input: HTMLInputElement | HTMLSelectElement,
        ): boolean | Promise<boolean>;
    }
    Index

    Properties

    cancel? cancelClasses? debug? event? focus? formClasses? inputClasses? inputType? inputValue? listenNow? listenOn? onBlur? onEnter? onEscape? placeholder? requireDiff? returnedValueIsTrustedHtml? selectOptions? selectOptionsTextKey? selectOptionsValueKey? submit? submitClasses? tooltip?

    Methods

    after? before? fun onCancel? onEdit?

    Properties

    cancel?: string

    The text displayed on Cancel button.

    Abort
    cancelClasses?: string[]

    The classes added to Cancel button.

    ['btn', 'btn-secondary']
    debug?: boolean

    Enabling debug mode will produce verbose output in the console.

    false
    event?: EventType

    This is where you define the type of event that will trigger malle.

    EventType.Click
    focus?: boolean

    Should the newly created input grab focus?

    true
    formClasses?: string[]

    The classes added to the form element.

    ['d-inline-flex']
    inputClasses?: string[]

    The classes added to the input element.

    ['form-control']
    inputType?: InputType

    Define the type of the input element.

    InputType.Text
    inputValue?: string

    Allow setting a different value than the current element content.

    listenNow?: boolean

    Start listening immediatly or not.

    false
    listenOn?: string

    HTML selector to target malleable elements on the page.

    onBlur?: Action

    What Action should be taken when focus of the input is lost.

    onEnter?: Action

    What Action should be taken when the Enter key is pressed?

    Action.Submit
    onEscape?: Action

    What Action should be taken when the Escape key is pressed?

    Action.Cancel
    placeholder?: string

    A text that is shown on empty input.

    requireDiff?: boolean

    Do nothing if new value is the same as the old value.

    true
    returnedValueIsTrustedHtml?: boolean

    Use innerHTML instead of innerText (only use if the return value is trusted HTML).

    false
    selectOptions?: Lazy<SelectOptions[]>

    An array of options for InputType.Select. Can also be a Promise and fetched asynchronously.

    selectOptions: [
      { value: '1', text: 'Rivoli' },
      { value: '2', text: 'Austerlitz' },
      { value: '3', text: 'Marengo', selected: true },
    ],

    // Change the keys used to lookup value and text
    selectOptionsValueKey: 'id',
    selectOptionsTextKey: 'title',
    // this promises to return an Array with objects that have the keys "id" and "title"
    selectOptions: Something.getOptions(),
    selectOptionsTextKey?: string

    What is the name of the key to use to lookup the option text in the selectOptions array?

    text
    selectOptionsValueKey?: string

    What is the name of the key to use to lookup the values in the selectOptions array?

    value
    submit?: string

    The text on the Submit button.

    Save changes
    submitClasses?: string[]

    The classes added to the submit button.

    submitClasses: ['btn', 'btn-primary', 'mt-2'],
    tooltip?: string

    The text added on hover of the malleable element. Uses the title attribute.

    Methods

    • Function to execute after all the other events.

      Parameters

      • original: HTMLElement
      • event: Event
      • value: string

      Returns boolean

    • This function will be called before anything else is done, once the trigger event has been fired. If it returns something else than true, the edition will be canceled.

      Parameters

      • original: HTMLElement
      • event: Event

      Returns boolean

    • This is the main and only mandatory option parameter. It is the user function that is called when the Submit action happens.

      Parameters

      • value: string
      • original: HTMLElement
      • event: Event
      • input: HTMLInputElement | HTMLSelectElement

      Returns Promise<string>

      // this is the user function that will process the new value
      // typically this will POST to some endpoint and get some json back
      // it receives the event
      const myCustomFunction = (value, orig) => {
        console.log(`New text: ${value}`);
        // do something with that value, like POSTing it somewhere
        return new Promise(resolve => resolve(value));
      };

      new Malle({
        fun: myCustomFunction,
      }).listen();

    • A function that runs when a Cancel action is performed. Must return true or the input is not reverted to the original element.

      Parameters

      • original: HTMLElement
      • event: Event
      • input: HTMLInputElement | HTMLSelectElement

      Returns boolean | Promise<boolean>

      onCancel: (original, event, input) => {
        console.log('a cancel action has been detected');
        return true;
      },

    • This function runs right after the form is created. Its return value has no impact.

      Parameters

      • original: HTMLElement
      • event: Event
      • input: HTMLInputElement | HTMLSelectElement

      Returns boolean | Promise<boolean>

      onEdit: (original, event, input) => {
        console.log('this will run after the input is present on the page');
        return true;
      },

    Settings

    Member Visibility

    On This Page

    Properties
    Methods