# j-Windows

> Die Windows-Komponente erwartet ein Array von Objekten.

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

__Konfiguration__:

- `menuicon {String}` ein Menüsymbol in der Fenstertitelleiste (Standard `ti ti-navicon`)
- `reoffsetresize {Boolean}` alle Fenster werden entsprechend der Fensterabmessung `main` neu versetzt (Standard: `true`)
- `zindex {Number}` a Z-Index-Positionierung starten (Standard: `5`)
- __NEU__: `maximizemargin {String}` ein Rand für den maximierten Zustand in der Form `left_px top_px width_px height_px` (Standard: `0 0 0 0`)

Die `windows`-Komponente erwartet einen `Array` an Objekten.

```javascript
// Component declaration
var win = {

	// Component ID
	id: 'WINDOW_ID',

	// NEW: cachekey for similar windows
	// Optional, default: window ID
	cachekey: 'WINDOW_ID',

	// Positioning
	// You can define a specific display size and if the display size is not specified then the window tries to find a size for a larger display
	html: 'THE CONTENT OF WINDOW', // or can be raw HTMLElement

	offset: { x: 200, y: 100, width: 600, height: 400, minwidth: 200, minheight: 200, maxwidth: 1000, maxheight: 1000, maximized: false }, // minwidth, maxwidth, maxheight, minheight and maximized are optional

	// Prevents hidden state for "hide: true" option
	// hidden: false,

	// Default settings
	actions: { move: true, close: true, hide: true, resize: true, menu: false, minimize: true, maximize: true, autosave: false },
	// GOOD TO KNOW:
	// "undefined" close or "close:false" and "hide:true" don't destroy the instance of window (it will be hidden only)

	// A window title
	title: 'Title for the window',

	// Handlers (optional):
	destroy: function() {
		// @el {jQuery} a content of the window
		// @this {Instance}

		// is executed when the window is destroyed
	},

	make: function(el) {

		// @el {jQuery} a content of the window
		// @this {Instance}

		// this.meta {Object} a reference to the window object
		// this.element {jQuery} a content element of the window
		// this.container {jQuery} a main content element of the window
		// this.main {Object} a reference to the "Windows" component
		// this.width {Number} a width of the window
		// this.height {Number} a height of the content of the window
		// this.x {Number} offset X
		// this.y {Number} offset Y

		// Methods:
		// this.setsize(width, height);
		// this.setcommand(cmd); Allowed commands: "close", "maximize", "resetmaximize", "togglemaximize", "minimize", "resetminimize", "toggleminimize", "resize", "move", "focus"
		// this.setoffset(x, y);

		// is executed when the window is making
	},

	menu: function(el) {
		// @el {jQuery} a content element of the window

		// is executed when the user clicks on the menu icon in the window title bar
	},

	data: function(type, data, el) {

		// @type {String}
		// @data {Object}
		// @el {jQuery} a content element of the window
		// @this {Instance}

		// is executed when data are sent via SETTER('windows', 'send', 'TYPE', 'DATA')
	},

	resize: function(width, height, el, x, y) {

		// @width {Number}
		// @height {Number}
		// @el {jQuery} a content of the window
		// @this {Instance}

		// is executed when the window is resized
	},

	move: function(x, y, el) {

		// @x {Number}
		// @y {Number}
		// @el {jQuery} a content of the window
		// @this {Instance}

		// is executed when the window is moved
	},

	service: function(counter, el) {

		// @counter {Number} count of calls
		// @el {jQuery} a content of the window
		// @this {Instance}

		// the component will execute this handler each 5 seconds
	},

	// Optional, this delegate rewrites built-in functionality
	minimize: function(type) {
		// @type {String} optional, "reset", "toggle" or undefined (it means minimize right now)
	},

	// Optional, this delegate rewrites built-in functionality
	maximize: function(type) {
		// @type {String} optional, "reset", "toggle" or undefined (it means maximize right now)
	},

	focus: function() {
		// window is focused
	}
};

PUSH('windows', win);
```

__Methoden__:

- `component.finditem(window_id)` findet das spezifische Fenster gemäß `ID`
- `component.show(window_id)` zeigt ein Fenster
- `component.hide(window_id)` verbirgt ein Fenster
- `component.toggle(window_id)` schaltet ein Fenster um
- `component.focus(window_id)` fokussiert ein Fenster
- `component.hide(window_id)` schließt ein Fenster
- __NEU__: `component.title(window_id, title)` benennt Titel um

Verwenden Sie es mit `<ui-component name="windows">`. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in `DEF.fallback` herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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

<ui-component name="windows" path="mywindows"></ui-component>

<script>

	var mywindows = [];

	mywindows.push({
		id: 'A',
		offset: { x: 200, y: 100, width: 600, height: 400, minwidth: 200, minheight: 200 },
		title: 'A',
		html: '<div class="padding">Lorem ipsum dolor sit amet.</div>',
		actions: { minimize: true, maximize: true, move: true, resize: true, close: true, menu: true },
		menu: function(el) {
			alert('MENU');
		}
	});

	mywindows.push({
		id: 'B',
		offset: { x: 600, y: 300, width: 600, height: 400, minwidth: 200, minheight: 200 },
		title: 'B',
		html: '<div class="padding">Lorem ipsum dolor sit amet.</div>',
		actions: { minimize: true, maximize: false, move: true, resize: true, close: true }
	});

</script>
```