Add "Quick Submit" JS behavior
This commit is contained in:
parent
38fbfb9fe6
commit
01d0926bc1
3 changed files with 100 additions and 0 deletions
29
app/assets/javascripts/behaviors/quick_submit.js.coffee
Normal file
29
app/assets/javascripts/behaviors/quick_submit.js.coffee
Normal file
|
@ -0,0 +1,29 @@
|
|||
# Quick Submit behavior
|
||||
#
|
||||
# When an input field with the `js-quick-submit` class receives a "Meta+Enter"
|
||||
# (Mac) or "Ctrl+Enter" (Linux/Windows) key combination, its parent form is
|
||||
# submitted.
|
||||
#
|
||||
#= require extensions/jquery
|
||||
#
|
||||
# ### Example Markup
|
||||
#
|
||||
# <form action="/foo">
|
||||
# <input type="text" class="js-quick-submit" />
|
||||
# <textarea class="js-quick-submit"></textarea>
|
||||
# </form>
|
||||
#
|
||||
$(document).on 'keydown.quick_submit', '.js-quick-submit', (e) ->
|
||||
return if e.repeat
|
||||
return unless e.keyCode == 13 # Enter
|
||||
|
||||
if navigator.userAgent.match(/Macintosh/)
|
||||
return unless (e.metaKey && !e.altKey && !e.ctrlKey && !e.shiftKey)
|
||||
else
|
||||
return unless (e.ctrlKey && !e.altKey && !e.metaKey && !e.shiftKey)
|
||||
|
||||
e.preventDefault()
|
||||
|
||||
$form = $(e.target).closest('form')
|
||||
$form.find('input[type=submit], button[type=submit]').disable()
|
||||
$form.submit()
|
65
spec/javascripts/behaviors/quick_submit_spec.js.coffee
Normal file
65
spec/javascripts/behaviors/quick_submit_spec.js.coffee
Normal file
|
@ -0,0 +1,65 @@
|
|||
#= require behaviors/quick_submit
|
||||
|
||||
describe 'Quick Submit behavior', ->
|
||||
fixture.preload('behaviors/quick_submit.html')
|
||||
|
||||
beforeEach ->
|
||||
fixture.load('behaviors/quick_submit.html')
|
||||
|
||||
# Prevent a form submit from moving us off the testing page
|
||||
$('form').submit (e) -> e.preventDefault()
|
||||
|
||||
@spies = {
|
||||
submit: spyOnEvent('form', 'submit')
|
||||
}
|
||||
|
||||
it 'does not respond to other keyCodes', ->
|
||||
$('input').trigger(keydownEvent(keyCode: 32))
|
||||
|
||||
expect(@spies.submit).not.toHaveBeenTriggered()
|
||||
|
||||
it 'does not respond to Enter alone', ->
|
||||
$('input').trigger(keydownEvent(ctrlKey: false, metaKey: false))
|
||||
|
||||
expect(@spies.submit).not.toHaveBeenTriggered()
|
||||
|
||||
it 'disables submit buttons', ->
|
||||
$('textarea').trigger(keydownEvent())
|
||||
|
||||
expect($('input[type=submit]')).toBeDisabled()
|
||||
expect($('button[type=submit]')).toBeDisabled()
|
||||
|
||||
# We cannot stub `navigator.userAgent` for CI's `rake teaspoon` task, so we'll
|
||||
# only run the tests that apply to the current platform
|
||||
if navigator.userAgent.match(/Macintosh/)
|
||||
it 'responds to Meta+Enter', ->
|
||||
$('input').trigger(keydownEvent())
|
||||
|
||||
expect(@spies.submit).toHaveBeenTriggered()
|
||||
|
||||
it 'excludes other modifier keys', ->
|
||||
$('input').trigger(keydownEvent(altKey: true))
|
||||
$('input').trigger(keydownEvent(ctrlKey: true))
|
||||
$('input').trigger(keydownEvent(shiftKey: true))
|
||||
|
||||
expect(@spies.submit).not.toHaveBeenTriggered()
|
||||
else
|
||||
it 'responds to Ctrl+Enter', ->
|
||||
$('input').trigger(keydownEvent())
|
||||
|
||||
expect(@spies.submit).toHaveBeenTriggered()
|
||||
|
||||
it 'excludes other modifier keys', ->
|
||||
$('input').trigger(keydownEvent(altKey: true))
|
||||
$('input').trigger(keydownEvent(metaKey: true))
|
||||
$('input').trigger(keydownEvent(shiftKey: true))
|
||||
|
||||
expect(@spies.submit).not.toHaveBeenTriggered()
|
||||
|
||||
keydownEvent = (options) ->
|
||||
if navigator.userAgent.match(/Macintosh/)
|
||||
defaults = { keyCode: 13, metaKey: true }
|
||||
else
|
||||
defaults = { keyCode: 13, ctrlKey: true }
|
||||
|
||||
$.Event('keydown', $.extend({}, defaults, options))
|
|
@ -0,0 +1,6 @@
|
|||
%form{ action: '/foo' }
|
||||
%input.js-quick-submit{ type: 'text' }
|
||||
%textarea.js-quick-submit
|
||||
|
||||
%input{ type: 'submit'} Submit
|
||||
%button.btn{ type: 'submit' } Submit
|
Loading…
Reference in a new issue