40 lines
1.2 KiB
JavaScript
40 lines
1.2 KiB
JavaScript
|
// this project uses #vanillajs #proxies #clean #noframework
|
||
|
|
//
|
||
|
|
// menu = $proxy({
|
||
|
|
// attach: 'body',
|
||
|
|
// html: (el) => `<ul><li>${el.items.join('</li><li>')}</li></lu>`,
|
||
|
|
// items: [1,2],
|
||
|
|
// on: (el,k,v) => {
|
||
|
|
// switch(k){
|
||
|
|
// default: return el.outerHTML = el.html(el)
|
||
|
|
// }
|
||
|
|
// }
|
||
|
|
// })
|
||
|
|
//
|
||
|
|
// menu.items = menu.items.concat([3,4])
|
||
|
|
// $('#foo')
|
||
|
|
// $$('.someclass').map( (el) => el.classList.toggle() )
|
||
|
|
//
|
||
|
|
$proxy = (opts) => {
|
||
|
|
let el = document.createElement('div')
|
||
|
|
el.innerHTML = opts.html(opts)
|
||
|
|
el.querySelector = el.querySelector.bind(el)
|
||
|
|
el.appendChild = el.appendChild.bind(el)
|
||
|
|
let parent = typeof opts.attach == 'string' ? document.querySelector(opts.attach) : opts.attach
|
||
|
|
parent.appendChild( el )
|
||
|
|
el.on = el.addEventListener.bind(el)
|
||
|
|
for( let i in opts ) el[i] = opts[i]
|
||
|
|
return new Proxy( el, {
|
||
|
|
get: (el,k,receiver) => el[k] || '',
|
||
|
|
set: (el,k,v) => { el[k] = v; el.on(el,k,v) }
|
||
|
|
})
|
||
|
|
}
|
||
|
|
$ = typeof $ != 'undefined' ? $ : (s) => document.querySelector(s) // respect jquery
|
||
|
|
$$ = typeof $$ != 'undefined' ? $$ : (s) => [...document.querySelectorAll(s)] // zepto etc.
|
||
|
|
|
||
|
|
$el = (html) => {
|
||
|
|
let el = document.createElement('div')
|
||
|
|
el.innerHTML = html
|
||
|
|
return el.children[0]
|
||
|
|
}
|