Loader – Deferred object queue system

by lasha

HTML

<button class="button">Test Custom Deferred Obj</button>
<div class="main">
    <div class="loader">
        <div class="spinner"></div>
    </div>
</div>

<div class="modal">
    testing content modal
    <div class="loader">
        <!--<div class="spinner"></div>-->
    </div>
</div>

<div class="dataReturned"></div>
<div class="dataReturned2"></div>

CSS

body { margin: 0; }
.loader {
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0; left: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 9999;
    color: #fff;
    text-align: center;
    line-height: 200px;
}
.loader.active {
    display: block;
}
.dataReturned, .dataReturned2 {
    height: 100px;
    overflow-y: scroll;
}
.modal {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid #000;
}

.modal .loader {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(122,54,98,0.3);
}
.modal .loader:after {
  content: "";
  width: 30px;
  height: 30px;
  background-color: #FFF;
  position: absolute;
  margin: 100px auto;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
}


.spinner {
  width: 30px;
  height: 30px;
  background-color: #FFF;

  margin: 100px auto;
  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
  animation: rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes rotateplane {
  0% { -webkit-transform: perspective(120px) }
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
}

@keyframes rotateplane {
  0% { 
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) 
  } 50% { 
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) 
  } 100% { 
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

JavaScript

//http://jsonplaceholder.typicode.com/todos/
var $loader1 = $(".main .loader");
var $loader2 = $(".modal .loader");

var Loader = (function(){
    var whenArr = {};
    //var queue = [];
    var whenQ = {};
    //var $when = $.when.apply(this, queue);
    var whenL = {};
    
    function updateWhen(loader, deferredObj){
        //$when = $.when.apply(this, queue);
        
        deferredObj.done(function(){
            if(whenArr[loader].indexOf(deferredObj) > -1){
                whenArr[loader].splice(whenArr[loader].indexOf(deferredObj), 1);
            }
            
            console.log("items left in queue whenQ["+loader+"]", whenArr[loader].length);
            //console.log("deferredObj.done(), when():", $when);
            
            if(!whenArr[loader].length){
                whenQ[loader].done(function(){
                    console.log("all things loaded! whenQ["+loader+"]:", whenQ[loader]);
                    whenL[loader].removeClass("active");
                });
            }
            /*$(whenQ).each(function(i, el){
                console.log("el",el);
                if(!whenArr[el].length){
                    whenQ[el].done(function(){
                        console.log("all things loaded! whenQ[el]:", whenQ[el]);
                        whenL[el].removeClass("active");
                    });
                }
            });*/
        });
        
        /*$when.done(function(){
            console.log("all things loaded!");
        });*/
    }
    
    /*$when.done(function(){
        console.log("all things loaded!");
    });*/
    
    return {
        add: function(loader, deferredObj){
            whenArr[loader] = whenArr[loader] || [];
            whenArr[loader].push(deferredObj);
            
            //whenQ[loader] = whenQ[loader] || {};
            whenQ[loader] = $.when.apply(this, whenArr[loader]);
            
            whenL[loader] = $(loader);
            
            updateWhen(loader, deferredObj);
  ...