From fb5927eeaf47a7702aadc2b42f62389dece17b62 Mon Sep 17 00:00:00 2001 From: Martin Edenhofer Date: Thu, 25 Feb 2016 22:53:14 +0100 Subject: [PATCH] Improved scrolling with keyboard shortcuts. --- LICENSE-3RD-PARTY.txt | 5 -- .../_application_controller.coffee | 5 ++ .../controllers/_dashboard/first_steps.coffee | 13 ++-- .../app/controllers/navigation.coffee | 7 +- .../widget/keyboard_shortcuts.coffee | 36 +++++++--- .../widget/online_notification.coffee | 7 +- .../app/lib/base/jquery.visible.js | 68 ------------------- 7 files changed, 42 insertions(+), 99 deletions(-) delete mode 100644 app/assets/javascripts/app/lib/base/jquery.visible.js diff --git a/LICENSE-3RD-PARTY.txt b/LICENSE-3RD-PARTY.txt index 384ca04bd..98274dce3 100644 --- a/LICENSE-3RD-PARTY.txt +++ b/LICENSE-3RD-PARTY.txt @@ -82,11 +82,6 @@ Copyright: @leChanteaux Mural.ly Dev Team 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 diff --git a/app/assets/javascripts/app/controllers/_application_controller.coffee b/app/assets/javascripts/app/controllers/_application_controller.coffee index d4561fbee..e809d9d7a 100644 --- a/app/assets/javascripts/app/controllers/_application_controller.coffee +++ b/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 diff --git a/app/assets/javascripts/app/controllers/_dashboard/first_steps.coffee b/app/assets/javascripts/app/controllers/_dashboard/first_steps.coffee index f7bbc9375..13378ec1f 100644 --- a/app/assets/javascripts/app/controllers/_dashboard/first_steps.coffee +++ b/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 = -> - element = $("[href='#{href}']").get(0) - return if !element - element.scrollIntoView() - @delay(delay, 20) + delay = => + element = $("[href='#{href}']") + @scrollToIfNeeded(element) + @delay(delay, 40) inviteAgent: (e) => e.preventDefault() @@ -50,4 +48,3 @@ class App.DashboardFirstSteps extends App.Controller screen: 'invite_customer' role: 'Customer' ) - diff --git a/app/assets/javascripts/app/controllers/navigation.coffee b/app/assets/javascripts/app/controllers/navigation.coffee index f4ce226d3..e2c0e0cbd 100644 --- a/app/assets/javascripts/app/controllers/navigation.coffee +++ b/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) - return if !element - return if $(element).visible(true) - element.scrollIntoView() + @scrollToIfNeeded(prev, false) emptyAndClose: => @$('#global-search').val('').blur() diff --git a/app/assets/javascripts/app/controllers/widget/keyboard_shortcuts.coffee b/app/assets/javascripts/app/controllers/widget/keyboard_shortcuts.coffee index 1273f2bc5..70b5429ac 100644 --- a/app/assets/javascripts/app/controllers/widget/keyboard_shortcuts.coffee +++ b/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) - if $('#navigation .tasks .is-active').next().get(0) - $('#navigation .tasks .is-active').next().find('div').first().click() + scollIfNeeded = (element) -> + return if !element + 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) - if $('#navigation .tasks .is-active').prev().get(0) - $('#navigation .tasks .is-active').prev().find('div').first().click() + scollIfNeeded = (element) -> + return if !element + 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' diff --git a/app/assets/javascripts/app/controllers/widget/online_notification.coffee b/app/assets/javascripts/app/controllers/widget/online_notification.coffee index 2db3d2e98..4ff95bb7a 100644 --- a/app/assets/javascripts/app/controllers/widget/online_notification.coffee +++ b/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) - return if !element - return if $(element).visible(true) - element.scrollIntoView() + @scrollToIfNeeded(prev, true) counterUpdate: (count) => if !count diff --git a/app/assets/javascripts/app/lib/base/jquery.visible.js b/app/assets/javascripts/app/lib/base/jquery.visible.js deleted file mode 100644 index 745956ad9..000000000 --- a/app/assets/javascripts/app/lib/base/jquery.visible.js +++ /dev/null @@ -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);