perf: optimized first screen height setting
This commit is contained in:
parent
c0eb63d484
commit
fa59429226
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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')
|
||||||
|
@ -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()
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue