biss/hexo-theme-butterfly
1
0
Fork 0
mirror of https://github.com/jerryc127/hexo-theme-butterfly.git synced 2026-04-16 19:40:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

breaking change: 重構 gallery 標籤外掛

Browse Source 
improvement: 首頁社交圖標左右邊距調整
feat: 文章版權增加圖標
improvement: 重構 main.js 代碼
improvement: 優化 pjax 下的性能
fix: 修復子目錄下,pjax 跳轉 404 錯誤
feat: getScript 增加 attribute 配置
improvement: 優化手機端 toc 打開和關閉特效
improvement: 文章進入特效改為 transform, 優化 stylus
improvement: 目錄側邊欄出現滾動條時，元素不會被擠壓
feat: 文章左右對齊
improvement: 處理 waline 的 url 後面多 / 導致跨域的問題
fix: 修復夜間模式下，小屏幕的toc 滾動條顏色不明顯的 bug
fix: 修復設置字體超過17px時，toc 裏面的邊框異常的 bug
improvement: 優化語言文件部分用詞
improvement: disqus 和 disqusjs 的評論數獲取不到時，顯示為 0
improvement: disqusjs 的評論數改為 api 獲取
improvement: 代碼優化
improvement: 更新 plugins.yml
This commit is contained in:
Jerry
2023-08-06 18:43:39 +08:00
Unverified
parent 347f605def
commit 775942ae3e
63 changed files with 1267 additions and 1113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

653
source/js/main.js
View File

@@ -4,9 +4,7 @@ document.addEventListener('DOMContentLoaded', function () {
const adjustMenu = init => {
const getAllWidth = ele => {
let width = 0
ele.length && Array.from(ele).forEach(i => { width += i.offsetWidth })
return width
return Array.from(ele).reduce((width, i) => width + i.offsetWidth, 0)
}
if (init) {
@@ -16,15 +14,8 @@ document.addEventListener('DOMContentLoaded', function () {
$nav = document.getElementById('nav')
}
let hideMenuIndex = ''
if (window.innerWidth <= 768) hideMenuIndex = true
else hideMenuIndex = headerContentWidth > $nav.offsetWidth - 120
if (hideMenuIndex) {
$nav.classList.add('hide-menu')
} else {
$nav.classList.remove('hide-menu')
}
const hideMenuIndex = window.innerWidth <= 768 || headerContentWidth > $nav.offsetWidth - 120
$nav.classList.toggle('hide-menu', hideMenuIndex)
}
// 初始化header
@@ -56,17 +47,19 @@ document.addEventListener('DOMContentLoaded', function () {
* 首頁top_img底下的箭頭
*/
const scrollDownInIndex = () => {
const $scrollDownEle = document.getElementById('scroll-down')
$scrollDownEle && $scrollDownEle.addEventListener('click', function () {
const handleScrollToDest = () => {
btf.scrollToDest(document.getElementById('content-inner').offsetTop, 300)
})
}
const $scrollDownEle = document.getElementById('scroll-down')
$scrollDownEle && btf.addEventListenerPjax($scrollDownEle, 'click', handleScrollToDest)
}
/**
* 代碼
* 只適用於Hexo默認的代碼渲染
*/
const addHighlightTool = function () {
const addHighlightTool = () => {
const highLight = GLOBAL_CONFIG.highlight
if (!highLight) return
@@ -79,7 +72,7 @@ document.addEventListener('DOMContentLoaded', function () {
const isPrismjs = plugin === 'prismjs'
const highlightShrinkClass = isHighlightShrink === true ? 'closed' : ''
const highlightShrinkEle = isHighlightShrink !== undefined ? `<i class="fas fa-angle-down expand ${highlightShrinkClass}"></i>` : ''
const highlightShrinkEle = isHighlightShrink !== undefined ? '<i class="fas fa-angle-down expand"></i>' : ''
const highlightCopyEle = highlightCopy ? '<div class="copy-notice"></div><i class="fas fa-paste copy-button"></i>' : ''
const copy = (text, ctx) => {
@@ -103,7 +96,7 @@ document.addEventListener('DOMContentLoaded', function () {
}
// click events
const highlightCopyFn = (ele) => {
const highlightCopyFn = ele => {
const $buttonParent = ele.parentNode
$buttonParent.classList.add('copy-true')
const selection = window.getSelection()
@@ -118,14 +111,8 @@ document.addEventListener('DOMContentLoaded', function () {
$buttonParent.classList.remove('copy-true')
}
const highlightShrinkFn = (ele) => {
const $nextEle = [...ele.parentNode.children].slice(1)
ele.firstChild.classList.toggle('closed')
if (btf.isHidden($nextEle[$nextEle.length - 1])) {
$nextEle.forEach(e => { e.style.display = 'block' })
} else {
$nextEle.forEach(e => { e.style.display = 'none' })
}
const highlightShrinkFn = ele => {
ele.classList.toggle('closed')
}
const highlightToolsFn = function (e) {
@@ -138,14 +125,14 @@ document.addEventListener('DOMContentLoaded', function () {
this.classList.toggle('expand-done')
}
function createEle (lang, item, service) {
const createEle = (lang, item, service) => {
const fragment = document.createDocumentFragment()
if (isShowTool) {
const hlTools = document.createElement('div')
hlTools.className = `highlight-tools ${highlightShrinkClass}`
hlTools.innerHTML = highlightShrinkEle + lang + highlightCopyEle
hlTools.addEventListener('click', highlightToolsFn)
btf.addEventListenerPjax(hlTools, 'click', highlightToolsFn)
fragment.appendChild(hlTools)
}
@@ -153,7 +140,7 @@ document.addEventListener('DOMContentLoaded', function () {
const ele = document.createElement('div')
ele.className = 'code-expand-btn'
ele.innerHTML = '<i class="fas fa-angle-double-down"></i>'
ele.addEventListener('click', expandCode)
btf.addEventListenerPjax(ele, 'click', expandCode)
fragment.appendChild(ele)
}
@@ -177,7 +164,7 @@ document.addEventListener('DOMContentLoaded', function () {
}
})
} else {
$figureHighlight.forEach(function (item) {
$figureHighlight.forEach(item => {
if (highlightLang) {
let langName = item.getAttribute('class').split(' ')[1]
if (langName === 'plain' || langName === undefined) langName = 'Code'
@@ -193,16 +180,14 @@ document.addEventListener('DOMContentLoaded', function () {
/**
* PhotoFigcaption
*/
function addPhotoFigcaption () {
document.querySelectorAll('#article-container img').forEach(function (item) {
const parentEle = item.parentNode
const addPhotoFigcaption = () => {
document.querySelectorAll('#article-container img').forEach(item => {
const altValue = item.title || item.alt
if (altValue && !parentEle.parentNode.classList.contains('justified-gallery')) {
const ele = document.createElement('div')
ele.className = 'img-alt is-center'
ele.textContent = altValue
parentEle.insertBefore(ele, item.nextSibling)
}
if (!altValue) return
const ele = document.createElement('div')
ele.className = 'img-alt is-center'
ele.textContent = altValue
item.insertAdjacentElement('afterend', ele)
})
}
@@ -216,97 +201,173 @@ document.addEventListener('DOMContentLoaded', function () {
/**
* justified-gallery 圖庫排版
*/
const runJustifiedGallery = function (ele) {
const htmlStr = arr => {
let str = ''
const replaceDq = str => str.replace(/"/g, '&quot;') // replace double quotes to &quot;
arr.forEach(i => {
const alt = i.alt ? `alt="${replaceDq(i.alt)}"` : ''
const title = i.title ? `title="${replaceDq(i.title)}"` : ''
str += `<div class="fj-gallery-item"><img src="${i.url}" ${alt + title}"></div>`
})
return str
const fetchUrl = async (url) => {
const response = await fetch(url)
return await response.json()
}
const runJustifiedGallery = (item, data, isButton = false, tabs) => {
const dataLength = data.length
const ig = new InfiniteGrid.JustifiedInfiniteGrid(item, {
gap: 5,
isConstantSize: true,
sizeRange: [150, 600],
useResizeObserver: true,
observeChildren: true,
useTransform: true
// useRecycle: false
})
if (tabs) {
btf.addGlobalFn('igOfTabs', () => { ig.destroy() }, false, tabs)
}
const lazyloadFn = (i, arr, limit) => {
const loadItem = limit
const arrLength = arr.length
if (arrLength > loadItem) i.insertAdjacentHTML('beforeend', htmlStr(arr.splice(0, loadItem)))
else {
i.insertAdjacentHTML('beforeend', htmlStr(arr))
i.classList.remove('lazyload')
}
return arrLength > loadItem ? loadItem : arrLength
}
const replaceDq = str => str.replace(/"/g, '&quot;') // replace double quotes to &quot;
const fetchUrl = async (url) => {
const response = await fetch(url)
return await response.json()
}
const getItems = (nextGroupKey, count) => {
const nextItems = []
const startCount = (nextGroupKey - 1) * count
const runJustifiedGallery = (item, arr) => {
if (!item.classList.contains('lazyload')) item.innerHTML = htmlStr(arr)
else {
const limit = item.getAttribute('data-limit')
lazyloadFn(item, arr, limit)
const clickBtnFn = () => {
const lastItemLength = lazyloadFn(item, arr, limit)
fjGallery(item, 'appendImages', item.querySelectorAll(`.fj-gallery-item:nth-last-child(-n+${lastItemLength})`))
btf.loadLightbox(item.querySelectorAll('img'))
lastItemLength < limit && item.nextElementSibling.removeEventListener('click', clickBtnFn)
for (let i = 0; i < count; ++i) {
const num = startCount + i
if (num >= dataLength) {
break
}
item.nextElementSibling.addEventListener('click', clickBtnFn)
const item = data[num]
const alt = item.alt ? `alt="${replaceDq(item.alt)}"` : ''
const title = item.title ? `title="${replaceDq(item.title)}"` : ''
nextItems.push(`<div class="item ">
<img src="${item.url}" data-grid-maintained-target="true" ${alt + title} />
</div>`)
}
btf.initJustifiedGallery(item)
btf.loadLightbox(item.querySelectorAll('img'))
return nextItems
}
const addJustifiedGallery = () => {
ele.forEach(item => {
item.classList.contains('url')
? fetchUrl(item.textContent).then(res => { runJustifiedGallery(item, res) })
: runJustifiedGallery(item, JSON.parse(item.textContent))
})
const buttonText = GLOBAL_CONFIG.infinitegrid.buttonText
const addButton = item => {
const button = document.createElement('button')
button.textContent = buttonText
const buttonFn = e => {
e.target.removeEventListener('click', buttonFn)
e.target.remove()
btf.setLoading.add(item)
appendItem(ig.getGroups().length + 1, 10)
}
button.addEventListener('click', buttonFn)
item.insertAdjacentElement('afterend', button)
}
if (window.fjGallery) {
addJustifiedGallery()
return
const appendItem = (nextGroupKey, count) => {
ig.append(getItems(nextGroupKey, count), nextGroupKey)
}
getCSS(`${GLOBAL_CONFIG.source.justifiedGallery.css}`)
getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`).then(addJustifiedGallery)
const maxGroupKey = Math.ceil(dataLength / 10)
const completeFn = e => {
const { updated, isResize, mounted } = e
if (!updated.length || !mounted.length || isResize) {
return
}
btf.loadLightbox(item.querySelectorAll('img:not(.medium-zoom-image)'))
if (ig.getGroups().length === maxGroupKey) {
btf.setLoading.remove(item)
ig.off('renderComplete', completeFn)
return
}
if (isButton) {
btf.setLoading.remove(item)
addButton(item)
}
}
const requestAppendFn = btf.debounce(e => {
const nextGroupKey = (+e.groupKey || 0) + 1
appendItem(nextGroupKey, 10)
if (nextGroupKey === maxGroupKey) {
ig.off('requestAppend', requestAppendFn)
}
}, 300)
btf.setLoading.add(item)
ig.on('renderComplete', completeFn)
if (isButton) {
appendItem(1, 10)
} else {
ig.on('requestAppend', requestAppendFn)
ig.renderItems()
}
btf.addGlobalFn('justifiedGallery', () => { ig.destroy() })
}
const addJustifiedGallery = async (ele, tabs = false) => {
const init = async () => {
for (const item of ele) {
if (btf.isHidden(item)) continue
if (tabs && item.classList.contains('loaded')) {
item.querySelector('.gallery-items').innerHTML = ''
const button = item.querySelector(':scope > button')
const loadingContainer = item.querySelector(':scope > .loading-container')
button && button.remove()
loadingContainer && loadingContainer.remove()
}
const isButton = item.getAttribute('data-button') === 'true'
const text = item.firstElementChild.textContent
item.classList.add('loaded')
const content = item.getAttribute('data-type') === 'url' ? await fetchUrl(text) : JSON.parse(text)
runJustifiedGallery(item.lastElementChild, content, isButton, tabs)
}
}
if (typeof InfiniteGrid === 'function') {
init()
} else {
await getScript(`${GLOBAL_CONFIG.infinitegrid.js}`)
init()
}
}
/**
* rightside scroll percent
*/
const rightsideScrollPercent = currentTop => {
const perNum = btf.getScrollPercent(currentTop, document.body)
const $goUp = document.getElementById('go-up')
if (perNum < 95) {
$goUp.classList.add('show-percent')
$goUp.querySelector('.scroll-percent').textContent = perNum
const scrollPercent = btf.getScrollPercent(currentTop, document.body)
const goUpElement = document.getElementById('go-up')
if (scrollPercent < 95) {
goUpElement.classList.add('show-percent')
goUpElement.querySelector('.scroll-percent').textContent = scrollPercent
} else {
$goUp.classList.remove('show-percent')
goUpElement.classList.remove('show-percent')
}
}
/**
* 滾動處理
*/
const scrollFn = function () {
const scrollFn = () => {
const $rightside = document.getElementById('rightside')
const innerHeight = window.innerHeight + 56
let initTop = 0
let isChatShow = true
const $header = document.getElementById('page-header')
const isChatBtn = typeof chatBtn !== 'undefined'
const isShowPercent = GLOBAL_CONFIG.percent.rightside
// 當滾動條小于 56 的時候
if (document.body.scrollHeight <= innerHeight) {
$rightside.style.cssText = 'opacity: 1; transform: translateX(-58px)'
$rightside.classList.add('rightside-show')
return
}
@@ -317,50 +378,51 @@ document.addEventListener('DOMContentLoaded', function () {
return result
}
let flag = ''
const scrollTask = btf.throttle(() => {
const currentTop = window.scrollY || document.documentElement.scrollTop
const isDown = scrollDirection(currentTop)
if (currentTop > 56) {
if (flag === '') {
$header.classList.add('nav-fixed')
$rightside.classList.add('rightside-show')
}
if (isDown) {
if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
if (isChatBtn && isChatShow === true) {
window.chatBtn.hide()
isChatShow = false
if (flag !== 'down') {
$header.classList.remove('nav-visible')
isChatBtn && window.chatBtn.hide()
flag = 'down'
}
} else {
if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
if (isChatBtn && isChatShow === false) {
window.chatBtn.show()
isChatShow = true
if (flag !== 'up') {
$header.classList.add('nav-visible')
isChatBtn && window.chatBtn.show()
flag = 'up'
}
}
$header.classList.add('nav-fixed')
if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
$rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
}
} else {
flag = ''
if (currentTop === 0) {
$header.classList.remove('nav-fixed', 'nav-visible')
}
$rightside.style.cssText = "opacity: ''; transform: ''"
$rightside.classList.remove('rightside-show')
}
isShowPercent && rightsideScrollPercent(currentTop)
if (document.body.scrollHeight <= innerHeight) {
$rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
$rightside.classList.add('rightside-show')
}
}, 200)
}, 300)
window.scrollCollect = scrollTask
window.addEventListener('scroll', scrollCollect)
btf.addEventListenerPjax(window, 'scroll', scrollTask, { passive: true })
}
/**
* toc,anchor
*/
const scrollFnToDo = function () {
const scrollFnToDo = () => {
const isToc = GLOBAL_CONFIG_SITE.isToc
const isAnchor = GLOBAL_CONFIG.isAnchor
const $article = document.getElementById('article-container')
@@ -371,37 +433,24 @@ document.addEventListener('DOMContentLoaded', function () {
if (isToc) {
const $cardTocLayout = document.getElementById('card-toc')
$cardToc = $cardTocLayout.getElementsByClassName('toc-content')[0]
$cardToc = $cardTocLayout.querySelector('.toc-content')
$tocLink = $cardToc.querySelectorAll('.toc-link')
$tocPercentage = $cardTocLayout.querySelector('.toc-percentage')
isExpand = $cardToc.classList.contains('is-expand')
window.mobileToc = {
open: () => {
$cardTocLayout.style.cssText = 'animation: toc-open .3s; opacity: 1; right: 55px'
},
// toc元素點擊
const tocItemClickFn = e => {
const target = e.target.closest('.toc-link')
if (!target) return
close: () => {
$cardTocLayout.style.animation = 'toc-close .2s'
setTimeout(() => {
$cardTocLayout.style.cssText = "opacity:''; animation: ''; right: ''"
}, 100)
e.preventDefault()
btf.scrollToDest(btf.getEleTop(document.getElementById(decodeURI(target.getAttribute('href')).replace('#', ''))), 300)
if (window.innerWidth < 900) {
$cardTocLayout.classList.remove('open')
}
}
// toc元素點擊
$cardToc.addEventListener('click', e => {
e.preventDefault()
const target = e.target.classList
if (target.contains('toc-content')) return
const $target = target.contains('toc-link')
? e.target
: e.target.parentElement
btf.scrollToDest(btf.getEleTop(document.getElementById(decodeURI($target.getAttribute('href')).replace('#', ''))), 300)
if (window.innerWidth < 900) {
window.mobileToc.close()
}
})
btf.addEventListenerPjax($cardToc, 'click', tocItemClickFn)
autoScrollToc = item => {
const activePosition = item.getBoundingClientRect().top
@@ -416,9 +465,9 @@ document.addEventListener('DOMContentLoaded', function () {
}
// find head position & add active class
const list = $article.querySelectorAll('h1,h2,h3,h4,h5,h6')
const $articleList = $article.querySelectorAll('h1,h2,h3,h4,h5,h6')
let detectItem = ''
const findHeadPosition = function (top) {
const findHeadPosition = top => {
if (top === 0) {
return false
}
@@ -426,7 +475,7 @@ document.addEventListener('DOMContentLoaded', function () {
let currentId = ''
let currentIndex = ''
list.forEach(function (ele, index) {
$articleList.forEach((ele, index) => {
if (top > btf.getEleTop(ele) - 80) {
const id = ele.id
currentId = id ? '#' + encodeURI(id) : ''
@@ -464,7 +513,7 @@ document.addEventListener('DOMContentLoaded', function () {
}
// main of scroll
window.tocScrollFn = btf.throttle(() => {
const tocScrollFn = btf.throttle(() => {
const currentTop = window.scrollY || document.documentElement.scrollTop
if (isToc && GLOBAL_CONFIG.percent.toc) {
$tocPercentage.textContent = btf.getScrollPercent(currentTop, $article)
@@ -472,21 +521,22 @@ document.addEventListener('DOMContentLoaded', function () {
findHeadPosition(currentTop)
}, 100)
window.addEventListener('scroll', tocScrollFn)
btf.addEventListenerPjax(window, 'scroll', tocScrollFn, { passive: true })
}
const modeChangeFn = mode => {
if (!window.themeChange) {
const handleThemeChange = mode => {
const globalFn = window.globalFn || {}
const themeChange = globalFn.themeChange || {}
if (!themeChange) {
return
}
const turnMode = item => window.themeChange[item](mode)
Object.keys(window.themeChange).forEach(item => {
if (['disqus', 'disqusjs'].includes(item)) {
setTimeout(() => turnMode(item), 300)
Object.keys(themeChange).forEach(key => {
const themeChangeFn = themeChange[key]
if (['disqus', 'disqusjs'].includes(key)) {
setTimeout(() => themeChangeFn(mode), 300)
} else {
turnMode(item)
themeChangeFn(mode)
}
})
}
@@ -495,7 +545,7 @@ document.addEventListener('DOMContentLoaded', function () {
* Rightside
*/
const rightSideFn = {
switchReadMode: () => { // read-mode
readmode: () => { // read mode
const $body = document.body
$body.classList.add('read-mode')
const newEle = document.createElement('button')
@@ -511,74 +561,53 @@ document.addEventListener('DOMContentLoaded', function () {
newEle.addEventListener('click', clickFn)
},
switchDarkMode: () => { // Switch Between Light And Dark Mode
darkmode: () => { // switch between light and dark mode
const willChangeMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
if (willChangeMode === 'dark') {
activateDarkMode()
saveToLocal.set('theme', 'dark', 2)
GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
} else {
activateLightMode()
saveToLocal.set('theme', 'light', 2)
GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
}
modeChangeFn(willChangeMode)
saveToLocal.set('theme', willChangeMode, 2)
handleThemeChange(willChangeMode)
},
showOrHideBtn: (e) => { // rightside 點擊設置 按鈕 展開
const rightsideHideClassList = document.getElementById('rightside-config-hide').classList
rightsideHideClassList.toggle('show')
if (e.classList.contains('show')) {
rightsideHideClassList.add('status')
'rightside-config': item => { // Show or hide rightside-hide-btn
const hideLayout = item.firstElementChild
if (hideLayout.classList.contains('show')) {
hideLayout.classList.add('status')
setTimeout(() => {
rightsideHideClassList.remove('status')
hideLayout.classList.remove('status')
}, 300)
}
e.classList.toggle('show')
hideLayout.classList.toggle('show')
},
scrollToTop: () => { // Back to top
'go-up': () => { // Back to top
btf.scrollToDest(0, 500)
},
hideAsideBtn: () => { // Hide aside
'hide-aside-btn': () => { // Hide aside
const $htmlDom = document.documentElement.classList
const saveStatus = $htmlDom.contains('hide-aside') ? 'show' : 'hide'
saveToLocal.set('aside-status', saveStatus, 2)
$htmlDom.toggle('hide-aside')
},
runMobileToc: () => {
if (window.getComputedStyle(document.getElementById('card-toc')).getPropertyValue('opacity') === '0') window.mobileToc.open()
else window.mobileToc.close()
'mobile-toc-button': () => { // Show mobile toc
document.getElementById('card-toc').classList.toggle('open')
},
toggleChatDisplay: () => {
'chat-btn': () => { // Show chat
window.chatBtnFn()
},
translateLink: () => { // switch between traditional and simplified chinese
window.translateFn.translatePage()
}
}
document.getElementById('rightside').addEventListener('click', function (e) {
const $target = e.target.id ? e.target : e.target.parentNode
switch ($target.id) {
case 'go-up':
rightSideFn.scrollToTop()
break
case 'rightside_config':
rightSideFn.showOrHideBtn($target)
break
case 'mobile-toc-button':
rightSideFn.runMobileToc()
break
case 'readmode':
rightSideFn.switchReadMode()
break
case 'darkmode':
rightSideFn.switchDarkMode()
break
case 'hide-aside-btn':
rightSideFn.hideAsideBtn()
break
case 'chat-btn':
rightSideFn.toggleChatDisplay()
break
default:
break
const $target = e.target.closest('[id]')
if ($target && rightSideFn[$target.id]) {
rightSideFn[$target.id](this)
}
})
@@ -587,24 +616,35 @@ document.addEventListener('DOMContentLoaded', function () {
* 側邊欄sub-menu 展開/收縮
*/
const clickFnOfSubMenu = () => {
document.querySelectorAll('#sidebar-menus .site-page.group').forEach(function (item) {
item.addEventListener('click', function () {
this.classList.toggle('hide')
})
})
const handleClickOfSubMenu = e => {
const target = e.target.closest('.site-page.group')
if (!target) return
target.classList.toggle('hide')
}
document.querySelector('#sidebar-menus .menus_items').addEventListener('click', handleClickOfSubMenu)
}
/**
* 手机端目录点击
*/
const openMobileMenu = () => {
const handleClick = () => { sidebarFn.open() }
btf.addEventListenerPjax(document.getElementById('toggle-menu'), 'click', handleClick)
}
/**
* 複製時加上版權信息
*/
const addCopyright = () => {
const copyright = GLOBAL_CONFIG.copyright
document.body.oncopy = (e) => {
const { limitCount, languages } = GLOBAL_CONFIG.copyright
const handleCopy = (e) => {
e.preventDefault()
const copyFont = window.getSelection(0).toString()
let textFont = copyFont
if (copyFont.length > copyright.limitCount) {
textFont = `${copyFont}\n\n\n${copyright.languages.author}\n${copyright.languages.link}${window.location.href}\n${copyright.languages.source}\n${copyright.languages.info}`
if (copyFont.length > limitCount) {
textFont = `${copyFont}\n\n\n${languages.author}\n${languages.link}${window.location.href}\n${languages.source}\n${languages.info}`
}
if (e.clipboardData) {
return e.clipboardData.setData('text', textFont)
@@ -612,6 +652,8 @@ document.addEventListener('DOMContentLoaded', function () {
return window.clipboardData.setData('text', textFont)
}
}
document.body.addEventListener('copy', handleCopy)
}
/**
@@ -640,114 +682,119 @@ document.addEventListener('DOMContentLoaded', function () {
* table overflow
*/
const addTableWrap = () => {
const $table = document.querySelectorAll('#article-container :not(.highlight) > table, #article-container > table')
if ($table.length) {
$table.forEach(item => {
const $table = document.querySelectorAll('#article-container table')
if (!$table.length) return
$table.forEach(item => {
if (!item.closest('.highlight')) {
btf.wrap(item, 'div', { class: 'table-wrap' })
})
}
}
})
}
/**
* tag-hide
*/
const clickFnOfTagHide = function () {
const $hideInline = document.querySelectorAll('#article-container .hide-button')
if ($hideInline.length) {
$hideInline.forEach(function (item) {
item.addEventListener('click', function (e) {
const $this = this
$this.classList.add('open')
const $fjGallery = $this.nextElementSibling.querySelectorAll('.fj-gallery')
$fjGallery.length && btf.initJustifiedGallery($fjGallery)
})
})
const clickFnOfTagHide = () => {
const hideButtons = document.querySelectorAll('#article-container .hide-button')
if (!hideButtons.length) return
const handleClick = function (e) {
const $this = this
$this.classList.add('open')
const $fjGallery = $this.nextElementSibling.querySelectorAll('.gallery-container')
$fjGallery.length && addJustifiedGallery($fjGallery)
}
}
const tabsFn = {
clickFnOfTabs: function () {
document.querySelectorAll('#article-container .tab > button').forEach(function (item) {
item.addEventListener('click', function (e) {
const $this = this
const $tabItem = $this.parentNode
if (!$tabItem.classList.contains('active')) {
const $tabContent = $tabItem.parentNode.nextElementSibling
const $siblings = btf.siblings($tabItem, '.active')[0]
$siblings && $siblings.classList.remove('active')
$tabItem.classList.add('active')
const tabId = $this.getAttribute('data-href').replace('#', '')
const childList = [...$tabContent.children]
childList.forEach(item => {
if (item.id === tabId) item.classList.add('active')
else item.classList.remove('active')
})
const $isTabJustifiedGallery = $tabContent.querySelectorAll(`#${tabId} .fj-gallery`)
if ($isTabJustifiedGallery.length > 0) {
btf.initJustifiedGallery($isTabJustifiedGallery)
}
}
})
})
},
backToTop: () => {
document.querySelectorAll('#article-container .tabs .tab-to-top').forEach(function (item) {
item.addEventListener('click', function () {
btf.scrollToDest(btf.getEleTop(btf.getParents(this, '.tabs')), 300)
})
})
}
}
const toggleCardCategory = function () {
const $cardCategory = document.querySelectorAll('#aside-cat-list .card-category-list-item.parent i')
if ($cardCategory.length) {
$cardCategory.forEach(function (item) {
item.addEventListener('click', function (e) {
e.preventDefault()
const $this = this
$this.classList.toggle('expand')
const $parentEle = $this.parentNode.nextElementSibling
if (btf.isHidden($parentEle)) {
$parentEle.style.display = 'block'
} else {
$parentEle.style.display = 'none'
}
})
})
}
}
const switchComments = function () {
let switchDone = false
const $switchBtn = document.querySelector('#comment-switch > .switch-btn')
$switchBtn && $switchBtn.addEventListener('click', function () {
this.classList.toggle('move')
document.querySelectorAll('#post-comment > .comment-wrap > div').forEach(function (item) {
if (btf.isHidden(item)) {
item.style.cssText = 'display: block;animation: tabshow .5s'
} else {
item.style.cssText = "display: none;animation: ''"
}
})
if (!switchDone && typeof loadOtherComment === 'function') {
switchDone = true
loadOtherComment()
}
hideButtons.forEach(item => {
item.addEventListener('click', handleClick, { once: true })
})
}
const addPostOutdateNotice = function () {
const data = GLOBAL_CONFIG.noticeOutdate
const tabsFn = () => {
const navTabsElement = document.querySelectorAll('#article-container .tabs')
if (!navTabsElement.length) return
const removeAndAddActiveClass = (elements, detect) => {
Array.from(elements).forEach(element => {
element.classList.remove('active')
if (element === detect || element.id === detect) {
element.classList.add('active')
}
})
}
const addTabNavEventListener = (item, isJustifiedGallery) => {
const navClickHandler = function (e) {
const target = e.target.closest('button')
if (target.classList.contains('active')) return
removeAndAddActiveClass(this.children, target)
this.classList.remove('no-default')
const tabId = target.getAttribute('data-href')
const tabContent = this.nextElementSibling
removeAndAddActiveClass(tabContent.children, tabId)
if (isJustifiedGallery) {
btf.removeGlobalFnEvent('igOfTabs', this)
const justifiedGalleryItems = tabContent.querySelectorAll(`:scope > #${tabId} .gallery-container`)
justifiedGalleryItems.length && addJustifiedGallery(justifiedGalleryItems, this)
}
}
btf.addEventListenerPjax(item.firstElementChild, 'click', navClickHandler)
}
const addTabToTopEventListener = item => {
const btnClickHandler = (e) => {
const target = e.target.closest('button')
if (!target) return
btf.scrollToDest(btf.getEleTop(item), 300)
}
btf.addEventListenerPjax(item.lastElementChild, 'click', btnClickHandler)
}
navTabsElement.forEach(item => {
const isJustifiedGallery = !!item.querySelectorAll('.gallery-container')
addTabNavEventListener(item, isJustifiedGallery)
addTabToTopEventListener(item)
})
}
const toggleCardCategory = () => {
const cardCategory = document.querySelector('#aside-cat-list.expandBtn')
if (!cardCategory) return
const handleToggleBtn = (e) => {
const target = e.target
if (target.nodeName === 'I') {
e.preventDefault()
target.parentNode.classList.toggle('expand')
}
}
btf.addEventListenerPjax(cardCategory, 'click', handleToggleBtn, true)
}
const switchComments = () => {
const switchBtn = document.getElementById('switch-btn')
if (!switchBtn) return
let switchDone = false
const commentContainer = document.getElementById('post-comment')
const handleSwitchBtn = () => {
commentContainer.classList.toggle('move')
if (!switchDone) {
switchDone = true
loadOtherComment()
}
}
btf.addEventListenerPjax(switchBtn, 'click', handleSwitchBtn)
}
const addPostOutdateNotice = () => {
const { limitDay, messagePrev, messageNext, position } = GLOBAL_CONFIG.noticeOutdate
const diffDay = btf.diffDate(GLOBAL_CONFIG_SITE.postUpdate)
if (diffDay >= data.limitDay) {
if (diffDay >= limitDay) {
const ele = document.createElement('div')
ele.className = 'post-outdate-notice'
ele.textContent = data.messagePrev + ' ' + diffDay + ' ' + data.messageNext
ele.textContent = `${messagePrev} ${diffDay} ${messageNext}`
const $targetEle = document.getElementById('article-container')
if (data.position === 'top') {
if (position === 'top') {
$targetEle.insertBefore(ele, $targetEle.firstChild)
} else {
$targetEle.appendChild(ele)
@@ -774,7 +821,7 @@ document.addEventListener('DOMContentLoaded', function () {
const unRefreshFn = function () {
window.addEventListener('resize', () => {
adjustMenu(false)
btf.isHidden(document.getElementById('toggle-menu')) && mobileSidebarOpen && sidebarFn.close()
mobileSidebarOpen && btf.isHidden(document.getElementById('toggle-menu')) && sidebarFn.close()
})
document.getElementById('menu-mask').addEventListener('click', e => { sidebarFn.close() })
@@ -786,7 +833,7 @@ document.addEventListener('DOMContentLoaded', function () {
if (GLOBAL_CONFIG.autoDarkmode) {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
if (saveToLocal.get('theme') !== undefined) return
e.matches ? modeChangeFn('dark') : modeChangeFn('light')
e.matches ? handleThemeChange('dark') : handleThemeChange('light')
})
}
}
@@ -810,16 +857,16 @@ document.addEventListener('DOMContentLoaded', function () {
GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption()
scrollFn()
const $jgEle = document.querySelectorAll('#article-container .fj-gallery')
$jgEle.length && runJustifiedGallery($jgEle)
btf.removeGlobalFnEvent('justifiedGallery')
const galleryContainer = document.querySelectorAll('#article-container .gallery-container')
galleryContainer.length && addJustifiedGallery(galleryContainer)
runLightbox()
addTableWrap()
clickFnOfTagHide()
tabsFn.clickFnOfTabs()
tabsFn.backToTop()
tabsFn()
switchComments()
document.getElementById('toggle-menu').addEventListener('click', () => { sidebarFn.open() })
openMobileMenu()
}
refreshFn()