j-Editable

jComponent 20 · jcomponent@20 component Example loaded with jComponent 20

This component can edit all elements with editable class. It works with data-bind or dynamic values. Learn more from example.

Configuration:

autofocus {Boolean} focuses first item (default: false)
validate {Boolean} can disable validation (default: true)
disabled {Boolean} can disable editing (it adds ui-editable-disabled and ui-editable-enabled class), default: false
changed {String} optional, a link to a method or path --> it will contain the object with changed values only
enter {String} optional, a link to a method method(path, value, el), the method is executed if the user presses ENTER
escape {String} optional, a link to a method method(path, value, el), the method is executed if the user presses ESC
can {String} optional, a link to method method(opt, el) must return boolean, it means can edit?
error {String} optional, a link to method method(el, isInvalid, meta) is evaluated when the item is invalid and vice-versa
NEW class {String} optional, adds a class name in the form ui-editable-CLASS (default: default)

data-editable attribute describes behaviour:

path {String} a relative path to property (can be inherited from data-bind automatically)
required {Boolean} optional, enables "required" (default: false)
type {String} optional, can be string (default), date, number, boolean, email or html NEW tags
can {String} optional, a path to function(opt, el) must return boolean, it means can edit?
save {String} optional, a path to function(opt, accepted(boolean)), accepted function must be evaluated
format {String} optional, a format for date, default: yyyy-MM-dd
dirsource {String} optional, path to a data-source
dircustom {String/Boolean} optional, can contain a path to function(val, next(new_val)) or can be Boolean. This option can enable adding a custom value (value not defined in data-source)
dirrender {String} optional, a path to function(item, text) (must return HTML for j-Directory), this function can affect list of items in j-Directory
dirminwidth {Number} optional, a minimum width for j-Directory, default: 200
dirmaxwidth {Number} optional, a maximum width for j-Directory
dirplaceholder {String} optional, a placeholder for j-Directory
dirempty {String} optional, adds an empty field for j-Directory
dirkey {String} optional, a key name for reading of text in dirsource (default: name)
dirvalue {String} optional, a key name for reading of value in dirsource (default: id)
dirsearch {Boolean} optional, can disable search for j-Directory
autosource {String} a path to search function in autocomplete, function(search, render(arr))
autovalue {String} a property path for the value in autosource
maxlength {Number} a maxlength
minvalue {Number} a min. value for number type (default: undefined)
maxvalue {Number} a max. value for number type (default: undefined)
rebind {Boolean} if true rebinds data-bind on this element only (default: 0)
validate {String} optional, a condition for validating of value, can contain a link to function(value) or !!value.match(/[a-z]+/)
multiline {Boolean} optional, enables multiline + appends class editable-multiline (inline-block + width:100%) when it's editing (default: false)
raw {Boolean} optional, when true then the current HTML content will be as a placeholder if the value is nullable (default: true)
accept {String} optional, a condition for accepting of value, can contain a link to function(value) or !!value.match(/[a-z]+/) is similar to validate
empty {String} optional, enables empty value and can contain empty label or 1 or true for auto rebind of binder
invalid {String} optional, a link to method method(el, isInvalid, meta) is evaluated when the item is invalid and vice-versa

Methods:

NEW: component.changed() returns an object with changed data

Good to know:

if the user presses some key then the editable element will contain keypressed class as long as they haven't left the control
each changed element will contain class changed
if the component changes some values, the main element will contain class ui-editable-changed
if the element has data-bind with empty, it will be cleared after focus
NEW now supports tags type. For now supports only with rebind and data-bind. (data-bind template with {jQuery selector} works from +v18)
NEW if the element (or parent, or parent of parent) contains attribute data-disabled="1", the control will be disabled
NEW hidden and disabled elements won't be validated

Use it with <ui-component name="editable">. 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.

example.html

<style>
	.changed {}
	.changed::after { float: right; content: '+'; margin-left: 5px; font-weight: normal; color: orange; }
</style>

<ui-component name="LAZY datepicker"></ui-component>
<ui-component name="LAZY directory"></ui-component>

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

		<div class="row">
			<div class="col-xs-3">
				Name:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.name" config="html" class="editable block" data-editable="required:true"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Email:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.email" config="html" class="editable block" data-editable="required:1;type:email"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Nickname:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.nickname" config="empty:Nickname;html" class="editable block" data-editable="required:true"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Framework:
			</div>
			<div class="col-xs-9">
				<ui-bind class="editable block" config="html;empty:Choose a framework;change:renderframework" path="form.frameworkid" data-editable="dirsource:frameworks;"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Country:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.countries" config="template:{#countrytags}" class="editable block" data-editable="rebind:1;dirsource:countries;type:tags"></ui-bind>
			</div>
		</div>
		<div class="row">
			<div class="col-xs-3">
				Date:
			</div>
			<div class="col-xs-9">
				<ui-bind path="form.date" config="html:(new Date() || value).format('yyyy-MM-dd')" class="editable block" data-editable="type:date"></ui-bind>
			</div>
		</div>
	</div>
	<pre><ui-bind path="form" config="html:JSON.stringify(value, null, '  ')"></ui-bind></pre>
</ui-component>

<script type="text/html" id="countrytags">
	{{ foreach m in value }}<span class="editable-tag"><i class="ti ti-times"></i>{{ m }}</span>{{ end }}
</script>


<script>

	// Alternative to tags (ui-bind path="path" config="change:myfunc")
	function myfunc(data, path, el) {
		if (!data)
			return el.html('');
		var template = '<span class="tag"><i class="ti ti-times"></i>{0}</span>';
		var html = '';
		for (var i = 0; i < data.length; i++)
			html += template.format(data[i]);
		el.html(html);
	}

	var frameworks = [{ id: 0, name: 'Nothing', template: '<b>{{ name }}</b>' }, { id: 1, name: 'jComponent' }, { id: 2, name: 'Angular.js' }, { id: 3, name: 'React' }];
	var countries = ['Slovakia', 'Poland', 'Hungary', 'Germany', 'USA', 'Austria', 'Poland', 'Czechia'];
	var form = {};
	form.date = new Date();
	form.name = 'Peter Širka';
	form.countries = ['Slovakia', 'Hungary'];
	form.frameworkid = 0;

	function renderframework(value, path, el) {
		return value ? frameworks.findValue('id', value, 'name', DEF.empty) : DEF.empty;
	}

</script>