Add image popup effect

_includes/css-selector.html

@@ -8,3 +8,8 @@
   <link rel="stylesheet"
     href="https://cdn.jsdelivr.net/gh/afeld/bootstrap-toc@1.0.1/dist/bootstrap-toc.min.css">
 {% endif %}
+
+{% if page.layout == 'page' or page.layout == 'post' %}
+  <!-- Manific Popup -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.min.css">
+{% endif %}

_includes/js-selector.html

@@ -10,12 +10,19 @@
   {% endif %}
 {% endif %}
 
+{% if page.layout == 'post' or page.layout == 'page' %}
+  <!-- image lazy-loading & popup -->
+  <script async
+    src="https://cdn.jsdelivr.net/combine/npm/lozad/dist/lozad.min.js,npm/magnific-popup@1/dist/jquery.magnific-popup.min.js"></script>
+{% endif %}
+
 {% if page.layout == 'home'
+    or page.layout == 'categories'
     or page.layout == 'post'
-    or page.layout == 'categories' %}
+    or page.layout == 'page' %}
   {% assign type = page.layout %}
 {% else %}
-  {% assign type = "page" %}
+  {% assign type = "commons" %}
 {% endif %}
 
 {% assign js = type | prepend: '/assets/js/dist/' | append: '.min.js' %}

_includes/lozad.html

@@ -1,10 +0,0 @@
-<!--
-  image lazy load: https://github.com/ApoorvSaxena/lozad.js
--->
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
-
-<script type="text/javascript">
-  const imgs = document.querySelectorAll('#main > div.row:first-child > div:first-child img');
-  const observer = lozad(imgs);
-  observer.observe();
-</script>

_includes/refactor-content.html

@@ -46,7 +46,6 @@
   {% assign _content = _content | replace: '<img src="/', img_path_replacement %}
 
   <!-- lazy-load images <https://github.com/ApoorvSaxena/lozad.js#usage> -->
-  {% assign lozad = true %}
   {% assign img_placehodler
     = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' %}
 
@@ -60,7 +59,3 @@
 
 <!-- return -->
 {{ _content }}
-
-{% if lozad %}
-  {% include lozad.html %}
-{% endif %}

_javascript/commons/img-link.js

@@ -1,8 +0,0 @@
-/*
- * Find the image links and mark them
- */
-
-$(function() {
-  const MARK = "img-link";
-  $("#main a").has("img").addClass(MARK);
-});

_javascript/utils/img-extra.js

@@ -0,0 +1,48 @@
+/**
+  Lazy load images (https://github.com/ApoorvSaxena/lozad.js)
+  and popup when clicked (https://github.com/dimsemenov/Magnific-Popup)
+*/
+
+$(function() {
+
+  const IMG_SCOPE = '#main > div.row:first-child > div:first-child';
+
+  if ($(`${IMG_SCOPE} img`).length <= 0 ) {
+    return;
+  }
+
+  /* lozy loading */
+
+  const imgs = document.querySelectorAll(`${IMG_SCOPE} img[data-src]`);
+  const observer = lozad(imgs);
+  observer.observe();
+
+  /* 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(`<a href="${src}" title="${title}" class="popup"></a>`);
+    }
+  );
+
+  $('.popup').magnificPopup({
+    type: 'image',
+    closeOnContentClick: true,
+    showCloseBtn: false,
+    zoom: {
+      enabled: true,
+      duration: 300,
+      easing: 'ease-in-out'
+    }
+  });
+
+
+  /* markup the image links */
+  $(`${IMG_SCOPE} a`).has("img").addClass('img-link');
+
+});
+

_sass/addon/commons.scss

@@ -363,44 +363,24 @@ footer {
   overflow-wrap: break-word;
   word-wrap: break-word;
 
-  @mixin img-caption {
-    + em {
-      display: block;
-      text-align: center;
-      font-style: normal;
-      font-size: 80%;
-      padding: 0;
-      color: #6d6c6c;
+  img[data-src] {
+    margin: 0.5rem 0;
+
+    &.left {
+      float: left;
+      margin: 0.75rem 1rem 1rem 0;
     }
-  }
-
-  @mixin img-style($caption: false) {
-
-    img[data-src] {
-      margin: 0.5rem 0;
-
-      @if $caption {
-        @include img-caption;
-      }
-
-      &.left {
-        float: left;
-        margin: 0.75rem 1rem 1rem 0;
-      }
-
-      &.right {
-        float: right;
-        margin: 0.75rem 0 1rem 1rem;
-      }
-
-      &.shadow {
-        filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
-      }
 
+    &.right {
+      float: right;
+      margin: 0.75rem 0 1rem 1rem;
     }
-  }
 
-  @include img-style(true);
+    &.shadow {
+      filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
+    }
+
+  }
 
   a {
     blockquote & {
@@ -415,17 +395,27 @@ footer {
       }
     }
 
-    &.img-link {
-      @include img-style;
-      @include img-caption;
-    }
-  }
+    &.popup { // created by `_includes/img-extra.html`
+      cursor: zoom-in;
 
-  > p {
-    > img[data-src]:not(.normal):not(.left):not(.right) {
-      @include align-center;
+      > img[data-src]:not(.normal):not(.left):not(.right) {
+        @include align-center;
+      }
     }
-  }
+
+    &.img-link {
+      + em {
+        display: block;
+        text-align: center;
+        font-style: normal;
+        font-size: 80%;
+        padding: 0;
+        color: #6d6c6c;
+      }
+    }
+
+  } // a
+
 
   ul {
     // attribute 'hide-bullet' was added by liquid
@@ -584,6 +574,14 @@ footer {
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
 }
 
+/* --- override magnific-popup --- */
+
+figure .mfp-title {
+  text-align: center;
+  padding-right: 0;
+  margin-top: 0.5rem;
+}
+
 /* --- sidebar layout --- */
 
 $tab-count: 5 !default;

assets/js/dist/categories.min.js

@@ -3,4 +3,4 @@
  * © 2019 Cotes Chung
  * MIT Licensed
  */
-function copyLink(e){e&&0!==e.length||(e=window.location.href);const o=$("<input>");$("body").append(o),o.val(e).select(),document.execCommand("copy"),o.remove(),alert("Link copied successfully!")}$(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(){$("input[type=checkbox]").addClass("unloaded"),$("input[type=checkbox][checked]").before('<i class="fas fa-check-circle checked"></i>'),$("input[type=checkbox]:not([checked])").before('<i class="far fa-circle"></i>')}),$(function(){$("#main a").has("img").addClass("img-link")}),$(function(){const e=$("#sidebar-trigger"),o=$("#search-trigger"),a=$("#search-cancel"),s=$("#search-cleaner"),t=$("#main"),l=$("#topbar-title"),n=$("#search-wrapper"),r=$("#search-result-wrapper"),d=$("#search-results"),c=$("#search-input"),i=$("#search-hints"),u=function(){let e=0;return{block(){e=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(e)},getOffset(){return e}}}(),f={on(){e.addClass("unloaded"),l.addClass("unloaded"),o.addClass("unloaded"),n.addClass("d-flex"),a.addClass("loaded")},off(){a.removeClass("loaded"),n.removeClass("d-flex"),e.removeClass("unloaded"),l.removeClass("unloaded"),o.removeClass("unloaded")}},p=function(){let e=!1;return{on(){e||(u.block(),r.removeClass("unloaded"),t.addClass("unloaded"),e=!0)},off(){e&&(d.empty(),i.hasClass("unloaded")&&i.removeClass("unloaded"),r.addClass("unloaded"),s.removeClass("visible"),t.removeClass("unloaded"),u.release(),c.val(""),e=!1)},isVisible(){return e}}}();function h(){return a.hasClass("loaded")}o.click(function(){f.on(),p.on(),c.focus()}),a.click(function(){f.off(),p.off()}),c.focus(function(){n.addClass("input-focus")}),c.focusout(function(){n.removeClass("input-focus")}),c.on("keyup",function(e){8===e.keyCode&&""===c.val()?h()?i.removeClass("unloaded"):p.off():""!==c.val()&&(p.on(),s.hasClass("visible")||s.addClass("visible"),h()&&i.addClass("unloaded"))}),s.on("click",function(){c.val(""),h()?(i.removeClass("unloaded"),d.empty()):p.off(),c.focus(),s.removeClass("visible")})}),$(function(){var e=function(){const e="sidebar-display";let o=!1;const a=$("body");return{toggle(){!1===o?a.attr(e,""):a.removeAttr(e),o=!o}}}();$("#sidebar-trigger").click(e.toggle),$("#mask").click(e.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const o=$("#topbar-wrapper"),a=$("#toc-wrapper"),s=$(".access"),t=$("#search-input");let l,n=0;const r=o.outerHeight();$(window).scroll(function(e){$("#topbar-title").is(":hidden")&&(l=!0)}),setInterval(function(){l&&(function(){var e=$(this).scrollTop();Math.abs(n-e)<=5||(e>n&&e>r?(o.removeClass("topbar-down").addClass("topbar-up"),0<a.length&&a.removeClass("topbar-down"),0<s.length&&s.removeClass("topbar-down"),t.is(":focus")&&t.blur()):e+$(window).height()<$(document).height()&&(o.removeClass("topbar-up").addClass("topbar-down"),0<a.length&&a.addClass("topbar-down"),0<s.length&&s.addClass("topbar-down")),n=e)}(),l=!1)},250)}),$(function(){const e=$("#topbar-title"),o=$("div.post>h1"),a=e.text().trim();let s=(0<o.length?o:$("h1")).text().trim();($("#page-category").length||$("#page-tag").length)&&/\s/.test(s)&&(s=s.replace(/[0-9]/g,"").trim()),$(window).scroll(function(){return!($("#post-list").length||o.is(":hidden")||e.is(":hidden")||$("#sidebar.sidebar-expand").length)&&void(95<=$(this).scrollTop()?e.text()!==s&&e.text(s):e.text()!==a&&e.text(a))}),e.click(function(){$("body,html").animate({scrollTop:0},800)})}),$(function(){const e=$(".collapse");e.on("hide.bs.collapse",function(){var e="h_"+$(this).attr("id").substring("l_".length);e&&($(`#${e} .far.fa-folder-open`).attr("class","far fa-folder fa-fw"),$(`#${e} i.fas`).addClass("rotate"),$(`#${e}`).removeClass("hide-border-bottom"))}),e.on("show.bs.collapse",function(){var e="h_"+$(this).attr("id").substring("l_".length);e&&($(`#${e} .far.fa-folder`).attr("class","far fa-folder-open fa-fw"),$(`#${e} i.fas`).removeClass("rotate"),$(`#${e}`).addClass("hide-border-bottom"))})});
+$(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(){const e=$("#sidebar-trigger"),o=$("#search-trigger"),s=$("#search-cancel"),t=$("#search-cleaner"),a=$("#main"),l=$("#topbar-title"),n=$("#search-wrapper"),r=$("#search-result-wrapper"),d=$("#search-results"),i=$("#search-input"),c=$("#search-hints"),u=function(){let e=0;return{block(){e=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(e)},getOffset(){return e}}}(),f={on(){e.addClass("unloaded"),l.addClass("unloaded"),o.addClass("unloaded"),n.addClass("d-flex"),s.addClass("loaded")},off(){s.removeClass("loaded"),n.removeClass("d-flex"),e.removeClass("unloaded"),l.removeClass("unloaded"),o.removeClass("unloaded")}},p=function(){let e=!1;return{on(){e||(u.block(),r.removeClass("unloaded"),a.addClass("unloaded"),e=!0)},off(){e&&(d.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),r.addClass("unloaded"),t.removeClass("visible"),a.removeClass("unloaded"),u.release(),i.val(""),e=!1)},isVisible(){return e}}}();function h(){return s.hasClass("loaded")}o.click(function(){f.on(),p.on(),i.focus()}),s.click(function(){f.off(),p.off()}),i.focus(function(){n.addClass("input-focus")}),i.focusout(function(){n.removeClass("input-focus")}),i.on("keyup",function(e){8===e.keyCode&&""===i.val()?h()?c.removeClass("unloaded"):p.off():""!==i.val()&&(p.on(),t.hasClass("visible")||t.addClass("visible"),h()&&c.addClass("unloaded"))}),t.on("click",function(){i.val(""),h()?(c.removeClass("unloaded"),d.empty()):p.off(),i.focus(),t.removeClass("visible")})}),$(function(){var e=function(){const e="sidebar-display";let o=!1;const s=$("body");return{toggle(){!1===o?s.attr(e,""):s.removeAttr(e),o=!o}}}();$("#sidebar-trigger").click(e.toggle),$("#mask").click(e.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const o=$("#topbar-wrapper"),s=$("#toc-wrapper"),t=$(".access"),a=$("#search-input");let l,n=0;const r=o.outerHeight();$(window).scroll(function(e){$("#topbar-title").is(":hidden")&&(l=!0)}),setInterval(function(){l&&(function(){var e=$(this).scrollTop();Math.abs(n-e)<=5||(e>n&&e>r?(o.removeClass("topbar-down").addClass("topbar-up"),0<s.length&&s.removeClass("topbar-down"),0<t.length&&t.removeClass("topbar-down"),a.is(":focus")&&a.blur()):e+$(window).height()<$(document).height()&&(o.removeClass("topbar-up").addClass("topbar-down"),0<s.length&&s.addClass("topbar-down"),0<t.length&&t.addClass("topbar-down")),n=e)}(),l=!1)},250)}),$(function(){const e=$("#topbar-title"),o=$("div.post>h1"),s=e.text().trim();let t=(0<o.length?o:$("h1")).text().trim();($("#page-category").length||$("#page-tag").length)&&/\s/.test(t)&&(t=t.replace(/[0-9]/g,"").trim()),$(window).scroll(function(){return!($("#post-list").length||o.is(":hidden")||e.is(":hidden")||$("#sidebar.sidebar-expand").length)&&void(95<=$(this).scrollTop()?e.text()!==t&&e.text(t):e.text()!==s&&e.text(s))}),e.click(function(){$("body,html").animate({scrollTop:0},800)})}),$(function(){const e=$(".collapse");e.on("hide.bs.collapse",function(){var e="h_"+$(this).attr("id").substring("l_".length);e&&($(`#${e} .far.fa-folder-open`).attr("class","far fa-folder fa-fw"),$(`#${e} i.fas`).addClass("rotate"),$(`#${e}`).removeClass("hide-border-bottom"))}),e.on("show.bs.collapse",function(){var e="h_"+$(this).attr("id").substring("l_".length);e&&($(`#${e} .far.fa-folder`).attr("class","far fa-folder-open fa-fw"),$(`#${e} i.fas`).removeClass("rotate"),$(`#${e}`).addClass("hide-border-bottom"))})});

assets/js/dist/commons.min.js

@@ -0,0 +1,6 @@
+/*!
+ * Chirpy v3.3.2 (https://github.com/cotes2020/jekyll-theme-chirpy/)
+ * © 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(){const e=$("#sidebar-trigger"),o=$("#search-trigger"),s=$("#search-cancel"),t=$("#search-cleaner"),a=$("#main"),l=$("#topbar-title"),n=$("#search-wrapper"),d=$("#search-result-wrapper"),r=$("#search-results"),i=$("#search-input"),c=$("#search-hints"),u=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"),l.addClass("unloaded"),o.addClass("unloaded"),n.addClass("d-flex"),s.addClass("loaded")},off(){s.removeClass("loaded"),n.removeClass("d-flex"),e.removeClass("unloaded"),l.removeClass("unloaded"),o.removeClass("unloaded")}},f=function(){let e=!1;return{on(){e||(u.block(),d.removeClass("unloaded"),a.addClass("unloaded"),e=!0)},off(){e&&(r.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),d.addClass("unloaded"),t.removeClass("visible"),a.removeClass("unloaded"),u.release(),i.val(""),e=!1)},isVisible(){return e}}}();function h(){return s.hasClass("loaded")}o.click(function(){p.on(),f.on(),i.focus()}),s.click(function(){p.off(),f.off()}),i.focus(function(){n.addClass("input-focus")}),i.focusout(function(){n.removeClass("input-focus")}),i.on("keyup",function(e){8===e.keyCode&&""===i.val()?h()?c.removeClass("unloaded"):f.off():""!==i.val()&&(f.on(),t.hasClass("visible")||t.addClass("visible"),h()&&c.addClass("unloaded"))}),t.on("click",function(){i.val(""),h()?(c.removeClass("unloaded"),r.empty()):f.off(),i.focus(),t.removeClass("visible")})}),$(function(){var e=function(){const e="sidebar-display";let o=!1;const s=$("body");return{toggle(){!1===o?s.attr(e,""):s.removeAttr(e),o=!o}}}();$("#sidebar-trigger").click(e.toggle),$("#mask").click(e.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const o=$("#topbar-wrapper"),s=$("#toc-wrapper"),t=$(".access"),a=$("#search-input");let l,n=0;const d=o.outerHeight();$(window).scroll(function(e){$("#topbar-title").is(":hidden")&&(l=!0)}),setInterval(function(){l&&(function(){var e=$(this).scrollTop();Math.abs(n-e)<=5||(e>n&&e>d?(o.removeClass("topbar-down").addClass("topbar-up"),0<s.length&&s.removeClass("topbar-down"),0<t.length&&t.removeClass("topbar-down"),a.is(":focus")&&a.blur()):e+$(window).height()<$(document).height()&&(o.removeClass("topbar-up").addClass("topbar-down"),0<s.length&&s.addClass("topbar-down"),0<t.length&&t.addClass("topbar-down")),n=e)}(),l=!1)},250)}),$(function(){const e=$("#topbar-title"),o=$("div.post>h1"),s=e.text().trim();let t=(0<o.length?o:$("h1")).text().trim();($("#page-category").length||$("#page-tag").length)&&/\s/.test(t)&&(t=t.replace(/[0-9]/g,"").trim()),$(window).scroll(function(){return!($("#post-list").length||o.is(":hidden")||e.is(":hidden")||$("#sidebar.sidebar-expand").length)&&void(95<=$(this).scrollTop()?e.text()!==t&&e.text(t):e.text()!==s&&e.text(s))}),e.click(function(){$("body,html").animate({scrollTop:0},800)})});

assets/js/dist/home.min.js

@@ -3,4 +3,4 @@
  * © 2019 Cotes Chung
  * MIT Licensed
  */
-function copyLink(e){e&&0!==e.length||(e=window.location.href);const o=$("<input>");$("body").append(o),o.val(e).select(),document.execCommand("copy"),o.remove(),alert("Link copied successfully!")}$(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(){$("input[type=checkbox]").addClass("unloaded"),$("input[type=checkbox][checked]").before('<i class="fas fa-check-circle checked"></i>'),$("input[type=checkbox]:not([checked])").before('<i class="far fa-circle"></i>')}),$(function(){$("#main a").has("img").addClass("img-link")}),$(function(){const e=$("#sidebar-trigger"),o=$("#search-trigger"),t=$("#search-cancel"),a=$("#search-cleaner"),n=$("#main"),s=$("#topbar-title"),l=$("#search-wrapper"),r=$("#search-result-wrapper"),i=$("#search-results"),c=$("#search-input"),d=$("#search-hints"),u=function(){let e=0;return{block(){e=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(e)},getOffset(){return e}}}(),h={on(){e.addClass("unloaded"),s.addClass("unloaded"),o.addClass("unloaded"),l.addClass("d-flex"),t.addClass("loaded")},off(){t.removeClass("loaded"),l.removeClass("d-flex"),e.removeClass("unloaded"),s.removeClass("unloaded"),o.removeClass("unloaded")}},f=function(){let e=!1;return{on(){e||(u.block(),r.removeClass("unloaded"),n.addClass("unloaded"),e=!0)},off(){e&&(i.empty(),d.hasClass("unloaded")&&d.removeClass("unloaded"),r.addClass("unloaded"),a.removeClass("visible"),n.removeClass("unloaded"),u.release(),c.val(""),e=!1)},isVisible(){return e}}}();function p(){return t.hasClass("loaded")}o.click(function(){h.on(),f.on(),c.focus()}),t.click(function(){h.off(),f.off()}),c.focus(function(){l.addClass("input-focus")}),c.focusout(function(){l.removeClass("input-focus")}),c.on("keyup",function(e){8===e.keyCode&&""===c.val()?p()?d.removeClass("unloaded"):f.off():""!==c.val()&&(f.on(),a.hasClass("visible")||a.addClass("visible"),p()&&d.addClass("unloaded"))}),a.on("click",function(){c.val(""),p()?(d.removeClass("unloaded"),i.empty()):f.off(),c.focus(),a.removeClass("visible")})}),$(function(){var e=function(){const e="sidebar-display";let o=!1;const t=$("body");return{toggle(){!1===o?t.attr(e,""):t.removeAttr(e),o=!o}}}();$("#sidebar-trigger").click(e.toggle),$("#mask").click(e.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const o=$("#topbar-wrapper"),t=$("#toc-wrapper"),a=$(".access"),n=$("#search-input");let s,l=0;const r=o.outerHeight();$(window).scroll(function(e){$("#topbar-title").is(":hidden")&&(s=!0)}),setInterval(function(){s&&(function(){var e=$(this).scrollTop();Math.abs(l-e)<=5||(e>l&&e>r?(o.removeClass("topbar-down").addClass("topbar-up"),0<t.length&&t.removeClass("topbar-down"),0<a.length&&a.removeClass("topbar-down"),n.is(":focus")&&n.blur()):e+$(window).height()<$(document).height()&&(o.removeClass("topbar-up").addClass("topbar-down"),0<t.length&&t.addClass("topbar-down"),0<a.length&&a.addClass("topbar-down")),l=e)}(),s=!1)},250)}),$(function(){const e=$("#topbar-title"),o=$("div.post>h1"),t=e.text().trim();let a=(0<o.length?o:$("h1")).text().trim();($("#page-category").length||$("#page-tag").length)&&/\s/.test(a)&&(a=a.replace(/[0-9]/g,"").trim()),$(window).scroll(function(){return!($("#post-list").length||o.is(":hidden")||e.is(":hidden")||$("#sidebar.sidebar-expand").length)&&void(95<=$(this).scrollTop()?e.text()!==a&&e.text(a):e.text()!==t&&e.text(t))}),e.click(function(){$("body,html").animate({scrollTop:0},800)})}),$(function(){let n=$(".timeago").length,e=void 0;function o(){return $(".timeago").each(function(){if(0<$(this).children("i").length){let e=$(this).children("i");var o=e.text();$(this).text(function(e,o){let t=new Date,a=new Date(e);return e=void 0!==o?`${o} `:"",a.getFullYear()!==t.getFullYear()?(--n,e+a.toLocaleString("en-US",{year:"numeric",month:"short",day:"numeric"})):a.getMonth()!==t.getMonth()?(--n,e+a.toLocaleString("en-US",{month:"short",day:"numeric"})):(o=Math.floor((t-a)/1e3),1<=(e=Math.floor(o/86400))?(--n,e+" day"+(1<e?"s":"")+" ago"):1<=(e=Math.floor(o/3600))?e+" hour"+(1<e?"s":"")+" ago":1<=(o=Math.floor(o/60))?o+" minute"+(1<o?"s":"")+" ago":"just now")}(o,$(this).attr("prep"))),$(this).append(e)}}),0===n&&void 0!==e&&clearInterval(e),n}0!==n&&0<o()&&(e=setInterval(o,6e4))});
+$(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(){const e=$("#sidebar-trigger"),t=$("#search-trigger"),o=$("#search-cancel"),a=$("#search-cleaner"),s=$("#main"),l=$("#topbar-title"),n=$("#search-wrapper"),r=$("#search-result-wrapper"),d=$("#search-results"),i=$("#search-input"),c=$("#search-hints"),u=function(){let e=0;return{block(){e=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(e)},getOffset(){return e}}}(),h={on(){e.addClass("unloaded"),l.addClass("unloaded"),t.addClass("unloaded"),n.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),n.removeClass("d-flex"),e.removeClass("unloaded"),l.removeClass("unloaded"),t.removeClass("unloaded")}},f=function(){let e=!1;return{on(){e||(u.block(),r.removeClass("unloaded"),s.addClass("unloaded"),e=!0)},off(){e&&(d.empty(),c.hasClass("unloaded")&&c.removeClass("unloaded"),r.addClass("unloaded"),a.removeClass("visible"),s.removeClass("unloaded"),u.release(),i.val(""),e=!1)},isVisible(){return e}}}();function p(){return o.hasClass("loaded")}t.click(function(){h.on(),f.on(),i.focus()}),o.click(function(){h.off(),f.off()}),i.focus(function(){n.addClass("input-focus")}),i.focusout(function(){n.removeClass("input-focus")}),i.on("keyup",function(e){8===e.keyCode&&""===i.val()?p()?c.removeClass("unloaded"):f.off():""!==i.val()&&(f.on(),a.hasClass("visible")||a.addClass("visible"),p()&&c.addClass("unloaded"))}),a.on("click",function(){i.val(""),p()?(c.removeClass("unloaded"),d.empty()):f.off(),i.focus(),a.removeClass("visible")})}),$(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=$("#topbar-wrapper"),o=$("#toc-wrapper"),a=$(".access"),s=$("#search-input");let l,n=0;const r=t.outerHeight();$(window).scroll(function(e){$("#topbar-title").is(":hidden")&&(l=!0)}),setInterval(function(){l&&(function(){var e=$(this).scrollTop();Math.abs(n-e)<=5||(e>n&&e>r?(t.removeClass("topbar-down").addClass("topbar-up"),0<o.length&&o.removeClass("topbar-down"),0<a.length&&a.removeClass("topbar-down"),s.is(":focus")&&s.blur()):e+$(window).height()<$(document).height()&&(t.removeClass("topbar-up").addClass("topbar-down"),0<o.length&&o.addClass("topbar-down"),0<a.length&&a.addClass("topbar-down")),n=e)}(),l=!1)},250)}),$(function(){const e=$("#topbar-title"),t=$("div.post>h1"),o=e.text().trim();let a=(0<t.length?t:$("h1")).text().trim();($("#page-category").length||$("#page-tag").length)&&/\s/.test(a)&&(a=a.replace(/[0-9]/g,"").trim()),$(window).scroll(function(){return!($("#post-list").length||t.is(":hidden")||e.is(":hidden")||$("#sidebar.sidebar-expand").length)&&void(95<=$(this).scrollTop()?e.text()!==a&&e.text(a):e.text()!==o&&e.text(o))}),e.click(function(){$("body,html").animate({scrollTop:0},800)})}),$(function(){let s=$(".timeago").length,e=void 0;function t(){return $(".timeago").each(function(){if(0<$(this).children("i").length){let e=$(this).children("i");var t=e.text();$(this).text(function(e,t){let o=new Date,a=new Date(e);return e=void 0!==t?`${t} `:"",a.getFullYear()!==o.getFullYear()?(--s,e+a.toLocaleString("en-US",{year:"numeric",month:"short",day:"numeric"})):a.getMonth()!==o.getMonth()?(--s,e+a.toLocaleString("en-US",{month:"short",day:"numeric"})):(t=Math.floor((o-a)/1e3),1<=(e=Math.floor(t/86400))?(--s,e+" day"+(1<e?"s":"")+" ago"):1<=(e=Math.floor(t/3600))?e+" hour"+(1<e?"s":"")+" ago":1<=(t=Math.floor(t/60))?t+" minute"+(1<t?"s":"")+" ago":"just now")}(t,$(this).attr("prep"))),$(this).append(e)}}),0===s&&void 0!==e&&clearInterval(e),s}0!==s&&0<t()&&(e=setInterval(t,6e4))});

assets/js/dist/page.min.js

@@ -3,4 +3,4 @@
  * © 2019 Cotes Chung
  * MIT Licensed
  */
-function copyLink(e){e&&0!==e.length||(e=window.location.href);const t=$("<input>");$("body").append(t),t.val(e).select(),document.execCommand("copy"),t.remove(),alert("Link copied successfully!")}$(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(){$("input[type=checkbox]").addClass("unloaded"),$("input[type=checkbox][checked]").before('<i class="fas fa-check-circle checked"></i>'),$("input[type=checkbox]:not([checked])").before('<i class="far fa-circle"></i>')}),$(function(){$("#main a").has("img").addClass("img-link")}),$(function(){const e=$("#sidebar-trigger"),t=$("#search-trigger"),o=$("#search-cancel"),a=$("#search-cleaner"),s=$("#main"),l=$("#topbar-title"),n=$("#search-wrapper"),r=$("#search-result-wrapper"),c=$("#search-results"),i=$("#search-input"),d=$("#search-hints"),u=function(){let e=0;return{block(){e=window.scrollY,$("html,body").scrollTop(0)},release(){$("html,body").scrollTop(e)},getOffset(){return e}}}(),f={on(){e.addClass("unloaded"),l.addClass("unloaded"),t.addClass("unloaded"),n.addClass("d-flex"),o.addClass("loaded")},off(){o.removeClass("loaded"),n.removeClass("d-flex"),e.removeClass("unloaded"),l.removeClass("unloaded"),t.removeClass("unloaded")}},p=function(){let e=!1;return{on(){e||(u.block(),r.removeClass("unloaded"),s.addClass("unloaded"),e=!0)},off(){e&&(c.empty(),d.hasClass("unloaded")&&d.removeClass("unloaded"),r.addClass("unloaded"),a.removeClass("visible"),s.removeClass("unloaded"),u.release(),i.val(""),e=!1)},isVisible(){return e}}}();function h(){return o.hasClass("loaded")}t.click(function(){f.on(),p.on(),i.focus()}),o.click(function(){f.off(),p.off()}),i.focus(function(){n.addClass("input-focus")}),i.focusout(function(){n.removeClass("input-focus")}),i.on("keyup",function(e){8===e.keyCode&&""===i.val()?h()?d.removeClass("unloaded"):p.off():""!==i.val()&&(p.on(),a.hasClass("visible")||a.addClass("visible"),h()&&d.addClass("unloaded"))}),a.on("click",function(){i.val(""),h()?(d.removeClass("unloaded"),c.empty()):p.off(),i.focus(),a.removeClass("visible")})}),$(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=$("#topbar-wrapper"),o=$("#toc-wrapper"),a=$(".access"),s=$("#search-input");let l,n=0;const r=t.outerHeight();$(window).scroll(function(e){$("#topbar-title").is(":hidden")&&(l=!0)}),setInterval(function(){l&&(function(){var e=$(this).scrollTop();Math.abs(n-e)<=5||(e>n&&e>r?(t.removeClass("topbar-down").addClass("topbar-up"),0<o.length&&o.removeClass("topbar-down"),0<a.length&&a.removeClass("topbar-down"),s.is(":focus")&&s.blur()):e+$(window).height()<$(document).height()&&(t.removeClass("topbar-up").addClass("topbar-down"),0<o.length&&o.addClass("topbar-down"),0<a.length&&a.addClass("topbar-down")),n=e)}(),l=!1)},250)}),$(function(){const e=$("#topbar-title"),t=$("div.post>h1"),o=e.text().trim();let a=(0<t.length?t:$("h1")).text().trim();($("#page-category").length||$("#page-tag").length)&&/\s/.test(a)&&(a=a.replace(/[0-9]/g,"").trim()),$(window).scroll(function(){return!($("#post-list").length||t.is(":hidden")||e.is(":hidden")||$("#sidebar.sidebar-expand").length)&&void(95<=$(this).scrollTop()?e.text()!==a&&e.text(a):e.text()!==o&&e.text(o))}),e.click(function(){$("body,html").animate({scrollTop:0},800)})}),$(function(){$("a[href*='#']").not("[href='#']").not("[href='#0']").click(function(t){if(this.pathname.replace(/^\//,"")===location.pathname.replace(/^\//,"")&&location.hostname===this.hostname){const n=decodeURI(this.hash);let o=RegExp(/^#fnref:/).test(n),a=RegExp(/^#fn:/).test(n);var l=n.includes(":")?n.replace(/\:/,"\\:"):n;let s=$(l);if(s.length){t.preventDefault(),history.pushState&&history.pushState(null,null,n);l=$(this).offset().top;let e=s.offset().top;t=e<l,l=$("#topbar-wrapper").outerHeight();t&&o&&(e-=l+8),$("html,body").animate({scrollTop:e},800,()=>{const e=$(s);e.focus();var t="scroll-focus";if($(`[${t}=true]`).length&&$(`[${t}=true]`).attr(t,!1),$(":target").length&&$(":target").attr(t,!1),(a||o)&&e.attr(t,!0),e.is(":focus"))return!1;e.attr("tabindex","-1"),e.focus()})}}})});
+function copyLink(e){e&&0!==e.length||(e=window.location.href);const o=$("<input>");$("body").append(o),o.val(e).select(),document.execCommand("copy"),o.remove(),alert("Link copied successfully!")}$(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(){const e=$("#sidebar-trigger"),o=$("#search-trigger"),t=$("#search-cancel"),a=$("#search-cleaner"),s=$("#main"),l=$("#topbar-title"),n=$("#search-wrapper"),i=$("#search-result-wrapper"),c=$("#search-results"),d=$("#search-input"),r=$("#search-hints"),u=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"),l.addClass("unloaded"),o.addClass("unloaded"),n.addClass("d-flex"),t.addClass("loaded")},off(){t.removeClass("loaded"),n.removeClass("d-flex"),e.removeClass("unloaded"),l.removeClass("unloaded"),o.removeClass("unloaded")}},f=function(){let e=!1;return{on(){e||(u.block(),i.removeClass("unloaded"),s.addClass("unloaded"),e=!0)},off(){e&&(c.empty(),r.hasClass("unloaded")&&r.removeClass("unloaded"),i.addClass("unloaded"),a.removeClass("visible"),s.removeClass("unloaded"),u.release(),d.val(""),e=!1)},isVisible(){return e}}}();function h(){return t.hasClass("loaded")}o.click(function(){p.on(),f.on(),d.focus()}),t.click(function(){p.off(),f.off()}),d.focus(function(){n.addClass("input-focus")}),d.focusout(function(){n.removeClass("input-focus")}),d.on("keyup",function(e){8===e.keyCode&&""===d.val()?h()?r.removeClass("unloaded"):f.off():""!==d.val()&&(f.on(),a.hasClass("visible")||a.addClass("visible"),h()&&r.addClass("unloaded"))}),a.on("click",function(){d.val(""),h()?(r.removeClass("unloaded"),c.empty()):f.off(),d.focus(),a.removeClass("visible")})}),$(function(){var e=function(){const e="sidebar-display";let o=!1;const t=$("body");return{toggle(){!1===o?t.attr(e,""):t.removeAttr(e),o=!o}}}();$("#sidebar-trigger").click(e.toggle),$("#mask").click(e.toggle)}),$(function(){$('[data-toggle="tooltip"]').tooltip()}),$(function(){const o=$("#topbar-wrapper"),t=$("#toc-wrapper"),a=$(".access"),s=$("#search-input");let l,n=0;const i=o.outerHeight();$(window).scroll(function(e){$("#topbar-title").is(":hidden")&&(l=!0)}),setInterval(function(){l&&(function(){var e=$(this).scrollTop();Math.abs(n-e)<=5||(e>n&&e>i?(o.removeClass("topbar-down").addClass("topbar-up"),0<t.length&&t.removeClass("topbar-down"),0<a.length&&a.removeClass("topbar-down"),s.is(":focus")&&s.blur()):e+$(window).height()<$(document).height()&&(o.removeClass("topbar-up").addClass("topbar-down"),0<t.length&&t.addClass("topbar-down"),0<a.length&&a.addClass("topbar-down")),n=e)}(),l=!1)},250)}),$(function(){const e=$("#topbar-title"),o=$("div.post>h1"),t=e.text().trim();let a=(0<o.length?o:$("h1")).text().trim();($("#page-category").length||$("#page-tag").length)&&/\s/.test(a)&&(a=a.replace(/[0-9]/g,"").trim()),$(window).scroll(function(){return!($("#post-list").length||o.is(":hidden")||e.is(":hidden")||$("#sidebar.sidebar-expand").length)&&void(95<=$(this).scrollTop()?e.text()!==a&&e.text(a):e.text()!==t&&e.text(t))}),e.click(function(){$("body,html").animate({scrollTop:0},800)})}),$(function(){$("input[type=checkbox]").addClass("unloaded"),$("input[type=checkbox][checked]").before('<i class="fas fa-check-circle checked"></i>'),$("input[type=checkbox]:not([checked])").before('<i class="far fa-circle"></i>')}),$(function(){var e="#main > div.row:first-child > div:first-child";if(!($(`${e} img`).length<=0)){var o=document.querySelectorAll(`${e} img[data-src]`);const t=lozad(o);t.observe(),$(`${e} p > img[data-src],${e} img[data-src].preview-img`).each(function(){let e=$(this).next();var o="EM"===e.prop("tagName")?e.text():"",t=$(this).attr("data-src");$(this).wrap(`<a href="${t}" title="${o}" class="popup"></a>`)}),$(".popup").magnificPopup({type:"image",closeOnContentClick:!0,showCloseBtn:!1,zoom:{enabled:!0,duration:300,easing:"ease-in-out"}}),$(`${e} a`).has("img").addClass("img-link")}});

gulpfile.js/tasks/js.js

@@ -27,6 +27,10 @@ function minifyJs() {
     .pipe(dest(JS_DEST));
 }
 
+const commonsJs = () => {
+  return concatJs(`${JS_SRC}/commons/*.js`, 'commons');
+};
+
 const homeJs = () => {
   return concatJs([
       `${JS_SRC}/commons/*.js`,
@@ -39,8 +43,11 @@ const homeJs = () => {
 const postJs = () => {
   return concatJs([
       `${JS_SRC}/commons/*.js`,
+      `${JS_SRC}/utils/img-extra.js`,
       `${JS_SRC}/utils/timeago.js`,
       `${JS_SRC}/utils/lang-badge.js`,
+      `${JS_SRC}/utils/checkbox.js`,
+      `${JS_SRC}/utils/copy-link.js`,
       // 'smooth-scroll.js' must be called after ToC is ready
       `${JS_SRC}/utils/smooth-scroll.js`
     ], 'post'
@@ -58,7 +65,9 @@ const categoriesJs = () => {
 const pageJs = () => {
   return concatJs([
       `${JS_SRC}/commons/*.js`,
-      `${JS_SRC}/utils/smooth-scroll.js`
+      `${JS_SRC}/utils/checkbox.js`,
+      `${JS_SRC}/utils/img-extra.js`,
+      `${JS_SRC}/utils/copy-link.js`,
     ], 'page'
   );
 };
@@ -68,7 +77,7 @@ const pvreportJs = () => {
   return concatJs(`${JS_SRC}/utils/pageviews.js`, 'pvreport');
 };
 
-const buildJs = parallel(homeJs, postJs, categoriesJs, pageJs, pvreportJs);
+const buildJs = parallel(commonsJs, homeJs, postJs, categoriesJs, pageJs, pvreportJs);
 
 exports.build = series(buildJs, minifyJs);