From 3c93905e23d2c5b927b3297f517ce57825511ecb Mon Sep 17 00:00:00 2001 From: Michael Rose Date: Mon, 13 Feb 2017 22:14:10 -0500 Subject: [PATCH] Update GreedyNav.js --- assets/js/plugins/jquery.greedy-navigation.js | 114 +++++++++--------- 1 file changed, 58 insertions(+), 56 deletions(-) diff --git a/assets/js/plugins/jquery.greedy-navigation.js b/assets/js/plugins/jquery.greedy-navigation.js index 3f6c5415..ddd62f30 100644 --- a/assets/js/plugins/jquery.greedy-navigation.js +++ b/assets/js/plugins/jquery.greedy-navigation.js @@ -1,72 +1,74 @@ /* -* Greedy Navigation -* -* http://codepen.io/lukejacksonn/pen/PwmwWV -* +GreedyNav.js - https://github.com/lukejacksonn/GreedyNav +Licensed under the MIT license - http://opensource.org/licenses/MIT +Copyright (c) 2015 Luke Jackson */ -var $nav = $('#site-nav'); -var $btn = $('#site-nav button'); -var $vlinks = $('#site-nav .visible-links'); -var $hlinks = $('#site-nav .hidden-links'); +$(function() { -var breaks = []; + var $btn = $('nav.greedy-nav button'); + var $vlinks = $('nav.greedy-nav .visible-links'); + var $hlinks = $('nav.greedy-nav .hidden-links'); -function updateNav() { + var numOfItems = 0; + var totalSpace = 0; + var closingTime = 1000; + var breakWidths = []; - var availableSpace = $btn.hasClass('hidden') ? $nav.width() : $nav.width() - $btn.width() - 30; + // Get initial state + $vlinks.children().outerWidth(function(i, w) { + totalSpace += w; + numOfItems += 1; + breakWidths.push(totalSpace); + }); - // The visible list is overflowing the nav - if($vlinks.width() > availableSpace) { + var availableSpace, numOfVisibleItems, requiredSpace, timer; - // Record the width of the list - breaks.push($vlinks.width()); + function check() { - // Move item to the hidden list - $vlinks.children().last().prependTo($hlinks); + // Get instant state + availableSpace = $vlinks.width() - 10; + numOfVisibleItems = $vlinks.children().length; + requiredSpace = breakWidths[numOfVisibleItems - 1]; - // Show the dropdown btn - if($btn.hasClass('hidden')) { - $btn.removeClass('hidden'); - } - - // The visible list is not overflowing - } else { - - // There is space for another item in the nav - if(availableSpace > breaks[breaks.length-1]) { - - // Move the item to the visible list + // There is not enough space + if (requiredSpace > availableSpace) { + $vlinks.children().last().prependTo($hlinks); + numOfVisibleItems -= 1; + check(); + // There is more than enough space + } else if (availableSpace > breakWidths[numOfVisibleItems]) { $hlinks.children().first().appendTo($vlinks); - breaks.pop(); + numOfVisibleItems += 1; + check(); } - - // Hide the dropdown btn if hidden list is empty - if(breaks.length < 1) { + // Update the button accordingly + $btn.attr("count", numOfItems - numOfVisibleItems); + if (numOfVisibleItems === numOfItems) { $btn.addClass('hidden'); + } else $btn.removeClass('hidden'); + } + + // Window listeners + $(window).resize(function() { + check(); + }); + + $btn.on('click', function() { + $hlinks.toggleClass('hidden'); + clearTimeout(timer); + }); + + $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); + }) - // Keep counter updated - $btn.attr("count", breaks.length); + check(); - // Recur if the visible list is still overflowing the nav - if($vlinks.width() > availableSpace) { - updateNav(); - } - -} - -// Window listeners - -$(window).resize(function() { - updateNav(); -}); - -$btn.on('click', function() { - $hlinks.toggleClass('hidden'); - $(this).toggleClass('close'); -}); - -updateNav(); \ No newline at end of file +}); \ No newline at end of file