Fixed closeable ability.

sjohnsonaz · Jun 25, 2018 · 53eab88 · 53eab88
1 parent 3cabf36
commit 53eab88
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 15 deletions.
diff --git a/src/styl/abilities/closeable.styl b/src/styl/abilities/closeable.styl
@@ -4,14 +4,14 @@ closeable() {
     //padding: 0;
     transition: height $closeable-animation-time;
 
-    &[data-closed=true] {
+    &[data-closed="true"] {
         overflow: hidden;
         //padding-top: 0;
         //padding-bottom: 0;
         height: 0;
     }
 
-    &[data-running=true] {
+    &[data-running="true"] {
         overflow: hidden;
     }
 }

diff --git a/src/styl/main.styl b/src/styl/main.styl
@@ -9,6 +9,7 @@
 @require "core/reset.styl";
 @require "core/mixins.styl";
 @require "core/align.styl";
+@require "abilities/closeable.styl";
 @require "animation/animation.styl";
 @require "animation/transition.styl";
 @require "badge/badge.styl";

diff --git a/test/ts/index.ts b/test/ts/index.ts
@@ -250,4 +250,32 @@ $(function () {
             }
         });
     });
+
+    var closeableClosed = false;
+    var closeableTimeout;
+    $('#clickCloseableToggle').click(function (event) {
+        window.clearTimeout(closeableTimeout);
+        closeableClosed = !closeableClosed;
+        var section = $('#closeable')[0];
+        var button = $(this);
+        section.setAttribute('data-running', 'true');
+        if (closeableClosed) {
+            section.style.height = section.offsetHeight + 'px';
+            section.setAttribute('data-closed', 'true');
+            var sectionBorder = section.offsetHeight - section.clientHeight;
+            section.style.height = sectionBorder / 2 + 'px';
+            closeableTimeout = window.setTimeout(function () {
+                section.setAttribute('data-running', 'false');
+            }, 220)
+        } else {
+            var sectionBorder = section.offsetHeight - section.clientHeight;
+            section.style.height = sectionBorder / 2 + 'px';
+            section.setAttribute('data-closed', 'false');
+            section.style.height = sectionBorder / 2 + section.scrollHeight + 'px';
+            closeableTimeout = window.setTimeout(function () {
+                section.style.height = 'auto';
+                section.setAttribute('data-running', 'false');
+            }, 220)
+        }
+    });
 });
diff --git a/test/views/abilities.hbs b/test/views/abilities.hbs
@@ -0,0 +1,12 @@
+<section class="section">
+    <header>Abilities</header>
+    <div class="section-content section-content-space">
+        <h3>Closeable</h3>
+        <button class="button" id="clickCloseableToggle">Toggle</button>
+        <div class="closeable" id="closeable">
+            Multiple<br />
+            Lines of<br />
+            Content
+        </div>
+    </div>
+</section>
diff --git a/test/views/animation.hbs b/test/views/animation.hbs
@@ -9,4 +9,5 @@
             <button id="clickAnimate" class="button">Animate</button>
         </div>
     </div>
-</section>
+</section>
+{{#> abilities}}{{/abilities}}
diff --git a/test/views/widgets.hbs b/test/views/widgets.hbs
@@ -1,15 +1,3 @@
-<section class="section">
-    <header>Abilities</header>
-    <div class="section-content section-content-space">
-        <h3>Closeable</h3>
-        <button class="button" id="closeableToggle">Toggle</button>
-        <div class="closeable" id="closeable">
-            Multiple<br />
-            Lines of<br />
-            Content
-        </div>
-    </div>
-</section>
 <section class="section">
     <header>Tools</header>
     <div class="section-content section-content-space">