refactor: replace the deprecated js api

_javascript/commons/back-to-top.js

@@ -2,7 +2,7 @@
  * Reference: https://bootsnipp.com/snippets/featured/link-to-top-page
  */
 $(function() {
-    $(window).scroll(() => {
+    $(window).on('scroll',() => {
         if ($(this).scrollTop() > 50 &&
             $("#sidebar-trigger").css("display") === "none") {
             $("#back-to-top").fadeIn();
@@ -11,7 +11,7 @@ $(function() {
         }
     });
 
-    $("#back-to-top").click(() => {
+    $("#back-to-top").on('click',() => {
         $("body,html").animate({
             scrollTop: 0
         }, 800);

_javascript/commons/mode-toggle.js

@@ -2,12 +2,12 @@
  * Listener for theme mode toggle
  */
 $(function () {
-    $(".mode-toggle").click((e) => {
+    $(".mode-toggle").on('click',(e) => {
         const $target = $(e.target);
         let $btn = ($target.prop("tagName") === "button".toUpperCase() ?
             $target : $target.parent());
 
-        $btn.blur(); // remove the clicking outline
+        $btn.trigger('blur'); // remove the clicking outline
         flipMode();
     });
 });

_javascript/commons/scroll-helper.js

@@ -11,8 +11,8 @@ const ScrollHelper = (function () {
     let orientationLocked = false;
 
     return {
-        hideTopbar: () => $body.attr(ATTR_TOPBAR_VISIBLE, false),
-        showTopbar: () => $body.attr(ATTR_TOPBAR_VISIBLE, true),
+        hideTopbar: () => $body.attr(ATTR_TOPBAR_VISIBLE, 'false'),
+        showTopbar: () => $body.attr(ATTR_TOPBAR_VISIBLE, 'true'),
 
         // scroll up
 

_javascript/commons/search-display.js

@@ -79,9 +79,6 @@ $(function () {
                     input.val("");
                     visible = false;
                 }
-            },
-            isVisible() {
-                return visible;
             }
         };
 
@@ -91,22 +88,22 @@ $(function () {
         return btnCancel.hasClass("loaded");
     }
 
-    btnSearchTrigger.click(function () {
+    btnSearchTrigger.on('click',function () {
         mobileSearchBar.on();
         resultSwitch.on();
-        input.focus();
+        input.trigger('focus');
     });
 
-    btnCancel.click(function () {
+    btnCancel.on('click',function () {
         mobileSearchBar.off();
         resultSwitch.off();
     });
 
-    input.focus(function () {
+    input.on('focus',function () {
         searchWrapper.addClass("input-focus");
     });
 
-    input.focusout(function () {
+    input.on('focusout', function () {
         searchWrapper.removeClass("input-focus");
     });
 

_javascript/commons/sidebar.js

@@ -22,7 +22,7 @@ $(function () {
 
     }());
 
-    $("#sidebar-trigger").click(sidebarUtil.toggle);
+    $("#sidebar-trigger").on('click', sidebarUtil.toggle);
 
-    $("#mask").click(sidebarUtil.toggle);
+    $("#mask").on('click', sidebarUtil.toggle);
 });

_javascript/commons/topbar-switcher.js

@@ -21,7 +21,7 @@ $(function () {
             ScrollHelper.hideTopbar();
 
             if ($searchInput.is(":focus")) {
-                $searchInput.blur(); /* remove focus */
+                $searchInput.trigger('blur'); /* remove focus */
             }
 
         } else { // Scroll up
@@ -73,7 +73,7 @@ $(function () {
         });
     }
 
-    $(window).scroll(() => {
+    $(window).on('scroll',() => {
         if (didScroll) {
             return;
         }

_javascript/commons/topbar-title.js

@@ -60,7 +60,7 @@ $(function () {
     observer.observe(document.querySelector(titleSelector));
 
     /* Click title will scroll to top */
-    $topbarTitle.click(function () {
+    $topbarTitle.on('click', function () {
         $("body,html").animate({scrollTop: 0}, 800);
     });
 

_javascript/utils/clipboard.js

@@ -97,8 +97,7 @@ $(function () {
 
     /* --- Post link sharing --- */
 
-    $('#copy-link').click((e) => {
-
+    $('#copy-link').on('click',(e) => {
         let target = $(e.target);
 
         if (isLocked(target)) {
@@ -106,28 +105,19 @@ $(function () {
         }
 
         // Copy URL to clipboard
+        navigator.clipboard
+            .writeText(window.location.href)
+            .then(() => {
+                const defaultTitle = target.attr(ATTR_TITLE_ORIGIN);
+                const succeedTitle = target.attr(ATTR_TITLE_SUCCEED);
+                // Switch tooltip title
+                target.attr(ATTR_TITLE_ORIGIN, succeedTitle).tooltip('show');
+                lock(target);
 
-        const url = window.location.href;
-        const $temp = $("<input>");
-
-        $("body").append($temp);
-        $temp.val(url).select();
-        document.execCommand("copy");
-        $temp.remove();
-
-        // Switch tooltip title
-
-        const defaultTitle = target.attr(ATTR_TITLE_ORIGIN);
-        const succeedTitle = target.attr(ATTR_TITLE_SUCCEED);
-
-        target.attr(ATTR_TITLE_ORIGIN, succeedTitle).tooltip('show');
-        lock(target);
-
-        setTimeout(() => {
-            target.attr(ATTR_TITLE_ORIGIN, defaultTitle);
-            unlock(target);
-        }, TIMEOUT);
-
+                setTimeout(() => {
+                    target.attr(ATTR_TITLE_ORIGIN, defaultTitle);
+                    unlock(target);
+                }, TIMEOUT);
+            });
     });
-
 });

_javascript/utils/locale-datetime.js

@@ -6,7 +6,7 @@
 
 /* A tool for locale datetime */
 const LocaleHelper = (function () {
-    const locale = $('html').attr('lang').substr(0, 2);
+    const locale = $('html').attr('lang').substring(0, 2);
     const attrTimestamp = 'data-ts';
     const attrDateFormat = 'data-df';
 

_javascript/utils/smooth-scroll.js

@@ -15,7 +15,7 @@ $(function () {
     $("a[href*='#']")
         .not("[href='#']")
         .not("[href='#0']")
-        .click(function (event) {
+        .on('click', function (event) {
             if (this.pathname.replace(/^\//, "") !==
                 location.pathname.replace(/^\//, "")) {
                 return;
@@ -64,28 +64,30 @@ $(function () {
             $("html").animate({
                 scrollTop: destOffset
             }, 500, () => {
-                $target.focus();
+                $target.trigger("focus");
 
                 /* clean up old scroll mark */
-                if ($(`[${ATTR_SCROLL_FOCUS}=true]`).length) {
-                    $(`[${ATTR_SCROLL_FOCUS}=true]`).attr(ATTR_SCROLL_FOCUS, false);
+                const $scroll_focus = $(`[${ATTR_SCROLL_FOCUS}=true]`);
+                if ($scroll_focus.length) {
+                    $scroll_focus.attr(ATTR_SCROLL_FOCUS, "false");
                 }
 
                 /* Clean :target links */
-                if ($(":target").length) { /* element that visited by the URL with hash */
-                    $(":target").attr(ATTR_SCROLL_FOCUS, false);
+                const $target_links = $(":target");
+                if ($target_links.length) { /* element that visited by the URL with hash */
+                    $target_links.attr(ATTR_SCROLL_FOCUS, "false");
                 }
 
                 /* set scroll mark to footnotes */
                 if (toFootnote || toFootnoteRef) {
-                    $target.attr(ATTR_SCROLL_FOCUS, true);
+                    $target.attr(ATTR_SCROLL_FOCUS, "true");
                 }
 
                 if ($target.is(":focus")) { /* Checking if the target was focused */
                     return false;
                 } else {
                     $target.attr("tabindex", "-1"); /* Adding tabindex for elements not focusable */
-                    $target.focus(); /* Set focus again */
+                    $target.trigger("focus"); /* Set focus again */
                 }
 
                 if (ScrollHelper.hasScrollUpTask()) {