From 02c3891865c7741b8f772aea75cc01564d2f0ff4 Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Mon, 1 Jun 2020 15:44:04 +0800 Subject: Remove jQuery --- assets/js/fuji.js | 137 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100644 assets/js/fuji.js (limited to 'assets/js/fuji.js') diff --git a/assets/js/fuji.js b/assets/js/fuji.js new file mode 100644 index 0000000..eda8723 --- /dev/null +++ b/assets/js/fuji.js @@ -0,0 +1,137 @@ +'use strict'; + +// get current theme +function getNowTheme() { + let nowTheme = document.body.getAttribute('data-theme'); + if (nowTheme === 'auto') { + return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + } else { + return nowTheme === 'dark' ? 'dark' : 'light'; + } +} + +// update medium-zoom theme +function updateMeidumTheme(mediumInst) { + let targetTheme = getNowTheme(); + if (mediumInst) { + mediumInst.detach(); + if (targetTheme === 'dark') { + mediumInst = mediumZoom('.img-zoomable', { + background: '#2f3136', + }); + } else { + mediumInst = mediumZoom('.img-zoomable', { + background: '#fffffd', + }); + } + } +} + +// update utterances theme +function updateUtterancesTheme(utterancesFrame) { + let targetTheme = getNowTheme(); + if (utterancesFrame) { + if (targetTheme === 'dark') { + utterancesFrame.contentWindow.postMessage( + { + type: 'set-theme', + theme: 'photon-dark', + }, + 'https://utteranc.es' + ); + } else { + utterancesFrame.contentWindow.postMessage( + { + type: 'set-theme', + theme: 'github-light', + }, + 'https://utteranc.es' + ); + } + } +} + +// remove empty ul in toc if article only have ## and ### +if (document.querySelectorAll('.sidebar-toc ul ul').length > 0) { + document.querySelectorAll('.sidebar-toc ul ul').forEach((value, key, parent) => { + value.setAttribute('style', 'display: none;'); + }); +} + +// to-top button +document.querySelector('.btn .btn-scroll-top').addEventListener('click', () => { + document.documentElement.scrollTop = 0; +}); + +// init medium-zoom +var mediumInst; // medium-zoom instance +if (getNowTheme() === 'dark') { + mediumInst = mediumZoom('.img-zoomable', { + background: '#2f3136', + }); +} else { + mediumInst = mediumZoom('.img-zoomable', { + background: '#fffffd', + }); +} + +// if in post page and using utterances +// add utterances comment loading indicator +if (document.querySelector('.post-loading')) { + var commentStatus; // utterence status + var commentLoadingTime = 0; // loading time passed + var commentCheckInterval = self.setInterval(checkUtterances, 500); + + function checkUtterances() { + if (document.querySelector('.post-comment .utterances')) { + commentStatus = document.querySelector('.post-comment .utterances').getAttribute('style'); + } + if (commentStatus) { + clearInterval(commentCheckInterval); + updateUtterancesTheme(document.querySelector('.post-comment iframe')); + document.querySelector('.post-loading').setAttribute('style', 'display: none;'); + } else { + if (++commentLoadingTime > 20) { + clearInterval(commentCheckInterval); + document.querySelector('.post-comment').setAttribute('style', 'display: none;'); + document.querySelector('.post-loading i').className = 'far fa-times-circle'; + } + } + } +} + +// theme switch button +document.querySelector('.btn .btn-toggle-mode').addEventListener('click', () => { + let nowTheme = getNowTheme(); + let domTheme = document.body.getAttribute('data-theme'); + let systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; + + if (domTheme === 'auto') { + // if now in auto mode, switch to user mode + document.body.setAttribute('data-theme', nowTheme === 'light' ? 'dark' : 'light'); + localStorage.setItem('fuji_data-theme', nowTheme === 'light' ? 'dark' : 'light'); + } else if (domTheme === 'light') { + // if now in user mode and light mode + document.body.setAttribute('data-theme', 'dark'); + // if the theme want to switch is system theme + localStorage.setItem('fuji_data-theme', systemTheme === 'dark' ? 'auto' : 'dark'); + } else { + // if now in user mode and dark mode + document.body.setAttribute('data-theme', 'light'); + // if the theme want to switch is system theme + localStorage.setItem('fuji_data-theme', systemTheme === 'light' ? 'auto' : 'light'); + } + + // update medium background + updateMeidumTheme(mediumInst); + // switch comment area theme + // only works after comment area are initialized + if (document.querySelector('.post-loading') && commentStatus) { + updateUtterancesTheme(document.querySelector('.post-comment iframe')); + } + if (document.querySelector('#disqus_thread') && typeof DISQUS !== 'undefined') { + DISQUS.reset({ + reload: true, + }); + } +}); -- cgit v1.2.3 From 3df71601ae866aff9c2ae060ed1ac7407807fcc4 Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Wed, 3 Jun 2020 13:58:49 +0800 Subject: New comment area & opt out of font awesome --- assets/js/fuji.js | 46 ++++++++++++++-------------------------------- 1 file changed, 14 insertions(+), 32 deletions(-) (limited to 'assets/js/fuji.js') diff --git a/assets/js/fuji.js b/assets/js/fuji.js index eda8723..4fbd651 100644 --- a/assets/js/fuji.js +++ b/assets/js/fuji.js @@ -51,6 +51,9 @@ function updateUtterancesTheme(utterancesFrame) { } } +// load comment +document.querySelector('span.post-comment-notloaded').addEventListener('click', loadComment); + // remove empty ul in toc if article only have ## and ### if (document.querySelectorAll('.sidebar-toc ul ul').length > 0) { document.querySelectorAll('.sidebar-toc ul ul').forEach((value, key, parent) => { @@ -75,31 +78,6 @@ if (getNowTheme() === 'dark') { }); } -// if in post page and using utterances -// add utterances comment loading indicator -if (document.querySelector('.post-loading')) { - var commentStatus; // utterence status - var commentLoadingTime = 0; // loading time passed - var commentCheckInterval = self.setInterval(checkUtterances, 500); - - function checkUtterances() { - if (document.querySelector('.post-comment .utterances')) { - commentStatus = document.querySelector('.post-comment .utterances').getAttribute('style'); - } - if (commentStatus) { - clearInterval(commentCheckInterval); - updateUtterancesTheme(document.querySelector('.post-comment iframe')); - document.querySelector('.post-loading').setAttribute('style', 'display: none;'); - } else { - if (++commentLoadingTime > 20) { - clearInterval(commentCheckInterval); - document.querySelector('.post-comment').setAttribute('style', 'display: none;'); - document.querySelector('.post-loading i').className = 'far fa-times-circle'; - } - } - } -} - // theme switch button document.querySelector('.btn .btn-toggle-mode').addEventListener('click', () => { let nowTheme = getNowTheme(); @@ -126,12 +104,16 @@ document.querySelector('.btn .btn-toggle-mode').addEventListener('click', () => updateMeidumTheme(mediumInst); // switch comment area theme // only works after comment area are initialized - if (document.querySelector('.post-loading') && commentStatus) { - updateUtterancesTheme(document.querySelector('.post-comment iframe')); - } - if (document.querySelector('#disqus_thread') && typeof DISQUS !== 'undefined') { - DISQUS.reset({ - reload: true, - }); + let commentArea = document.querySelector('.post-comment'); + let commentStatus = document.querySelector('span.post-comment-notloaded').getAttribute('style'); + if (commentStatus) { + if (commentArea.getAttribute('data-comment') === 'utterances') { + updateUtterancesTheme(document.querySelector('.post-comment iframe')); + } + if (commentArea.getAttribute('data-comment') === 'disqus') { + DISQUS.reset({ + reload: true, + }); + } } }); -- cgit v1.2.3 From 2e9f1c5cb2ad0c74ddeeecf0afa533139464b54d Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Wed, 3 Jun 2020 18:56:00 +0800 Subject: Fix null pointer error --- assets/js/fuji.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) (limited to 'assets/js/fuji.js') diff --git a/assets/js/fuji.js b/assets/js/fuji.js index 4fbd651..66892af 100644 --- a/assets/js/fuji.js +++ b/assets/js/fuji.js @@ -51,13 +51,18 @@ function updateUtterancesTheme(utterancesFrame) { } } -// load comment -document.querySelector('span.post-comment-notloaded').addEventListener('click', loadComment); +// load comment button only when comment area exist +if (document.querySelector('span.post-comment-notloaded')) { + document.querySelector('span.post-comment-notloaded').addEventListener('click', loadComment); +} // remove empty ul in toc if article only have ## and ### -if (document.querySelectorAll('.sidebar-toc ul ul').length > 0) { - document.querySelectorAll('.sidebar-toc ul ul').forEach((value, key, parent) => { - value.setAttribute('style', 'display: none;'); +var secondQueryOfToc = document.querySelectorAll('.sidebar-toc ul ul'); +if (secondQueryOfToc.length > 0) { + secondQueryOfToc.forEach((value, key, parent) => { + if (value.innerText === '') { + value.setAttribute('style', 'display: none;'); + } }); } -- cgit v1.2.3 From 2cbde93423c7792929809e95a908913060d786cf Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Wed, 3 Jun 2020 19:33:30 +0800 Subject: Update strong & em styles --- assets/js/fuji.js | 10 ---------- 1 file changed, 10 deletions(-) (limited to 'assets/js/fuji.js') diff --git a/assets/js/fuji.js b/assets/js/fuji.js index 66892af..fbd0359 100644 --- a/assets/js/fuji.js +++ b/assets/js/fuji.js @@ -56,16 +56,6 @@ if (document.querySelector('span.post-comment-notloaded')) { document.querySelector('span.post-comment-notloaded').addEventListener('click', loadComment); } -// remove empty ul in toc if article only have ## and ### -var secondQueryOfToc = document.querySelectorAll('.sidebar-toc ul ul'); -if (secondQueryOfToc.length > 0) { - secondQueryOfToc.forEach((value, key, parent) => { - if (value.innerText === '') { - value.setAttribute('style', 'display: none;'); - } - }); -} - // to-top button document.querySelector('.btn .btn-scroll-top').addEventListener('click', () => { document.documentElement.scrollTop = 0; -- cgit v1.2.3 From 8e1c40916aa880388fbac104641f3e7c84335847 Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Thu, 4 Jun 2020 18:10:44 +0800 Subject: Update metadata & fix comment checker --- assets/js/fuji.js | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) (limited to 'assets/js/fuji.js') diff --git a/assets/js/fuji.js b/assets/js/fuji.js index fbd0359..4bc9d56 100644 --- a/assets/js/fuji.js +++ b/assets/js/fuji.js @@ -98,17 +98,19 @@ document.querySelector('.btn .btn-toggle-mode').addEventListener('click', () => // update medium background updateMeidumTheme(mediumInst); // switch comment area theme - // only works after comment area are initialized + // if this page has comment area let commentArea = document.querySelector('.post-comment'); - let commentStatus = document.querySelector('span.post-comment-notloaded').getAttribute('style'); - if (commentStatus) { - if (commentArea.getAttribute('data-comment') === 'utterances') { - updateUtterancesTheme(document.querySelector('.post-comment iframe')); - } - if (commentArea.getAttribute('data-comment') === 'disqus') { - DISQUS.reset({ - reload: true, - }); + if (commentArea) { + // if comment area loaded + if (document.querySelector('span.post-comment-notloaded').getAttribute('style')) { + if (commentArea.getAttribute('data-comment') === 'utterances') { + updateUtterancesTheme(document.querySelector('.post-comment iframe')); + } + if (commentArea.getAttribute('data-comment') === 'disqus') { + DISQUS.reset({ + reload: true, + }); + } } } }); -- cgit v1.2.3