# j-Edit

> Komponent umožňuje atribút contenteditable pre prvky s triedami edit alebo edit2.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: sk
Content-SHA256: 96fc0255e72fb4b479d3e4ea50ada1f481caa94cbf5fdb217eee2216802e21d2
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

Komponent umožňuje atribút `contenteditable` pre prvky s triedami `edit` alebo `edit2`.

- singleton
- položte zložku pod prvok `<body`, ako je `j-Directory` alebo `j-DatePicker`

__Je dobré vedieť__:

- Každý prvok s triedou `edit` je možné upraviť jedným kliknutím
- Každý prvok s triedou `edit2` je možné upraviť dvakrát

__Konfigurácia__:

- `dateformat {String}` je predvolený formát pre dátumy (predvolené: `yyyy-MM-dd`)
- `exec {String}` voliteľný, predvolená cesta k `function(opt, accept(boolean/html_value_for_the_element))`
- `floating {Boolean}` voliteľné, môže povoliť predvolené plávanie (predvolené: `false`)
- `minwidth {Number}` voliteľné, min šírka
- `offsetX {Number}` voliteľné, X offset
- `offsetY {Number}` voliteľné, Y offset

---

`data-edit` podporuje:

- `required {Boolean}` voliteľné, umožňuje "povinné" (predvolené: `false`)
- `type {String}` Opcionálne môže byť `string` a predvolene , `date`, `number`, `boolean`, `email`, `url`alebo `html`
- `check {String}` voliteľné, cesta k `function(opt, el)` musí vrátiť `boolean`, to znamená `Can the user edit that field?`
- `exec {String}` voliteľné, cesta k `function(opt, accept(boolean/html_value_for_the_element))`
- `format {String}` voliteľný, formát pre `date`, predvolený: `yyyy-MM-dd`
- `maxlength {Number}` a maximálna dĺžka
- `minvalue {Number}` min. hodnota pre typ čísla (predvolená hodnota: `undefined`)
- `maxvalue {Number}` je maximálna hodnota pre typ čísla (predvolená hodnota: `undefined`)
- `bind {Boolean}` ak `true` spája `data-bind` iba s týmto prvkom (predvolené: `true`)
- `multiline {Boolean}` voliteľné, umožňuje multiline + prílohy triedy `editable-multiline` (`inline-block` + `width:100%`) pri úprave (predvolené: `false`)
- `floating {Boolean/String}` voliteľné, umožňuje plávajúce okno pre prvok (predvolené: `false`, `string` môže obsahovať hodnoty `position` alebo `offset`)
- `offsetX {Number}` voliteľný, dodatočný X offset pre plávajúce okno
- `offsetY {Number}` voliteľný, dodatočný Y offset pre plávajúce okno
- `offsetWidth {Number}` voliteľná, dodatočná šírka pre plávajúce okno
- `width {Number}` voliteľné, pevná šírka pre plávajúce panely
- `parent {String}` voliteľný, selektor na získanie offset (môže obsahovať `parent` alebo jQuery selektor pre metódu `.closest()`)
- `selectall {Boolean}` voliteľné, vyberá celý text
- `cursor {String}` voliteľné, kurzor pozície `beg` alebo `end` (predvolené)
- `notify {String}` je voliteľný, cesta k `function(opt)` bude oznámená po úspešnej zmene
- `prevent {Boolean}` voliteľne, vykonáva `.preventDefault()` a `.stopPropagation()` v kliknutí
- `align {String}` voliteľne, nastaví hodnotu pre textovú vlastnosť len pre plávajúci režim
- `focus {String}` voliteľné, odkaz na `function(opt, el)` keď je zameraný
- `blur {String}` voliteľné, odkaz na `function(opt, el)` keď je rozdrvený
- __NEW__: `attr {String}` voliteľné, názov `data-{attr}` získať neformátovanú hodnotu

__Je dobré vedieť__:

- `opt.set(value)` sa dá použiť na pridelenie hodnoty

Použite ho so `<ui-component name="edit">`. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v `DEF.fallback` (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia MIT.

```html example.html
<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>
```