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

feat: 替換 Justified Gallery 為 flickr-justified-gallery

Browse Source 
feat: 完全移除 jquery
feat: 清除配置文件的CDN, 默認 CDN 不再顯示在 config
feat: 切換夜間模式後, mermaid 也會切換夜間主題
feat: 移除騰訊分析
feat: 移除右下角字體調整按鈕
feat: 本地搜索可處理 json
feat: 右下角按鈕自定義順序
feat: 右小角按鈕 UI 微調
improvement: 手機端更改閲讀模式退出按鈕到右下角
improvement: photofigcaption 和 fancybox 的 figcaption 優先顯示 圖片的title屬性，然後是 alt 屬性
improvement: 首頁ui微調
improvement: 禁止一些瀏覽器會出現點擊左下角按鈕出現放大網頁的行為
improvement: js 優化
fix: 修復窗口大小改變時，導航欄的ui 可能會錯亂的 bug
fix: 修復 pjax 下, twikoo 評論獲取是上一篇評論的 bug
fix: 壓縮 html 代碼後, mermaid 顯示正常
This commit is contained in:
Jerry
2021-10-12 23:27:56 +08:00
Unverified
parent 7e729cff79
commit cb82bfb7b6
34 changed files with 611 additions and 570 deletions
Download Patch File Download Diff File Expand all files Collapse all files

186
source/js/main.js
View File

@@ -1,23 +1,21 @@
document.addEventListener('DOMContentLoaded', function () {
const $blogName = document.getElementById('site-name')
let blogNameWidth = $blogName && $blogName.offsetWidth
const $menusEle = document.querySelector('#menus .menus_items')
let menusWidth = $menusEle && $menusEle.offsetWidth
const $searchEle = document.querySelector('#search-button')
let searchWidth = $searchEle && $searchEle.offsetWidth
let blogNameWidth, menusWidth, searchWidth, $nav, hideMenuIndex, mobileSidebarOpen
const adjustMenu = (change = false) => {
if (change) {
blogNameWidth = $blogName && $blogName.offsetWidth
menusWidth = $menusEle && $menusEle.offsetWidth
searchWidth = $searchEle && $searchEle.offsetWidth
const adjustMenu = (init) => {
if (init) {
blogNameWidth = document.getElementById('site-name').offsetWidth
const $menusEle = document.querySelectorAll('#menus .menus_item')
menusWidth = 0
$menusEle.length && $menusEle.forEach(i => { menusWidth += i.offsetWidth })
const $searchEle = document.querySelector('#search-button')
searchWidth = $searchEle ? $searchEle.offsetWidth : 0
$nav = document.getElementById('nav')
}
const $nav = document.getElementById('nav')
let t
if (window.innerWidth < 768) t = true
else t = blogNameWidth + menusWidth + searchWidth > $nav.offsetWidth - 120
if (t) {
if (window.innerWidth < 768) hideMenuIndex = true
else hideMenuIndex = blogNameWidth + menusWidth + searchWidth > $nav.offsetWidth - 120
if (hideMenuIndex) {
$nav.classList.add('hide-menu')
} else {
$nav.classList.remove('hide-menu')
@@ -26,44 +24,26 @@ document.addEventListener('DOMContentLoaded', function () {
// 初始化header
const initAdjust = () => {
adjustMenu()
document.getElementById('nav').classList.add('show')
adjustMenu(true)
$nav.classList.add('show')
}
// sidebar menus
const sidebarFn = () => {
const $toggleMenu = document.getElementById('toggle-menu')
const $mobileSidebarMenus = document.getElementById('sidebar-menus')
const $menuMask = document.getElementById('menu-mask')
const $body = document.body
function openMobileSidebar () {
const sidebarFn = {
open: () => {
btf.sidebarPaddingR()
$body.style.overflow = 'hidden'
btf.fadeIn($menuMask, 0.5)
$mobileSidebarMenus.classList.add('open')
}
function closeMobileSidebar () {
document.body.style.overflow = 'hidden'
btf.fadeIn(document.getElementById('menu-mask'), 0.5)
document.getElementById('sidebar-menus').classList.add('open')
mobileSidebarOpen = true
},
close: () => {
const $body = document.body
$body.style.overflow = ''
$body.style.paddingRight = ''
btf.fadeOut($menuMask, 0.5)
$mobileSidebarMenus.classList.remove('open')
btf.fadeOut(document.getElementById('menu-mask'), 0.5)
document.getElementById('sidebar-menus').classList.remove('open')
}
$toggleMenu.addEventListener('click', openMobileSidebar)
$menuMask.addEventListener('click', e => {
if ($mobileSidebarMenus.classList.contains('open')) {
closeMobileSidebar()
}
})
window.addEventListener('resize', e => {
if (btf.isHidden($toggleMenu)) {
if ($mobileSidebarMenus.classList.contains('open')) closeMobileSidebar()
}
})
}
/**
@@ -225,7 +205,7 @@ document.addEventListener('DOMContentLoaded', function () {
function addPhotoFigcaption () {
document.querySelectorAll('#article-container img').forEach(function (item) {
const parentEle = item.parentNode
const altValue = item.alt
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'
@@ -237,7 +217,6 @@ document.addEventListener('DOMContentLoaded', function () {
/**
* Lightbox
* It needs to call it after the Justified Gallery done, or the fancybox maybe not work
*/
const runLightbox = () => {
btf.loadLightbox(document.querySelectorAll('#article-container img:not(.no-lightbox)'))
@@ -245,41 +224,28 @@ document.addEventListener('DOMContentLoaded', function () {
/**
* justified-gallery 圖庫排版
* 需要 jQuery
*/
let detectJgJsLoad = false
const runJustifiedGallery = function (ele) {
const $justifiedGallery = $(ele)
const $imgList = $justifiedGallery.find('img')
$imgList.unwrap() // remove <p> tag
if ($imgList.length) {
$imgList.each(function (i, o) {
if ($(o).attr('data-lazy-src')) $(o).attr('src', $(o).attr('data-lazy-src'))
$(o).wrap('<div></div>')
ele.forEach(item => {
const $imgList = item.querySelectorAll('img')
$imgList.forEach(i => {
const dataLazySrc = i.getAttribute('data-lazy-src')
if (dataLazySrc) i.src = dataLazySrc
btf.wrap(i, 'div', { class: 'fj-gallery-item' })
})
}
})
runLightbox()
if (detectJgJsLoad) {
btf.initJustifiedGallery($justifiedGallery)
if (window.fjGallery) {
btf.initJustifiedGallery(ele)
return
}
$('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.justifiedGallery.css}">`)
$.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, () => { btf.initJustifiedGallery($justifiedGallery) })
detectJgJsLoad = true
}
const jqLoadAndRun = () => {
const $jgEle = document.querySelectorAll('#article-container .justified-gallery')
if ($jgEle.length) {
btf.isJqueryLoad(() => {
runJustifiedGallery($jgEle)
})
return
}
runLightbox()
const newEle = document.createElement('link')
newEle.rel = 'stylesheet'
newEle.href = GLOBAL_CONFIG.source.justifiedGallery.css
document.body.appendChild(newEle)
getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`).then(() => { btf.initJustifiedGallery(ele) })
}
/**
@@ -328,7 +294,7 @@ document.addEventListener('DOMContentLoaded', function () {
}
$header.classList.add('nav-fixed')
if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
$rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
$rightside.style.cssText = 'opacity: 0.7; transform: translateX(-58px)'
}
} else {
if (currentTop === 0) {
@@ -338,7 +304,7 @@ document.addEventListener('DOMContentLoaded', function () {
}
if (document.body.scrollHeight <= innerHeight) {
$rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
$rightside.style.cssText = 'opacity: 0.7; transform: translateX(-58px)'
}
}, 200)()
}
@@ -390,9 +356,9 @@ document.addEventListener('DOMContentLoaded', function () {
}
}
const mobileToc = {
window.mobileToc = {
open: () => {
$cardTocLayout.style.cssText = 'animation: toc-open .3s; opacity: 1; right: 45px'
$cardTocLayout.style.cssText = 'animation: toc-open .3s; opacity: 1; right: 55px'
},
close: () => {
@@ -403,11 +369,6 @@ document.addEventListener('DOMContentLoaded', function () {
}
}
document.getElementById('mobile-toc-button').addEventListener('click', () => {
if (window.getComputedStyle($cardTocLayout).getPropertyValue('opacity') === '0') mobileToc.open()
else mobileToc.close()
})
// toc元素點擊
$cardToc.addEventListener('click', (e) => {
e.preventDefault()
@@ -416,7 +377,7 @@ document.addEventListener('DOMContentLoaded', function () {
: e.target.parentElement
btf.scrollToDest(btf.getEleTop(document.getElementById(decodeURI($target.getAttribute('href')).replace('#', ''))), 300)
if (window.innerWidth < 900) {
mobileToc.close()
window.mobileToc.close()
}
})
@@ -512,6 +473,7 @@ document.addEventListener('DOMContentLoaded', function () {
typeof utterancesTheme === 'function' && utterancesTheme()
typeof FB === 'object' && window.loadFBComment()
window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)
typeof runMermaid === 'function' && window.runMermaid()
},
showOrHideBtn: () => { // rightside 點擊設置 按鈕 展開
document.getElementById('rightside-config-hide').classList.toggle('show')
@@ -527,22 +489,9 @@ document.addEventListener('DOMContentLoaded', function () {
$htmlDom.toggle('hide-aside')
},
adjustFontSize: (plus) => {
const fontSizeVal = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('--global-font-size'))
let newValue = ''
if (plus) {
if (fontSizeVal >= 20) return
newValue = fontSizeVal + 1
document.documentElement.style.setProperty('--global-font-size', newValue + 'px')
!document.getElementById('nav').classList.contains('hide-menu') && adjustMenu(true)
} else {
if (fontSizeVal <= 10) return
newValue = fontSizeVal - 1
document.documentElement.style.setProperty('--global-font-size', newValue + 'px')
document.getElementById('nav').classList.contains('hide-menu') && adjustMenu(true)
}
saveToLocal.set('global-font-size', newValue, 2)
runMobileToc: () => {
if (window.getComputedStyle(document.getElementById('card-toc')).getPropertyValue('opacity') === '0') window.mobileToc.open()
else window.mobileToc.close()
}
}
@@ -555,6 +504,9 @@ document.addEventListener('DOMContentLoaded', function () {
case 'rightside_config':
rightSideFn.showOrHideBtn()
break
case 'mobile-toc-button':
rightSideFn.runMobileToc()
break
case 'readmode':
rightSideFn.switchReadMode()
break
@@ -564,12 +516,6 @@ document.addEventListener('DOMContentLoaded', function () {
case 'hide-aside-btn':
rightSideFn.hideAsideBtn()
break
case 'font-plus':
rightSideFn.adjustFontSize(true)
break
case 'font-minus':
rightSideFn.adjustFontSize()
break
default:
break
}
@@ -659,8 +605,8 @@ document.addEventListener('DOMContentLoaded', function () {
const $hideContent = $this.nextElementSibling
$this.classList.toggle('open')
if ($this.classList.contains('open')) {
if ($hideContent.querySelectorAll('.justified-gallery').length > 0) {
btf.initJustifiedGallery($hideContent.querySelectorAll('.justified-gallery'))
if ($hideContent.querySelectorAll('.fj-gallery').length > 0) {
btf.initJustifiedGallery($hideContent.querySelectorAll('.fj-gallery'))
}
}
})
@@ -686,7 +632,7 @@ document.addEventListener('DOMContentLoaded', function () {
if (item.id === tabId) item.classList.add('active')
else item.classList.remove('active')
})
const $isTabJustifiedGallery = $tabContent.querySelectorAll(`#${tabId} .justified-gallery`)
const $isTabJustifiedGallery = $tabContent.querySelectorAll(`#${tabId} .fj-gallery`)
if ($isTabJustifiedGallery.length > 0) {
btf.initJustifiedGallery($isTabJustifiedGallery)
}
@@ -776,8 +722,12 @@ document.addEventListener('DOMContentLoaded', function () {
}
const unRefreshFn = function () {
window.addEventListener('resize', adjustMenu)
window.addEventListener('orientationchange', () => { setTimeout(adjustMenu(true), 100) })
window.addEventListener('resize', () => {
adjustMenu(false)
hideMenuIndex && mobileSidebarOpen && sidebarFn.close()
})
document.getElementById('menu-mask').addEventListener('click', e => { sidebarFn.close() })
clickFnOfSubMenu()
GLOBAL_CONFIG.islazyload && lazyloadImg()
@@ -798,17 +748,21 @@ document.addEventListener('DOMContentLoaded', function () {
}
GLOBAL_CONFIG_SITE.isToc && tocFn()
sidebarFn()
GLOBAL_CONFIG_SITE.isHome && scrollDownInIndex()
addHighlightTool()
GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption()
jqLoadAndRun()
scrollFn()
const $jgEle = document.querySelectorAll('#article-container .fj-gallery')
$jgEle.length && runJustifiedGallery($jgEle)
runLightbox()
addTableWrap()
clickFnOfTagHide()
tabsFn.clickFnOfTabs()
tabsFn.backToTop()
switchComments()
document.getElementById('toggle-menu').addEventListener('click', () => { sidebarFn.open() })
}
refreshFn()