diff options
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/prototypes/panel-widget-gallery.html | 33 | ||||
| -rw-r--r-- | docs/prototypes/widgets.js | 39 |
2 files changed, 46 insertions, 26 deletions
diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html index 2f703e8..30bf086 100644 --- a/docs/prototypes/panel-widget-gallery.html +++ b/docs/prototypes/panel-widget-gallery.html @@ -1523,38 +1523,23 @@ BOOST.forEach(no=>{const rd=document.getElementById('rd-'+no); el.innerHTML=el.innerHTML.replace(/\b(R\d{2}|N\d{2})\b/g, m=>ids.has(m)?`<a class="xref" href="#card-${m}">${m}</a>`:m);});})(); -/* slide-toggle color choices: track color per state, thumb never changes */ -(function(){const sw=document.querySelector('.switch');if(!sw)return; - const cardEl=sw.closest('.card'); - const ON_OPTS={amber:{dot:'var(--gold-hi)',vars:{'--sw-on-bg':'linear-gradient(180deg,var(--amber-grad-top),var(--gold))','--sw-on-brd':'var(--gold-hi)','--sw-on-ink':'var(--panel)'}}, - green:{dot:'#8fb944',vars:{'--sw-on-bg':'linear-gradient(180deg,#a9c95f,var(--pass))','--sw-on-brd':'#a9c95f','--sw-on-ink':'var(--panel)'}}, - dark:{dot:'#242019',vars:{'--sw-on-bg':'linear-gradient(180deg,#15130f,#242019)','--sw-on-brd':'var(--slate)','--sw-on-ink':'var(--cream)'}}}; - const OFF_OPTS={dark:{dot:'#242019',vars:{'--sw-off-bg':'linear-gradient(180deg,#15130f,#242019)','--sw-off-brd':'var(--slate)'}}, - red:{dot:'var(--fail)',vars:{'--sw-off-bg':'linear-gradient(180deg,#d98a6f,var(--fail))','--sw-off-brd':'var(--fail)'}}}; - const OFFTXT_OPTS={white:{dot:'var(--cream)',vars:{'--sw-off-ink':'var(--cream)'}}, - red:{dot:'#e0523a',vars:{'--sw-off-ink':'#e0523a'}}, - black:{dot:'#14110e',vars:{'--sw-off-ink':'#14110e'}}}; - const THUMB_OPTS={light:{dot:'#d8d2c4',vars:{'--sw-thumb':'radial-gradient(circle at 35% 28%,#f6f2e8,#b0aa9a)'}}, - dark:{dot:'#2c2824',vars:{'--sw-thumb':'radial-gradient(circle at 35% 28%,#4a453e,#16130f)'}}, - chrome:{dot:'#9aa2b4',vars:{'--sw-thumb':'radial-gradient(circle at 35% 28%,#dfe6f2,#6d7484)'}}, - brass:{dot:'#b8944a',vars:{'--sw-thumb':'radial-gradient(circle at 35% 28%,#e2c47a,#8a6a24)'}}}; +/* slide-toggle style chips: demo rig for GW.slideToggle's constructor opts — + the named styles live in GW.slideToggle.STYLES; chips drive setStyle on the live instance */ +(function(){const h=$('card-01')?.gw;if(!h)return; + const cardEl=h.el.closest('.card'); const row=document.createElement('div'); row.className='famchips'; - const group=(label,opts,def)=>{ + const AXES=[['on','on','amber'],['off','off','dark'],['off text','offText','white'],['thumb','thumb','light']]; + for(const [label,axis,def] of AXES){ const g=document.createElement('span'); g.className='fgroup'; const lab=document.createElement('span'); lab.className='lab'; lab.textContent=label; g.appendChild(lab); const chips=[]; - for(const [name,o] of Object.entries(opts)){ + for(const [name,o] of Object.entries(GW.slideToggle.STYLES[axis])){ const b=document.createElement('span'); b.className='fc'+(name===def?' on':''); b.style.background=o.dot; b.title=name; chips.push(b); - b.addEventListener('click',()=>{ - for(const [k,v] of Object.entries(o.vars)) sw.style.setProperty(k,v); + b.addEventListener('click',()=>{h.setStyle(axis,name); chips.forEach(x=>x.classList.toggle('on',x===b));}); g.appendChild(b);} - row.appendChild(g);}; - group('on',ON_OPTS,'amber'); - group('off',OFF_OPTS,'dark'); - group('off text',OFFTXT_OPTS,'white'); - group('thumb',THUMB_OPTS,'light'); + row.appendChild(g);} cardEl.querySelector('.opts').appendChild(row);})(); </script> </body> diff --git a/docs/prototypes/widgets.js b/docs/prototypes/widgets.js index 72bb107..c01972e 100644 --- a/docs/prototypes/widgets.js +++ b/docs/prototypes/widgets.js @@ -114,15 +114,50 @@ const SCREEN_FAMS = { const noop = () => {}; -/* 01 slide toggle — on/off pill. State colors ride CSS vars (--sw-*). */ +/* 01 slide toggle — on/off pill. State colors ride CSS vars (--sw-*). + opts.onStyle / offStyle / offText / thumb pick a named style per axis from + GW.slideToggle.STYLES; defaults match the stylesheet fallbacks. The handle's + setStyle(axis, name) restyles a live instance (the gallery chips use it). */ GW.slideToggle = function (host, opts = {}) { const onChange = opts.onChange || noop; const sw = document.createElement('span'); sw.className = 'switch'; host.appendChild(sw); + const setStyle = (axis, name) => { + const o = (GW.slideToggle.STYLES[axis] || {})[name]; + if (!o) return; + for (const [k, v] of Object.entries(o.vars)) sw.style.setProperty(k, v); + }; + setStyle('on', opts.onStyle || 'amber'); + setStyle('off', opts.offStyle || 'dark'); + setStyle('offText', opts.offText || 'white'); + setStyle('thumb', opts.thumb || 'light'); let on; const set = v => { on = !!v; sw.classList.toggle('on', on); onChange(on, on ? 'ON' : 'OFF'); }; sw.addEventListener('click', () => set(!on)); set(opts.on !== undefined ? opts.on : true); - return { el: sw, get: () => on, set }; + return { el: sw, get: () => on, set, setStyle }; +}; +/* named styles per axis: dot = swatch color for pickers, vars = --sw-* overrides */ +GW.slideToggle.STYLES = { + on: { + amber: { dot: 'var(--gold-hi)', vars: { '--sw-on-bg': 'linear-gradient(180deg,var(--amber-grad-top),var(--gold))', '--sw-on-brd': 'var(--gold-hi)', '--sw-on-ink': 'var(--panel)' } }, + green: { dot: '#8fb944', vars: { '--sw-on-bg': 'linear-gradient(180deg,#a9c95f,var(--pass))', '--sw-on-brd': '#a9c95f', '--sw-on-ink': 'var(--panel)' } }, + dark: { dot: '#242019', vars: { '--sw-on-bg': 'linear-gradient(180deg,#15130f,#242019)', '--sw-on-brd': 'var(--slate)', '--sw-on-ink': 'var(--cream)' } }, + }, + off: { + dark: { dot: '#242019', vars: { '--sw-off-bg': 'linear-gradient(180deg,#15130f,#242019)', '--sw-off-brd': 'var(--slate)' } }, + red: { dot: 'var(--fail)', vars: { '--sw-off-bg': 'linear-gradient(180deg,#d98a6f,var(--fail))', '--sw-off-brd': 'var(--fail)' } }, + }, + offText: { + white: { dot: 'var(--cream)', vars: { '--sw-off-ink': 'var(--cream)' } }, + red: { dot: '#e0523a', vars: { '--sw-off-ink': '#e0523a' } }, + black: { dot: '#14110e', vars: { '--sw-off-ink': '#14110e' } }, + }, + thumb: { + light: { dot: '#d8d2c4', vars: { '--sw-thumb': 'radial-gradient(circle at 35% 28%,#f6f2e8,#b0aa9a)' } }, + dark: { dot: '#2c2824', vars: { '--sw-thumb': 'radial-gradient(circle at 35% 28%,#4a453e,#16130f)' } }, + chrome: { dot: '#9aa2b4', vars: { '--sw-thumb': 'radial-gradient(circle at 35% 28%,#dfe6f2,#6d7484)' } }, + brass: { dot: '#b8944a', vars: { '--sw-thumb': 'radial-gradient(circle at 35% 28%,#e2c47a,#8a6a24)' } }, + }, }; /* 02 console keys — mutually exclusive push buttons; {label, red} per key */ |