Add "Quick Submit" JS behavior

3 files changed, 100 insertions, 0 deletions

diff --git a/app/assets/javascripts/behaviors/quick_submit.js.coffee b/app/assets/javascripts/behaviors/quick_submit.js.coffee
new file mode 100644
index 00000000000..dc9bd4d94cc
--- /dev/null
+++ b/app/assets/javascripts/behaviors/quick_submit.js.coffee
@@ -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()
diff --git a/spec/javascripts/behaviors/quick_submit_spec.js.coffee b/spec/javascripts/behaviors/quick_submit_spec.js.coffee
new file mode 100644
index 00000000000..6beef28741b
--- /dev/null
+++ b/spec/javascripts/behaviors/quick_submit_spec.js.coffee
@@ -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))
diff --git a/spec/javascripts/fixtures/behaviors/quick_submit.html.haml b/spec/javascripts/fixtures/behaviors/quick_submit.html.haml
new file mode 100644
index 00000000000..b80a28a33ea
--- /dev/null
+++ b/spec/javascripts/fixtures/behaviors/quick_submit.html.haml
@@ -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