From cbc57a15cc5848db5f3f7a7fb70a8de8cbb7143e Mon Sep 17 00:00:00 2001 From: Conrad Chan Date: Mon, 8 Apr 2019 13:45:55 -0700 Subject: [PATCH] Fix: Print poup and buffering DOM references (#980) --- src/lib/viewers/doc/DocBaseViewer.js | 2 +- src/lib/viewers/media/_mediaBase.scss | 32 +++++++++++-------- src/lib/viewers/office/OfficeViewer.js | 2 +- .../office/__tests__/OfficeViewer-test.js | 5 ++- src/lib/viewers/text/PlainTextViewer.js | 2 +- .../text/__tests__/MarkdownViewer-test.js | 7 ++-- .../text/__tests__/PlainTextViewer-test.js | 8 +++-- 7 files changed, 36 insertions(+), 22 deletions(-) diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js index 4c147426e..59cf4e3c1 100644 --- 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 index 5f939c3cc..5b9de116b 100644 --- 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 index 3f1716561..43a7ff413 100644 --- 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 index 7ab1a7987..12cc4c463 100644 --- 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 index 3c4123078..db5dc6fed 100644 --- 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 index e0998f96f..c5cc8eb06 100644 --- 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 index 824c38a6a..ef194c2e8 100644 --- 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(); });