hugo-theme-even/src/js/even.js

168 lines
4.3 KiB
JavaScript
Raw Normal View History

2017-08-27 14:38:42 +00:00
'use strict'
var Even = {}
Even.backToTop = function () {
var $backToTop = $('#back-to-top')
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$backToTop.fadeIn(1000)
} else {
$backToTop.fadeOut(1000)
}
})
$backToTop.click(function () {
$('body,html').animate({ scrollTop: 0 })
})
}
Even.mobileNavbar = function () {
var $mobileNav = $('#mobile-navbar')
var $mobileNavIcon = $('.mobile-navbar-icon')
var slideout = new Slideout({
'panel': document.getElementById('mobile-panel'),
'menu': document.getElementById('mobile-menu'),
'padding': 180,
'tolerance': 70
})
slideout.disableTouch()
$mobileNavIcon.click(function () {
slideout.toggle()
})
slideout.on('beforeopen', function () {
$mobileNav.addClass('fixed-open')
$mobileNavIcon.addClass('icon-click').removeClass('icon-out')
})
slideout.on('beforeclose', function () {
$mobileNav.removeClass('fixed-open')
$mobileNavIcon.addClass('icon-out').removeClass('icon-click')
})
$('#mobile-panel').on('touchend', function () {
slideout.isOpen() && $mobileNavIcon.click()
})
}
Even.toc = function () {
var SPACING = 20
var $toc = $('.post-toc')
var $footer = $('.post-footer')
if ($toc.length) {
var minScrollTop = $toc.offset().top - SPACING
var maxScrollTop = $footer.offset().top - $toc.height() - SPACING
var tocState = {
start: {
'position': 'absolute',
'top': minScrollTop
},
process: {
'position': 'fixed',
'top': SPACING
},
end: {
'position': 'absolute',
'top': maxScrollTop
}
}
$(window).scroll(function () {
var scrollTop = $(window).scrollTop()
if (scrollTop < minScrollTop) {
$toc.css(tocState.start)
} else if (scrollTop > maxScrollTop) {
$toc.css(tocState.end)
} else {
$toc.css(tocState.process)
}
})
}
var HEADERFIX = 30
var $toclink = $('.toc-link')
var $headerlink = $('.headerlink')
var headerlinkTop = $.map($headerlink, function (link) {
return $(link).offset().top
})
$(window).scroll(function () {
var scrollTop = $(window).scrollTop()
for (var i = 0; i < $toclink.length; i++) {
var isLastOne = i + 1 === $toclink.length
var currentTop = headerlinkTop[i] - HEADERFIX
var nextTop = isLastOne ? Infinity : headerlinkTop[i + 1] - HEADERFIX
if (currentTop < scrollTop && scrollTop <= nextTop) {
$($toclink[i]).addClass('active')
} else {
$($toclink[i]).removeClass('active')
}
}
})
}
Even.fancybox = function () {
if ($.fancybox) {
$('.post-content').each(function () {
2017-08-27 14:38:42 +00:00
$(this).find('img').each(function () {
2017-09-06 09:20:16 +00:00
$(this).wrap(`<a class="fancybox" href="${this.src}" data-fancybox="gallery" data-caption="${this.title}"></a>`)
2017-08-27 14:38:42 +00:00
})
})
$('.fancybox').fancybox({
2017-09-06 09:20:16 +00:00
selector: '.fancybox',
protect: true
2017-08-27 14:38:42 +00:00
})
}
}
Even.highlight = function () {
const blocks = document.querySelectorAll('pre code')
for (const block of blocks) {
const classList = block.classList
const rootElement = block.parentElement
const lineCodes = block.innerHTML.split(/\n/).slice(0, -1)
const lineLength = lineCodes.length
let codeLineHtml = ''
for (let i = 0; i < lineLength; i++) {
codeLineHtml += `<div class="line">${i + 1}</div>`
}
let codeHtml = ''
for (const lineCode of lineCodes) {
codeHtml += `<div class="line">${lineCode}</div>`
}
classList.add('highlight')
const figure = document.createElement('figure')
figure.classList = classList
figure.innerHTML = `<table><tbody><tr><td class="gutter"><pre>${codeLineHtml}</pre></td><td class="code"><pre>${codeHtml}</pre></td></tr></tbody></table>`
rootElement.parentElement.replaceChild(figure, rootElement)
}
}
Even.beforeToc = function () {
const links = document.querySelectorAll('#TableOfContents a')
for (const link of links) link.classList.add('toc-link')
for (const num of [1, 2, 3, 4, 5, 6]) {
const headers = document.querySelectorAll('.post-content>h' + num)
for (const header of headers) {
header.innerHTML = `<a href="#${header.id}" class="headerlink" title="${header.innerHTML}"></a>${header.innerHTML}`
}
}
}
export {Even}