j-Detach

jComponent 20 · jcomponent@20 component Príklad načítaný s jComponent 20

Komponent môže odpojiť/pripojiť všetky deti (prvky HTML). Napríklad, ak máte prvky vo vnútri panelu, môžete prvky presunúť napr. do j-Windows.

Komponent watch cesta {Boolean} a ak hodnota obsahuje true, prvky budú oddelené inak pripojené.

Konfigurácia:

detach {String} odkaz na function(children, element)
attach {String} odkaz na function(children, element)
remove {String} odkaz na function(children)

detach sa vykoná, keď je obsah oddelený
attach sa vykoná, keď sa obsah musí vrátiť späť
remove sa vykoná, keď sa odstráni komponent (alebo nadradený prvok).

Použite ho so <ui-component name="detach">. Keď komponent ešte nie je načítaný, jComponent ho stiahne pri prvom použití z adresy v DEF.fallback (predvolene CDN Componentator). Autor: Peter Širka. Zdroj: úložisko komponentov Componentator, licencia MIT.

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>