don't show left-right nav when idle

config/assets.yml

@@ -46,6 +46,7 @@ javascripts:
     - public/javascripts/vendor/jquery.events.input.js
     - public/javascripts/vendor/jquery.elastic.js
     - public/javascripts/vendor/jquery.mentionsInput.js
+    - public/javascripts/vendor/jquery.idle-timer.js
     - public/javascripts/jquery.infinitescroll-custom.js
     - public/javascripts/jquery.autocomplete-custom.js
     - public/javascripts/keycodes.js

public/javascripts/app/pages/post-viewer.js

@@ -11,6 +11,7 @@ app.pages.PostViewer = app.views.Base.extend({
 
   initialize : function() {
     this.initViews();
+    this.prepIdleHooks();
 
     $(document).bind("keypress", _.bind(this.commentAnywhere, this))
     $(document).bind("keypress", _.bind(this.invokePane, this))
@@ -29,6 +30,18 @@ app.pages.PostViewer = app.views.Base.extend({
     });
   },
 
+  prepIdleHooks : function () {
+    $.idleTimer(2000);
+
+    $(document).bind("idle.idleTimer", function(){
+      $("body").addClass('idle');
+    });
+
+    $(document).bind("active.idleTimer", function(){
+      $("body").removeClass('idle');
+    });
+  },
+
   postRenderTemplate : function() {
     this.bindNavHooks();
   },

public/javascripts/vendor/jquery.idle-timer.js

@@ -0,0 +1,246 @@
+/*!
+ * jQuery idleTimer plugin
+ * version 0.9.100511
+ * by Paul Irish.
+ *   http://github.com/paulirish/yui-misc/tree/
+ * MIT license
+
+ * adapted from YUI idle timer by nzakas:
+ *   http://github.com/nzakas/yui-misc/
+*/
+/*
+ * Copyright (c) 2009 Nicholas C. Zakas
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ */
+
+/* updated to fix Chrome setTimeout issue by Zaid Zawaideh */
+
+ // API available in <= v0.8
+ /*******************************
+
+ // idleTimer() takes an optional argument that defines the idle timeout
+ // timeout is in milliseconds; defaults to 30000
+ $.idleTimer(10000);
+
+
+ $(document).bind("idle.idleTimer", function(){
+    // function you want to fire when the user goes idle
+ });
+
+
+ $(document).bind("active.idleTimer", function(){
+  // function you want to fire when the user becomes active again
+ });
+
+ // pass the string 'destroy' to stop the timer
+ $.idleTimer('destroy');
+
+ // you can query if the user is idle or not with data()
+ $.data(document,'idleTimer');  // 'idle'  or 'active'
+
+ // you can get time elapsed since user when idle/active
+ $.idleTimer('getElapsedTime'); // time since state change in ms
+
+ ********/
+
+
+
+ // API available in >= v0.9
+ /*************************
+
+ // bind to specific elements, allows for multiple timer instances
+ $(elem).idleTimer(timeout|'destroy'|'getElapsedTime');
+ $.data(elem,'idleTimer');  // 'idle'  or 'active'
+
+ // if you're using the old $.idleTimer api, you should not do $(document).idleTimer(...)
+
+ // element bound timers will only watch for events inside of them.
+ // you may just want page-level activity, in which case you may set up
+ //   your timers on document, document.documentElement, and document.body
+
+
+ ********/
+
+(function($){
+
+$.idleTimer = function(newTimeout, elem){
+
+    // defaults that are to be stored as instance props on the elem
+
+    var idle    = false,        //indicates if the user is idle
+        enabled = true,        //indicates if the idle timer is enabled
+        timeout = 30000,        //the amount of time (ms) before the user is considered idle
+        events  = 'mousemove keydown DOMMouseScroll mousewheel mousedown touchstart touchmove'; // activity is one of these events
+
+
+    elem = elem || document;
+
+
+
+    /* (intentionally not documented)
+     * Toggles the idle state and fires an appropriate event.
+     * @return {void}
+     */
+    var toggleIdleState = function(myelem){
+
+        // curse you, mozilla setTimeout lateness bug!
+        if (typeof myelem === 'number'){
+            myelem = undefined;
+        }
+
+        var obj = $.data(myelem || elem,'idleTimerObj');
+
+        //toggle the state
+        obj.idle = !obj.idle;
+
+        // reset timeout 
+        var elapsed = (+new Date()) - obj.olddate;
+        obj.olddate = +new Date();
+
+        // handle Chrome always triggering idle after js alert or comfirm popup
+        if (obj.idle && (elapsed < timeout)) {
+                obj.idle = false;
+                clearTimeout($.idleTimer.tId);
+                if (enabled)
+                  $.idleTimer.tId = setTimeout(toggleIdleState, timeout);
+                return;
+        }
+        
+        //fire appropriate event
+
+        // create a custom event, but first, store the new state on the element
+        // and then append that string to a namespace
+        var event = jQuery.Event( $.data(elem,'idleTimer', obj.idle ? "idle" : "active" )  + '.idleTimer'   );
+
+        // we do want this to bubble, at least as a temporary fix for jQuery 1.7
+        // event.stopPropagation();
+        $(elem).trigger(event);
+    },
+
+    /**
+     * Stops the idle timer. This removes appropriate event handlers
+     * and cancels any pending timeouts.
+     * @return {void}
+     * @method stop
+     * @static
+     */
+    stop = function(elem){
+
+        var obj = $.data(elem,'idleTimerObj') || {};
+
+        //set to disabled
+        obj.enabled = false;
+
+        //clear any pending timeouts
+        clearTimeout(obj.tId);
+
+        //detach the event handlers
+        $(elem).off('.idleTimer');
+    },
+
+
+    /* (intentionally not documented)
+     * Handles a user event indicating that the user isn't idle.
+     * @param {Event} event A DOM2-normalized event object.
+     * @return {void}
+     */
+    handleUserEvent = function(){
+
+        var obj = $.data(this,'idleTimerObj');
+
+        //clear any existing timeout
+        clearTimeout(obj.tId);
+
+
+
+        //if the idle timer is enabled
+        if (obj.enabled){
+
+
+            //if it's idle, that means the user is no longer idle
+            if (obj.idle){
+                toggleIdleState(this);
+            }
+
+            //set a new timeout
+            obj.tId = setTimeout(toggleIdleState, obj.timeout);
+
+        }
+     };
+
+
+    /**
+     * 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 $.idleTimer
+     * @static
+     */
+
+
+    var obj = $.data(elem,'idleTimerObj') || {};
+
+    obj.olddate = obj.olddate || +new Date();
+
+    //assign a new timeout if necessary
+    if (typeof newTimeout === "number"){
+        timeout = newTimeout;
+    } else if (newTimeout === 'destroy') {
+        stop(elem);
+        return this;
+    } else if (newTimeout === 'getElapsedTime'){
+        return (+new Date()) - obj.olddate;
+    }
+
+    //assign appropriate event handlers
+    $(elem).on($.trim((events+' ').split(' ').join('.idleTimer ')),handleUserEvent);
+
+
+    obj.idle    = idle;
+    obj.enabled = enabled;
+    obj.timeout = timeout;
+
+
+    //set a timeout to toggle state
+    obj.tId = setTimeout(toggleIdleState, obj.timeout);
+
+    // assume the user is active for the first x seconds.
+    $.data(elem,'idleTimer',"active");
+
+    // store our instance on the object
+    $.data(elem,'idleTimerObj',obj);
+
+
+
+}; // end of $.idleTimer()
+
+
+// v0.9 API for defining multiple timers.
+$.fn.idleTimer = function(newTimeout){
+    if(this[0]){
+        $.idleTimer(newTimeout,this[0]);
+    }
+
+    return this;
+};
+
+
+})(jQuery);

public/stylesheets/sass/new-templates.scss

@@ -256,9 +256,31 @@ $pane-width: 420px;
   }
 }
 
+#post-nav {
+  @include transition(opacity, 0.5s);
+  @include opacity(1);
+}
+
+body.idle {
+  #post-nav {
+    @include opacity(0);
+
+    .nav-arrow{
+      &.right {
+        margin-right: -40px;
+      }
+
+      &.left {
+        margin-left: -40px;
+      }
+    }
+
+  }
+}
+
 .nav-arrow {
   @include opacity(0.8);
-  @include transition(background-color, 0.3s);
+  @include transition(all, 0.3s);
 
   display: table;
 

spec/javascripts/support/jasmine.yml

@@ -26,6 +26,7 @@ src_files:
   - public/javascripts/vendor/jquery.expander.js
   - public/javascripts/vendor/jquery.charcount.js
   - public/javascripts/vendor/jquery.mentionsInput.js
+  - public/javascripts/vendor/jquery.idle-timer.js
   - public/javascripts/vendor/timeago.js
   - public/javascripts/vendor/facebox.js
   - public/javascripts/vendor/markdown/*