Mqu.js DOM helpers

MquDOM.js

// shorthand helpers
export const html = document.documentElement;
export const body = document.body;
export const el = (e, p = document) => p.querySelector(e);
export const els = (e, p = document) => Array.prototype.slice.call(p.querySelectorAll(e));

export const onLoad = cb => document.addEventListener('DOMContentLoaded', cb, false);

export const isArray = obj => (Object.prototype.toString.call(obj).toLowerCase().indexOf('array') >= 0);
export const isArrayLike = obj => {
  if (obj.length && typeof obj.length === 'number') {
    if (obj.length == 0) {
      return true;
    }
    if (obj.length > 0) {
      return (obj.length - 1) in obj;
    }
  }
  return false;
}

export const makeArray = collection => {
  let arr = [];
  each(collection, function (index, value) {
    arr.push(value);
  });
  return arr;
}

export const isFunction = obj => typeof obj == 'function' || false;

export const makeTraverser = callback => {
  return function () {
    var elements = [];
    for (var i = 0, j = this.length; i < j; i++) {
      var result = callback.apply(this[i], arguments);
      if (result && isArrayLike(result)) {
        Array.prototype.push.apply(elements, result);
      } else if (result) {
        elements.push(result);
      }
    }
    return Dom(elements);
  }
}

export const each = (collection, func) => {
  if (isArrayLike(collection)) {
    for (var i = 0, j = collection.length; i < j; i++) {
      func.call(collection[i], i, collection[i]);
    }
  }
  else {
    for (var prop in collection) {
      if (collection.hasOwnProperty(prop)) {
        func.call(collection[prop], prop, collection[prop]);
      }
    }
  }
  return collection;
}

//DOM
class Dom {

  //TODO: Add dom-node
  constructor(expression) {
    if (!(this instanceof Dom)) {
      return new Dom(expression);
    }
    let elements = isArray(expression) ? expression : makeArray(document.querySelectorAll(expression));
    Array.prototype.push.apply(this, elements);
  }

  forEach(func) {
    for (var i = 0; i < this.length; i++) {
      func.call(this[i], this[i], i);
    }
    return this;
  }

  on(event, cb) {
    return this.forEach(el => el.addEventListener(event, cb));
  }

  off(event, cb) {
    return this.forEach(el => el.removeEventListener(event, cb));
  }

  trigger(event, data) {
    return this.forEach(el => el.dispatchEvent(new CustomEvent(event, { detail: data || {} })));
  }

  attr(name, val) {
    if (arguments.length > 1) {
      return this.forEach(function (element) {
        element.setAttribute(name, val);
      });
    }
    return this[0] && this[0].getAttribute(name);
  }

  find() {
    return makeTraverser(function (selector) {
      return this.querySelectorAll(selector);
    })
  }

  addClass(className) {
    return this.forEach(function (element) {
      className && element.classList.add(className);
    });
  }

  removeClass(className) {
    return this.forEach(function (element) {
      className && element.classList.remove(className);
    });
  }

  hasClass(className) {
    for (var i = 0; i < this.length; i++) {
      if (this[i].classList.contains(className)) {
        return true;
      }
    }
    return false;
  }

  toggleClass(className) {
    return this.hasClass(className) ? this.removeClass(className) : this.addClass(className);
  }

}

export default Dom;