OLD | NEW |
(Empty) | |
| 1 |
| 2 |
| 3 Polymer('core-layout-trbl', { |
| 4 |
| 5 vertical: false, |
| 6 |
| 7 ready: function() { |
| 8 this.setAttribute('nolayout', ''); |
| 9 }, |
| 10 |
| 11 attached: function() { |
| 12 this.asyncMethod(function() { |
| 13 this.prepare(); |
| 14 this.layout(); |
| 15 }); |
| 16 }, |
| 17 |
| 18 prepare: function() { |
| 19 var parent = this.parentNode.host || this.parentNode; |
| 20 // explicit position harmful on <body> |
| 21 if (parent.localName !== 'body') { |
| 22 // may recalc |
| 23 var cs = window.getComputedStyle(parent); |
| 24 if (cs.position === 'static') { |
| 25 parent.style.position = 'relative'; |
| 26 } |
| 27 //parent.style.overflow = 'hidden'; |
| 28 } |
| 29 // changes will cause another recalc at next validation step |
| 30 var stylize = this.stylize, vertical; |
| 31 this.parentNode.childNodes.array().forEach(function(c, i) { |
| 32 if (c.nodeType === Node.ELEMENT_NODE && !c.hasAttribute('nolayout')) { |
| 33 stylize(c, { |
| 34 position: 'absolute', |
| 35 boxSizing: 'border-box', |
| 36 MozBoxSizing: 'border-box', |
| 37 }); |
| 38 // test for auto-vertical |
| 39 if (vertical === undefined) { |
| 40 vertical = (c.offsetWidth == 0 && c.offsetHeight !== 0); |
| 41 } |
| 42 } |
| 43 }); |
| 44 this.vertical = this.vertical || vertical; |
| 45 }, |
| 46 |
| 47 /** |
| 48 * Arrange sibling nodes end-to-end in one dimension. |
| 49 * |
| 50 * Arrangement is horizontal unless the `vertical` |
| 51 * attribute is applied on this node. |
| 52 * |
| 53 * @method layout |
| 54 */ |
| 55 layout: function() { |
| 56 var parent = this.parentNode.host || this.parentNode; |
| 57 var vertical = this.vertical; |
| 58 var ww = 0, hh = 0, pre = [], fit, post = []; |
| 59 var list = pre; |
| 60 // gather element information (at most one recalc) |
| 61 this.parentNode.childNodes.array().forEach(function(c, i) { |
| 62 if (c.nodeType===Node.ELEMENT_NODE && !c.hasAttribute('nolayout')) { |
| 63 var info = { |
| 64 element: c, |
| 65 w: c.offsetWidth, |
| 66 h: c.offsetHeight |
| 67 }; |
| 68 if (!c.hasAttribute('fit') && !c.hasAttribute('flex')) { |
| 69 ww += c.offsetWidth; |
| 70 hh += c.offsetHeight; |
| 71 list.push(info); |
| 72 } else { |
| 73 fit = c; |
| 74 list = post; |
| 75 ww = hh = 0; |
| 76 } |
| 77 } |
| 78 }); |
| 79 // update layout styles (invalidate, no recalc) |
| 80 var v = 0; |
| 81 var mxp = 0, myp = 0; |
| 82 var stylize = this.stylize; |
| 83 pre.forEach(function(info) { |
| 84 if (vertical) { |
| 85 stylize(info.element, { |
| 86 top: v + 'px', right: mxp, height: info.h + 'px', left: mxp |
| 87 }); |
| 88 } else { |
| 89 stylize(info.element, { |
| 90 top: myp, width: info.w + 'px', bottom: myp, left: v + 'px' |
| 91 }); |
| 92 } |
| 93 v += vertical ? info.h : info.w; |
| 94 }); |
| 95 if (fit) { |
| 96 if (vertical) { |
| 97 stylize(fit, { |
| 98 top: v + 'px', right: mxp, bottom: hh + 'px', left: mxp |
| 99 }); |
| 100 } else { |
| 101 stylize(fit, { |
| 102 top: myp, right: ww + 'px', bottom: myp, left: v + 'px' |
| 103 }); |
| 104 } |
| 105 v = vertical ? hh : ww; |
| 106 post.forEach(function(info) { |
| 107 v -= vertical ? info.h : info.w; |
| 108 if (vertical) { |
| 109 stylize(info.element, { |
| 110 height: info.h + 'px', right: mxp, bottom: v + 'px', left: mxp |
| 111 }); |
| 112 } else { |
| 113 stylize(info.element, { |
| 114 top: myp, right: v + 'px', bottom: myp, width: info.w + 'px' |
| 115 }); |
| 116 } |
| 117 }); |
| 118 } |
| 119 }, |
| 120 |
| 121 stylize: function(element, styles) { |
| 122 var style = element.style; |
| 123 Object.keys(styles).forEach(function(k){ |
| 124 style[k] = styles[k]; |
| 125 }); |
| 126 } |
| 127 |
| 128 }); |
| 129 |
| 130 |
OLD | NEW |