yangxiangyuan
41 lines
2.3 KiB
JavaScript
41 lines
2.3 KiB
JavaScript
;(function(){
|
|
const ExpenseTheme = {
|
|
init(){
|
|
this.observeList()
|
|
this.initNavToggle()
|
|
this.initThemeToggle()
|
|
},
|
|
observeList(){
|
|
const el=document.getElementById('ex-body')
|
|
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})
|
|
},
|
|
initNavToggle(){
|
|
const key='expense_nav_visible'
|
|
const btn=document.getElementById('expense-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='expense_theme'
|
|
const btn=document.getElementById('expense-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.ExpenseTheme=ExpenseTheme
|
|
if(document.body && document.body.classList.contains('theme-expense')) { ExpenseTheme.init() }
|
|
})();
|