add some sugar to bling dot js
const sugar = { | |
on: function(names, fn) { | |
names | |
.split(' ') | |
.forEach(name => | |
this.addEventListener(name, fn)) | |
}, | |
setAttributes: function(attrs) { | |
Object.entries(attrs) | |
.forEach(([key, val]) => | |
this.setAttribute(key, val)) | |
} | |
} | |
// shorthand querySelector: $('.foo') $('.child', context_node) | |
export const $ = (query, $context = document) => | |
Object.assign($context.querySelector(query), sugar) | |
// shorthand querySelectorAll: $$('.foo') $$('.child', context_node) | |
export const $$ = (query, $context = document) => | |
Object.assign( | |
[...$context.querySelectorAll(query)] | |
.map($el => Object.assign($el, sugar)) | |
, { | |
on: function(names, fn) { | |
this.forEach($el => $el.on(names, fn)) | |
}, | |
setAttributes: function(attrs) { | |
this.forEach($el => $el.setAttributes(attrs)) | |
} | |
}) |
This comment has been minimized.
This comment has been minimized.
the above, with some other extras, is now available from npm https://www.npmjs.com/package/blingblingjs
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
some example test usage: