Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(152)

Side by Side Diff: pkg/polymer/lib/elements/polymer-grid-layout/polymer-grid-layout.html

Issue 175443005: [polymer] import all elements (Closed) Base URL: https://dart.googlecode.com/svn/branches/bleeding_edge/dart
Patch Set: updated from bower Created 6 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
OLDNEW
(Empty)
1 <link rel="import" href="../polymer/polymer.html">
2
3 <polymer-element name="polymer-grid-layout" attributes="nodes layout auto">
4 <template>
5 </template>
6 <script>
7 (function() {
8 Polymer('polymer-grid-layout', {
9 nodes: null,
10 layout: null,
11 auto: false,
12 created: function() {
13 this.layout = [];
14 },
15 nodesChanged: function() {
16 this.invalidate();
17 },
18 layoutChanged: function() {
19 this.invalidate();
20 },
21 autoNodes: function() {
22 this.nodes = this.parentNode.children.array().filter(
23 function(node) {
24 switch(node.localName) {
25 case 'polymer-grid-layout':
26 case 'style':
27 return false;
28 }
29 return true;
30 }
31 );
32 },
33 invalidate: function() {
34 if (this.layout && this.layout.length) {
35 // job debounces layout, only letting it occur every N ms
36 this.layoutJob = this.job(this.layoutJob, this.relayout);
37 }
38 },
39 relayout: function() {
40 if (!this.nodes || this.auto) {
41 this.autoNodes();
42 }
43 layout(this.layout, this.nodes);
44 this.asyncFire('polymer-grid-layout');
45 }
46 });
47
48 //
49
50 var lineParent;
51
52 function line(axis, p, d) {
53 var l = document.createElement('line');
54 var extent = (axis === 'left' ? 'width' :
55 (axis === 'top' ? 'height' : axis));
56 l.setAttribute('extent', extent);
57 if (d < 0) {
58 axis = (axis === 'left' ? 'right' :
59 (axis === 'top' ? 'bottom' : axis));
60 }
61 p = Math.abs(p);
62 l.style[axis] = p + 'px';
63 l.style[extent] = '0px';
64 lineParent.appendChild(l);
65 }
66
67 var colCount, colOwners, rowCount, rowOwners;
68
69 function matrixillate(matrix) {
70 // mesaure the matrix, must be rectangular
71 rowCount = matrix.length;
72 colCount = rowCount && matrix[0].length || 0;
73 // transpose matrix
74 var transpose = [];
75 for (var i=0; i<colCount; i++) {
76 var c = [];
77 for (var j=0; j<rowCount; j++) {
78 c.push(matrix[j][i]);
79 }
80 transpose.push(c);
81 }
82 // assign sizing control
83 colOwners = findOwners(matrix);
84 rowOwners = findOwners(transpose);
85 //console.log('colOwners', colOwners);
86 //console.log('rowOwners', rowOwners);
87 }
88
89 function findOwners(matrix) {
90 var majCount = matrix.length;
91 var minCount = majCount && matrix[0].length || 0;
92 var owners = [];
93 // for each column (e.g.)
94 for (var i=0; i<minCount; i++) {
95 // array of contained areas
96 var contained = {};
97 // look at each row to find a containing area
98 for (var j=0; j<majCount; j++) {
99 // get the row vector
100 var vector = matrix[j]
101 // node index at [i,j]
102 var nodei = vector[i];
103 // if a node is there
104 if (nodei) {
105 // determine if it bounds this column
106 var owns = false;
107 if (i === 0) {
108 owns = (i === minCount-1) || (nodei !== vector[i+1]);
109 } else if (i === minCount - 1) {
110 owns = (i === 0) || (nodei !== vector[i-1]);
111 } else {
112 owns = nodei !== vector[i-1] && nodei !== vector[i+1];
113 }
114 if (owns) {
115 contained[nodei] = 1;
116 }
117 }
118 // store the owners for this column
119 owners[i] = contained;
120 }
121 }
122 return owners;
123 }
124
125 var nodes;
126
127 function colWidth(i) {
128 for (var col in colOwners[i]) {
129 col = Number(col);
130 if (col === 0) {
131 return 96;
132 }
133 var node = nodes[col - 1];
134 if (node.hasAttribute('h-flex') || node.hasAttribute('flex')) {
135 return -1;
136 }
137 var w = node.offsetWidth;
138 //console.log('colWidth(' + i + ') ==', w);
139 return w;
140 }
141 return -1;
142 }
143
144 function rowHeight(i) {
145 for (var row in rowOwners[i]) {
146 row = Number(row);
147 if (row === 0) {
148 return 96;
149 }
150 var node = nodes[row - 1];
151 if (node.hasAttribute('v-flex') || node.hasAttribute('flex')) {
152 return -1;
153 }
154 var h = node.offsetHeight;
155 //console.log('rowHeight(' + i + ') ==', h);
156 return h;
157 }
158 return -1;
159 }
160
161 var m = 0;
162
163 function railize(count, sizeFn) {
164 //
165 // create rails for `count` tracks using
166 // sizing function `sizeFn(trackNo)`
167 //
168 // for n tracks there are (n+1) rails
169 //
170 // |track|track|track|
171 // 0|->sz0|->sz1|<-sz2|0
172 //
173 // |track|track|track|
174 // 0|->sz0| |<-sz2|0
175 //
176 // there can be one elastic track per set
177 //
178 // |track|track|track|track|
179 // 0|-->s0|-->s1|<--s1|<--s2|0
180 //
181 // sz1 spans multiple tracks which makes
182 // it elastic (it's underconstrained)
183 //
184 var rails = [];
185 var a = 0;
186 for (var i=0, x; i<count; i++) {
187 rails[i] = {p: a, s: 1};
188 x = sizeFn(i) + m + m;
189 if (x == -1) {
190 break;
191 }
192 a += x;
193 }
194 if (i === count) {
195 rails[i] = {p: 0, s: -1};
196 }
197 var b = 0;
198 for (var ii=count, x; ii>i; ii--) {
199 rails[ii] = {p: b, s: -1};
200 x = sizeFn(ii - 1) + m + m;
201 if (x !== -1) {
202 b += x;
203 }
204 }
205 return rails;
206 }
207
208 // TODO(sjmiles): this code tries to preserve actual position,
209 // so 'unposition' is really 'naturalize' or something
210 function unposition(box) {
211 var style = box.style;
212 //style.right = style.bottom = style.width = style.height = '';
213 style.position = 'absolute';
214 style.display = 'inline-block';
215 style.boxSizing = style.mozBoxSizing = 'border-box';
216 }
217
218 function _position(style, maj, min, ext, a, b) {
219 style[maj] = style[min] = '';
220 style[ext] = 'auto';
221 if (a.s < 0 && b.s < 0) {
222 var siz = a.p - b.p - m - m;
223 style[ext] = siz + 'px';
224 var c = 'calc(100% - ' + (b.p + siz + m) + 'px' + ')';
225 style[maj] = '-webkit-' + c;
226 style[maj] = c;
227 } else if (b.s < 0) {
228 style[maj] = a.p + m + 'px';
229 style[min] = b.p + m + 'px';
230 } else {
231 style[maj] = a.p + m + 'px';
232 style[ext] = b.p - a.p - m - m + 'px';
233 }
234 }
235
236 function position(elt, left, right, top, bottom) {
237 _position(elt.style, 'top', 'bottom', 'height', rows[top],
238 rows[bottom]);
239 _position(elt.style, 'left', 'right', 'width', columns[left],
240 columns[right]);
241 }
242
243 function layout(matrix, anodes, alineParent) {
244 //console.group('layout');
245
246 lineParent = alineParent;
247 nodes = anodes;
248 matrixillate(matrix);
249
250 nodes.forEach(unposition);
251
252 columns = railize(colCount, colWidth);
253 rows = railize(rowCount, rowHeight);
254
255 if (alineParent) {
256 //console.group('column rails');
257 columns.forEach(function(c) {
258 //console.log(c.p, c.s);
259 line('left', c.p, c.s);
260 });
261 //console.groupEnd();
262
263 //console.group('row rails');
264 rows.forEach(function(r) {
265 //console.log(r.p, r.s);
266 line('top', r.p, r.s);
267 });
268 //console.groupEnd();
269 }
270
271 //console.group('rail boundaries');
272 nodes.forEach(function(node, i) {
273 // node indices are 1-based
274 var n = i + 1;
275 // boundary rails
276 var l, r, t = 1e10, b = -1e10;
277 matrix.forEach(function(vector, i) {
278 var f = vector.indexOf(n);
279 if (f > -1) {
280 l = f;
281 r = vector.lastIndexOf(n) + 1;
282 t = Math.min(t, i);
283 b = Math.max(b, i) + 1;
284 }
285 });
286 if (l == undefined) {
287 //console.log('unused');
288 node.style.position = 'absolute';
289 var offscreen = node.getAttribute('offscreen');
290 switch (offscreen) {
291 case 'basement':
292 node.style.zIndex = 0;
293 break;
294 case 'left':
295 case 'top':
296 node.style[offscreen] = node.offsetWidth * -2 + 'px';
297 break;
298 case 'right':
299 node.style.left = node.offsetParent.offsetWidth
300 + node.offsetWidth + 'px';
301 break;
302 case 'bottom':
303 node.style.top = node.parentNode.offsetHeight
304 + node.offsetHeight + 'px';
305 break;
306 default:
307 node.style[Math.random() >= 0.5 ? 'left' : 'top'] = '-110%';
308 }
309 //node.style.opacity = 0;
310 node.style.pointerEvents = 'none';
311 } else {
312 node.style.pointerEvents = '';
313 //node.style.opacity = '';
314 //console.log(l, r, t, b);
315 position(node, l, r, t, b);
316 }
317 });
318 //console.groupEnd();
319 //console.groupEnd();
320 }
321
322 })();
323 </script>
324 </polymer-element>
OLDNEW
« no previous file with comments | « pkg/polymer/lib/elements/polymer-grid-layout/metadata.html ('k') | pkg/polymer/lib/elements/polymer-jsonp/.bower.json » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698