j-Layout

• This component can create a layout for your SPA. This component is a bit harder for understanding, but it's very helpful. j-Layout uses jComponent +v17.

Configuration:

• parent {String} can contain parent, window or jQuery selector for the closest method (default: window)
• margin {Number} adds margin for the height (default: 0)
• remember {Boolean} can remember last settings of layout for resizing (default: true)
• space {Number} internal, contains a space between panels (default: 1)
• border {Number} internal, contains a border size (default: 0)
• resize {String} internal, a path to method which it's executed when the layout is resized
• autoresize {Boolean} enables auto-resize (default: true)

Methods:

• component.refresh() refreshes layout
• component.resize() performs resize
• component.reset() performs reset of resizing
• component.layout(name) changes a layout (like two way data-binding)
• component.rebind(code_string) makes a new layout configuration
• component.lock(type, [boolean]) locks the panel

Panel types:

• left left panel, resizable
• right right panel, resizable
• right2 right panel will be next to the left panel and uses right key in the config, resizable
• top top panel, resizable (it's panel on top of all panels)
• top2 top panel, resizable and uses top key in the config (it is between left and right panel)
• bottom bottom panel, resizable (it's panel on bottom of all panels)
• bottom2 bottom panel, resizable and uses bottom key in the config (it is between left and right panel)
• main main panel, can't be resizable and size is counted automatically

Layout:

Making of layout is very easy and with a lot of possibilities. Layout must have own HTML structure. Look to example. The example below describes only meta data of the layout.

• size {Number/String} can contain a height/width of panel according to the panel type. Number 120 defines pixels and String 100% can define percentage
• minsize {Number/String} is a minimal size of the panel while the panel is resizing (default: size value)
• maxsize {Number/String} is a maximal size of the panel while the panel is resizing (default: auto-counted)
• resize {Boolean} enables resizing of the panel with except main panel (it's counted automatically)
• show {Boolean} enables visibility (default: false)

{
	top: { size: 80, resize: true, minsize: 50 }, // top panel
	right: { size: 100 },
	bottom: { size: 100 }, // bottom panel
	left: { size: 100, resize: true }, // left panel
	main: {}, // main panel

	// Can contain a different template for various display types
	// lg = Large display, md = Medium display, sm = Small display, xs = Extra small display
	md: {
		top: { show: true, size: 80 },
		bottom: { show: false },
		left: { show: false },
		main: { show: true }
	},

	// Custom layouts
	detail: {

		// Custom display types in custom layouts
		md: {
			top: { show: true },
			bottom: { show: true },
			main: { show: true },
			left: { show: false },
			right: { show: true, size: 300 }
		},
		xs: {
			top: { show: true },
			bottom: { show: true },
			main: { show: false },
			left: { show: false },
			right: { show: true, size: '100%' }
		}
	}
}

Good to know:

• IMPORTANT: this component must contain meta-data of the layout wrapped in <script type="text/plain"></script>
• each panel is section element and must contain data-type="top" attribute with type of panel
• define panels only which you will use
• ordering of all section elements isn't important
• top2 uses top config key
• right2 uses right config key
• bottom2 uses bottom config key

Use it with <ui-component name="layout">. When the component is not loaded yet, jComponent downloads it on first use from the address in DEF.fallback (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

<style>
	.ui-layout-section { font-size: 11px; }
</style>

<div style="width:500px;height:300px">
	<ui-component name="layout" path="mylayout" config="parent:parent" class="invisible">

		<!-- META DATA OF THE LAYOUT -->
		<!-- VERY IMPORTANT -->
		<script type="text/plain">
			{
				top: { size: 80, resize: true },
				bottom: { size: 100 },
				left: { size: 100, minsize: 50, resize: true },
				right: { size: 100 },
				main: {},
				detail: {
					left: { show: false },
					right: { show: true, size: '100%' },
					bottom: { show: false },
					main: { show: false }
				}
			}
		</script>

		<!-- PANEL IN LAYOUT -->
		<section data-type="top">
			TOP
		</section>

		<!-- PANEL IN LAYOUT -->
		<section data-type="main">
			MAIN
		</section>

		<!-- PANEL IN LAYOUT -->
		<section data-type="right">
			RIGHT
		</section>

		<!-- PANEL IN LAYOUT -->
		<section data-type="left">
			LEFT
		</section>

		<!-- PANEL IN LAYOUT -->
		<section data-type="bottom">
			BOTTOM
		</section>

	</ui-component>
</div>

<br />

<div style="width:500px;height:300px">
	<ui-component name="layout" config="parent:parent" class="invisible">
		<script type="text/plain">
			{
				top: { size: 80, resize: 1 },
				bottom: { size: 100 },
				left: { size: 100 },
				right: { size: 100 },
				main: {}
			}
		</script>

		<section data-type="top2">
			TOP2
		</section>

		<section data-type="main">
			MAIN
		</section>

		<section data-type="right">
			RIGHT
		</section>

		<section data-type="left">
			LEFT
		</section>

		<section data-type="bottom2">
			BOTTOM2
		</section>

	</ui-component>
</div>

<script>

	var mylayout = '';

	setInterval(function() {
		SET('mylayout', mylayout === 'detail' ? '' : 'detail');
	}, 5000);

	setInterval(function() {
		SETTER('layout', 'lock', 'right');
	}, 8000);

</script>