# j-Edit

> Komponent umożliwia treść edytowalnego atrybutu dla elementów z edycją lub edycją2 klas.

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

Składnik umożliwia atrybut `contenteditable` dla elementów z klasami `edit` lub `edit2`.

- Singleton
- Położenie składnika pod elementem `<body`, takim jak `j-Directory` lub `j-DatePicker`

__Dobrze wiedzieć__:

- Każdy element z klasą `edit` można edytować jednym kliknięciem.
- Każdy element z klasą `edit2` można edytować za pomocą dwukliki

__Konfiguracja__:

- `dateformat {String}` - standardowy format daty parsingu (default: `yyyy-MM-dd`)
- `exec {String}` opcjonalny, domyślna ścieżka do `function(opt, accept(boolean/html_value_for_the_element))`
- `floating {Boolean}` opcjonalny, może umożliwić pływanie wstępnie (default: `false`)
- `minwidth {Number}` opcjonalny, min szerokość
- `offsetX {Number}` opcjonalny, X offset
- `offsetY {Number}` opcjonalny, Y offset

---

Wymagania `data-edit` są:

- `required {Boolean}` opcjonalny, umożliwia "wymagane" (default: `false`)
- `type {String}` opcjonalny, może być `string` (default), `date`, `number`, `boolean`, `email`, `url`, lub `html`
- `check {String}` opcjonalny, droga do `function(opt, el)` musi powrócić do `boolean`, co oznacza, że `Can the user edit that field?`
- `exec {String}` opcjonalny, droga do `function(opt, accept(boolean/html_value_for_the_element))`
- `format {String}` opcjonalny, format dla `date`, standardowy: `yyyy-MM-dd`
- `maxlength {Number}` maksymalna długość
- Wartość `minvalue {Number}` min. dla typu liczby (default: `undefined`)
- `maxvalue {Number}` maksymalna wartość dla typu liczby (default: `undefined`)
- `bind {Boolean}` jeśli `true` odłącza `data-bind` tylko do tego elementu (default: `true`)
- `multiline {Boolean}` opcjonalny, umożliwia wielokrotne + dodatki klasy `editable-multiline` (`inline-block` + `width:100%`) podczas edycji (default: `false`)
- `floating {Boolean/String}` opcjonalny, umożliwia płynne okno dla elementu (default: `false`, `string` może zawierać wartości `position` lub `offset`)
- `offsetX {Number}` opcjonalny, dodatkowy X offset dla płynącego okna
- `offsetY {Number}` opcjonalny, dodatkowy odsetek Y dla płynącego okna
- `offsetWidth {Number}` opcjonalne, dodatkowe szerokość dla okna pływającego
- `width {Number}` opcjonalny, stała szerokość dla panelu pływającego
- `parent {String}` opcjonalny, selektor do uzyskania offset (może zawierać selektor `parent` lub jQuery dla metody `.closest()`)
- `selectall {Boolean}` opcjonalny, wybiera cały tekst
- `cursor {String}` opcjonalny, pozycja kursora `beg` lub `end` (default)
- `notify {String}` opcjonalny, ścieżka do `function(opt)`, która zostanie powiadomiona po udanej zmianie
- `prevent {Boolean}` opcjonalny, wykonuje `.preventDefault()` i `.stopPropagation()` w przypadku kliknięcia
- `align {String}` opcjonalny, ustawia wartość dla właściwości tekstowej tylko w trybie pływającym
- `focus {String}` opcjonalny, link do `function(opt, el)` kiedy jest skoncentrowany
- `blur {String}` opcjonalny, łącznik do `function(opt, el)` kiedy jest rozcieńczony
- __NEW__: `attr {String}` opcjonalny, nazwa `data-{attr}` do uzyskania wartości nieformatującej

__Dobrze wiedzieć__:

- `opt.set(value)` może być wykorzystywany do przyznania wartości

Użyj go z `<ui-component name="edit">`Gdy element nie jest jeszcze ładowany, jComponent Pobierz go po pierwszym użyciu z adresu `DEF.fallback` (Wydaje się Componentator Autor: Peter Širka Źródło: Componentator Zestaw składników, licencja 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>
```