Adds new Action Options, namely :self and :!self (#546)

Co-authored-by: David Heinemeier Hansson <[email protected]>

Author: Nipun Paradkar

docs/reference/actions.md

@@ -107,6 +107,7 @@ Custom action option | Description
 -------------------- | -----------
 `:stop`              | calls `.stopPropagation()` on the event before invoking the method
 `:prevent`           | calls `.preventDefault()` on the event before invoking the method
+`:self`              | only invokes the method if the event was fired by the element itself
 
 ## Event Objects
 

src/core/binding.ts

@@ -31,7 +31,7 @@ export class Binding {
   }
 
   handleEvent(event: Event) {
-    if (this.willBeInvokedByEvent(event)) {
+    if (this.willBeInvokedByEvent(event) && this.shouldBeInvokedPerSelf(event)) {
       this.processStopPropagation(event);
       this.processPreventDefault(event);
 
@@ -77,6 +77,14 @@ export class Binding {
     }
   }
 
+  private shouldBeInvokedPerSelf(event: Event): boolean {
+    if (this.action.eventOptions.self === true) {
+      return this.action.element === event.target
+    } else {
+      return true
+    }
+  }
+
   private willBeInvokedByEvent(event: Event): boolean {
     const eventTarget = event.target
     if (this.element === eventTarget) {

src/core/event_modifiers.ts

@@ -1,4 +1,5 @@
 export interface EventModifiers extends AddEventListenerOptions {
   stop?: boolean;
   prevent?: boolean;
+  self?: boolean;
 }

src/tests/modules/core/event_options_tests.ts

@@ -190,6 +190,26 @@ export default class EventOptionsTests extends LogControllerTestCase {
     )
   }
 
+  async "test self option"() {
+    this.setAction(this.buttonElement, "click->c#log:self")
+    await this.nextFrame
+
+    await this.triggerEvent(this.buttonElement, "click")
+
+    this.assertActions(
+      { name: "log", eventType: "click" }
+    )
+  }
+
+  async "test self option on parent"() {
+    this.setAction(this.element, "click->c#log:self")
+    await this.nextFrame
+
+    await this.triggerEvent(this.buttonElement, "click")
+
+    this.assertNoActions()
+  }
+
   setAction(element: Element, value: string) {
     element.setAttribute("data-action", value)
   }