Author: | deltablot |
---|---|
Views Total: | 34 views |
Official Page: | Go to website |
Last Update: | November 20, 2023 |
License: | MIT |
Preview:

Description:
Mmalle is a robust edit in place JavaScript library that transforms any text element into an editable field for your edits.
Can be useful in scenarios like content management systems, where quick edits are frequent, or in interactive educational platforms where users might need to fill in or change text on the go.
How to use it:
1. Install and import the Mmalle components.
# Yarn $ yarn @deltablot/malle # NPM $ npm i @deltablot/malle
// Minimal import { Malle } from '@deltablot/malle'; // all modules import { InputType, EventType, Action, SelectOptions, Options, Malle } from 'malle';
2. Add the data-malleable='true'
attribute to your text element which should be editable.
<div data-malleable='true'> Text Here </div>
3. Create a new Malle instance and use the fun
function to process the updated value after editing. This usually involves making an API call to persist the changes on the server. The function receives the new value, original element, event, and input element as arguments.
const malle = new Malle({ fun: (value, original, event, input) => { console.log(`New text: ${value}`); console.log(`Original element:`); console.log(original); // your function for POSTing the new value return myFunctionReturingAPromiseString(); }, }).listen();
4. All possible options and events.
const malle = new Malle({ // customize the cancel button cancel: 'Cancel', cancelClasses: ['btn', 'btn-danger'], // customize the submit button submit: 'OK', submitClasses: ['btn', 'btn-primary'], // additional form class(es) formClasses: ['col-md-12'], // additional input class(es) inputClasses: ['form-control', 'mb-2'], // set focus on the input focus: true, // enable debug mode debug: true, // trigger event: // 'click', 'mouseenter', 'mouseover' event: 'click', // input type: // 'email', 'number', 'select' // 'text', 'textarea', 'url' inputType: 'text', // options for select selectOptions: { value: '', text: '', selected: false, }, // start listening on events after init instead of calling the listen() method listenNow: false, // listening on this element listenOn: '[data-malleable='true']', // content to display on hover tooltip: 'Click this to edit', // action to take when the user clicks outside the input // 'submit', 'cancel', 'ignore' onBlur: 'submit', // action to take when the user presses Enter key // 'submit', 'cancel', 'ignore' onEnter: 'submit', // action to take when the user presses Escape key onEscape: 'cancel', // set to false to always call fun regardless of input. requireDiff: true, // if true, innerHTML is used instead of innerText with the returned value from the server returnedValueIsTrustedHtml: false, // events onEdit: (original, event, input) => { // ... }, before: (original, event) => { // ... }, after: (original, event) => { // ... }, }).listen();