FastEditor

This is a very simple jQuery/CashDom plugin for editing content on a page, size of plugin 10kb without frameworks. It requires Jquery or CashDom, plugin is suitable for use with requirejs

Features:

• Dynamically binding controls to elements
• Attribute binding (e.g. date-id)
• Text editing
• Works on promises
• It supports nested initialization of plugins

Get started:

Just include it to your project

// With jquery
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="/fasteditor.min.js"></script>
 
// With CashDom
<script src="https://cdnjs.cloudflare.com/ajax/libs/cash/7.0.1/cash.min.js"></script>
<script src="/fasteditor.min.js"></script>
 
// As require js plugin
define(['jquery', 'fasteditor'], function($) {
    //...
});

To initialize, use

$el.fastEditor(options);

Options:

Option name	Default value	Description
attr	data-id	Returns the value of this attribute after the action (If the elements do not contain this attribute, then it will be created dynamically)
controlsPosition	top	The place where controls will be added (top - prepend, bottom - append)
editMode	true	activate edit mode? (It is required to specify a selector of elements that can be changed. See next parameter)
editElementSelector	.edit-it	selector of elements that can be changed
controls	[]	Array of controls (See below about controls)
successTimeout	500	Visual delay after successful action
elementPreHandler	(el, data, parentNode) => el	Handler of controls before adding to the page

About controls

Object of control should be as follows:

Key	Value
key	button
label	Remove
action	remove
class	remove-item-btn

Pseudo events and workers After plugin initialization need to access them as follows:

let plugin = $el.fastEditor({..});
let { workers, emitter } = plugin;

Workers and emitter are ordinary objects. The purpose of the emitter is to simply notify, but workers are action handlers and must return a promise. If a worker for the action was not created, then the action will be performed without errors and nothing will happen.

Examples:

let plugin = $('.item').fastEditor({
    editMode: true,
    controlsPosition: 'bottom',
    editElementSelector: '.edit-it',
    controls: [{
        tag: 'button',
        label: 'Remove',
        action: 'remove',
        class: 'remove-item-btn'
    }],
});
if (plugin) {
    let { workers, emitter } = plugin;
    workers.remove = function(data) {
        /*
        *  data of control contains the following:
        *       id (The attribute that is specified in the settings)
        *       node (Node of active control)
        *       parentNode (The element on which the plugin was initialized)
        */
        return new Promise((res, rej) => {
            // Pseudo request (Send new data to server)
            setTimeout(function() {
                let $el = $(data.parentNode);
                $el.fadeOut(300, () => {
                    $el.remove();
                });
                res();
            }, 1000);
        });
    }
    workers.edit = function(data) {
        /*
        *  data of edit control contains the following:
        *       id (The attribute that is specified in the settings)
        *       parentId (ID of the element on which the plugin was initialized)
        *       node (Node of active pseudo field)
        *       parentNode (The element on which the plugin was initialized)
        *       prevContent (Previous Content)
        *       content (Actual content)
        */
        return new Promise((res, rej) => {
            // Pseudo request (Send new data to server)
            setTimeout(function() {
                res();
            }, 1000);
        });
    }
    // Events
    emitter.all = function(event, data) {
        console.log(event + ' event is coming', data);
    }
    // For a specific event
    emitter.do = function(data) {
        console.log('Do event', data);
    }
}

Stage of action

Stages of the controls:

• After the action has been started, the loading stage begins, __fasteditor-loading class is assigned to the element.
• After receiving a response from the worker, __fasteditor-success class is assigned to the element, but for a period of time (See successTimeout option of plugin)
• After disabling the plugin, __fasteditor-disabled class is assigned to the element.

Stages of the editors:

• After an element is activated for editing, __fasteditor-editable class is assigned to the element.
• When an element loses focus and changes have been made, __fasteditor-loading class is assigned to the element.
• After receiving a response from the worker, __fasteditor-success class is assigned to the element, but for a period of time (See successTimeout option of plugin)

Methods

After initialization, the following methods are available:

Method	Desc
enable	Enable plugin
disable	Disable plugin
destroy	Safely destroy

Example for use:

$('.item').fastEditor('destroy');

Demo

The working demo version is in the package and at the link

Links

NPM - npm install fasteditor

If you have questions, contact me! Thks!

Author unbywyd