# j-Detach

> Το συστατικό μπορεί να αποσυνδέσει/αποσυνδεθεί όλα τα παιδιά (τα στοιχεία HTML). Για παράδειγμα, εάν έχετε στοιχεία μέσα σε ένα πάνελ, μπορείτε να μετακινήσετε τα στοιχεία για παράδειγμα στο j-Windows.

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

Το συστατικό μπορεί να αποσυνδέσει/αποσυνδεθεί όλα τα παιδιά (τα στοιχεία HTML). Για παράδειγμα, εάν έχετε στοιχεία μέσα σε ένα πάνελ, μπορείτε να μετακινήσετε τα στοιχεία για παράδειγμα στο `j-Windows`.

Το στοιχείο `watch` δρόμο `{Boolean}` και αν η τιμή περιέχει `true`, τα στοιχεία θα αποσυνδεθούν διαφορετικά.

__ΕΠΙΤΡΟΦΗ__:

- `detach {String}` Ένας σύνδεσμος με το `function(children, element)`
- `attach {String}` Ένας σύνδεσμος με το `function(children, element)`
- `remove {String}` Ένας σύνδεσμος με το `function(children)`

---

- Το `detach` εκτελείται όταν το περιεχόμενο αποσυνδέεται
- Το `attach` εκτελείται όταν το περιεχόμενο πρέπει να επιστρέψει
- Το `remove` εκτελείται όταν αφαιρείται το συστατικό (ή ένα γονικό στοιχείο)

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

```html example.html
<style>
	body { padding: 0; margin: 0; overflow: hidden; }
</style>

<ui-component name="windows" path="common.windows"></ui-component>

<div class="center padding"><button onclick="togglewindow()">Toggle windowed mode</button></div>

<div style="margin:30px auto;border:1px solid #E0E0E0;max-width:500px;width:100%;min-height:100px;">
	<ui-component name="detach" path="common.detach" config="detach:el_detach;attach:el_attach;remove:el_remove">
		<div class="padding">
			<h2>Your content</h2>
			<div><img src="https://cdn.componentator.com/logo.svg" width="200" /></div>
		</div>
	</ui-component>
</div>

<script>

	var common = {};

	common.detach = false;
	common.windows = [];

	function el_detach(children, element) {

		var id = 'mywin';
		var div = document.createElement('DIV');

		var win = {};
		win.id = id;
		win.cachekey = id;
		win.offset = { x: 200, y: 100, width: 840, height: 500, minwidth: 450, minheight: 300 };
		win.actions = { move: true, close: true, resize: true, maximize: true, minimize: false, autosave: true };
		win.title = 'Example';
		win.html = div;

		win.close = function(next) {
			SET('common.detach', false);
			next();
		};

		for (var m of children)
			div.appendChild(m);

		PUSH('common.windows', win);
	}

	function el_attach(children, element) {

		var id = 'mywin';

		for (var m of children)
			element[0].appendChild(m);

		common.windows.splice(common.windows.findIndex('id', id), 1);
		UPD('common.windows');
	}

	function el_remove(children) {
		var id = 'mywin';
		var index = common.windows.findIndex('id', id);
		if (index !== -1) {
			common.windows.splice(index, 1);
			UPD('common.windows');
		}
	}

	function togglewindow() {
		var path = 'common.detach';
		var val = GET(path);
		SET(path, !val);
	}

</script>
```