Better API for subnav

tedconf · Jan 28, 2016 · 7634965 · 7634965
1 parent 73c2088
commit 7634965
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 19 deletions.
diff --git a/addon/components/ted-subnav.js b/addon/components/ted-subnav.js
@@ -36,13 +36,20 @@ export default Ember.Component.extend({
 
     let $clone = this.$().clone();
     $clone.removeAttr('id');
-    this.$().parent().prepend($clone);
+    $clone.removeClass('ember-view');
+
+    let $previousSibling = this.$().prev();
+    let $parent = this.$().parent();
 
     Ember.run.schedule('afterRender', () => {
       if (this.get('shouldAnimateOut')) {
+        if ($previousSibling.length) {
+          $previousSibling.after($clone);
+        } else {
+          $parent.prepend($clone);
+        }
+
         this.animateOut($clone);
-      } else {
-        $clone.remove();
       }
     });
 
@@ -57,28 +64,26 @@ export default Ember.Component.extend({
     let $mainContent = Ember.$('.Ted-subnav-wrapper__inner');
     let offset = this.$().outerHeight();
 
-    $mainContent.removeClass('Ted-subnav-wrapper__inner--should-transition');
-    $mainContent.css('transform', `translateY(-${offset}px)`);
+    this.$().removeClass('Ted-subnav--should-transition');
+    this.$().css('max-height', 0);
 
     Ember.run.next(() => {
-      $mainContent.addClass('Ted-subnav-wrapper__inner--should-transition');
-      $mainContent.css('transform', `translateY(0)`);
+      this.$().addClass('Ted-subnav--should-transition');
+      this.$().css('max-height', '200px');
     });
   },
 
   animateOut($clone) {
     // Note: this duration has to match the transition time in ted-subnav.scss
-    let duration = 200;
+    let duration = 300;
     let offset = $clone.outerHeight();
     let $mainContent = Ember.$('.Ted-subnav-wrapper__inner');
 
-    $mainContent.addClass('Ted-subnav-wrapper__inner--should-transition');
-    $mainContent.css('transform', `translateY(-${offset}px)`);
+    $clone.addClass('Ted-subnav--should-transition');
+    $clone.css('max-height', '0');
 
     Ember.run.later(() => {
-      $mainContent.removeClass('Ted-subnav-wrapper__inner--should-transition');
       $clone.remove();
-      $mainContent.css('transform', `translateY(0px)`);
     }, duration);
   }
 

diff --git a/app/styles/ember-cli-ted-navs/ted-subnav.scss b/app/styles/ember-cli-ted-navs/ted-subnav.scss
@@ -1,9 +1,19 @@
 .Ted-subnav {
-  padding-top: 15px;
-  padding-bottom: 15px;
   clear: both;
   list-style-type: none;
   border-bottom: 1px solid #ddd;
+  overflow: hidden;
+  max-height: 200px;
+
+  &__content {
+    padding-top: 15px;
+    padding-bottom: 15px;
+  }
+
+  &--should-transition {
+    // Note: this transition duration has to match the duration property in ted-subnav.js
+    transition: max-height 0.3s ease-in-out;
+  }
 }
 
 .Ted-subnav-wrapper {

diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs
@@ -14,10 +14,6 @@
     {{/ted-nav-item}}
   {{/ted-nav}}
 
-  <div class="Ted-subnav-wrapper">
-    <div class="Ted-subnav-wrapper__inner">
-      {{outlet}}
-    </div>
-  </div>
+  {{outlet}}
 </div>
 
diff --git a/tests/dummy/app/templates/conferences.hbs b/tests/dummy/app/templates/conferences.hbs
@@ -1 +1,8 @@
+{{#ted-subnav}}
+  {{ted-subnav-item 'Do something' onClick=(action (mut someVar))}}
+  {{#ted-subnav-item onClick=(action (mut anotherVar))}}
+    <i class='fa fa-plus'></i> New transfer
+  {{/ted-subnav-item}}
+{{/ted-subnav}}
+
 <h1>Um, the conference</h1>