Skip to content

Instantly share code, notes, and snippets.

@mholtzhausen
Last active August 21, 2018 13:56
Show Gist options
  • Save mholtzhausen/aed22dd933b6e32f437ac677e40e83cf to your computer and use it in GitHub Desktop.
Save mholtzhausen/aed22dd933b6e32f437ac677e40e83cf to your computer and use it in GitHub Desktop.
DOM Toolbox -- jQ
/**
Syntax for $(q,c)
$('div.someClass') // [<div.someClass />,<div.someClass />]
$$('div.someClass') // $$[<div.someClass />,<div.someClass />]
.first() // <div.someClass />
.$first() // $$[<div.someClass />]
.last() // <div.someClass />
.$last() // $$[<div.someClass />]
$$('div.someClass')
.on('mouseover mousemove',e=>e.currentTarget.style.background='yellow')
.on('mouseout',e=>e.currentTarget.style.background='')
**/
const $ = (q, c) => Array.prototype.slice.call((c instanceof Element ? c : document).querySelectorAll(q))
const $$ = (q, c) => {
class EC extends Array {
on(evtArr, cb) {
;(Array.isArray(evtArr) ? evtArr : evtArr.trim().split(' ')).forEach(evt => this.forEach(e => e.addEventListener(evt, cb.bind(e))))
return this
}
each(fn){
this.forEach(e=>fn($$(e)))
}
first(offset=0){
if(this.length>(offset))return this[offset]
}
$first(offset=0){
return $$(this.first(offset))
}
last(offset=0){
offset=this.length - 1 - (offset || 0)
if(offset >= 0) return this[offset]
}
$last(offset=0){
return $$(this.last(offset))
}
nearest(q){
let target = this.first()
while(target instanceof Element){
target=target.parentNode
if (target!==document && target.matches(q)) return target
}
return null
}
$nearest(q){
return $$(this.nearest(q))
}
}
const l = new EC()
return l.concat((q instanceof Element?[q]:(Array.isArray(q)?q:Array.prototype.slice.call((c instanceof Element ? c : document).querySelectorAll(q)))))
}
const $ = (q, c) => {
let sel = Object.defineProperties(
Array.isArray(q) ? Array.prototype.slice.call(q) : q instanceof Element ? [q] : Array.prototype.slice.call((c instanceof Element ? c : document).querySelectorAll(q)),
{
on: {
value(evtArr, cb) {
;(Array.isArray(evtArr) ? evtArr : evtArr.trim().split(' ')).forEach(evt => this.forEach(e => e.addEventListener(evt, cb.bind(e))))
return this
}
},
each: {
value(fn, wrap = false) {
this.forEach(e => (wrap ? fn($(e)) : fn(e)))
}
},
first: {
get() {
return this.length ? this[0] : null
}
},
last: {
get() {
let offset = this.length - 1
if (offset >= 0) return this[offset]
}
},
nearest: {
value(q) {
let target = this.first()
while (target instanceof Element) {
target = target.parentNode
if (target !== document && target.matches(q)) return target
}
return null
}
},
matching: {
value(q) {
return $(this.filter(e => e.matches(q)))
}
},
add: {
value(q) {
$(q).forEach(e => this.push(e))
return this
}
},
unwrap: {
get() {
return Array.prototype.slice.call(this)
}
},
find: {
value(q) {
let found = $([])
this.forEach(e => {
found.add($(q, e))
})
return found
}
}
}
)
return sel
}
$('nav')
.find('li.menu_item.parent')
.on('mouseover mousemove', e => (e.currentTarget.style.backgroundColor = 'red'))
.on('mouseout', function(e) {
this.style.backgroundColor = ''
})
let elem = document.createElement('div')
let eventHandler=function(){}
['keydown','touchstart'].forEach(evt=>{
elem.addEventListener(evt,eventHandler.bind(elem))
})
/*
You could also just do this:
$$(elem).on('keydown touchstart',()=>{})
*/
const elem = (type, attr = {}, body) => {
if (Array.isArray(type)) {
attr = Object.assign({}, type[1] || {}, attr)
type = type[0]
}
let el = document.createElement(type)
for (let key in attr) {
if (key === 'class') {
el.classList.add.apply(el.classList, attr[key])
} else {
el[key] = attr[key]
}
}
if (body) el.appendChild(body)
return el
}
elem.form = elem.bind(this, ['form', { method: 'post' }])
elem.input = elem.bind(this, ['input', { type: 'text' }])
elem.hidden = elem.bind(this, ['input', { type: 'hidden' }])
elem.date = elem.bind(this, ['input', { type: 'date' }])
elem.email = elem.bind(this, ['input', { type: 'email' }])
const elems = (...elements) => {
let frag = document.createDocumentFragment()
elements.forEach(el => frag.appendChild(el))
return frag
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment