From 01d0926bc16bb82ef676c35a5a61b8e90a82654c Mon Sep 17 00:00:00 2001 From: Robert Speicher Date: Mon, 5 Oct 2015 18:19:11 -0400 Subject: [PATCH] Add "Quick Submit" JS behavior --- .../behaviors/quick_submit.js.coffee | 29 +++++++++ .../behaviors/quick_submit_spec.js.coffee | 65 +++++++++++++++++++ .../fixtures/behaviors/quick_submit.html.haml | 6 ++ 3 files changed, 100 insertions(+) create mode 100644 app/assets/javascripts/behaviors/quick_submit.js.coffee create mode 100644 spec/javascripts/behaviors/quick_submit_spec.js.coffee create mode 100644 spec/javascripts/fixtures/behaviors/quick_submit.html.haml 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 +# +#
+# +# +#
+# +$(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