# j-Modificator

> Diese Komponente kann das Verhalten des Elements gemäß dem vordefinierten Schema ändern. Die Komponente kann an ein Körperelement angeschlossen werden (da es sich um ein Singleton handelt) und ist für die Leistung optimiert.

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

Diese Komponente kann das Verhalten des Elements gemäß dem vordefinierten Schema ändern. Die Komponente kann an ein `body`-Element angeschlossen werden (da es sich um einen Singleton handelt) und ist für die Leistung optimiert.

__Unterstützte Attribute__:

- `data-m="SOME.PATH"` – die Komponente überwacht diesen Pfad
- `data-m-schema="schema_name"` – Modifikator verwendet dieses registrierte Schema
- `data-m-selector=".ui-textbox-label"` (optional) ein Zielelement wird ein Element gemäß dem Selektor sein (Standard: `null`)
- __NEUES UPDATE__: `data-m="SOME.PATH + schema_name"` Dieses Attribut kann `path` und `schema_name` zusammen enthalten

__Unterstützte Klassen__:

- `modify` aktiviert das Ereignis `click` für dieses Element. `e.type` enthält den Typ `click`

__Registrierungsschema__:

- Sie können mehrere Schemata definieren

```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
});
```

__Umfang__:

j-Modificator unterstützt jComponent-Bereiche, aber jeder Pfad im Bereich muss das Fragezeichen `?` enthalten, z. B. `data-m="?.name"`, der durch einen Bereichspfad ersetzt wird. __Wichtig:__ jComponent-Bereich muss einige jComponents enthalten.

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

Verwenden Sie es mit `<ui-component name="modificator">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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