Last active
August 21, 2018 13:56
-
-
Save mholtzhausen/aed22dd933b6e32f437ac677e40e83cf to your computer and use it in GitHub Desktop.
DOM Toolbox -- jQ
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
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))))) | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 = '' | |
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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',()=>{}) | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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