editize

This browser module provides a function that makes a DOM element editable via the contentEditable attribute and adds some event handlers and styles.

editize(listItemElement)
  .editingStateClass('editing-list-item')
  .onStartEdit(changePageBackgroundColor)
  .onEndEdit(restorePageBackgroundColor);

Specification

If editize is called on a DOM element el, a document doc, and window win, editize will return an editized object.

• When el is clicked, it will get the contentEditable attribute.

• When el is clicked, focus will be called on it, which should show the cursor.

• When el is clicked, the text in it will be highlighted by changing win's selection.

• When a specified key is hit or a blur event is triggered, contentEditable will be removed.

• doc' andwinare optional. If they are not passed toeditize, it will use the globaldocumentandwindow`.

• The editized object will have the editingStateClass, onStartEdit, and onEndEdit methods.

  • Calling editingStateClass with a string will cause the start of editing to add that class to el.
  • Calling onStartEdit with a function will set the "start edit" event handler to that function. When the user starts to edit the element, that function will be called.
    • Editing starts as soon as the user clicks on el.
  • Calling onEndEdit with a function will set the "end edit" event handler to that function. When the finishes editing the element, that function will be called.
  • Calling addQuitKey with a keyCode will set
    • Editing ends when the user hits an ending key or a blur event occurs.

Installation

npm install editize

Usage

Include <script src="editize.js"> in your html file. Then, in your JavaScript file:

- Obtain the DOM element you want to be editized.
- Call `editize` on it.
- Set any properties you want on the editized object returned by `editize`.

Here's a working example.

Tests

Run tests with make test.

License

MIT.