From c6b4d1f5d69a38a5bd651257ea2fa46cfefbae24 Mon Sep 17 00:00:00 2001
From: Galen Charlton <gmc@equinoxinitiative.org>
Date: Mon, 1 Apr 2019 18:35:51 -0400
Subject: [PATCH] LP#1831786: add demo of cross-tab communications

This adds to the Angular sandbox page a demo of implementing
cross-tab communications using BroadcastChannel. To quote the
instructions added by this patch:

"To test, open this sandbox in a second browser tab.
Enter something in the input box below, then switch to the other tab
and click anywhere on the page. You should see the message that you
sent to the other browser tab."

Sponsored-by: MassLNC
Sponsored-by: Georgia Public Library Service
Sponsored-by: Indiana State Library
Sponsored-by: CW MARS
Sponsored-by: King County Library System

Signed-off-by: Galen Charlton <gmc@equinoxinitiative.org>
Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>
---
 .../src/app/staff/sandbox/sandbox.component.html | 14 ++++++++++++++
 .../src/app/staff/sandbox/sandbox.component.ts   | 16 ++++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
index 54cd87d11e..7406c1f29c 100644
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.html
@@ -126,6 +126,20 @@
 </div>
 <br/><br/>
 
+<div>
+  <h4>Cross-tab communications example</h4>
+  <p>To test, open this sandbox in a second browser tab. Enter something in the input box below, then switch to the other tab and click anywhere on the page. 
+     You should see the message that you sent to the other browser tab.</p>
+</div>
+<div class="row">
+  <div class="col-lg-3">
+    <input type="text" #sendSbMessage placeholder="message to send to another tab" size="40" (change)="sendMessage($event)">
+  </div>
+  <div class="col-lg-3">
+    message received: {{sbChannelText}}
+  </div>
+</div>
+
 <!-- grid stuff -->
 <ng-template #cellTmpl let-row="row" let-col="col" let-userContext="userContext">
   HELLO {{userContext.hello}}
diff --git a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
index 543e3cb72b..4dd88921a0 100644
--- a/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.ts
@@ -66,6 +66,10 @@ export class SandboxComponent implements OnInit {
     // selector field value on metarecord object
     aMetarecord: string;
 
+    // cross-tab communications example
+    private sbChannel: any;
+    sbChannelText: string;
+
     constructor(
         private idl: IdlService,
         private org: OrgService,
@@ -75,6 +79,10 @@ export class SandboxComponent implements OnInit {
         private format: FormatService,
         private printer: PrintService
     ) {
+        // BroadcastChannel is not yet defined in PhantomJS and elsewhere
+        this.sbChannel = (typeof BroadcastChannel === 'undefined') ?
+            {} : new BroadcastChannel('eg.sbChannel');
+        this.sbChannel.onmessage = (e) => this.sbChannelHandler(e);
     }
 
     ngOnInit() {
@@ -136,6 +144,14 @@ export class SandboxComponent implements OnInit {
         });
     }
 
+    sbChannelHandler = msg => {
+        setTimeout(() => { this.sbChannelText = msg.data.msg; });
+    }
+
+    sendMessage($event) {
+        this.sbChannel.postMessage({msg : $event.target.value});
+    }
+
     openEditor() {
         this.fmRecordEditor.open({size: 'lg'}).then(
             ok => { console.debug(ok); },
-- 
2.43.2