summaryrefslogtreecommitdiffstats
path: root/assets/js/fuji.js
diff options
context:
space:
mode:
authoramzrk22020-06-01 15:44:04 +0800
committeramzrk22020-06-01 15:44:04 +0800
commit02c3891865c7741b8f772aea75cc01564d2f0ff4 (patch)
treedb0e4dd8c3ef95181f5e665ca09f731b75de0387 /assets/js/fuji.js
parent2338da969d3bc1b2bc26df9f7192dd20a0906c5b (diff)
downloadhugo-theme-fuji-02c3891865c7741b8f772aea75cc01564d2f0ff4.tar.gz
hugo-theme-fuji-02c3891865c7741b8f772aea75cc01564d2f0ff4.tar.bz2
hugo-theme-fuji-02c3891865c7741b8f772aea75cc01564d2f0ff4.zip
Remove jQuery
Diffstat (limited to 'assets/js/fuji.js')
-rw-r--r--assets/js/fuji.js137
1 files changed, 137 insertions, 0 deletions
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,
+ });
+ }
+});