Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Improved scrolling with keyboard shortcuts.

Browse source
This commit is contained in:
Martin Edenhofer 2016-02-25 22:53:14 +01:00
parent 1ff11fe3a4
commit fb5927eeaf
7 changed files with 42 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
LICENSE-3RD-PARTY.txt
View file

@ -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

5
app/assets/javascripts/app/controllers/_application_controller.coffee
View file

@ -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

13
app/assets/javascripts/app/controllers/_dashboard/first_steps.coffee
View file

@ -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'
)

7
app/assets/javascripts/app/controllers/navigation.coffee
View file

@ -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()

36
app/assets/javascripts/app/controllers/widget/keyboard_shortcuts.coffee
View file

@ -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'

7
app/assets/javascripts/app/controllers/widget/online_notification.coffee
View file

@ -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

68
app/assets/javascripts/app/lib/base/jquery.visible.js
View file

@ -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);