Add "Quick Submit" JS behavior

This commit is contained in:
Robert Speicher 2015-10-05 18:19:11 -04:00
parent 38fbfb9fe6
commit 01d0926bc1
3 changed files with 100 additions and 0 deletions

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

View 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))

View file

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