fire core-resize event when opened state completes change

googlearchive · Jun 24, 2014 · c3b1674 · c3b1674
1 parent 0cf929e
commit c3b1674
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/core-collapse.html b/core-collapse.html
@@ -40,6 +40,12 @@
 <script>
 
   Polymer('core-collapse', {
+    /**
+     * Fired when the target element has been resized as a result of the opened
+     * state changing.
+     * 
+     * @event core-resize
+    */
 
     /**
      * The target element.
@@ -165,6 +171,7 @@
       }
       this.setTransitionDuration(null);
       this.toggleClosedClass(!this.opened);
+      this.asyncFire('core-resize', null, this.target);
     },
 
     toggleClosedClass: function(closed) {

diff --git a/demo.html b/demo.html
@@ -9,7 +9,12 @@
   <link rel="import" href="core-collapse.html">
 
   <style>
-
+    body {
+      overflow: auto;
+      margin: 8px 24px;
+    }
+
+
     .box {
       background: #eee;
     }
@@ -27,7 +32,7 @@
 </head>
 <body unresolved>
 
-  <section style="background: blue; width: 800px;">
+  <section style="background: steelblue;">
 
     <button onclick="document.querySelector('#collapse1').toggle()">toggle collapse</button>
 
@@ -37,7 +42,7 @@
 
   </section>
 
-  <section style="background: green; width: 800px;">
+  <section style="background: seagreen;">
 
     <button onclick="document.querySelector('#collapse2').toggle()">toggle collapse</button>