Skip to content

Instantly share code, notes, and snippets.

@jeongsd

jeongsd/index.js

Last active May 19, 2018 01:51
Show Gist options
  • Save jeongsd/f2d7623ac74bce1a4bac90e39c9b99ef to your computer and use it in GitHub Desktop.
Save jeongsd/f2d7623ac74bce1a4bac90e39c9b99ef to your computer and use it in GitHub Desktop.
Download ZIP
idle
Raw
index.js
var timer = 5000;
var idleImg = "https://i.imgur.com/7LYQc5Y.jpg";
var idleSound = 'http://soundbible.com/mp3/Female_Scream_Horror-NeoPhyTe-138499973.mp3';
eval(` (function(){var a;document.addEventListener||(document.attachEvent?document.addEventListener=function(a,b,c){return document.attachEvent("on"+a,b,c)}:document.addEventListener=function(){return{}}),document.removeEventListener||(document.detachEvent?document.removeEventListener=function(a,b){return document.detachEvent("on"+a,b)}:document.removeEventListener=function(){return{}}),a={},a=function(){function a(a){var b,c;a&&(this.awayTimeout=parseInt(a.awayTimeout,10),this.onAway=a.onAway,this.onAwayBack=a.onAwayBack,this.onVisible=a.onVisible,this.onHidden=a.onHidden),c=this,b=function(){return c.onActive()},window.addEventListener("click",b),window.addEventListener("mousemove",b),window.addEventListener("mouseenter",b),window.addEventListener("keydown",b),window.addEventListener("scroll",b),window.addEventListener("mousewheel",b),window.addEventListener("touchmove",b),window.addEventListener("touchstart",b)}return a.isAway=!1,a.awayTimeout=3e3,a.awayTimestamp=0,a.awayTimer=null,a.onAway=null,a.onAwayBack=null,a.onVisible=null,a.onHidden=null,a.prototype.onActive=function(){return this.awayTimestamp=(new Date).getTime()+this.awayTimeout,this.isAway&&(this.onAwayBack&&this.onAwayBack(),this.start()),this.isAway=!1,!0},a.prototype.start=function(){var a;return this.listener||(this.listener=function(){return a.handleVisibilityChange()},document.addEventListener("visibilitychange",this.listener,!1),document.addEventListener("webkitvisibilitychange",this.listener,!1),document.addEventListener("msvisibilitychange",this.listener,!1)),this.awayTimestamp=(new Date).getTime()+this.awayTimeout,null!==this.awayTimer&&clearTimeout(this.awayTimer),a=this,this.awayTimer=setTimeout(function(){return a.checkAway()},this.awayTimeout+100),this},a.prototype.stop=function(){return null!==this.awayTimer&&clearTimeout(this.awayTimer),null!==this.listener&&(document.removeEventListener("visibilitychange",this.listener),document.removeEventListener("webkitvisibilitychange",this.listener),document.removeEventListener("msvisibilitychange",this.listener),this.listener=null),this},a.prototype.setAwayTimeout=function(a){return this.awayTimeout=parseInt(a,10),this},a.prototype.checkAway=function(){var a,b;return b=(new Date).getTime(),b<this.awayTimestamp?(this.isAway=!1,a=this,void(this.awayTimer=setTimeout(function(){return a.checkAway()},this.awayTimestamp-b+100))):(null!==this.awayTimer&&clearTimeout(this.awayTimer),this.isAway=!0,this.onAway?this.onAway():void 0)},a.prototype.handleVisibilityChange=function(){if(document.hidden||document.msHidden||document.webkitHidden){if(this.onHidden)return this.onHidden()}else if(this.onVisible)return this.onVisible()},a}(),"function"==typeof define&&define.amd?define([],a):"object"==typeof exports?module.exports=a:window.Idle=a}).call(this);`)
//sound
function sound(src) {
this.sound = document.createElement("audio");
this.sound.src = src;
this.sound.setAttribute("preload", "auto");
this.sound.setAttribute("controls", "none");
this.sound.style.display = "none";
document.body.appendChild(this.sound);
this.play = function(){
this.sound.play();
}
this.stop = function(){
this.sound.pause();
}
}
var awayCallback = function(){
console.log(new Date().toTimeString() + ": away");
};
var awayBackCallback = function(){
console.log(new Date().toTimeString() + ": back");
setTimeout(function(){
var imgDom = document.createElement("img");
imgDom.src = idleImg;
imgDom.style.width = "100vw";
imgDom.style.height = "100vh";
imgDom.style['z-index'] = 9999999;
imgDom.style['position'] = 'fixed';
imgDom.style['top'] = 0;
imgDom.style['right'] = 0;
document.body.appendChild(imgDom);
imgDom.id = 'idle_img';
var elem = document.getElementById("idle_img");
if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen();
}
this.sound = document.createElement("audio");
this.sound.src = idleSound;
this.sound.setAttribute("preload", "auto");
this.sound.setAttribute("controls", "none");
this.sound.style.display = "none";
document.body.appendChild(this.sound);
this.sound.play();
}, timer);
};
var onVisibleCallback = function(){
console.log(new Date().toTimeString() + ": now looking at page");
};
var onHiddenCallback = function(){
console.log(new Date().toTimeString() + ": not looking at page");
};
//this is one way of using it.
/*
var idle = new Idle();
idle.onAway = awayCallback;
idle.onAwayBack = awayBackCallback;
idle.setAwayTimeout(2000);
idle.start();
*/
//this is another way of using it
var idle = new Idle({
onHidden: onHiddenCallback,
onVisible: onVisibleCallback,
onAway: awayCallback,
onAwayBack: awayBackCallback,
awayTimeout: 5000 //away with 5 seconds of inactivity
}).start();
@jeongsd
Copy link
Author

jeongsd commented May 19, 2018 •
edited
Loading 

var timer = 5000;
var idleImg = "https://user-images.githubusercontent.com/37648316/40263784-422341b6-5acc-11e8-8e19-8fb87b868479.png";
var idleSound = 'http://soundbible.com/mp3/Female_Scream_Horror-NeoPhyTe-138499973.mp3';

eval(` (function(){var a;document.addEventListener||(document.attachEvent?document.addEventListener=function(a,b,c){return document.attachEvent("on"+a,b,c)}:document.addEventListener=function(){return{}}),document.removeEventListener||(document.detachEvent?document.removeEventListener=function(a,b){return document.detachEvent("on"+a,b)}:document.removeEventListener=function(){return{}}),a={},a=function(){function a(a){var b,c;a&&(this.awayTimeout=parseInt(a.awayTimeout,10),this.onAway=a.onAway,this.onAwayBack=a.onAwayBack,this.onVisible=a.onVisible,this.onHidden=a.onHidden),c=this,b=function(){return c.onActive()},window.addEventListener("click",b),window.addEventListener("mousemove",b),window.addEventListener("mouseenter",b),window.addEventListener("keydown",b),window.addEventListener("scroll",b),window.addEventListener("mousewheel",b),window.addEventListener("touchmove",b),window.addEventListener("touchstart",b)}return a.isAway=!1,a.awayTimeout=3e3,a.awayTimestamp=0,a.awayTimer=null,a.onAway=null,a.onAwayBack=null,a.onVisible=null,a.onHidden=null,a.prototype.onActive=function(){return this.awayTimestamp=(new Date).getTime()+this.awayTimeout,this.isAway&&(this.onAwayBack&&this.onAwayBack(),this.start()),this.isAway=!1,!0},a.prototype.start=function(){var a;return this.listener||(this.listener=function(){return a.handleVisibilityChange()},document.addEventListener("visibilitychange",this.listener,!1),document.addEventListener("webkitvisibilitychange",this.listener,!1),document.addEventListener("msvisibilitychange",this.listener,!1)),this.awayTimestamp=(new Date).getTime()+this.awayTimeout,null!==this.awayTimer&&clearTimeout(this.awayTimer),a=this,this.awayTimer=setTimeout(function(){return a.checkAway()},this.awayTimeout+100),this},a.prototype.stop=function(){return null!==this.awayTimer&&clearTimeout(this.awayTimer),null!==this.listener&&(document.removeEventListener("visibilitychange",this.listener),document.removeEventListener("webkitvisibilitychange",this.listener),document.removeEventListener("msvisibilitychange",this.listener),this.listener=null),this},a.prototype.setAwayTimeout=function(a){return this.awayTimeout=parseInt(a,10),this},a.prototype.checkAway=function(){var a,b;return b=(new Date).getTime(),b<this.awayTimestamp?(this.isAway=!1,a=this,void(this.awayTimer=setTimeout(function(){return a.checkAway()},this.awayTimestamp-b+100))):(null!==this.awayTimer&&clearTimeout(this.awayTimer),this.isAway=!0,this.onAway?this.onAway():void 0)},a.prototype.handleVisibilityChange=function(){if(document.hidden||document.msHidden||document.webkitHidden){if(this.onHidden)return this.onHidden()}else if(this.onVisible)return this.onVisible()},a}(),"function"==typeof define&&define.amd?define([],a):"object"==typeof exports?module.exports=a:window.Idle=a}).call(this);`)

//sound
function sound(src) {
    this.sound = document.createElement("audio");
    this.sound.src = src;
    this.sound.setAttribute("preload", "auto");
    this.sound.setAttribute("controls", "none");
    this.sound.style.display = "none";
    document.body.appendChild(this.sound);
    this.play = function(){
        this.sound.play();
    }
    this.stop = function(){
        this.sound.pause();
    }
}

var awayCallback = function(){
  console.log(new Date().toTimeString() + ": away");
};

var awayBackCallback = function(){
  console.log(new Date().toTimeString() + ": back");
  setTimeout(function(){ 
    var imgDom = document.createElement("img");
imgDom.src = idleImg;
imgDom.style.width = "100vw";
imgDom.style.height = "100vh";
imgDom.style['z-index'] = 9999999;
imgDom.style['position'] = 'fixed';
imgDom.style['top'] = 0;
imgDom.style['right'] = 0;
document.body.appendChild(imgDom);
imgDom.id = 'idle_img';

var elem = document.getElementById("idle_img");
if (elem.webkitRequestFullScreen) {
  elem.webkitRequestFullScreen();
}

this.sound = document.createElement("audio");
    this.sound.src = idleSound;
    this.sound.setAttribute("preload", "auto");
    this.sound.setAttribute("controls", "none");
    this.sound.style.display = "none";
    document.body.appendChild(this.sound);
     this.sound.play();


  }, timer);
};
var onVisibleCallback = function(){
  console.log(new Date().toTimeString() + ": now looking at page");
};

var onHiddenCallback = function(){
  console.log(new Date().toTimeString() + ": not looking at page");
};
//this is one way of using it.
/*
var idle = new Idle();
idle.onAway = awayCallback;
idle.onAwayBack = awayBackCallback;
idle.setAwayTimeout(2000);
idle.start();
*/
//this is another way of using it
var idle = new Idle({
  onHidden: onHiddenCallback,
  onVisible: onVisibleCallback,
  onAway: awayCallback,
  onAwayBack: awayBackCallback,
  awayTimeout: 5000 //away with 5 seconds of inactivity
}).start();

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment