🚑 Fixed the tool buttons click event.
This commit is contained in:
凡梦星尘
parent
c0ba7eda06
commit
0d4e0b9b84
@ -4,7 +4,6 @@
|
||||
background: none;
|
||||
bottom: 55px;
|
||||
filter: alpha(opacity=0);
|
||||
font-size: 12px;
|
||||
|
||||
.button {
|
||||
display: block;
|
||||
@ -25,6 +24,14 @@
|
||||
opacity: $tool-btn-opacity;
|
||||
touch-action: manipulation;
|
||||
|
||||
@include mobile() {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
border-radius: 3px;
|
||||
font-size: $font-size-small;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $tool-btn-hover-fore-color;
|
||||
opacity: $tool-btn-opacity-hover;
|
||||
@ -42,7 +49,10 @@
|
||||
|
||||
@if $back2top_enable {
|
||||
.back-to-top {
|
||||
font-size: $font-size-small;
|
||||
@include mobile() {
|
||||
font-size: $font-size-smaller;
|
||||
}
|
||||
|
||||
@if not $back2top_scrollpercent {
|
||||
span {
|
||||
@ -51,7 +61,7 @@
|
||||
}
|
||||
|
||||
@if $back2top_sidebar {
|
||||
margin: 20px - $sidebar-offset -10px -20px;
|
||||
margin: 20px -$sidebar-offset -10px -20px;
|
||||
opacity: 0;
|
||||
transition: opacity $transition-ease;
|
||||
|
||||
|
||||
@ -296,7 +296,7 @@ $b2t-opacity-hover : 1;
|
||||
$b2t-position-bottom : -100px;
|
||||
$b2t-position-bottom-on : 19px;
|
||||
$b2t-position-right : 30px;
|
||||
$b2t-position-right-mobile : 20px;
|
||||
$b2t-position-right-mobile : 16px;
|
||||
$b2t-font-size : 12px;
|
||||
$b2t-color : white;
|
||||
$b2t-bg-color : $black-deep;
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
/* global NexT, CONFIG */
|
||||
|
||||
HTMLElement.prototype.wrap = function(wrapper) {
|
||||
HTMLElement.prototype.wrap = function (wrapper) {
|
||||
this.parentNode.insertBefore(wrapper, this);
|
||||
this.parentNode.removeChild(this);
|
||||
wrapper.appendChild(this);
|
||||
};
|
||||
|
||||
(function() {
|
||||
(function () {
|
||||
const onPageLoaded = () => document.dispatchEvent(
|
||||
new Event('page:loaded', {
|
||||
bubbles: true
|
||||
@ -23,28 +23,29 @@ HTMLElement.prototype.wrap = function(wrapper) {
|
||||
|
||||
NexT.utils = {
|
||||
|
||||
registerToolButtons: function() {
|
||||
document.getElementById('goto-comments').addEventListener('click', () => {
|
||||
window.anime({
|
||||
targets : document.scrollingElement,
|
||||
duration : 500,
|
||||
easing : 'linear',
|
||||
scrollTop: document.getElementById('comments').getBoundingClientRect().top + window.scrollY
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
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
|
||||
registerToolButtons: function () {
|
||||
const buttons = document.querySelectorAll('.tool-buttons div:nth-child(n+2)');
|
||||
buttons.forEach(button => {
|
||||
let targetId = button.id;
|
||||
if (targetId != '') {
|
||||
targetId = targetId.substring(5);
|
||||
}
|
||||
button.addEventListener('click', () => {
|
||||
NexT.utils.slidScrollBarAnime(targetId);
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
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');
|
||||
if (!switchThemeBtn) return;
|
||||
switchThemeBtn.addEventListener('click', () => {
|
||||
@ -54,8 +55,7 @@ NexT.utils = {
|
||||
});
|
||||
},
|
||||
|
||||
activeThemeMode: function() {
|
||||
|
||||
activeThemeMode: function () {
|
||||
const useDark = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
let darkModeState = NexT.CONFIG.darkmode || useDark.matches;
|
||||
const localState = NexT.utils.getLocalStorage('theme');
|
||||
@ -65,13 +65,13 @@ NexT.utils = {
|
||||
}
|
||||
NexT.utils.toggleDarkMode(darkModeState);
|
||||
|
||||
useDark.addListener(function(evt) {
|
||||
useDark.addListener(function (evt) {
|
||||
toggleDarkMode(evt.matches);
|
||||
});
|
||||
},
|
||||
|
||||
toggleDarkMode: function(state) {
|
||||
if(state) {
|
||||
toggleDarkMode: function (state) {
|
||||
if (state) {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
NexT.utils.setLocalStorage('theme', 'dark', 2);
|
||||
} else {
|
||||
@ -83,7 +83,7 @@ NexT.utils = {
|
||||
NexT.utils.toggleGiscusDarkMode(theme);
|
||||
},
|
||||
|
||||
toggleGiscusDarkMode: function(theme) {
|
||||
toggleGiscusDarkMode: function (theme) {
|
||||
const iframe = document.querySelector('iframe.giscus-frame');
|
||||
if (iframe) {
|
||||
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;
|
||||
const now = new Date();
|
||||
const expiryDay = ttl * 86400000;
|
||||
@ -102,7 +102,7 @@ NexT.utils = {
|
||||
localStorage.setItem(key, JSON.stringify(item));
|
||||
},
|
||||
|
||||
getLocalStorage: function(key) {
|
||||
getLocalStorage: function (key) {
|
||||
const itemStr = localStorage.getItem(key);
|
||||
if (!itemStr) {
|
||||
return undefined;
|
||||
@ -118,7 +118,7 @@ NexT.utils = {
|
||||
return item.value;
|
||||
},
|
||||
|
||||
domAddClass: function(selector, cls) {
|
||||
domAddClass: function (selector, cls) {
|
||||
const doms = document.querySelectorAll(selector);
|
||||
if (doms) {
|
||||
doms.forEach(dom => {
|
||||
@ -127,7 +127,7 @@ NexT.utils = {
|
||||
}
|
||||
},
|
||||
|
||||
calSiteInfo: function() {
|
||||
calSiteInfo: function () {
|
||||
const runtimeCount = document.getElementById('runTimes');
|
||||
if (runtimeCount) {
|
||||
const publishDate = runtimeCount.getAttribute('data-publishDate');
|
||||
@ -153,7 +153,7 @@ NexT.utils = {
|
||||
|
||||
let timesLabel;
|
||||
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) {
|
||||
timesLabel = hoursCount + NexT.CONFIG.i18n.ds_hours + (times - hoursCount * hour) + NexT.CONFIG.i18n.ds_mins;
|
||||
} else {
|
||||
@ -171,7 +171,7 @@ NexT.utils = {
|
||||
|
||||
const statisWidget = document.querySelectorAll('#la-siteinfo-widget span');
|
||||
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']
|
||||
for (var i in valIds) {
|
||||
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');
|
||||
if (bszUV) {
|
||||
bszUV.innerText = NexT.utils.numberFormat(bszUV.innerText);
|
||||
@ -193,7 +193,7 @@ NexT.utils = {
|
||||
}
|
||||
},
|
||||
|
||||
numberFormat: function(number) {
|
||||
numberFormat: function (number) {
|
||||
let result;
|
||||
if (number.indexOf(',') > 0) {
|
||||
number = number.replaceAll(",", "");
|
||||
@ -209,7 +209,7 @@ NexT.utils = {
|
||||
return result;
|
||||
},
|
||||
|
||||
diffDate: function(date, mode = 0) {
|
||||
diffDate: function (date, mode = 0) {
|
||||
const dateNow = new Date();
|
||||
const datePost = new Date(date);
|
||||
const dateDiff = dateNow.getTime() - datePost.getTime();
|
||||
@ -242,10 +242,10 @@ NexT.utils = {
|
||||
} else if (mode == 2) {
|
||||
const yearCount = parseInt(dateDiff / year);
|
||||
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;
|
||||
} else {
|
||||
const dayCount = parseInt(dateDiff/day);
|
||||
const dayCount = parseInt(dateDiff / day);
|
||||
result = dayCount + NexT.CONFIG.i18n.ds_days;
|
||||
}
|
||||
} else {
|
||||
@ -255,17 +255,17 @@ NexT.utils = {
|
||||
return result;
|
||||
},
|
||||
|
||||
checkDOMExist: function(selector) {
|
||||
checkDOMExist: function (selector) {
|
||||
return document.querySelector(selector) != null;
|
||||
},
|
||||
|
||||
getCDNResource: function(res) {
|
||||
getCDNResource: function (res) {
|
||||
let { plugins, router } = NexT.CONFIG.vendor;
|
||||
let { name, version, file, alias } = res;
|
||||
|
||||
let npm_name = name;
|
||||
let res_src = '';
|
||||
switch(plugins) {
|
||||
switch (plugins) {
|
||||
case 'cdnjs':
|
||||
let cdnjs_name = alias || name;
|
||||
let cdnjs_file = file.replace(/\.js$/, '.min.js').replace(/^(dist|lib|source\/js|)\/(browser\/|)/, '');
|
||||
@ -278,23 +278,10 @@ NexT.utils = {
|
||||
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.
|
||||
*/
|
||||
registerCopyCode: function() {
|
||||
registerCopyCode: function () {
|
||||
if (!NexT.CONFIG.copybtn) return;
|
||||
|
||||
let figure = document.querySelectorAll('.highlight pre');
|
||||
@ -341,7 +328,7 @@ NexT.utils = {
|
||||
});
|
||||
},
|
||||
|
||||
wrapTableWithBox: function() {
|
||||
wrapTableWithBox: function () {
|
||||
document.querySelectorAll('table').forEach(element => {
|
||||
const box = document.createElement('div');
|
||||
box.className = 'table-container';
|
||||
@ -349,7 +336,7 @@ NexT.utils = {
|
||||
});
|
||||
},
|
||||
|
||||
registerVideoIframe: function() {
|
||||
registerVideoIframe: function () {
|
||||
document.querySelectorAll('iframe').forEach(element => {
|
||||
const supported = [
|
||||
'www.youtube.com',
|
||||
@ -371,7 +358,7 @@ NexT.utils = {
|
||||
});
|
||||
},
|
||||
|
||||
registerScrollPercent: function() {
|
||||
registerScrollPercent: function () {
|
||||
const backToTop = document.querySelector('.back-to-top');
|
||||
const readingProgressBar = document.querySelector('.reading-progress-bar');
|
||||
// For init back to top in sidebar if page was scrolled after page refresh.
|
||||
@ -400,21 +387,12 @@ NexT.utils = {
|
||||
}
|
||||
this.activateNavByIndex(index);
|
||||
}, { passive: true });
|
||||
|
||||
backToTop && backToTop.addEventListener('click', () => {
|
||||
window.anime({
|
||||
targets : document.scrollingElement,
|
||||
duration : 500,
|
||||
easing : 'linear',
|
||||
scrollTop: 0
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Tabs tag listener (without twitter bootstrap).
|
||||
*/
|
||||
registerTabsTag: function() {
|
||||
registerTabsTag: function () {
|
||||
// Binding `nav-tabs` & `tab-content` by real time permalink changing.
|
||||
document.querySelectorAll('.tabs ul.nav-tabs .tab').forEach(element => {
|
||||
element.addEventListener('click', event => {
|
||||
@ -439,9 +417,9 @@ NexT.utils = {
|
||||
if (!NexT.CONFIG.stickytabs) return;
|
||||
const offset = nav.parentNode.getBoundingClientRect().top + window.scrollY + 10;
|
||||
window.anime({
|
||||
targets : document.scrollingElement,
|
||||
duration : 500,
|
||||
easing : 'linear',
|
||||
targets: document.scrollingElement,
|
||||
duration: 500,
|
||||
easing: 'linear',
|
||||
scrollTop: offset
|
||||
});
|
||||
});
|
||||
@ -450,7 +428,7 @@ NexT.utils = {
|
||||
window.dispatchEvent(new Event('tabs:register'));
|
||||
},
|
||||
|
||||
registerCanIUseTag: function() {
|
||||
registerCanIUseTag: function () {
|
||||
// Get responsive height passed from iframe.
|
||||
window.addEventListener('message', ({ data }) => {
|
||||
if (typeof data === 'string' && data.includes('ciu_embed')) {
|
||||
@ -484,7 +462,7 @@ NexT.utils = {
|
||||
});
|
||||
},*/
|
||||
|
||||
registerSidebarTOC: function() {
|
||||
registerSidebarTOC: function () {
|
||||
const toc = document.getElementById('TableOfContents');
|
||||
if (!toc.hasChildNodes()) {
|
||||
const tocActive = document.querySelector('.sidebar-inner');
|
||||
@ -498,11 +476,11 @@ NexT.utils = {
|
||||
event.preventDefault();
|
||||
const offset = target.getBoundingClientRect().top + window.scrollY;
|
||||
window.anime({
|
||||
targets : document.scrollingElement,
|
||||
duration : 500,
|
||||
easing : 'linear',
|
||||
targets: document.scrollingElement,
|
||||
duration: 500,
|
||||
easing: 'linear',
|
||||
scrollTop: offset,
|
||||
complete : () => {
|
||||
complete: () => {
|
||||
history.pushState(null, document.title, element.href);
|
||||
}
|
||||
});
|
||||
@ -511,7 +489,7 @@ NexT.utils = {
|
||||
});
|
||||
},
|
||||
|
||||
registerPostReward: function() {
|
||||
registerPostReward: function () {
|
||||
const button = document.querySelector('.reward-container button');
|
||||
if (!button) return;
|
||||
button.addEventListener('click', () => {
|
||||
@ -519,22 +497,22 @@ NexT.utils = {
|
||||
});
|
||||
},
|
||||
|
||||
initCommontesDispaly: function(){
|
||||
initCommontesDispaly: function () {
|
||||
const comms = document.querySelectorAll('.comment-wrap > div');
|
||||
if (comms.length<=1) return;
|
||||
comms.forEach(function(item){
|
||||
if (comms.length <= 1) return;
|
||||
comms.forEach(function (item) {
|
||||
var dis = window.getComputedStyle(item, null).display;
|
||||
item.style.display = dis;
|
||||
});
|
||||
},
|
||||
|
||||
registerCommonSwitch: function() {
|
||||
registerCommonSwitch: function () {
|
||||
const button = document.querySelector('.comment-switch .switch-btn');
|
||||
if (!button) return;
|
||||
const comms = document.querySelectorAll('.comment-wrap > div');
|
||||
button.addEventListener('click', () => {
|
||||
button.classList.toggle('move');
|
||||
comms.forEach(function(item){
|
||||
comms.forEach(function (item) {
|
||||
if (item.style.display === 'none') {
|
||||
item.style.cssText = "display: block; animation: tabshow .8s";
|
||||
} else {
|
||||
@ -544,16 +522,16 @@ NexT.utils = {
|
||||
});
|
||||
},
|
||||
|
||||
hideCommontes:function() {
|
||||
hideCommontes: function () {
|
||||
document.querySelector('.post-comments').style.display = 'none';
|
||||
},
|
||||
|
||||
hiddeLodingCmp: function(selector) {
|
||||
hiddeLodingCmp: function (selector) {
|
||||
const loadding = document.querySelector(selector).previousElementSibling;
|
||||
loadding.style.display = 'none';
|
||||
},
|
||||
|
||||
activateNavByIndex: function(index) {
|
||||
activateNavByIndex: function (index) {
|
||||
const target = document.querySelectorAll('.post-toc li a')[index];
|
||||
if (!target || target.classList.contains('active-current')) return;
|
||||
|
||||
@ -570,14 +548,14 @@ NexT.utils = {
|
||||
const tocElement = document.querySelector('.sidebar-panel-container');
|
||||
if (!tocElement.parentNode.classList.contains('sidebar-toc-active')) return;
|
||||
window.anime({
|
||||
targets : tocElement,
|
||||
duration : 200,
|
||||
easing : 'linear',
|
||||
targets: tocElement,
|
||||
duration: 200,
|
||||
easing: 'linear',
|
||||
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;
|
||||
// Expand sidebar on post detail page by default, when post has a toc.
|
||||
const hasTOC = document.querySelector('.post-toc');
|
||||
@ -591,7 +569,7 @@ NexT.utils = {
|
||||
}
|
||||
},
|
||||
|
||||
activateSidebarPanel: function(index) {
|
||||
activateSidebarPanel: function (index) {
|
||||
const duration = 200;
|
||||
const sidebar = document.querySelector('.sidebar-inner');
|
||||
const panel = document.querySelector('.sidebar-panel-container');
|
||||
@ -601,25 +579,25 @@ NexT.utils = {
|
||||
|
||||
window.anime({
|
||||
duration,
|
||||
targets : panel,
|
||||
easing : 'linear',
|
||||
opacity : 0,
|
||||
targets: panel,
|
||||
easing: 'linear',
|
||||
opacity: 0,
|
||||
translateY: [0, -20],
|
||||
complete : () => {
|
||||
complete: () => {
|
||||
// Prevent adding TOC to Overview if Overview was selected when close & open sidebar.
|
||||
sidebar.classList.replace(activeClassName[1 - index], activeClassName[index]);
|
||||
window.anime({
|
||||
duration,
|
||||
targets : panel,
|
||||
easing : 'linear',
|
||||
opacity : [0, 1],
|
||||
targets: panel,
|
||||
easing: 'linear',
|
||||
opacity: [0, 1],
|
||||
translateY: [-20, 0]
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
getStyle: function(src, parent) {
|
||||
getStyle: function (src, parent) {
|
||||
const link = document.createElement('link');
|
||||
link.setAttribute('rel', 'stylesheet');
|
||||
link.setAttribute('type', 'text/css');
|
||||
@ -628,7 +606,7 @@ NexT.utils = {
|
||||
(parent || document.head).appendChild(link);
|
||||
},
|
||||
|
||||
getScript: function(src, options = {}, legacyCondition) {
|
||||
getScript: function (src, options = {}, legacyCondition) {
|
||||
if (typeof options === 'function') {
|
||||
return this.getScript(src, {
|
||||
condition: legacyCondition
|
||||
@ -680,7 +658,7 @@ NexT.utils = {
|
||||
});
|
||||
},
|
||||
|
||||
loadComments: function(selector, legacyCallback) {
|
||||
loadComments: function (selector, legacyCallback) {
|
||||
if (legacyCallback) {
|
||||
return this.loadComments(selector).then(legacyCallback);
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{{- $ft := .Site.Params.footer }}
|
||||
{{ if $ft.translate }}
|
||||
<div class="google-translate">
|
||||
<div id="gtranslate" class="google-translate">
|
||||
<i class="fa fa-language"></i>
|
||||
<div id="google_translate_element"></div>
|
||||
</div>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<div class="tool-buttons" >
|
||||
<div id="goto-comments" class="button goto-comments" title="{{ T "ToolBtns.comment" }}">
|
||||
<i class="fas fa-comments"></i>
|
||||
</div>
|
||||
<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" }}">
|
||||
<i class="fas fa-comments"></i>
|
||||
</div>
|
||||
{{ 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>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user