From a68653225fbdf9739fe9e38e0c7c4141dbef154a Mon Sep 17 00:00:00 2001 From: Conrad Chan Date: Tue, 11 Dec 2018 15:32:13 -0800 Subject: [PATCH] New: Expose thumbnails sidebar as preview option (#879) --- UPGRADING.md | 36 ++++++++ src/lib/Preview.js | 3 + src/lib/__tests__/Preview-test.js | 8 +- src/lib/viewers/doc/DocBaseViewer.js | 23 +++-- .../doc/__tests__/DocBaseViewer-test.js | 89 ++++++++++++++++++- 5 files changed, 146 insertions(+), 13 deletions(-) create mode 100644 UPGRADING.md diff --git a/UPGRADING.md b/UPGRADING.md new file mode 100644 index 0000000000..f709ac1617 --- /dev/null +++ b/UPGRADING.md @@ -0,0 +1,36 @@ +Upgrading Guide +========================= + +Upgrading from 1.x to 2.x +------------------------- +Version 2 includes a breaking change to the DOM structure of the Preview element. + +In version 1, the `.bp-navigate` buttons were siblings with the `.bp` container div +``` +
+ ... +
+ + +``` +But in version 2, the buttons are now inside a new container div `.bp-content`. +``` +
+
+ + +
+
+``` + +`.bp-content` is also the new point in which the various viewers will be dynamically inserted as children, i.e. `.bp-doc`, `.bp-image`, etc... + +This change in structure is to account for the new thumbnails sidebar which will appear to the left of the viewer content. diff --git a/src/lib/Preview.js b/src/lib/Preview.js index b8ab09058c..4304a63041 100644 --- a/src/lib/Preview.js +++ b/src/lib/Preview.js @@ -933,6 +933,9 @@ class Preview extends EventEmitter { // Options that are applicable to certain file ids this.options.fileOptions = options.fileOptions || {}; + // Option to enable use of thumbnails sidebar for document types + this.options.enableThumbnailsSidebar = !!options.enableThumbnailsSidebar; + // Prefix any user created loaders before our default ones this.loaders = (options.loaders || []).concat(loaderList); diff --git a/src/lib/__tests__/Preview-test.js b/src/lib/__tests__/Preview-test.js index c7bd6b1a63..e7ddf5309f 100644 --- a/src/lib/__tests__/Preview-test.js +++ b/src/lib/__tests__/Preview-test.js @@ -1185,7 +1185,8 @@ describe('lib/Preview', () => { showAnnotations: true, fixDependencies: true, collection: stubs.collection, - loaders: stubs.loaders + loaders: stubs.loaders, + enableThumbnailsSidebar: true }; stubs.assign = sandbox.spy(Object, 'assign'); @@ -1298,6 +1299,11 @@ describe('lib/Preview', () => { expect(stubs.disableViewers).to.be.calledWith('Office'); expect(stubs.enableViewers).to.be.calledWith('text'); }); + + it('should set whether to enable thumbnails sidebar', () => { + preview.parseOptions(preview.previewOptions); + expect(preview.options.enableThumbnailsSidebar).to.be.true; + }); }); describe('createViewerOptions()', () => { diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js index d050b4321f..927787af39 100644 --- a/src/lib/viewers/doc/DocBaseViewer.js +++ b/src/lib/viewers/doc/DocBaseViewer.js @@ -119,9 +119,11 @@ class DocBaseViewer extends BaseViewer { this.startPageNum = this.getStartPage(this.startAt); - this.thumbnailsSidebarEl = document.createElement('div'); - this.thumbnailsSidebarEl.className = `${CLASS_BOX_PREVIEW_THUMBNAILS_CONTAINER} ${CLASS_HIDDEN}`; - this.containerEl.parentNode.insertBefore(this.thumbnailsSidebarEl, this.containerEl); + if (this.options.enableThumbnailsSidebar) { + this.thumbnailsSidebarEl = document.createElement('div'); + this.thumbnailsSidebarEl.className = `${CLASS_BOX_PREVIEW_THUMBNAILS_CONTAINER} ${CLASS_HIDDEN}`; + this.containerEl.parentNode.insertBefore(this.thumbnailsSidebarEl, this.containerEl); + } } /** @@ -933,12 +935,15 @@ class DocBaseViewer extends BaseViewer { * @return {void} */ bindControlListeners() { - this.controls.add( - __('toggle_thumbnails'), - this.toggleThumbnails, - 'bp-toggle-thumbnails-icon', - ICON_THUMBNAILS_TOGGLE - ); + if (this.options.enableThumbnailsSidebar) { + this.controls.add( + __('toggle_thumbnails'), + this.toggleThumbnails, + 'bp-toggle-thumbnails-icon', + ICON_THUMBNAILS_TOGGLE + ); + } + this.controls.add(__('zoom_out'), this.zoomOut, 'bp-doc-zoom-out-icon', ICON_ZOOM_OUT); this.controls.add(__('zoom_in'), this.zoomIn, 'bp-doc-zoom-in-icon', ICON_ZOOM_IN); diff --git a/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js b/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js index 80ca122243..129eabd481 100644 --- a/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js +++ b/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js @@ -20,7 +20,8 @@ import { QUERY_PARAM_ENCODING, ENCODING_TYPES, SELECTOR_BOX_PREVIEW_THUMBNAILS_CONTAINER, - SELECTOR_BOX_PREVIEW_CONTENT + SELECTOR_BOX_PREVIEW_CONTENT, + CLASS_BOX_PREVIEW_THUMBNAILS_CONTAINER } from '../../../constants'; import { @@ -87,7 +88,8 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => { file: { id: '0', extension: 'ppt' - } + }, + enableThumbnailsSidebar: true }); Object.defineProperty(BaseViewer.prototype, 'setup', { value: sandbox.stub() }); docBase.containerEl = containerEl; @@ -110,15 +112,44 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => { }); describe('setup()', () => { - it('should correctly set a doc element, viewer element, and a timeout', () => { + it('should correctly set a doc element, viewer element, thumbnails sidebar element, and a timeout', () => { expect(docBase.docEl.classList.contains('bp-doc')).to.be.true; expect(docBase.docEl.parentNode).to.deep.equal(docBase.containerEl); expect(docBase.viewerEl.classList.contains('pdfViewer')).to.be.true; expect(docBase.viewerEl.parentNode).to.equal(docBase.docEl); + expect(docBase.thumbnailsSidebarEl.classList.contains(CLASS_BOX_PREVIEW_THUMBNAILS_CONTAINER)).to.be.true; + expect(docBase.thumbnailsSidebarEl.parentNode).to.equal(docBase.containerEl.parentNode); + expect(docBase.loadTimeout).to.equal(LOAD_TIMEOUT_MS); }); + + it('should not set a thumbnails sidebar element if the option is not enabled', () => { + docBase = new DocBaseViewer({ + cache: { + set: () => {}, + has: () => {}, + get: () => {}, + unset: () => {} + }, + container: containerEl, + representation: { + content: { + url_template: 'foo' + } + }, + file: { + id: '0', + extension: 'ppt' + }, + enableThumbnailsSidebar: false + }); + docBase.containerEl = containerEl; + docBase.setup(); + + expect(docBase.thumbnailsSidebarEl).to.be.undefined; + }); }); describe('destroy()', () => { @@ -1954,6 +1985,58 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => { ICON_FULLSCREEN_OUT ); }); + + it('should not add the toggle thumbnails control if the option is not enabled', () => { + // Create a new instance that has enableThumbnailsSidebar as false + docBase = new DocBaseViewer({ + cache: { + set: () => {}, + has: () => {}, + get: () => {}, + unset: () => {} + }, + container: containerEl, + representation: { + content: { + url_template: 'foo' + } + }, + file: { + id: '0', + extension: 'ppt' + }, + enableThumbnailsSidebar: false + }); + docBase.containerEl = containerEl; + docBase.setup(); + + docBase.controls = { + add: sandbox.stub(), + removeListener: sandbox.stub() + }; + + docBase.pageControls = { + add: sandbox.stub(), + removeListener: sandbox.stub() + }; + + docBase.pdfViewer = { + pagesCount: 4, + currentPageNumber: 1, + cleanup: sandbox.stub() + }; + + // Invoke the method to test + docBase.bindControlListeners(); + + // Check expectations + expect(docBase.controls.add).to.not.be.calledWith( + __('toggle_thumbnails'), + docBase.toggleThumbnails, + 'bp-toggle-thumbnails-icon', + ICON_THUMBNAILS_TOGGLE + ); + }); }); describe('toggleThumbnails()', () => {