yangxiangyuan
69 lines
3.4 KiB
JavaScript
69 lines
3.4 KiB
JavaScript
;(function(){
|
|
const CloudTheme = {
|
|
init(){
|
|
this.observeLists()
|
|
this.bindRipple()
|
|
this.observeCards()
|
|
this.initNavToggle()
|
|
this.initThemeToggle()
|
|
},
|
|
onSectionSwitch(){},
|
|
observeLists(){
|
|
const ids=['ecs-body','vas-body','rn-body']
|
|
ids.forEach(id=>{
|
|
const el=document.getElementById(id)
|
|
if(!el) return
|
|
const mo=new MutationObserver(muts=>{
|
|
muts.forEach(m=>{
|
|
m.addedNodes.forEach(n=>{ if(n.nodeType===1) n.classList.add('fade-in') })
|
|
})
|
|
})
|
|
mo.observe(el,{childList:true})
|
|
})
|
|
},
|
|
bindRipple(){
|
|
document.body.addEventListener('pointerdown',e=>{
|
|
const t=e.target.closest('.btn')
|
|
if(!t || !document.body.classList.contains('theme-cloud')) return
|
|
const r=document.createElement('span')
|
|
r.className='ripple'
|
|
const rect=t.getBoundingClientRect()
|
|
const size=Math.max(rect.width,rect.height)
|
|
r.style.width=r.style.height=size+'px'
|
|
r.style.left=(e.clientX-rect.left-size/2)+'px'
|
|
r.style.top=(e.clientY-rect.top-size/2)+'px'
|
|
t.appendChild(r)
|
|
setTimeout(()=>{ try{ r.remove() }catch{} },420)
|
|
},{passive:true})
|
|
},
|
|
observeCards(){
|
|
const cards=[...document.querySelectorAll('body.theme-cloud .panel.card')]
|
|
const io=new IntersectionObserver(entries=>{
|
|
entries.forEach(en=>{ if(en.isIntersecting){ en.target.style.boxShadow='var(--shadow)' } else { en.target.style.boxShadow='none' } })
|
|
})
|
|
cards.forEach(c=>io.observe(c))
|
|
},
|
|
initNavToggle(){
|
|
const key='cloud_nav_visible'
|
|
const btn=document.getElementById('cloud-toggle-nav')
|
|
const eye=`<svg width="16" height="16" viewBox="0 0 24 24"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12Z" fill="none" stroke="currentColor" stroke-width="2"/><circle cx="12" cy="12" r="3" fill="currentColor"/></svg>`
|
|
const setVisible=(v)=>{ document.body.classList.toggle('nav-visible', !!v); if(btn) { btn.setAttribute('aria-pressed', v?'true':'false'); btn.title=v?'隐藏导航':'显示导航'; btn.innerHTML=eye } }
|
|
const initVal=localStorage.getItem(key)==='1'
|
|
setVisible(initVal)
|
|
if(btn) btn.addEventListener('click',()=>{ const cur=document.body.classList.contains('nav-visible'); const next=!cur; localStorage.setItem(key, next?'1':'0'); setVisible(next) })
|
|
},
|
|
initThemeToggle(){
|
|
const key='cloud_theme'
|
|
const btn=document.getElementById('cloud-toggle-theme')
|
|
const moon=`<svg width="16" height="16" viewBox="0 0 24 24"><path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 1 0 9.79 9.79Z" fill="currentColor"/></svg>`
|
|
const sun=`<svg width="16" height="16" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4" fill="currentColor"/><path d="M12 2v3M12 19v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M2 12h3M19 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12" stroke="currentColor" stroke-width="2"/></svg>`
|
|
const apply=(mode)=>{ document.body.setAttribute('data-theme', mode); if(btn) btn.innerHTML=mode==='dark'?moon:sun }
|
|
const init=localStorage.getItem(key) || 'dark'
|
|
apply(init)
|
|
if(btn) btn.addEventListener('click',()=>{ const cur=document.body.getAttribute('data-theme')||'dark'; const next=cur==='dark'?'light':'dark'; localStorage.setItem(key,next); apply(next) })
|
|
}
|
|
}
|
|
window.CloudTheme=CloudTheme
|
|
if(document.body && document.body.classList.contains('theme-cloud')) { CloudTheme.init() }
|
|
})();
|