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>

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 54cd87d..7406c1f 100644 (file)
--- 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 543e3cb..4dd8892 100644 (file)
--- 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); },