From 83658739c3cbae3c6ce9021a58c3b15731797288 Mon Sep 17 00:00:00 2001 From: neveler <55753029+neveler@users.noreply.github.com> Date: Thu, 21 May 2026 19:59:44 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E6=96=AD=E7=82=B9=E9=85=8D?= =?UTF-8?q?=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- _sass/minimal-mistakes-plus.scss | 2 +- _sass/minimal-mistakes-plus/_variables.scss | 4 + assets/js/plugins/jquery.greedy-navigation.js | 132 ++++++++++++++++++ 3 files changed, 137 insertions(+), 1 deletion(-) create mode 100644 _sass/minimal-mistakes-plus/_variables.scss create mode 100644 assets/js/plugins/jquery.greedy-navigation.js diff --git a/_sass/minimal-mistakes-plus.scss b/_sass/minimal-mistakes-plus.scss index 79cccbff..caf58155 100644 --- a/_sass/minimal-mistakes-plus.scss +++ b/_sass/minimal-mistakes-plus.scss @@ -2,7 +2,7 @@ @import "minimal-mistakes/copyright"; /* Variables */ -@import "minimal-mistakes/variables"; +@import "minimal-mistakes-plus/variables"; /* Mixins and functions */ @import "minimal-mistakes/vendor/breakpoint/breakpoint"; diff --git a/_sass/minimal-mistakes-plus/_variables.scss b/_sass/minimal-mistakes-plus/_variables.scss new file mode 100644 index 00000000..2cb5c255 --- /dev/null +++ b/_sass/minimal-mistakes-plus/_variables.scss @@ -0,0 +1,4 @@ +$large: 1200px !default; +$x-large: 1400px !default; + +@import "minimal-mistakes/variables"; diff --git a/assets/js/plugins/jquery.greedy-navigation.js b/assets/js/plugins/jquery.greedy-navigation.js new file mode 100644 index 00000000..6c700bce --- /dev/null +++ b/assets/js/plugins/jquery.greedy-navigation.js @@ -0,0 +1,132 @@ +/* +GreedyNav.js - https://github.com/lukejacksonn/GreedyNav +Licensed under the MIT license - http://opensource.org/licenses/MIT +Copyright (c) 2015 Luke Jackson http://lukejacksonn.com +*/ + +$(function() { + + var $btn = $("nav.greedy-nav .greedy-nav__toggle"); + var $vlinks = $("nav.greedy-nav .visible-links"); + var $hlinks = $("nav.greedy-nav .hidden-links"); + var $nav = $("nav.greedy-nav"); + var $logo = $('nav.greedy-nav .site-logo'); + var $logoImg = $('nav.greedy-nav .site-logo img'); + var $title = $("nav.greedy-nav .site-title"); + var $search = $('nav.greedy-nav button.search__toggle'); + + var numOfItems, totalSpace, closingTime, breakWidths; + + // This function measures both hidden and visible links and sets the navbar breakpoints + // This is called the first time the script runs and everytime the "check()" function detects a change of window width that reached a different CSS width breakpoint, which affects the size of navbar Items + // Please note that "CSS width breakpoints" (which are only 4) !== "navbar breakpoints" (which are as many as the number of items on the navbar) + function measureLinks(){ + numOfItems = 0; + totalSpace = 0; + closingTime = 1000; + breakWidths = []; + + // Adds the width of a navItem in order to create breakpoints for the navbar + function addWidth(i, w) { + totalSpace += w; + numOfItems += 1; + breakWidths.push(totalSpace); + } + + // Measures the width of hidden links by making a temporary clone of them and positioning under visible links + function hiddenWidth(obj){ + var clone = obj.clone(); + clone.css("visibility","hidden"); + $vlinks.append(clone); + addWidth(0, clone.outerWidth()); + clone.remove(); + } + // Measure both visible and hidden links widths + $vlinks.children().outerWidth(addWidth); + $hlinks.children().each(function(){hiddenWidth($(this))}); + } + // Get initial state + measureLinks(); + + var winWidth = $( window ).width(); + // Set the last measured CSS width breakpoint: 0: < 768px, 1: < 1200px, 2: < 1400px, 3: >= 1400px. + var lastBreakpoint = winWidth < 768 ? 0 : winWidth < 1200 ? 1 : winWidth < 1400 ? 2 : 3; + + var availableSpace, numOfVisibleItems, requiredSpace, timer; + + function check() { + + winWidth = $( window ).width(); + // Set the current CSS width breakpoint: 0: <768px, 1: < 1200px, 2: < 1400px, 3: >= 1400px. + var curBreakpoint = winWidth < 768 ? 0 : winWidth < 1200 ? 1 : winWidth < 1400 ? 2 : 3; + // If current breakpoint is different from last measured breakpoint, measureLinks again + if(curBreakpoint !== lastBreakpoint) measureLinks(); + // Set the last measured CSS width breakpoint with the current breakpoint + lastBreakpoint = curBreakpoint; + + // Get instant state + numOfVisibleItems = $vlinks.children().length; + // Decrease the width of visible elements from the nav innerWidth to find out the available space for navItems + availableSpace = /* nav */ $nav.innerWidth() + - /* logo */ ($logo.length !== 0 ? $logo.outerWidth(true) : 0) + - /* title */ $title.outerWidth(true) + - /* search */ ($search.length !== 0 ? $search.outerWidth(true) : 0) + - /* toggle */ (numOfVisibleItems !== breakWidths.length ? $btn.outerWidth(true) : 0); + requiredSpace = breakWidths[numOfVisibleItems - 1]; + + // There is not enought space + if (requiredSpace > availableSpace) { + $vlinks.children().last().prependTo($hlinks); + numOfVisibleItems -= 1; + check(); + // There is more than enough space. If only one element is hidden, add the toggle width to the available space + } else if (availableSpace + (numOfVisibleItems === breakWidths.length - 1?$btn.outerWidth(true):0) > 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() { + check(); + }); + + $btn.on('click', function() { + $hlinks.toggleClass('hidden'); + $(this).toggleClass('close'); + clearTimeout(timer); + }); + + $hlinks.on("click", function () { + // Hide the hidden links & remove the overlay when one is clicked. + $hlinks.addClass("hidden"); + $btn.removeClass("close"); + }).on('mouseleave', function() { + // Mouse has left, start the timer + timer = setTimeout(function() { + $hlinks.addClass('hidden'); + $('.greedy-nav__toggle').removeClass('close'); + }, closingTime); + }).on('mouseenter', function() { + // Mouse is back, cancel the timer + clearTimeout(timer); + }) + + // check if page has a logo + if($logoImg.length !== 0){ + // check if logo is not loaded + if(!($logoImg[0].complete || $logoImg[0].naturalWidth !== 0)){ + // if logo is not loaded wait for logo to load or fail to check + $logoImg.one("load error", check); + // if logo is already loaded just check + } else check(); + // if page does not have a logo just check + } else check(); + +});