Snippet Zone

selectAll Thoughts

```
const lookup = new WeakMap() 
```
```
 
```
```
let id = 0;
```
```
 
```

export const els = selectAll(document.body)

export const parentOf = el => lookup.get(el)

```
 
```
```
export function selectAll(parent) {
```

  const els = { id, el: parent, all: {} }

  const allEls = [...parent.querySelectorAll('*')]

```
 
```
```
  id++
```
```
 
```
```
  for (let i in allEls) {
```
```
    const el = allEls[i]
```
```
 
```
```
    // any element can lookup `els`
```
```
    lookup.set(el, els)
```
```
 
```

    const tag = el.tagName.toLowerCase()

```
 
```
```
    if (el.id) {
```
```
      els[el.id] = el
```
```
 
```
```
      tag === 'template' &&
```
```
        (els[el.id + 'Tmpl'] = () => {
```
```
          const instanceEl = el.content
```
```
            .cloneNode(true)
```
```
            .firstElementChild
```
```
          return selectAll(
```
```
            instanceEl
```
```
          )
```
```
        })
```
```
    }
```
```
 
```
```
    if (el.classList.length > 0) {
```
```
      const name = el.classList[0]
```
```
 
```
```
      if (!els[name]) { 
```
```
        els[name] = el
```
```
        els.all[name] = [el]
```
```
      } else {
```
```
        els.all[name].push(el)
```
```
      }
```
```
    }
```
```
  }
```
```
  return els;
```
```
}
```

Whenever I code a vanilla gui for some personal project/experiment I write some variation of this. I did this one a few days back to see how it would work with template tags.

February 12, 2022

// tricks // ui

Big Radio Button

```
document.body.innerHTML = `
```
```
  <p>Click/tap the radio button:</p>
```

  <input type="radio" style="transform:translate(20px, 30px) scale(4);background:red">

```
`;
```

I feel like at some point this didn’t work… nice to know it does now.

It will look different from browser to browser – as radio buttons do.

January 28, 2022

// tricks // ui

Drag Svg Circles

document.addEventListener('touchmove', (e) => e.preventDefault(), {

```
  passive: false,
```
```
});
```
```
 
```

// this is just lazy - obviously goes in your stylesheet.... :P

```
document.body.innerHTML += `
```
```
<style>
```
```
  body, html {
```
```
    padding: 0;
```
```
    height: 100%;
```
```
    margin: 0;
```
```
  }
```
```
</style>
```
```
`;
```
```
 
```

const temp = document.createElement('div');

temp.innerHTML = `<svg width="100%" height="100%" viewBox="0 0 500 500"></svg>`;

```
 
```

const svg = document.body.appendChild(temp.querySelector('svg'));

```
 
```
```
const CIRCLE_NUM = 4;
```
```
 
```

// make some randomly positioned circles

```
for (let i = 0; i < CIRCLE_NUM; i++) {
```
```
  const x = Math.random() * 150 + 150;
```
```
  const y = Math.random() * 150 + 150;
```
```
  svg.innerHTML += `<circle 
```
```
    cx="${x}" cy="${y}" r="60" 
```

    stroke="#000" fill="rgba(81, 121, 200, 0.3)"

```
    style="cursor:pointer" />`;
```
```
}
```
```
 
```
```
function touch(e) {
```
```
  const pt = svg.createSVGPoint();
```
```
  pt.x = e.clientX;
```
```
  pt.y = e.clientY;
```

  return pt.matrixTransform(svg.getScreenCTM().inverse());

```
}
```
```
 
```
```
let down, ox, oy, curr;
```

document.addEventListener('pointerdown', (e) => {

```
  down = true;
```
```
  if (e.target.tagName === 'circle') {
```
```
    curr = e.target;
```
```
    const { x, y } = touch(e);
```
```
    ox = curr.cx.baseVal.value - x;
```
```
    oy = curr.cy.baseVal.value - y;
```
```
  }
```
```
});
```
```
 
```

document.addEventListener('pointermove', (e) => {

```
  if (down && curr) {
```
```
    const { x, y } = touch(e);
```
```
    curr.cx.baseVal.value = x + ox;
```
```
    curr.cy.baseVal.value = y + oy;
```
```
  }
```
```
});
```
```
 
```

document.addEventListener('pointerup', (e) => {

```
  down = false;
```
```
  curr = null;
```
```
});
```

Drag some svg circles on mobile and desktop…

January 23, 2022

// javascript // svg // ui

Confirm Background Color

```
const btn = document.body.appendChild(
```
```
  document.createElement('button')
```
```
)
```
```
btn.innerHTML = 'click me'
```
```
btn.style.fontSize = '2em'
```
```
btn.style.cursor = 'pointer'
```
```
btn.addEventListener('click', e => {
```

  if (confirm('Do you want to change the background color?')) {

```
    const deg = Math.random() * 360
```

    document.body.style.backgroundColor = `hsl(${deg}deg, 50%, 50%)`

```
  }
```
```
})
```

Change background color with a call to confirm

December 29, 2021

// javascript // ui

Select All Text contentEditable

```
<div style="border:solid 1px #D31444"
```
```
     contenteditable="true"
```

     onclick="document.execCommand('selectAll', false, null)">some text...</div>

When clicking on an editable node, select all existing text…

Quick test version…

```
document.body.innerHTML += `
```

  <div id="el" style="border:solid 1px #D31444"

    contenteditable="true">some text...</div>`

```
 
```
```
el.addEventListener('click', () => {
```

  document.execCommand('selectAll', false, null)

```
})
```

December 24, 2021

// html // javascript // tricks // ui

Older Posts

Newer Posts

selectAll Thoughts

Big Radio Button

Drag Svg Circles

Confirm Background Color

Select All Text contentEditable

Recent

Archive