perf: optimized first screen height setting
This commit is contained in:
XPoet
parent
c0eb63d484
commit
fa59429226
|
|
@ -8,12 +8,6 @@
|
|||
<i class="fas fa-search-minus"></i>
|
||||
</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">
|
||||
<i class="fas fa-moon"></i>
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ $first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(--
|
|||
position relative
|
||||
box-sizing border-box
|
||||
width 100%
|
||||
height 100vh
|
||||
overflow hidden
|
||||
background url($first-screen-img) center center / cover no-repeat
|
||||
|
||||
|
|
|
|||
|
|
@ -61,13 +61,6 @@ $tools-item-border-radius = 0.1rem
|
|||
opacity 0
|
||||
transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear")
|
||||
|
||||
.tool-expand-width {
|
||||
+keep-tablet() {
|
||||
display none
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.show {
|
||||
transform translateX(0)
|
||||
opacity 1
|
||||
|
|
|
|||
|
|
@ -22,10 +22,10 @@ KEEP.initUtils = () => {
|
|||
hasToc: false,
|
||||
|
||||
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.isHasScrollPercent = scroll.percent.enable === true
|
||||
const {enable, header_transparent} = first_screen
|
||||
const { enable, header_transparent } = first_screen
|
||||
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
|
||||
goComment() {
|
||||
this.goComment_dom = document.querySelector('.go-comment')
|
||||
|
|
@ -200,11 +148,6 @@ KEEP.initUtils = () => {
|
|||
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
|
||||
initHasToc() {
|
||||
const tocNavDoms = document.querySelectorAll('.post-toc-wrap .post-toc li')
|
||||
|
|
@ -406,7 +349,7 @@ KEEP.initUtils = () => {
|
|||
const init = () => {
|
||||
// tooltip
|
||||
document.querySelectorAll('.tooltip').forEach((element) => {
|
||||
const {content, offsetX, offsetY} = element.dataset
|
||||
const { content, offsetX, offsetY } = element.dataset
|
||||
|
||||
let style = ''
|
||||
let sTop = ''
|
||||
|
|
@ -443,7 +386,7 @@ KEEP.initUtils = () => {
|
|||
|
||||
const loadImg = (img, imgLoaded) => {
|
||||
const temp = new Image()
|
||||
const {src} = img.dataset
|
||||
const { src } = img.dataset
|
||||
temp.src = src
|
||||
temp.onload = () => {
|
||||
img.src = src
|
||||
|
|
@ -453,7 +396,7 @@ KEEP.initUtils = () => {
|
|||
}
|
||||
|
||||
document.querySelectorAll('.tooltip-img').forEach((dom, idx) => {
|
||||
const {imgUrl, name} = dom.dataset
|
||||
const { imgUrl, name } = dom.dataset
|
||||
if (imgUrl) {
|
||||
const imgDomClass = `tooltip-img-${name}`
|
||||
const nameIdx = `${name}_${idx}`
|
||||
|
|
@ -500,18 +443,12 @@ KEEP.initUtils = () => {
|
|||
// global font adjust
|
||||
KEEP.utils.globalFontAdjust()
|
||||
|
||||
// adjust content area width
|
||||
// KEEP.utils.contentAreaWidthAdjust()
|
||||
|
||||
// go comment
|
||||
KEEP.utils.goComment()
|
||||
|
||||
// init page height handle
|
||||
KEEP.utils.initPageHeightHandle()
|
||||
|
||||
// init first screen height
|
||||
KEEP.utils.initFirstScreenHeight()
|
||||
|
||||
// check whether TOC exists
|
||||
KEEP.utils.initHasToc()
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue