145 lines
3.7 KiB
TypeScript
145 lines
3.7 KiB
TypeScript
import { useData } from 'vitepress'
|
|
|
|
export function useFlash() {
|
|
const { site, theme } = useData()
|
|
const { base } = site.value
|
|
let { flashEnable, flashColor, bgImg } = theme.value
|
|
if (flashColor === undefined) flashColor = ['0,0,0', '0,0,0']
|
|
if (typeof flashColor === 'string') flashColor = [flashColor, flashColor]
|
|
let flashStyle = ''
|
|
|
|
if (bgImg && flashEnable) {
|
|
const bgImgSrc = (`${base}${bgImg}`).replaceAll('//', '/')
|
|
flashStyle = `
|
|
-webkit-linear-gradient(top,
|
|
rgba(${flashColor[0]}, 0.8) 0%,
|
|
rgba(${flashColor[0]}, 0.2) 20%,
|
|
rgba(${flashColor[0]}, 0) 80%,
|
|
rgba(${flashColor[0]}, 0) 100%
|
|
),
|
|
-webkit-linear-gradient(left,
|
|
rgba(${flashColor[1]}, 0) 0%,
|
|
rgba(${flashColor[1]}, 0) 20%,
|
|
rgba(${flashColor[1]}, 0.2) 80%,
|
|
rgba(${flashColor[1]}, 0.8) 100%),
|
|
url(${bgImgSrc})
|
|
`
|
|
}
|
|
|
|
return {
|
|
flashEnable,
|
|
flashStyle,
|
|
}
|
|
}
|
|
|
|
export function useBackground() {
|
|
const { site, theme } = useData()
|
|
const { base } = site.value
|
|
let { bgImg, bgColor, bgOpacity } = theme.value
|
|
let bgEnable = false
|
|
let bgStyle = ''
|
|
let bgInnerOpacity = 0.3
|
|
if (bgImg) bgEnable = true
|
|
if (bgColor === undefined) bgColor = '0,0,0'
|
|
if (bgOpacity === undefined) bgOpacity = 0.6
|
|
bgInnerOpacity = bgOpacity - 0.3 <= 0 ? 0 : bgOpacity - 0.3
|
|
if (bgEnable) {
|
|
const bgImgSrc = (`${base}${bgImg}`).replaceAll('//', '/')
|
|
bgStyle = `
|
|
-webkit-linear-gradient(top,
|
|
rgba(${bgColor},${bgOpacity}) 0%,
|
|
rgba(${bgColor},${bgInnerOpacity}) 20%,
|
|
rgba(${bgColor},${bgInnerOpacity}) 80%,
|
|
rgba(${bgColor},${bgOpacity}) 100%
|
|
),
|
|
-webkit-linear-gradient(left,
|
|
rgba(${bgColor},${bgOpacity}) 0%,
|
|
rgba(${bgColor},${bgInnerOpacity}) 20%,
|
|
rgba(${bgColor},${bgInnerOpacity}) 80%,
|
|
rgba(${bgColor},${bgOpacity}) 100%),
|
|
url(${bgImgSrc})
|
|
`
|
|
}
|
|
return {
|
|
bgEnable,
|
|
bgStyle,
|
|
}
|
|
}
|
|
|
|
export function useFeatures() {
|
|
const { theme } = useData()
|
|
let { featuresColor } = theme.value
|
|
let ftStyle = 'rgba(255,255,255,0.8)'
|
|
if (typeof featuresColor === 'string') {
|
|
ftStyle = featuresColor
|
|
} else if (typeof featuresColor === 'object') {
|
|
if (featuresColor.length >= 2) {
|
|
ftStyle = `
|
|
linear-gradient(to right,
|
|
${featuresColor[0]},
|
|
${featuresColor[1]}
|
|
)
|
|
`
|
|
}
|
|
}
|
|
return {
|
|
ftStyle,
|
|
}
|
|
}
|
|
|
|
export function useHeroMove() {
|
|
const { theme } = useData()
|
|
const { parallaxEnable } = theme.value
|
|
function heroMove(e: any) {
|
|
document
|
|
.querySelectorAll(
|
|
`
|
|
.VPHomeHero .name,
|
|
.VPHomeHero .text,
|
|
.VPHomeHero .tagline,
|
|
.VPHomeHero .VPButton,
|
|
.VPHome .VPHomeFeatures
|
|
`
|
|
)
|
|
.forEach((h: Element) => {
|
|
const hd: any = h
|
|
const speed: any = hd.getAttribute('data-speed') || 10
|
|
let x = (window.innerWidth - e.pageX * speed) / 100
|
|
let y = (window.innerHeight - e.pageY * speed) / 100
|
|
switch (hd.className.substring(0, 3).toUpperCase()) {
|
|
case 'VPF':
|
|
x /= 8
|
|
y /= 8
|
|
break
|
|
case 'TAG':
|
|
x /= 6
|
|
y /= 6
|
|
break
|
|
case 'TEX':
|
|
x /= 4
|
|
y /= 4
|
|
break
|
|
case 'VPB':
|
|
x /= 2
|
|
y /= 2
|
|
break
|
|
case 'NAM':
|
|
x /= 1
|
|
y /= 1
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
const hds = hd?.style
|
|
if (hds) {
|
|
hds.transform = `translateX(${x}px) translateY(${y}px)`
|
|
hds.transition = 'transform 0.2s ease-out'
|
|
}
|
|
})
|
|
}
|
|
return {
|
|
parallaxEnable,
|
|
heroMove,
|
|
}
|
|
}
|