API Docs for:
Show:

Editable Class

Defined in: editable.js:109
Module: editable

A widget that makes a node's content editable. The following is sample usage.

var editable = new Y.Editable({
    node       : "#foo",     // The context node.
    inputType  : "textarea", // The input field type.
    postUrl    : "api.php",  // The entrypoint of your request.
    postConfig : {           // The Y.io config.
        context : editable,
        method : "POST",
        form : {
            id: Y.one("form")
        },
        on: {
          "success": function (id, o, args) {
          }
        }
    },
    postValidator : function (response) { // The easier way without using postConfig attribute.
        // Define your own validator here.
        // The parameter is Y.io response object.
        // Return true if the response is successful.

    },
    validateRules: "required|max_lenght[100]|min_length[3]" // The predefined validation rules.
});

Constructor

Editable

(
  • config
)

Defined in editable.js:109

Parameters:

  • config Object

    attribute object

Methods

_initPanel

() private

Defined in editable.js:60

Render global panel.

_setCursorToEnd

()

Defined in editable.js:38

Move the cursor to the end of text.

_uiSetNode

(
  • node
)
private

Defined in editable.js:627

Render the node that triggers editable panel.

Parameters:

  • node Y.Node

    The clicked node.

_uiSetPosition

(
  • inputNode
  • panelNode
  • clickNode
)

Defined in editable.js:658

Set the position for panel editor.

Parameters:

  • inputNode Y.Node

    The input node.

  • panelNode Y.Node

    The panel node.

  • clickNode Y.Node

    The editable node.

destructor

() public

Defined in editable.js:687

It will be invoked after user calls destroy().

hide

() public

Defined in editable.js:700

Hide the panel.

initializer

() public

Defined in editable.js:739

It will be invoked after user instanitate a instance.

showMessage

(
  • message
  • type
)

Defined in editable.js:713

Display error message.

Parameters:

  • message String

    The error message you want to display.

  • type String

    The error message type, default is "error".

sync

() public

Defined in editable.js:725

Make every editable nodes to have correct UI. Note it might cause performance issue if you have too many editable nodes.

updateText

(
  • text
  • needEscape
)
public

Defined in editable.js:781

Update current text.

Parameters:

  • text String

    The new text.

  • needEscape Boolean

    Whether the text should be escape. The default value is true.

Properties

ATTRS

Unknown

Defined in editable.js:151

NAME

Unknown

Defined in editable.js:146

Attributes

activeValue

String

Defined in editable.js:155

The actual value of the editable. Used for comparing if value has changed.

emptyDefault

String

Defined in editable.js:181

The default empty string if the HTML is not defined.

Default: "Please input your text..."

errorMessage

String

Defined in editable.js:195

The global error message which shows when validating fails.

Default: "Something wrong, please try again."

eventType

String

Defined in editable.js:167

The event type to trigger editor. Currently it only supports "click" event.

Default: "click"

formNode

Y.Node

Defined in editable.js:208

The panel form node reference. You can use it in your customized Y.io configuration.

inputValue

Defined in editable.js:231

The current input value by user.

node

Y.Node | String | HTML Element

Defined in editable.js:239

The context node that editable takes effect within.

Default: "body"

postConfig

Object

Defined in editable.js:269

The configuration for Y.io. If you set this, postVaidator won't take effect. You must handle error message and panel visibility by yourself.

postData

String

Defined in editable.js:249

The query string as POST data. ex. crumbname=1234&crumbvalue=5678

postField

String

Defined in editable.js:294

The input field name.

postUrl

String

Defined in editable.js:259

The API entrypoint URL. Note it must be in same domain with current page.

postValidator

Function

Defined in editable.js:281

The server response value must pass this validator to update editable value.

selector

String

Defined in editable.js:303

The CSS selector of editable nodes.

tooltip

String

Defined in editable.js:312

The tooltip which shows when mouse hover the editable nodes.

type

Defined in editable.js:218

The form element type for user to input. It only supports "text" (text field) and "textarea".

Default: "input"

validateRule

String

Defined in editable.js:329

The form validation rules. Currently you can only use built-in validators, including "required", "max-lengh[n]", "min-length[n]", and "filename". You can use multiple validators by connecting with "|" character. E.g. "required|filename".

Events

_documentClick

private

Defined in editable.js:86

Hide panel when user clicks outside the panel.

_handleClick

private

Defined in editable.js:354

Move the panel to correct position and show.

Event Payload:

  • e Y.Event

    The YUI Event instance.

_handleHover

private

Defined in editable.js:431

Set title as tooltip.

Event Payload:

  • e Y.Event

    The YUI Event instance.

_handleSubmit

private

Defined in editable.js:455

Handle form submission.

Event Payload:

  • e Y.Event

    The Y.Event instance.

lock

public

Defined in editable.js:600

All buttons in panel footer will be disabled. It prevents duplicate form submission.

unlock

public

Defined in editable.js:614

Remove disable attribute for panel footer buttons.