Improved scrolling with keyboard shortcuts.

LICENSE-3RD-PARTY.txt

@@ -82,11 +82,6 @@ Copyright: @leChanteaux <santiago at mural.ly>
            Mural.ly Dev Team <dev at mural.ly>
 License: dfyw
 -----------------------------------------------------------------------------
-jquery.visible.js
-Source: https://github.com/customd/jquery-visible
-Copyright: 2012, Digital Fusion
-License: MIT license
------------------------------------------------------------------------------
 marked.js
 Source: https://github.com/chjj/marked
 Copyright: 2011-2014, Christopher Jeffrey

app/assets/javascripts/app/controllers/_application_controller.coffee

@@ -134,6 +134,11 @@ class App.Controller extends Spine.Controller
 
     @delay(a, delay)
 
+  scrollToIfNeeded: (element, position = true) ->
+    return if !element
+    return if !element.get(0)
+    element.get(0).scrollIntoView(position)
+
   shake: (element) ->
 
     # this part is from wordpress 3, thanks to open source

app/assets/javascripts/app/controllers/_dashboard/first_steps.coffee

@@ -6,7 +6,6 @@ class App.DashboardFirstSteps extends App.Controller
 
   constructor: ->
     super
-
     @load()
 
   load: =>
@@ -23,15 +22,14 @@ class App.DashboardFirstSteps extends App.Controller
       data: data
     )
 
-  scrollIntoView: (e) ->
+  scrollIntoView: (e) =>
     href = $(e.currentTarget).attr('href')
     return if !href
     return if href is '#'
-    delay = ->
+    delay = =>
-      element = $("[href='#{href}']").get(0)
+      element = $("[href='#{href}']")
-      return if !element
+      @scrollToIfNeeded(element)
-      element.scrollIntoView()
+    @delay(delay, 40)
-    @delay(delay, 20)
 
   inviteAgent: (e) =>
     e.preventDefault()
@@ -50,4 +48,3 @@ class App.DashboardFirstSteps extends App.Controller
       screen: 'invite_customer'
       role: 'Customer'
     )
-

app/assets/javascripts/app/controllers/navigation.coffee

@@ -246,12 +246,9 @@ class App.Navigation extends App.ControllerWidgetPermanent
         prev.addClass('is-hover').popover('show')
 
     if next
-      element = next.get(0)
+      @scrollToIfNeeded(next, true)
     if prev
-      element = prev.get(0)
+      @scrollToIfNeeded(prev, false)
-    return if !element
-    return if $(element).visible(true)
-    element.scrollIntoView()
 
   emptyAndClose: =>
     @$('#global-search').val('').blur()

app/assets/javascripts/app/controllers/widget/keyboard_shortcuts.coffee

@@ -139,11 +139,21 @@ App.Config.set(
               callback: (e) ->
                 e.preventDefault()
                 App.Event.trigger('keyboard_shortcuts_close')
-                if $('#navigation .tasks .is-active').get(0)
+                scollIfNeeded = (element) ->
-                  if $('#navigation .tasks .is-active').next().get(0)
+                  return if !element
-                    $('#navigation .tasks .is-active').next().find('div').first().click()
+                  return if !element.get(0)
+                  element.get(0).scrollIntoView(false)
+                current = $('#navigation .tasks .is-active')
+                if current.get(0)
+                  next = current.next()
+                  if next.get(0)
+                    next.find('div').first().click()
+                    scollIfNeeded(next)
                     return
-                $('#navigation .tasks .task').first().find('div').first().click()
+                prev = $('#navigation .tasks .task').first()
+                if prev.get(0)
+                  prev.find('div').first().click()
+                  scollIfNeeded(prev)
             }
             {
               key: 'shift+tab'
@@ -152,11 +162,21 @@ App.Config.set(
               callback: (e) ->
                 e.preventDefault()
                 App.Event.trigger('keyboard_shortcuts_close')
-                if $('#navigation .tasks .is-active').get(0)
+                scollIfNeeded = (element) ->
-                  if $('#navigation .tasks .is-active').prev().get(0)
+                  return if !element
-                    $('#navigation .tasks .is-active').prev().find('div').first().click()
+                  return if !element.get(0)
+                  element.get(0).scrollIntoView(true)
+                current = $('#navigation .tasks .is-active')
+                if current.get(0)
+                  prev = current.prev()
+                  if prev.get(0)
+                    prev.find('div').first().click()
+                    scollIfNeeded(prev)
                     return
-                $('#navigation .tasks .task').last().find('div').first().click()
+                last = $('#navigation .tasks .task').last()
+                if last.get(0)
+                  last.find('div').first().click()
+                  scollIfNeeded(last)
             }
             {
               key: 'return'

app/assets/javascripts/app/controllers/widget/online_notification.coffee

@@ -92,12 +92,9 @@ class App.OnlineNotificationWidget extends App.Controller
         prev.addClass('is-hover')
 
     if next
-      element = next.get(0)
+      @scrollToIfNeeded(next, false)
     if prev
-      element = prev.get(0)
+      @scrollToIfNeeded(prev, true)
-    return if !element
-    return if $(element).visible(true)
-    element.scrollIntoView()
 
   counterUpdate: (count) =>
     if !count

app/assets/javascripts/app/lib/base/jquery.visible.js

@@ -1,68 +0,0 @@
-(function($){
-
-    /**
-     * Copyright 2012, Digital Fusion
-     * Licensed under the MIT license.
-     * http://teamdf.com/jquery-plugins/license/
-     *
-     * @author Sam Sehnert
-     * @desc A small plugin that checks whether elements are within
-     *       the user visible viewport of a web browser.
-     *       only accounts for vertical position, not horizontal.
-     */
-    var $w = $(window);
-    $.fn.visible = function(partial,hidden,direction){
-
-        if (this.length < 1)
-            return;
-
-        var $t        = this.length > 1 ? this.eq(0) : this,
-            t         = $t.get(0),
-            vpWidth   = $w.width(),
-            vpHeight  = $w.height(),
-            direction = (direction) ? direction : 'both',
-            clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true;
-
-        if (typeof t.getBoundingClientRect === 'function'){
-
-            // Use this native browser method, if available.
-            var rec = t.getBoundingClientRect(),
-                tViz = rec.top    >= 0 && rec.top    <  vpHeight,
-                bViz = rec.bottom >  0 && rec.bottom <= vpHeight,
-                lViz = rec.left   >= 0 && rec.left   <  vpWidth,
-                rViz = rec.right  >  0 && rec.right  <= vpWidth,
-                vVisible   = partial ? tViz || bViz : tViz && bViz,
-                hVisible   = partial ? lViz || rViz : lViz && rViz;
-
-            if(direction === 'both')
-                return clientSize && vVisible && hVisible;
-            else if(direction === 'vertical')
-                return clientSize && vVisible;
-            else if(direction === 'horizontal')
-                return clientSize && hVisible;
-        } else {
-
-            var viewTop         = $w.scrollTop(),
-                viewBottom      = viewTop + vpHeight,
-                viewLeft        = $w.scrollLeft(),
-                viewRight       = viewLeft + vpWidth,
-                offset          = $t.offset(),
-                _top            = offset.top,
-                _bottom         = _top + $t.height(),
-                _left           = offset.left,
-                _right          = _left + $t.width(),
-                compareTop      = partial === true ? _bottom : _top,
-                compareBottom   = partial === true ? _top : _bottom,
-                compareLeft     = partial === true ? _right : _left,
-                compareRight    = partial === true ? _left : _right;
-
-            if(direction === 'both')
-                return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)) && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
-            else if(direction === 'vertical')
-                return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop));
-            else if(direction === 'horizontal')
-                return !!clientSize && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
-        }
-    };
-
-})(jQuery);