# j-Modificator

> Ez az összetevő módosíthatja az elem viselkedését a előre meghatározott rendszer szerint.Az összetevőt egy testelemre (mert ez egy szingleton) lehet rögzíteni, és optimalizálva van a teljesítményre.

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

Ez az összetevő módosíthatja az elem viselkedését a előre meghatározott rendszer szerint. Az összetevőt egy `body` elemre lehet rögzíteni (mert egy szingleton) és optimalizálva van a teljesítményre.

__támogatott tulajdonságok__:

- `data-m="SOME.PATH"` - az összetevő figyeli ezt az utat
- `data-m-schema="schema_name"` - a módosító használja ezt a regisztrált rendszer
- `data-m-selector=".ui-textbox-label"` (opcionális) a célelem lesz egy elem szerint a kiválasztó (default: `null`)
- __NEW UPDATE__: `data-m="SOME.PATH + schema_name"` Ez az attribútum tartalmazhat `path` és `schema_name` együtt

__támogatott osztályok__:

- A `modify` lehetővé teszi a `click` eseményt, hogy ez az elem `e.type` tartalmazza a `click` típusát

__Regisztrációs rendszer__:

- Többszörös rendszereket is meg lehet határozni

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

__Célok__:

j-Modificator Támogatás jComponent A pályán minden útnak tartalmaznia kell a `?` Kérdések az E.G. `data-m="?.name"` Ezzel a pályával helyettesíthető. _Important:__ jComponent A jComponents-t tartalmazni kell.

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

Használja a `<ui-component name="modificator">`Amennyiben a készülék még nem tölthető le, jComponent letöltés az első felhasználásra a címről `DEF.fallback` (Azt a Componentator A szerző: Peter Širka. forrás: a Componentator Az összetevők raktár, MIT licenc.

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