third_party/polymer/components/core-layout-trbl/core-slide.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9
  10 <link rel="import" href="../polymer/polymer.html">
  11
  12 <polymer-element name="core-slide" attributes="open closed vertical target targetId">
  13
  14   <template>
  15
  16     <style>
  17       :host {
  18         display: none;
  19       }
  20     </style>
  21
  22   </template>
  23
  24   <script>
  25
  26     Polymer('core-slide', {
  27
  28       closed: false,
  29       open: true,
  30       vertical: false,
  31       targetId: '',
  32       target: null,
  33
  34       ready: function() {
  35         this.setAttribute('nolayout', '');
  36       },
  37
  38       attached: function() {
  39         this.target = this.parentNode;
  40       },
  41
  42       targetIdChanged: function() {
  43         var p = this.parentNode;
  44         while (p.parentNode) {p = p.parentNode;};
  45         this.target = p.querySelector('#' + this.targetId);
  46       },
  47
  48       targetChanged: function() {
  49         if (this.closed) {
  50           this.asyncMethod(this.update);
  51         }
  52       },
  53
  54       toggle: function() {
  55         this.open = !this.open;
  56       },
  57
  58       closedChanged: function() {
  59         this.open = !this.closed;
  60       },
  61
  62       openChanged: function() {
  63         this.asyncMethod(this.update);
  64       },
  65
  66       update: function() {
  67         this.closed = !this.open;
  68         if (this.target) {
  69           if (this.vertical) {
  70             if (this.target.style.top !== '') {
  71               this.updateTop();
  72             } else {
  73               this.updateBottom();
  74             }
  75           } else {
  76             if (this.target.style.left !== '') {
  77               this.updateLeft();
  78             } else {
  79               this.updateRight();
  80             }
  81           }
  82         }
  83       },
  84
  85       updateLeft: function() {
  86         var w = this.target.offsetWidth;
  87         var l = this.open ? 0 : -w;
  88         this.target.style.left = l + 'px';
  89         var s = this.target.nextElementSibling;
  90         while (s) {
  91           if (!s.hasAttribute('nolayout')) {
  92             if (s.style.left === '' && s.style.right !== '') {
  93               break;
  94             }
  95             l += w;
  96             s.style.left = l + 'px';
  97             w = s.offsetWidth;
  98           }
  99           s = s.nextElementSibling;
 100         }
 101       },
 102
 103       updateRight: function() {
 104         var w = this.target.offsetWidth;
 105         var r = this.open ? 0 : -w;
 106         this.target.style.right = r + 'px';
 107         //var s = this.target.previousElementSibling;
 108         var s = previousElementSibling(this.target);
 109         while (s) {
 110           if (!s.hasAttribute('nolayout')) {
 111             if (s.style.right === '' && s.style.left !== '') {
 112               break;
 113             }
 114             r += w;
 115             s.style.right = r + 'px';
 116             w = s.offsetWidth;
 117           }
 118           //if (s == s.previousElementSibling) {
 119           //  console.error(s.localName + ' is its own sibling', s);
 120           //  break;
 121           //}
 122           //s = s.previousElementSibling;
 123           s = previousElementSibling(s);
 124         }
 125       },
 126
 127       updateTop: function() {
 128         var h = this.target.offsetHeight;
 129         var t = this.open ? 0 : -h;
 130         this.target.style.top = t + 'px';
 131         var s = this.target.nextElementSibling;
 132         while (s) {
 133           if (!s.hasAttribute('nolayout')) {
 134             if (s.style.top === '' && s.style.bottom !== '') {
 135               break;
 136             }
 137             t += h;
 138             s.style.top = t + 'px';
 139             h = s.offsetHeight;
 140           }
 141           s = s.nextElementSibling;
 142         }
 143       },
 144
 145       updateBottom: function() {
 146         var h = this.target.offsetHeight;
 147         var b = this.open ? 0 : -h;
 148         this.target.style.bottom = b + 'px';
 149         //var s = this.target.previousElementSibling;
 150         var s = previousElementSibling(this.target);
 151         while (s) {
 152           if (!s.hasAttribute('nolayout')) {
 153             if (s.style.bottom === '' && s.style.top !== '') {
 154               break;
 155             }
 156             b = b + h;
 157             s.style.bottom = b + 'px';
 158             h = s.offsetHeight;
 159           }
 160           //if (s == s.previousElementSibling) {
 161           //  console.error(s.localName + ' is its own sibling', s);
 162           //  break;
 163           //}
 164           //s = s.previousElementSibling;
 165           s = previousElementSibling(s);
 166         }
 167       }
 168
 169     });
 170
 171     // TODO(sjmiles): temporary workaround for b0rked property in ShadowDOMPolyfill
 172     function previousElementSibling(e) {
 173       do {
 174         e = e.previousSibling;
 175       } while (e && e.nodeType !== Node.ELEMENT_NODE);
 176       return e;
 177     };
 178
 179   </script>
 180
 181 </polymer-element>