)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

PointerUp Before Click

  1. document.body.innerHTML += 'click/tap anywhere<br>'
  2.  
  3. document.addEventListener('click', () => {
  4.   document.body.innerHTML += 'click<br>'
  5. })
  6.  
  7. document.addEventListener('pointerup', () => {
  8.   document.body.innerHTML += 'pointerup<br>'
  9. })

pointerup fires before click

// dom // events // javascript // touchEvents // ui

Thinking about DOM

  1. const liveData = {}
  2. const dom = new Proxy(liveData, {
  3.   get(o, key) {
  4.     if (o[key]) {
  5.       return o[key]
  6.     } else {
  7.       const fn  = node.bind(null, key)
  8.       return fn
  9.     }
  10.   }
  11. });
  12.  
  13. const tags = {}
  14. const isTag = tag => { 
  15.   if (tags[tag] != null) {
  16.     // already calculated
  17.     return tags[tag]
  18.   }
  19.   const result = !/Unknown/.test(document.createElement(tag) + '')
  20.   tags[tag] = result
  21.   return result
  22. }
  23.  
  24. const click = new WeakMap()
  25.  
  26. function pointerUp(e) { 
  27.   const curr = e.target;
  28.   if (!curr) return
  29.  
  30.   const action = click.get(curr)
  31.   if (action) action(e)
  32.  
  33.   // bubble to parent
  34.   if (curr?.parentNode?.tagName != 'BODY') {
  35.     pointerUp({ target: e.target.parentNode })
  36.   }
  37. }
  38.  
  39. document.addEventListener('pointerup', e => {
  40.   pointerUp(e)
  41. })
  42.  
  43. function attrs(el, props) {
  44.   const keys = Reflect.ownKeys(props)
  45.   for (let i = 0; i < keys.length; i++) {
  46.     const key = keys[i];
  47.     const val = props[key]
  48.     if (typeof val != 'function') {
  49.       el.setAttribute(key, val)
  50.     } else if (key === 'click') {
  51.       click.set(el, val)
  52.     }
  53.   }
  54. }
  55.  
  56. const textarea = document.createElement('textarea')
  57.  
  58. function node(type, ...args) {
  59.   let el;
  60.   const namedEl = isTag(type);
  61.   if (namedEl) {
  62.     el = document.createElement(type)
  63.   } else {
  64.     el = document.createElement('div')
  65.     el.className = type
  66.   }
  67.  
  68.   const leng = args.length
  69.   for (let i = 0; i < leng; i++) {
  70.     const arg = args[i]
  71.     if ((i === 1 || leng === 1)
  72.       && typeof arg === 'string') {
  73.         if (arg.includes('&')) {
  74.           textarea.innerHTML = arg
  75.           el.innerText = textarea.innerHTML
  76.         } else { 
  77.           el.innerText = arg
  78.         }
  79.     } else if (i === 0 && typeof arg === 'string') {
  80.       el.classList.add(arg)
  81.     } else { 
  82.       if (typeof arg === 'object') {
  83.         if (arg.el) { 
  84.           el.appendChild(arg.el)
  85.         } else {
  86.           attrs(el, arg)
  87.         }
  88.       } 
  89.     }
  90.   }
  91.   document.body.appendChild(el)
  92.   return { el }
  93. }
  94.  
  95.  
  96. const { header, h1, h2, style, div, button } = dom
  97.  
  98. style(`
  99.   body, html {
  100.     font-family: sans-serif;
  101.   }
  102.   .edit-me {
  103.     margin: 1em;
  104.     outline: 1px solid red;
  105.     padding: .5em;
  106.   }
  107. `)
  108.  
  109. header(
  110.   h1('Dom Thoughts'),
  111.   h2('sub-header', 'Can\'t help playing with this', 
  112.     { style: 'font-style: italic;' }
  113.   )
  114. )
  115. div('main', 
  116.   button('hello', 'Hello', { click: () => alert('hello') }),
  117.   div('edit-me', 'Edit Me', { contentEditable: true })
  118. )

Just playing around with DOM creation syntax, kind of reacty… This is the main part:

  1. const { header, h1, h2, style, div, button } = dom
  2.  
  3. style(`
  4.   body, html {
  5.     font-family: sans-serif;
  6.   }
  7.   .edit-me {
  8.     margin: 1em;
  9.     outline: 1px solid red;
  10.     padding: .5em;
  11.   }
  12. `)
  13.  
  14. header(
  15.   h1('Dom Thoughts'),
  16.   h2('sub-header', 'Can\'t help playing with this', 
  17.     { style: 'font-style: italic;' }
  18.   )
  19. )
  20. div('main', 
  21.   button('hello', 'Hello', { click: () => alert('hello') }),
  22.   div('edit-me', 'Edit Me', { contentEditable: true })
  23. )
// brainstorming // ui

What is Clicked?

  1. document.addEventListener('click', e => console.log(e.target))

Try that one in your console and then click on stuff. I use that frequently when debugging…

// dom // tricks // ui

Label Thoughts

  1. main:{
  2.   header:{
  3.     {'Tasker'}
  4.     newCol:{'New Column'}
  5.   }
  6.  
  7.   columns:{
  8.     scroll:{
  9.       NoteCols:{}
  10.     }
  11.   }
  12. }
  13.  
  14. NoteCol:{
  15.   title:{['editable', 'focus']
  16.     close:{
  17.       {'&times;'}
  18.     }
  19.   }
  20.   newNote:{['editable', 'placeholder="New Note..."']}
  21.   hr:{}
  22.   noteContainer:{
  23.     Notes:{}
  24.   }
  25. }
  26.  
  27. Note:{['focus']
  28.   close:{
  29.     {'&times;'}
  30.   }
  31.   checkbox:{}
  32.   content:{['edtiable']}
  33. }
  34.  
  35. console.log('no errors :D');

The above is actually valid javascript, just a bunch of labels, blocks and a few arrays

// javascript // tricks // ui

CSS Checkbox

  1. <div class="toggle">
  2.   <input class="check" type="checkbox" tabindex="0">
  3.   <label></label>
  4. </div>
  5.  
  6. <style>
  7.   .toggle {
  8.     position: relative;
  9.   }
  10.   .check {
  11.     position: absolute;
  12.     width: 3rem;
  13.     height: 3rem;
  14.     margin: 0;
  15.     opacity: 0;
  16.     cursor: pointer;
  17.   }
  18.   label {
  19.     position: absolute;
  20.     pointer-events: none;
  21.     content: '';
  22.     width: 3rem;
  23.     height: 3rem;
  24.     background: black;
  25.     cursor: pointer
  26.   }
  27.   .check:checked + label {
  28.     background: red;
  29.   }
  30. </style>

Quick css checkbox. I used to do this all the time and feel like maybe there was a better way… anyway, this is what I did to get it working fast…

// css // html // ui
Older Posts
Newer Posts

Recent

Archive

RSS
snippet.zone /// {s/z}