j-Detach

jComponent 20 · jcomponent@20 component Voorbeeld geladen met jComponent 20

De component kan alle kinderen (HTML-elementen) ontgrendelen.Als u bijvoorbeeld elementen in een panel hebt, kunt u de elementen bijvoorbeeld naar de j-Windows verplaatsen.

De component watch pad {Boolean} en als de waarde bevat true, worden de elementen anders aangesloten.

Configuratie:

detach {String} een link naar de function(children, element)
attach {String} een link naar de function(children, element)
remove {String} een link naar de function(children)

detach wordt uitgevoerd wanneer de inhoud is uitgeschakeld
attach wordt uitgevoerd wanneer de inhoud moet worden teruggestuurd
remove wordt uitgevoerd wanneer de component (of een ouderlijk element) is verwijderd

Gebruik het met <ui-component name="detach">Wanneer de component nog niet is geladen, jComponent Download het op eerste gebruik van het adres in DEF.fallback (De Componentator Schrijver: Peter Širka. bron: de Componentator Componenten repository, MIT licentie.

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>