From 0040a3cfdd10e26da099f8ae0240774a6e931ac9 Mon Sep 17 00:00:00 2001 From: Cotes Chung <11371340+cotes2020@users.noreply.github.com> Date: Wed, 17 Apr 2024 06:10:01 +0800 Subject: [PATCH] perf: replace jQuery with Vanilla JS (#1681) Also replaced `magnific-popup` with `GLightbox` --- _data/origin/basic.yml | 9 +- _data/origin/cors.yml | 9 +- _includes/comments/disqus.html | 4 +- _includes/comments/giscus.html | 3 +- _includes/comments/utterances.html | 3 +- _includes/head.html | 4 +- _includes/js-selector.html | 11 +- _includes/mermaid.html | 50 +++---- _includes/sidebar.html | 2 +- _includes/topbar.html | 2 +- _javascript/modules/components/back-to-top.js | 15 +- .../modules/components/category-collapse.js | 49 ++++--- _javascript/modules/components/clipboard.js | 123 +++++++++-------- _javascript/modules/components/img-loading.js | 36 +++-- _javascript/modules/components/img-popup.js | 17 +-- .../modules/components/locale-datetime.js | 42 +++--- .../modules/components/mode-watcher.js | 15 +- .../modules/components/search-display.js | 130 ++++++++---------- _javascript/modules/components/sidebar.js | 12 +- _sass/addon/commons.scss | 25 ++-- assets/js/pwa/app.js | 14 +- 21 files changed, 272 insertions(+), 303 deletions(-) diff --git a/_data/origin/basic.yml b/_data/origin/basic.yml index ed99ea850a6..73822515027 100644 --- a/_data/origin/basic.yml +++ b/_data/origin/basic.yml @@ -4,9 +4,6 @@ webfonts: /assets/lib/fonts/main.css # Libraries -jquery: - js: /assets/lib/jquery/jquery.min.js - bootstrap: css: /assets/lib/bootstrap/bootstrap.min.css js: /assets/lib/bootstrap/bootstrap.bundle.min.js @@ -31,9 +28,9 @@ dayjs: relativeTime: /assets/lib/dayjs/plugin/relativeTime.min.js localizedFormat: /assets/lib/dayjs/plugin/localizedFormat.min.js -magnific-popup: - css: /assets/lib/magnific-popup/magnific-popup.css - js: /assets/lib/magnific-popup/jquery.magnific-popup.min.js +glightbox: + css: /assets/lib/glightbox/glightbox.min.css + js: /assets/lib/glightbox/glightbox.min.js lazy-polyfill: css: /assets/lib/loading-attribute-polyfill/loading-attribute-polyfill.min.css diff --git a/_data/origin/cors.yml b/_data/origin/cors.yml index 614139f8e37..a10d31cc274 100644 --- a/_data/origin/cors.yml +++ b/_data/origin/cors.yml @@ -17,9 +17,6 @@ webfonts: https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Sour # Libraries -jquery: - js: https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js - bootstrap: css: https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css js: https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js @@ -44,9 +41,9 @@ dayjs: relativeTime: https://cdn.jsdelivr.net/npm/dayjs@1.11.10/plugin/relativeTime.min.js localizedFormat: https://cdn.jsdelivr.net/npm/dayjs@1.11.10/plugin/localizedFormat.min.js -magnific-popup: - css: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.min.css - js: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/jquery.magnific-popup.min.js +glightbox: + css: https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/css/glightbox.min.css + js: https://cdn.jsdelivr.net/npm/glightbox@3.3.0/dist/js/glightbox.min.js lazy-polyfill: css: https://cdn.jsdelivr.net/npm/loading-attribute-polyfill@2.1.1/dist/loading-attribute-polyfill.min.css diff --git a/_includes/comments/disqus.html b/_includes/comments/disqus.html index e59ed37dd2b..bef843acc35 100644 --- a/_includes/comments/disqus.html +++ b/_includes/comments/disqus.html @@ -28,7 +28,7 @@ { threshold: [0] } ); - disqus_observer.observe(document.querySelector('#disqus_thread')); + disqus_observer.observe(document.getElementById('disqus_thread')); /* Auto switch theme */ function reloadDisqus() { @@ -44,7 +44,7 @@ } } - if (document.querySelector('.mode-toggle')) { + if (document.getElementById('mode-toggle')) { window.addEventListener('message', reloadDisqus); } diff --git a/_includes/comments/giscus.html b/_includes/comments/giscus.html index 526aa22bcf1..f3b8a54b73c 100644 --- a/_includes/comments/giscus.html +++ b/_includes/comments/giscus.html @@ -2,7 +2,6 @@ diff --git a/_includes/sidebar.html b/_includes/sidebar.html index 0b5560a33b0..577cc13f814 100644 --- a/_includes/sidebar.html +++ b/_includes/sidebar.html @@ -44,7 +44,7 @@

{% unless site.theme_mode %} - diff --git a/_includes/topbar.html b/_includes/topbar.html index d85101ac72e..fd68d1feb9d 100644 --- a/_includes/topbar.html +++ b/_includes/topbar.html @@ -59,7 +59,7 @@ - + { - if ($window.scrollTop() > 50) { - $btn.fadeIn(); + window.addEventListener('scroll', () => { + if (window.scrollY > 50) { + btn.classList.add('show'); } else { - $btn.fadeOut(); + btn.classList.remove('show'); } }); - $btn.on('click', () => { - $window.scrollTop(0); + btn.addEventListener('click', () => { + window.scrollTo({ top: 0 }); }); } diff --git a/_javascript/modules/components/category-collapse.js b/_javascript/modules/components/category-collapse.js index d6027a18389..b530626e532 100644 --- a/_javascript/modules/components/category-collapse.js +++ b/_javascript/modules/components/category-collapse.js @@ -3,34 +3,31 @@ */ const childPrefix = 'l_'; const parentPrefix = 'h_'; -const collapse = $('.collapse'); +const children = document.getElementsByClassName('collapse'); export function categoryCollapse() { - /* close up top-category */ - collapse.on('hide.bs.collapse', function () { - /* Bootstrap collapse events. */ const parentId = - parentPrefix + $(this).attr('id').substring(childPrefix.length); - if (parentId) { - $(`#${parentId} .far.fa-folder-open`).attr( - 'class', - 'far fa-folder fa-fw' - ); - $(`#${parentId} i.fas`).addClass('rotate'); - $(`#${parentId}`).removeClass('hide-border-bottom'); - } - }); + [...children].forEach((elem) => { + const id = parentPrefix + elem.id.substring(childPrefix.length); + const parent = document.getElementById(id); + + // collapse sub-categories + elem.addEventListener('hide.bs.collapse', () => { + if (parent) { + parent.querySelector('.far.fa-folder-open').className = + 'far fa-folder fa-fw'; + parent.querySelector('.fas.fa-angle-down').classList.add('rotate'); + parent.classList.remove('hide-border-bottom'); + } + }); - /* expand the top category */ - collapse.on('show.bs.collapse', function () { - const parentId = - parentPrefix + $(this).attr('id').substring(childPrefix.length); - if (parentId) { - $(`#${parentId} .far.fa-folder`).attr( - 'class', - 'far fa-folder-open fa-fw' - ); - $(`#${parentId} i.fas`).removeClass('rotate'); - $(`#${parentId}`).addClass('hide-border-bottom'); - } + // expand sub-categories + elem.addEventListener('show.bs.collapse', () => { + if (parent) { + parent.querySelector('.far.fa-folder').className = + 'far fa-folder-open fa-fw'; + parent.querySelector('.fas.fa-angle-down').classList.remove('rotate'); + parent.classList.add('hide-border-bottom'); + } + }); }); } diff --git a/_javascript/modules/components/clipboard.js b/_javascript/modules/components/clipboard.js index 68f6afd155a..8d4b23ffb93 100644 --- a/_javascript/modules/components/clipboard.js +++ b/_javascript/modules/components/clipboard.js @@ -7,102 +7,103 @@ */ const clipboardSelector = '.code-header>button'; + +const ICON_DEFAULT = 'far fa-clipboard'; const ICON_SUCCESS = 'fas fa-check'; + const ATTR_TIMEOUT = 'timeout'; const ATTR_TITLE_SUCCEED = 'data-title-succeed'; const ATTR_TITLE_ORIGIN = 'data-bs-original-title'; const TIMEOUT = 2000; // in milliseconds function isLocked(node) { - if ($(node)[0].hasAttribute(ATTR_TIMEOUT)) { - let timeout = $(node).attr(ATTR_TIMEOUT); + if (node.hasAttribute(ATTR_TIMEOUT)) { + let timeout = node.getAttribute(ATTR_TIMEOUT); if (Number(timeout) > Date.now()) { return true; } } + return false; } function lock(node) { - $(node).attr(ATTR_TIMEOUT, Date.now() + TIMEOUT); + node.setAttribute(ATTR_TIMEOUT, Date.now() + TIMEOUT); } function unlock(node) { - $(node).removeAttr(ATTR_TIMEOUT); + node.removeAttribute(ATTR_TIMEOUT); } -function getIcon(btn) { - let iconNode = $(btn).children(); - return iconNode.attr('class'); -} - -const ICON_DEFAULT = getIcon(clipboardSelector); - function showTooltip(btn) { - const succeedTitle = $(btn).attr(ATTR_TITLE_SUCCEED); - $(btn).attr(ATTR_TITLE_ORIGIN, succeedTitle).tooltip('show'); + const succeedTitle = btn.getAttribute(ATTR_TITLE_SUCCEED); + btn.setAttribute(ATTR_TITLE_ORIGIN, succeedTitle); + bootstrap.Tooltip.getInstance(btn).show(); } function hideTooltip(btn) { - $(btn).tooltip('hide').removeAttr(ATTR_TITLE_ORIGIN); + bootstrap.Tooltip.getInstance(btn).hide(); + btn.removeAttribute(ATTR_TITLE_ORIGIN); } function setSuccessIcon(btn) { - let btnNode = $(btn); - let iconNode = btnNode.children(); - iconNode.attr('class', ICON_SUCCESS); + const icon = btn.children[0]; + icon.setAttribute('class', ICON_SUCCESS); } function resumeIcon(btn) { - let btnNode = $(btn); - let iconNode = btnNode.children(); - iconNode.attr('class', ICON_DEFAULT); + const icon = btn.children[0]; + icon.setAttribute('class', ICON_DEFAULT); } export function initClipboard() { + const clipboardList = document.querySelectorAll(clipboardSelector); + + if (clipboardList.length === 0) { + return; + } + // Initial the clipboard.js object - if ($(clipboardSelector).length) { - const clipboard = new ClipboardJS(clipboardSelector, { - target(trigger) { - let codeBlock = trigger.parentNode.nextElementSibling; - return codeBlock.querySelector('code .rouge-code'); - } - }); + const clipboard = new ClipboardJS(clipboardSelector, { + target: (trigger) => { + const codeBlock = trigger.parentNode.nextElementSibling; + return codeBlock.querySelector('code .rouge-code'); + } + }); - const clipboardList = document.querySelectorAll(clipboardSelector); - [...clipboardList].map( - (elem) => - new bootstrap.Tooltip(elem, { - placement: 'left' - }) - ); + [...clipboardList].map( + (elem) => + new bootstrap.Tooltip(elem, { + placement: 'left' + }) + ); - clipboard.on('success', (e) => { - e.clearSelection(); + clipboard.on('success', (e) => { + const trigger = e.trigger; - const trigger = e.trigger; - if (isLocked(trigger)) { - return; - } + e.clearSelection(); - setSuccessIcon(trigger); - showTooltip(trigger); - lock(trigger); + if (isLocked(trigger)) { + return; + } - setTimeout(() => { - hideTooltip(trigger); - resumeIcon(trigger); - unlock(trigger); - }, TIMEOUT); - }); - } + setSuccessIcon(trigger); + showTooltip(trigger); + lock(trigger); + + setTimeout(() => { + hideTooltip(trigger); + resumeIcon(trigger); + unlock(trigger); + }, TIMEOUT); + }); /* --- Post link sharing --- */ - const btnCopyLink = $('#copy-link'); + const btnCopyLink = document.getElementById('copy-link'); - btnCopyLink.on('click', (e) => { - let target = $(e.target); + btnCopyLink.addEventListener('click', (e) => { + const target = e.target; if (isLocked(target)) { return; @@ -110,21 +111,23 @@ export function initClipboard() { // 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); + const defaultTitle = target.getAttribute(ATTR_TITLE_ORIGIN); + const succeedTitle = target.getAttribute(ATTR_TITLE_SUCCEED); + // Switch tooltip title - target.attr(ATTR_TITLE_ORIGIN, succeedTitle).tooltip('show'); + target.setAttribute(ATTR_TITLE_ORIGIN, succeedTitle); + bootstrap.Tooltip.getInstance(target).show(); + lock(target); setTimeout(() => { - target.attr(ATTR_TITLE_ORIGIN, defaultTitle); + target.setAttribute(ATTR_TITLE_ORIGIN, defaultTitle); unlock(target); }, TIMEOUT); }); }); - btnCopyLink.on('mouseleave', function (e) { - const target = $(e.target); - target.tooltip('hide'); + btnCopyLink.addEventListener('mouseleave', (e) => { + bootstrap.Tooltip.getInstance(e.target).hide(); }); } diff --git a/_javascript/modules/components/img-loading.js b/_javascript/modules/components/img-loading.js index c9b7b7f3880..989d9e683c7 100644 --- a/_javascript/modules/components/img-loading.js +++ b/_javascript/modules/components/img-loading.js @@ -11,7 +11,7 @@ const cover = { }; function removeCover(clzss) { - $(this).parent().removeClass(clzss); + this.parentElement.classList.remove(clzss); } function handleImage() { @@ -30,32 +30,38 @@ function handleImage() { * Switches the LQIP with the real image URL. */ function switchLQIP() { - const $img = $(this); - const src = $img.attr(ATTR_DATA_SRC); - - $img.attr('src', encodeURI(src)); - $img.removeAttr(ATTR_DATA_SRC); + const src = this.getAttribute(ATTR_DATA_SRC); + this.setAttribute('src', encodeURI(src)); + this.removeAttribute(ATTR_DATA_SRC); } export function loadImg() { - const $images = $('article img'); + const images = document.querySelectorAll('article img'); - if ($images.length) { - $images.on('load', handleImage); + if (images.length === 0) { + return; } + images.forEach((img) => { + img.addEventListener('load', handleImage); + }); + // Images loaded from the browser cache do not trigger the 'load' event - $('article img[loading="lazy"]').each(function () { - if (this.complete) { - removeCover.call(this, cover.SHIMMER); + document.querySelectorAll('article img[loading="lazy"]').forEach((img) => { + if (img.complete) { + removeCover.call(img, cover.SHIMMER); } }); // LQIPs set by the data URI or WebP will not trigger the 'load' event, // so manually convert the URI to the URL of a high-resolution image. - const $lqips = $(`article img[${ATTR_DATA_LQIP}="true"]`); + const lqips = document.querySelectorAll( + `article img[${ATTR_DATA_LQIP}="true"]` + ); - if ($lqips.length) { - $lqips.each(switchLQIP); + if (lqips.length) { + lqips.forEach((lqip) => { + switchLQIP.call(lqip); + }); } } diff --git a/_javascript/modules/components/img-popup.js b/_javascript/modules/components/img-popup.js index 7f78d9928e1..b5c7c6eae4d 100644 --- a/_javascript/modules/components/img-popup.js +++ b/_javascript/modules/components/img-popup.js @@ -1,22 +1,15 @@ /** * Set up image popup * - * See: https://github.com/dimsemenov/Magnific-Popup + * Dependencies: https://github.com/biati-digital/glightbox */ +const IMG_CLASS = 'popup'; + export function imgPopup() { - if ($('.popup') <= 0) { + if (document.getElementsByClassName(IMG_CLASS).length === 0) { return; } - $('.popup').magnificPopup({ - type: 'image', - closeOnContentClick: true, - showCloseBtn: false, - zoom: { - enabled: true, - duration: 300, - easing: 'ease-in-out' - } - }); + GLightbox({ selector: `.${IMG_CLASS}` }); } diff --git a/_javascript/modules/components/locale-datetime.js b/_javascript/modules/components/locale-datetime.js index 214f2bff471..eb75626dd32 100644 --- a/_javascript/modules/components/locale-datetime.js +++ b/_javascript/modules/components/locale-datetime.js @@ -15,15 +15,15 @@ class LocaleHelper { } static get locale() { - return $('html').attr('lang').substring(0, 2); + return document.documentElement.getAttribute('lang').substring(0, 2); } static getTimestamp(elem) { - return Number(elem.attr(LocaleHelper.attrTimestamp)); // unix timestamp + return Number(elem.getAttribute(this.attrTimestamp)); // unix timestamp } static getDateFormat(elem) { - return elem.attr(LocaleHelper.attrDateFormat); + return elem.getAttribute(this.attrDateFormat); } } @@ -31,21 +31,23 @@ export function initLocaleDatetime() { dayjs.locale(LocaleHelper.locale); dayjs.extend(window.dayjs_plugin_localizedFormat); - $(`[${LocaleHelper.attrTimestamp}]`).each(function () { - const date = dayjs.unix(LocaleHelper.getTimestamp($(this))); - const text = date.format(LocaleHelper.getDateFormat($(this))); - $(this).text(text); - $(this).removeAttr(LocaleHelper.attrTimestamp); - $(this).removeAttr(LocaleHelper.attrDateFormat); - - // setup tooltips - const tooltip = $(this).attr('data-bs-toggle'); - if (typeof tooltip === 'undefined' || tooltip !== 'tooltip') { - return; - } - - const tooltipText = date.format('llll'); // see: https://day.js.org/docs/en/display/format#list-of-localized-formats - $(this).attr('data-bs-title', tooltipText); - new bootstrap.Tooltip($(this)); - }); + document + .querySelectorAll(`[${LocaleHelper.attrTimestamp}]`) + .forEach((elem) => { + const date = dayjs.unix(LocaleHelper.getTimestamp(elem)); + const text = date.format(LocaleHelper.getDateFormat(elem)); + elem.textContent = text; + elem.removeAttribute(LocaleHelper.attrTimestamp); + elem.removeAttribute(LocaleHelper.attrDateFormat); + + // setup tooltips + if ( + elem.hasAttribute('data-bs-toggle') && + elem.getAttribute('data-bs-toggle') === 'tooltip' + ) { + // see: https://day.js.org/docs/en/display/format#list-of-localized-formats + const tooltipText = date.format('llll'); + elem.setAttribute('data-bs-title', tooltipText); + } + }); } diff --git a/_javascript/modules/components/mode-watcher.js b/_javascript/modules/components/mode-watcher.js index 7b2298a9521..9eecd0961ef 100644 --- a/_javascript/modules/components/mode-watcher.js +++ b/_javascript/modules/components/mode-watcher.js @@ -1,21 +1,14 @@ /** * Add listener for theme mode toggle */ -const $toggleElem = $('.mode-toggle'); +const toggle = document.getElementById('mode-toggle'); export function modeWatcher() { - if ($toggleElem.length === 0) { + if (!toggle) { return; } - $toggleElem.off().on('click', (e) => { - const $target = $(e.target); - let $btn = - $target.prop('tagName') === 'button'.toUpperCase() - ? $target - : $target.parent(); - - modeToggle.flipMode(); // modeToggle: `_includes/mode-toggle.html` - $btn.trigger('blur'); // remove the clicking outline + toggle.addEventListener('click', () => { + modeToggle.flipMode(); }); } diff --git a/_javascript/modules/components/search-display.js b/_javascript/modules/components/search-display.js index ad009c2deb4..98a97ab5dbe 100644 --- a/_javascript/modules/components/search-display.js +++ b/_javascript/modules/components/search-display.js @@ -1,121 +1,109 @@ /** * This script make #search-result-wrapper switch to unloaded or shown automatically. */ -const $btnSbTrigger = $('#sidebar-trigger'); -const $btnSearchTrigger = $('#search-trigger'); -const $btnCancel = $('#search-cancel'); -const $content = $('#main-wrapper>.container>.row'); -const $topbarTitle = $('#topbar-title'); -const $search = $('search'); -const $resultWrapper = $('#search-result-wrapper'); -const $results = $('#search-results'); -const $input = $('#search-input'); -const $hints = $('#search-hints'); -const $viewport = $('html,body'); -// class names -const C_LOADED = 'loaded'; -const C_UNLOADED = 'unloaded'; -const C_FOCUS = 'input-focus'; -const C_FLEX = 'd-flex'; - -class ScrollBlocker { - static offset = 0; - static resultVisible = false; - - static on() { - ScrollBlocker.offset = window.scrollY; - $viewport.scrollTop(0); - } - - static off() { - $viewport.scrollTop(ScrollBlocker.offset); - } -} - -/*--- Actions in mobile screens (Sidebar hidden) ---*/ +const btnSbTrigger = document.getElementById('sidebar-trigger'); +const btnSearchTrigger = document.getElementById('search-trigger'); +const btnCancel = document.getElementById('search-cancel'); +const content = document.querySelectorAll('#main-wrapper>.container>.row'); +const topbarTitle = document.getElementById('topbar-title'); +const search = document.getElementById('search'); +const resultWrapper = document.getElementById('search-result-wrapper'); +const results = document.getElementById('search-results'); +const input = document.getElementById('search-input'); +const hints = document.getElementById('search-hints'); + +// CSS class names +const LOADED = 'loaded'; +const UNLOADED = 'unloaded'; +const FOCUS = 'input-focus'; +const FLEX = 'd-flex'; + +/* Actions in mobile screens (Sidebar hidden) */ class MobileSearchBar { static on() { - $btnSbTrigger.addClass(C_UNLOADED); - $topbarTitle.addClass(C_UNLOADED); - $btnSearchTrigger.addClass(C_UNLOADED); - $search.addClass(C_FLEX); - $btnCancel.addClass(C_LOADED); + btnSbTrigger.classList.add(UNLOADED); + topbarTitle.classList.add(UNLOADED); + btnSearchTrigger.classList.add(UNLOADED); + search.classList.add(FLEX); + btnCancel.classList.add(LOADED); } static off() { - $btnCancel.removeClass(C_LOADED); - $search.removeClass(C_FLEX); - $btnSbTrigger.removeClass(C_UNLOADED); - $topbarTitle.removeClass(C_UNLOADED); - $btnSearchTrigger.removeClass(C_UNLOADED); + btnCancel.classList.remove(LOADED); + search.classList.remove(FLEX); + btnSbTrigger.classList.remove(UNLOADED); + topbarTitle.classList.remove(UNLOADED); + btnSearchTrigger.classList.remove(UNLOADED); } } class ResultSwitch { + static resultVisible = false; + static on() { - if (!ScrollBlocker.resultVisible) { - // the block method must be called before $(#main-wrapper>.container) unloaded. - ScrollBlocker.on(); - $resultWrapper.removeClass(C_UNLOADED); - $content.addClass(C_UNLOADED); - ScrollBlocker.resultVisible = true; + if (!this.resultVisible) { + resultWrapper.classList.remove(UNLOADED); + content.forEach((el) => { + el.classList.add(UNLOADED); + }); + this.resultVisible = true; } } static off() { - if (ScrollBlocker.resultVisible) { - $results.empty(); - if ($hints.hasClass(C_UNLOADED)) { - $hints.removeClass(C_UNLOADED); - } - $resultWrapper.addClass(C_UNLOADED); - $content.removeClass(C_UNLOADED); + if (this.resultVisible) { + results.innerHTML = ''; - // now the release method must be called after $(#main-wrapper>.container) display - ScrollBlocker.off(); + if (hints.classList.contains(UNLOADED)) { + hints.classList.remove(UNLOADED); + } - $input.val(''); - ScrollBlocker.resultVisible = false; + resultWrapper.classList.add(UNLOADED); + content.forEach((el) => { + el.classList.remove(UNLOADED); + }); + input.textContent = ''; + this.resultVisible = false; } } } function isMobileView() { - return $btnCancel.hasClass(C_LOADED); + return btnCancel.classList.contains(LOADED); } export function displaySearch() { - $btnSearchTrigger.on('click', function () { + btnSearchTrigger.addEventListener('click', () => { MobileSearchBar.on(); ResultSwitch.on(); - $input.trigger('focus'); + input.focus(); }); - $btnCancel.on('click', function () { + btnCancel.addEventListener('click', () => { MobileSearchBar.off(); ResultSwitch.off(); }); - $input.on('focus', function () { - $search.addClass(C_FOCUS); + input.addEventListener('focus', () => { + search.classList.add(FOCUS); }); - $input.on('focusout', function () { - $search.removeClass(C_FOCUS); + input.addEventListener('focusout', () => { + search.classList.remove(FOCUS); }); - $input.on('input', () => { - if ($input.val() === '') { + input.addEventListener('input', () => { + if (input.value === '') { if (isMobileView()) { - $hints.removeClass(C_UNLOADED); + hints.classList.remove(UNLOADED); } else { ResultSwitch.off(); } } else { ResultSwitch.on(); if (isMobileView()) { - $hints.addClass(C_UNLOADED); + hints.classList.add(UNLOADED); } } }); diff --git a/_javascript/modules/components/sidebar.js b/_javascript/modules/components/sidebar.js index 9d8567eadda..6b562d84147 100644 --- a/_javascript/modules/components/sidebar.js +++ b/_javascript/modules/components/sidebar.js @@ -2,7 +2,6 @@ * Expand or close the sidebar in mobile screens. */ -const $body = $('body'); const ATTR_DISPLAY = 'sidebar-display'; class SidebarUtil { @@ -10,9 +9,9 @@ class SidebarUtil { static toggle() { if (SidebarUtil.isExpanded === false) { - $body.attr(ATTR_DISPLAY, ''); + document.body.setAttribute(ATTR_DISPLAY, ''); } else { - $body.removeAttr(ATTR_DISPLAY); + document.body.removeAttribute(ATTR_DISPLAY); } SidebarUtil.isExpanded = !SidebarUtil.isExpanded; @@ -20,6 +19,9 @@ class SidebarUtil { } export function sidebarExpand() { - $('#sidebar-trigger').on('click', SidebarUtil.toggle); - $('#mask').on('click', SidebarUtil.toggle); + document + .getElementById('sidebar-trigger') + .addEventListener('click', SidebarUtil.toggle); + + document.getElementById('mask').addEventListener('click', SidebarUtil.toggle); } diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index 678db47562b..e02a79fecab 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -672,18 +672,6 @@ main { /* --- Overriding --- */ -/* magnific-popup */ - -figure .mfp-title { - text-align: center; - padding-right: 0; - margin-top: 0.5rem; -} - -.mfp-img { - transition: none; -} - /* mermaid */ .mermaid { text-align: center; @@ -876,7 +864,7 @@ $btn-mb: 0.5rem; line-height: $btn-size; } - .mode-toggle { + #mode-toggle { padding: 0; border: 0; @@ -1158,7 +1146,8 @@ search { /* --- button back-to-top --- */ #back-to-top { - display: none; + visibility: hidden; + opacity: 0; z-index: 1; cursor: pointer; position: fixed; @@ -1171,8 +1160,7 @@ search { height: $back2top-size; border-radius: 50%; border: 1px solid var(--btn-backtotop-border-color); - transition: transform 0.2s ease-out; - -webkit-transition: transform 0.2s ease-out; + transition: opacity 0.5s ease-in-out, transform 0.2s ease-out; &:hover { transform: translate3d(0, -5px, 0); @@ -1184,6 +1172,11 @@ search { position: relative; bottom: 2px; } + + &.show { + opacity: 1; + visibility: visible; + } } #notification { diff --git a/assets/js/pwa/app.js b/assets/js/pwa/app.js index 8599fe3f516..173ea2938bf 100644 --- a/assets/js/pwa/app.js +++ b/assets/js/pwa/app.js @@ -8,30 +8,32 @@ if ('serviceWorker' in navigator) { if (isEnabled) { const swUrl = '{{ '/sw.min.js' | relative_url }}'; - const $notification = $('#notification'); - const $btnRefresh = $('#notification .toast-body>button'); + const notification = document.getElementById('notification'); + const btnRefresh = notification.querySelector('.toast-body>button'); + const popupWindow = bootstrap.Toast.getOrCreateInstance(notification); navigator.serviceWorker.register(swUrl).then((registration) => { {% comment %}In case the user ignores the notification{% endcomment %} if (registration.waiting) { - $notification.toast('show'); + popupWindow.show(); } registration.addEventListener('updatefound', () => { registration.installing.addEventListener('statechange', () => { if (registration.waiting) { if (navigator.serviceWorker.controller) { - $notification.toast('show'); + popupWindow.show(); } } }); }); - $btnRefresh.on('click', () => { + btnRefresh.addEventListener('click', () => { if (registration.waiting) { registration.waiting.postMessage('SKIP_WAITING'); } - $notification.toast('hide'); + + popupWindow.hide(); }); });