From 7dd3d1547a588c27dcb0fa8569440b67b3dfbb73 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>
---
 .../src/eg2/src/app/staff/sandbox/sandbox.component.html | 14 ++++++++++++++
 .../src/eg2/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 9c6b3f6537..e5b04f0dd5 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
@@ -153,6 +153,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.11.0