diff --git a/_javascript/utils/smooth-scroll.js b/_javascript/utils/smooth-scroll.js index cb90803..8869da6 100644 --- a/_javascript/utils/smooth-scroll.js +++ b/_javascript/utils/smooth-scroll.js @@ -8,6 +8,11 @@ */ $(function() { + const REM = 16; /* 16px */ + const $topbarTitle = $("#topbar-title"); + const topbarHeight = $("#topbar-wrapper").outerHeight(); + const SCROLL_MARK = "scroll-focus"; + $("a[href*='#']") .not("[href='#']") .not("[href='#0']") @@ -15,42 +20,49 @@ $(function() { if (this.pathname.replace(/^\//, "") === location.pathname.replace(/^\//, "")) { if (location.hostname === this.hostname) { - - const REM = 16; /* 16px */ - const hash = decodeURI(this.hash); - let isFnRef = RegExp(/^#fnref:/).test(hash); - let isFn = isFnRef? false : RegExp(/^#fn:/).test(hash); + let toFootnoteRef = RegExp(/^#fnref:/).test(hash); + let toFootnote = toFootnoteRef? false : RegExp(/^#fn:/).test(hash); let selector = hash.includes(":") ? hash.replace(/\:/g, "\\:") : hash; - let target = $(selector); + let $target = $(selector); - if (target.length) { + let parent = $(this).parent().prop("tagName"); + let isAnchor = RegExp(/^H\d/).test(parent); + + if (typeof $target !== "undefined") { event.preventDefault(); if (history.pushState) { /* add hash to URL */ history.pushState(null, null, hash); } - let curOffset = $(this).offset().top; - let destOffset = target.offset().top; - const scrollUp = (destOffset < curOffset); - const topbarHeight = $("#topbar-wrapper").outerHeight(); + let curOffset = isAnchor? $(this).offset().top : $(window).scrollTop(); + let destOffset = $target.offset().top; - if (scrollUp && isFnRef) { - /* Avoid the top-bar covering `fnref` when scrolling up - because `fnref` has no `%anchor`(see: module.scss) style. */ - destOffset -= (topbarHeight + REM / 2); + if (destOffset < curOffset) { // scroll up + if (toFootnoteRef) { + // Avoid the top-bar covering `fnref` when scrolling up + // because `fnref` has no `%anchor`(see: module.scss) style. + destOffset -= (topbarHeight + REM / 2); + } + + if (isAnchor && $topbarTitle.is(":hidden")) { + destOffset += topbarHeight; + } + + } else { // scroll down + if (!isAnchor && !toFootnote) { // the ToC item + destOffset += topbarHeight; + } } $("html,body").animate({ scrollTop: destOffset }, 800, () => { - const $target = $(target); + // const $target = $($target); $target.focus(); - const SCROLL_MARK = "scroll-focus"; - /* clean up old scroll mark */ if ($(`[${SCROLL_MARK}=true]`).length) { $(`[${SCROLL_MARK}=true]`).attr(SCROLL_MARK, false); @@ -62,7 +74,7 @@ $(function() { } /* set scroll mark to footnotes */ - if (isFn || isFnRef) { + if (toFootnote || toFootnoteRef) { $target.attr(SCROLL_MARK, true); } diff --git a/assets/js/dist/post.min.js b/assets/js/dist/post.min.js index 0aa5f91..7886ae0 100644 --- a/assets/js/dist/post.min.js +++ b/assets/js/dist/post.min.js @@ -3,4 +3,4 @@ * © 2019 Cotes Chung * MIT Licensed */ -$(function(){$(window).scroll(()=>{50<$(this).scrollTop()&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))}),$(function(){$("#mode-toggle-wrapper").keyup(t=>{13===t.keyCode&&flipMode()})}),$(function(){const t=$("#sidebar-trigger"),e=$("#search-trigger"),o=$("#search-cancel"),a=$("#search-cleaner"),n=$("#main"),l=$("#topbar-title"),r=$("#search-wrapper"),s=$("#search-result-wrapper"),i=$("#search-results"),c=$("#search-input"),d=$("#search-hints"),u=function(){let t=0;return{block(){t=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(t)},getOffset(){return t}}}(),p={on(){t.addClass("unloaded"),l.addClass("unloaded"),e.addClass("unloaded"),r.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),r.removeClass("d-flex"),t.removeClass("unloaded"),l.removeClass("unloaded"),e.removeClass("unloaded")}},h=function(){let t=!1;return{on(){t||(u.block(),s.removeClass("unloaded"),n.addClass("unloaded"),t=!0)},off(){t&&(i.empty(),d.hasClass("unloaded")&&d.removeClass("unloaded"),s.addClass("unloaded"),a.removeClass("visible"),n.removeClass("unloaded"),u.release(),c.val(""),t=!1)},isVisible(){return t}}}();function f(){return o.hasClass("loaded")}e.click(function(){p.on(),h.on(),c.focus()}),o.click(function(){p.off(),h.off()}),c.focus(function(){r.addClass("input-focus")}),c.focusout(function(){r.removeClass("input-focus")}),c.on("keyup",function(t){8===t.keyCode&&""===c.val()?f()?d.removeClass("unloaded"):h.off():""!==c.val()&&(h.on(),a.hasClass("visible")||a.addClass("visible"),f()&&d.addClass("unloaded"))}),a.on("click",function(){c.val(""),f()?(d.removeClass("unloaded"),i.empty()):h.off(),c.focus(),a.removeClass("visible")})}),$(function(){var t=function(){const t="sidebar-display";let e=!1;const o=$("body");return{toggle(){!1===e?o.attr(t,""):o.removeAttr(t),e=!e}}}();$("#sidebar-trigger").click(t.toggle),$("#mask").click(t.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const e=$("#topbar-wrapper"),o=$("#toc-wrapper"),a=$(".access"),n=$("#search-input");let l,r=0;const s=e.outerHeight();$(window).scroll(function(t){$("#topbar-title").is(":hidden")&&(l=!0)}),setInterval(function(){l&&(function(){var t=$(this).scrollTop();Math.abs(r-t)<=5||(t>r&&t>s?(e.removeClass("topbar-down").addClass("topbar-up"),0h1"),o=t.text().trim();let a=(0 img[data-src],${t} img[data-src].preview-img`).each(function(){let t=$(this).next();var e="EM"===t.prop("tagName")?t.text():"",o=$(this).attr("data-src");$(this).wrap(``)}),$(".popup").magnificPopup({type:"image",closeOnContentClick:!0,showCloseBtn:!1,zoom:{enabled:!0,duration:300,easing:"ease-in-out"}}),$(t+" a").has("img").addClass("img-link")}}),$(function(){let o=$(".timeago").length,t=void 0;const n=$("meta[name=day-prompt]").attr("content"),l=$("meta[name=hour-prompt]").attr("content"),r=$("meta[name=minute-prompt]").attr("content"),s=$("meta[name=justnow-prompt]").attr("content");function e(){return $(".timeago").each(function(){var t,e;!1!==$(this)[0].hasAttribute("date")?(e=function(t,e){let o=new Date,a=new Date(t);return a.getFullYear()!==o.getFullYear()||a.getMonth()!==o.getMonth()?e:(t=Math.floor((o-a)/1e3),1<=(e=Math.floor(t/86400))?` ${e} `+n:1<=(e=Math.floor(t/3600))?` ${e} `+l:1<=(t=Math.floor(t/60))?` ${t} `+r:s)}($(this).attr("date"),t=$(this).text()))===t?$(this).removeAttr("date"):$(this).text(e):--o}),0===o&&void 0!==t&&clearInterval(t),o}0!==o&&0'),$("input[type=checkbox]:not([checked])").before('')}),$(function(){var t=".code-header>button";const e="timeout";function n(t){if($(t)[0].hasAttribute(e)){t=$(t).attr(e);if(Number(t)>Date.now())return 1}}function l(t){$(t).attr(e,Date.now()+2e3)}function r(t){$(t).removeAttr(e)}const o=new ClipboardJS(t,{target(t){let e=t.parentNode.nextElementSibling;return e.querySelector("code .rouge-code")}});$(t).tooltip({trigger:"hover",placement:"left"});const a=function(t){let e=$(t).children();return e.attr("class")}(t);o.on("success",t=>{t.clearSelection();const e=t.trigger;var o;n(e)||(function(t){let e=$(t),o=e.children();o.attr("class","fas fa-check")}(e),o=e,t=$(o).attr("title-succeed"),$(o).attr("data-original-title",t).tooltip("show"),l(e),setTimeout(()=>{var t;t=e,$(t).tooltip("hide").removeAttr("data-original-title"),function(t){let e=$(t),o=e.children();o.attr("class",a)}(e),r(e)},2e3))}),$("#copy-link").click(t=>{let e=$(t.target);if(!n(e)){t=window.location.href;const o=$("");$("body").append(o),o.val(t).select(),document.execCommand("copy"),o.remove();const a=e.attr("data-original-title");t=e.attr("title-succeed");e.attr("data-original-title",t).tooltip("show"),l(e),setTimeout(()=>{e.attr("data-original-title",a),r(e)},2e3)}})}),$(function(){$("a[href*='#']").not("[href='#']").not("[href='#0']").click(function(e){if(this.pathname.replace(/^\//,"")===location.pathname.replace(/^\//,"")&&location.hostname===this.hostname){const r=decodeURI(this.hash);let o=RegExp(/^#fnref:/).test(r),a=!o&&RegExp(/^#fn:/).test(r);var l=r.includes(":")?r.replace(/\:/g,"\\:"):r;let n=$(l);if(n.length){e.preventDefault(),history.pushState&&history.pushState(null,null,r);l=$(this).offset().top;let t=n.offset().top;e=t{const t=$(n);t.focus();var e="scroll-focus";if($(`[${e}=true]`).length&&$(`[${e}=true]`).attr(e,!1),$(":target").length&&$(":target").attr(e,!1),(a||o)&&t.attr(e,!0),t.is(":focus"))return!1;t.attr("tabindex","-1"),t.focus()})}}})}); \ No newline at end of file +$(function(){$(window).scroll(()=>{50<$(this).scrollTop()&&"none"===$("#sidebar-trigger").css("display")?$("#back-to-top").fadeIn():$("#back-to-top").fadeOut()}),$("#back-to-top").click(()=>($("body,html").animate({scrollTop:0},800),!1))}),$(function(){$("#mode-toggle-wrapper").keyup(t=>{13===t.keyCode&&flipMode()})}),$(function(){const t=$("#sidebar-trigger"),e=$("#search-trigger"),o=$("#search-cancel"),a=$("#search-cleaner"),n=$("#main"),l=$("#topbar-title"),r=$("#search-wrapper"),s=$("#search-result-wrapper"),i=$("#search-results"),c=$("#search-input"),d=$("#search-hints"),u=function(){let t=0;return{block(){t=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(t)},getOffset(){return t}}}(),p={on(){t.addClass("unloaded"),l.addClass("unloaded"),e.addClass("unloaded"),r.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),r.removeClass("d-flex"),t.removeClass("unloaded"),l.removeClass("unloaded"),e.removeClass("unloaded")}},h=function(){let t=!1;return{on(){t||(u.block(),s.removeClass("unloaded"),n.addClass("unloaded"),t=!0)},off(){t&&(i.empty(),d.hasClass("unloaded")&&d.removeClass("unloaded"),s.addClass("unloaded"),a.removeClass("visible"),n.removeClass("unloaded"),u.release(),c.val(""),t=!1)},isVisible(){return t}}}();function f(){return o.hasClass("loaded")}e.click(function(){p.on(),h.on(),c.focus()}),o.click(function(){p.off(),h.off()}),c.focus(function(){r.addClass("input-focus")}),c.focusout(function(){r.removeClass("input-focus")}),c.on("keyup",function(t){8===t.keyCode&&""===c.val()?f()?d.removeClass("unloaded"):h.off():""!==c.val()&&(h.on(),a.hasClass("visible")||a.addClass("visible"),f()&&d.addClass("unloaded"))}),a.on("click",function(){c.val(""),f()?(d.removeClass("unloaded"),i.empty()):h.off(),c.focus(),a.removeClass("visible")})}),$(function(){var t=function(){const t="sidebar-display";let e=!1;const o=$("body");return{toggle(){!1===e?o.attr(t,""):o.removeAttr(t),e=!e}}}();$("#sidebar-trigger").click(t.toggle),$("#mask").click(t.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const e=$("#topbar-wrapper"),o=$("#toc-wrapper"),a=$(".access"),n=$("#search-input");let l,r=0;const s=e.outerHeight();$(window).scroll(function(t){$("#topbar-title").is(":hidden")&&(l=!0)}),setInterval(function(){l&&(function(){var t=$(this).scrollTop();Math.abs(r-t)<=5||(t>r&&t>s?(e.removeClass("topbar-down").addClass("topbar-up"),0h1"),o=t.text().trim();let a=(0 img[data-src],${t} img[data-src].preview-img`).each(function(){let t=$(this).next();var e="EM"===t.prop("tagName")?t.text():"",o=$(this).attr("data-src");$(this).wrap(``)}),$(".popup").magnificPopup({type:"image",closeOnContentClick:!0,showCloseBtn:!1,zoom:{enabled:!0,duration:300,easing:"ease-in-out"}}),$(t+" a").has("img").addClass("img-link")}}),$(function(){let o=$(".timeago").length,t=void 0;const n=$("meta[name=day-prompt]").attr("content"),l=$("meta[name=hour-prompt]").attr("content"),r=$("meta[name=minute-prompt]").attr("content"),s=$("meta[name=justnow-prompt]").attr("content");function e(){return $(".timeago").each(function(){var t,e;!1!==$(this)[0].hasAttribute("date")?(e=function(t,e){let o=new Date,a=new Date(t);return a.getFullYear()!==o.getFullYear()||a.getMonth()!==o.getMonth()?e:(t=Math.floor((o-a)/1e3),1<=(e=Math.floor(t/86400))?` ${e} `+n:1<=(e=Math.floor(t/3600))?` ${e} `+l:1<=(t=Math.floor(t/60))?` ${t} `+r:s)}($(this).attr("date"),t=$(this).text()))===t?$(this).removeAttr("date"):$(this).text(e):--o}),0===o&&void 0!==t&&clearInterval(t),o}0!==o&&0'),$("input[type=checkbox]:not([checked])").before('')}),$(function(){var t=".code-header>button";const e="timeout";function n(t){if($(t)[0].hasAttribute(e)){t=$(t).attr(e);if(Number(t)>Date.now())return 1}}function l(t){$(t).attr(e,Date.now()+2e3)}function r(t){$(t).removeAttr(e)}const o=new ClipboardJS(t,{target(t){let e=t.parentNode.nextElementSibling;return e.querySelector("code .rouge-code")}});$(t).tooltip({trigger:"hover",placement:"left"});const a=function(t){let e=$(t).children();return e.attr("class")}(t);o.on("success",t=>{t.clearSelection();const e=t.trigger;var o;n(e)||(function(t){let e=$(t),o=e.children();o.attr("class","fas fa-check")}(e),o=e,t=$(o).attr("title-succeed"),$(o).attr("data-original-title",t).tooltip("show"),l(e),setTimeout(()=>{var t;t=e,$(t).tooltip("hide").removeAttr("data-original-title"),function(t){let e=$(t),o=e.children();o.attr("class",a)}(e),r(e)},2e3))}),$("#copy-link").click(t=>{let e=$(t.target);if(!n(e)){t=window.location.href;const o=$("");$("body").append(o),o.val(t).select(),document.execCommand("copy"),o.remove();const a=e.attr("data-original-title");t=e.attr("title-succeed");e.attr("data-original-title",t).tooltip("show"),l(e),setTimeout(()=>{e.attr("data-original-title",a),r(e)},2e3)}})}),$(function(){const s=$("#topbar-title"),i=$("#topbar-wrapper").outerHeight(),c="scroll-focus";$("a[href*='#']").not("[href='#']").not("[href='#0']").click(function(n){if(this.pathname.replace(/^\//,"")===location.pathname.replace(/^\//,"")&&location.hostname===this.hostname){const r=decodeURI(this.hash);let e=RegExp(/^#fnref:/).test(r),o=!e&&RegExp(/^#fn:/).test(r);var l=r.includes(":")?r.replace(/\:/g,"\\:"):r;let a=$(l);l=$(this).parent().prop("tagName"),l=RegExp(/^H\d/).test(l);if(void 0!==a){n.preventDefault(),history.pushState&&history.pushState(null,null,r);n=l?$(this).offset().top:$(window).scrollTop();let t=a.offset().top;t(a.focus(),$(`[${c}=true]`).length&&$(`[${c}=true]`).attr(c,!1),$(":target").length&&$(":target").attr(c,!1),(o||e)&&a.attr(c,!0),a.is(":focus")?!1:(a.attr("tabindex","-1"),void a.focus())))}}})}); \ No newline at end of file