From ab16fdc7fc26811130b98a1773beb62bff6182e8 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Tue, 13 Dec 2022 21:41:32 +0800 Subject: [PATCH] feat: add shimmer background when image loads --- _includes/refactor-content.html | 57 +++++++--- _javascript/utils/img-extra.js | 31 ++---- _layouts/post.html | 23 ++-- _sass/addon/commons.scss | 163 +++++++++++++++++------------ _sass/addon/module.scss | 9 ++ _sass/colors/dark-typography.scss | 9 +- _sass/colors/light-typography.scss | 9 +- _sass/layout/post.scss | 17 ++- assets/js/dist/page.min.js | 2 +- assets/js/dist/post.min.js | 2 +- 10 files changed, 207 insertions(+), 115 deletions(-) diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html index b3a1523..e98b991 100644 --- a/_includes/refactor-content.html +++ b/_includes/refactor-content.html @@ -81,21 +81,22 @@ {% continue %} {% endunless %} - {% assign _left = _left | remove: ' /' | replace: ' w=', ' width=' | replace: ' h=', ' height=' %} - {% assign _attrs = _left | split: ' ' %} + {% assign _left = _left | remove: ' /' | replace: ' w=', ' width=' | replace: ' h=', ' height=' %} + {% assign _attrs = _left | split: '" ' %} {% assign _width = nil %} {% assign _height = nil %} {% assign _lqip = nil %} + {% assign _class = nil %} {% for _attr in _attrs %} - {% assign _pair = _attr | split: '="' %} - {% if _pair.size < 2 %} + {% unless _attr contains '=' %} {% continue %} - {% endif %} + {% endunless %} + {% assign _pair = _attr | remove: '"' | split: '=' %} {% capture _key %}{{ _pair | first }}{% endcapture %} - {% capture _value %}{{ _pair | last | remove: '"' }}{% endcapture %} + {% capture _value %}{{ _pair | last }}{% endcapture %} {% case _key %} {% when 'width' %} @@ -106,10 +107,20 @@ {% assign _src = _value %} {% when 'lqip' %} {% assign _lqip = _value %} + {% when 'class' %} + {% assign _class = _value %} {% endcase %} {% endfor %} + + {% if _class %} + {% capture _old_class %}class="{{ _class }}"{% endcapture %} + {% assign _left = _left | remove: _old_class %} + {% endif %} + + {% assign _final_src = nil %} + {% unless _src contains '//' %} {% assign _final_src = _path_prefix | append: _src %} {% capture _src_from %}"{{ _src }}"{% endcapture %} @@ -127,31 +138,51 @@ {% endif %} + {% assign _left = _left | replace: 'src=', 'data-src=' %} {% if _left contains 'class=' %} - {% assign _left = _left | replace: 'class="', 'class="lazyload ' %} + {% assign _left = _left | replace: 'class="', 'class="lazyload '%} {% else %} - {% assign _left = _left | replace: 'src=', 'class="lazyload" src=' %} + {% assign _left = _left | append: ' class="lazyload"' %} {% endif %} - {% assign _left = _left | replace: 'src=', 'data-src=' %} - - + {% if _lqip %} {% assign _left = _left | replace: ' lqip=', ' data-lqip="true" src=' %} {% else %} {% if _width and _height %} - + {%- capture _svg -%} src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ _width }} {{ _height }}'%3E%3C/svg%3E" {%- endcapture -%} {% assign _left = _svg | append: ' ' | append: _left %} + {% assign _class = _class | append: ' shimmer' %} {% endif %} {% endif %} {% assign _left = _left | append: ' data-proofer-ignore' %} - + + {% assign _parent = _right | slice: 1, 4 %} + + {% if _parent == '' %} + + {% assign _size = _img_content | size | minus: 1 %} + {% capture _class %} + class="img-link{% unless _lqip %} shimmer{% endunless %}" + {% endcapture %} + {% assign _img_content = _img_content | slice: 0, _size | append: _class | append: '>' %} + + {% else %} + + {%- capture _wrapper_start -%} + + {%- endcapture -%} + {% assign _img_content = _img_content | append: _wrapper_start %} + {% assign _right = _right | prepend: '> {% assign _img_content = _img_content | append: IMG_TAG | append: _left | append: _right %} {% endfor %} diff --git a/_javascript/utils/img-extra.js b/_javascript/utils/img-extra.js index e371244..90a3f49 100644 --- a/_javascript/utils/img-extra.js +++ b/_javascript/utils/img-extra.js @@ -1,26 +1,13 @@ /** - Set up image popup stuff (https://github.com/dimsemenov/Magnific-Popup) + * Set up image stuff */ -$(function () { - const IMG_SCOPE = '#main > div.row:first-child > div:first-child'; - - if ($(`${IMG_SCOPE} img`).length <= 0) { +(function() { + if ($('#core-wrapper img[data-src]') <= 0) { return; } - /* popup */ - - $(`${IMG_SCOPE} p > img[data-src], ${IMG_SCOPE} img[data-src].preview-img`).each( - function () { - let nextTag = $(this).next(); - const title = nextTag.prop('tagName') === 'EM' ? nextTag.text() : ''; - const src = $(this).attr('data-src'); // created by lozad.js - - $(this).wrap(``); - } - ); - + /* See: */ $('.popup').magnificPopup({ type: 'image', closeOnContentClick: true, @@ -32,8 +19,10 @@ $(function () { } }); - /* markup the image links */ + /* Stop shimmer when image loaded */ + document.addEventListener('lazyloaded', function(e) { + const $img = $(e.target); + $img.parent().removeClass('shimmer'); + }); - $(`${IMG_SCOPE} a`).has('img').addClass('img-link'); - -}); +})(); diff --git a/_layouts/post.html b/_layouts/post.html index 3a32921..a55031e 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -27,32 +27,37 @@ tail_includes: {% endif %} {% if page.image %} -
- {{ page.image.alt | default: - - {% if page.image.alt %} +
+ + {%- if page.image.alt -%}
{{ page.image.alt }}
- {% endif %} + {%- endif -%}
{% endif %} diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index e7692fe..6ea733d 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -83,6 +83,47 @@ a { img { max-width: 100%; height: auto; + + &[data-src] { + &.lazyloaded { + z-index: 1; + -webkit-animation: fade-in 0.4s ease-in; + animation: fade-in 0.4s ease-in; + } + + &[data-lqip="true"] { + &.lazyload, + &.lazyloading { + -webkit-filter: blur(20px); + filter: blur(20px); + } + } + + &:not([data-lqip="true"]) { + &.lazyload, + &.lazyloading { + background: var(--img-bg); + } + } + + &.shadow { + -webkit-filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08)); + filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08)); + box-shadow: none !important; /* cover the Bootstrap 4.6.1 styles */ + } + + @extend %img-caption; + } + + @-webkit-keyframes fade-in { + from { opacity: 0; } + to { opacity: 1; } + } + + @keyframes fade-in { + from { opacity: 0; } + to { opacity: 1; } + } } blockquote { @@ -183,49 +224,6 @@ i { /* fontawesome icons */ } } -img[data-src] { - @at-root #main #{&} { - margin: 0.5rem 0; - } - - &[data-lqip="true"] { - &.lazyload, - &.lazyloading { - filter: blur(20px); - } - } - - &:not([data-lqip="true"]) { - &.lazyload, - &.lazyloading { - opacity: 0; - } - - &.lazyloaded { - opacity: 1; - transition: opacity 0.5s; - } - } - - &.left { - float: left; - margin: 0.75rem 1rem 1rem 0; - } - - &.right { - float: right; - margin: 0.75rem 0 1rem 1rem; - } - - &.shadow { - -webkit-filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08)); - filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08)); - box-shadow: none !important; /* cover the Bootstrap 4.6.1 styles */ - } - - @extend %img-caption; -} - /* --- Panels --- */ .access { @@ -406,26 +404,14 @@ img[data-src] { margin-bottom: 1.5rem; } - img[data-src]:not(.normal):not(.left):not(.right) { - @include align-center; - } - - a { - &.img-link { - @extend %no-cursor; - } - - /* created by `_includes/img-extra.html` */ - &.popup { - cursor: zoom-in; - } - - &:hover { - code { - @extend %link-hover; + p { + > img[data-src], + > a.popup { + &:not(.normal):not(.left):not(.right) { + @include align-center; } } - } /* a */ + } } .pageviews .fa-spinner { @@ -457,6 +443,14 @@ img[data-src] { overflow-wrap: break-word; a { + &.popup { + @extend %no-cursor; + @extend %img-caption; + @include mt-mb(0.5rem); + + cursor: zoom-in; + } + &:not(.img-link) { @extend %link-underline; @@ -464,10 +458,6 @@ img[data-src] { @extend %link-hover; } } - - &.img-link { - @extend %img-caption; - } } ol, @@ -553,6 +543,39 @@ img[data-src] { } } +.img-link { + color: transparent; + display: inline-flex; + + @extend %img-rounded; +} + +.shimmer { + overflow: hidden; + position: relative; + background: var(--img-bg); + + &::before { + content: ""; + position: absolute; + background: var(--shimmer-bg); + height: 100%; + width: 100%; + -webkit-animation: shimmer 1s infinite; + animation: shimmer 1s infinite; + } + + @-webkit-keyframes shimmer { + 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } + 100% { -webkit-transform: translateX(100%); transform: translateX(100%); } + } + + @keyframes shimmer { + 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); } + 100% { -webkit-transform: translateX(100%); transform: translateX(100%); } + } +} + /* --- buttons --- */ .btn-lang { border: 1px solid !important; @@ -622,6 +645,16 @@ img[data-src] { transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; } +.left { + float: left; + margin: 0.75rem 1rem 1rem 0 !important; +} + +.right { + float: right; + margin: 0.75rem 0 1rem 1rem !important; +} + /* --- Overriding --- */ /* magnific-popup */ diff --git a/_sass/addon/module.scss b/_sass/addon/module.scss index 1f98002..a00e2dc 100644 --- a/_sass/addon/module.scss +++ b/_sass/addon/module.scss @@ -90,6 +90,10 @@ font-style: normal; } +%img-rounded { + border-radius: 10px; +} + %img-caption { + em { display: block; @@ -114,6 +118,11 @@ text-decoration: none; } +@mixin mt-mb($value) { + margin-top: $value; + margin-bottom: $value; +} + @mixin ml-mr($value) { margin-left: $value; margin-right: $value; diff --git a/_sass/colors/dark-typography.scss b/_sass/colors/dark-typography.scss index 9c60b93..f834f84 100644 --- a/_sass/colors/dark-typography.scss +++ b/_sass/colors/dark-typography.scss @@ -26,6 +26,14 @@ --label-color: rgb(108, 117, 125); --checkbox-color: rgb(118, 120, 121); --checkbox-checked-color: var(--link-color); + --img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%); + --shimmer-bg: + linear-gradient( + 90deg, + rgba(255, 255, 255, 0) 0%, + rgba(58, 55, 55, 0.4) 50%, + rgba(255, 255, 255, 0) 100% + ); /* Sidebar */ --sidebar-bg: radial-gradient(circle, #242424 0%, #1d1f27 100%); @@ -65,7 +73,6 @@ --card-bg: rgb(39, 40, 43); --card-border-color: rgb(53, 53, 60); --card-box-shadow: var(--main-bg); - --preview-img-bg: radial-gradient(circle, rgb(22, 22, 24) 0%, rgb(32, 32, 32) 100%); --kbd-wrap-color: #6a6a6a; --kbd-text-color: #d3d3d3; --kbd-bg-color: #242424; diff --git a/_sass/colors/light-typography.scss b/_sass/colors/light-typography.scss index 5e653f9..940d7b5 100644 --- a/_sass/colors/light-typography.scss +++ b/_sass/colors/light-typography.scss @@ -24,6 +24,14 @@ --btn-box-shadow: #eaeaea; --checkbox-color: #c5c5c5; --checkbox-checked-color: #07a8f7; + --img-bg: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(249, 249, 249) 100%); + --shimmer-bg: + linear-gradient( + 90deg, + rgba(250, 250, 250, 0) 0%, + rgba(232, 230, 230, 1) 50%, + rgba(250, 250, 250, 0) 100% + ); /* Sidebar */ --sidebar-bg: #eeeeee; @@ -64,7 +72,6 @@ --tb-odd-bg: #fbfcfd; --tb-border-color: #eaeaea; --dash-color: silver; - --preview-img-bg: radial-gradient(circle, rgb(255, 255, 255) 0%, rgb(249, 249, 249) 100%); --kbd-wrap-color: #bdbdbd; --kbd-text-color: var(--text-color); --kbd-bg-color: white; diff --git a/_sass/layout/post.scss b/_sass/layout/post.scss index e1b7dab..146caba 100644 --- a/_sass/layout/post.scss +++ b/_sass/layout/post.scss @@ -26,12 +26,23 @@ color: var(--text-color); } -img.preview-img { +%preview-margin { margin: 0; - border-radius: 6px; +} + +.preview-img { + @include align-center; + @extend %preview-margin; &:not(.no-bg) { - background: var(--preview-img-bg); + img.lazyloaded { + background: var(--img-bg); + } + } + + img { + @extend %preview-margin; + @extend %img-rounded; } } diff --git a/assets/js/dist/page.min.js b/assets/js/dist/page.min.js index cd90722..59cd096 100644 --- a/assets/js/dist/page.min.js +++ b/assets/js/dist/page.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").click(t=>{t=$(t.target);(t.prop("tagName")==="button".toUpperCase()?t:t.parent()).blur(),flipMode()})});const ScrollHelper=function(){const t=$("body"),e="data-topbar-visible",o=$("#topbar-wrapper").outerHeight();let r=0,a=!1,l=!1;return{hideTopbar:()=>t.attr(e,!1),showTopbar:()=>t.attr(e,!0),addScrollUpTask:()=>{r+=1,a=a||!0},popScrollUpTask:()=>--r,hasScrollUpTask:()=>0!0===a,unlockTopbar:()=>a=!1,getTopbarHeight:()=>o,orientationLocked:()=>!0===l,lockOrientation:()=>l=!0,unLockOrientation:()=>l=!1}}();$(function(){const t=$("#sidebar-trigger"),e=$("#search-trigger"),o=$("#search-cancel"),r=$("#main"),a=$("#topbar-title"),l=$("#search-wrapper"),n=$("#search-result-wrapper"),i=$("#search-results"),s=$("#search-input"),c=$("#search-hints"),d=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"),a.addClass("unloaded"),e.addClass("unloaded"),l.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),l.removeClass("d-flex"),t.removeClass("unloaded"),a.removeClass("unloaded"),e.removeClass("unloaded")}},u=function(){let t=!1;return{on(){t||(d.block(),n.removeClass("unloaded"),r.addClass("unloaded"),t=!0)},off(){t&&(i.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),n.addClass("unloaded"),r.removeClass("unloaded"),d.release(),s.val(""),t=!1)},isVisible(){return t}}}();function h(){return o.hasClass("loaded")}e.click(function(){p.on(),u.on(),s.focus()}),o.click(function(){p.off(),u.off()}),s.focus(function(){l.addClass("input-focus")}),s.focusout(function(){l.removeClass("input-focus")}),s.on("input",()=>{""===s.val()?h()?c.removeClass("unloaded"):u.off():(u.on(),h()&&c.addClass("unloaded"))})}),$(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=$("#search-input"),o=ScrollHelper.getTopbarHeight();let t,r=0;function a(){0!==$(window).scrollTop()&&(ScrollHelper.lockOrientation(),ScrollHelper.hideTopbar())}screen.orientation?screen.orientation.onchange=()=>{var t=screen.orientation.type;"landscape-primary"!==t&&"landscape-secondary"!==t||a()}:$(window).on("orientationchange",()=>{$(window).width()<$(window).height()&&a()}),$(window).scroll(()=>{t=t||!0}),setInterval(()=>{t&&(!function(){var t=$(this).scrollTop();if(!(Math.abs(r-t)<=o)){if(t>r)ScrollHelper.hideTopbar(),e.is(":focus")&&e.blur();else if(t+$(window).height()<$(document).height()){if(ScrollHelper.hasScrollUpTask())return;ScrollHelper.topbarLocked()?ScrollHelper.unlockTopbar():ScrollHelper.orientationLocked()?ScrollHelper.unLockOrientation():ScrollHelper.showTopbar()}r=t}}(),t=!1)},250)}),$(function(){var t="div.post>h1:first-of-type",e=$(t);const n=$("#topbar-title");if(0!==e.length&&!e.hasClass("dynamic-title")&&!n.is(":hidden")){const i=n.text().trim();let r=e.text().trim(),a=!1,l=0;($("#page-category").length||$("#page-tag").length)&&/\s/.test(r)&&(r=r.replace(/[0-9]/g,"").trim()),e.offset().top<$(window).scrollTop()&&n.text(r);new IntersectionObserver(t=>{var e,o;a?(o=$(window).scrollTop(),e=l img[data-src], ${t} img[data-src].preview-img`).each(function(){var t=$(this).next(),t="EM"===t.prop("tagName")?t.text():"",e=$(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(){var t=".code-header>button";const e="timeout",a="data-title-succeed",l="data-original-title";function n(t){if($(t)[0].hasAttribute(e)){t=$(t).attr(e);if(Number(t)>Date.now())return 1}}function i(t){$(t).attr(e,Date.now()+2e3)}function s(t){$(t).removeAttr(e)}var o=new ClipboardJS(t,{target(t){return t.parentNode.nextElementSibling.querySelector("code .rouge-code")}});$(t).tooltip({trigger:"hover",placement:"left"});const r=$(t).children().attr("class");o.on("success",t=>{t.clearSelection();const e=t.trigger;var o;n(e)||(t=e,$(t).children().attr("class","fas fa-check"),t=e,o=$(t).attr(a),$(t).attr(l,o).tooltip("show"),i(e),setTimeout(()=>{var t;t=e,$(t).tooltip("hide").removeAttr(l),t=e,$(t).children().attr("class",r),s(e)},2e3))}),$("#copy-link").click(t=>{let e=$(t.target);if(!n(e)){var t=window.location.href,o=$("");$("body").append(o),o.val(t).select(),document.execCommand("copy"),o.remove();const r=e.attr(l);t=e.attr(a);e.attr(l,t).tooltip("show"),i(e),setTimeout(()=>{e.attr(l,r),s(e)},2e3)}})}),$(function(){const t=$("#topbar-title"),s="scroll-focus";$("a[href*='#']").not("[href='#']").not("[href='#0']").click(function(a){if(this.pathname.replace(/^\//,"")===location.pathname.replace(/^\//,"")&&location.hostname===this.hostname){var l=decodeURI(this.hash);let e=RegExp(/^#fnref:/).test(l),o=!e&&RegExp(/^#fn:/).test(l);var n=l.includes(":")?l.replace(/:/g,"\\:"):l;let r=$(n);var n=t.is(":visible"),i=$(window).width()<$(window).height();if(void 0!==r){a.preventDefault(),history.pushState&&history.pushState(null,null,l);a=$(window).scrollTop();let t=r.offset().top-=8;t{if(r.focus(),$(`[${s}=true]`).length&&$(`[${s}=true]`).attr(s,!1),$(":target").length&&$(":target").attr(s,!1),(o||e)&&r.attr(s,!0),r.is(":focus"))return!1;r.attr("tabindex","-1"),r.focus(),ScrollHelper.hasScrollUpTask()&&ScrollHelper.popScrollUpTask()})}}})}); +$(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").click(e=>{e=$(e.target);(e.prop("tagName")==="button".toUpperCase()?e:e.parent()).blur(),flipMode()})});const ScrollHelper=function(){const e=$("body"),t="data-topbar-visible",o=$("#topbar-wrapper").outerHeight();let r=0,a=!1,l=!1;return{hideTopbar:()=>e.attr(t,!1),showTopbar:()=>e.attr(t,!0),addScrollUpTask:()=>{r+=1,a=a||!0},popScrollUpTask:()=>--r,hasScrollUpTask:()=>0!0===a,unlockTopbar:()=>a=!1,getTopbarHeight:()=>o,orientationLocked:()=>!0===l,lockOrientation:()=>l=!0,unLockOrientation:()=>l=!1}}();$(function(){const e=$("#sidebar-trigger"),t=$("#search-trigger"),o=$("#search-cancel"),r=$("#main"),a=$("#topbar-title"),l=$("#search-wrapper"),n=$("#search-result-wrapper"),i=$("#search-results"),s=$("#search-input"),c=$("#search-hints"),d=function(){let e=0;return{block(){e=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(e)},getOffset(){return e}}}(),p={on(){e.addClass("unloaded"),a.addClass("unloaded"),t.addClass("unloaded"),l.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),l.removeClass("d-flex"),e.removeClass("unloaded"),a.removeClass("unloaded"),t.removeClass("unloaded")}},u=function(){let e=!1;return{on(){e||(d.block(),n.removeClass("unloaded"),r.addClass("unloaded"),e=!0)},off(){e&&(i.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),n.addClass("unloaded"),r.removeClass("unloaded"),d.release(),s.val(""),e=!1)},isVisible(){return e}}}();function h(){return o.hasClass("loaded")}t.click(function(){p.on(),u.on(),s.focus()}),o.click(function(){p.off(),u.off()}),s.focus(function(){l.addClass("input-focus")}),s.focusout(function(){l.removeClass("input-focus")}),s.on("input",()=>{""===s.val()?h()?c.removeClass("unloaded"):u.off():(u.on(),h()&&c.addClass("unloaded"))})}),$(function(){var e=function(){const e="sidebar-display";let t=!1;const o=$("body");return{toggle(){!1===t?o.attr(e,""):o.removeAttr(e),t=!t}}}();$("#sidebar-trigger").click(e.toggle),$("#mask").click(e.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const t=$("#search-input"),o=ScrollHelper.getTopbarHeight();let e,r=0;function a(){0!==$(window).scrollTop()&&(ScrollHelper.lockOrientation(),ScrollHelper.hideTopbar())}screen.orientation?screen.orientation.onchange=()=>{var e=screen.orientation.type;"landscape-primary"!==e&&"landscape-secondary"!==e||a()}:$(window).on("orientationchange",()=>{$(window).width()<$(window).height()&&a()}),$(window).scroll(()=>{e=e||!0}),setInterval(()=>{e&&(!function(){var e=$(this).scrollTop();if(!(Math.abs(r-e)<=o)){if(e>r)ScrollHelper.hideTopbar(),t.is(":focus")&&t.blur();else if(e+$(window).height()<$(document).height()){if(ScrollHelper.hasScrollUpTask())return;ScrollHelper.topbarLocked()?ScrollHelper.unlockTopbar():ScrollHelper.orientationLocked()?ScrollHelper.unLockOrientation():ScrollHelper.showTopbar()}r=e}}(),e=!1)},250)}),$(function(){var e="div.post>h1:first-of-type",t=$(e);const n=$("#topbar-title");if(0!==t.length&&!t.hasClass("dynamic-title")&&!n.is(":hidden")){const i=n.text().trim();let r=t.text().trim(),a=!1,l=0;($("#page-category").length||$("#page-tag").length)&&/\s/.test(r)&&(r=r.replace(/[0-9]/g,"").trim()),t.offset().top<$(window).scrollTop()&&n.text(r);new IntersectionObserver(e=>{var t,o;a?(o=$(window).scrollTop(),t=lDate.now())return 1}}function i(e){$(e).attr(t,Date.now()+2e3)}function s(e){$(e).removeAttr(t)}var o=new ClipboardJS(e,{target(e){return e.parentNode.nextElementSibling.querySelector("code .rouge-code")}});$(e).tooltip({trigger:"hover",placement:"left"});const r=$(e).children().attr("class");o.on("success",e=>{e.clearSelection();const t=e.trigger;var o;n(t)||(e=t,$(e).children().attr("class","fas fa-check"),e=t,o=$(e).attr(a),$(e).attr(l,o).tooltip("show"),i(t),setTimeout(()=>{var e;e=t,$(e).tooltip("hide").removeAttr(l),e=t,$(e).children().attr("class",r),s(t)},2e3))}),$("#copy-link").click(e=>{let t=$(e.target);if(!n(t)){var e=window.location.href,o=$("");$("body").append(o),o.val(e).select(),document.execCommand("copy"),o.remove();const r=t.attr(l);e=t.attr(a);t.attr(l,e).tooltip("show"),i(t),setTimeout(()=>{t.attr(l,r),s(t)},2e3)}})}),$(function(){const e=$("#topbar-title"),s="scroll-focus";$("a[href*='#']").not("[href='#']").not("[href='#0']").click(function(a){if(this.pathname.replace(/^\//,"")===location.pathname.replace(/^\//,"")&&location.hostname===this.hostname){var l=decodeURI(this.hash);let t=RegExp(/^#fnref:/).test(l),o=!t&&RegExp(/^#fn:/).test(l);var n=l.includes(":")?l.replace(/:/g,"\\:"):l;let r=$(n);var n=e.is(":visible"),i=$(window).width()<$(window).height();if(void 0!==r){a.preventDefault(),history.pushState&&history.pushState(null,null,l);a=$(window).scrollTop();let e=r.offset().top-=8;e{if(r.focus(),$(`[${s}=true]`).length&&$(`[${s}=true]`).attr(s,!1),$(":target").length&&$(":target").attr(s,!1),(o||t)&&r.attr(s,!0),r.is(":focus"))return!1;r.attr("tabindex","-1"),r.focus(),ScrollHelper.hasScrollUpTask()&&ScrollHelper.popScrollUpTask()})}}})}); diff --git a/assets/js/dist/post.min.js b/assets/js/dist/post.min.js index c1d086c..706f6e4 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").click(t=>{t=$(t.target);(t.prop("tagName")==="button".toUpperCase()?t:t.parent()).blur(),flipMode()})});const ScrollHelper=function(){const t=$("body"),e="data-topbar-visible",o=$("#topbar-wrapper").outerHeight();let a=0,r=!1,l=!1;return{hideTopbar:()=>t.attr(e,!1),showTopbar:()=>t.attr(e,!0),addScrollUpTask:()=>{a+=1,r=r||!0},popScrollUpTask:()=>--a,hasScrollUpTask:()=>0!0===r,unlockTopbar:()=>r=!1,getTopbarHeight:()=>o,orientationLocked:()=>!0===l,lockOrientation:()=>l=!0,unLockOrientation:()=>l=!1}}(),LocaleHelper=($(function(){const t=$("#sidebar-trigger"),e=$("#search-trigger"),o=$("#search-cancel"),a=$("#main"),r=$("#topbar-title"),l=$("#search-wrapper"),n=$("#search-result-wrapper"),i=$("#search-results"),s=$("#search-input"),c=$("#search-hints"),d=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"),r.addClass("unloaded"),e.addClass("unloaded"),l.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),l.removeClass("d-flex"),t.removeClass("unloaded"),r.removeClass("unloaded"),e.removeClass("unloaded")}},u=function(){let t=!1;return{on(){t||(d.block(),n.removeClass("unloaded"),a.addClass("unloaded"),t=!0)},off(){t&&(i.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),n.addClass("unloaded"),a.removeClass("unloaded"),d.release(),s.val(""),t=!1)},isVisible(){return t}}}();function h(){return o.hasClass("loaded")}e.click(function(){p.on(),u.on(),s.focus()}),o.click(function(){p.off(),u.off()}),s.focus(function(){l.addClass("input-focus")}),s.focusout(function(){l.removeClass("input-focus")}),s.on("input",()=>{""===s.val()?h()?c.removeClass("unloaded"):u.off():(u.on(),h()&&c.addClass("unloaded"))})}),$(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=$("#search-input"),o=ScrollHelper.getTopbarHeight();let t,a=0;function r(){0!==$(window).scrollTop()&&(ScrollHelper.lockOrientation(),ScrollHelper.hideTopbar())}screen.orientation?screen.orientation.onchange=()=>{var t=screen.orientation.type;"landscape-primary"!==t&&"landscape-secondary"!==t||r()}:$(window).on("orientationchange",()=>{$(window).width()<$(window).height()&&r()}),$(window).scroll(()=>{t=t||!0}),setInterval(()=>{t&&(!function(){var t=$(this).scrollTop();if(!(Math.abs(a-t)<=o)){if(t>a)ScrollHelper.hideTopbar(),e.is(":focus")&&e.blur();else if(t+$(window).height()<$(document).height()){if(ScrollHelper.hasScrollUpTask())return;ScrollHelper.topbarLocked()?ScrollHelper.unlockTopbar():ScrollHelper.orientationLocked()?ScrollHelper.unLockOrientation():ScrollHelper.showTopbar()}a=t}}(),t=!1)},250)}),$(function(){var t="div.post>h1:first-of-type",e=$(t);const n=$("#topbar-title");if(0!==e.length&&!e.hasClass("dynamic-title")&&!n.is(":hidden")){const i=n.text().trim();let a=e.text().trim(),r=!1,l=0;($("#page-category").length||$("#page-tag").length)&&/\s/.test(a)&&(a=a.replace(/[0-9]/g,"").trim()),e.offset().top<$(window).scrollTop()&&n.text(a);new IntersectionObserver(t=>{var e,o;r?(o=$(window).scrollTop(),e=l img[data-src], ${t} img[data-src].preview-img`).each(function(){var t=$(this).next(),t="EM"===t.prop("tagName")?t.text():"",e=$(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(){const t=$("html").attr("lang").substr(0,2),e="data-ts",o="data-df";return{locale:()=>t,attrTimestamp:()=>e,attrDateFormat:()=>o,getTimestamp:t=>Number(t.attr(e)),getDateFormat:t=>t.attr(o)}}());$(function(){dayjs.locale(LocaleHelper.locale()),dayjs.extend(window.dayjs_plugin_localizedFormat),$(`[${LocaleHelper.attrTimestamp()}]`).each(function(){var t=dayjs.unix(LocaleHelper.getTimestamp($(this))),e=t.format(LocaleHelper.getDateFormat($(this))),e=($(this).text(e),$(this).removeAttr(LocaleHelper.attrTimestamp()),$(this).removeAttr(LocaleHelper.attrDateFormat()),$(this).attr("data-toggle"));void 0!==e&&"tooltip"===e&&(e=t.format("llll"),$(this).attr("data-original-title",e))})}),$(function(){var t=".code-header>button";const e="timeout",r="data-title-succeed",l="data-original-title";function n(t){if($(t)[0].hasAttribute(e)){t=$(t).attr(e);if(Number(t)>Date.now())return 1}}function i(t){$(t).attr(e,Date.now()+2e3)}function s(t){$(t).removeAttr(e)}var o=new ClipboardJS(t,{target(t){return t.parentNode.nextElementSibling.querySelector("code .rouge-code")}});$(t).tooltip({trigger:"hover",placement:"left"});const a=$(t).children().attr("class");o.on("success",t=>{t.clearSelection();const e=t.trigger;var o;n(e)||(t=e,$(t).children().attr("class","fas fa-check"),t=e,o=$(t).attr(r),$(t).attr(l,o).tooltip("show"),i(e),setTimeout(()=>{var t;t=e,$(t).tooltip("hide").removeAttr(l),t=e,$(t).children().attr("class",a),s(e)},2e3))}),$("#copy-link").click(t=>{let e=$(t.target);if(!n(e)){var t=window.location.href,o=$("");$("body").append(o),o.val(t).select(),document.execCommand("copy"),o.remove();const a=e.attr(l);t=e.attr(r);e.attr(l,t).tooltip("show"),i(e),setTimeout(()=>{e.attr(l,a),s(e)},2e3)}})}),$(function(){const t=$("#topbar-title"),s="scroll-focus";$("a[href*='#']").not("[href='#']").not("[href='#0']").click(function(r){if(this.pathname.replace(/^\//,"")===location.pathname.replace(/^\//,"")&&location.hostname===this.hostname){var l=decodeURI(this.hash);let e=RegExp(/^#fnref:/).test(l),o=!e&&RegExp(/^#fn:/).test(l);var n=l.includes(":")?l.replace(/:/g,"\\:"):l;let a=$(n);var n=t.is(":visible"),i=$(window).width()<$(window).height();if(void 0!==a){r.preventDefault(),history.pushState&&history.pushState(null,null,l);r=$(window).scrollTop();let t=a.offset().top-=8;t{if(a.focus(),$(`[${s}=true]`).length&&$(`[${s}=true]`).attr(s,!1),$(":target").length&&$(":target").attr(s,!1),(o||e)&&a.attr(s,!0),a.is(":focus"))return!1;a.attr("tabindex","-1"),a.focus(),ScrollHelper.hasScrollUpTask()&&ScrollHelper.popScrollUpTask()})}}})}); +$(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").click(t=>{t=$(t.target);(t.prop("tagName")==="button".toUpperCase()?t:t.parent()).blur(),flipMode()})});const ScrollHelper=function(){const t=$("body"),e="data-topbar-visible",o=$("#topbar-wrapper").outerHeight();let a=0,r=!1,l=!1;return{hideTopbar:()=>t.attr(e,!1),showTopbar:()=>t.attr(e,!0),addScrollUpTask:()=>{a+=1,r=r||!0},popScrollUpTask:()=>--a,hasScrollUpTask:()=>0!0===r,unlockTopbar:()=>r=!1,getTopbarHeight:()=>o,orientationLocked:()=>!0===l,lockOrientation:()=>l=!0,unLockOrientation:()=>l=!1}}(),LocaleHelper=($(function(){const t=$("#sidebar-trigger"),e=$("#search-trigger"),o=$("#search-cancel"),a=$("#main"),r=$("#topbar-title"),l=$("#search-wrapper"),n=$("#search-result-wrapper"),i=$("#search-results"),s=$("#search-input"),c=$("#search-hints"),d=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"),r.addClass("unloaded"),e.addClass("unloaded"),l.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),l.removeClass("d-flex"),t.removeClass("unloaded"),r.removeClass("unloaded"),e.removeClass("unloaded")}},u=function(){let t=!1;return{on(){t||(d.block(),n.removeClass("unloaded"),a.addClass("unloaded"),t=!0)},off(){t&&(i.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),n.addClass("unloaded"),a.removeClass("unloaded"),d.release(),s.val(""),t=!1)},isVisible(){return t}}}();function h(){return o.hasClass("loaded")}e.click(function(){p.on(),u.on(),s.focus()}),o.click(function(){p.off(),u.off()}),s.focus(function(){l.addClass("input-focus")}),s.focusout(function(){l.removeClass("input-focus")}),s.on("input",()=>{""===s.val()?h()?c.removeClass("unloaded"):u.off():(u.on(),h()&&c.addClass("unloaded"))})}),$(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=$("#search-input"),o=ScrollHelper.getTopbarHeight();let t,a=0;function r(){0!==$(window).scrollTop()&&(ScrollHelper.lockOrientation(),ScrollHelper.hideTopbar())}screen.orientation?screen.orientation.onchange=()=>{var t=screen.orientation.type;"landscape-primary"!==t&&"landscape-secondary"!==t||r()}:$(window).on("orientationchange",()=>{$(window).width()<$(window).height()&&r()}),$(window).scroll(()=>{t=t||!0}),setInterval(()=>{t&&(!function(){var t=$(this).scrollTop();if(!(Math.abs(a-t)<=o)){if(t>a)ScrollHelper.hideTopbar(),e.is(":focus")&&e.blur();else if(t+$(window).height()<$(document).height()){if(ScrollHelper.hasScrollUpTask())return;ScrollHelper.topbarLocked()?ScrollHelper.unlockTopbar():ScrollHelper.orientationLocked()?ScrollHelper.unLockOrientation():ScrollHelper.showTopbar()}a=t}}(),t=!1)},250)}),$(function(){var t="div.post>h1:first-of-type",e=$(t);const n=$("#topbar-title");if(0!==e.length&&!e.hasClass("dynamic-title")&&!n.is(":hidden")){const i=n.text().trim();let a=e.text().trim(),r=!1,l=0;($("#page-category").length||$("#page-tag").length)&&/\s/.test(a)&&(a=a.replace(/[0-9]/g,"").trim()),e.offset().top<$(window).scrollTop()&&n.text(a);new IntersectionObserver(t=>{var e,o;r?(o=$(window).scrollTop(),e=lt,attrTimestamp:()=>e,attrDateFormat:()=>o,getTimestamp:t=>Number(t.attr(e)),getDateFormat:t=>t.attr(o)}}());$(function(){dayjs.locale(LocaleHelper.locale()),dayjs.extend(window.dayjs_plugin_localizedFormat),$(`[${LocaleHelper.attrTimestamp()}]`).each(function(){var t=dayjs.unix(LocaleHelper.getTimestamp($(this))),e=t.format(LocaleHelper.getDateFormat($(this))),e=($(this).text(e),$(this).removeAttr(LocaleHelper.attrTimestamp()),$(this).removeAttr(LocaleHelper.attrDateFormat()),$(this).attr("data-toggle"));void 0!==e&&"tooltip"===e&&(e=t.format("llll"),$(this).attr("data-original-title",e))})}),$(function(){var t=".code-header>button";const e="timeout",r="data-title-succeed",l="data-original-title";function n(t){if($(t)[0].hasAttribute(e)){t=$(t).attr(e);if(Number(t)>Date.now())return 1}}function i(t){$(t).attr(e,Date.now()+2e3)}function s(t){$(t).removeAttr(e)}var o=new ClipboardJS(t,{target(t){return t.parentNode.nextElementSibling.querySelector("code .rouge-code")}});$(t).tooltip({trigger:"hover",placement:"left"});const a=$(t).children().attr("class");o.on("success",t=>{t.clearSelection();const e=t.trigger;var o;n(e)||(t=e,$(t).children().attr("class","fas fa-check"),t=e,o=$(t).attr(r),$(t).attr(l,o).tooltip("show"),i(e),setTimeout(()=>{var t;t=e,$(t).tooltip("hide").removeAttr(l),t=e,$(t).children().attr("class",a),s(e)},2e3))}),$("#copy-link").click(t=>{let e=$(t.target);if(!n(e)){var t=window.location.href,o=$("");$("body").append(o),o.val(t).select(),document.execCommand("copy"),o.remove();const a=e.attr(l);t=e.attr(r);e.attr(l,t).tooltip("show"),i(e),setTimeout(()=>{e.attr(l,a),s(e)},2e3)}})}),$(function(){const t=$("#topbar-title"),s="scroll-focus";$("a[href*='#']").not("[href='#']").not("[href='#0']").click(function(r){if(this.pathname.replace(/^\//,"")===location.pathname.replace(/^\//,"")&&location.hostname===this.hostname){var l=decodeURI(this.hash);let e=RegExp(/^#fnref:/).test(l),o=!e&&RegExp(/^#fn:/).test(l);var n=l.includes(":")?l.replace(/:/g,"\\:"):l;let a=$(n);var n=t.is(":visible"),i=$(window).width()<$(window).height();if(void 0!==a){r.preventDefault(),history.pushState&&history.pushState(null,null,l);r=$(window).scrollTop();let t=a.offset().top-=8;t{if(a.focus(),$(`[${s}=true]`).length&&$(`[${s}=true]`).attr(s,!1),$(":target").length&&$(":target").attr(s,!1),(o||e)&&a.attr(s,!0),a.is(":focus"))return!1;a.attr("tabindex","-1"),a.focus(),ScrollHelper.hasScrollUpTask()&&ScrollHelper.popScrollUpTask()})}}})});