Skip to content

Commit 5c12011

Browse files
author
Alex Ford
committed
Add Property To Toggle Layouts on all Grid Demos
1 parent 986be58 commit 5c12011

File tree

8 files changed

+177
-55
lines changed

8 files changed

+177
-55
lines changed

‎tests/dummy/app/controllers/mixed.js

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,22 @@
11
import Ember from 'ember';
2-
export default Ember.Controller.extend({});
2+
import { MixedGridInterface } from '../interface/grid-interface';
3+
4+
export default Ember.Controller.extend({
5+
showLayout: false,
6+
mixedGrid: Ember.computed('model', function() {
7+
return new MixedGridInterface(this.get('model'));
8+
}),
9+
markdown: Ember.computed('mixedGrid._size', 'mixedGrid._contentSize', 'mixedGrid._indexAt', 'mixedGrid._count', function() {
10+
if(!(this.get('mixedGrid._size') || 0)){ return ''; }
11+
return '\n' +
12+
this.get('mixedGrid.markdownContentSize') + '\n' +
13+
this.get('mixedGrid.markdownIndexAt') + '\n' +
14+
this.get('mixedGrid.markdownCount');
15+
}),
16+
17+
actions: {
18+
toggleLayout: function() {
19+
this.toggleProperty('showLayout');
20+
}
21+
}
22+
});

‎tests/dummy/app/controllers/percentages.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,22 @@
11
import Ember from 'ember';
2+
import { PercentageColumnsInterface } from '../interface/grid-interface';
23

34
export default Ember.Controller.extend({
45
columns: Ember.computed(function() {
56
return [20, 60, 20];
67
}),
8+
showLayout: false,
9+
percentageGrid: Ember.computed('model.length', 'columns', function() {
10+
return new PercentageColumnsInterface(this.get('model.length'), this.get('columns'), 50);
11+
}),
12+
13+
markdown: Ember.computed('percentageGrid._size', 'percentageGrid._contentSize', 'percentageGrid._indexAt', 'percentageGrid._count', function() {
14+
if(!(this.get('percentageGrid._size') || 0)){ return ''; }
15+
return '\n' +
16+
this.get('percentageGrid.markdownContentSize') + '\n' +
17+
this.get('percentageGrid.markdownIndexAt') + '\n' +
18+
this.get('percentageGrid.markdownCount');
19+
}),
720
actions: {
821
changeColumn: function(col) {
922
switch (col) {
@@ -26,6 +39,9 @@ export default Ember.Controller.extend({
2639
this.set('columns', [50, 50]);
2740
break;
2841
}
42+
},
43+
toggleLayout: function() {
44+
this.toggleProperty('showLayout');
2945
}
3046
}
3147
});

‎tests/dummy/app/controllers/scroll-position.js

Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,20 @@ export default Ember.Controller.extend({
99
scrollLeft: 0,
1010
scrollTop: 0,
1111

12+
showLayout: false,
13+
14+
fixedGrid: Ember.computed('itemWidth', 'itemHeight', function() {
15+
return new FixedGridInterface(this.get('itemWidth'), this.get('itemHeight'));
16+
}),
17+
18+
markdown: Ember.computed('fixedGrid._size', 'fixedGrid._contentSize', 'fixedGrid._indexAt', 'fixedGrid._count', function() {
19+
if(!(this.get('fixedGrid._size') || 0)){ return ''; }
20+
return '\n' +
21+
this.get('fixedGrid.markdownContentSize') + '\n' +
22+
this.get('fixedGrid.markdownIndexAt') + '\n' +
23+
this.get('fixedGrid.markdownCount');
24+
}),
25+
1226
actions: {
1327
updateContainerWidth: function(value) {
1428
this.set('containerWidth', parseInt(value, 10));
@@ -51,17 +65,10 @@ export default Ember.Controller.extend({
5165
scrollLeft: scrollLeft,
5266
scrollTop: scrollTop
5367
});
54-
}
55-
},
68+
},
5669

57-
fixedGrid: Ember.computed('itemWidth', 'itemHeight', function() {
58-
return new FixedGridInterface(this.get('itemWidth'), this.get('itemHeight'));
59-
}),
60-
markdown: Ember.computed('fixedGrid._size', 'fixedGrid._contentSize', 'fixedGrid._indexAt', 'fixedGrid._count', function() {
61-
if(!(this.get('fixedGrid._size') || 0)){ return ''; }
62-
return '\n' +
63-
this.get('fixedGrid.markdownContentSize') + '\n' +
64-
this.get('fixedGrid.markdownIndexAt') + '\n' +
65-
this.get('fixedGrid.markdownCount');
66-
})
70+
toggleLayout: function() {
71+
this.toggleProperty('showLayout');
72+
}
73+
}
6774
});

‎tests/dummy/app/controllers/simple.js

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
/*jshint multistr: true */
21
import Ember from 'ember';
2+
import { FixedGridInterface } from '../interface/grid-interface';
33

44
function shuffle(array) {
55
var currentIndex = array.length, temporaryValue, randomIndex ;
@@ -26,7 +26,19 @@ export default Ember.Controller.extend({
2626
containerWidth: 315,
2727
containerHeight: 600,
2828

29-
testMarkdown: "var a = 13;",
29+
showLayout: false,
30+
31+
fixedGrid: Ember.computed('itemWidth', 'itemHeight', function() {
32+
return new FixedGridInterface(this.get('itemWidth'), this.get('itemHeight'));
33+
}),
34+
35+
markdown: Ember.computed('fixedGrid._size', 'fixedGrid._contentSize', 'fixedGrid._indexAt', 'fixedGrid._count', function() {
36+
if(!(this.get('fixedGrid._size') || 0)){ return ''; }
37+
return '\n' +
38+
this.get('fixedGrid.markdownContentSize') + '\n' +
39+
this.get('fixedGrid.markdownIndexAt') + '\n' +
40+
this.get('fixedGrid.markdownCount');
41+
}),
3042

3143
actions: {
3244
updateContainerWidth: function(value) {
@@ -67,6 +79,10 @@ export default Ember.Controller.extend({
6779
itemWidth: 50,
6880
itemHeight: 100
6981
});
82+
},
83+
84+
toggleLayout: function() {
85+
this.toggleProperty('showLayout');
7086
}
7187
}
7288
});

‎tests/dummy/app/templates/mixed.hbs

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,24 @@
1-
<div class="mixed" style="position:relative;height:500px">
2-
{{#ember-collection items=model estimated-height=800 estimated-width=500 buffer=10 cell-layout=(mixed-grid-layout model) as |item index|}}
3-
<div class="list-item">
4-
{{item.name}}
1+
<h3>Mixed Grid</h3>
2+
<button {{action 'toggleLayout'}}>
3+
{{#if showLayout}}
4+
Hide Custom Layout Template
5+
{{else}}
6+
Show Custom Layout Template
7+
{{/if}}
8+
</button>
9+
<hr />
10+
11+
<div class="simple-wrapper" style="box-sizing:border-box;width:100%;">
12+
{{#if showLayout}}
13+
<div class="simple-layout" style="float:left;width:40%;margin-top:-12px;padding-right:20px;">
14+
{{highlight-js code=markdown lang="javascript"}}
515
</div>
6-
{{/ember-collection}}
16+
{{/if}}
17+
<div class="mixed" style="float:left;position:relative;height:500px;width:{{if showLayout "60%" "100%"}}">
18+
{{#ember-collection items=model estimated-height=800 estimated-width=500 buffer=10 cell-layout=mixedGrid as |item index|}}
19+
<div class="list-item">
20+
{{item.name}}
21+
</div>
22+
{{/ember-collection}}
23+
</div>
724
</div>

‎tests/dummy/app/templates/percentages.hbs

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,30 @@
1+
<h3>Percentage Column Widths</h3>
2+
<button {{action 'toggleLayout'}}>
3+
{{#if showLayout}}
4+
Hide Custom Layout Template
5+
{{else}}
6+
Show Custom Layout Template
7+
{{/if}}
8+
</button>
9+
<hr />
110
<button {{action 'changeColumn' 1}}>25-50-25</button>
211
<button {{action 'changeColumn' 2}}>20-20-40-20</button>
312
<button {{action 'changeColumn' 3}}>33-33-33</button>
413
<button {{action 'changeColumn' 4}}>50-50</button>
514
<button {{action 'changeColumn' 5}}>100</button>
615
<hr />
7-
<div class="mixed" style="position:relative;height:500px;">
8-
{{#ember-collection items=model estimated-height=800 estimated-width=1000 buffer=10 cell-layout=(percentage-columns-layout model.length columns 50) as |item index|}}
9-
<div class="list-item">
10-
{{item.name}}
16+
17+
<div class="simple-wrapper" style="box-sizing:border-box;width:100%;">
18+
{{#if showLayout}}
19+
<div class="simple-layout" style="float:left;width:40%;margin-top:-12px;padding-right:20px;">
20+
{{highlight-js code=markdown lang="javascript"}}
1121
</div>
12-
{{/ember-collection}}
22+
{{/if}}
23+
<div class="percent" style="float:left;position:relative;height:500px;width:{{if showLayout "60%" "100%"}}">
24+
{{#ember-collection items=model estimated-height=800 estimated-width=500 buffer=10 cell-layout=percentageGrid as |item index|}}
25+
<div class="list-item">
26+
{{item.name}}
27+
</div>
28+
{{/ember-collection}}
29+
</div>
1330
</div>

‎tests/dummy/app/templates/scroll-position.hbs

Lines changed: 36 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,43 @@
11
<h3>Scroll Position</h3>
2-
<button {{action 'makeSquare'}}>Square</button>
3-
<button {{action 'makeRow'}}>Row</button>
4-
<button {{action 'makeLongRect'}}>Long Rectangle</button>
5-
<button {{action 'makeTallRect'}}>Tall Rectable</button>
2+
<button {{action 'toggleLayout'}}>
3+
{{#if showLayout}}
4+
Hide Custom Layout Template
5+
{{else}}
6+
Show Custom Layout Template
7+
{{/if}}
8+
</button>
9+
<hr />
610

7-
<p>
8-
Container Width: <input type='range' min=200 max=600 value={{containerWidth}} oninput={{action 'updateContainerWidth' value='target.value'}}> {{containerWidth}}
9-
Container Height: <input type='range' min=200 max=1000 value={{containerHeight}} oninput={{action 'updateContainerHeight' value='target.value'}}> {{containerHeight}}
11+
<div class="items-sizes" style="margin-bottom:20px">
12+
<button {{action 'makeSquare'}}>Square</button>
13+
<button {{action 'makeRow'}}>Row</button>
14+
<button {{action 'makeLongRect'}}>Long Rectangle</button>
15+
<button {{action 'makeTallRect'}}>Tall Rectable</button>
16+
<p style="margin-top:5px">
17+
<b>Item Height:</b> {{itemHeight}}
18+
<b>Item Width:</b> {{itemWidth}}
1019
</p>
11-
<p>
12-
Item Height: {{itemHeight}}
13-
Item Width: {{itemWidth}}
14-
</p>
15-
<p>
16-
Scroll Left: {{input value=scrollLeft}}
17-
Scroll Top: {{input value=scrollTop}}
18-
</p>
19-
<p>Note: The usage of this component remembers its scroll position. Try it by navigating away from this route and then returning.</p>
20-
<hr />
20+
</div>
2121

22-
<div class="wrapper" style="box-sizing:border-box;">
23-
<div class="simple-layout" style="float:left;width:40%;margin-top:-12px;padding-right:20px;">
24-
{{highlight-js code=markdown lang="javascript"}}
25-
</div>
26-
<div class="simple-list" style={{{concat 'float:left;width:60%;position:relative;width:' containerWidth 'px;height:' containerHeight 'px;'}}}>
22+
<p>
23+
Container Width: {{containerWidth}} <input type='range' min=200 max=650 value={{containerWidth}} oninput={{action 'updateContainerWidth' value='target.value'}}>
24+
Container Height: {{containerHeight}} <input type='range' min=200 max=1000 value={{containerHeight}} oninput={{action 'updateContainerHeight' value='target.value'}}>
25+
</p>
26+
27+
<p>
28+
Scroll Left: {{input value=scrollLeft}}
29+
Scroll Top: {{input value=scrollTop}}
30+
</p>
31+
<p>Note: The usage of this component remembers its scroll position. Try it by navigating away from this route and then returning.</p>
32+
<hr />
33+
34+
<div class="simple-wrapper" style="box-sizing:border-box;width:100%;">
35+
{{#if showLayout}}
36+
<div class="simple-layout" style="float:left;width:40%;margin-top:-12px;padding-right:20px;">
37+
{{highlight-js code=markdown lang="javascript"}}
38+
</div>
39+
{{/if}}
40+
<div class="simple-list" style={{{concat 'float:left;position:relative;width:' containerWidth 'px;height:' containerHeight 'px;'}}}>
2741
{{#ember-collection
2842
items=model
2943
estimated-height=containerHeight
@@ -39,5 +53,4 @@
3953
</div>
4054
{{/ember-collection}}
4155
</div>
42-
4356
</div>

‎tests/dummy/app/templates/simple.hbs

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,20 @@
1-
<h3>Simple</h3>
1+
<h3>Fixed Grid</h3>
2+
<button {{action 'toggleLayout'}}>
3+
{{#if showLayout}}
4+
Hide Custom Layout Template
5+
{{else}}
6+
Show Custom Layout Template
7+
{{/if}}
8+
</button>
9+
<hr />
10+
211
<button {{action 'makeSquare'}}>Square</button>
312
<button {{action 'makeRow'}}>Row</button>
413
<button {{action 'makeLongRect'}}>Long Rectangle</button>
514
<button {{action 'makeTallRect'}}>Tall Rectable</button>
615
<button {{action 'shuffle'}}>Shuffle</button>
716
<p>
8-
Container Width: <input type='range' min=200 max=1000 value={{containerWidth}} oninput={{action 'updateContainerWidth' value='target.value'}}> {{containerWidth}}
17+
Container Width: <input type='range' min=200 max=650 value={{containerWidth}} oninput={{action 'updateContainerWidth' value='target.value'}}> {{containerWidth}}
918
Container Height: <input type='range' min=200 max=1000 value={{containerHeight}} oninput={{action 'updateContainerHeight' value='target.value'}}> {{containerHeight}}
1019
</p>
1120
<p>
@@ -14,10 +23,17 @@ Item Width: {{itemWidth}}
1423
</p>
1524
<hr />
1625

17-
<div class="simple-list" style={{{concat 'position:relative;width:' containerWidth 'px;height:' containerHeight 'px;'}}}>
18-
{{#ember-collection items=model buffer=10 cell-layout=(fixed-grid-layout itemWidth itemHeight) as |item index|}}
19-
<div class="list-item">
20-
{{item.name}}
26+
<div class="simple-wrapper" style="box-sizing:border-box;width:100%;">
27+
{{#if showLayout}}
28+
<div class="simple-layout" style="float:left;width:40%;margin-top:-12px;padding-right:20px;">
29+
{{highlight-js code=markdown lang="javascript"}}
2130
</div>
22-
{{/ember-collection}}
31+
{{/if}}
32+
<div class="simple-list" style={{{concat 'overflow-x:hidden;float:left;position:relative;width:' containerWidth 'px;height:' containerHeight 'px;'}}}>
33+
{{#ember-collection items=model buffer=10 cell-layout=fixedGrid as |item index|}}
34+
<div class="list-item">
35+
{{item.name}}
36+
</div>
37+
{{/ember-collection}}
38+
</div>
2339
</div>

0 commit comments

Comments
 (0)