Feature: Incorporate site search into masthead (#1383)
* Integrate search into masthead * Fix cutoff descenders in archive article titles * Remove search page from `/test` site * Enable masthead search * Remove dedicated search page * Fix masthead search form padding * Improve insertion of search content * Speed up page transition * Add fade transition to search content * Rename visibility class names * Add `site.search` to _config.yml * Document site search feature * Update CHANGELOG and history
This commit is contained in:
@ -4,11 +4,10 @@ Licensed under the MIT license - http://opensource.org/licenses/MIT
|
||||
Copyright (c) 2015 Luke Jackson
|
||||
*/
|
||||
|
||||
$(document).ready(function(){
|
||||
|
||||
var $btn = $('nav.greedy-nav button');
|
||||
var $vlinks = $('nav.greedy-nav .visible-links');
|
||||
var $hlinks = $('nav.greedy-nav .hidden-links');
|
||||
$(document).ready(function() {
|
||||
var $btn = $("nav.greedy-nav .greedy-nav__toggle");
|
||||
var $vlinks = $("nav.greedy-nav .visible-links");
|
||||
var $hlinks = $("nav.greedy-nav .hidden-links");
|
||||
|
||||
var numOfItems = 0;
|
||||
var totalSpace = 0;
|
||||
@ -25,7 +24,6 @@ $(document).ready(function(){
|
||||
var availableSpace, numOfVisibleItems, requiredSpace, timer;
|
||||
|
||||
function check() {
|
||||
|
||||
// Get instant state
|
||||
availableSpace = $vlinks.width() - 10;
|
||||
numOfVisibleItems = $vlinks.children().length;
|
||||
@ -33,21 +31,27 @@ $(document).ready(function(){
|
||||
|
||||
// There is not enough space
|
||||
if (requiredSpace > availableSpace) {
|
||||
$vlinks.children().last().prependTo($hlinks);
|
||||
$vlinks
|
||||
.children()
|
||||
.last()
|
||||
.prependTo($hlinks);
|
||||
numOfVisibleItems -= 1;
|
||||
check();
|
||||
// There is more than enough space
|
||||
} else if (availableSpace > breakWidths[numOfVisibleItems]) {
|
||||
$hlinks.children().first().appendTo($vlinks);
|
||||
$hlinks
|
||||
.children()
|
||||
.first()
|
||||
.appendTo($vlinks);
|
||||
numOfVisibleItems += 1;
|
||||
check();
|
||||
}
|
||||
// Update the button accordingly
|
||||
$btn.attr("count", numOfItems - numOfVisibleItems);
|
||||
if (numOfVisibleItems === numOfItems) {
|
||||
$btn.addClass('hidden');
|
||||
$btn.addClass("hidden");
|
||||
} else {
|
||||
$btn.removeClass('hidden');
|
||||
$btn.removeClass("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
@ -56,23 +60,24 @@ $(document).ready(function(){
|
||||
check();
|
||||
});
|
||||
|
||||
$btn.on('click', function() {
|
||||
$hlinks.toggleClass('hidden');
|
||||
$(this).toggleClass('close');
|
||||
$btn.on("click", function() {
|
||||
$hlinks.toggleClass("hidden");
|
||||
$(this).toggleClass("close");
|
||||
clearTimeout(timer);
|
||||
});
|
||||
|
||||
$hlinks.on('mouseleave', function() {
|
||||
// Mouse has left, start the timer
|
||||
timer = setTimeout(function() {
|
||||
$hlinks.addClass('hidden');
|
||||
$btn.toggleClass('close');
|
||||
}, closingTime);
|
||||
}).on('mouseenter', function() {
|
||||
// Mouse is back, cancel the timer
|
||||
clearTimeout(timer);
|
||||
})
|
||||
$hlinks
|
||||
.on("mouseleave", function() {
|
||||
// Mouse has left, start the timer
|
||||
timer = setTimeout(function() {
|
||||
$hlinks.addClass("hidden");
|
||||
$btn.toggleClass("close");
|
||||
}, closingTime);
|
||||
})
|
||||
.on("mouseenter", function() {
|
||||
// Mouse is back, cancel the timer
|
||||
clearTimeout(timer);
|
||||
});
|
||||
|
||||
check();
|
||||
|
||||
});
|
||||
});
|
||||
|
Reference in New Issue
Block a user