Skip to content

Commit

Permalink
fix: 将不必要的方法执行统一，非文章页面不执行
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lete114
Lete114 committed Apr 23, 2022
1 parent ce16123 commit 6c8a07b
Showing 1 changed file with 108 additions and 113 deletions.
221 changes: 108 additions & 113 deletions source/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,6 @@ var html
var mask
var mobileNav

// 代码框
function addCodeBlock() {
var codeBlock = $queryAll('figure.highlight')
codeBlock.forEach(function (item) {
var lang = item.classList[1]
lang = lang == 'plaintext' ? 'code' : lang
var ele = `<div class='code-block' lang='${lang}'>
<span class='clipboard'><i class='fa fa-clipboard'></i></span>
</div>`
item.insertAdjacentHTML('afterbegin', ele)
})
}

// table wrap
function tableWrap() {
var table = $queryAll('.post-content>table,.content>table')
Expand All @@ -23,65 +10,6 @@ function tableWrap() {
})
}

// fancybox
function fancyboxFn() {
if(!$id('post')) return
getScript($config.CDN.fancyboxJs, function () {
const imgAll = $queryAll('.post-content img')
imgAll.forEach((ele) => ele.setAttribute('data-fancybox', ''))
var link = document.createElement('link')
link.rel = 'stylesheet'
link.type = 'text/css'
link.href = $config.CDN.fancyboxCss
document.head.appendChild(link)
})
}

// 代码块折叠
function codeBlockExpand() {
if (!$config.codeBlockExpand || !$config.codeBlockExpand.enable) return
var CodeBlock = $queryAll('figure.highlight')
// 定义高度
var height = $config.codeBlockExpand.height
// 获取当前页面的所有的代码块 循环判断符合条件的折叠
for (var i = 0; i < CodeBlock.length; i++) {
if (CodeBlock[i].clientHeight > height) {
CodeBlock[i].style = 'max-height: ' + height + 'px'
/**
* 插入html元素
* beforeBegin：插入到标签开始前
* afterBegin:插入到标签开始标记之后
* beforeEnd:插入到标签结束标记前
* afterEnd:插入到标签结束标记后
*/
CodeBlock[i].insertAdjacentHTML('beforeend', '<div class="show-btn"><i class="fas fa-angle-down"></i></div>')
}
}
// 展开
$queryAll('.show-btn').forEach(function (item) {
item.onclick = function () {
var child = item.childNodes[0] // 获取子节点
if (child.className == 'fas fa-angle-down') {
child.classList.remove('fa-angle-down')
child.classList.add('fa-angle-up')
item.parentNode.style = '' //清除父节点的样式
} else {
child.classList.remove('fa-angle-up')
child.classList.add('fa-angle-down')
item.parentNode.style = 'max-height: ' + height + 'px'
item.previousElementSibling.style = ''
// 获取当前页面滚动条纵坐标的位置
scrollTop = document.documentElement.scrollTop || document.body.scrollTop
var nodeBottom = item.getBoundingClientRect().bottom // 获取当前元素底部距离可见部分的距离
var CodeBlockBottom = nodeBottom + scrollTop, // 当前代码块底部距离顶部距离
CodeBlockHeight = $config.codeBlockExpand.height, // 获取代码块超过多少数值折叠代码块
CodeBlockScrollTop = $config.codeBlockExpand.scrollTop // 获取代码块关闭折叠后滚动返回代码块顶部的距离
window.scrollTo(0, CodeBlockBottom - CodeBlockHeight - CodeBlockScrollTop)
}
}
})
}

// 打开侧边导航栏
function openMobile() {
var openNav = $query('.open-nav')
Expand All @@ -95,25 +23,6 @@ function openMobile() {
}
}

// 打开目录
function showToc() {
var openToc = $id('open-toc')
var toc = $id('toc-wrap')
if (!openToc || !toc) return
openToc.onclick = function () {
if (parseInt(toc.style.opacity)) {
// 关闭
toc.style.animation = 'toc-close .3s'
setTimeout(function () {
toc.style = "opacity:0;animation:'';right: ''"
}, 150)
} else {
// 打开
toc.style = 'opacity:1;right:30px;animation: toc-open .3s'
}
}
}

// 关闭所有正在打开的弹窗(搜索框、侧边栏)
function closeAll() {
// 搜索框缩放样式
Expand Down Expand Up @@ -206,40 +115,126 @@ function scrollFn() {
)
}

// 代码块复制
function codeCopy() {
$queryAll('figure.highlight').forEach(function (item) {
// 获取所有代码块
// firstChild: 获取代码块中的第一个子元素
// childNodes: 返回当前元素的所有子元素(包括:before和:after)
var copy = item.firstChild.childNodes[1]
copy.onclick = function () {
var selection = window.getSelection()
selection.selectAllChildren(item.querySelector('.code'))
navigator.clipboard ? navigator.clipboard.writeText(selection.toString()) : document.execCommand('copy')
selection.removeAllRanges()
copy.innerHTML = '<i class="fa fa-check" style="color:green"></i>'
setTimeout(function () {
copy.innerHTML = '<i class="fa fa-clipboard"></i>'
}, 2000)
// 只有文章页才会执行
function articlePage() {
if (!$id('post')) return
;(function () {
// 代码框
var codeBlock = $queryAll('figure.highlight')
codeBlock.forEach(function (item) {
var lang = item.classList[1]
lang = lang == 'plaintext' ? 'code' : lang
var ele = `<div class='code-block' lang='${lang}'>
<span class='clipboard'><i class='fa fa-clipboard'></i></span>
</div>`
item.insertAdjacentHTML('afterbegin', ele)
})
})()
;(function () {
// fancybox
getScript($config.CDN.fancyboxJs, function () {
const imgAll = $queryAll('.post-content img')
imgAll.forEach((ele) => ele.setAttribute('data-fancybox', ''))
var link = document.createElement('link')
link.rel = 'stylesheet'
link.type = 'text/css'
link.href = $config.CDN.fancyboxCss
document.head.appendChild(link)
})
})()
;(function () {
// 代码块折叠
if (!$config.codeBlockExpand || !$config.codeBlockExpand.enable) return
var CodeBlock = $queryAll('figure.highlight')
// 定义高度
var height = $config.codeBlockExpand.height
// 获取当前页面的所有的代码块 循环判断符合条件的折叠
for (var i = 0; i < CodeBlock.length; i++) {
if (CodeBlock[i].clientHeight > height) {
CodeBlock[i].style = 'max-height: ' + height + 'px'
/**
* 插入html元素
* beforeBegin：插入到标签开始前
* afterBegin:插入到标签开始标记之后
* beforeEnd:插入到标签结束标记前
* afterEnd:插入到标签结束标记后
*/
CodeBlock[i].insertAdjacentHTML('beforeend', '<div class="show-btn"><i class="fas fa-angle-down"></i></div>')
}
}
})
// 展开
$queryAll('.show-btn').forEach(function (item) {
item.onclick = function () {
var child = item.childNodes[0] // 获取子节点
if (child.className == 'fas fa-angle-down') {
child.classList.remove('fa-angle-down')
child.classList.add('fa-angle-up')
item.parentNode.style = '' //清除父节点的样式
} else {
child.classList.remove('fa-angle-up')
child.classList.add('fa-angle-down')
item.parentNode.style = 'max-height: ' + height + 'px'
item.previousElementSibling.style = ''
// 获取当前页面滚动条纵坐标的位置
scrollTop = document.documentElement.scrollTop || document.body.scrollTop
var nodeBottom = item.getBoundingClientRect().bottom // 获取当前元素底部距离可见部分的距离
var CodeBlockBottom = nodeBottom + scrollTop, // 当前代码块底部距离顶部距离
CodeBlockHeight = $config.codeBlockExpand.height, // 获取代码块超过多少数值折叠代码块
CodeBlockScrollTop = $config.codeBlockExpand.scrollTop // 获取代码块关闭折叠后滚动返回代码块顶部的距离
window.scrollTo(0, CodeBlockBottom - CodeBlockHeight - CodeBlockScrollTop)
}
}
})
})()
;(function () {
// 打开目录
var openToc = $id('open-toc')
var toc = $id('toc-wrap')
if (!openToc || !toc) return
openToc.onclick = function () {
if (parseInt(toc.style.opacity)) {
// 关闭
toc.style.animation = 'toc-close .3s'
setTimeout(function () {
toc.style = "opacity:0;animation:'';right: ''"
}, 150)
} else {
// 打开
toc.style = 'opacity:1;right:30px;animation: toc-open .3s'
}
}
})()
;(function () {
// 代码块复制
$queryAll('figure.highlight').forEach(function (item) {
// 获取所有代码块
// firstChild: 获取代码块中的第一个子元素
// childNodes: 返回当前元素的所有子元素(包括:before和:after)
var copy = item.firstChild.childNodes[1]
copy.onclick = function () {
var selection = window.getSelection()
selection.selectAllChildren(item.querySelector('.code'))
navigator.clipboard ? navigator.clipboard.writeText(selection.toString()) : document.execCommand('copy')
selection.removeAllRanges()
copy.innerHTML = '<i class="fa fa-check" style="color:green"></i>'
setTimeout(function () {
copy.innerHTML = '<i class="fa fa-clipboard"></i>'
}, 2000)
}
})
})()
}

// 执行所有函数
function exeAllFn() {
html = document.getElementsByTagName('html')[0]
mask = $id('mask')
mobileNav = $id('mobile-nav')
addCodeBlock() // 添加代码框
articlePage() // 只有文章页才会执行
tableWrap() // 添加table外围
fancyboxFn() // 图片灯箱
codeBlockExpand() // 代码块折叠
openMobile() // 打开手机端导航栏
showToc() // 打开目录
closeAll() // 关闭所有弹窗
DarkMode() // 深色模式
scrollFn() // 滚动事件
codeCopy() // 代码块复杂
}
window.onload = exeAllFn

0 comments on commit 6c8a07b

Please sign in to comment.