gallery-2011.08.03-21-18 nzakas gallery-idletimer

skotos · Aug 3, 2011 · c814478 · c814478
1 parent 9fa7f95
commit c814478
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 14 deletions.
diff --git a/src/gallery-idletimer/example/example.htm b/src/gallery-idletimer/example/example.htm
@@ -0,0 +1,37 @@
+<html>
+<head>
+    <title>Idle Timer Example</title>
+    <script src="http://yui.yahooapis.com/combo?3.3.0/build/yui/yui-min.js"></script>
+    <script src="../../../build/gallery-idletimer/gallery-idletimer.js"></script>
+<body>
+    <h1>Idle Timer Example</h1>
+    <p>The idle timer is built on <a href="http://developer.yahoo.com/yui/3/">YUI 3</a> and provides two events: <code>idle</code> and <code>active</code>, which fire when the user's idle state has changed.</p>
+    <p>This example has an idle timeout of 10 seconds. When you move your mouse over the page or start typing, you're considered "active". The status at the top of the screen changes to indicate your current state.</p>
+    <div id="status" style="padding: 5px;">&nbsp;</div>
+    <form>
+        <label for="comment">Comment:</label><br />
+        <textarea rows="10" cols="30" id="comment" name="comment"></textarea><br />
+        <input type="submit" value="Submit" />
+    </form>
+
+
+    <script type="text/javascript">
+
+    YUI().use("event", "gallery-idletimer", function(Y){
+
+        Y.IdleTimer.subscribe("idle", function(){
+        console.log("IDLE");
+            Y.one("#status").set("innerHTML", "User is idle :(").set("style.backgroundColor", "silver");
+        });
+
+        Y.IdleTimer.subscribe("active", function(){
+        console.log("ACTIVE");
+             Y.one("#status").set("innerHTML", "User is active :D").set("style.backgroundColor", "yellow");
+        });
+
+        Y.IdleTimer.start(10000);
+    });
+
+    </script>
+</body>
+</html>
diff --git a/src/gallery-idletimer/js/idletimer.js b/src/gallery-idletimer/js/idletimer.js
@@ -15,6 +15,7 @@
 var idle    = false,        //indicates if the user is idle
     tId     = -1,           //timeout ID
     enabled = false,        //indicates if the idle timer is enabled
+    doc = Y.config.doc,     //shortcut for document object
     timeout = 30000;        //the amount of time (ms) before the user is considered idle
 
 //-------------------------------------------------------------------------
@@ -26,18 +27,22 @@ var idle    = false,        //indicates if the user is idle
  * @param {Event} event A DOM2-normalized event object.
  * @return {void}
  */
-function handleUserEvent(){
+function handleUserEvent(event){
 
     //clear any existing timeout
     clearTimeout(tId);
 
     //if the idle timer is enabled
     if (enabled){
 
-        //if it's idle, that means the user is no longer idle
-        if (idle){
-            toggleIdleState();           
-        } 
+        if (/visibilitychange/.test(event.type)){
+            toggleIdleState(doc.hidden || doc.msHidden || doc.webkitHidden);
+        } else {
+            //if it's idle, that means the user is no longer idle
+            if (idle){
+                toggleIdleState();           
+            } 
+        }
 
         //set a new timeout
         tId = setTimeout(toggleIdleState, timeout);
@@ -46,15 +51,26 @@ function handleUserEvent(){
 
 /* (intentionally not documented)
  * Toggles the idle state and fires an appropriate event.
+ * @param {Boolean} force (Optional) the value to set idle to.
  * @return {void}
  */
-function toggleIdleState(){
+function toggleIdleState(force){
 
-    //toggle the state
-    idle = !idle;
+    var changed = false;
+    if (typeof force != "undefined"){
+        if (force != idle){
+            idle = force;
+            changed = true;
+        }
+    } else {
+        idle = !idle;
+        changed = true;
+    }
 
-    //fire appropriate event
-    Y.IdleTimer.fire(idle ? "idle" : "active");            
+    if (changed){
+        //fire appropriate event
+        Y.IdleTimer.fire(idle ? "idle" : "active");    
+    }
 }
 
 //-------------------------------------------------------------------------
@@ -111,8 +127,12 @@ Y.IdleTimer = {
         }
 
         //assign appropriate event handlers
-        Y.on("mousemove", handleUserEvent, document);
-        Y.on("keydown", handleUserEvent, document);
+        Y.on("mousemove", handleUserEvent, doc);
+        Y.on("keydown", handleUserEvent, doc);
+
+        //need to add the old-fashioned way
+        doc.addEventListener("msvisibilitychange", handleUserEvent, false)
+        doc.addEventListener("webkitvisibilitychange", handleUserEvent, false)
 
         //set a timeout to toggle state
         tId = setTimeout(toggleIdleState, timeout);
@@ -134,8 +154,12 @@ Y.IdleTimer = {
         clearTimeout(tId);
 
         //detach the event handlers
-        Y.detach("mousemove", handleUserEvent, document);
-        Y.detach("keydown", handleUserEvent, document);
+        Y.detach("mousemove", handleUserEvent, doc);
+        Y.detach("keydown", handleUserEvent, doc);
+
+        doc.removeEventListener("msvisibilitychange", handleUserEvent, false)
+        doc.removeEventListener("webkitvisibilitychange", handleUserEvent, false)
+
     }
 
 };