feat: add client message to notify host of click events

COMUI-201

packages/iframe-coordinator/package.json

@@ -49,7 +49,7 @@
     "lint.format": "prettier --check **/*.ts **/*.tsx",
     "lint": "tslint --project tsconfig.json && npm run lint.format",
     "start": "webpack --watch",
-    "start-client-example": "cd ./client-app-example && npm start",
+    "start-client-example": "cd ../../apps/ifc-example-client && npm start",
     "test": "karma start --single-run",
     "test.watch": "karma start",
     "test.watch.chrome": "karma start --browsers=Chrome"

packages/iframe-coordinator/src/client.ts

@@ -58,7 +58,6 @@ export interface ClientConfigOptions {
  */
 export class Client {
   private _isStarted: boolean;
-  private _isInterceptingLinksStarted: boolean;
   private _clientWindow: Window;
   private _environmentData: EnvData;
   private _envDataEmitter: InternalEventEmitter<EnvData>;
@@ -67,6 +66,7 @@ export class Client {
   private _publishExposedEmitter: EventEmitter<Publication>;
   private _registeredKeys: KeyData[];
   private _assignedRoute: string | null;
+  private _shouldInterceptLinks: boolean;
 
   /**
    * Creates a new client.
@@ -187,6 +187,14 @@ export class Client {
   };
 
   private _onWindowClick = (event: MouseEvent) => {
+    this._sendToHost({ msgType: 'clickFired', msg: {} });
+
+    if (this._shouldInterceptLinks) {
+      this._interceptLink(event);
+    }
+  };
+
+  private _interceptLink = (event: MouseEvent) => {
     const target = event.target as HTMLElement;
     if (target.tagName.toLowerCase() === 'a' && event.button === 0) {
       event.preventDefault();
@@ -355,34 +363,25 @@ bad input into one of the iframe-coordinator client methods.
 
     this._clientWindow.addEventListener('message', this._onWindowMessage);
     this._clientWindow.addEventListener('keydown', this._onKeyDown);
+    this._clientWindow.addEventListener('click', this._onWindowClick);
     this._sendToHost(Lifecycle.startedMessage);
   }
 
   /**
-   * Adds a global click handler to the client window that intercepts clicks on anchor elements
+   * Allows the click handler on the client window to intercept clicks on anchor elements
    * and makes a nav request to the host based on the element's href. This should be
    * avoided for complex applications as it can interfere with things like download
    * links that you may not want to intercept.
    */
   public startInterceptingLinks(): void {
-    if (this._isInterceptingLinksStarted) {
-      return;
-    }
-
-    this._isInterceptingLinksStarted = true;
-    this._clientWindow.addEventListener('click', this._onWindowClick);
+    this._shouldInterceptLinks = true;
   }
 
   /**
-   * Removes the global click handler that intercepts clicks on anchor elements.
+   * Turns off the behavior of intercepting link clicks in the client window click handler.
    */
   public stopInterceptingLinks(): void {
-    if (!this._isInterceptingLinksStarted) {
-      return;
-    }
-
-    this._isInterceptingLinksStarted = false;
-    this._clientWindow.removeEventListener('click', this._onWindowClick);
+    this._shouldInterceptLinks = true;
   }
 
   /**
@@ -407,6 +406,7 @@ bad input into one of the iframe-coordinator client methods.
     this._isStarted = false;
     this._clientWindow.removeEventListener('message', this._onWindowMessage);
     this._clientWindow.removeEventListener('keydown', this._onKeyDown);
+    this._clientWindow.removeEventListener('click', this._onWindowClick);
     this.stopInterceptingLinks();
   }
 

packages/iframe-coordinator/src/messages/Click.ts

@@ -0,0 +1,18 @@
+import { constant, Decoder, object } from 'decoders';
+import { labeledDecoder, LabeledMsg } from './LabeledMsg';
+
+/**
+ * A message used to notify the host that a click (mousedown followed by mouseup)
+ * occurred in the client application.
+ */
+export interface LabeledClick extends LabeledMsg<'clickFired', {}> {
+  /** Message identifier */
+  msgType: 'clickFired';
+}
+
+const decoder: Decoder<LabeledClick> = labeledDecoder(
+  constant<'clickFired'>('clickFired'),
+  object({})
+);
+
+export { decoder };

packages/iframe-coordinator/src/messages/ClientToHost.ts

@@ -1,4 +1,5 @@
 import { dispatch, guard } from 'decoders';
+import { decoder as clickDecoder, LabeledClick } from './Click';
 import { decoder as keyDownDecoder, LabeledKeyDown } from './KeyDown';
 import { LabeledStarted, startedDecoder } from './Lifecycle';
 import { decoder as modalDecoder, LabeledModalRequest } from './ModalRequest';
@@ -16,6 +17,7 @@ import {
 export type ClientToHost =
   | LabeledPublication
   | LabeledNotification
+  | LabeledClick
   | LabeledNavRequest
   | LabeledStarted
   | LabeledKeyDown
@@ -32,6 +34,7 @@ export function validate(msg: any): ClientToHost {
       publish: publicationDecoder,
       registeredKeyFired: keyDownDecoder,
       client_started: startedDecoder,
+      clickFired: clickDecoder,
       navRequest: navRequestDecoder,
       notifyRequest: notifyDecoder,
       toastRequest: notifyDecoder,

packages/iframe-coordinator/src/specs/client.spec.ts

@@ -426,6 +426,7 @@ describe('client', () => {
     let mockElement;
     describe('when click event target is an anchor', () => {
       beforeEach(() => {
+        client.start();
         client.startInterceptingLinks();
         mockElement = document.createElement('a');
         mockElement.setAttribute('href', 'http://www.example.com/');
@@ -447,10 +448,21 @@ describe('client', () => {
           'https://example.com'
         );
       });
+
+      it('should notify host of a click event', () => {
+        expect(mockFrameWindow.parent.postMessage).toHaveBeenCalledWith(
+          applyClientProtocol({
+            msgType: 'clickFired',
+            msg: {}
+          }),
+          'https://example.com'
+        );
+      });
     });
 
     describe('when click event target is not an anchor', () => {
       beforeEach(() => {
+        client.start();
         client.startInterceptingLinks();
         mockFrameWindow.parent.postMessage.calls.reset();
         mockElement = document.createElement('div');
@@ -464,7 +476,20 @@ describe('client', () => {
       });
 
       it('should not notify host of navigation request', () => {
-        expect(mockFrameWindow.parent.postMessage).not.toHaveBeenCalled();
+        expect(mockFrameWindow.parent.postMessage).not.toHaveBeenCalledWith(
+          jasmine.objectContaining({ msgType: 'navRequest' }),
+          jasmine.anything()
+        );
+      });
+
+      it('should notify host of a click event', () => {
+        expect(mockFrameWindow.parent.postMessage).toHaveBeenCalledWith(
+          applyClientProtocol({
+            msgType: 'clickFired',
+            msg: {}
+          }),
+          'https://example.com'
+        );
       });
     });