Chore: Initializing notifications in PreviewUI once rather than in ea…

…ch Annotator (#262)

- There is one instance of PreviewUI per Preview instance
- Notifications can now be triggered from any viewer with their own custom messages

src/lib/Preview.js

@@ -790,30 +790,45 @@ class Preview extends EventEmitter {
     attachViewerListeners() {
         // Node requires listener attached to 'error'
         this.viewer.addListener('error', this.triggerError);
-        this.viewer.addListener('viewerevent', (data) => {
-            /* istanbul ignore next */
-            switch (data.event) {
-                case 'download':
-                    this.download();
-                    break;
-                case 'reload':
-                    this.show(this.file.id, this.previewOptions);
-                    break;
-                case 'load':
-                    this.finishLoading(data.data);
-                    break;
-                case 'progressstart':
-                    this.ui.startProgressBar();
-                    break;
-                case 'progressend':
-                    this.ui.finishProgressBar();
-                    break;
-                default:
-                    // This includes 'notification', 'preload' and others
-                    this.emit(data.event, data.data);
-                    this.emit('viewerevent', data);
-            }
-        });
+        this.viewer.addListener('viewerevent', this.handleViewerEvents);
+    }
+
+    /**
+     * Handle events emitted by the viewer
+     *
+     * @private
+     * @param {Object} [data] - Viewer event data
+     * @return {void}
+     */
+    handleViewerEvents(data) {
+        /* istanbul ignore next */
+        switch (data.event) {
+            case 'download':
+                this.download();
+                break;
+            case 'reload':
+                this.show(this.file.id, this.previewOptions);
+                break;
+            case 'load':
+                this.finishLoading(data.data);
+                break;
+            case 'progressstart':
+                this.ui.startProgressBar();
+                break;
+            case 'progressend':
+                this.ui.finishProgressBar();
+                break;
+            case 'notificationshow':
+                this.ui.showNotification(data.data);
+                break;
+            case 'notificationhide':
+                this.ui.hideNotification();
+                break;
+            default:
+                // This includes 'notification', 'preload' and others
+                this.emit(data.event, data.data);
+                this.emit('viewerevent', data);
+        }
     }
 
     /**

src/lib/PreviewUI.js

@@ -1,5 +1,6 @@
 import ProgressBar from './ProgressBar';
 import shellTemplate from './shell.html';
+import Notification from './Notification';
 import { insertTemplate } from './util';
 import {
     CLASS_HIDDEN,
@@ -116,6 +117,9 @@ class PreviewUI {
         // Setup loading indicator
         this.setupLoading();
 
+        // Setup notification
+        this.notification = new Notification(this.contentContainer);
+
         // Attach keyboard events
         document.addEventListener('keydown', this.keydownHandler);
 
@@ -285,6 +289,28 @@ class PreviewUI {
         this.progressBar.finish();
     }
 
+    /**
+     * Shows a notification message.
+     *
+     * @public
+     * @param {string} message - Notification message
+     * @param {string} [buttonText] - Optional text to show in button
+     * @return {void}
+     */
+    showNotification(message, buttonText) {
+        this.notification.show(message, buttonText);
+    }
+
+    /**
+     * Hides the notification message. Does nothing if the notification is already hidden.
+     *
+     * @public
+     * @return {void}
+     */
+    hideNotification() {
+        this.notification.hide();
+    }
+
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------

src/lib/__tests__/Preview-test.js

@@ -1236,17 +1236,74 @@ describe('lib/Preview', () => {
     });
 
     describe('attachViewerListeners()', () => {
-        beforeEach(() => {
+        it('should add listeners for error and viewer events', () => {
             stubs.download = sandbox.stub(preview, 'download');
             preview.viewer = {
                 addListener: sandbox.stub()
             };
-        });
 
-        it('should add listeners for error and viewer events', () => {
             preview.attachViewerListeners();
-            expect(preview.viewer.addListener).to.be.calledWith('error');
-            expect(preview.viewer.addListener).to.be.calledWith('viewerevent');
+            expect(preview.viewer.addListener).to.be.calledWith('error', sinon.match.func);
+            expect(preview.viewer.addListener).to.be.calledWith('viewerevent', sinon.match.func);
+        });
+    });
+
+    describe('handleViewerEvents()', () => {
+        it('should call download on download event', () => {
+            sandbox.stub(preview, 'download');
+            preview.handleViewerEvents({ event: 'download' });
+            expect(preview.download).to.be.called;
+        });
+
+        it('should reload preview on reload event', () => {
+            sandbox.stub(preview, 'show');
+            preview.handleViewerEvents({ event: 'reload' });
+            expect(preview.show).to.be.called;
+        });
+
+        it('should finish loading preview on load event', () => {
+            sandbox.stub(preview, 'finishLoading');
+            preview.handleViewerEvents({ event: 'load' });
+            expect(preview.finishLoading).to.be.called;
+        });
+
+        it('should start progress bar on progressstart event', () => {
+            sandbox.stub(preview.ui, 'startProgressBar');
+            preview.handleViewerEvents({ event: 'progressstart' });
+            expect(preview.ui.startProgressBar).to.be.called;
+        });
+
+        it('should finish progress bar on progressend event', () => {
+            sandbox.stub(preview.ui, 'finishProgressBar');
+            preview.handleViewerEvents({ event: 'progressend' });
+            expect(preview.ui.finishProgressBar).to.be.called;
+        });
+
+        it('should show notification with message on notificationshow event', () => {
+            const message = 'notification_message';
+            sandbox.stub(preview.ui, 'showNotification');
+            preview.handleViewerEvents({
+                event: 'notificationshow',
+                data: message
+            });
+            expect(preview.ui.showNotification).to.be.calledWith(message);
+        });
+
+        it('should hide notification on notificationhide event', () => {
+            sandbox.stub(preview.ui, 'hideNotification');
+            preview.handleViewerEvents({ event: 'notificationhide' });
+            expect(preview.ui.hideNotification).to.be.called;
+        });
+
+        it('should emit viewerevent when event does not match', () => {
+            sandbox.stub(preview, 'emit');
+            const data = {
+                event: 'no match',
+                data: 'message'
+            };
+            preview.handleViewerEvents(data);
+            expect(preview.emit).to.be.calledWith(data.event, data.data);
+            expect(preview.emit).to.be.calledWith('viewerevent', data);
         });
     });
 

src/lib/__tests__/PreviewUI-test.js

@@ -57,6 +57,9 @@ describe('lib/PreviewUI', () => {
             // Check progress bar
             expect(resultEl).to.contain(constants.SELECTOR_BOX_PREVIEW_PROGRESS_BAR);
 
+            // Check notification
+            expect(resultEl).to.contain('.bp-notification');
+
             // Check loading state
             const loadingWrapperEl = resultEl.querySelector(constants.SELECTOR_BOX_PREVIEW_LOADING_WRAPPER);
             expect(loadingWrapperEl).to.contain(constants.SELECTOR_BOX_PREVIEW_ICON);
@@ -230,4 +233,26 @@ describe('lib/PreviewUI', () => {
             expect(ui.progressBar.finish).to.be.called;
         });
     });
+
+    describe('showNotification()', () => {
+        it('should show a notification message', () => {
+            ui.notification = {
+                show: sandbox.stub()
+            };
+
+            ui.showNotification('message');
+            expect(ui.notification.show).to.be.called;
+        });
+    });
+
+    describe('hideNotification()', () => {
+        it('should hide the notification message', () => {
+            ui.notification = {
+                hide: sandbox.stub()
+            };
+
+            ui.hideNotification('message');
+            expect(ui.notification.hide).to.be.called;
+        });
+    });
 });