# j-Modificator

> Deze component kan het gedrag van het element aanpassen volgens het vooraf gedefinieerde schema.De component is op een lichaamselement (omdat het een singleton is) en is geoptimaliseerd voor de prestaties.

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

Deze component kan het gedrag van het element aanpassen volgens het vooraf gedefinieerde schema.De component is op een `body`-element (omdat het een singleton is) en is geoptimaliseerd voor de prestaties.

__Ondersteunde attributen__:

- `data-m="SOME.PATH"` - de component zal deze route volgen
- `data-m-schema="schema_name"` - de modificator gebruikt dit geregistreerde schema
- `data-m-selector=".ui-textbox-label"` (optional) een doelelement zal een element zijn volgens de selector (default: `null`)
- __NEW UPDATE__: `data-m="SOME.PATH + schema_name"` Dit attribuut kan samen `path` en `schema_name` bevatten

__Ondersteunde klassen__:

- `modify` maakt het evenement `click` mogelijk voor dit element `e.type` bevat de `click`-type

__Registratie schema__:

- Je kunt meerdere schema's vaststellen

```javascript
instance.register('schema_name', function(value, element, e) {

    // value: according to the "data-m"
    // element: jQuery element (target)
    // e: contains additional data { type: 'init/click/bind' } and can be used as a repository

    // here you can modify the element
});
```

__doelen__:

j-Modificator ondersteunt de jComponent scopen, maar elke route in het bereik moet een `?` vraagmerk bevatten, bijvoorbeeld `data-m="?.name"`, die wordt vervangen door een scope route. __Important:__ jComponent scope moet sommige jComponents bevatten.

```html
<div data-scope="user">
	<div data---="textbox__?.name">Your name</div>
	<div data-m="?.name"></div>
</div>
```

Gebruik het met `<ui-component name="modificator">`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="modificator">
	<div><a href="javascript:void(0)" class="modify" data-m="obj.a" data-m-schema="link">Click 1</a> second: <a href="javascript:void(0)" class="modify" data-m="obj.a" data-m-schema="link">Click 2</a></div>
	<br />
	<div><button class="modify" data-m="obj.b" data-m-schema="button"><i></i><b>Submit</b></button></div>
</ui-component>

<script>

	// v20 STYLE(), v19 CSS()
	(W.STYLE?W.STYLE:W.CSS)('.sending{color:black;font-weight:bold;cursor:not-allowed}.done{color:green;font-weight:bold;}button .ti{margin-right:5px;}');

	// Register modificator schemas

	SETTER(true, 'modificator', 'register', 'link', function(value, element, e) {
		switch (e.type) {
			case 'init':
				break;
			case 'click':
				element.aclass('sending').html('Sending...');
				break;
			default:
				if (value != null)
					element.rclass().aclass('done').html(value);
				break;
		}

	});

	SETTER(true, 'modificator', 'register', 'button', function(value, element, e) {
		switch (e.type) {
			case 'init':
				e.icon = element.find('i');
				e.html = element.html();
				break;
			case 'click':
				e.icon.rclass().aclass('ti ti-spinner ti-refresh');
				element.prop('disabled', true).find('b').html('Sending...');
				break;
			default:
				e.icon.rclass();
				element.prop('disabled', false);
				element.find('b').html(e.html);
				if (value != null)
					e.icon.aclass('ti ' + (value ? 'ti-check-circle' : 'ti-times-circle'));
				break;
		}
	});

	var obj = {};

	obj.a = null;
	obj.b = null;

	// Only for test
	$(document).on('click', '.modify', function(e) {
		var path = $(this).attr('data-m');
		if (path === 'obj.a') {
			SET(path, 'Success', 3000);
		} else {
			SET(path, true, 3000);
			SET(path, null, 5000);
		}
	});


</script>
```