Skip to content

Commit 986be58

Browse files
author
Alex Ford
committed
Remove mixin and add grid interface
1 parent f989513 commit 986be58

File tree

3 files changed

+246
-102
lines changed

3 files changed

+246
-102
lines changed

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

Lines changed: 10 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,5 @@
11
import Ember from 'ember';
2-
import Grid from 'ember-collection/layouts/grid';
3-
4-
class GridInterface extends Grid {
5-
get length() {
6-
return this.size;
7-
}
8-
set length (num) {
9-
Ember.set(this, 'size', num);
10-
}
11-
12-
contentSize(w, h) {
13-
let result = Grid.prototype.contentSize.call(this, w, h);
14-
let args = Array.prototype.slice.call(arguments);
15-
Ember.set(this, '_contentSize', {args: args, result: result});
16-
console.log(`contentSize(${w}, ${h}) => `, result);
17-
return result;
18-
}
19-
20-
indexAt(x, y, w, h) {
21-
let result = Grid.prototype.indexAt.call(this, x, y, w, h);
22-
let args = Array.prototype.slice.call(arguments);
23-
Ember.set(this, '_indexAt', {args: args, result: result});
24-
console.log(`indexAt(${x}, ${y}, ${w}, ${h}) => `, result);
25-
return result;
26-
}
27-
28-
count(x, y, w, h) {
29-
let result = Grid.prototype.count.call(this, x, y, w, h);
30-
let args = Array.prototype.slice.call(arguments);
31-
Ember.set(this, '_count', {args: args, result: result});
32-
console.log(`count(${x}, ${y}, ${w}, ${h}) => `, result);
33-
return result;
34-
}
35-
36-
formatItemStyle(itemIndex, clientWidth, clientHeight) {
37-
let formatItemStyle = Grid.prototype.formatItemStyle.call(this, itemIndex, clientWidth, clientHeight);
38-
console.log(`formatItemStyle(${itemIndex}, ${clientWidth}, ${clientHeight}) => `, formatItemStyle);
39-
return formatItemStyle;
40-
}
41-
}
2+
import { FixedGridInterface } from '../interface/grid-interface';
423

434
export default Ember.Controller.extend({
445
itemWidth: 100,
@@ -93,66 +54,14 @@ export default Ember.Controller.extend({
9354
}
9455
},
9556

96-
grid: Ember.computed('itemWidth', 'itemHeight', function() {
97-
return new GridInterface(this.get('itemWidth'), this.get('itemHeight'));
98-
}),
99-
100-
markdown: Ember.computed('grid.size', 'grid._contentSize', 'grid._indexAt', 'grid._count', function() {
101-
if(this.get('grid.size') < 1){return '';}
102-
return this.getGridContentSize() + '\n' +
103-
this.getGridIndexAt() + '\n' +
104-
this.getGridCount();
57+
fixedGrid: Ember.computed('itemWidth', 'itemHeight', function() {
58+
return new FixedGridInterface(this.get('itemWidth'), this.get('itemHeight'));
10559
}),
106-
107-
/*
108-
Reactive Javascript Markdown Strings
109-
TODO: Style this better or move to a mixin?
110-
*/
111-
112-
getGridContentSize() {
113-
let result = Grid.prototype.contentSize.apply(
114-
this.get('grid'), this.get('grid._contentSize.args')
115-
);
116-
return `\n\
117-
/**
118-
* Size of the content area
119-
*
120-
* contentSize(containerWidth, containerHeight)
121-
*/
122-
contentSize: function(${this.get('grid._contentSize.args').join(', ')}) {
123-
return ${this.toString(result)};
124-
}`;
125-
},
126-
127-
getGridIndexAt() {
128-
let result = Grid.prototype.indexAt.apply(
129-
this.get('grid'), this.get('grid._indexAt.args')
130-
);
131-
return `/**
132-
* Index of the first visible item
133-
*
134-
* indexAt(offsetX, offsetY, containerWidth, containerHeight)
135-
*/
136-
indexAt: function(${this.get('grid._indexAt.args').join(', ')}) {
137-
return ${this.toString(result)};
138-
}`;
139-
},
140-
141-
getGridCount() {
142-
let result = Grid.prototype.count.apply(
143-
this.get('grid'), this.get('grid._count.args')
144-
);
145-
return `/**
146-
* Return the number of items to display
147-
*
148-
* count(offsetX, offsetY, containerWidth, containerHeight)
149-
*/
150-
count: function(${this.get('grid._count.args').join(', ')}) {
151-
return ${this.toString(result)};
152-
}`;
153-
},
154-
155-
toString(result) {
156-
return JSON.stringify(result).replace(/:/g, ': ').replace(/"/g, '');
157-
}
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+
})
15867
});

‎tests/dummy/app/interface/grid-interface.js

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
import Ember from 'ember';
2+
import FixedGrid from 'ember-collection/layouts/grid';
3+
import MixedGrid from 'ember-collection/layouts/mixed-grid';
4+
import PercentageColumns from 'ember-collection/layouts/percentage-columns';
5+
6+
export class FixedGridInterface extends FixedGrid {
7+
get length() {
8+
return this._size;
9+
}
10+
set length (num) {
11+
Ember.set(this, '_size', num);
12+
}
13+
14+
contentSize() {
15+
let result = super.contentSize(...arguments);
16+
let [...args] = arguments;
17+
Ember.set(this, '_contentSize', {args: args, result: result});
18+
console.log(`contentSize(${args.join(', ')}) => `, result);
19+
return result;
20+
}
21+
22+
indexAt() {
23+
let result = super.indexAt(...arguments);
24+
let [...args] = arguments;
25+
Ember.set(this, '_indexAt', {args: args, result: result});
26+
console.log(`indexAt(${args.join(', ')}) => `, result);
27+
return result;
28+
}
29+
30+
count() {
31+
let result = super.count(...arguments);
32+
let [...args] = arguments;
33+
Ember.set(this, '_count', {args: args, result: result});
34+
console.log(`count(${args.join(', ')}) => `, result);
35+
return result;
36+
}
37+
38+
formatItemStyle() {
39+
let result = super.formatItemStyle(...arguments);
40+
let [...args] = arguments;
41+
console.log(`formatItemStyle(${args.join(', ')}) => `, result);
42+
return result;
43+
}
44+
45+
get markdownContentSize() {
46+
return `/**
47+
* Size of all items (visible/invisible) in container
48+
*
49+
* contentSize(containerWidth, containerHeight)
50+
*/
51+
contentSize: function(${this._contentSize.args.join(', ')}) {
52+
return ${this.toString(this._contentSize.result)};
53+
}`;
54+
}
55+
56+
get markdownIndexAt() {
57+
return `/**
58+
* Index of the first visible item
59+
*
60+
* indexAt(offsetX, offsetY, containerWidth, containerHeight)
61+
*/
62+
indexAt: function(${this._indexAt.args.join(', ')}) {
63+
return ${this.toString(this._indexAt.result)};
64+
}`;
65+
}
66+
67+
get markdownCount() {
68+
return `/**
69+
* Number of items to display in container
70+
*
71+
* count(offsetX, offsetY, containerWidth, containerHeight)
72+
*/
73+
count: function(${this._count.args.join(', ')}) {
74+
return ${this.toString(this._count.result)};
75+
}`;
76+
}
77+
78+
toString(result) {
79+
return JSON.stringify(result).replace(/:/g, ': ').replace(/"/g, '');
80+
}
81+
}
82+
83+
export class MixedGridInterface extends MixedGrid {
84+
get length() {
85+
return this._size;
86+
}
87+
set length (num) {
88+
Ember.set(this, '_size', num);
89+
}
90+
91+
contentSize() {
92+
let result = super.contentSize(...arguments);
93+
let [...args] = arguments;
94+
Ember.set(this, '_contentSize', {args: args, result: result});
95+
console.log(`contentSize(${args.join(', ')}) => `, result);
96+
return result;
97+
}
98+
99+
indexAt() {
100+
let result = super.indexAt(...arguments);
101+
let [...args] = arguments;
102+
Ember.set(this, '_indexAt', {args: args, result: result});
103+
console.log(`indexAt(${args.join(', ')}) => `, result);
104+
return result;
105+
}
106+
107+
count() {
108+
let result = super.count(...arguments);
109+
let [...args] = arguments;
110+
Ember.set(this, '_count', {args: args, result: result});
111+
console.log(`count(${args.join(', ')}) => `, result);
112+
return result;
113+
}
114+
115+
formatItemStyle() {
116+
let result = super.formatItemStyle(...arguments);
117+
let [...args] = arguments;
118+
console.log(`formatItemStyle(${args.join(', ')}) => `, result);
119+
return result;
120+
}
121+
122+
get markdownContentSize() {
123+
return `/**
124+
* Size of all items (visible/invisible) in container
125+
*
126+
* contentSize(containerWidth, containerHeight)
127+
*/
128+
contentSize: function(${this._contentSize.args.join(', ')}) {
129+
return ${this.toString(this._contentSize.result)};
130+
}`;
131+
}
132+
133+
get markdownIndexAt() {
134+
return `/**
135+
* Index of the first visible item
136+
*
137+
* indexAt(offsetX, offsetY, containerWidth, containerHeight)
138+
*/
139+
indexAt: function(${this._indexAt.args.join(', ')}) {
140+
return ${this.toString(this._indexAt.result)};
141+
}`;
142+
}
143+
144+
get markdownCount() {
145+
return `/**
146+
* Number of items to display in container
147+
*
148+
* count(offsetX, offsetY, containerWidth, containerHeight)
149+
*/
150+
count: function(${this._count.args.join(', ')}) {
151+
return ${this.toString(this._count.result)};
152+
}`;
153+
}
154+
155+
toString(result) {
156+
return JSON.stringify(result).replace(/:/g, ': ').replace(/"/g, '');
157+
}
158+
}
159+
160+
export class PercentageColumnsInterface extends PercentageColumns {
161+
get length() {
162+
return this._size;
163+
}
164+
set length (num) {
165+
Ember.set(this, '_size', num);
166+
}
167+
168+
contentSize() {
169+
let result = super.contentSize(...arguments);
170+
let [...args] = arguments;
171+
Ember.set(this, '_contentSize', {args: args, result: result});
172+
console.log(`contentSize(${args.join(', ')}) => `, result);
173+
return result;
174+
}
175+
176+
indexAt() {
177+
let result = super.indexAt(...arguments);
178+
let [...args] = arguments;
179+
Ember.set(this, '_indexAt', {args: args, result: result});
180+
console.log(`indexAt(${args.join(', ')}) => `, result);
181+
return result;
182+
}
183+
184+
count() {
185+
let result = super.count(...arguments);
186+
let [...args] = arguments;
187+
Ember.set(this, '_count', {args: args, result: result});
188+
console.log(`count(${args.join(', ')}) => `, result);
189+
return result;
190+
}
191+
192+
formatItemStyle() {
193+
let result = super.formatItemStyle(...arguments);
194+
let [...args] = arguments;
195+
console.log(`formatItemStyle(${args.join(', ')}) => `, result);
196+
return result;
197+
}
198+
199+
get markdownContentSize() {
200+
return `/**
201+
* Size of all items (visible/invisible) in container
202+
*
203+
* contentSize(containerWidth, containerHeight)
204+
*/
205+
contentSize: function(${this._contentSize.args.join(', ')}) {
206+
return ${this.toString(this._contentSize.result)};
207+
}`;
208+
}
209+
210+
get markdownIndexAt() {
211+
return `/**
212+
* Index of the first visible item
213+
*
214+
* indexAt(offsetX, offsetY, containerWidth, containerHeight)
215+
*/
216+
indexAt: function(${this._indexAt.args.join(', ')}) {
217+
return ${this.toString(this._indexAt.result)};
218+
}`;
219+
}
220+
221+
get markdownCount() {
222+
return `/**
223+
* Number of items to display in container
224+
*
225+
* count(offsetX, offsetY, containerWidth, containerHeight)
226+
*/
227+
count: function(${this._count.args.join(', ')}) {
228+
return ${this.toString(this._count.result)};
229+
}`;
230+
}
231+
232+
toString(result) {
233+
return JSON.stringify(result).replace(/:/g, ': ').replace(/"/g, '');
234+
}
235+
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
estimated-height=containerHeight
3030
estimated-width=containerWidth
3131
buffer=10
32-
cell-layout=grid
32+
cell-layout=fixedGrid
3333
scroll-left=scrollLeft
3434
scroll-top=scrollTop
3535
scroll-change=(action "scrollChange")

0 commit comments

Comments
 (0)