From 4ad0a767890f3f05d3bd1ae9d0a259210fdf9ce2 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Wed, 22 Sep 2021 18:25:46 +0800 Subject: [PATCH 1/4] Add label icon to code snippet header --- _includes/refactor-content.html | 12 ++++++++--- _sass/addon/syntax.scss | 37 +++++++++++++++++++++------------ 2 files changed, 33 insertions(+), 16 deletions(-) diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html index 8525900..e8230c2 100644 --- a/_includes/refactor-content.html +++ b/_includes/refactor-content.html @@ -119,14 +119,20 @@ {% if _left contains 'file="' %} {% assign _text = _left | split: 'file="' | last | split: '"' | first %} + {% assign _label_icon = 'far fa-file' %} {% else %} {% assign _text = _left | split: 'language-' | last | split: ' ' | first %} + {% assign _label_icon = 'fas fa-code small' %} {% endif %} + {% capture _label %} + + {% endcapture %} + {% assign _new_content = _new_content | append: _snippet - | append: '
' | append: '
' diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss index fcd2ca3..c898c8d 100644 --- a/_sass/addon/syntax.scss +++ b/_sass/addon/syntax.scss @@ -172,24 +172,33 @@ div { align-items: center; line-height: 1.85rem; - // text data - &::before { - content: attr(text-data); + // the label + span { color: var(--lang-badge-color); - padding-left: 1em; + padding-left: 0.6rem; + font-size: 0.85rem; - // language - font-size: 0.75rem; - font-weight: 600; - text-transform: uppercase; + &:after { + content: attr(text-data); + margin-left: 0.3rem; + font-weight: 600; - // file name - @at-root [file] #{&} { - font-size: 0.85rem; - text-transform: none; + // language + @at-root .highlighter-rouge:not([file]) #{&} { + font-size: 0.75rem; + text-transform: uppercase; + } + + } // :after + + @at-root [file] #{&} > i { // center the file icon + position: relative; + top: 1px; } + } + // clipboard button { border: 1px solid var(--code-header-bg); @@ -208,7 +217,9 @@ div { &:not([timeout]):hover { background-color: gray; - color: white; + > i { + color: white; + } } &:focus { From ed93fbdfde9cc49a9409373a8313773fb26b8135 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Wed, 22 Sep 2021 21:20:30 +0800 Subject: [PATCH 2/4] Covert the language alias on code header --- _includes/language-alias.html | 72 +++++++++++++++++++++++++++++++++ _includes/refactor-content.html | 3 +- _sass/addon/syntax.scss | 10 +---- 3 files changed, 76 insertions(+), 9 deletions(-) create mode 100644 _includes/language-alias.html diff --git a/_includes/language-alias.html b/_includes/language-alias.html new file mode 100644 index 0000000..26912a3 --- /dev/null +++ b/_includes/language-alias.html @@ -0,0 +1,72 @@ +{% comment %} + + Convert the alias of the syntax language to the official name + + See: + +{% endcomment %} + +{% assign _lang = include.language | default: '' %} + +{% case _lang %} + {% when 'actionscript', 'as', 'as3' %} + {{ 'ActionScript' }} + {% when 'applescript' %} + {{ 'AppleScript' }} + {% when 'brightscript', 'bs', 'brs' %} + {{ 'BrightScript' }} + {% when 'cfscript', 'cfc' %} + {{ 'CFScript' }} + {% when 'coffeescript', 'coffee', 'coffee-script' %} + {{ 'CoffeeScript' }} + {% when 'cs', 'csharp' %} + {{ 'C#' }} + {% when 'erl' %} + {{ 'Erlang' }} + {% when 'graphql' %} + {{ 'GraphQL' }} + {% when 'haskell', 'hs' %} + {{ 'Haskell' }} + {% when 'javascript', 'js' %} + {{ 'JavaScript' }} + {% when 'make', 'mf', 'gnumake', 'bsdmake' %} + {{ 'Makefile' }} + {% when 'md', 'mkd' %} + {{ 'Markdown' }} + {% when 'm' %} + {{ 'Matlab' }} + {% when 'objective_c', 'objc', 'obj-c', 'obj_c', 'objectivec' %} + {{ 'Objective-C' }} + {% when 'perl', 'pl' %} + {{ 'Perl' }} + {% when 'php','php3','php4','php5' %} + {{ 'PHP' }} + {% when 'plaintext', 'text' %} + {{ 'Text' }} + {% when 'py' %} + {{ 'Python' }} + {% when 'rb' %} + {{ 'Ruby' }} + {% when 'rs','no_run','ignore','should_panic' %} + {{ 'Rust' }} + {% when 'bash', 'zsh', 'ksh', 'sh' %} + {{ 'Shell' }} + {% when 'st', 'squeak' %} + {{ 'Smalltalk' }} + {% when 'tex'%} + {{ 'TeX' }} + {% when 'latex' %} + {{ 'LaTex' }} + {% when 'ts', 'typescript' %} + {{ 'TypeScript' }} + {% when 'vb', 'visualbasic' %} + {{ 'Visual Basic' }} + {% when 'vue', 'vuejs' %} + {{ 'Vue.js' }} + {% when 'yml' %} + {{ 'YAML' }} + {% when 'css', 'html', 'scss', 'ssh', 'toml', 'xml', 'yaml' %} + {{ _lang | upcase }} + {% else %} + {{ _lang | capitalize }} +{% endcase %} diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html index e8230c2..c97f746 100644 --- a/_includes/refactor-content.html +++ b/_includes/refactor-content.html @@ -121,7 +121,8 @@ {% assign _text = _left | split: 'file="' | last | split: '"' | first %} {% assign _label_icon = 'far fa-file' %} {% else %} - {% assign _text = _left | split: 'language-' | last | split: ' ' | first %} + {% assign _lang = _left | split: 'language-' | last | split: ' ' | first %} + {% capture _text %}{% include language-alias.html language=_lang %}{% endcapture %} {% assign _label_icon = 'fas fa-code small' %} {% endif %} diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss index c898c8d..1abcb12 100644 --- a/_sass/addon/syntax.scss +++ b/_sass/addon/syntax.scss @@ -172,7 +172,7 @@ div { align-items: center; line-height: 1.85rem; - // the label + // the label block span { color: var(--lang-badge-color); padding-left: 0.6rem; @@ -183,13 +183,7 @@ div { margin-left: 0.3rem; font-weight: 600; - // language - @at-root .highlighter-rouge:not([file]) #{&} { - font-size: 0.75rem; - text-transform: uppercase; - } - - } // :after + } @at-root [file] #{&} > i { // center the file icon position: relative; From abb548fcee432b5c0e0f5bf7a94ace8abca325d1 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Wed, 22 Sep 2021 21:27:15 +0800 Subject: [PATCH 3/4] Change the icon & color of the code block header --- _includes/refactor-content.html | 4 ++-- _sass/addon/syntax.scss | 25 ++++++++++++++++--------- _sass/colors/dark-syntax.scss | 3 ++- _sass/colors/light-syntax.scss | 3 ++- 4 files changed, 22 insertions(+), 13 deletions(-) diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html index c97f746..95c6d7b 100644 --- a/_includes/refactor-content.html +++ b/_includes/refactor-content.html @@ -119,7 +119,7 @@ {% if _left contains 'file="' %} {% assign _text = _left | split: 'file="' | last | split: '"' | first %} - {% assign _label_icon = 'far fa-file' %} + {% assign _label_icon = 'far fa-file-code' %} {% else %} {% assign _lang = _left | split: 'language-' | last | split: ' ' | first %} {% capture _text %}{% include language-alias.html language=_lang %}{% endcapture %} @@ -135,7 +135,7 @@ | append: _label | append: '
' + | append: '">' | append: '
' %} diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss index 1abcb12..8dea9e2 100644 --- a/_sass/addon/syntax.scss +++ b/_sass/addon/syntax.scss @@ -172,17 +172,27 @@ div { align-items: center; line-height: 1.85rem; + // icons + i { + font-size: 1rem; + color: var(--lang-badge-muted-color); + + &.small { + font-size: 70%; + margin-left: 0.25rem; + } + } + // the label block span { - color: var(--lang-badge-color); padding-left: 0.6rem; - font-size: 0.85rem; &:after { content: attr(text-data); margin-left: 0.3rem; + font-size: 0.85rem; font-weight: 600; - + color: var(--lang-badge-color); } @at-root [file] #{&} > i { // center the file icon @@ -200,13 +210,14 @@ div { padding: 0; width: 1.95rem; background-color: inherit; - color: var(--highlight-lineno-color); @extend %cursor-pointer; &[timeout] { - color: var(--clipboard-checked-color); border-color: var(--clipboard-checked-color); + i { + color: var(--clipboard-checked-color); + } } &:not([timeout]):hover { @@ -220,10 +231,6 @@ div { outline: none; } - i { - font-size: 0.9rem; - } - } } diff --git a/_sass/colors/dark-syntax.scss b/_sass/colors/dark-syntax.scss index 4f5fe84..6559f6b 100644 --- a/_sass/colors/dark-syntax.scss +++ b/_sass/colors/dark-syntax.scss @@ -75,7 +75,8 @@ --highlight-lineno-color: #6c6c6d; --inline-code-bg: #272822; --code-header-bg: #353535; - --lang-badge-color: #6c6c6d; + --lang-badge-color: #858586; + --lang-badge-muted-color: #6c6c6d; --clipboard-checked-color: #2bcc2b; .highlight { diff --git a/_sass/colors/light-syntax.scss b/_sass/colors/light-syntax.scss index 314fe2e..0b2b721 100644 --- a/_sass/colors/light-syntax.scss +++ b/_sass/colors/light-syntax.scss @@ -72,7 +72,8 @@ --highlight-lineno-color: #c2c6cc; --inline-code-bg: #f3f3f3; --code-header-bg: #eaeaea; - --lang-badge-color: #a4a7ab; + --lang-badge-color: rgb(128 128 128 / 87%); + --lang-badge-muted-color: rgb(128 128 128 / 36%); --clipboard-checked-color: #43c743; } // light-syntax From 1bb54096f48d91ae97a712d29c950d8e7565e85d Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Wed, 22 Sep 2021 22:21:33 +0800 Subject: [PATCH 4/4] Improve the UX of clipboard button --- _includes/refactor-content.html | 2 +- _javascript/utils/clipboard.js | 7 ++++--- _sass/addon/syntax.scss | 10 +++++++--- assets/js/dist/page.min.js | 2 +- assets/js/dist/post.min.js | 2 +- 5 files changed, 14 insertions(+), 9 deletions(-) diff --git a/_includes/refactor-content.html b/_includes/refactor-content.html index 95c6d7b..b2d7fc1 100644 --- a/_includes/refactor-content.html +++ b/_includes/refactor-content.html @@ -133,7 +133,7 @@ {% assign _new_content = _new_content | append: _snippet | append: '
' | append: _label - | append: '
' | append: '
' diff --git a/_javascript/utils/clipboard.js b/_javascript/utils/clipboard.js index de67a34..9993e09 100644 --- a/_javascript/utils/clipboard.js +++ b/_javascript/utils/clipboard.js @@ -41,7 +41,7 @@ $(function() { }); $(btnSelector).tooltip({ - trigger: 'click', + trigger: 'hover', placement: 'left' }); @@ -53,11 +53,12 @@ $(function() { const ICON_DEFAULT = getIcon(btnSelector); function showTooltip(btn) { - $(btn).tooltip('show'); + const succeedTitle = $(btn).attr('title-succeed'); + $(btn).attr('data-original-title', succeedTitle).tooltip('show'); } function hideTooltip(btn) { - $(btn).tooltip('hide'); + $(btn).tooltip('hide').removeAttr('data-original-title'); } function setSuccessIcon(btn) { diff --git a/_sass/addon/syntax.scss b/_sass/addon/syntax.scss index 8dea9e2..e868146 100644 --- a/_sass/addon/syntax.scss +++ b/_sass/addon/syntax.scss @@ -214,15 +214,19 @@ div { @extend %cursor-pointer; &[timeout] { - border-color: var(--clipboard-checked-color); + &:hover { + border-color: var(--clipboard-checked-color); + } + i { color: var(--clipboard-checked-color); } } &:not([timeout]):hover { - background-color: gray; - > i { + background-color: rgba(128, 128, 128, 0.37); + + i { color: white; } } diff --git a/assets/js/dist/page.min.js b/assets/js/dist/page.min.js index 1dd6520..f61e6c8 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(()=>{$(this).scrollTop()>50&&"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(){const t=$("#sidebar-trigger"),e=$("#search-trigger"),o=$("#search-cancel"),a=$("#search-cleaner"),s=$("#main"),n=$("#topbar-title"),l=$("#search-wrapper"),i=$("#search-result-wrapper"),c=$("#search-results"),r=$("#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:()=>t}}(),p={on(){t.addClass("unloaded"),n.addClass("unloaded"),e.addClass("unloaded"),l.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),l.removeClass("d-flex"),t.removeClass("unloaded"),n.removeClass("unloaded"),e.removeClass("unloaded")}},f=function(){let t=!1;return{on(){t||(u.block(),i.removeClass("unloaded"),s.addClass("unloaded"),t=!0)},off(){t&&(c.empty(),d.hasClass("unloaded")&&d.removeClass("unloaded"),i.addClass("unloaded"),a.removeClass("visible"),s.removeClass("unloaded"),u.release(),r.val(""),t=!1)},isVisible:()=>t}}();function h(){return o.hasClass("loaded")}e.click(function(){p.on(),f.on(),r.focus()}),o.click(function(){p.off(),f.off()}),r.focus(function(){l.addClass("input-focus")}),r.focusout(function(){l.removeClass("input-focus")}),r.on("keyup",function(t){8===t.keyCode&&""===r.val()?h()?d.removeClass("unloaded"):f.off():""!==r.val()&&(f.on(),a.hasClass("visible")||a.addClass("visible"),h()&&d.addClass("unloaded"))}),a.on("click",function(){r.val(""),h()?(d.removeClass("unloaded"),c.empty()):f.off(),r.focus(),a.removeClass("visible")})}),$(function(){const t=function(){let t=!1;const e=$("body");return{toggle(){!1===t?e.attr("sidebar-display",""):e.removeAttr("sidebar-display"),t=!t}}}();$("#sidebar-trigger").click(t.toggle),$("#mask").click(t.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const t=$("#topbar-wrapper"),e=$("#toc-wrapper"),o=$(".access"),a=$("#search-input");let s,n=0;const l=5,i=t.outerHeight();$(window).scroll(function(t){$("#topbar-title").is(":hidden")&&(s=!0)}),setInterval(function(){s&&(!function(){var s=$(this).scrollTop();Math.abs(n-s)<=l||(s>n&&s>i?(t.removeClass("topbar-down").addClass("topbar-up"),e.length>0&&e.removeClass("topbar-down"),o.length>0&&o.removeClass("topbar-down"),a.is(":focus")&&a.blur()):s+$(window).height()<$(document).height()&&(t.removeClass("topbar-up").addClass("topbar-down"),e.length>0&&e.addClass("topbar-down"),o.length>0&&o.addClass("topbar-down")),n=s)}(),s=!1)},250)}),$(function(){const t=$("#topbar-title"),e=$("div.post>h1"),o=t.text().trim();let a=e.length>0?e.text().trim():$("h1").text().trim();($("#page-category").length||$("#page-tag").length)&&/\s/.test(a)&&(a=a.replace(/[0-9]/g,"").trim()),$(window).scroll(function(){if($("#post-list").length||e.is(":hidden")||t.is(":hidden")||$("#sidebar.sidebar-expand").length)return!1;$(this).scrollTop()>=95?t.text()!==a&&t.text(a):t.text()!==o&&t.text(o)}),t.click(function(){$("body,html").animate({scrollTop:0},800)})}),$(function(){$("input[type=checkbox]").addClass("unloaded"),$("input[type=checkbox][checked]").before(''),$("input[type=checkbox]:not([checked])").before('')}),$(function(){const t="#main > div.row:first-child > div:first-child";if($(`${t} img`).length<=0)return;const e=document.querySelectorAll(`${t} img[data-src]`);lozad(e).observe(),$(`${t} p > img[data-src],${t} img[data-src].preview-img`).each(function(){let t=$(this).next();const 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(){const t="fas fa-check",e="timeout",o=2e3;function a(t){if($(t)[0].hasAttribute(e)){let o=$(t).attr(e);if(Number(o)>Date.now())return!0}return!1}function s(t){$(t).attr(e,Date.now()+o)}function n(t){$(t).removeAttr(e)}const l=new ClipboardJS(".code-header>button",{target:t=>t.parentNode.nextElementSibling.querySelector("code .rouge-code")});$(".code-header>button").tooltip({trigger:"click",placement:"left"});const i=$(".code-header>button").children().attr("class");l.on("success",e=>{e.clearSelection();const l=e.trigger;a(l)||(!function(e){$(e).children().attr("class",t)}(l),function(t){$(t).tooltip("show")}(l),s(l),setTimeout(()=>{!function(t){$(t).tooltip("hide")}(l),function(t){$(t).children().attr("class",i)}(l),n(l)},o))}),$("#copy-link").click(t=>{let e=$(t.target);if(a(e))return;const l=window.location.href,i=$("");$("body").append(i),i.val(l).select(),document.execCommand("copy"),i.remove();const c=e.attr("data-original-title"),r=e.attr("title-succeed");e.attr("data-original-title",r).tooltip("show"),s(e),setTimeout(()=>{e.attr("data-original-title",c),n(e)},o)})}); \ No newline at end of file +$(function(){$(window).scroll(()=>{$(this).scrollTop()>50&&"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(){const t=$("#sidebar-trigger"),e=$("#search-trigger"),o=$("#search-cancel"),a=$("#search-cleaner"),s=$("#main"),n=$("#topbar-title"),l=$("#search-wrapper"),i=$("#search-result-wrapper"),r=$("#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:()=>t}}(),p={on(){t.addClass("unloaded"),n.addClass("unloaded"),e.addClass("unloaded"),l.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),l.removeClass("d-flex"),t.removeClass("unloaded"),n.removeClass("unloaded"),e.removeClass("unloaded")}},f=function(){let t=!1;return{on(){t||(u.block(),i.removeClass("unloaded"),s.addClass("unloaded"),t=!0)},off(){t&&(r.empty(),d.hasClass("unloaded")&&d.removeClass("unloaded"),i.addClass("unloaded"),a.removeClass("visible"),s.removeClass("unloaded"),u.release(),c.val(""),t=!1)},isVisible:()=>t}}();function h(){return o.hasClass("loaded")}e.click(function(){p.on(),f.on(),c.focus()}),o.click(function(){p.off(),f.off()}),c.focus(function(){l.addClass("input-focus")}),c.focusout(function(){l.removeClass("input-focus")}),c.on("keyup",function(t){8===t.keyCode&&""===c.val()?h()?d.removeClass("unloaded"):f.off():""!==c.val()&&(f.on(),a.hasClass("visible")||a.addClass("visible"),h()&&d.addClass("unloaded"))}),a.on("click",function(){c.val(""),h()?(d.removeClass("unloaded"),r.empty()):f.off(),c.focus(),a.removeClass("visible")})}),$(function(){const t=function(){let t=!1;const e=$("body");return{toggle(){!1===t?e.attr("sidebar-display",""):e.removeAttr("sidebar-display"),t=!t}}}();$("#sidebar-trigger").click(t.toggle),$("#mask").click(t.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const t=$("#topbar-wrapper"),e=$("#toc-wrapper"),o=$(".access"),a=$("#search-input");let s,n=0;const l=5,i=t.outerHeight();$(window).scroll(function(t){$("#topbar-title").is(":hidden")&&(s=!0)}),setInterval(function(){s&&(!function(){var s=$(this).scrollTop();Math.abs(n-s)<=l||(s>n&&s>i?(t.removeClass("topbar-down").addClass("topbar-up"),e.length>0&&e.removeClass("topbar-down"),o.length>0&&o.removeClass("topbar-down"),a.is(":focus")&&a.blur()):s+$(window).height()<$(document).height()&&(t.removeClass("topbar-up").addClass("topbar-down"),e.length>0&&e.addClass("topbar-down"),o.length>0&&o.addClass("topbar-down")),n=s)}(),s=!1)},250)}),$(function(){const t=$("#topbar-title"),e=$("div.post>h1"),o=t.text().trim();let a=e.length>0?e.text().trim():$("h1").text().trim();($("#page-category").length||$("#page-tag").length)&&/\s/.test(a)&&(a=a.replace(/[0-9]/g,"").trim()),$(window).scroll(function(){if($("#post-list").length||e.is(":hidden")||t.is(":hidden")||$("#sidebar.sidebar-expand").length)return!1;$(this).scrollTop()>=95?t.text()!==a&&t.text(a):t.text()!==o&&t.text(o)}),t.click(function(){$("body,html").animate({scrollTop:0},800)})}),$(function(){$("input[type=checkbox]").addClass("unloaded"),$("input[type=checkbox][checked]").before(''),$("input[type=checkbox]:not([checked])").before('')}),$(function(){const t="#main > div.row:first-child > div:first-child";if($(`${t} img`).length<=0)return;const e=document.querySelectorAll(`${t} img[data-src]`);lozad(e).observe(),$(`${t} p > img[data-src],${t} img[data-src].preview-img`).each(function(){let t=$(this).next();const 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(){const t="fas fa-check",e="timeout",o=2e3;function a(t){if($(t)[0].hasAttribute(e)){let o=$(t).attr(e);if(Number(o)>Date.now())return!0}return!1}function s(t){$(t).attr(e,Date.now()+o)}function n(t){$(t).removeAttr(e)}const l=new ClipboardJS(".code-header>button",{target:t=>t.parentNode.nextElementSibling.querySelector("code .rouge-code")});$(".code-header>button").tooltip({trigger:"hover",placement:"left"});const i=$(".code-header>button").children().attr("class");l.on("success",e=>{e.clearSelection();const l=e.trigger;a(l)||(!function(e){$(e).children().attr("class",t)}(l),function(t){const e=$(t).attr("title-succeed");$(t).attr("data-original-title",e).tooltip("show")}(l),s(l),setTimeout(()=>{!function(t){$(t).tooltip("hide").removeAttr("data-original-title")}(l),function(t){$(t).children().attr("class",i)}(l),n(l)},o))}),$("#copy-link").click(t=>{let e=$(t.target);if(a(e))return;const l=window.location.href,i=$("");$("body").append(i),i.val(l).select(),document.execCommand("copy"),i.remove();const r=e.attr("data-original-title"),c=e.attr("title-succeed");e.attr("data-original-title",c).tooltip("show"),s(e),setTimeout(()=>{e.attr("data-original-title",r),n(e)},o)})}); \ No newline at end of file diff --git a/assets/js/dist/post.min.js b/assets/js/dist/post.min.js index cfb4b82..785165b 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(()=>{$(this).scrollTop()>50&&"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(){const t=$("#sidebar-trigger"),e=$("#search-trigger"),o=$("#search-cancel"),a=$("#search-cleaner"),n=$("#main"),l=$("#topbar-title"),s=$("#search-wrapper"),r=$("#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:()=>t}}(),f={on(){t.addClass("unloaded"),l.addClass("unloaded"),e.addClass("unloaded"),s.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),s.removeClass("d-flex"),t.removeClass("unloaded"),l.removeClass("unloaded"),e.removeClass("unloaded")}},h=function(){let t=!1;return{on(){t||(u.block(),r.removeClass("unloaded"),n.addClass("unloaded"),t=!0)},off(){t&&(i.empty(),d.hasClass("unloaded")&&d.removeClass("unloaded"),r.addClass("unloaded"),a.removeClass("visible"),n.removeClass("unloaded"),u.release(),c.val(""),t=!1)},isVisible:()=>t}}();function p(){return o.hasClass("loaded")}e.click(function(){f.on(),h.on(),c.focus()}),o.click(function(){f.off(),h.off()}),c.focus(function(){s.addClass("input-focus")}),c.focusout(function(){s.removeClass("input-focus")}),c.on("keyup",function(t){8===t.keyCode&&""===c.val()?p()?d.removeClass("unloaded"):h.off():""!==c.val()&&(h.on(),a.hasClass("visible")||a.addClass("visible"),p()&&d.addClass("unloaded"))}),a.on("click",function(){c.val(""),p()?(d.removeClass("unloaded"),i.empty()):h.off(),c.focus(),a.removeClass("visible")})}),$(function(){const t=function(){let t=!1;const e=$("body");return{toggle(){!1===t?e.attr("sidebar-display",""):e.removeAttr("sidebar-display"),t=!t}}}();$("#sidebar-trigger").click(t.toggle),$("#mask").click(t.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const t=$("#topbar-wrapper"),e=$("#toc-wrapper"),o=$(".access"),a=$("#search-input");let n,l=0;const s=5,r=t.outerHeight();$(window).scroll(function(t){$("#topbar-title").is(":hidden")&&(n=!0)}),setInterval(function(){n&&(!function(){var n=$(this).scrollTop();Math.abs(l-n)<=s||(n>l&&n>r?(t.removeClass("topbar-down").addClass("topbar-up"),e.length>0&&e.removeClass("topbar-down"),o.length>0&&o.removeClass("topbar-down"),a.is(":focus")&&a.blur()):n+$(window).height()<$(document).height()&&(t.removeClass("topbar-up").addClass("topbar-down"),e.length>0&&e.addClass("topbar-down"),o.length>0&&o.addClass("topbar-down")),l=n)}(),n=!1)},250)}),$(function(){const t=$("#topbar-title"),e=$("div.post>h1"),o=t.text().trim();let a=e.length>0?e.text().trim():$("h1").text().trim();($("#page-category").length||$("#page-tag").length)&&/\s/.test(a)&&(a=a.replace(/[0-9]/g,"").trim()),$(window).scroll(function(){if($("#post-list").length||e.is(":hidden")||t.is(":hidden")||$("#sidebar.sidebar-expand").length)return!1;$(this).scrollTop()>=95?t.text()!==a&&t.text(a):t.text()!==o&&t.text(o)}),t.click(function(){$("body,html").animate({scrollTop:0},800)})}),$(function(){const t="#main > div.row:first-child > div:first-child";if($(`${t} img`).length<=0)return;const e=document.querySelectorAll(`${t} img[data-src]`);lozad(e).observe(),$(`${t} p > img[data-src],${t} img[data-src].preview-img`).each(function(){let t=$(this).next();const 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 t=$(".timeago").length,e=void 0;const o=$("meta[name=day-prompt]").attr("content"),a=$("meta[name=hour-prompt]").attr("content"),n=$("meta[name=minute-prompt]").attr("content"),l=$("meta[name=justnow-prompt]").attr("content");function s(){return $(".timeago").each(function(){if($(this).children("i").length>0){let e=$(this).clone().children().remove().end().text(),s=$(this).children("i"),r=s.text();$(this).text(function(e,s){let r=new Date,i=new Date(e);if(i.getFullYear()!==r.getFullYear()||i.getMonth()!==r.getMonth())return s;let c=Math.floor((r-i)/1e3),d=Math.floor(c/86400);if(d>=1)return t-=1,` ${d} ${o}`;let u=Math.floor(c/3600);if(u>=1)return` ${u} ${a}`;let f=Math.floor(c/60);return f>=1?` ${f} ${n}`:l}(r,e)),$(this).append(s)}}),0===t&&void 0!==e&&clearInterval(e),t}0!==t&&s()>0&&(e=setInterval(s,6e4))}),$(function(){$("input[type=checkbox]").addClass("unloaded"),$("input[type=checkbox][checked]").before(''),$("input[type=checkbox]:not([checked])").before('')}),$(function(){const t="fas fa-check",e="timeout",o=2e3;function a(t){if($(t)[0].hasAttribute(e)){let o=$(t).attr(e);if(Number(o)>Date.now())return!0}return!1}function n(t){$(t).attr(e,Date.now()+o)}function l(t){$(t).removeAttr(e)}const s=new ClipboardJS(".code-header>button",{target:t=>t.parentNode.nextElementSibling.querySelector("code .rouge-code")});$(".code-header>button").tooltip({trigger:"click",placement:"left"});const r=$(".code-header>button").children().attr("class");s.on("success",e=>{e.clearSelection();const s=e.trigger;a(s)||(!function(e){$(e).children().attr("class",t)}(s),function(t){$(t).tooltip("show")}(s),n(s),setTimeout(()=>{!function(t){$(t).tooltip("hide")}(s),function(t){$(t).children().attr("class",r)}(s),l(s)},o))}),$("#copy-link").click(t=>{let e=$(t.target);if(a(e))return;const s=window.location.href,r=$("");$("body").append(r),r.val(s).select(),document.execCommand("copy"),r.remove();const i=e.attr("data-original-title"),c=e.attr("title-succeed");e.attr("data-original-title",c).tooltip("show"),n(e),setTimeout(()=>{e.attr("data-original-title",i),l(e)},o)})}),$(function(){$("a[href*='#']").not("[href='#']").not("[href='#0']").click(function(t){if(this.pathname.replace(/^\//,"")===location.pathname.replace(/^\//,"")&&location.hostname===this.hostname){const e=16,o=decodeURI(this.hash);let a=RegExp(/^#fnref:/).test(o),n=RegExp(/^#fn:/).test(o),l=o.includes(":")?o.replace(/\:/,"\\:"):o,s=$(l);if(s.length){t.preventDefault(),history.pushState&&history.pushState(null,null,o);let l=$(this).offset().top,r=s.offset().top;const i=r{const t=$(s);t.focus();if($("[scroll-focus=true]").length&&$("[scroll-focus=true]").attr("scroll-focus",!1),$(":target").length&&$(":target").attr("scroll-focus",!1),(n||a)&&t.attr("scroll-focus",!0),t.is(":focus"))return!1;t.attr("tabindex","-1"),t.focus()})}}})}); \ No newline at end of file +$(function(){$(window).scroll(()=>{$(this).scrollTop()>50&&"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(){const t=$("#sidebar-trigger"),e=$("#search-trigger"),o=$("#search-cancel"),a=$("#search-cleaner"),n=$("#main"),l=$("#topbar-title"),s=$("#search-wrapper"),r=$("#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:()=>t}}(),f={on(){t.addClass("unloaded"),l.addClass("unloaded"),e.addClass("unloaded"),s.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),s.removeClass("d-flex"),t.removeClass("unloaded"),l.removeClass("unloaded"),e.removeClass("unloaded")}},h=function(){let t=!1;return{on(){t||(u.block(),r.removeClass("unloaded"),n.addClass("unloaded"),t=!0)},off(){t&&(i.empty(),d.hasClass("unloaded")&&d.removeClass("unloaded"),r.addClass("unloaded"),a.removeClass("visible"),n.removeClass("unloaded"),u.release(),c.val(""),t=!1)},isVisible:()=>t}}();function p(){return o.hasClass("loaded")}e.click(function(){f.on(),h.on(),c.focus()}),o.click(function(){f.off(),h.off()}),c.focus(function(){s.addClass("input-focus")}),c.focusout(function(){s.removeClass("input-focus")}),c.on("keyup",function(t){8===t.keyCode&&""===c.val()?p()?d.removeClass("unloaded"):h.off():""!==c.val()&&(h.on(),a.hasClass("visible")||a.addClass("visible"),p()&&d.addClass("unloaded"))}),a.on("click",function(){c.val(""),p()?(d.removeClass("unloaded"),i.empty()):h.off(),c.focus(),a.removeClass("visible")})}),$(function(){const t=function(){let t=!1;const e=$("body");return{toggle(){!1===t?e.attr("sidebar-display",""):e.removeAttr("sidebar-display"),t=!t}}}();$("#sidebar-trigger").click(t.toggle),$("#mask").click(t.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const t=$("#topbar-wrapper"),e=$("#toc-wrapper"),o=$(".access"),a=$("#search-input");let n,l=0;const s=5,r=t.outerHeight();$(window).scroll(function(t){$("#topbar-title").is(":hidden")&&(n=!0)}),setInterval(function(){n&&(!function(){var n=$(this).scrollTop();Math.abs(l-n)<=s||(n>l&&n>r?(t.removeClass("topbar-down").addClass("topbar-up"),e.length>0&&e.removeClass("topbar-down"),o.length>0&&o.removeClass("topbar-down"),a.is(":focus")&&a.blur()):n+$(window).height()<$(document).height()&&(t.removeClass("topbar-up").addClass("topbar-down"),e.length>0&&e.addClass("topbar-down"),o.length>0&&o.addClass("topbar-down")),l=n)}(),n=!1)},250)}),$(function(){const t=$("#topbar-title"),e=$("div.post>h1"),o=t.text().trim();let a=e.length>0?e.text().trim():$("h1").text().trim();($("#page-category").length||$("#page-tag").length)&&/\s/.test(a)&&(a=a.replace(/[0-9]/g,"").trim()),$(window).scroll(function(){if($("#post-list").length||e.is(":hidden")||t.is(":hidden")||$("#sidebar.sidebar-expand").length)return!1;$(this).scrollTop()>=95?t.text()!==a&&t.text(a):t.text()!==o&&t.text(o)}),t.click(function(){$("body,html").animate({scrollTop:0},800)})}),$(function(){const t="#main > div.row:first-child > div:first-child";if($(`${t} img`).length<=0)return;const e=document.querySelectorAll(`${t} img[data-src]`);lozad(e).observe(),$(`${t} p > img[data-src],${t} img[data-src].preview-img`).each(function(){let t=$(this).next();const 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 t=$(".timeago").length,e=void 0;const o=$("meta[name=day-prompt]").attr("content"),a=$("meta[name=hour-prompt]").attr("content"),n=$("meta[name=minute-prompt]").attr("content"),l=$("meta[name=justnow-prompt]").attr("content");function s(){return $(".timeago").each(function(){if($(this).children("i").length>0){let e=$(this).clone().children().remove().end().text(),s=$(this).children("i"),r=s.text();$(this).text(function(e,s){let r=new Date,i=new Date(e);if(i.getFullYear()!==r.getFullYear()||i.getMonth()!==r.getMonth())return s;let c=Math.floor((r-i)/1e3),d=Math.floor(c/86400);if(d>=1)return t-=1,` ${d} ${o}`;let u=Math.floor(c/3600);if(u>=1)return` ${u} ${a}`;let $=Math.floor(c/60);return $>=1?` ${$} ${n}`:l}(r,e)),$(this).append(s)}}),0===t&&void 0!==e&&clearInterval(e),t}0!==t&&s()>0&&(e=setInterval(s,6e4))}),$(function(){$("input[type=checkbox]").addClass("unloaded"),$("input[type=checkbox][checked]").before(''),$("input[type=checkbox]:not([checked])").before('')}),$(function(){const t="fas fa-check",e="timeout",o=2e3;function a(t){if($(t)[0].hasAttribute(e)){let o=$(t).attr(e);if(Number(o)>Date.now())return!0}return!1}function n(t){$(t).attr(e,Date.now()+o)}function l(t){$(t).removeAttr(e)}const s=new ClipboardJS(".code-header>button",{target:t=>t.parentNode.nextElementSibling.querySelector("code .rouge-code")});$(".code-header>button").tooltip({trigger:"hover",placement:"left"});const r=$(".code-header>button").children().attr("class");s.on("success",e=>{e.clearSelection();const s=e.trigger;a(s)||(!function(e){$(e).children().attr("class",t)}(s),function(t){const e=$(t).attr("title-succeed");$(t).attr("data-original-title",e).tooltip("show")}(s),n(s),setTimeout(()=>{!function(t){$(t).tooltip("hide").removeAttr("data-original-title")}(s),function(t){$(t).children().attr("class",r)}(s),l(s)},o))}),$("#copy-link").click(t=>{let e=$(t.target);if(a(e))return;const s=window.location.href,r=$("");$("body").append(r),r.val(s).select(),document.execCommand("copy"),r.remove();const i=e.attr("data-original-title"),c=e.attr("title-succeed");e.attr("data-original-title",c).tooltip("show"),n(e),setTimeout(()=>{e.attr("data-original-title",i),l(e)},o)})}),$(function(){$("a[href*='#']").not("[href='#']").not("[href='#0']").click(function(t){if(this.pathname.replace(/^\//,"")===location.pathname.replace(/^\//,"")&&location.hostname===this.hostname){const e=16,o=decodeURI(this.hash);let a=RegExp(/^#fnref:/).test(o),n=RegExp(/^#fn:/).test(o),l=o.includes(":")?o.replace(/\:/,"\\:"):o,s=$(l);if(s.length){t.preventDefault(),history.pushState&&history.pushState(null,null,o);let l=$(this).offset().top,r=s.offset().top;const i=r{const t=$(s);t.focus();if($("[scroll-focus=true]").length&&$("[scroll-focus=true]").attr("scroll-focus",!1),$(":target").length&&$(":target").attr("scroll-focus",!1),(n||a)&&t.attr("scroll-focus",!0),t.is(":focus"))return!1;t.attr("tabindex","-1"),t.focus()})}}})}); \ No newline at end of file