JSFiddle - React, Tailwind, and code Playground

by Derek Anderson

HTML

<div id='test'>
hello
</div>

JavaScript

var responsive = new function(window, document, undefined){
	//refactored responsive, lighter, faster, more perfomant, no external needs
    //new chaining, full asynch operation
    //resizing complete detection
    //
    //todo: extend, batch query testing, ie view-port sizing in mq, transition events?
    //
    var _switches = [];
    var last_pushed = undefined;
    var matrix = {breakpoints:{}};
    
    //fallback accepts the matrix overrids, or the sites default
    this.fallback = function(override){
      //if breakpoints exists in the override objects
      if(override.breakpoints){
      for(var breakpoint in override.breakpoints){
        //for every break poin t
          override.breakpoints[breakpoint].id = uniqueId('bp_');
      }}
      extend(matrix, override);
      console.log(extend(matrix, override));
    }
    
    
    //collection of switches, push a switch or a matrix to the collection
    this.switches = function(theswitch, personal_matrix){
        //switches are the object, much like jQuery DOM objects,
        //chaining of switch pushes is not allowed
        if(theswitch && !this.was_pushed){
            if(personal_matrix){
                for(var breakpoint in personal_matrix.breakpoints){
                    personal_matrix.breakpoints[breakpoint].id = uniqueId('bp_');
              }}
            _switches.push({
                "switch":theswitch,
                "last-match":"",
                "personal_matrix":{}
            });
            last_pushed = theswitch;
            //return a copy of this responsive, with was_pushed, for chaining
            var responsive_copy = Object.create(_responsive);
            responsive_copy.was_pushed = true;
            return responsive_copy;
        }
    }

    //run switch updates
    this.update = function(){
        if(this.was_pushed){
            //if chained
            //take a reference to the correct last_pushed
            //we are relying on lexical scoping here, as...