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?: SelectOptions[] | Promise<SelectOptions[]>;
    selectOptionsTextKey?: string;
    selectOptionsValueKey?: string;
    submit?: string;
    submitClasses?: string[];
    tooltip?: string;
    after?(original, event, value): boolean;
    before?(original, event): boolean;
    fun(value, original, event, input): Promise<string>;
    onCancel?(original, event, input): boolean | Promise<boolean>;
    onEdit?(original, event, input): boolean | Promise<boolean>;
}

Properties

cancel?: string

The text displayed on Cancel button.

Example

Abort
cancelClasses?: string[]

The classes added to Cancel button.

Example

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

Enabling debug mode will produce verbose output in the console.

Default

false
event?: EventType

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

Default

EventType.Click
focus?: boolean

Should the newly created input grab focus?

Default

true
formClasses?: string[]

The classes added to the form element.

Example

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

The classes added to the input element.

Example

['form-control']
inputType?: InputType

Define the type of the input element.

Default

InputType.Text
inputValue?: string

Allow setting a different value than the current element content.

listenNow?: boolean

Start listening immediatly or not.

Default

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?

Default

Action.Submit
onEscape?: Action

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

Default

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.

Default

true
returnedValueIsTrustedHtml?: boolean

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

Default

false
selectOptions?: SelectOptions[] | Promise<SelectOptions[]>

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

Example: Directly give the options to use

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

Example: Fetch the options with an HTTP request or any other function

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

Default

text
selectOptionsValueKey?: string

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

Default

value
submit?: string

The text on the Submit button.

Example

Save changes
submitClasses?: string[]

The classes added to the submit button.

Example: With bootstrap classes

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>

    Example: with a custom function

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

    Example

    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>

    Example

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