new css switcher

[jimmywarting]

Hi 👋

I tough that the added dropdown (<select>) where too intrusive or out of place and not really that keyboard friendly.
the page was jumping a lot between switching teams and the dropdown select was changing a lot.

so i tried to go ahead and create a non intrusive selector in a new popup window using <select multiple> 😜
yea that old school dropdown! it have better keyboard navigation cuz it's inlined and you don't need to open up the dropdown every time. and you can move this popup around.

even created a tiny little auto switcher to change theme every x sec

const hybrid = 'bamboo basic bolt brutalist centigram concrete holiday missing-style mvp new neat ok pico simple spcss superstylin vanilla yamb'
.split(/\s+/).sort()
const solid = 'a11yana axist bahunya almond bare base bonsai bullframe caramel caiuss centurion chota cardinal classless clmaterial codify comet concise cutestrap flat-ui bulma fluidity furtive generic gd github-markdown gutenberg hack hello html-starterkit hyp kathamo koochak kraken kube lemon lit lotus hiq markdown marx cirrus mercury min milligram mini minimal minimal-stylesheet mobi motherplate mu mui no-class normalize oh-my-css pandoc-scholar paper papier pavilion picnic preface roble pure sakura sanitize materialize propeller material primer latex scooter semantic-ui shoelace siimple skeleton skeleton-framework skeleton-plus snack spectre style stylize tacit tent terminal tui vital water tachyons wing writ yorha thao ads-medium ads-notebook ads-tufte attri-bright-light-green attri-midnight-green attri-dark-forest-green attri-dark-fairy-pink attri-light-fairy-pink awsm-default awsm-black awsm-bigstone awsm-gondola awsm-mischka awsm-pastelpink awsm-pearllusta awsm-tasman awsm-white md-air md-modest md-retro md-splendor w3c-chocolate boot-readable boot-cosmo boot-cyborg boot-darkly boot-journal boot-paper w3c-midnight w3c-modernist w3c-oldstyle boot-cerulean boot-flatly boot-lumen boot-sandstone boot-slate boot-spacelab boot-superhero boot-yeti w3c-steely w3c-swiss w3c-traditional w3c-ultramarine ads-gazette'
.split(/\s+/).sort()
const responsive = []
// .split(/\s+/).sort()

const all = [...new Set([...hybrid, ...solid])].sort()

const $$ = (tag, attr) => Object.assign(document.createElement(tag), attr)
const $ = (tag, attr) => Object.assign(document.createElement(tag), attr)

// get window size / position from css-switcher
const pos = localStorage.getItem('css-switcher')
const [x, y, w, h] = pos?.split(',') || [0, 0, 200, 200]

const popup = open('about:blank', 'css-switcher', `left=${x},top=${y},width=${w},height=${h}`)

popup?.document.head.append($$('meta', {
  name: 'color-scheme',
  content: 'dark light'
}))

popup.document.title = 'css-switcher'

// this dummy template literal function like provide good IDE support with syntax highlighting
// in many cases, guess we have Lit.js to thanks for this. (?)
const html = x => x.join('')

popup.document.body.innerHTML = html`
  <style>
    /* set html & body to 100% width and height */
    /* and set the body to display items as grid */
    /* where the 2nd div is as tight as possible */
    html, body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: system-ui;
      box-sizing: border-box;
      display: grid;
      grid-template-rows: 1fr auto;
      grid-template-columns: 1fr;
      grid-template-areas: "select" "footer";
    }
    select {
      padding: 20px;
      margin: 0;
      border: 0;
      outline: 0;
      width: 100%;
      height: 100%;
    }
    p {
      text-align: center;
    }
  </style>
  <select autofocus multiple>
    <optgroup id="hybrid" label="Supports prefer-color"></optgroup>
    <optgroup id="responsive" label="Responsive -ness">
      <option value="TODO" disabled>(TODO)</option>
    </optgroup>
    <optgroup id="all" label="All styles"></optgroup>
  </select>
  <p>
    AutoSwitch every <input type="number" id="seconds" value="" placeholder="10s" min="0" max="999" step="1" autofocus>
  </p>
`

const select = popup.document.querySelector('select')
const sHybrid = select.querySelector('#hybrid')
const sResponsive = select.querySelector('#responsive')
const sAll = select.querySelector('#all')

// Disable all other stylesheets on the page
for (const style of Array.from(document.styleSheets)) {
  style.disabled = true
}

const link = document.createElement('link')
link.rel = 'stylesheet'
document.head.append(link)
function changeCSS (css) {
  link.href = `https://dohliam.github.io/dropin-minimal-css/min/${css}.min.css`
}

const capitalize = s => s.replace(/^(.)/, (_, l) => l.toUpperCase())

// Add all stylesheets to the first multiselect
for (const css of hybrid) {
  const option = $$('option', { value: css, label: capitalize(css) })
  sHybrid.append(option)
}

for (const css of responsive) {
  const option = $$('option', { value: css, label: capitalize(css) })
  sResponsive.append(option)
}

for (const css of all) {
  const option = $$('option', { value: css, label: capitalize(css) })
  sAll.append(option)
}

// select the first option
changeCSS(select.value = select.options[0].value)

// Store the windows position/size in local storage so it can be restored
// on subsequent visits when the popup is resized or moved
popup.onresize = 
popup.onunload = 
popup.onmove = () => {
  localStorage.setItem('css-switcher', [
    popup.screenX,
    popup.screenY,
    popup.outerWidth,
    popup.outerHeight
  ].join(','))
}

// Close the popup when either window or popup is closed or reloaded
popup?.addEventListener('unload', () => popup.close())
addEventListener('unload', () => popup.close())

select.onchange = () => {
  const css = Array.from(select.selectedOptions).map(o => o.value)
  // if only one option is selected, change the css
  if (css.length === 1) {
    changeCSS(css[0])
  }
}

// AutoSwitch every X seconds
const autoSwitch = popup.document.querySelector('#seconds')
let interval = 0

autoSwitch.oninput = () => {
  clearInterval(interval)
  if (!autoSwitch.value) return
  
  interval = setInterval(() => {
    select.selectedIndex += 1
    if (select.selectedIndex === -1) {
      select.selectedIndex = 0
    }
    select.onchange()
  }, autoSwitch.value * 1000)
}

(it's not the fanciest javascript code i have ever created, it was just something i quickly put togheter)

anyhow it's using strict syntax, and so there is no undefined variabels anywhere now in this so the bookmarklet script can be done easier: now you just need to have javascript:import('https://dohliam.github.io/dropin-minimal-css/switcher.jsl')

---

I wanted the css to be kind of categorized by those who support prefer color and can satisfy ppl like me who prefer dark mode

and then i also saw that someone asked for those who are response also ( #40 ) so i added a category for them two in the optgroup (but it's empty atm)

[jimmywarting]

to categorize prefer color i just fetched every css and looked if it included the word prefer-color