Fix: Print poup and buffering DOM references (#980)

box · Apr 8, 2019 · cbc57a1 · cbc57a1
1 parent 47eadd9
commit cbc57a1
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 22 deletions.
diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js
@@ -850,7 +850,7 @@ class DocBaseViewer extends BaseViewer {
      * @return {void}
      */
     initPrint() {
-        this.printPopup = new Popup(this.containerEl);
+        this.printPopup = new Popup(this.rootEl);
 
         const printCheckmark = document.createElement('div');
         printCheckmark.className = `bp-print-check ${CLASS_HIDDEN}`;

diff --git a/src/lib/viewers/media/_mediaBase.scss b/src/lib/viewers/media/_mediaBase.scss
@@ -76,23 +76,27 @@
 }
 
 // When media is buffering, show only the crawler
-.bp-is-buffering .bp-loading-wrapper,
-.bp-is-buffering.bp-loaded .bp-loading-wrapper {
-    // Show loading indicator immediately
-    animation-name: none;
-    display: block;
+.bp {
+    &,
+    &.bp-loaded {
+        .bp-is-buffering .bp-loading-wrapper {
+            // Show loading indicator immediately
+            animation-name: none;
+            display: flex;
 
-    .bp-icon,
-    .bp-loading-text,
-    .bp-loading-btn-container {
-        display: none;
-    }
+            .bp-icon,
+            .bp-loading-text,
+            .bp-loading-btn-container {
+                display: none;
+            }
 
-    .bp-crawler-wrapper {
-        position: static;
+            .bp-crawler-wrapper {
+                position: static;
 
-        .bp-crawler div {
-            background-color: $box-blue;
+                .bp-crawler div {
+                    background-color: $box-blue;
+                }
+            }
         }
     }
 }

diff --git a/src/lib/viewers/office/OfficeViewer.js b/src/lib/viewers/office/OfficeViewer.js
@@ -131,7 +131,7 @@ class OfficeViewer extends BaseViewer {
      * @return {void}
      */
     initPrint() {
-        this.printPopup = new Popup(this.containerEl);
+        this.printPopup = new Popup(this.rootEl);
 
         const printCheckmark = document.createElement('div');
         printCheckmark.className = `bp-print-check ${CLASS_HIDDEN}`;

diff --git a/src/lib/viewers/office/__tests__/OfficeViewer-test.js b/src/lib/viewers/office/__tests__/OfficeViewer-test.js
@@ -4,7 +4,7 @@ import BaseViewer from '../../BaseViewer';
 import Browser from '../../../Browser';
 import Location from '../../../Location';
 import OfficeViewer from '../OfficeViewer';
-import { CLASS_HIDDEN } from '../../../constants';
+import { CLASS_HIDDEN, SELECTOR_BOX_PREVIEW } from '../../../constants';
 import { ICON_PRINT_CHECKMARK } from '../../../icons/icons';
 
 const PRINT_TIMEOUT_MS = 1000; // Wait 1s before trying to print
@@ -16,6 +16,7 @@ const sandbox = sinon.sandbox.create();
 let office;
 let stubs = {};
 let containerEl;
+let rootEl;
 
 describe('lib/viewers/office/OfficeViewer', () => {
     let clock;
@@ -28,6 +29,7 @@ describe('lib/viewers/office/OfficeViewer', () => {
     beforeEach(() => {
         fixture.load('viewers/office/__tests__/OfficeViewer-test.html');
         containerEl = document.querySelector('.container');
+        rootEl = document.querySelector(SELECTOR_BOX_PREVIEW);
         office = new OfficeViewer({
             container: containerEl,
             file: {
@@ -51,6 +53,7 @@ describe('lib/viewers/office/OfficeViewer', () => {
         clock = sinon.useFakeTimers();
         Object.defineProperty(BaseViewer.prototype, 'setup', { value: sandbox.stub() });
         office.containerEl = containerEl;
+        office.rootEl = rootEl;
     });
 
     afterEach(() => {

diff --git a/src/lib/viewers/text/PlainTextViewer.js b/src/lib/viewers/text/PlainTextViewer.js
@@ -259,7 +259,7 @@ class PlainTextViewer extends TextBaseViewer {
      * @return {void}
      */
     initPrint() {
-        this.printPopup = new Popup(this.containerEl);
+        this.printPopup = new Popup(this.rootEl);
 
         const printCheckmark = document.createElement('div');
         printCheckmark.className = `bp-print-check ${CLASS_HIDDEN}`;

diff --git a/src/lib/viewers/text/__tests__/MarkdownViewer-test.js b/src/lib/viewers/text/__tests__/MarkdownViewer-test.js
@@ -2,12 +2,13 @@
 import MarkdownViewer from '../MarkdownViewer';
 import BaseViewer from '../../BaseViewer';
 import Popup from '../../../Popup';
-import { TEXT_STATIC_ASSETS_VERSION } from '../../../constants';
+import { TEXT_STATIC_ASSETS_VERSION, SELECTOR_BOX_PREVIEW } from '../../../constants';
 import { VIEWER_EVENT } from '../../../events';
 
+const sandbox = sinon.sandbox.create();
 let containerEl;
 let markdown;
-const sandbox = sinon.sandbox.create();
+let rootEl;
 
 describe('lib/viewers/text/MarkdownViewer', () => {
     const setupFunc = BaseViewer.prototype.setup;
@@ -19,6 +20,7 @@ describe('lib/viewers/text/MarkdownViewer', () => {
     beforeEach(() => {
         fixture.load('viewers/text/__tests__/MarkdownViewer-test.html');
         containerEl = document.querySelector('.container');
+        rootEl = document.querySelector(SELECTOR_BOX_PREVIEW);
         markdown = new MarkdownViewer({
             file: {
                 id: 0
@@ -28,6 +30,7 @@ describe('lib/viewers/text/MarkdownViewer', () => {
 
         Object.defineProperty(BaseViewer.prototype, 'setup', { value: sandbox.mock() });
         markdown.containerEl = containerEl;
+        markdown.rootEl = rootEl;
         markdown.setup();
     });
 

diff --git a/src/lib/viewers/text/__tests__/PlainTextViewer-test.js b/src/lib/viewers/text/__tests__/PlainTextViewer-test.js
@@ -6,12 +6,13 @@ import BaseViewer from '../../BaseViewer';
 import Popup from '../../../Popup';
 import TextBaseViewer from '../TextBaseViewer';
 import * as util from '../../../util';
-import { TEXT_STATIC_ASSETS_VERSION } from '../../../constants';
+import { TEXT_STATIC_ASSETS_VERSION, SELECTOR_BOX_PREVIEW } from '../../../constants';
 import { VIEWER_EVENT } from '../../../events';
 
+const sandbox = sinon.sandbox.create();
 let containerEl;
 let text;
-const sandbox = sinon.sandbox.create();
+let rootEl;
 
 describe('lib/viewers/text/PlainTextViewer', () => {
     const setupFunc = BaseViewer.prototype.setup;
@@ -23,6 +24,7 @@ describe('lib/viewers/text/PlainTextViewer', () => {
     beforeEach(() => {
         fixture.load('viewers/text/__tests__/PlainTextViewer-test.html');
         containerEl = document.querySelector('.container');
+        rootEl = document.querySelector(SELECTOR_BOX_PREVIEW);
         text = new PlainTextViewer({
             file: {
                 id: 0,
@@ -40,6 +42,7 @@ describe('lib/viewers/text/PlainTextViewer', () => {
 
         Object.defineProperty(BaseViewer.prototype, 'setup', { value: sandbox.stub() });
         text.containerEl = containerEl;
+        text.rootEl = rootEl;
         text.setup();
     });
 
@@ -304,6 +307,7 @@ describe('lib/viewers/text/PlainTextViewer', () => {
             });
             Object.defineProperty(BaseViewer.prototype, 'setup', { value: sandbox.stub() });
             text.containerEl = containerEl;
+            text.rootEl = rootEl;
             text.setup();
         });