alyenc/hugo-theme-next
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🚑 Fixed the tool buttons click event.

Browse Source
This commit is contained in:
凡梦星尘 2022-10-22 12:52:27 +08:00
parent c0ba7eda06
commit 0d4e0b9b84
5 changed files with 110 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
assets/css/_common/components/tool-buttons.scss
View File

@ -4,7 +4,6 @@
background: none; background: none;
bottom: 55px; bottom: 55px;
filter: alpha(opacity=0); filter: alpha(opacity=0);
font-size: 12px;
.button { .button {
display: block; display: block;
@ -25,6 +24,14 @@
opacity: $tool-btn-opacity; opacity: $tool-btn-opacity;
touch-action: manipulation; touch-action: manipulation;
@include mobile() {
width: 24px;
height: 24px;
line-height: 24px;
border-radius: 3px;
font-size: $font-size-small;
}
&:hover { &:hover {
color: $tool-btn-hover-fore-color; color: $tool-btn-hover-fore-color;
opacity: $tool-btn-opacity-hover; opacity: $tool-btn-opacity-hover;
@ -42,7 +49,10 @@
@if $back2top_enable { @if $back2top_enable {
.back-to-top { .back-to-top {
font-size: $font-size-smaller; font-size: $font-size-small;
@include mobile() {
font-size: $font-size-smaller;
}
@if not $back2top_scrollpercent { @if not $back2top_scrollpercent {
span { span {
@ -51,7 +61,7 @@
} }
@if $back2top_sidebar { @if $back2top_sidebar {
margin: 20px - $sidebar-offset -10px -20px; margin: 20px -$sidebar-offset -10px -20px;
opacity: 0; opacity: 0;
transition: opacity $transition-ease; transition: opacity $transition-ease;

2
assets/css/_variables/base.scss
View File

@ -296,7 +296,7 @@ $b2t-opacity-hover : 1;
$b2t-position-bottom : -100px; $b2t-position-bottom : -100px;
$b2t-position-bottom-on : 19px; $b2t-position-bottom-on : 19px;
$b2t-position-right : 30px; $b2t-position-right : 30px;
$b2t-position-right-mobile : 20px; $b2t-position-right-mobile : 16px;
$b2t-font-size : 12px; $b2t-font-size : 12px;
$b2t-color : white; $b2t-color : white;
$b2t-bg-color : $black-deep; $b2t-bg-color : $black-deep;

202
assets/js/utils.js
View File

@ -1,12 +1,12 @@
/* global NexT, CONFIG */ /* global NexT, CONFIG */
HTMLElement.prototype.wrap = function(wrapper) { HTMLElement.prototype.wrap = function (wrapper) {
this.parentNode.insertBefore(wrapper, this); this.parentNode.insertBefore(wrapper, this);
this.parentNode.removeChild(this); this.parentNode.removeChild(this);
wrapper.appendChild(this); wrapper.appendChild(this);
}; };
(function() { (function () {
const onPageLoaded = () => document.dispatchEvent( const onPageLoaded = () => document.dispatchEvent(
new Event('page:loaded', { new Event('page:loaded', {
bubbles: true bubbles: true
@ -23,55 +23,55 @@ HTMLElement.prototype.wrap = function(wrapper) {
NexT.utils = { NexT.utils = {
registerToolButtons: function() { registerToolButtons: function () {
document.getElementById('goto-comments').addEventListener('click', () => { const buttons = document.querySelectorAll('.tool-buttons div:nth-child(n+2)');
window.anime({ buttons.forEach(button => {
targets : document.scrollingElement, let targetId = button.id;
duration : 500, if (targetId != '') {
easing : 'linear', targetId = targetId.substring(5);
scrollTop: document.getElementById('comments').getBoundingClientRect().top + window.scrollY }
}); button.addEventListener('click', () => {
}); NexT.utils.slidScrollBarAnime(targetId);
document.getElementById('goto-gt').addEventListener('click', () => {
window.anime({
targets : document.scrollingElement,
duration : 500,
easing : 'linear',
scrollTop: document.getElementById('google_translate_element').getBoundingClientRect().top + window.scrollY
}); });
}); });
}, },
regSwitchThemeBtn: function() { slidScrollBarAnime: function (targetId, easing = 'linear', duration = 500) {
window.anime({
targets: document.scrollingElement,
duration: duration,
easing: easing,
scrollTop: targetId == '' ? 0 : document.getElementById(targetId).getBoundingClientRect().top + window.scrollY
});
},
regSwitchThemeBtn: function () {
const switchThemeBtn = document.getElementById('switch-theme'); const switchThemeBtn = document.getElementById('switch-theme');
if (!switchThemeBtn) return; if (!switchThemeBtn) return;
switchThemeBtn.addEventListener('click', () => { switchThemeBtn.addEventListener('click', () => {
const colorTheme = document.documentElement.getAttribute('data-theme'); const colorTheme = document.documentElement.getAttribute('data-theme');
NexT.utils.toggleDarkMode(!(colorTheme == 'dark')); NexT.utils.toggleDarkMode(!(colorTheme == 'dark'));
}); });
}, },
activeThemeMode: function() { activeThemeMode: function () {
const useDark = window.matchMedia("(prefers-color-scheme: dark)"); const useDark = window.matchMedia("(prefers-color-scheme: dark)");
let darkModeState = NexT.CONFIG.darkmode || useDark.matches; let darkModeState = NexT.CONFIG.darkmode || useDark.matches;
const localState = NexT.utils.getLocalStorage('theme'); const localState = NexT.utils.getLocalStorage('theme');
if (localState == 'light' if (localState == 'light'
|| (localState == undefined && !NexT.CONFIG.darkmode)) { || (localState == undefined && !NexT.CONFIG.darkmode)) {
darkModeState = false; darkModeState = false;
} }
NexT.utils.toggleDarkMode(darkModeState); NexT.utils.toggleDarkMode(darkModeState);
useDark.addListener(function(evt) { useDark.addListener(function (evt) {
toggleDarkMode(evt.matches); toggleDarkMode(evt.matches);
}); });
}, },
toggleDarkMode: function(state) { toggleDarkMode: function (state) {
if(state) { if (state) {
document.documentElement.setAttribute('data-theme', 'dark'); document.documentElement.setAttribute('data-theme', 'dark');
NexT.utils.setLocalStorage('theme', 'dark', 2); NexT.utils.setLocalStorage('theme', 'dark', 2);
} else { } else {
@ -83,7 +83,7 @@ NexT.utils = {
NexT.utils.toggleGiscusDarkMode(theme); NexT.utils.toggleGiscusDarkMode(theme);
}, },
toggleGiscusDarkMode: function(theme) { toggleGiscusDarkMode: function (theme) {
const iframe = document.querySelector('iframe.giscus-frame'); const iframe = document.querySelector('iframe.giscus-frame');
if (iframe) { if (iframe) {
const config = { setConfig: { theme: theme } }; const config = { setConfig: { theme: theme } };
@ -91,7 +91,7 @@ NexT.utils = {
} }
}, },
setLocalStorage: function(key, value, ttl) { setLocalStorage: function (key, value, ttl) {
if (ttl === 0) return; if (ttl === 0) return;
const now = new Date(); const now = new Date();
const expiryDay = ttl * 86400000; const expiryDay = ttl * 86400000;
@ -102,7 +102,7 @@ NexT.utils = {
localStorage.setItem(key, JSON.stringify(item)); localStorage.setItem(key, JSON.stringify(item));
}, },
getLocalStorage: function(key) { getLocalStorage: function (key) {
const itemStr = localStorage.getItem(key); const itemStr = localStorage.getItem(key);
if (!itemStr) { if (!itemStr) {
return undefined; return undefined;
@ -118,7 +118,7 @@ NexT.utils = {
return item.value; return item.value;
}, },
domAddClass: function(selector, cls) { domAddClass: function (selector, cls) {
const doms = document.querySelectorAll(selector); const doms = document.querySelectorAll(selector);
if (doms) { if (doms) {
doms.forEach(dom => { doms.forEach(dom => {
@ -127,7 +127,7 @@ NexT.utils = {
} }
}, },
calSiteInfo: function() { calSiteInfo: function () {
const runtimeCount = document.getElementById('runTimes'); const runtimeCount = document.getElementById('runTimes');
if (runtimeCount) { if (runtimeCount) {
const publishDate = runtimeCount.getAttribute('data-publishDate'); const publishDate = runtimeCount.getAttribute('data-publishDate');
@ -144,7 +144,7 @@ NexT.utils = {
const readTimes = document.getElementById('readTimes'); const readTimes = document.getElementById('readTimes');
if (readTimes) { if (readTimes) {
const times = readTimes.getAttribute('data-times'); const times = readTimes.getAttribute('data-times');
const hour = 60; const hour = 60;
const day = hour * 24; const day = hour * 24;
@ -153,7 +153,7 @@ NexT.utils = {
let timesLabel; let timesLabel;
if (daysCount >= 1) { if (daysCount >= 1) {
timesLabel = daysCount + NexT.CONFIG.i18n.ds_days + parseInt((times - daysCount * day)/hour) + NexT.CONFIG.i18n.ds_hours; timesLabel = daysCount + NexT.CONFIG.i18n.ds_days + parseInt((times - daysCount * day) / hour) + NexT.CONFIG.i18n.ds_hours;
} else if (hoursCount >= 1) { } else if (hoursCount >= 1) {
timesLabel = hoursCount + NexT.CONFIG.i18n.ds_hours + (times - hoursCount * hour) + NexT.CONFIG.i18n.ds_mins; timesLabel = hoursCount + NexT.CONFIG.i18n.ds_hours + (times - hoursCount * hour) + NexT.CONFIG.i18n.ds_mins;
} else { } else {
@ -171,7 +171,7 @@ NexT.utils = {
const statisWidget = document.querySelectorAll('#la-siteinfo-widget span'); const statisWidget = document.querySelectorAll('#la-siteinfo-widget span');
if (statisWidget.length > 0) { if (statisWidget.length > 0) {
const valIds = [0,2,4,6]; const valIds = [0, 2, 4, 6];
const domIds = ['today_site_pv', 'yesterday_site_pv', 'month_site_pv', 'total_site_pv'] const domIds = ['today_site_pv', 'yesterday_site_pv', 'month_site_pv', 'total_site_pv']
for (var i in valIds) { for (var i in valIds) {
let pv = NexT.utils.numberFormat(statisWidget[valIds[i]].innerText); let pv = NexT.utils.numberFormat(statisWidget[valIds[i]].innerText);
@ -179,10 +179,10 @@ NexT.utils = {
} }
} }
setTimeout(()=>{ NexT.utils.fmtBusuanzi(); }, 500); setTimeout(() => { NexT.utils.fmtBusuanzi(); }, 500);
}, },
fmtBusuanzi: function() { fmtBusuanzi: function () {
const bszUV = document.getElementById('busuanzi_value_site_uv'); const bszUV = document.getElementById('busuanzi_value_site_uv');
if (bszUV) { if (bszUV) {
bszUV.innerText = NexT.utils.numberFormat(bszUV.innerText); bszUV.innerText = NexT.utils.numberFormat(bszUV.innerText);
@ -193,12 +193,12 @@ NexT.utils = {
} }
}, },
numberFormat: function(number) { numberFormat: function (number) {
let result; let result;
if (number.indexOf(',') > 0) { if (number.indexOf(',') > 0) {
number = number.replaceAll(",", ""); number = number.replaceAll(",", "");
} }
if (number > 10000) { if (number > 10000) {
result = (number / 10000.0).toFixed(2) + ' w'; result = (number / 10000.0).toFixed(2) + ' w';
} else if (number > 1000) { } else if (number > 1000) {
@ -209,7 +209,7 @@ NexT.utils = {
return result; return result;
}, },
diffDate: function(date, mode = 0) { diffDate: function (date, mode = 0) {
const dateNow = new Date(); const dateNow = new Date();
const datePost = new Date(date); const datePost = new Date(date);
const dateDiff = dateNow.getTime() - datePost.getTime(); const dateDiff = dateNow.getTime() - datePost.getTime();
@ -239,15 +239,15 @@ NexT.utils = {
} else { } else {
result = NexT.CONFIG.i18n.ds_just; result = NexT.CONFIG.i18n.ds_just;
} }
} else if (mode == 2) { } else if (mode == 2) {
const yearCount = parseInt(dateDiff / year); const yearCount = parseInt(dateDiff / year);
if (yearCount >= 1) { if (yearCount >= 1) {
const dayCount = parseInt((dateDiff - (yearCount * year))/day); const dayCount = parseInt((dateDiff - (yearCount * year)) / day);
result = yearCount + NexT.CONFIG.i18n.ds_years + dayCount + NexT.CONFIG.i18n.ds_days; result = yearCount + NexT.CONFIG.i18n.ds_years + dayCount + NexT.CONFIG.i18n.ds_days;
} else { } else {
const dayCount = parseInt(dateDiff/day); const dayCount = parseInt(dateDiff / day);
result = dayCount + NexT.CONFIG.i18n.ds_days; result = dayCount + NexT.CONFIG.i18n.ds_days;
} }
} else { } else {
result = parseInt(dateDiff / day); result = parseInt(dateDiff / day);
} }
@ -255,17 +255,17 @@ NexT.utils = {
return result; return result;
}, },
checkDOMExist: function(selector) { checkDOMExist: function (selector) {
return document.querySelector(selector) != null; return document.querySelector(selector) != null;
}, },
getCDNResource: function(res) { getCDNResource: function (res) {
let { plugins, router } = NexT.CONFIG.vendor; let { plugins, router } = NexT.CONFIG.vendor;
let { name, version, file, alias } = res; let { name, version, file, alias } = res;
let npm_name = name; let npm_name = name;
let res_src = ''; let res_src = '';
switch(plugins) { switch (plugins) {
case 'cdnjs': case 'cdnjs':
let cdnjs_name = alias || name; let cdnjs_name = alias || name;
let cdnjs_file = file.replace(/\.js$/, '.min.js').replace(/^(dist|lib|source\/js|)\/(browser\/|)/, ''); let cdnjs_file = file.replace(/\.js$/, '.min.js').replace(/^(dist|lib|source\/js|)\/(browser\/|)/, '');
@ -278,23 +278,10 @@ NexT.utils = {
return res_src; return res_src;
}, },
/* replacePostCRLink: function() {
if (NexT.CONFIG.hostname.startsWith('http')) return;
// Try to support mutli domain without base URL sets.
let href = window.location.href;
if (href.indexOf('#')>-1){
href = href.split('#')[0];
}
let postLink = document.getElementById('post-cr-link');
if (!postLink) return;
postLink.text = href;
postLink.href = href;
},*/
/** /**
* One-click copy code support. * One-click copy code support.
*/ */
registerCopyCode: function() { registerCopyCode: function () {
if (!NexT.CONFIG.copybtn) return; if (!NexT.CONFIG.copybtn) return;
let figure = document.querySelectorAll('.highlight pre'); let figure = document.querySelectorAll('.highlight pre');
@ -341,7 +328,7 @@ NexT.utils = {
}); });
}, },
wrapTableWithBox: function() { wrapTableWithBox: function () {
document.querySelectorAll('table').forEach(element => { document.querySelectorAll('table').forEach(element => {
const box = document.createElement('div'); const box = document.createElement('div');
box.className = 'table-container'; box.className = 'table-container';
@ -349,7 +336,7 @@ NexT.utils = {
}); });
}, },
registerVideoIframe: function() { registerVideoIframe: function () {
document.querySelectorAll('iframe').forEach(element => { document.querySelectorAll('iframe').forEach(element => {
const supported = [ const supported = [
'www.youtube.com', 'www.youtube.com',
@ -371,7 +358,7 @@ NexT.utils = {
}); });
}, },
registerScrollPercent: function() { registerScrollPercent: function () {
const backToTop = document.querySelector('.back-to-top'); const backToTop = document.querySelector('.back-to-top');
const readingProgressBar = document.querySelector('.reading-progress-bar'); const readingProgressBar = document.querySelector('.reading-progress-bar');
// For init back to top in sidebar if page was scrolled after page refresh. // For init back to top in sidebar if page was scrolled after page refresh.
@ -381,7 +368,7 @@ NexT.utils = {
const scrollPercent = contentHeight > 0 ? Math.min(100 * window.scrollY / contentHeight, 100) : 0; const scrollPercent = contentHeight > 0 ? Math.min(100 * window.scrollY / contentHeight, 100) : 0;
if (backToTop) { if (backToTop) {
const scrollPercentRound = Math.round(scrollPercent) const scrollPercentRound = Math.round(scrollPercent)
const isShow = scrollPercentRound >= 5; const isShow = scrollPercentRound >= 5;
backToTop.classList.toggle('back-to-top-on', isShow); backToTop.classList.toggle('back-to-top-on', isShow);
backToTop.querySelector('span').innerText = scrollPercentRound + '%'; backToTop.querySelector('span').innerText = scrollPercentRound + '%';
} }
@ -400,21 +387,12 @@ NexT.utils = {
} }
this.activateNavByIndex(index); this.activateNavByIndex(index);
}, { passive: true }); }, { passive: true });
backToTop && backToTop.addEventListener('click', () => {
window.anime({
targets : document.scrollingElement,
duration : 500,
easing : 'linear',
scrollTop: 0
});
});
}, },
/** /**
* Tabs tag listener (without twitter bootstrap). * Tabs tag listener (without twitter bootstrap).
*/ */
registerTabsTag: function() { registerTabsTag: function () {
// Binding `nav-tabs` & `tab-content` by real time permalink changing. // Binding `nav-tabs` & `tab-content` by real time permalink changing.
document.querySelectorAll('.tabs ul.nav-tabs .tab').forEach(element => { document.querySelectorAll('.tabs ul.nav-tabs .tab').forEach(element => {
element.addEventListener('click', event => { element.addEventListener('click', event => {
@ -429,7 +407,7 @@ NexT.utils = {
// https://stackoverflow.com/questions/20306204/using-queryselector-with-ids-that-are-numbers // https://stackoverflow.com/questions/20306204/using-queryselector-with-ids-that-are-numbers
const tActive = document.getElementById(element.querySelector('a').getAttribute('href').replace('#', '')); const tActive = document.getElementById(element.querySelector('a').getAttribute('href').replace('#', ''));
[...tActive.parentNode.children].forEach(target => { [...tActive.parentNode.children].forEach(target => {
// Array.prototype.slice.call(tActive.parentNode.children).forEach(target => { // Array.prototype.slice.call(tActive.parentNode.children).forEach(target => {
target.classList.toggle('active', target === tActive); target.classList.toggle('active', target === tActive);
}); });
// Trigger event // Trigger event
@ -439,9 +417,9 @@ NexT.utils = {
if (!NexT.CONFIG.stickytabs) return; if (!NexT.CONFIG.stickytabs) return;
const offset = nav.parentNode.getBoundingClientRect().top + window.scrollY + 10; const offset = nav.parentNode.getBoundingClientRect().top + window.scrollY + 10;
window.anime({ window.anime({
targets : document.scrollingElement, targets: document.scrollingElement,
duration : 500, duration: 500,
easing : 'linear', easing: 'linear',
scrollTop: offset scrollTop: offset
}); });
}); });
@ -450,7 +428,7 @@ NexT.utils = {
window.dispatchEvent(new Event('tabs:register')); window.dispatchEvent(new Event('tabs:register'));
}, },
registerCanIUseTag: function() { registerCanIUseTag: function () {
// Get responsive height passed from iframe. // Get responsive height passed from iframe.
window.addEventListener('message', ({ data }) => { window.addEventListener('message', ({ data }) => {
if (typeof data === 'string' && data.includes('ciu_embed')) { if (typeof data === 'string' && data.includes('ciu_embed')) {
@ -468,7 +446,7 @@ NexT.utils = {
target.classList.toggle('menu-item-active', target.hostname === location.hostname && (isSamePath || isSubPath)); target.classList.toggle('menu-item-active', target.hostname === location.hostname && (isSamePath || isSubPath));
}); });
}, },
registerLangSelect: function() { registerLangSelect: function() {
const selects = document.querySelectorAll('.lang-select'); const selects = document.querySelectorAll('.lang-select');
selects.forEach(sel => { selects.forEach(sel => {
@ -484,7 +462,7 @@ NexT.utils = {
}); });
},*/ },*/
registerSidebarTOC: function() { registerSidebarTOC: function () {
const toc = document.getElementById('TableOfContents'); const toc = document.getElementById('TableOfContents');
if (!toc.hasChildNodes()) { if (!toc.hasChildNodes()) {
const tocActive = document.querySelector('.sidebar-inner'); const tocActive = document.querySelector('.sidebar-inner');
@ -498,11 +476,11 @@ NexT.utils = {
event.preventDefault(); event.preventDefault();
const offset = target.getBoundingClientRect().top + window.scrollY; const offset = target.getBoundingClientRect().top + window.scrollY;
window.anime({ window.anime({
targets : document.scrollingElement, targets: document.scrollingElement,
duration : 500, duration: 500,
easing : 'linear', easing: 'linear',
scrollTop: offset, scrollTop: offset,
complete : () => { complete: () => {
history.pushState(null, document.title, element.href); history.pushState(null, document.title, element.href);
} }
}); });
@ -511,7 +489,7 @@ NexT.utils = {
}); });
}, },
registerPostReward: function() { registerPostReward: function () {
const button = document.querySelector('.reward-container button'); const button = document.querySelector('.reward-container button');
if (!button) return; if (!button) return;
button.addEventListener('click', () => { button.addEventListener('click', () => {
@ -519,22 +497,22 @@ NexT.utils = {
}); });
}, },
initCommontesDispaly: function(){ initCommontesDispaly: function () {
const comms = document.querySelectorAll('.comment-wrap > div'); const comms = document.querySelectorAll('.comment-wrap > div');
if (comms.length<=1) return; if (comms.length <= 1) return;
comms.forEach(function(item){ comms.forEach(function (item) {
var dis = window.getComputedStyle(item, null).display; var dis = window.getComputedStyle(item, null).display;
item.style.display = dis; item.style.display = dis;
}); });
}, },
registerCommonSwitch: function() { registerCommonSwitch: function () {
const button = document.querySelector('.comment-switch .switch-btn'); const button = document.querySelector('.comment-switch .switch-btn');
if (!button) return; if (!button) return;
const comms = document.querySelectorAll('.comment-wrap > div'); const comms = document.querySelectorAll('.comment-wrap > div');
button.addEventListener('click', () => { button.addEventListener('click', () => {
button.classList.toggle('move'); button.classList.toggle('move');
comms.forEach(function(item){ comms.forEach(function (item) {
if (item.style.display === 'none') { if (item.style.display === 'none') {
item.style.cssText = "display: block; animation: tabshow .8s"; item.style.cssText = "display: block; animation: tabshow .8s";
} else { } else {
@ -544,16 +522,16 @@ NexT.utils = {
}); });
}, },
hideCommontes:function() { hideCommontes: function () {
document.querySelector('.post-comments').style.display = 'none'; document.querySelector('.post-comments').style.display = 'none';
}, },
hiddeLodingCmp: function(selector) { hiddeLodingCmp: function (selector) {
const loadding = document.querySelector(selector).previousElementSibling; const loadding = document.querySelector(selector).previousElementSibling;
loadding.style.display = 'none'; loadding.style.display = 'none';
}, },
activateNavByIndex: function(index) { activateNavByIndex: function (index) {
const target = document.querySelectorAll('.post-toc li a')[index]; const target = document.querySelectorAll('.post-toc li a')[index];
if (!target || target.classList.contains('active-current')) return; if (!target || target.classList.contains('active-current')) return;
@ -570,14 +548,14 @@ NexT.utils = {
const tocElement = document.querySelector('.sidebar-panel-container'); const tocElement = document.querySelector('.sidebar-panel-container');
if (!tocElement.parentNode.classList.contains('sidebar-toc-active')) return; if (!tocElement.parentNode.classList.contains('sidebar-toc-active')) return;
window.anime({ window.anime({
targets : tocElement, targets: tocElement,
duration : 200, duration: 200,
easing : 'linear', easing: 'linear',
scrollTop: tocElement.scrollTop - (tocElement.offsetHeight / 2) + target.getBoundingClientRect().top - tocElement.getBoundingClientRect().top scrollTop: tocElement.scrollTop - (tocElement.offsetHeight / 2) + target.getBoundingClientRect().top - tocElement.getBoundingClientRect().top
}); });
}, },
updateSidebarPosition: function() { updateSidebarPosition: function () {
if (window.innerWidth < 992 || NexT.CONFIG.scheme === 'Pisces' || NexT.CONFIG.scheme === 'Gemini') return; if (window.innerWidth < 992 || NexT.CONFIG.scheme === 'Pisces' || NexT.CONFIG.scheme === 'Gemini') return;
// Expand sidebar on post detail page by default, when post has a toc. // Expand sidebar on post detail page by default, when post has a toc.
const hasTOC = document.querySelector('.post-toc'); const hasTOC = document.querySelector('.post-toc');
@ -591,7 +569,7 @@ NexT.utils = {
} }
}, },
activateSidebarPanel: function(index) { activateSidebarPanel: function (index) {
const duration = 200; const duration = 200;
const sidebar = document.querySelector('.sidebar-inner'); const sidebar = document.querySelector('.sidebar-inner');
const panel = document.querySelector('.sidebar-panel-container'); const panel = document.querySelector('.sidebar-panel-container');
@ -601,25 +579,25 @@ NexT.utils = {
window.anime({ window.anime({
duration, duration,
targets : panel, targets: panel,
easing : 'linear', easing: 'linear',
opacity : 0, opacity: 0,
translateY: [0, -20], translateY: [0, -20],
complete : () => { complete: () => {
// Prevent adding TOC to Overview if Overview was selected when close & open sidebar. // Prevent adding TOC to Overview if Overview was selected when close & open sidebar.
sidebar.classList.replace(activeClassName[1 - index], activeClassName[index]); sidebar.classList.replace(activeClassName[1 - index], activeClassName[index]);
window.anime({ window.anime({
duration, duration,
targets : panel, targets: panel,
easing : 'linear', easing: 'linear',
opacity : [0, 1], opacity: [0, 1],
translateY: [-20, 0] translateY: [-20, 0]
}); });
} }
}); });
}, },
getStyle: function(src, parent) { getStyle: function (src, parent) {
const link = document.createElement('link'); const link = document.createElement('link');
link.setAttribute('rel', 'stylesheet'); link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css'); link.setAttribute('type', 'text/css');
@ -628,7 +606,7 @@ NexT.utils = {
(parent || document.head).appendChild(link); (parent || document.head).appendChild(link);
}, },
getScript: function(src, options = {}, legacyCondition) { getScript: function (src, options = {}, legacyCondition) {
if (typeof options === 'function') { if (typeof options === 'function') {
return this.getScript(src, { return this.getScript(src, {
condition: legacyCondition condition: legacyCondition
@ -646,7 +624,7 @@ NexT.utils = {
} = {}, } = {},
parentNode = null parentNode = null
} = options; } = options;
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
if (condition) { if (condition) {
resolve(); resolve();
@ -680,7 +658,7 @@ NexT.utils = {
}); });
}, },
loadComments: function(selector, legacyCallback) { loadComments: function (selector, legacyCallback) {
if (legacyCallback) { if (legacyCallback) {
return this.loadComments(selector).then(legacyCallback); return this.loadComments(selector).then(legacyCallback);
} }
@ -700,4 +678,4 @@ NexT.utils = {
intersectionObserver.observe(element); intersectionObserver.observe(element);
}); });
} }
}; };

2
layouts/partials/footer.html
View File

@ -1,6 +1,6 @@
{{- $ft := .Site.Params.footer }} {{- $ft := .Site.Params.footer }}
{{ if $ft.translate }} {{ if $ft.translate }}
<div class="google-translate"> <div id="gtranslate" class="google-translate">
<i class="fa fa-language"></i> <i class="fa fa-language"></i>
<div id="google_translate_element"></div> <div id="google_translate_element"></div>
</div> </div>

10
layouts/partials/widgets.html
View File

@ -1,12 +1,12 @@
<div class="tool-buttons" > <div class="tool-buttons" >
<div id="switch-theme" class="button" title="{{ T "ToolBtns.theme" }}">
<i class="fas fa-adjust"></i>
</div>
<div id="goto-comments" class="button goto-comments" title="{{ T "ToolBtns.comment" }}"> <div id="goto-comments" class="button goto-comments" title="{{ T "ToolBtns.comment" }}">
<i class="fas fa-comments"></i> <i class="fas fa-comments"></i>
</div> </div>
<div id="switch-theme" class="button" title="{{ T "ToolBtns.theme" }}">
<i class="fas fa-adjust"></i>
</div>
{{ if .Site.Params.footer.translate }} {{ if .Site.Params.footer.translate }}
<div id="goto-gt" class="button" title="{{ T "ToolBtns.lang" }}"> <div id="goto-gtranslate" class="button" title="{{ T "ToolBtns.lang" }}">
<i class="fas fa-globe"></i> <i class="fas fa-globe"></i>
</div> </div>
{{ end }} {{ end }}