perf: optimized first screen height setting

This commit is contained in:
XPoet 2022-10-12 11:02:06 +08:00
parent c0eb63d484
commit fa59429226
4 changed files with 14 additions and 89 deletions

View File

@ -8,12 +8,6 @@
<i class="fas fa-search-minus"></i> <i class="fas fa-search-minus"></i>
</li> </li>
<!--
<li class="tools-item tool-expand-width flex-center">
<i class="fas fa-up-right-and-down-left-from-center"></i>
</li>
-->
<li class="tools-item tool-dark-light-toggle flex-center"> <li class="tools-item tool-dark-light-toggle flex-center">
<i class="fas fa-moon"></i> <i class="fas fa-moon"></i>
</li> </li>

View File

@ -11,6 +11,7 @@ $first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(--
position relative position relative
box-sizing border-box box-sizing border-box
width 100% width 100%
height 100vh
overflow hidden overflow hidden
background url($first-screen-img) center center / cover no-repeat background url($first-screen-img) center center / cover no-repeat

View File

@ -61,13 +61,6 @@ $tools-item-border-radius = 0.1rem
opacity 0 opacity 0
transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear") transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear")
.tool-expand-width {
+keep-tablet() {
display none
}
}
&.show { &.show {
transform translateX(0) transform translateX(0)
opacity 1 opacity 1

View File

@ -22,10 +22,10 @@ KEEP.initUtils = () => {
hasToc: false, hasToc: false,
initData() { initData() {
const {scroll, first_screen} = KEEP.theme_config.style const { scroll, first_screen } = KEEP.theme_config.style
this.isHasScrollProgressBar = scroll.progress_bar.enable === true this.isHasScrollProgressBar = scroll.progress_bar.enable === true
this.isHasScrollPercent = scroll.percent.enable === true this.isHasScrollPercent = scroll.percent.enable === true
const {enable, header_transparent} = first_screen const { enable, header_transparent } = first_screen
this.isHeaderTransparent = enable === true && header_transparent === true this.isHeaderTransparent = enable === true && header_transparent === true
}, },
@ -132,58 +132,6 @@ KEEP.initUtils = () => {
}) })
}, },
// toggle content area width
contentAreaWidthAdjust() {
const toolExpandDom = document.querySelector('.tool-expand-width')
const headerContentDom = document.querySelector('.header-content')
const mainContentDom = document.querySelector('.main-content')
const iconDom = toolExpandDom.querySelector('i')
const defaultMaxWidth = '928px'
const expandMaxWidth = '90%'
let headerMaxWidth = defaultMaxWidth
let isExpand = false
if (
KEEP.theme_config.style.first_screen.enable === true &&
window.location.pathname === '/'
) {
headerMaxWidth = parseInt(defaultMaxWidth) * 1.2 + 'px'
}
const setPageWidth = (isExpand) => {
KEEP.styleStatus.isExpandPageWidth = isExpand
KEEP.setStyleStatus()
if (isExpand) {
iconDom.classList.remove('fa-up-right-and-down-left-from-center')
iconDom.classList.add('fa-down-left-and-up-right-to-center')
headerContentDom.style.maxWidth = expandMaxWidth
mainContentDom.style.maxWidth = expandMaxWidth
} else {
iconDom.classList.remove('fa-down-left-and-up-right-to-center')
iconDom.classList.add('fa-up-right-and-down-left-from-center')
headerContentDom.style.maxWidth = headerMaxWidth
mainContentDom.style.maxWidth = defaultMaxWidth
}
}
const initPageWidth = () => {
const styleStatus = KEEP.getStyleStatus()
if (styleStatus) {
isExpand = styleStatus.isExpandPageWidth
setPageWidth(isExpand)
}
}
initPageWidth()
toolExpandDom.addEventListener('click', () => {
isExpand = !isExpand
setPageWidth(isExpand)
})
},
// go comment anchor // go comment anchor
goComment() { goComment() {
this.goComment_dom = document.querySelector('.go-comment') this.goComment_dom = document.querySelector('.go-comment')
@ -200,11 +148,6 @@ KEEP.initUtils = () => {
return dom ? dom.getBoundingClientRect().height : 0 return dom ? dom.getBoundingClientRect().height : 0
}, },
// init first screen height
initFirstScreenHeight() {
this.firstScreen_dom && (this.firstScreen_dom.style.height = this.innerHeight + 'px')
},
// init has TOC // init has TOC
initHasToc() { initHasToc() {
const tocNavDoms = document.querySelectorAll('.post-toc-wrap .post-toc li') const tocNavDoms = document.querySelectorAll('.post-toc-wrap .post-toc li')
@ -406,7 +349,7 @@ KEEP.initUtils = () => {
const init = () => { const init = () => {
// tooltip // tooltip
document.querySelectorAll('.tooltip').forEach((element) => { document.querySelectorAll('.tooltip').forEach((element) => {
const {content, offsetX, offsetY} = element.dataset const { content, offsetX, offsetY } = element.dataset
let style = '' let style = ''
let sTop = '' let sTop = ''
@ -443,7 +386,7 @@ KEEP.initUtils = () => {
const loadImg = (img, imgLoaded) => { const loadImg = (img, imgLoaded) => {
const temp = new Image() const temp = new Image()
const {src} = img.dataset const { src } = img.dataset
temp.src = src temp.src = src
temp.onload = () => { temp.onload = () => {
img.src = src img.src = src
@ -453,7 +396,7 @@ KEEP.initUtils = () => {
} }
document.querySelectorAll('.tooltip-img').forEach((dom, idx) => { document.querySelectorAll('.tooltip-img').forEach((dom, idx) => {
const {imgUrl, name} = dom.dataset const { imgUrl, name } = dom.dataset
if (imgUrl) { if (imgUrl) {
const imgDomClass = `tooltip-img-${name}` const imgDomClass = `tooltip-img-${name}`
const nameIdx = `${name}_${idx}` const nameIdx = `${name}_${idx}`
@ -500,18 +443,12 @@ KEEP.initUtils = () => {
// global font adjust // global font adjust
KEEP.utils.globalFontAdjust() KEEP.utils.globalFontAdjust()
// adjust content area width
// KEEP.utils.contentAreaWidthAdjust()
// go comment // go comment
KEEP.utils.goComment() KEEP.utils.goComment()
// init page height handle // init page height handle
KEEP.utils.initPageHeightHandle() KEEP.utils.initPageHeightHandle()
// init first screen height
KEEP.utils.initFirstScreenHeight()
// check whether TOC exists // check whether TOC exists
KEEP.utils.initHasToc() KEEP.utils.initHasToc()