# j-Dashboard

> Το στοιχείο περιμένει μια σειρά από αντικείμενα.

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

- Υποστήριξη κινητών συσκευών
- Υποστηρίζει το Touch
- Κινούμενος
- Δραστηριότητες
- Επαναστατική

Το συστατικό αναμένει το `Array` των αντικειμένων.

__ΕΠΙΤΡΟΦΗ__:

- `axisX {Number}` ένα μέγεθος του δικτύου της ακμής X (προεπιλεγμένο: `12`)
- `axisY {Number}` ένα μέγεθος του δικτύου του άξοντος Y (προεπιλεγμένο: `144`)
- `padding {Number}` ένα παδινγκ μεταξύ των widgets (προεπιλεγμένο: `10`)
- `delay {Number}` καθυστέρηση ιντ (προεπιλεγμένη: `200`)
- `serviceinterval {Number}` ένα εύρος υπηρεσίας (προεπιλεγμένο: `5000`)
- Το `ondrop {String}` είναι ένας δρόμος προς τη μέθοδο `function(meta) {}`, εκτελείται εάν κάποιος ρίξει κάποιο στοιχείο στην περιοχή
	- Δίκτυο `meta.x`
	- Δίκτυο `meta.y`
	- `meta.el` Εξέλιξη
	- `meta.pageX`
	- `meta.pageY`
	- `meta.offsetX`
	- `meta.offsetY`
	- `meta.target`
	- `meta.d` σε λειτουργία οθόνης `xs`, `sm`, `md` ή `lg`
- Το `noemitresize` απενεργοποιεί την εκτέλεση της μεθόδου `resize` σε όλα τα συστατικά (προεπιλεγμένο: `false`)
- `parent {String}` ένα γονικό δοχείο που καθορίζει ελάχιστο ύψος (προεπιλεγμένο: `null`)
- `margin {Number}` ένα ανώτατο / κάτω περιθώριο για την επιλογή `parent` (προεπιλεγμένο: `0`)
- `minsizexs {Number}` ελάχιστο μέγεθος στήλης / ράβδους για επιπλέον μικρές οθόνες (προεπιλογή: `2`)
- `minsizesm {Number}` ελάχιστο μέγεθος στήλης / ράβδου για μικρές οθόνες (προεπιλεγμένο: `2`)
- `minsizemd {Number}` ελάχιστο μέγεθος στήλης / ράβδου για οθόνες μετρίου (προεπιλεγμένο: `1`)
- `minsizelg {Number}` ελάχιστο μέγεθος στήλης / ράβδους για μεγάλες οθόνες (προεπιλογή: `1`)
- Ετικέτες `iconsettings {String}`
- `iconremove {String}` αφαιρέστε το icon
- `change {String}` ένα μονοπάτι προς τη μέθοδο `function(type, id)` (εφαρμόζεται εάν το δίσκο καταγράφει μια αλλαγή `move` ή `remove`)
- `animation {Number}` Στυλ της Animation:
	- `1` ΟΠΑΣΙΑ
	- `2` Από τη μεγάλη έως την κανονική
	- Η κλίμακα `3` από μικρή έως κανονική (__default__)
	- `4` Ροτάζ Z
	- `5` αλλαγή θέσης X
	- `6` αλλαγή της θέσης
- `grid {Boolean}` δίκτυο φόντου (προεπιλεγμένο: `false`)
- __NEW__: `reanimate {Boolean}` επιτρέπει την ανιχνευση για την αλλαγή widgets (προεπιλογή: `false`)

```js
// Component declaration
var component = {

	// Component ID
	id: 'COMPONENT_ID',

	// Positioning
	// You can define specific display size and if the display size is not specified then the component tries to find a size for larger display
	offset: {
		xs: { x: 1, y: 1, width: 6, height: 6 }, // Number means the position in the grid, so e.g. width "2" takes "2" columns in X axis
		lg: { x: 1, y: 1, width: 6, height: 6 }
	},

	html: 'THE CONTENT OF COMPONENT', // or can be raw HTMLElement

	// Default settings
	actions: { move: true, remove: true, resize: true, resizeX: true, resizeY: true, resizeP: false, settings: true },
	// resizeP means: resize "proportionally"

	// Can disable header (default: true)
	header: true,

	// Can delay displaying (in "ms", default: config.delay)
	delay: 0,

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

	// Custom properties which will be assigned to the instance
	template: Object,
	config: Object,
	// reset: true, // NEW: reloads the component again
	// class: String // adds a class to the item

	make: function(exports, config, el) {

		// @exports {Object}
		// @config {Object}
		// @el {jQuery} a content of the component

		// Handlers (optional):
		exports.destroy = function() {
			// @el {jQuery} a content of the component
			// @this {Instance}

			// is executed when the component is destroyed
		};

		exports.data = function(data, el) {
			// @data {Object}
			// @this {Instance}
			// @el {jQuery} a content element of the component
			// It can be executed via SETTER('dashboard/send', ....)
		};

		exports.service = function(counter, el) {
			// @counter {Number} count of calls
			// @el {jQuery} a content of the component
			// @this {Instance}
			// dashboard will execute this handler each 5 seconds
		};

		exports.focus = function() {
			// Optional, when the "window" is focused the delegate will be executed
		};

		exports.resize = function(width, height, el, display) {
			// @width {Number}
			// @height {Number}
			// @el {jQuery} a content of the component
			// @display {String} a current display size "xs", "sm", "md" or "lg"
			// @this {Instance}
			// is executed when the component is resized
			// @this {Instance}
		};

		exports.settings = function(config, el, elbtn) {
			// @config {Object}
			// @el {jQuery} a content element of the component
			// @elbtn {jQuery} button element
			// is executed when the users clicks on the settings icon
		};

		exports.remove = function(remove) {
			// remove {Function} removes that widget
			remove();
		};

		exports.configure = function() {
			// is executed when the configuration is changed
		};

		// this.meta {Object} a reference to component object
		// this.element {jQuery} a content element of the component
		// this.container {jQuery} a main content element of the component
		// this.main {Object} a reference to Dashboard component
		// this.width {Number} a width of "this.element"
		// this.height {Number} a height of "this.element"
		// this.display {String} a current display size "xs", "sm", "md" or "lg"

		// is executed when the component is making
	}
};

PUSH('components', component);
```

__Μέθοδοι__:

- Το `SETTER('dashboard/send', id, body)` αποστέλλει δεδομένα σε όλα τα widgets που περιέχουν το Delegate `data`
	- `id {String}`
		- Το `null` αποστέλλεται σε όλα τα συστατικά
		- `@component` αποστέλλει στα συγκεκριμένα συστατικά σύμφωνα με το όνομα του συστατικού
		- `string` αποστέλλει σε ένα συγκεκριμένο συστατικό σύμφωνα με τον αναγνωριστή
- Το `SETTER('dashboard/call', method_name, [a], [b], [c], [d])` εκτελεί μια μέθοδο σε κάθε widget
- Το `RETURN('dashboard/pixel')` επιστρέφει το μέγεθος του pixel (τμήμα)
- Το `RETURN('dashboard/display')` επιστρέφει το τρέχον πλάτος οθόνης

__Καλό να ξέρεις__:

- Το συστατικό προσθέτει τάξεις στο σώμα του συστατικού:
	- Το `d_colNUMBER` καθορίζει τον αριθμό των στήλων που λαμβάνονται, για παράδειγμα, το `d_col2`
	- Το `d_rowNUMBER` καθορίζει τον αριθμό των γραμμών που λαμβάνονται, για παράδειγμα, το `d_row3`
	- `d_square` το συστατικό έχει το ίδιο πλάτος / ύψος
	- `d_vertical` το συστατικό έχει μόνο 1 βήμα πλάτος και πάνω από 1 βήματα ύψους
	- `d_horizontal` το συστατικό έχει μόνο 1 βήμα ύψους και περισσότερο από 1 βήματα πλάτους

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

```html example.html
<ui-component name="dashboard" path="components"></ui-component>
<script>

	var components = [];

	components.push({
		id: 'A',
		offset: { lg: { x: 0, y: 0, width: 4, height: 4 }},
		title: 'A',
		html: '<div class="padding">Lorem ipsum dolor sit amet.</div>',
		actions: { settings: true, remove: true, move: true, resize: true },
		make: function(exports, config, el) {

			// If you change some action "exports.actions" then execute:
			// exports.refresh();

			exports.data = function(data) {

			};

			exports.configure = function() {

			};

		}
	});

	components.push({
		id: 'B',
		offset: { lg: { x: 4, y: 0, width: 4, height: 4 }},
		title: 'B',
		html: '<div class="padding">Lorem ipsum dolor sit amet.</div>',
		actions: { settings: true, remove: true, move: true, resize: true }
	});
</script>
```