Zone - Гісторыя версій

Panyakali: /* horizontalfit */

2020-08-06T22:47:49Z

horizontalfit

@@ Радок 153: / Радок 153: @@
 === horizontalfit ===
-This pattern is useful if you want all items in your zone to be arranged in a single row, regardless of whether there is enough space to display each item fully. With enough horizontal space to fit all items fully in the zone, this pattern will simply arrange the items in a single horizontal row (identically to the 'grid' pattern with enough horizontal space). However, if the zone is not allotted enough horizontal space to fully display each zone item on its own in a single row, then the items will overlap each other just enough to allow all items to fit into a single row of the allotted width. If the amount of horizontal space for the zone is greater than what is required by the items and the margins between them, then the row of items will be centered within the 'min-width' of their container element.
+This pattern is useful if you want all items in your zone to be arranged in a single row, regardless of whether there is enough space to display each item fully. If the width of this type of zone is not explicitly set, then it will be assumed to be then same as its parent element (which could lead to the items being centered within another one of your divs, as in the first zone of the image below).
 [[File:Zone_horizontalfit.jpg]]

Panyakali: /* verticalfit */

2020-08-06T22:37:08Z

verticalfit

← Папярэдн. версія		Версія ад 00:37, 7 жніўня 2020
Радок 132:		Радок 132:
	=== verticalfit ===		=== verticalfit ===

	This pattern is useful if you want all items in your zone to be arranged in a single column, regardless of whether there is enough space to display each item fully. ~~With enough vertical space to fit all items fully~~ in the zone, ~~this pattern will simply arrange~~ the items ~~in a single~~ vertical ~~column~~. ~~However, if~~ the zone is ~~not~~ allotted ~~enough vertical~~ space to fully ~~display each zone item on its own in a single column~~, then the items will overlap each other just enough to allow all items to fit into a single column of the allotted height.		This pattern is useful if you want all items in your zone to be arranged in a single column, regardless of whether there is enough space to display each item fully. In the first zone in the image below, no min-height or max-height was set for the zone (thus, the zone has the max-height of its first component), so all items were stacked upward on top of the original component, with item_margin (5px by default) vertical distance between each component, similar to how it was done for the diagonal pattern zones.

			If the zone is explicitly allotted more space than is required to display one component, but less than is required to show all fully (usually, this value is the sum of the component's heights, unless you are using sprites with strange transparency portions), then the items will overlap each other just enough to allow all of the items to fit into a single column of the allotted height (as in the second zone in the image below). However, with enough vertical space to fit all items fully in the zone, this pattern will simply arrange the items in a single vertical column (as in the third zone of the image below). Here is how the vertical distances were set for those two examples:

			<pre>
			// For the second verticalfit example, with overlap:
			dojo.style('verticalfit_zone_2', 'max-height', '100px');

			// For the third verticalfit example, with just enough space to display all components:
			// (component height = 50px, multiplied by 5 components = 250px)
			dojo.style('verticalfit_zone_3', 'min-height', '250px');
			</pre>

	[[File:Zone_verticalfit_1.jpg]]		[[File:Zone_verticalfit_1.jpg]]

	If the amount of vertical space for the zone is greater than what is required by the items and the margins between them, then the column of items will be centered within the 'min-height' of their container element.		If the amount of vertical space for the zone is greater than what is required by the items and the margins between them, then the column of items will be centered within the 'min-height' of their container element (as in the image below, which has min-height set to 450px).

	[[File:Zone_verticalfit_2.jpg]]		[[File:Zone_verticalfit_2.jpg]]

Panyakali: /* diagonal */

2020-08-06T22:21:43Z

diagonal

← Папярэдн. версія		Версія ад 00:21, 7 жніўня 2020
Радок 116:		Радок 116:
	=== diagonal ===		=== diagonal ===

	This pattern is great for creating the illusion of stacks (e.g., decks, counters, etc), because it will place each successive item in the zone a certain number of pixels below, and that same number of pixels to the right of the previous item in the zone. The exact number of pixels that are used for these offsets are controlled by the zone object attribute 'item_margin' (which defaults to 5)~~; reducing~~ this ~~number~~ will make each item in the zone be closer together, making it appear as if each item in the stack is thinner, and increasing it will make the items in your stack be further apart, or thicker. ~~The behavior of this pattern does not appear~~ to ~~be affected by whether or not~~ the zone ~~is allotted~~ enough ~~horizontal or vertical space~~ to display ~~all items~~.		This pattern is great for creating the illusion of stacks (e.g., decks, counters, etc), because it will place each successive item in the zone a certain number of pixels below, and that same number of pixels to the right of the previous item in the zone. The exact number of pixels that are used for these offsets are controlled by the zone object attribute 'item_margin' (which defaults to 5, as in the first zone in the image below). The behavior of this pattern does not appear to be affected by whether or not the zone is allotted enough horizontal or vertical space to display all items, as is demonstrated in the second zone of the image below, which was allotted less vertical and horizontal space (49px by 49px) than is required for displaying just one of the components (50px by 50px).

			Reducing the zone's item_margin will make each item in the zone be closer together, making it appear as if each item in the stack is thinner (as in the third zone in the image below), and increasing this value will make the items in your stack be further apart, giving an illusion of thicker components (as in the fourth zone in the image below). Here's how to alter item_margin for your zone:

			<pre>
			// For the third diagonal example:
			this.zone.diagonal_zone_3.item_margin = 2;

			// For the fourth diagonal example (with enough margin to fully display each component):
			this.zone.diagonal_zone_4.item_margin = 36;
			</pre>

	[[File:Zone_diagonal.jpg]]		[[File:Zone_diagonal.jpg]]

Panyakali: /* grid */

2020-08-06T22:09:39Z

grid

← Папярэдн. версія		Версія ад 00:09, 7 жніўня 2020
Радок 110:		Радок 110:
	However, if the zone is not allotted enough horizontal space to display all zone items in a single horizontal row, then the items will wrap to the next line as in the second zone in the image below). In the example image, restricting the zone width was done via:		However, if the zone is not allotted enough horizontal space to display all zone items in a single horizontal row, then the items will wrap to the next line as in the second zone in the image below). In the example image, restricting the zone width was done via:

	~~[code]~~dojo.style('grid_zone_2', 'max-width', '175px');[/~~code]~~		<pre>dojo.style('grid_zone_2', 'max-width', '175px');</pre>

	[[File:Zone_grid.jpg]]		[[File:Zone_grid.jpg]]

Panyakali: /* grid */

2020-08-06T22:09:06Z

grid

← Папярэдн. версія		Версія ад 00:09, 7 жніўня 2020
Радок 106:		Радок 106:
	=== grid ===		=== grid ===

	This is the default pattern for all zones when they are created. With enough horizontal space to fit all items in the zone, this pattern will simply arrange the items in a single horizontal row. However, if the zone is not allotted enough horizontal space to display all zone items in a single horizontal row, then the items will wrap to the next line.		This is the default pattern for all zones when they are created. With enough horizontal space to fit all items in the zone, this pattern will simply arrange the items in a single horizontal row (as in the first zone in the image below).

			However, if the zone is not allotted enough horizontal space to display all zone items in a single horizontal row, then the items will wrap to the next line as in the second zone in the image below). In the example image, restricting the zone width was done via:

			[code]dojo.style('grid_zone_2', 'max-width', '175px');[/code]

	[[File:Zone_grid.jpg]]		[[File:Zone_grid.jpg]]

Panyakali на 22:04, 6 жніўня 2020

2020-08-06T22:04:54Z

← Папярэдн. версія		Версія ад 00:04, 7 жніўня 2020
Радок 130:		Радок 130:
	This pattern is useful if you want all items in your zone to be arranged in a single row, regardless of whether there is enough space to display each item fully. With enough horizontal space to fit all items fully in the zone, this pattern will simply arrange the items in a single horizontal row (identically to the 'grid' pattern with enough horizontal space). However, if the zone is not allotted enough horizontal space to fully display each zone item on its own in a single row, then the items will overlap each other just enough to allow all items to fit into a single row of the allotted width. If the amount of horizontal space for the zone is greater than what is required by the items and the margins between them, then the row of items will be centered within the 'min-width' of their container element.		This pattern is useful if you want all items in your zone to be arranged in a single row, regardless of whether there is enough space to display each item fully. With enough horizontal space to fit all items fully in the zone, this pattern will simply arrange the items in a single horizontal row (identically to the 'grid' pattern with enough horizontal space). However, if the zone is not allotted enough horizontal space to fully display each zone item on its own in a single row, then the items will overlap each other just enough to allow all items to fit into a single row of the allotted width. If the amount of horizontal space for the zone is greater than what is required by the items and the margins between them, then the row of items will be centered within the 'min-width' of their container element.

	[[File:~~Zone_horizontalfit_1~~.jpg]]		[[File:Zone_horizontalfit.jpg]]

	=== ellipticalfit ===		=== ellipticalfit ===

Panyakali: /* Patterns: positioning items within your zone */

2020-08-03T17:47:21Z

Patterns: positioning items within your zone

← Папярэдн. версія		Версія ад 19:47, 3 жніўня 2020
Радок 118:		Радок 118:
	=== verticalfit ===		=== verticalfit ===

	This pattern is useful if you want all items in your zone to be arranged in a single column, regardless of whether there is enough space to display each item fully. With enough vertical space to fit all items fully in the zone, this pattern will simply arrange the items in a single vertical column. However, if the zone is not allotted enough vertical space to fully display each zone item on its own in a single column, then the items will overlap each other just enough to allow all items to fit into a single column of the allotted height. If the amount of vertical space for the zone is greater than what is required by the items and the margins between them, then the column of items will be centered within the 'min-height' of their container element.		This pattern is useful if you want all items in your zone to be arranged in a single column, regardless of whether there is enough space to display each item fully. With enough vertical space to fit all items fully in the zone, this pattern will simply arrange the items in a single vertical column. However, if the zone is not allotted enough vertical space to fully display each zone item on its own in a single column, then the items will overlap each other just enough to allow all items to fit into a single column of the allotted height.

			[[File:Zone_verticalfit_1.jpg]]

			If the amount of vertical space for the zone is greater than what is required by the items and the margins between them, then the column of items will be centered within the 'min-height' of their container element.

			[[File:Zone_verticalfit_2.jpg]]

	=== horizontalfit ===		=== horizontalfit ===

	This pattern is useful if you want all items in your zone to be arranged in a single row, regardless of whether there is enough space to display each item fully. With enough horizontal space to fit all items fully in the zone, this pattern will simply arrange the items in a single horizontal row (identically to the 'grid' pattern with enough horizontal space). However, if the zone is not allotted enough horizontal space to fully display each zone item on its own in a single row, then the items will overlap each other just enough to allow all items to fit into a single row of the allotted width. If the amount of horizontal space for the zone is greater than what is required by the items and the margins between them, then the row of items will be centered within the 'min-width' of their container element.		This pattern is useful if you want all items in your zone to be arranged in a single row, regardless of whether there is enough space to display each item fully. With enough horizontal space to fit all items fully in the zone, this pattern will simply arrange the items in a single horizontal row (identically to the 'grid' pattern with enough horizontal space). However, if the zone is not allotted enough horizontal space to fully display each zone item on its own in a single row, then the items will overlap each other just enough to allow all items to fit into a single row of the allotted width. If the amount of horizontal space for the zone is greater than what is required by the items and the margins between them, then the row of items will be centered within the 'min-width' of their container element.

			[[File:Zone_horizontalfit_1.jpg]]

	=== ellipticalfit ===		=== ellipticalfit ===

	This pattern will arrange all items in the zone in a circular (or elliptical) arrangement, with equal radial distance between each item. With enough vertical and horizontal space to fit all items in the zone into a single non-overlapping circle, this pattern will do just that. However, if the zone is not allotted enough vertical and horizontal space to fully display each zone item in a single circle, then the items that do not fit into the original circle will begin to form an additional concentric circle around the original circle~~; in~~ this second circle, items will overlap if there is not enough space for them all to be fully displayed.		This pattern will arrange all items in the zone in a circular (or elliptical) arrangement, with equal radial distance between each item. With enough vertical and horizontal space to fit all items in the zone into a single non-overlapping circle, this pattern will do just that.

			[[File:Zone_ellipticalfit_1.jpg]]

			However, if the zone is not allotted enough vertical and horizontal space to fully display each zone item in a single circle, then the items that do not fit into the original circle will begin to form an additional concentric circle around the original circle.

			[[File:Zone_ellipticalfit_2.jpg]]

			In this second circle, items will overlap if there is not enough space for them all to be fully displayed.

			[[File:Zone_ellipticalfit_3.jpg]]

	=== custom ===		=== custom ===

	If you want complete control on how your objects are laid out inside the Zone, you can determine their coordinates after their number when being added to the zone. Here is how to do it, when defining your Zone properties in the javascript setup:		If you want complete control on how your objects are laid out inside the Zone, you can determine their coordinates after their number when being added to the zone.

			[[File:Zone_custom.jpg]]

			Here is how to do it, when defining your Zone properties in the javascript setup:

	<pre>		<pre>

Panyakali: /* Patterns: positioning items within your zone */

2020-08-03T17:43:07Z

Patterns: positioning items within your zone

← Папярэдн. версія		Версія ад 19:43, 3 жніўня 2020
Радок 107:		Радок 107:

	This is the default pattern for all zones when they are created. With enough horizontal space to fit all items in the zone, this pattern will simply arrange the items in a single horizontal row. However, if the zone is not allotted enough horizontal space to display all zone items in a single horizontal row, then the items will wrap to the next line.		This is the default pattern for all zones when they are created. With enough horizontal space to fit all items in the zone, this pattern will simply arrange the items in a single horizontal row. However, if the zone is not allotted enough horizontal space to display all zone items in a single horizontal row, then the items will wrap to the next line.

			[[File:Zone_grid.jpg]]

	=== diagonal ===		=== diagonal ===

	This pattern is great for creating the illusion of stacks (e.g., decks, counters, etc), because it will place each successive item in the zone a certain number of pixels below, and that same number of pixels to the right of the previous item in the zone. The exact number of pixels that are used for these offsets are controlled by the zone object attribute 'item_margin' (which defaults to 5); reducing this number will make each item in the zone be closer together, making it appear as if each item in the stack is thinner, and increasing it will make the items in your stack be further apart, or thicker. The behavior of this pattern does not appear to be affected by whether or not the zone is allotted enough horizontal or vertical space to display all items.		This pattern is great for creating the illusion of stacks (e.g., decks, counters, etc), because it will place each successive item in the zone a certain number of pixels below, and that same number of pixels to the right of the previous item in the zone. The exact number of pixels that are used for these offsets are controlled by the zone object attribute 'item_margin' (which defaults to 5); reducing this number will make each item in the zone be closer together, making it appear as if each item in the stack is thinner, and increasing it will make the items in your stack be further apart, or thicker. The behavior of this pattern does not appear to be affected by whether or not the zone is allotted enough horizontal or vertical space to display all items.

			[[File:Zone_diagonal.jpg]]

	=== verticalfit ===		=== verticalfit ===

Panyakali: canned some formatting in the patterns section

2020-07-29T20:29:28Z

canned some formatting in the patterns section

← Папярэдн. версія		Версія ад 22:29, 29 ліпеня 2020
Радок 96:		Радок 96:
	</pre>		</pre>

	The patterns that are available as part of the ebg/zone package are: 'grid' (which is the default, if you never actually call setPattern), 'diagonal', 'verticalfit', 'horizontalfit', 'ellipticalfit'~~, and~~ 'custom'.		The patterns that are currently available as part of the ebg/zone package are:
			* 'grid' (which is the default, if you never actually call setPattern)
			* 'diagonal'
			* 'verticalfit'
			* 'horizontalfit'
			* 'ellipticalfit'
			* 'custom'

	=== grid ===		=== grid ===

Panyakali: Adds additional information on the different types of patterns available for zone objects

2020-07-29T20:28:04Z

Adds additional information on the different types of patterns available for zone objects

@@ Радок 39: / Радок 39: @@
 </pre>
-And set its width (and optionnaly, height and position) in CSS:
+And set its width (and optionally, height and position) in CSS:
 <pre>
@@ Радок 88: / Радок 88: @@
 * get an array of the ids of all the items using zone.getAllItems();
-== Custom mode ==
+== Patterns: positioning items within your zone ==
 If you want complete control on how your objects are laid out inside the Zone, you can determine their coordinates after their number when being added to the zone. Here is how to do it, when defining your Zone properties in the javascript setup: