greedynav enhancement (active hidden-links, auto hide)

Edirom · Sep 17, 2019 · 5620d2b · 5620d2b
1 parent 21b880b
commit 5620d2b
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 23 deletions.
diff --git a/resources/js/greedynav.js b/resources/js/greedynav.js
@@ -7,23 +7,22 @@ Copyright (c) 2015 Luke Jackson
 $.fn.greedyNav = function() {
 
   var $btn = $('nav.greedy button'),
-      $vlinks = $('nav.greedy .links'),
-      $hlinks = $('nav.greedy .hidden-links'),
-
-      numOfItems = 0,
-      totalSpace = 0,
-      breakWidths = [],
-
-      availableSpace, numOfVisibleItems, requiredSpace;
+  $vlinks = $('nav.greedy .links'),
+  $hlinks = $('nav.greedy .hidden-links'),
+  numOfItems = 0,
+  totalSpace = 0,
+  closingTime = 1000,
+  breakWidths = [];
 
   // Get initial state
-  $vlinks.children(':visible').outerWidth(function(i, w) {
+    $vlinks.children(':visible').outerWidth(function(i, w) {
     totalSpace += w;
     numOfItems += 1;
     breakWidths.push(totalSpace);
   });
-
-
+
+  var availableSpace, numOfVisibleItems, requiredSpace, timer;
+
   function check() {
 
     // Get instant state
@@ -33,20 +32,21 @@ $.fn.greedyNav = function() {
 
     // There is not enought space
     if (requiredSpace > availableSpace) {
-      $vlinks.children(':visible').last().prependTo($hlinks);
+        $vlinks.children(':visible').last().prependTo($hlinks);
       numOfVisibleItems -= 1;
       check();
       // There is more than enough space
     } else if (availableSpace > breakWidths[numOfVisibleItems]) {
       $hlinks.children().first().appendTo($vlinks);
       numOfVisibleItems += 1;
+      check();
     }
     // Update the button accordingly
     $btn.attr("count", numOfItems - numOfVisibleItems);
     if (numOfVisibleItems === numOfItems) {
       $btn.addClass('hidden');
     } else $btn.removeClass('hidden');
-  };
+  }
 
   // Window listeners
   $(window).resize(function() {
@@ -55,12 +55,28 @@ $.fn.greedyNav = function() {
 
   $btn.on('click', function() {
     $hlinks.toggleClass('hidden');
+    clearTimeout(timer);
   });
 
   $vlinks.on('click', function() {
     $hlinks.addClass('hidden');
+    $btn.removeClass("resp-tab-active");
+  });
+
+  $hlinks.on('click', function() {
+    $btn.addClass("resp-tab-active");
   });
 
+  $hlinks.on('mouseleave', function() {
+    // Mouse has left, start the timer
+    timer = setTimeout(function() {
+      $hlinks.addClass('hidden');
+    }, closingTime);
+  }).on('mouseenter', function() {
+    // Mouse is back, cancel the timer
+    clearTimeout(timer);
+  })
+
   check();
 
-};
+});
diff --git a/resources/sass/components/_greedynav.scss b/resources/sass/components/_greedynav.scss
@@ -23,11 +23,9 @@ nav.greedy {
 nav.greedy button {
   align-self: stretch;
   transition: all .4s ease-out;
-  padding: 0 1rem 0 1.5rem;
+  padding: 0 1rem 0 1.5rem!important;
   outline: 0;
   border: 0;
-  /*font-size: 0.9rem;*/
-  /*font-weight: bold;*/
   background: #b5b5b5;
   color: #fff;
   margin-left:2px;
@@ -66,6 +64,7 @@ nav.greedy ul.links {
 nav.greedy ul.links li {
   flex: none;
   padding: 1rem;
+  border-top: 4px solid #b5b5b5;
 }
 
 nav.greedy ul.links li a {
@@ -76,7 +75,7 @@ nav.greedy ul.hidden-links {
 /*  background: #d8d8d8;*/
   right: 0;
   top: 100%;
-  z-index:1;
+  z-index:2;
   margin-right: 20px;
 }
 nav.greedy ul.hidden-links.hidden {

diff --git a/resources/sass/components/_tabs.scss b/resources/sass/components/_tabs.scss
@@ -74,7 +74,7 @@ li.resp-tab-item {
   &:first-child { margin-left: 0px!important; }
 }
 
-li.resp-tab-active {
+button.resp-tab-active, li.resp-tab-active {
     border-bottom: 3px solid #F0F0F0!important;
     border-top: 4px solid $gray;
 }
@@ -86,14 +86,14 @@ li.resp-tab-active {
     border:none;    
 }
 
-.resp-tabs-list, .hidden-links 
+.resp-tabs-list, .hidden-links, .greedy 
 {
-    li.resp-tab-item
+    li.resp-tab-item, button
     {
         background: $gray-light;
         border: 1px solid $gray-light; 
         margin: 0px 0px -2px 2px!important;
-        padding: 10px 25px;
+
         a
         {
             color: #fff;
@@ -104,8 +104,9 @@ li.resp-tab-active {
         }
         &.resp-tab-active
         {
+            color: $gray;
             background: $gray-lighter;
-            padding: 10px 25px!important;
+
             border: 1px solid $gray-light!important;
             border-top: 4px solid $gray!important;
             border-bottom: 3px solid $gray-lighter!important;