diff --git a/packages/ember-routing-htmlbars/lib/keywords/element-action.js b/packages/ember-routing-htmlbars/lib/keywords/element-action.js index 28d96237d80..ac94580cc78 100644 --- a/packages/ember-routing-htmlbars/lib/keywords/element-action.js +++ b/packages/ember-routing-htmlbars/lib/keywords/element-action.js @@ -1,5 +1,6 @@ import { assert } from 'ember-metal/debug'; import { uuid } from 'ember-metal/utils'; +import { read } from 'ember-metal/streams/utils'; import run from 'ember-metal/run_loop'; import { readUnwrappedModel } from 'ember-views/streams/utils'; import { isSimpleClick } from 'ember-views/system/utils'; @@ -79,15 +80,15 @@ ActionHelper.registerAction = function({ actionId, node, eventName, preventDefau actions.push({ eventName, handler(event) { - if (!isAllowedEvent(event, allowedKeys)) { + if (!isAllowedEvent(event, read(allowedKeys))) { return true; } - if (preventDefault !== false) { + if (read(preventDefault) !== false) { event.preventDefault(); } - if (bubbles === false) { + if (read(bubbles) === false) { event.stopPropagation(); } diff --git a/packages/ember-routing-htmlbars/tests/helpers/element_action_test.js b/packages/ember-routing-htmlbars/tests/helpers/element_action_test.js index dd1b58f1c63..8f771876e86 100644 --- a/packages/ember-routing-htmlbars/tests/helpers/element_action_test.js +++ b/packages/ember-routing-htmlbars/tests/helpers/element_action_test.js @@ -259,6 +259,76 @@ QUnit.test('handles whitelisted modifier keys', function() { ok(shortcutHandlerWasCalled, 'The "any" shortcut\'s event handler was called'); }); +QUnit.test('handles whitelisted bound modifier keys', function() { + var eventHandlerWasCalled = false; + var shortcutHandlerWasCalled = false; + + var controller = EmberController.extend({ + altKey: 'alt', + anyKey: 'any', + actions: { + edit() { eventHandlerWasCalled = true; }, + shortcut() { shortcutHandlerWasCalled = true; } + } + }).create(); + + view = EmberView.create({ + controller: controller, + template: compile('click me
click me too
') + }); + + runAppend(view); + + var actionId = view.$('a[data-ember-action]').attr('data-ember-action'); + + ok(ActionManager.registeredActions[actionId], 'The action was registered'); + + var e = jQuery.Event('click'); + e.altKey = true; + view.$('a').trigger(e); + + ok(eventHandlerWasCalled, 'The event handler was called'); + + e = jQuery.Event('click'); + e.ctrlKey = true; + view.$('div').trigger(e); + + ok(shortcutHandlerWasCalled, 'The "any" shortcut\'s event handler was called'); +}); + +QUnit.test('handles whitelisted bound modifier keys with current value', function(assert) { + var editHandlerWasCalled = false; + + var controller = EmberController.extend({ + acceptedKeys: 'alt', + actions: { + edit() { editHandlerWasCalled = true; } + } + }).create(); + + view = EmberView.create({ + controller: controller, + template: compile('click me') + }); + + runAppend(view); + + var e = jQuery.Event('click'); + e.altKey = true; + view.$('a').trigger(e); + + ok(editHandlerWasCalled, 'event handler was called'); + + editHandlerWasCalled = false; + run(() => { + controller.set('acceptedKeys', ''); + }); + + view.$('a').trigger(e); + + ok(!editHandlerWasCalled, 'event handler was not called'); +}); + QUnit.test('should be able to use action more than once for the same event within a view', function() { var editWasCalled = false; var deleteWasCalled = false; @@ -346,6 +416,90 @@ QUnit.test('the event should not bubble if `bubbles=false` is passed', function( equal(originalEventHandlerWasCalled, true, 'The original event handler was called'); }); +QUnit.test('the event should not bubble if `bubbles=false` is passed bound', function() { + var editWasCalled = false; + var deleteWasCalled = false; + var originalEventHandlerWasCalled = false; + + var controller = EmberController.extend({ + isFalse: false, + actions: { + edit() { editWasCalled = true; }, + 'delete'() { deleteWasCalled = true; } + } + }).create(); + + view = EmberView.create({ + controller: controller, + template: compile( + 'editdelete' + ), + click() { originalEventHandlerWasCalled = true; } + }); + + runAppend(view); + + view.$('#edit').trigger('click'); + + equal(editWasCalled, true, 'The edit action was called'); + equal(deleteWasCalled, false, 'The delete action was not called'); + equal(originalEventHandlerWasCalled, false, 'The original event handler was not called'); + + editWasCalled = deleteWasCalled = originalEventHandlerWasCalled = false; + + view.$('#delete').trigger('click'); + + equal(editWasCalled, false, 'The edit action was not called'); + equal(deleteWasCalled, true, 'The delete action was called'); + equal(originalEventHandlerWasCalled, false, 'The original event handler was not called'); + + editWasCalled = deleteWasCalled = originalEventHandlerWasCalled = false; + + view.$().trigger('click'); + + equal(editWasCalled, false, 'The edit action was not called'); + equal(deleteWasCalled, false, 'The delete action was not called'); + equal(originalEventHandlerWasCalled, true, 'The original event handler was called'); +}); + +QUnit.test('the event bubbling depend on the bound parameter', function() { + var editWasCalled = false; + var originalEventHandlerWasCalled = false; + + var controller = EmberController.extend({ + shouldBubble: false, + actions: { + edit() { editWasCalled = true; } + } + }).create(); + + view = EmberView.create({ + controller: controller, + template: compile( + 'edit' + ), + click() { originalEventHandlerWasCalled = true; } + }); + + runAppend(view); + + view.$('#edit').trigger('click'); + + equal(editWasCalled, true, 'The edit action was called'); + equal(originalEventHandlerWasCalled, false, 'The original event handler was not called'); + + editWasCalled = originalEventHandlerWasCalled = false; + + run(() => { + controller.set('shouldBubble', true); + }); + + view.$('#edit').trigger('click'); + + equal(editWasCalled, true, 'The edit action was not called'); + equal(originalEventHandlerWasCalled, true, 'The original event handler was called'); +}); + QUnit.test('should work properly in an #each block', function() { var eventHandlerWasCalled = false; @@ -1002,6 +1156,38 @@ QUnit.test('should respect preventDefault=false option if provided', function() equal(event.isDefaultPrevented(), false, 'should not preventDefault'); }); +QUnit.test('should respect preventDefault option if provided bound', function() { + view = EmberView.create({ + template: compile('Hi') + }); + + var controller = EmberController.extend({ + shouldPreventDefault: false, + actions: { + show() { } + } + }).create(); + + run(function() { + view.set('controller', controller); + runAppend(view); + }); + + var event = jQuery.Event('click'); + view.$('a').trigger(event); + + equal(event.isDefaultPrevented(), false, 'should not preventDefault'); + + run(() => { + controller.set('shouldPreventDefault', true); + }); + + event = jQuery.Event('click'); + view.$('a').trigger(event); + + equal(event.isDefaultPrevented(), true, 'should preventDefault'); +}); + QUnit.module('ember-routing-htmlbars: action helper - action target without `controller`', { setup() { owner = buildOwner();