diff --git a/UPGRADING.md b/UPGRADING.md
new file mode 100644
index 000000000..f709ac161
--- /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 b8ab09058..4304a6304 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 c7bd6b1a6..e7ddf5309 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 87a4ffb83..56004db50 100644
--- a/src/lib/viewers/doc/DocBaseViewer.js
+++ b/src/lib/viewers/doc/DocBaseViewer.js
@@ -120,9 +120,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);
+ }
}
/**
@@ -984,12 +986,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 b6e3e66e7..0aff3a859 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 {
ICON_PRINT_CHECKMARK,
@@ -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()', () => {
@@ -2078,6 +2109,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()', () => {