src/third_party/polymer/components-chromium/core-layout-trbl/core-layout-trbl-extracted.js

   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