j-Edit

The component enables contenteditable attribute for elements with edit or edit2 classes.

• singleton
• put the component under <body element like j-Directory or j-DatePicker

Good to know:

• each element with the edit class is possible to edit with a single click
• each element with the edit2 class is possible to edit with a double click

Configuration:

• dateformat {String} a default format for parsing dates (default: yyyy-MM-dd)
• exec {String} optional, a default path to function(opt, accept(boolean/html_value_for_the_element))
• floating {Boolean} optional, can enables floating by default (default: false)
• minwidth {Number} optional, a min width
• offsetX {Number} optional, X offset
• offsetY {Number} optional, Y offset

---

data-edit attribute supports:

• required {Boolean} optional, enables "required" (default: false)
• type {String} optional, can be string (default), date, number, boolean, email, url, or html
• check {String} optional, a path to function(opt, el) must return boolean, it means Can the user edit that field?
• exec {String} optional, a path to function(opt, accept(boolean/html_value_for_the_element))
• format {String} optional, a format for date, default: yyyy-MM-dd
• maxlength {Number} a maxlength
• minvalue {Number} a min. value for number type (default: undefined)
• maxvalue {Number} a max. value for number type (default: undefined)
• bind {Boolean} if true rebinds data-bind on this element only (default: true)
• multiline {Boolean} optional, enables multiline + appends class editable-multiline (inline-block + width:100%) when it's editing (default: false)
• floating {Boolean/String} optional, enables floating window for the element (default: false, string can contain position or offset values)
• offsetX {Number} optional, additional X offset for the floating window
• offsetY {Number} optional, additional Y offset for the floating window
• offsetWidth {Number} optional, additional width for the floating window
• width {Number} optional, a fixed width for floating panel
• parent {String} optional, a selector for obtaining of offset (can contain parent or jQuery selector for .closest() method)
• selectall {Boolean} optional, selects all text
• cursor {String} optional, a cursor position beg or end (default)
• notify {String} optional, a path to function(opt) that will be notified after successful change
• prevent {Boolean} optional, executes .preventDefault() and .stopPropagation() in the click event
• align {String} optional, sets a valeu for the text-align property for the floating mode only
• focus {String} optional, a link to the function(opt, el) when it's focused
• blur {String} optional, a link to the function(opt, el) when it's blurred
• NEW: attr {String} optional, an data-{attr} name to get the unformatted value

Good to know:

• opt.set(value) can be used to assign a value

Use it with <ui-component name="edit">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

<ui-component name="edit"></ui-component>

<ui-plugin path="form" style="width:500px;padding:10px;border:1px solid #E0E0E0">

	<div class="row m">
		<div class="col-xs-3">
			Name:
		</div>
		<div class="col-xs-9">
			<ui-bind class="edit2 block" data-edit="required:1;floating:1" path="?.name" config="html" style="height:24px;background-color:#E0E0E0"></ui-bind>
		</div>
	</div>
	<div class="row m">
		<div class="col-xs-3">
			Email:
		</div>
		<div class="col-xs-9">
			<div class="edit" data-edit="required:1;type:email;exec:save_email" style="height:24px;background-color:#E0E0E0">@</div>
		</div>
	</div>
	<div class="row m">
		<div class="col-xs-3">
			HTML:
		</div>
		<div class="col-xs-9">
			<ui-bind  class="edit block" data-edit="multiline:1;floating:1;type:html" path="form.html" config="html" style="min-height:24px;background-color:#E0E0E0"></ui-bind>
		</div>
	</div>
	<pre><ui-bind path="?" config="html:JSON.stringify(value, null, '  ')"></ui-bind></pre>
</ui-plugin>

<script>

	function save_email(opt, next) {
		SET('form.email', opt.value);
		// next(true);
		// next(false) OR next(null) cancels the change
		next(opt.value.toUpperCase());
	}

	var form = {};
	form.html = '<b>Hello world!</b>';
	form.name = 'UI components';

</script>