adds sub menu animating

node/src/files/javascript/semantic.js

@@ -14,11 +14,12 @@ semantic.ready = function() {
     $sortTable   = $('.sortable.table'),
     $demo        = $('.demo'),
     $waypoints   = $('h2'),
-
+    
     $example     = $('.example'),
-
+    
     $peek        = $('.peek'),
-    $peekMenu    = $peek.find('.item'),
+    $peekItem    = $peek.children('.menu').children('a.item'),
+    $peekSubItem = $peek.find('.item .menu .item'),
     $code        = $('div.code'),
 
     // alias
@@ -105,7 +106,7 @@ semantic.ready = function() {
       editor.setShowPrintMargin(false);
       editor.setReadOnly(true);
       //editor.renderer.setShowGutter(false);
-      //editor.setHighlightActiveLine(false);
+      editor.setHighlightActiveLine(false);
       editorSession.setUseWrapMode(true);
 
       editorSession.setMode('ace/mode/'+ contentType);
@@ -132,20 +133,80 @@ semantic.ready = function() {
     },
 
     peek: function() {
-      $('html, body')
+      var
+        $body     = $('html, body'),
+        $header   = $(this),
+        $menu     = $header.parent(),
+        $group    = $menu.children(),
+        $headers  = $group.add( $group.find('.menu .item') )
+        $waypoint = $('h2').eq( $group.index( $header ) ),
+        offset    = $waypoint.offset().top - 80
+      ;
+      console.log($headers);
+      $menu
+        .addClass('animating')
+      ;
+      $headers
+        .removeClass('active')
+      ;
+      $body
         .stop()
         .animate({
-          scrollTop: $waypoints.eq( $peekMenu.index( $(this) ) ).offset().top - 90
-        }, 500, function(){
-          $(this).addClass('active').siblings().removeClass('active');
+          scrollTop: offset
+        }, 500, function() {
+          $menu
+            .removeClass('animating')
+          ;
+          $header
+            .addClass('active')
+          ;
+        })
+        .one('scroll', function() {
+          $body.stop();
         })
       ;
-      $('html')
+    },
+
+    peekSub: function() {
+      var
+        $body           = $('html, body'),
+        $subHeader      = $(this),
+        $header         = $subHeader.parents('.item'),
+        $menu           = $header.parent(),
+        $subHeaderGroup = $header.find('.item'),
+        $headerGroup    = $menu.children(),
+        $waypoint       = $('h2').eq( $headerGroup.index( $header ) )
+        $subWaypoint    = $waypoint.nextAll('h3').eq( $subHeaderGroup.index($subHeader) ),
+        offset          = $subWaypoint.offset().top - 80
+      ;
+      console.log($subHeader, $headerGroup, $header, $waypoint, $subWaypoint, $subHeaderGroup.index($subHeader))
+      $menu
+        .addClass('animating')
+      ;
+      $headerGroup
+        .removeClass('active')
+      ;
+      $subHeaderGroup
+        .removeClass('active')
+      ;
+      $body
+        .stop()
+        .animate({
+          scrollTop: offset
+        }, 500, function() {
+          $menu
+            .removeClass('animating')
+          ;
+          $subHeader
+            .addClass('active')
+          ;
+        })
         .one('scroll', function() {
-          $('html,body').stop();
+          $body.stop();
         })
       ;
     },
+
     swapStyle: function() {
       var
         theme = $(this).data('theme')
@@ -184,7 +245,7 @@ semantic.ready = function() {
   $waypoints
     .waypoint({
       continuous : false,
-      offset     : 215,
+      offset     : 100,
       handler    : function(direction) {
         var
           index = (direction == 'down')
@@ -193,7 +254,7 @@ semantic.ready = function() {
               ? ($waypoints.index(this) - 1)
               : 0
         ;
-        $peekMenu
+        $peekItem
           .removeClass('active')
           .eq( index )
             .addClass('active')
@@ -227,14 +288,18 @@ semantic.ready = function() {
 
   $peek
     .waypoint('sticky', {
-      offset: 80,
+      offset: 85,
       stuckClass: 'stuck'
     })
   ;
-  $peekMenu
-    .state()
+  console.log($peekItem);
+  $peekItem
+    .state('destroy')
     .on('click', handler.peek)
   ;
+  $peekSubItem
+    .on('click', handler.peekSub)
+  ;
 
 };
 

node/src/files/stylesheets/semantic.css

@@ -325,7 +325,7 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
   color: #A24096;
 }
 
-#example .peek .menu {
+#example .peek > .menu {
   margin-left: 0px;
   width: 180px;
   -webkit-transition: 
@@ -349,6 +349,16 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
     opacity 0.3s ease-out
   ;
 }
+/* #example .peek > .menu.animating > .active {
+  background-color: transparent;
+  border: none;
+  padding-left: 0.95em;
+}
+#example .peek > .menu.animating > .active:after {
+  background-color: #FFFFFF;
+} */
+
+
 #example .sticky-wrapper.stuck {
   height: 0px !important;
 }
@@ -358,7 +368,7 @@ box-shadow: 3px 0px 2px rgba(0, 0, 0, 0.2); */
   left: 50%;
   margin-left: -630px;
 }
-#example .sticky-wrapper.stuck .peek.pushed .menu {
+#example .sticky-wrapper.stuck .peek.pushed > .menu {
   margin-left: 275px;
 }