QuayJeery

Like a better version of JQuery without all the poppycock. Inspired by bling.

Also inspired by resig.

This is only the beginning

Let's make this a useful utility belt.

Possible future directions:

• cash
• allow chaining by returning the context object?

But I'm thinking more like, minimal DOM manipulation, and a lot of other useful functions for manipulating data, a la lodash but more with a focus on objects, JSON, unicode, i18n, dates.

You know, all those modern conveniences. But crammed into one tiny high-perf package.

Something like that.

Using

$ npm i quayjeery

Then:

  import {Q} from './quay.js'

  // you can use the crazy event listener functions off Q
  Q.ael(eventNamesOrName, handlersOrHandler, options, target); // add
  Q.rel(eventNamesOrName, handlersOrHandler, options, target); // remove

  // and 
  Q.buildIn(); // to install into prototypes

Examples

Now you can do crazy things like:

  $$('a[href]')
    .on([
      'mouseover',
      'touchenter',
      'contextmenu',
      'dblclick'
    ], [ 
      func1, 
      func2, 
      func3 
    ], {
      once:true
    });

Of course, I don't know why you'd wanna do something like that. But why you want to is not my business anyway.

And. Now. You. Can.

Technical

Here's the code:

  export const Q = {
    buildIn,
    ael, rel
  };

  export function ael(types, funcs, options, el) {
    return mel.call(this, types, funcs, options, el, 'addEventListener');
  }

  export function rel(types, funcs, options, el) {
    return mel.call(this, types, funcs, options, el, 'removeEventListener');
  }

  function mel(types, funcs, options, target, funcName) {
    let Attach = EventTarget.prototype[funcName];
    target = target || this;

    if ( !(target instanceof EventTarget) ) {
      console.log(target, this);
      throw new TypeError(`ael requires fourth argument, or this, be type EventTarget`);
    }

    if ( Attach == ael ) {    // then ael is on EventTarget prototype, so
      // find the original by buildIn()'s convention
      Attach = EventTarget.prototype[`$${funcName}`];
    }

    funcName = `$${funcName}`;

    if ( !Array.isArray(types) ) {
      types = [types];
    } 

    if ( !Array.isArray(funcs) ) {
      funcs = [funcs];
    }

    for( const func of funcs ) {
      for( const type of types ) {
        EventTarget.prototype[funcName].call(target, type, func, options);
      }
    }
  }

  function onAll(types, funcs, opts) {
    this.forEach(target => target instanceof EventTarget && target.on(types, funcs, opts));
  }

  function offAll(types, funcs, opts) {
    this.forEach(target => target instanceof EventTarget && target.off(types, funcs, opts));
  }

  function filterSelector(selector) {
    return this.filter(node => node.matches(selector));
  }

  function buildIn() {
    HTMLAllCollection.prototype.addEventListener = HTMLAllCollection.prototype.on = onAll;
    HTMLAllCollection.prototype.removeEventListener = HTMLAllCollection.prototype.off = offAll;
    HTMLAllCollection.prototype.__proto__ = Array.prototype;

    HTMLCollection.prototype.addEventListener = HTMLCollection.prototype.on = onAll;
    HTMLCollection.prototype.removeEventListener = HTMLCollection.prototype.off = offAll;
    HTMLCollection.prototype.__proto__ = Array.prototype;

    NodeList.prototype.addEventListener = NodeList.prototype.on = onAll;
    NodeList.prototype.removeEventListener = NodeList.prototype.off = offAll;
    NodeList.prototype.__proto__ = Array.prototype;

    EventTarget.prototype.$addEventListener = EventTarget.prototype.addEventListener;
    EventTarget.prototype.addEventListener = EventTarget.prototype.on = ael;

    EventTarget.prototype.$removeEventListener = EventTarget.prototype.removeEventListener;
    EventTarget.prototype.removeEventListener = EventTarget.prototype.off = rel;

    NodeList.prototype.$ = NodeList.prototype.filterSelector = filterSelector;
    Node.prototype.$ = Node.prototype.querySelector;
    Node.prototype.$$ = Node.prototype.querySelectorAll;

    self.on = self.on.bind(self);
    self.off = self.off.bind(self);

    self.$ = document.querySelector.bind(document);
    self.$$ = document.querySelectorAll.bind(document);
  }