Editable

Page history last edited by Rafael Xavier 5 months, 2 weeks ago

type: widget

release: 0.0

status: in development

documentation: N/A

demo: http://view.jqueryui.com/editable/demos/editable/index.html

TODOs

Implement the following $.ui.editors: spinner, mask, timepicker.
Fix default demo to not flicker/move around on mouseover.
Options:

handle editor combos, e.g. making a textarea an autocomplete

Methods/Events:

implement start event
demo using save event for validation
demo using start event to save or cancel on blur

write unit tests

1 - Description:

This plugin allows for a common Web 2.0 interaction pattern where a user clicks (multiple other variations exist; double click, presses button or double clicks or pressed a link/button) on a title or block of text and the content is transformed into an editable form element. The changes can be saved via AJAX on a range of events: keyUp, change, Blur, or when a Save button is pressed. A Cancel button or link is also an optional element to undo the changes.

When activating an element, the widget can either turn the specific element, a set group of elements (grouped by div or fieldset[?]) or the entire page's elements into form elements.

Save and Cancel buttons can function for every individual element, for a set group of elements (grouped by div or fieldset[?]) or the entire page's elements. The location for the Save and Cancel buttons must be defined by a div or a span. The widget must take notice if the user tries to close the browser window or tab before saving the edited content.

Jeditable looks really good and full featured:

http://www.appelsiini.net/projects/jeditable

2 - Visual Design:

(Initial wireframe mockup, followed by more detailed designs of the various configurations, options and states.)

3 - Functional Specifications/Requirements:

Options

editor (String, default: 'text'; or Object)

what type of editor to use, must be present on $.ui.editor.editors, throws an error otherwise
use a String, eg. "spinner", for no options
use an Object, eg. { spinner: { min: 4, max: 20 } }, to pass options to the chosen editor

event (String, default: 'click')

listener event to start editing

buttons (Object)

Holds save and cancel buttons definitions, see below. If set to null, both save and cancel buttons are not displayed.
save (Object, default: {label: 'Save', icons: {primary: 'ui-icon-disk'}, text: false})

save button configuration. If set to null, the save button is not displayed. Otherwise, it's passed to its button widget.

cancel (Object, default: {label: 'Cancel', icons: {primary: 'ui-icon-closethick'}, text: false})

cancel button configuration. If set to null, the cancel button is not displayed. Otherwise, it's passed to its button widget.

placeholder (String, default: 'Click to edit')

text to be used on the show-mode when the widget's value is empty.

Methods

start

manually start editing

save

manually stop editing, changing the value

cancel

manually stop editing, throwing away any changes

Events

start

triggered when starting to edit

save

triggered when editing stops by form submission, whether changes occur or not
can be used to validate input
ui.value contains the new value
can be cancelled, keep the widget in edit mode, e.g. for input validation

cancel

triggered when editing stops, without actually changing anything

change

triggered after save event, only if value changed
ui.value contains the new value

Support

$.ui.editable.editors

text: Converts the inline text into an editable input form field.
textarea: Converts the paragraph into an editable textarea form field.
autocomplete: Converts the inline input into an autocomplete widget.
select: Converts the inline input into a select form field

editor: { select: { source: inputArray } }
where options is an array of strings or array of objects with "value" and "label" properties (similar to autocomplete's dataformat)
["slow", "fast", "really fast"]
[{ value: 1, label: "slow" }, { value: 2, label: "fast" }, { value: 3, label: "really fast" }]

selectmenu: Converts to select, then applies selectmenu widget.

editor: { selectmenu: { source: arrayForSelectEditor, [other selectmenu options] } }

spinner: Converts the inline input into a spinner widget.
mask: Converts the inline input into a mask widget.
timepicker: Converts the inline input into a timepicker widget.
datepicker: Converts the inline input into a datapicker widget.

Not supported

Input validation, use save event to perform validation

4 - Markup & Style:

4.1 Initial markup examples

(Pre-enhanced HTML markup structure that will be transformed into the final widget. There may be multiple possible HTML markup options per widget: for example, for a slider, radiobuttons, inputs or selects could all be used. )

4.2 Recommended transformed HTML markup

(The HTML markup structure and classes that will be used by the scripts in the enhanced version)

4.3 Accessibility recommendation

(Detailed recommendations for ARIA, HTML markup, CSS and javascript that will contribute to universal access and full section 508 accessibility for screen readers, mobile devices and any other devices)