diff --git a/assets/js/config.js b/assets/js/config.js index 1ca46e6..0a23d35 100644 --- a/assets/js/config.js +++ b/assets/js/config.js @@ -1,4 +1,15 @@ -if (!window.NexT) window.NexT = {}; +/* global NexT, boot, CONFIG */ +window.NexT = {}; +NexT.boot = {}; +NexT.comments = {}; + +NexT.comments.register = function() { + if (!NexT.CONFIG.page.comments) return; + for(var c in NexT.comments) { + if (c === 'register') continue; + eval('NexT.comments.'+c)(); + }; +}; (function() { const className = 'next-config'; diff --git a/assets/js/next-boot.js b/assets/js/next-boot.js index 8749d91..a7046ac 100644 --- a/assets/js/next-boot.js +++ b/assets/js/next-boot.js @@ -1,11 +1,27 @@ -/* global NexT, CONFIG */ -NexT.boot = {}; +/* boot starup */ + +(function () { + const onPageLoaded = () => document.dispatchEvent( + new Event('page:loaded', { + bubbles: true + }) + ); + + if (document.readyState === 'loading') { + document.addEventListener('readystatechange', onPageLoaded, { once: true }); + } else { + onPageLoaded(); + } + document.addEventListener('pjax:success', onPageLoaded); +})(); NexT.boot.registerEvents = function() { NexT.utils.registerScrollPercent(); // NexT.utils.registerCanIUseTag(); NexT.utils.registerToolButtons(); + // Register comment's components + NexT.comments.register(); // Mobile top menu bar. document.querySelector('.site-nav-toggle .toggle').addEventListener('click', event => { diff --git a/assets/js/third-party/comments/artalk.js b/assets/js/third-party/comments/artalk.js index 8b5dcc2..8444a22 100644 --- a/assets/js/third-party/comments/artalk.js +++ b/assets/js/third-party/comments/artalk.js @@ -1,13 +1,8 @@ -document.addEventListener('DOMContentLoaded', () => { - +NexT.comments.giscus = function() { const element = '.artalk-container'; - if (!NexT.CONFIG.page.comments - || !NexT.CONFIG.artalk + if (!NexT.CONFIG.artalk || !NexT.utils.checkDOMExist(element)) return; - const artalk_css = NexT.utils.getCDNResource(NexT.CONFIG.artalk.css); - NexT.utils.getStyle(artalk_css, null); - const artalk_js = NexT.utils.getCDNResource(NexT.CONFIG.artalk.js); const { site, @@ -15,10 +10,10 @@ document.addEventListener('DOMContentLoaded', () => { server, } = NexT.CONFIG.artalk.cfg; - NexT.utils.loadComments(element) - .then(() => NexT.utils.getScript(artalk_js, { - })) - .then(() => { + NexT.utils.lazyLoadComponent(element, function() { + NexT.utils.getScript(artalk_js, function(){ + const artalk_css = NexT.utils.getCDNResource(NexT.CONFIG.artalk.css); + NexT.utils.getStyle(artalk_css); new Artalk({ el : element, @@ -29,8 +24,9 @@ document.addEventListener('DOMContentLoaded', () => { locale : NexT.CONFIG.lang, placeholder : placeholder, darkMode : 'auto' - }); + }); + }); - NexT.utils.hiddeLodingCmp(element); + NexT.utils.hiddeLodingCmp(element); }); -}); \ No newline at end of file +} \ No newline at end of file diff --git a/assets/js/third-party/comments/giscus.js b/assets/js/third-party/comments/giscus.js index 62529a8..860a60c 100644 --- a/assets/js/third-party/comments/giscus.js +++ b/assets/js/third-party/comments/giscus.js @@ -1,5 +1,4 @@ -document.addEventListener('DOMContentLoaded', () => { - +NexT.comments.giscus = function() { const element = '.giscus-container'; if (!NexT.CONFIG.page.comments || !NexT.CONFIG.giscus @@ -17,8 +16,8 @@ document.addEventListener('DOMContentLoaded', () => { theme } = NexT.CONFIG.giscus.cfg; - NexT.utils.loadComments(element) - .then(() => NexT.utils.getScript(NexT.CONFIG.giscus.js, { + NexT.utils.lazyLoadComponent(element, function() { + NexT.utils.getScript(NexT.CONFIG.giscus.js, { attributes: { 'async' : true, 'crossorigin' : 'anonymous', @@ -35,7 +34,8 @@ document.addEventListener('DOMContentLoaded', () => { 'data-loading' : 'lazy' }, parentNode: document.querySelector(element) - })); - + }); + NexT.utils.hiddeLodingCmp(element); -}); \ No newline at end of file + }); +} \ No newline at end of file diff --git a/assets/js/third-party/comments/livere.js b/assets/js/third-party/comments/livere.js index 2051f05..d18edc8 100644 --- a/assets/js/third-party/comments/livere.js +++ b/assets/js/third-party/comments/livere.js @@ -1,11 +1,9 @@ -document.addEventListener('DOMContentLoaded', () => { - +NexT.comments.giscus = function() { const element = '#lv-container'; - if (!NexT.CONFIG.page.comments - || !NexT.CONFIG.livere + if (!NexT.CONFIG.livere || !NexT.utils.checkDOMExist(element)) return; - NexT.utils.loadComments(element).then(() => { + NexT.utils.lazyLoadComponent(element, function() { NexT.utils.getScript(NexT.CONFIG.livere.js, { attributes: { async: true @@ -15,4 +13,4 @@ document.addEventListener('DOMContentLoaded', () => { NexT.utils.hiddeLodingCmp(element); }); -}); +} diff --git a/assets/js/third-party/comments/utterances.js b/assets/js/third-party/comments/utterances.js index afb6751..43f382b 100644 --- a/assets/js/third-party/comments/utterances.js +++ b/assets/js/third-party/comments/utterances.js @@ -1,8 +1,6 @@ -document.addEventListener('DOMContentLoaded', () => { - +NexT.comments.giscus = function() { const element = '.utterances-container'; - if (!NexT.CONFIG.page.comments - || !NexT.CONFIG.utterances + if (!NexT.CONFIG.utterances || !NexT.utils.checkDOMExist(element)) return; const { @@ -11,17 +9,19 @@ document.addEventListener('DOMContentLoaded', () => { label, theme } = NexT.CONFIG.utterances.cfg; - NexT.utils.loadComments(element) - .then(() => NexT.utils.getScript(NexT.CONFIG.utterances.js, { + NexT.utils.lazyLoadComponent(element, function() { + NexT.utils.getScript(NexT.CONFIG.utterances.js, { attributes: { 'async' : true, 'crossorigin' : 'anonymous', 'repo' : repo, 'issue-term' : issueterm, + 'label' : label, 'theme' : theme }, parentNode: document.querySelector(element) - })); + }); NexT.utils.hiddeLodingCmp(element); -}); + }); +} diff --git a/assets/js/third-party/comments/waline.js b/assets/js/third-party/comments/waline.js index 97ad00a..1d17691 100644 --- a/assets/js/third-party/comments/waline.js +++ b/assets/js/third-party/comments/waline.js @@ -1,8 +1,6 @@ -document.addEventListener('DOMContentLoaded', () => { - +NexT.comments.waline = function() { const element = '.waline-container'; - if (!NexT.CONFIG.page.comments - || !NexT.CONFIG.waline + if (!NexT.CONFIG.waline || !NexT.utils.checkDOMExist(element)) return; const { @@ -19,10 +17,6 @@ document.addEventListener('DOMContentLoaded', () => { reactiontitle } = NexT.CONFIG.waline.cfg; - - const waline_css = NexT.utils.getCDNResource(NexT.CONFIG.waline.css); - NexT.utils.getStyle(waline_css, null); - const waline_js = NexT.utils.getCDNResource(NexT.CONFIG.waline.js); let locale = { @@ -35,10 +29,10 @@ document.addEventListener('DOMContentLoaded', () => { locale['reaction'+index] = value; }); - NexT.utils.loadComments(element) - .then(() => NexT.utils.getScript(waline_js, { - })) - .then(() => { + NexT.utils.lazyLoadComponent(element, function () { + NexT.utils.getScript(waline_js, function(){ + const waline_css = NexT.utils.getCDNResource(NexT.CONFIG.waline.css); + NexT.utils.getStyle(waline_css); Waline.init({ locale, @@ -55,5 +49,6 @@ document.addEventListener('DOMContentLoaded', () => { }); NexT.utils.hiddeLodingCmp(element); + }) }); -}); \ No newline at end of file +} \ No newline at end of file diff --git a/assets/js/utils.js b/assets/js/utils.js index 40c7b74..823d672 100644 --- a/assets/js/utils.js +++ b/assets/js/utils.js @@ -1,4 +1,4 @@ -/* global NexT, CONFIG */ +/* util tools */ HTMLElement.prototype.wrap = function (wrapper) { this.parentNode.insertBefore(wrapper, this); @@ -6,21 +6,6 @@ HTMLElement.prototype.wrap = function (wrapper) { wrapper.appendChild(this); }; -(function () { - const onPageLoaded = () => document.dispatchEvent( - new Event('page:loaded', { - bubbles: true - }) - ); - - if (document.readyState === 'loading') { - document.addEventListener('readystatechange', onPageLoaded, { once: true }); - } else { - onPageLoaded(); - } - document.addEventListener('pjax:success', onPageLoaded); -})(); - NexT.utils = { registerToolButtons: function () { const buttons = document.querySelector('.tool-buttons'); @@ -32,13 +17,12 @@ NexT.utils = { targetId = targetId.substring(5); } button.addEventListener('click', () => { - NexT.utils.slidScrollBarAnime(targetId); + this.slidScrollBarAnime(targetId); }); }); buttons.querySelector('div#toggle-theme').addEventListener('click', () => { const cur_theme = document.documentElement.getAttribute('data-theme'); - console.log(); window.theme.toggle(cur_theme === 'dark' ? 'light' : 'dark'); }); }, @@ -65,14 +49,14 @@ NexT.utils = { const runtimeCount = document.getElementById('runTimes'); if (runtimeCount) { const publishDate = runtimeCount.getAttribute('data-publishDate'); - const runTimes = NexT.utils.diffDate(publishDate, 2); + const runTimes = this.diffDate(publishDate, 2); runtimeCount.innerText = runTimes; } const wordsCount = document.getElementById('wordsCount'); if (wordsCount) { const words = wordsCount.getAttribute('data-count'); - wordsCount.innerText = NexT.utils.numberFormat(words); + wordsCount.innerText = this.numberFormat(words); } const readTimes = document.getElementById('readTimes'); @@ -99,7 +83,7 @@ NexT.utils = { const lastPushDate = document.getElementById('last-push-date'); if (lastPushDate) { - const pushDateVal = NexT.utils.diffDate(lastPushDate.getAttribute('data-lastPushDate'), 1); + const pushDateVal = this.diffDate(lastPushDate.getAttribute('data-lastPushDate'), 1); lastPushDate.innerText = pushDateVal; } @@ -108,22 +92,22 @@ NexT.utils = { const valIds = [0, 2, 4, 6]; const domIds = ['today_site_pv', 'yesterday_site_pv', 'month_site_pv', 'total_site_pv'] for (var i in valIds) { - let pv = NexT.utils.numberFormat(statisWidget[valIds[i]].innerText); + let pv = this.numberFormat(statisWidget[valIds[i]].innerText); document.getElementById(domIds[i]).innerText = pv; } } - setTimeout(() => { NexT.utils.fmtBusuanzi(); }, 500); + setTimeout(() => { this.fmtBusuanzi(); }, 500); }, fmtBusuanzi: function () { const bszUV = document.getElementById('busuanzi_value_site_uv'); if (bszUV) { - bszUV.innerText = NexT.utils.numberFormat(bszUV.innerText); + bszUV.innerText = this.numberFormat(bszUV.innerText); } const bszPV = document.getElementById('busuanzi_value_site_pv'); if (bszPV) { - bszPV.innerText = NexT.utils.numberFormat(bszPV.innerText); + bszPV.innerText = this.numberFormat(bszPV.innerText); } }, @@ -594,7 +578,7 @@ NexT.utils = { lazyLoadComponent: function(selector, legacyCallback) { if (legacyCallback) { - return this.loadComments(selector).then(legacyCallback); + return this.lazyLoadComponent(selector).then(legacyCallback); } return new Promise(resolve => { const element = document.querySelector(selector); diff --git a/layouts/partials/scripts/global.html b/layouts/partials/scripts/global.html index 2d4588c..384c6d9 100644 --- a/layouts/partials/scripts/global.html +++ b/layouts/partials/scripts/global.html @@ -9,9 +9,8 @@ {{- $config := resources.Get "js/config.js" }} -{{- $motion := resources.Get "js/motion.js" }} -{{- $boot := resources.Get "js/next-boot.js" }} {{- $utils := resources.Get "js/utils.js" }} +{{- $boot := resources.Get "js/next-boot.js" }} {{- $nextjs := (slice $config $utils $boot ) }} {{- if .Site.Params.motion.enable }} {{ $motionjs := resources.Get "js/motion.js" }} @@ -40,7 +39,7 @@ {{- if isset .Site.Params "giscus" }} {{- $giscusjs := resources.Get "js/third-party/comments/giscus.js" }} {{- $nextjs = $nextjs | append $giscusjs }} -{{- end }} +{{- end}} {{- if isset .Site.Params "livere" }} {{- $liverejs := resources.Get "js/third-party/comments/livere.js" }} {{- $nextjs = $nextjs | append $liverejs }}