Taeluf.com

rolodex.js

JSClass("left-arrow",
    function(){
        
        this.attach = function(dom){
            dom.onclick = function(){
              var imageWrappers = this.parentNode.getElementsByClassName("wrapper");
              var currentPosition = null;
              var type = typeof document.createElement("span");
              var outputWrappers = [];
              for (var index in imageWrappers){
                  var wrapper = imageWrappers[index];
                  if (typeof wrapper!==type)continue;
                  if (wrapper.classList.contains("display")){
                    currentPosition = wrapper.getAttribute("data-position");
                  }
                  outputWrappers[wrapper.getAttribute("data-position")] = wrapper;
              }
              var newPosition;
              if (currentPosition==0)newPosition = imageWrappers.length-1;
              else newPosition = currentPosition - 1;
              console.log(newPosition);
              outputWrappers[currentPosition].classList.remove("display");
              outputWrappers[currentPosition].classList.add("hidden");
              outputWrappers[newPosition].classList.remove("hidden");
              outputWrappers[newPosition].classList.add("display");
            }
        }
    }
);


JSClass("right-arrow",
    function(){
        
        this.attach = function(dom){
            dom.onclick = function(){
              var imageWrappers = this.parentNode.getElementsByClassName("wrapper");
              var currentPosition = null;
              var type = typeof document.createElement("span");
              var outputWrappers = [];
              for (var index in imageWrappers){
                  var wrapper = imageWrappers[index];
                  if (typeof wrapper!==type)continue;
                  if (wrapper.classList.contains("display")){
                    currentPosition = wrapper.getAttribute("data-position");
                  }
                  outputWrappers[wrapper.getAttribute("data-position")] = wrapper;
              }
              var newPosition;
              if (currentPosition==(imageWrappers.length-1))newPosition = 0;
              else newPosition = Number(currentPosition) + 1;
              console.log("current:"+currentPosition+"\nnew:"+newPosition);
              outputWrappers[currentPosition].classList.remove("display");
              outputWrappers[currentPosition].classList.add("hidden");
              outputWrappers[newPosition].classList.remove("hidden");
              outputWrappers[newPosition].classList.add("display");
            }
        }
    }
);