From 2c0cfa53dceaeb276b0f15e2e27ec502792963c5 Mon Sep 17 00:00:00 2001 From: danielgrippi Date: Fri, 24 Feb 2012 10:06:16 -0800 Subject: [PATCH] don't show left-right nav when idle --- config/assets.yml | 1 + public/javascripts/app/pages/post-viewer.js | 13 + .../javascripts/vendor/jquery.idle-timer.js | 246 ++++++++++++++++++ public/stylesheets/sass/new-templates.scss | 24 +- spec/javascripts/support/jasmine.yml | 1 + 5 files changed, 284 insertions(+), 1 deletion(-) create mode 100644 public/javascripts/vendor/jquery.idle-timer.js diff --git a/config/assets.yml b/config/assets.yml index 0f0d36e39..64ed027cf 100644 --- a/config/assets.yml +++ b/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 diff --git a/public/javascripts/app/pages/post-viewer.js b/public/javascripts/app/pages/post-viewer.js index a3811365f..acc3b0403 100644 --- a/public/javascripts/app/pages/post-viewer.js +++ b/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(); }, diff --git a/public/javascripts/vendor/jquery.idle-timer.js b/public/javascripts/vendor/jquery.idle-timer.js new file mode 100644 index 000000000..8df88d61e --- /dev/null +++ b/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); diff --git a/public/stylesheets/sass/new-templates.scss b/public/stylesheets/sass/new-templates.scss index ba8b0f115..1d219f3a2 100644 --- a/public/stylesheets/sass/new-templates.scss +++ b/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; diff --git a/spec/javascripts/support/jasmine.yml b/spec/javascripts/support/jasmine.yml index 2ab9e5978..c610f3783 100644 --- a/spec/javascripts/support/jasmine.yml +++ b/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/*