From 53eab88b5bf00288c496906b207abf83b91f9527 Mon Sep 17 00:00:00 2001
From: Sean Johnson <sjohnson@sjohnsonaz.com>
Date: Sun, 24 Jun 2018 23:26:36 -0700
Subject: [PATCH] Fixed closeable ability.

---
 src/styl/abilities/closeable.styl |  4 ++--
 src/styl/main.styl                |  1 +
 test/ts/index.ts                  | 28 ++++++++++++++++++++++++++++
 test/views/abilities.hbs          | 12 ++++++++++++
 test/views/animation.hbs          |  3 ++-
 test/views/widgets.hbs            | 12 ------------
 6 files changed, 45 insertions(+), 15 deletions(-)
 create mode 100644 test/views/abilities.hbs

diff --git a/src/styl/abilities/closeable.styl b/src/styl/abilities/closeable.styl
index 4c41744..60eaf48 100644
--- 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
index 5e843d7..3ab4827 100644
--- 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
index 4830603..19c0241 100644
--- 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
new file mode 100644
index 0000000..fbc7cea
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/test/views/animation.hbs b/test/views/animation.hbs
index 57875c3..06d9e7f 100644
--- a/test/views/animation.hbs
+++ b/test/views/animation.hbs
@@ -9,4 +9,5 @@
             <button id="clickAnimate" class="button">Animate</button>
         </div>
     </div>
-</section>
\ No newline at end of file
+</section>
+{{#> abilities}}{{/abilities}}
\ No newline at end of file
diff --git a/test/views/widgets.hbs b/test/views/widgets.hbs
index d33cd81..5438172 100644
--- 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">