OLD | NEW |
(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> |
OLD | NEW |