JavaScript: Kiosk Next/Previous Buttons

by sjmcpherson

CSS

.kioskBtn{width:100px;height:100px;background-color:#ccc;position:absolute;top:0;opacity:0.7;}
.kioskBtn:hover{opacity:1;cursor:pointer;}

.kioskPrevBtn{left:0;border-radius:0 0 50% 0;}
.kioskNextBtn{right:0;border-radius:0 0 0 50%;}

.kioskBtn:before{content:"";width:0;height:0;display:block;position:absolute;left:35%;right:35%;top:20%;}

.kioskPrevBtn:before{border-top: 25px solid transparent;border-bottom: 25px solid transparent;border-right: 25px solid #fff;}
.kioskNextBtn:before{border-top: 25px solid transparent;border-bottom: 25px solid transparent;border-left: 25px solid #fff;}

JavaScript

var KioskWidget = (function () {
 
    var body = document.body,
    millseconds = 60*1000,
    delayAfterActivtyMins = 2,//Minutes;
    activityCheckTimeMins = 1,//Minutes;
    homeURL = '/';

    function setupButtons(){ 
        var kioskPrevBtn = document.createElement("div"), kioskNextBtn = document.createElement("div");
        kioskPrevBtn.id = "kioskPrevBtn";
        kioskNextBtn.id = "kioskNextBtn";
        
        kioskPrevBtn.className = "kioskBtn kioskPrevBtn";
        kioskNextBtn.className = "kioskBtn kioskNextBtn";
        
        body.insertBefore(kioskPrevBtn, body.firstChild);
        body.insertBefore(kioskNextBtn, body.firstChild);
    
        kioskPrevBtn.addEventListener('click', prevClick, false); 
        kioskNextBtn.addEventListener('click', nextClick, false);   
    }  
    function prevClick(){
        window.history.back();    
    }
    function nextClick(){
        window.history.forward(); 
    }
    function ActivityRecorded(){
        clearTimeout(NoActivityRecorded);
        window.removeEventListener("mousemove", ActivityRecorded, true);
        setTimeout(setMouseCheck,delayAfterActivtyMins*millseconds);
    }
    function NoActivityRecorded(){        
        //Transfer to Homepage
        window.location.href = homeURL;
    }
    function setMouseCheck(){        
        window.addEventListener("mousemove", ActivityRecorded, true);
        setTimeout(NoActivityRecorded,activityCheckTimeMins*millseconds);
    }

  return {
    init: function () {
       if (window.history.length > 1){
            setupButtons();
       }
       //Start Activity Check
       if(window.location.href !== homeURL){
            setTimeout(setMouseCheck,delayAfterActivtyMins*millseconds);
       }
    },
  };
})();


KioskWidget.init();