mirror of
https://github.com/next-theme/hexo-theme-next.git
synced 2026-01-17 18:22:33 +00:00
Fix compatibility issue with iOS 10-12
This commit is contained in:
parent
8a5643b220
commit
6e602213e7
@ -1,13 +1,3 @@
|
||||
.sidebar {
|
||||
background: $black-deep;
|
||||
bottom: 0;
|
||||
if (!hexo-config('back2top.sidebar')) {
|
||||
box-shadow: inset 0 2px 6px black;
|
||||
}
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.sidebar-inner {
|
||||
color: $grey-dark;
|
||||
padding: $sidebar-padding 10px;
|
||||
|
||||
@ -29,6 +29,13 @@ if (hexo-config('sidebar.position') == 'right') {
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background: $black-deep;
|
||||
bottom: 0;
|
||||
if (!hexo-config('back2top.sidebar')) {
|
||||
box-shadow: inset 0 2px 6px black;
|
||||
}
|
||||
position: fixed;
|
||||
top: 0;
|
||||
transition: all $transition-ease-out;
|
||||
width: $sidebar-desktop;
|
||||
z-index: $zindex-2;
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
bottom: initial;
|
||||
box-shadow: none;
|
||||
margin-top: $sidebar-offset;
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
top: $sidebar-offset;
|
||||
width: $sidebar-desktop;
|
||||
|
||||
@ -3,13 +3,13 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const algoliaSettings = CONFIG.algolia;
|
||||
const { indexName, appID, apiKey } = algoliaSettings;
|
||||
const input = document.querySelector('.search-input');
|
||||
|
||||
let search = instantsearch({
|
||||
indexName,
|
||||
searchClient : algoliasearch(appID, apiKey),
|
||||
searchFunction: helper => {
|
||||
let searchInput = document.querySelector('.search-input');
|
||||
if (searchInput.value) {
|
||||
if (input.value) {
|
||||
helper.search();
|
||||
}
|
||||
}
|
||||
@ -98,7 +98,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
document.querySelectorAll('.popup-trigger').forEach(element => {
|
||||
element.addEventListener('click', () => {
|
||||
document.body.classList.add('search-active');
|
||||
document.querySelector('.search-input').focus();
|
||||
setTimeout(() => input.focus(), 500);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@ -251,7 +251,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
document.querySelectorAll('.popup-trigger').forEach(element => {
|
||||
element.addEventListener('click', () => {
|
||||
document.body.classList.add('search-active');
|
||||
input.focus();
|
||||
// Wait for search-popup animation to complete
|
||||
setTimeout(() => input.focus(), 500);
|
||||
if (!isfetched) fetchData();
|
||||
});
|
||||
});
|
||||
|
||||
@ -131,7 +131,6 @@ NexT.utils = {
|
||||
},
|
||||
|
||||
registerScrollPercent: function() {
|
||||
const THRESHOLD = 50;
|
||||
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.
|
||||
@ -142,13 +141,23 @@ NexT.utils = {
|
||||
const contentVisibilityHeight = docHeight > winHeight ? docHeight - winHeight : document.body.scrollHeight - winHeight;
|
||||
const scrollPercent = Math.min(100 * window.scrollY / contentVisibilityHeight, 100);
|
||||
if (backToTop) {
|
||||
backToTop.classList.toggle('back-to-top-on', window.scrollY > THRESHOLD);
|
||||
backToTop.classList.toggle('back-to-top-on', Math.round(scrollPercent) >= 5);
|
||||
backToTop.querySelector('span').innerText = Math.round(scrollPercent) + '%';
|
||||
}
|
||||
if (readingProgressBar) {
|
||||
readingProgressBar.style.width = scrollPercent.toFixed(2) + '%';
|
||||
}
|
||||
}
|
||||
if (!Array.isArray(NexT.utils.sections)) return;
|
||||
let index = NexT.utils.sections.findIndex(element => {
|
||||
return element && element.getBoundingClientRect().top > 0;
|
||||
});
|
||||
if (index === -1) {
|
||||
index = NexT.utils.sections.length - 1;
|
||||
} else if (index > 0) {
|
||||
index--;
|
||||
}
|
||||
this.activateNavByIndex(index);
|
||||
});
|
||||
|
||||
backToTop && backToTop.addEventListener('click', () => {
|
||||
@ -224,12 +233,10 @@ NexT.utils = {
|
||||
},
|
||||
|
||||
registerSidebarTOC: function() {
|
||||
const navItems = document.querySelectorAll('.post-toc li');
|
||||
const sections = [...navItems].map(element => {
|
||||
const link = element.querySelector('a.nav-link');
|
||||
const target = document.getElementById(decodeURI(link.getAttribute('href')).replace('#', ''));
|
||||
this.sections = [...document.querySelectorAll('.post-toc li a.nav-link')].map(element => {
|
||||
const target = document.getElementById(decodeURI(element.getAttribute('href')).replace('#', ''));
|
||||
// TOC item animation navigate.
|
||||
link.addEventListener('click', event => {
|
||||
element.addEventListener('click', event => {
|
||||
event.preventDefault();
|
||||
const offset = target.getBoundingClientRect().top + window.scrollY;
|
||||
window.anime({
|
||||
@ -241,66 +248,29 @@ NexT.utils = {
|
||||
});
|
||||
return target;
|
||||
});
|
||||
},
|
||||
|
||||
activateNavByIndex: function(index) {
|
||||
const target = document.querySelectorAll('.post-toc li a.nav-link')[index];
|
||||
if (!target || target.classList.contains('active-current')) return;
|
||||
|
||||
document.querySelectorAll('.post-toc .active').forEach(element => {
|
||||
element.classList.remove('active', 'active-current');
|
||||
});
|
||||
target.classList.add('active', 'active-current');
|
||||
let parent = target.parentNode;
|
||||
while (!parent.matches('.post-toc')) {
|
||||
if (parent.matches('li')) parent.classList.add('active');
|
||||
parent = parent.parentNode;
|
||||
}
|
||||
// Scrolling to center active TOC element if TOC content is taller then viewport.
|
||||
const tocElement = document.querySelector('.post-toc-wrap');
|
||||
function activateNavByIndex(target) {
|
||||
if (target.classList.contains('active-current')) return;
|
||||
|
||||
document.querySelectorAll('.post-toc .active').forEach(element => {
|
||||
element.classList.remove('active', 'active-current');
|
||||
});
|
||||
target.classList.add('active', 'active-current');
|
||||
let parent = target.parentNode;
|
||||
while (!parent.matches('.post-toc')) {
|
||||
if (parent.matches('li')) parent.classList.add('active');
|
||||
parent = parent.parentNode;
|
||||
}
|
||||
// Scrolling to center active TOC element if TOC content is taller then viewport.
|
||||
window.anime({
|
||||
targets : tocElement,
|
||||
duration : 200,
|
||||
easing : 'linear',
|
||||
scrollTop: tocElement.scrollTop - (tocElement.offsetHeight / 2) + target.getBoundingClientRect().top - tocElement.getBoundingClientRect().top
|
||||
});
|
||||
}
|
||||
|
||||
function findIndex(entries) {
|
||||
let index = 0;
|
||||
let entry = entries[index];
|
||||
if (entry.boundingClientRect.top > 0) {
|
||||
index = sections.indexOf(entry.target);
|
||||
return index === 0 ? 0 : index - 1;
|
||||
}
|
||||
for (; index < entries.length; index++) {
|
||||
if (entries[index].boundingClientRect.top <= 0) {
|
||||
entry = entries[index];
|
||||
} else {
|
||||
return sections.indexOf(entry.target);
|
||||
}
|
||||
}
|
||||
return sections.indexOf(entry.target);
|
||||
}
|
||||
|
||||
function createIntersectionObserver(marginTop) {
|
||||
marginTop = Math.floor(marginTop + 10000);
|
||||
let intersectionObserver = new IntersectionObserver((entries, observe) => {
|
||||
let scrollHeight = document.documentElement.scrollHeight + 100;
|
||||
if (scrollHeight > marginTop) {
|
||||
observe.disconnect();
|
||||
createIntersectionObserver(scrollHeight);
|
||||
return;
|
||||
}
|
||||
let index = findIndex(entries);
|
||||
activateNavByIndex(navItems[index]);
|
||||
}, {
|
||||
rootMargin: marginTop + 'px 0px -100% 0px',
|
||||
threshold : 0
|
||||
});
|
||||
sections.forEach(element => {
|
||||
element && intersectionObserver.observe(element);
|
||||
});
|
||||
}
|
||||
createIntersectionObserver(document.documentElement.scrollHeight);
|
||||
window.anime({
|
||||
targets : tocElement,
|
||||
duration : 200,
|
||||
easing : 'linear',
|
||||
scrollTop: tocElement.scrollTop - (tocElement.offsetHeight / 2) + target.getBoundingClientRect().top - tocElement.getBoundingClientRect().top
|
||||
});
|
||||
},
|
||||
|
||||
supportsPDFs: function() {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user