Skip to content

Commit

Permalink
Demonstrate rightToLeft property on demo page
Browse files Browse the repository at this point in the history 
Juicy/juicy-tile-list#38
  • Loading branch information
miyconst committed Jul 20, 2015
1 parent d60f81d commit 10a53be
Showing 1 changed file with 19 additions and 2 deletions.
21 changes: 19 additions & 2 deletions examples/juicy-tile-grid/demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,7 @@ <h1>Reordering</h1>
</div>
<h1>Reversing</h1>
<p>
Reversing tiles with direction property.
Reversing tiles with <code>rightToLeft</code> property.
<label><input type="checkbox" checked="{{editingMode}}"> Show editor ({{editingMode}})</label>
</p>
<juicy-tile-grid id="st5" setup="[[setup5]]">
Expand All @@ -260,6 +260,23 @@ <h1>Reversing</h1>
<div>5</div>
</div>
</juicy-tile-grid>
<div class="highlight highlight-js">
<pre>setup: {
"id": "root",
"direction": "horizontal",
"gutter": 20,
"rightToLeft": true,
"width": 990,
"precalculateHeight": true,
"items": [
{ "width": "20%", "height": 30, "priority": 0.5, "id": "0", "hidden": false, "widthFlexible": true },
{ "width": "20%", "height": 30, "priority": 0.4, "id": "1", "hidden": false, "widthFlexible": true },
{ "width": "20%", "height": 30, "priority": 0.3, "id": "2", "hidden": false, "widthFlexible": true },
{ "width": "20%", "height": 30, "priority": 0.2, "id": "3", "hidden": false, "widthFlexible": true },
{ "width": "20%", "height": 30, "priority": 0.1, "id": "4", "hidden": false, "widthFlexible": true }
]
}</pre>
</div>
</template>
<script type="text/javascript">
model = {
Expand All @@ -269,7 +286,7 @@ <h1>Reversing</h1>
setup2: { "id": "root", "direction": "horizontal", "gutter": 20, "items": [{ "gutter": 0, "items": [{ "gutter": 0, "items": [], "id": "root_0_0", "priority": 1, "width": "25%", "height": 30, "hidden": false, "itemName": "Group 2", "widthFlexible": true }, { "width": "75%", "height": 30, "priority": 0.75, "id": "0", "itemName": "<div>", "hidden": false, "widthFlexible": true }], "id": "root_0", "priority": 0.5, "width": "100%", "height": 30, "hidden": false, "itemName": "Group 1", "widthFlexible": true }, { "gutter": 0, "items": [{ "gutter": 0, "items": [], "id": "root_1_0", "priority": 1, "width": "35%", "height": 30, "hidden": false, "itemName": "Group 3", "widthFlexible": true }, { "width": "65%", "height": 30, "priority": 0.7307692307692308, "id": "1", "itemName": "<div>", "hidden": false, "widthFlexible": true }], "id": "root_1", "priority": 0.46153846153846156, "width": "100%", "height": 30, "hidden": false, "itemName": "Group 2", "widthFlexible": true }, { "gutter": 0, "items": [{ "gutter": 0, "items": [], "id": "root_6_0", "priority": 1, "width": "45%", "height": 30, "hidden": false, "itemName": "Group 4", "widthFlexible": true }, { "width": "55%", "height": 30, "priority": 0.7130177514792899, "id": "2", "itemName": "<div>", "hidden": false, "widthFlexible": true }], "id": "root_6", "priority": 0.42603550295857995, "width": "100%", "height": 30, "hidden": false, "itemName": "Group 7", "widthFlexible": true }, { "gutter": 0, "items": [{ "gutter": 0, "items": [], "id": "root_2_0", "priority": 1, "width": "55%", "height": 30, "hidden": false, "itemName": "Group 5", "widthFlexible": true }, { "width": "45%", "height": 30, "priority": 0.6966317705962677, "id": "3", "itemName": "<div>", "hidden": false, "widthFlexible": true }], "id": "root_2", "priority": 0.39326354119253537, "width": "100%", "height": 30, "hidden": false, "itemName": "Group 3", "widthFlexible": true }, { "gutter": 0, "items": [{ "gutter": 0, "items": [], "id": "root_3_0", "priority": 1, "width": "65%", "height": 30, "hidden": false, "itemName": "Group 6", "widthFlexible": true }, { "width": "35%", "height": 30, "priority": 0.6815062497811701, "id": "4", "itemName": "<div>", "hidden": false, "widthFlexible": true }], "id": "root_3", "priority": 0.3630124995623404, "width": "100%", "height": 30, "hidden": false, "itemName": "Group 4", "widthFlexible": true }, { "gutter": 0, "items": [{ "gutter": 0, "items": [], "id": "root_4_0", "priority": 1, "width": "75%", "height": 30, "hidden": false, "itemName": "Group 8", "widthFlexible": true }, { "width": "25%", "height": 30, "priority": 0.667544230567234, "id": "5", "itemName": "<div>", "hidden": false, "widthFlexible": true }], "id": "root_4", "priority": 0.33508846113446805, "width": "100%", "height": 30, "hidden": false, "itemName": "Group 5", "widthFlexible": true }, { "gutter": 0, "items": [{ "gutter": 0, "items": [], "id": "root_5_0", "priority": 1, "width": "85%", "height": 30, "hidden": false, "itemName": "Group 9", "widthFlexible": true }, { "width": "15%", "height": 30, "priority": 0.6546562128312929, "id": "6", "itemName": "<div>", "hidden": false, "widthFlexible": true }], "id": "root_5", "priority": 0.30931242566258593, "width": "100%", "height": 30, "hidden": false, "itemName": "Group 6", "widthFlexible": true }], "width": 990, "precalculateHeight": true, "itemName": "st2" },
setup3: { "id": "root", "direction": "horizontal", "gutter": 20, "items": [{ "priority": 0.5, "id": "0", "itemName": "<div>", "hidden": false, "precalculateWidth": true, "precalculateHeight": true, "widthFlexible": true }, { "priority": 0.4, "id": "1", "itemName": "<div>", "hidden": false, "precalculateWidth": true, "precalculateHeight": true, "widthFlexible": true }, { "priority": 0.32000000000000006, "id": "2", "itemName": "<div>", "hidden": false, "precalculateWidth": true, "precalculateHeight": true, "widthFlexible": true }, { "priority": 0.25600000000000006, "id": "3", "itemName": "<div>", "hidden": false, "widthFlexible": true, "precalculateWidth": true, "precalculateHeight": true }, { "priority": 0.20480000000000007, "id": "4", "itemName": "<div>", "hidden": false, "precalculateWidth": true, "precalculateHeight": true, "heightFlexible": false, "widthFlexible": true }], "width": 990, "precalculateHeight": true, "itemName": "st2" },
setup4: { "id": "root", "direction": "horizontal", "gutter": 20, "items": [{ "width": "20%", "height": 30, "priority": 1, "id": "4", "itemName": "5", "hidden": false, "widthFlexible": true }, { "width": "20%", "height": 30, "priority": 0.725, "id": "0", "itemName": "1", "hidden": false, "widthFlexible": true }, { "width": "20%", "height": 30, "priority": 0.4, "id": "1", "itemName": "2", "hidden": false, "widthFlexible": true }, { "width": "20%", "height": 30, "priority": 0.32000000000000006, "id": "2", "itemName": "3", "hidden": false, "widthFlexible": true }, { "width": "20%", "height": 30, "priority": 0.25600000000000006, "id": "3", "itemName": "4", "hidden": false, "widthFlexible": true }], "width": 990, "precalculateHeight": true, "itemName": "st2" },
setup5: { "id": "root", "direction": "horizontal", "gutter": 20, "items": [{ "width": "20%", "height": 30, "priority": 0.725, "id": "0", "itemName": "1", "hidden": false, "widthFlexible": true }, { "width": "20%", "height": 30, "priority": 0.4, "id": "1", "itemName": "2", "hidden": false, "widthFlexible": true }, { "width": "20%", "height": 30, "priority": 0.32000000000000006, "id": "2", "itemName": "3", "hidden": false, "widthFlexible": true }, { "width": "20%", "height": 30, "priority": 0.25600000000000006, "id": "3", "itemName": "4", "hidden": false, "widthFlexible": true }, { "width": "20%", "height": 30, "priority": 0.1, "id": "4", "itemName": "5", "hidden": false, "widthFlexible": true }], "width": 990, "precalculateHeight": true, "itemName": "st2" },
setup5: { "id": "root", "direction": "horizontal", "gutter": 20, "rightToLeft": true, "items": [{ "width": "20%", "height": 30, "priority": 0.725, "id": "0", "itemName": "1", "hidden": false, "widthFlexible": true }, { "width": "20%", "height": 30, "priority": 0.4, "id": "1", "itemName": "2", "hidden": false, "widthFlexible": true }, { "width": "20%", "height": 30, "priority": 0.32000000000000006, "id": "2", "itemName": "3", "hidden": false, "widthFlexible": true }, { "width": "20%", "height": 30, "priority": 0.25600000000000006, "id": "3", "itemName": "4", "hidden": false, "widthFlexible": true }, { "width": "20%", "height": 30, "priority": 0.1, "id": "4", "itemName": "5", "hidden": false, "widthFlexible": true }], "width": 990, "precalculateHeight": true, "itemName": "st2" },
};

document.addEventListener("polymer-ready", function () {
Expand Down

0 comments on commit 10a53be

Please sign in to comment.