From cc98b2afe5ffa9d970eedd4a2eef4d1328e47298 Mon Sep 17 00:00:00 2001 From: Conrad Chan Date: Mon, 8 Apr 2019 12:33:51 -0700 Subject: [PATCH 1/3] Fix: Print poup and buffering DOM references --- src/lib/viewers/doc/DocBaseViewer.js | 2 +- src/lib/viewers/media/_mediaBase.scss | 30 +++++++++++++------------ src/lib/viewers/office/OfficeViewer.js | 2 +- src/lib/viewers/text/PlainTextViewer.js | 2 +- 4 files changed, 19 insertions(+), 17 deletions(-) diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js index d81551bfd..888420651 100644 --- a/src/lib/viewers/doc/DocBaseViewer.js +++ b/src/lib/viewers/doc/DocBaseViewer.js @@ -849,7 +849,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..041d55542 100644 --- a/src/lib/viewers/media/_mediaBase.scss +++ b/src/lib/viewers/media/_mediaBase.scss @@ -76,23 +76,25 @@ } // 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, + .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/text/PlainTextViewer.js b/src/lib/viewers/text/PlainTextViewer.js index 6a43702f4..91c41fa6f 100644 --- a/src/lib/viewers/text/PlainTextViewer.js +++ b/src/lib/viewers/text/PlainTextViewer.js @@ -258,7 +258,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}`; From a17a227c2b54b7bbbc97535f667e8eb64e3a569e Mon Sep 17 00:00:00 2001 From: Conrad Chan Date: Mon, 8 Apr 2019 12:55:23 -0700 Subject: [PATCH 2/3] Chore: fix unit tests & PR feedback --- src/lib/viewers/media/_mediaBase.scss | 30 ++++++++++--------- .../office/__tests__/OfficeViewer-test.js | 5 +++- .../text/__tests__/MarkdownViewer-test.js | 5 +++- .../text/__tests__/PlainTextViewer-test.js | 6 +++- 4 files changed, 29 insertions(+), 17 deletions(-) diff --git a/src/lib/viewers/media/_mediaBase.scss b/src/lib/viewers/media/_mediaBase.scss index 041d55542..5b9de116b 100644 --- a/src/lib/viewers/media/_mediaBase.scss +++ b/src/lib/viewers/media/_mediaBase.scss @@ -77,23 +77,25 @@ // When media is buffering, show only the crawler .bp { - &.bp-loaded .bp-is-buffering .bp-loading-wrapper, - .bp-is-buffering .bp-loading-wrapper { - // Show loading indicator immediately - animation-name: none; - display: flex; + &, + &.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/__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/__tests__/MarkdownViewer-test.js b/src/lib/viewers/text/__tests__/MarkdownViewer-test.js index e0998f96f..8099d3009 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'; 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..e0bfb2495 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'; 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(); }); From 917bdb98af8e7da88e5ae5a8c37b5c18b17f21bc Mon Sep 17 00:00:00 2001 From: Conrad Chan Date: Mon, 8 Apr 2019 13:12:13 -0700 Subject: [PATCH 3/3] Chore: PR feedback --- src/lib/viewers/text/__tests__/MarkdownViewer-test.js | 2 +- src/lib/viewers/text/__tests__/PlainTextViewer-test.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/lib/viewers/text/__tests__/MarkdownViewer-test.js b/src/lib/viewers/text/__tests__/MarkdownViewer-test.js index 8099d3009..c5cc8eb06 100644 --- a/src/lib/viewers/text/__tests__/MarkdownViewer-test.js +++ b/src/lib/viewers/text/__tests__/MarkdownViewer-test.js @@ -5,9 +5,9 @@ import Popup from '../../../Popup'; 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', () => { diff --git a/src/lib/viewers/text/__tests__/PlainTextViewer-test.js b/src/lib/viewers/text/__tests__/PlainTextViewer-test.js index e0bfb2495..ef194c2e8 100644 --- a/src/lib/viewers/text/__tests__/PlainTextViewer-test.js +++ b/src/lib/viewers/text/__tests__/PlainTextViewer-test.js @@ -9,9 +9,9 @@ import * as util from '../../../util'; 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', () => {