Polymer elements added to third_party/polymer.

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

+<!--
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+
+<polymer-element name="core-slide" attributes="open closed vertical target targetId">
+
+  <template>
+
+    <style>
+      :host {   
+        display: none;
+      }
+    </style>
+
+  </template>
+
+  <script>
+
+    Polymer('core-slide', {
+
+      closed: false,
+      open: true,
+      vertical: false,
+      targetId: '',
+      target: null,
+
+      ready: function() {
+        this.setAttribute('nolayout', '');
+      },
+
+      attached: function() {
+        this.target = this.parentNode;
+      },
+
+      targetIdChanged: function() {
+        var p = this.parentNode;
+        while (p.parentNode) {p = p.parentNode;};
+        this.target = p.querySelector('#' + this.targetId);
+      },
+
+      targetChanged: function() {
+        if (this.closed) {
+          this.asyncMethod(this.update);
+        }
+      },
+
+      toggle: function() {
+        this.open = !this.open;
+      },
+
+      closedChanged: function() {
+        this.open = !this.closed;
+      },
+
+      openChanged: function() {
+        this.asyncMethod(this.update);
+      },
+
+      update: function() {
+        this.closed = !this.open;
+        if (this.target) {
+          if (this.vertical) {
+            if (this.target.style.top !== '') {
+              this.updateTop();
+            } else {
+              this.updateBottom();
+            }
+          } else {
+            if (this.target.style.left !== '') {
+              this.updateLeft();
+            } else {
+              this.updateRight();
+            }
+          }
+        }
+      },
+
+      updateLeft: function() {
+        var w = this.target.offsetWidth;
+        var l = this.open ? 0 : -w;
+        this.target.style.left = l + 'px';
+        var s = this.target.nextElementSibling;
+        while (s) {
+          if (!s.hasAttribute('nolayout')) {
+            if (s.style.left === '' && s.style.right !== '') {
+              break;
+            }
+            l += w;
+            s.style.left = l + 'px';
+            w = s.offsetWidth;
+          }
+          s = s.nextElementSibling;
+        }
+      },
+
+      updateRight: function() {
+        var w = this.target.offsetWidth;
+        var r = this.open ? 0 : -w;
+        this.target.style.right = r + 'px';
+        //var s = this.target.previousElementSibling;
+        var s = previousElementSibling(this.target);
+        while (s) {
+          if (!s.hasAttribute('nolayout')) {
+            if (s.style.right === '' && s.style.left !== '') {
+              break;
+            }
+            r += w;
+            s.style.right = r + 'px';  
+            w = s.offsetWidth;
+          }
+          //if (s == s.previousElementSibling) {
+          //  console.error(s.localName + ' is its own sibling', s);
+          //  break;
+          //}
+          //s = s.previousElementSibling;
+          s = previousElementSibling(s);
+        }
+      },
+
+      updateTop: function() {
+        var h = this.target.offsetHeight;
+        var t = this.open ? 0 : -h;
+        this.target.style.top = t + 'px';
+        var s = this.target.nextElementSibling;
+        while (s) {
+          if (!s.hasAttribute('nolayout')) {
+            if (s.style.top === '' && s.style.bottom !== '') {
+              break;
+            }
+            t += h;
+            s.style.top = t + 'px';
+            h = s.offsetHeight;
+          }
+          s = s.nextElementSibling;
+        }
+      },
+
+      updateBottom: function() {
+        var h = this.target.offsetHeight;
+        var b = this.open ? 0 : -h;
+        this.target.style.bottom = b + 'px';
+        //var s = this.target.previousElementSibling;
+        var s = previousElementSibling(this.target);
+        while (s) {
+          if (!s.hasAttribute('nolayout')) {
+            if (s.style.bottom === '' && s.style.top !== '') {
+              break;
+            }
+            b = b + h;
+            s.style.bottom = b + 'px';  
+            h = s.offsetHeight;
+          }
+          //if (s == s.previousElementSibling) {
+          //  console.error(s.localName + ' is its own sibling', s);
+          //  break;
+          //}
+          //s = s.previousElementSibling;
+          s = previousElementSibling(s);
+        }
+      }
+
+    });
+    
+    // TODO(sjmiles): temporary workaround for b0rked property in ShadowDOMPolyfill
+    function previousElementSibling(e) {
+      do {
+        e = e.previousSibling;
+      } while (e && e.nodeType !== Node.ELEMENT_NODE);
+      return e;
+    };
+
+  </script>
+  
+</polymer-element>