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

Side by Side Diff: third_party/polymer/components-chromium/core-layout-grid/core-layout-grid-extracted.js

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

Powered by Google App Engine
This is Rietveld 408576698