miniQueryV2

julQuery.js

  var miniQuery = function(htmlElement){

  var selector = htmlElement;

  isElement = function(){
    console.log("in isElement");
    if(selector.nodeName != undefined){
      return true;
    }else{
      return false;
    }
  }

  isMultiple = function(){
    console.log("in isMultiple");
    if(isElement()){
      return htmlElement;
    }else{
      var type = htmlElement.substring(0,1);
      return type != '#';
    }
  }

  breakDownElement = function(htmlElement){
    console.log("in breakDownElement");
     if(isElement()){
        return htmlElement;
      }else{
      var type = htmlElement.substring(0,1);
      element = SweetSelector.select(htmlElement);

      if (isMultiple(htmlElement)){
        element = element[0];
      }
      return element;
    }
  }


  var SweetSelector = (function(){
    console.log("in SweetSelector");

    var exports = {};

    exports.select = function(htmlElement){
      if(isElement(htmlElement)){
        return htmlElement;
      }else{
        var type = htmlElement.substring(0,1);
        var name = htmlElement.substring(1);
        if (type == '#') {      // id selector
          return document.getElementById(name)
        }
        else if (type == '.') { // class selector
          return document.getElementsByClassName(name);
        }
        else {  // better only be a tag
          return document.getElementsByTagName(htmlElement);
        }
      }
    };
    return exports;
  })(); //end of SweetSelector

  var DOM = (function(){
    console.log("in DOM");
    var exports = {};

    exports.hide = function(elementToManipulate){
      var element = breakDownElement(elementToManipulate);
      element.style.display = 'none'
    };

    exports.show = function(elementToManipulate){
      var element = breakDownElement(elementToManipulate);
      element.style.display = '';
    };

    exports.addClass = function(elementToManipulate, klass){
      var element = breakDownElement(elementToManipulate)
      var currentClass = element.getAttribute('class') || '';
      if (currentClass == ''){
        var updateClass = klass;
      } else {
        var updateClass = currentClass + " " + klass;
      }
      element.setAttribute('class', updateClass);
    };

    exports.removeClass = function(elementToManipulate, klass) {
      var element = breakDownElement(elementToManipulate);
      var existingClasses = element.getAttribute('class') || '';
      re = new RegExp("\\s*" + klass + "\\s*", "g");
      var resultingClasses = existingClasses.replace(re, '');
      if (resultingClasses == ''){
        element.removeAttribute('class');
      } else {
        element.setAttribute('class', resultingClasses);
      }
    };
    return exports;
  })();

  var EventDispatcher = (function(){
    console.log("in EventDispatcher");
    var exports = {};
    exports.on =  function(target, name, callback){
      console.log(arguments)
      var element = SweetSelector.select(target);
      if (isMultiple(target)){
        Array.prototype.map.call(element, function(el){
          callback.bind(el);
          el.addEventListener(name, callback, false)
        });
      } else {
        callback.bind(element)
        element.addEventListener(name, callback, false);
      }
    };

    exports.trigger =  function(target, name){
      var event = new Event(name);
      var element = SweetSelector.select(target);
      if(isMultiple(target)){
        Array.prototype.map.call(element, function(el){
          el.dispatchEvent(event)
      });
      }else{
        element.dispatchEvent(event);
      }
    };
    return exports;
  })();

  var AjaxWrap = (function(){
    console.log("in AjaxWrapper");
    var exports = {};

    exports.request = function(args){
      return new Promise(function(resolve, reject){
        var oRequest = new XMLHttpRequest();
        oRequest.open(args.type, args.url);

        oRequest.onload = function(){
          if (this.status >= 200 && this.status <= 300){
            resolve(oRequest.response);
          } else {
            reject(oRequest.statusText)
          }
        }
        if (args.type == 'POST'){
          oRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        }
        if (args.data == undefined){
          oRequest.send();
        } else {
          oRequest.send(args.data);
        }

        oRequest.onerror = function(){
          reject(this.statusText)
        }
        oRequest.send(args.data);
      });
    };
    return exports;
  })();

  var exports = SweetSelector.select(selector);

  // console.log(exports)

  exports.hide = function(){
    DOM.hide(selector);
  }

  exports.show = function(){
    DOM.show(selector);
  }

  exports.addClass = function(klass){
    DOM.addClass(selector, klass);
  }

  exports.removeClass = function(klass){
    DOM.removeClass(selector, klass);
  }

  exports.on = function(eventName, callback){
    EventDispatcher.on(selector, eventName, callback);
  }

  exports.trigger = function(eventName){
    EventDispatcher.trigger(selector, eventName);
  }

  exports.ready = function(callback){
    if (document.readyState != 'loading'){
      callback();
    } else {
      document.addEventListener('DOMContentReady', callback);
    }
  }

  return exports;

}

miniQuery.ajax = function(params) {
  if (params.success === undefined || params.fail === undefined) {
    return Error('missing success or fail callback');
  }
  var success = params.success;
  var fail = params.fail;
  var ajaxProm = new Promise(function(resolve, reject) {
    var req = new XMLHttpRequest();
    req.open(params.type, params.url);

    req.onload = function() {
      if (Math.floor(req.status / 100) == 2) {
        resolve(req.response);
      } else {
        reject(req.statusText);
      }
    }

    if (params.type == 'POST') {
      req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    }
    if (params.data === undefined) {
      req.send();
    } else {
      req.send(params.data);
    }
  });
  ajaxProm.then(success).catch(fail);
}

var $ = miniQuery;

var a = $("#eyed")
var b = $(".klass")
var hovering = function(){console.log("HOVERING!!!")}