miniQuerySample

miniQuery.js

////////////////////////////////////////
/////////// DBC Mini Query /////////////
////////// Hunter And Masha ////////////
/////// EastBay Pair 5-5-15 ////////////
////////////////////////////////////////


////////////////////////////////////////
//////////////. Module .////////////////
//////////. MiniQuery     ./////////////
////////////////////////////////////////

var $$ = (function(){



  ////////////////////////////////////////
  //////////////. Module .////////////////
  //////////. ShadiSelector ./////////////
  ////////////////////////////////////////
  var ShadiSelector = (function(){
    var select = function(selector){

      var selectorWord = selector.slice(1);

      if(selector[0] === "#"){
        return [document.getElementById(selectorWord)];
      } else if(selector[0] === "."){
        return document.getElementsByClassName(selectorWord);
      } else {
        return document.querySelectorAll(selector);
      }

    }

    return {
      select: select
    }
  })();

  ////////////////////////////////////////
  //////////////. Module .////////////////
  //////////.     DOM         .///////////
  ////////////////////////////////////////
  var DOM = (function(){

    var show = function(selector){
      modifyDisplay(selector, "show");
    }

    var hide = function(selector){
      modifyDisplay(selector, "hide");
    }

    var modifyDisplay = function(selector, action) {
      var elements = ShadiSelector.select(selector);
      for (var i=0; i<elements.length; i+=1) {
        var element = elements[i];
        if (action === "show") {
          element.style.display = element.formerDisplayValue;
          delete element.formerDisplayValue;
        } else if (action === "hide") {
          element.formerDisplayValue = window.getComputedStyle(element).display
          element.style.display = "none";
        } else {
          // console.log("Unknown action, looking for either 'show' or 'hide'");
        }
      }
    }

    return {
      show: show,
      hide: hide
    }
  })();

  ////////////////////////////////////////
  //////////////. Module .////////////////
  //////////. EventDispatcher .///////////
  ////////////////////////////////////////
  var EventDispatcher = (function(){

  // the purpose on the on function is to set a callback given a particular "event"
  // in this case a .onfakeEvent call to the element


    var on = function(selector, eventName, callbackFunction){

      // Old school style for IE.

      var elements = ShadiSelector.select(selector);

      for (var i=0; i<elements.length; i++){

        var element = elements[i];

        var eEvent = document.createEvent('Event');
        eEvent.initEvent(eventName, true, true);

        element.addEventListener(eventName, callbackFunction(), false);
        element["on" + eventName.toLowerCase()] = eEvent;
      }
    }

    var trigger = function(selector, eventName){

      var elements = ShadiSelector.select(selector);

      for (var i=0; i<elements.length; i++){
        var element = elements[i];
        element.dispatchEvent(element["on" + eventName.toLowerCase()]);

      }
    }

    return {
      on: on,
      trigger: trigger
    }
  })();

  ////////////////////////////////////////
  //////////////. Module .////////////////
  //////////. EventDispatcher .///////////
  ////////////////////////////////////////
  var AjaxWrapper = (function(){

    var req = new XMLHttpRequest();

    var request = function(options) {
      req.open(options.type, options.url, true);
      req.send();
      return this;
    };

    var then = function(callback) {
      req.addEventListener("load", callback, false);
      return this;
    };

    var fail = function(callback) {
      req.addEventListener("error", callback, false);
      return this;
    };
    return {
      request: request,
      then: then,
      fail: fail
    }
  })();
  return {
    ShadiSelector: ShadiSelector,
  }
})();

////////////////////////////////////////
//////////////. DRIVIN' .///////////////
////////////////////////////////////////

// R0
var eyedId = ShadiSelector.select('#eyed');
var klassClass = ShadiSelector.select('.klass');
var anchorElement = ShadiSelector.select('a');

// R1
DOM.hide('.klass') // hides the div
DOM.show('.klass') // shows the div
DOM.hide('.klass') // hides the div

// R2
EventDispatcher.on('.klass', 'fakeEvent', function() { console.log('awesome') });
EventDispatcher.trigger('.klass', 'fakeEvent');
// this should print "awesome" in the console.

// R3
// this should an ajax request to the url and call the success callback if successful and fail callback if unsuccessful.
AjaxWrapper.request({
 url: 'https://api.github.com/zen',
 type: 'GET'
}).then(function(data, textStatus, xhr) {
  console.log("Yay I can make internet!!");
  // Handle data returned from the Promise
}).fail(function(errorMessage, textStatus, xhr) {
  console.log("meep moop meeh is the best ever");
  // Handle data returned from the Promise
});