# j-Edit

> De component maakt de inhoudbewerkbare attributie mogelijk voor elementen met edit of edit2 klassen.

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

De component maakt het mogelijk om de `contenteditable`-attribut te geven voor elementen met `edit` of `edit2`-klassen.

- Singleton
- de component onder het element `<body` als `j-Directory` of `j-DatePicker`

__Goed om te weten__:

- Elk element met de `edit`-klasse kan worden bewerkt met één klik
- Elk element met de `edit2`-klasse kan worden bewerkt met een dubbele klik.

__Configuratie__:

- `dateformat {String}` een standaardformaat voor parsingdatums (default: `yyyy-MM-dd`)
- `exec {String}` optie, een standaard pad naar `function(opt, accept(boolean/html_value_for_the_element))`
- `floating {Boolean}` optioneel, kan standaard vloeien (default: `false`)
- `minwidth {Number}` optie, een min breedte
- `offsetX {Number}` optie, X offset
- `offsetY {Number}` optie, Y offset

---

`data-edit` Attribute ondersteunt:

- `required {Boolean}` optioneel, mogelijk "verplicht" (default: `false`)
- `type {String}` Optional kan het `string` De standaard, `date`, `number`, `boolean`, `email`, `url`Of `html`
- `check {String}` optioneel, een weg naar `function(opt, el)` moet teruggaan naar `boolean`, dat wil zeggen `Can the user edit that field?`
- `exec {String}` optioneel, een weg naar `function(opt, accept(boolean/html_value_for_the_element))`
- `format {String}` optioneel, een format voor `date`, standaard: `yyyy-MM-dd`
- `maxlength {Number}` een max.
- `minvalue {Number}` een min. waarde voor nummer type (default: `undefined`)
- `maxvalue {Number}` een max. waarde voor nummer type (default: `undefined`)
- `bind {Boolean}` als `true` alleen `data-bind` aan dit element bindt (default: `true`)
- `multiline {Boolean}` optioneel, mogelijk multiline + appends klasse `editable-multiline` (`inline-block` + `width:100%`) wanneer het wordt bewerkt (default: `false`)
- `floating {Boolean/String}` optioneel, maakt het vloeibare venster voor het element mogelijk (de standaard: `false`, `string` kan de waarden van `position` of `offset` bevatten)
- `offsetX {Number}` optioneel, extra X offset voor het vloeibare venster
- `offsetY {Number}` optioneel, extra Y offset voor het vloeibare venster
- `offsetWidth {Number}` optioneel, extra breedte voor het vloeibare venster
- `width {Number}` optioneel, een vaste breedte voor vloeibare panelen
- `parent {String}` optioneel, een selector voor het verkrijgen van offset (kan de `parent` of jQuery selector bevatten voor de `.closest()`-methode)
- `selectall {Boolean}` optioneel, selecteert alle tekst
- `cursor {String}` optioneel, een cursor positie `beg` of `end` (default)
- `notify {String}` optioneel, een route naar `function(opt)` die na succesvolle wijziging zal worden gemeld
- `prevent {Boolean}` optioneel, uitvoert `.preventDefault()` en `.stopPropagation()` in de klik evenement
- `align {String}` optioneel, stelt een vallei voor de tekst-align eigenschap voor de vloeibare modus alleen
- `focus {String}` optioneel, een link naar de `function(opt, el)` wanneer het is gericht
- `blur {String}` optioneel, een link naar de `function(opt, el)` wanneer het is gebroken
- __NEW__: `attr {String}` optioneel, een `data-{attr}` naam om de niet-geformateerde waarde te krijgen

__Goed om te weten__:

- `opt.set(value)` kan worden gebruikt om een waarde aan te geven

Gebruik het met `<ui-component name="edit">`Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in `DEF.fallback` (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

```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>
```