Permalink
Browse files

Added YUI Gallery version of idle timer and updated examples

  • Loading branch information...
1 parent 4d348f8 commit 3ddb2cc7664e31dc4f323a5c0135f2b80fbf5d01 Nicholas C. Zakas committed Oct 27, 2009
@@ -3,6 +3,7 @@
<title>Idle Timer Example</title>
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="idle-timer.js"></script>
+</head>
<body>
<h1>Idle Timer Example</h1>
<p>The idle timer is built on <a href="http://developer.yahoo.com/yui/">YUI 2</a> and provides two events: <code>idle</code> and <code>active</code>, which fire when the user's idle state has changed.</p>
@@ -0,0 +1,150 @@
+YUI.add('gallery-idletimer', function(Y) {
+
+/*
+ * Copyright (c) 2009 Nicholas C. Zakas. All rights reserved.
+ * http://www.nczonline.net/
+ */
+
+/**
+ * Idle timer
+ * @module gallery-idletimer
+ */
+
+//-------------------------------------------------------------------------
+// Private variables
+//-------------------------------------------------------------------------
+
+var idle = false, //indicates if the user is idle
+ tId = -1, //timeout ID
+ enabled = false, //indicates if the idle timer is enabled
+ timeout = 30000; //the amount of time (ms) before the user is considered idle
+
+//-------------------------------------------------------------------------
+// Private functions
+//-------------------------------------------------------------------------
+
+/* (intentionally not documented)
+ * Handles a user event indicating that the user isn't idle.
+ * @param {Event} event A DOM2-normalized event object.
+ * @return {void}
+ */
+function handleUserEvent(){
+
+ //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();
+ }
+
+ //set a new timeout
+ tId = setTimeout(toggleIdleState, timeout);
+ }
+}
+
+/* (intentionally not documented)
+ * Toggles the idle state and fires an appropriate event.
+ * @return {void}
+ */
+function toggleIdleState(){
+
+ //toggle the state
+ idle = !idle;
+
+ //fire appropriate event
+ Y.IdleTimer.fire(idle ? "idle" : "active");
+}
+
+//-------------------------------------------------------------------------
+// Public interface
+//-------------------------------------------------------------------------
+
+/**
+ * Centralized control for determining when a user has become idle
+ * on the current page.
+ * @class IdleTimer
+ * @static
+ */
+Y.IdleTimer = {
+
+ /**
+ * Indicates if the idle timer is running or not.
+ * @return {Boolean} True if the idle timer is running, false if not.
+ * @method isRunning
+ * @static
+ */
+ isRunning: function(){
+ return enabled;
+ },
+
+ /**
+ * Indicates if the user is idle or not.
+ * @return {Boolean} True if the user is idle, false if not.
+ * @method isIdle
+ * @static
+ */
+ isIdle: function(){
+ return idle;
+ },
+
+ /**
+ * Starts the idle timer. This adds appropriate event handlers
+ * and starts the first timeout.
+ * @param {int} newTimeout (Optional) A new value for the timeout period in ms.
+ * @return {void}
+ * @method start
+ * @static
+ */
+ start: function(newTimeout){
+
+ //set to enabled
+ enabled = true;
+
+ //set idle to false to begin with
+ idle = false;
+
+ //assign a new timeout if necessary
+ if (typeof newTimeout == "number"){
+ timeout = newTimeout;
+ }
+
+ //assign appropriate event handlers
+ Y.on("mousemove", handleUserEvent, document);
+ Y.on("keydown", handleUserEvent, document);
+
+ //set a timeout to toggle state
+ tId = setTimeout(toggleIdleState, timeout);
+ },
+
+ /**
+ * Stops the idle timer. This removes appropriate event handlers
+ * and cancels any pending timeouts.
+ * @return {void}
+ * @method stop
+ * @static
+ */
+ stop: function(){
+
+ //set to disabled
+ enabled = false;
+
+ //clear any pending timeouts
+ clearTimeout(tId);
+
+ //detach the event handlers
+ Y.detach("mousemove", handleUserEvent, document);
+ Y.detach("keydown", handleUserEvent, document);
+ }
+
+};
+
+//inherit event functionality
+Y.augment(Y.IdleTimer, Y.Event.Target);
+
+
+
+}, '@VERSION@' ,{requires:['event','event-custom']});
Oops, something went wrong.
@@ -0,0 +1,35 @@
+<html>
+<head>
+ <title>Idle Timer Example</title>
+ <script type="text/javascript" src="http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js"></script>
+ <script type="text/javascript" src="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("*", function(Y){
+
+ Y.IdleTimer.subscribe("idle", function(){
+ Y.get("#status").set("innerHTML", "User is idle :(").set("style.backgroundColor", "silver");
+ });
+
+ Y.IdleTimer.subscribe("active", function(){
+ Y.get("#status").set("innerHTML", "User is active :D").set("style.backgroundColor", "yellow");
+ });
+
+ Y.IdleTimer.start(10000);
+ });
+
+ </script>
+</body>
+</html>
@@ -0,0 +1,150 @@
+YUI.add('gallery-idletimer', function(Y) {
+
+/*
+ * Copyright (c) 2009 Nicholas C. Zakas. All rights reserved.
+ * http://www.nczonline.net/
+ */
+
+/**
+ * Idle timer
+ * @module gallery-idletimer
+ */
+
+//-------------------------------------------------------------------------
+// Private variables
+//-------------------------------------------------------------------------
+
+var idle = false, //indicates if the user is idle
+ tId = -1, //timeout ID
+ enabled = false, //indicates if the idle timer is enabled
+ timeout = 30000; //the amount of time (ms) before the user is considered idle
+
+//-------------------------------------------------------------------------
+// Private functions
+//-------------------------------------------------------------------------
+
+/* (intentionally not documented)
+ * Handles a user event indicating that the user isn't idle.
+ * @param {Event} event A DOM2-normalized event object.
+ * @return {void}
+ */
+function handleUserEvent(){
+
+ //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();
+ }
+
+ //set a new timeout
+ tId = setTimeout(toggleIdleState, timeout);
+ }
+}
+
+/* (intentionally not documented)
+ * Toggles the idle state and fires an appropriate event.
+ * @return {void}
+ */
+function toggleIdleState(){
+
+ //toggle the state
+ idle = !idle;
+
+ //fire appropriate event
+ Y.IdleTimer.fire(idle ? "idle" : "active");
+}
+
+//-------------------------------------------------------------------------
+// Public interface
+//-------------------------------------------------------------------------
+
+/**
+ * Centralized control for determining when a user has become idle
+ * on the current page.
+ * @class IdleTimer
+ * @static
+ */
+Y.IdleTimer = {
+
+ /**
+ * Indicates if the idle timer is running or not.
+ * @return {Boolean} True if the idle timer is running, false if not.
+ * @method isRunning
+ * @static
+ */
+ isRunning: function(){
+ return enabled;
+ },
+
+ /**
+ * Indicates if the user is idle or not.
+ * @return {Boolean} True if the user is idle, false if not.
+ * @method isIdle
+ * @static
+ */
+ isIdle: function(){
+ return idle;
+ },
+
+ /**
+ * Starts the idle timer. This adds appropriate event handlers
+ * and starts the first timeout.
+ * @param {int} newTimeout (Optional) A new value for the timeout period in ms.
+ * @return {void}
+ * @method start
+ * @static
+ */
+ start: function(newTimeout){
+
+ //set to enabled
+ enabled = true;
+
+ //set idle to false to begin with
+ idle = false;
+
+ //assign a new timeout if necessary
+ if (typeof newTimeout == "number"){
+ timeout = newTimeout;
+ }
+
+ //assign appropriate event handlers
+ Y.on("mousemove", handleUserEvent, document);
+ Y.on("keydown", handleUserEvent, document);
+
+ //set a timeout to toggle state
+ tId = setTimeout(toggleIdleState, timeout);
+ },
+
+ /**
+ * Stops the idle timer. This removes appropriate event handlers
+ * and cancels any pending timeouts.
+ * @return {void}
+ * @method stop
+ * @static
+ */
+ stop: function(){
+
+ //set to disabled
+ enabled = false;
+
+ //clear any pending timeouts
+ clearTimeout(tId);
+
+ //detach the event handlers
+ Y.detach("mousemove", handleUserEvent, document);
+ Y.detach("keydown", handleUserEvent, document);
+ }
+
+};
+
+//inherit event functionality
+Y.augment(Y.IdleTimer, Y.Event.Target);
+
+
+
+}, '@VERSION@' ,{requires:['event','event-custom']});
@@ -1,8 +1,9 @@
<html>
<head>
<title>Idle Timer Example</title>
- <script type="text/javascript" src="http://yui.yahooapis.com/combo?3.0.0pr2/build/yui-base/yui-base-min.js&3.0.0pr2/build/oop/oop-min.js&3.0.0pr2/build/event/event-min.js&3.0.0pr2/build/dom/dom-base-min.js&3.0.0pr2/build/dom/selector-min.js&3.0.0pr2/build/node/node-base-min.js"></script></head>
+ <script type="text/javascript" src="http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js"></script>
<script type="text/javascript" src="idle-timer.js"></script>
+</head>
<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>

0 comments on commit 3ddb2cc

Please sign in to comment.