README

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' and winare optional. If they are not passed toeditize, it will use the global documentandwindow`.
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.

Usage no npm install needed!