Wednesday 17 October 2018

Rotate days of a week in JavaScript


Requirements:  The week will start with Sunday and user can see 3 days in the view the current day, next day and yesterday. So here it will be like Saturday, Sunday, Monday and when user drag mouse scroll towards down the day should change to next set of days like Sunday, Monday , Tuesday and then Monday,Tuesday,Wednesday etc.. And finally when it reaches the last day of the week it should start from the first day again. The same thing should happen in the upward scroll also.

Solution: 

HTML:

<div class="wheelNav">
  <div class="shadow prev"></div>
  <div class="shadow next"></div>
  <div id="prev" class="wheelNav-item first prev">Saturday</div>
  <div id="active" class="wheelNav-item active">Sunday</div>
  <div id="next" class="wheelNav-item next">Monday</div>
 </div>

JavaScript : 

wheelNav = {
scrolling: false,
  menu: document.getElementsByClassName("wheelNav")[0],
items: document.getElementsByClassName("wheelNav-item"),
  next: function(prev,cur,next) {
    document.getElementById("active").innerHTML =cur;
    document.getElementById("next").innerHTML =next;
    document.getElementById("prev").innerHTML =prev;
    },
  initialize: function() {
  var itemArray=['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
  var maxIterationSize=itemArray.length-1;
  var currentArrayIndex=0;
  wheelNav.menu.addEventListener("wheel", function(event) {
      var e = event;
      clearTimeout(wheelNav.scrolling);
      wheelNav.scrolling = setTimeout(function() { 
        e.defaultPrevented;
        var direction = e.deltaY;
   
        if (direction < 0) 
        {
          
          if(currentArrayIndex===1){
          currentArrayIndex=currentArrayIndex-1;
           wheelNav.next(itemArray[maxIterationSize],itemArray[currentArrayIndex],itemArray[1]);
           
        }
        else if(currentArrayIndex===0)
        {
           wheelNav.next(itemArray[maxIterationSize-1],itemArray[maxIterationSize],itemArray[0]);
           currentArrayIndex=maxIterationSize;
        }
        else
        {
          currentArrayIndex=currentArrayIndex-1;
          wheelNav.next(itemArray[currentArrayIndex-1],itemArray[currentArrayIndex],itemArray[currentArrayIndex+1]);
        }
         
        }
      
        if (direction > 0) 
        {
        
          if(currentArrayIndex===maxIterationSize-1){
          currentArrayIndex=currentArrayIndex+1;
           wheelNav.next(itemArray[maxIterationSize-1],itemArray[currentArrayIndex],itemArray[0]);
         }
          else if(currentArrayIndex===maxIterationSize)
         {
           wheelNav.next(itemArray[maxIterationSize],itemArray[0],itemArray[1]);
           currentArrayIndex=0;
         }
          else
         {
          currentArrayIndex=currentArrayIndex+1;
          wheelNav.next(itemArray[currentArrayIndex-1],itemArray[currentArrayIndex],itemArray[currentArrayIndex+1]);
         }
          
        }  
      }, 20);  
    });
  }
}

wheelNav.initialize();

CSS : 

.wheelNav {
  position: relative;
  cursor: ns-resize;
  width: 134px;
  height: 192px;
  overflow: hidden;
  background: #ccc;
  border: 2px solid black;
}
.wheelNav-item {
  width: 134px;
  height: 64px;
  display: none;
  background: white;
  box-sizing: border-box;
  text-align: center;
  font-size: 24px;
  padding: 16px;
}
.wheelNav-item.active {
  display: block;
}
.wheelNav-item.prev, .wheelNav-item.next {
  display: block;
  -webkit-filter: blur(1px);
}
.wheelNav-item.last, .wheelNav-item.first {
  background: #ccc;
}
.wheelNav .shadow.prev {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 134px;
  height: 64px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}
.wheelNav .shadow.next {
  position: absolute;
  z-index: 2;
  bottom: 0;
  left: 0;
  width: 134px;
  height: 64px;
  background: linear-gradient(to top, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0) 100%);
}
.wheelNav-item.up {
  animation-name: up;
  animation-duration: 0.5s;
}
.wheelNav-item.down {
  animation-name: down;
  animation-duration: 0.5s;
}
@keyframes up {
    from {margin-top: -5px;}
    to {margin-top: 0px;}
}
@keyframes down {
    from {margin-top: 5px;}
    to {margin-top: 0px;}
}



You can find the working example here 

No comments:

Post a Comment