Skip to content

Instantly share code, notes, and snippets.

@killercup
Forked from paulirish/bling.js
Last active Apr 24, 2018
Embed
What would you like to do?
bling dot js
/**
* bling.js
*
* Original Author: Paul Irish
* Fetched from https://gist.github.com/paulirish/12fb951a8b893a454b32/fe4fa7794b6575d8356ac73a79b0aefd75ffacbb
*/
/**
* Select elements with CSS-style selector syntax
*
* @example
* var $header = S('.page-header');
*/
var S = module.exports = document.querySelectorAll.bind(document);
/**
* Support event binding with optional delegates
*
* @example
* S('.nav-menu-toggle')[0].on('click', function () {});
* document.on('click', 'a.close', function () {});
*/
Node.prototype.on = function (name, delegate, fn) {
// No delegate given
if (arguments.length !== 3) {
return this.addEventListener(name, arguments[1]);
}
return this.addEventListener(name, function (e) {
// Handle delegate selector
if (e.target.matches(delegate)) {
return fn.apply(e.target, arguments);
}
});
};
/**
* Add events to lists of nodes
*
* @example
* S('.nav-menu-toggle').on('click', '.nav-menu-toggle', function () {});
*/
NodeList.prototype.on = NodeList.prototype.addEventListener = function (name, fn) {
return this.map(function (elem, i) {
return elem.on(name, fn);
});
};
/**
* Iterate lists of nodes like arrays
*
* @example
* var buttonNames = S('a.btn').map(function (el) { return el.textContent; });
*/
NodeList.prototype.__proto__ = Array.prototype;
/**
* matchesSelector Polyfill
*
* Returns whether an element matches a selector
*
* @author jonathantneal
* @url https://github.com/jonathantneal/closest
*
* @example
* element.matches(".is-fancy")
*/
(function (ELEMENT) {
ELEMENT.matches = ELEMENT.matches || ELEMENT.mozMatchesSelector || ELEMENT.msMatchesSelector ||
ELEMENT.oMatchesSelector || ELEMENT.webkitMatchesSelector;
}(Element.prototype));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment