editize

    0.2.1 • Public • Published

    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.

    Keywords

    Install

    npm i editize

    DownloadsWeekly Downloads

    2

    Version

    0.2.1

    License

    MIT

    Last publish

    Collaborators

    • jimkang