# j-Modificator

> Αυτό το συστατικό μπορεί να τροποποιήσει τη συμπεριφορά του στοιχείου σύμφωνα με το προκαθορισμένο σχήμα.Το συστατικά μπορεί να χτυπηθεί σε ένα στοιχείο σώματος (επειδή είναι μονότονο) και βελτιστοποιείται για την απόδοση.

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

Αυτό το συστατικό μπορεί να τροποποιήσει τη συμπεριφορά του στοιχείου σύμφωνα με το προκαθορισμένο σχήμα.Το συστατικά μπορεί να χτυπηθεί σε ένα στοιχείο `body` (επειδή είναι singleton) και βελτιστοποιείται για την απόδοση.

__Υποστηριζόμενα χαρακτηριστικά__:

- `data-m="SOME.PATH"` - το συστατικό θα παρακολουθήσει αυτό το μονοπάτι
- `data-m-schema="schema_name"` - ο τροποποιητής χρησιμοποιεί αυτό το εγγεγραμμένο σχήμα
- `data-m-selector=".ui-textbox-label"` (επιλεκτικά) ένα στοχευμένο στοιχείο θα είναι ένα στοιχείο σύμφωνα με τον επιλέκτη (προσδιορισμός: `null`)
- __NEW UPDATE__: `data-m="SOME.PATH + schema_name"` Αυτό το χαρακτηριστικό μπορεί να περιέχει `path` και `schema_name` μαζί

__Υποστηριζόμενες τάξεις__:

- Το `modify` επιτρέπει το γεγονός `click` για αυτό το στοιχείο `e.type` θα περιέχει τον τύπο `click`

__Σχεδιασμός καταγραφής__:

- Μπορείτε να ορίσετε πολλαπλά σχήματα

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

__Στόχοι__:

j-Modificator Υποστήριξη jComponent Ο καθένας, όμως, πρέπει να περιέχει το `?` Ερώτηση για το Γ.Γ. `data-m="?.name"` Η οποία αντικαθίσταται από ένα πεδίο. __Σημαντικό:__ jComponent Το scope πρέπει να περιέχει κάποια jComponents.

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

Χρησιμοποιήστε το με `<ui-component name="modificator">`Όταν το στοιχείο δεν έχει φορτωθεί ακόμα, jComponent Κατεβάστε το για πρώτη φορά από τη διεύθυνση `DEF.fallback` (Η Componentator Συγγραφέας: Peter Širka. πηγή: το Componentator Ετικέτες Αξιολόγηση, MIT άδεια.

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