Skip to content

Commit

Permalink
New: Expose thumbnails sidebar as preview option (#879)
Browse files Browse the repository at this point in the history
  • Loading branch information
Conrad Chan authored and Conrad Chan committed Feb 1, 2019
1 parent c82e4d5 commit a686532
Show file tree
Hide file tree
Showing 5 changed files with 146 additions and 13 deletions.
36 changes: 36 additions & 0 deletions UPGRADING.md
View file
Original file line number Diff line number Diff line change
@@ -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
```
<div class="bp" tabindex="0">
...
</div>
<button class="bp-btn-plain bp-navigate bp-navigate-left bp-is-hidden">
...
</button>
<button class="bp-btn-plain bp-navigate bp-navigate-right bp-is-hidden">
...
</button>
```
But in version 2, the buttons are now inside a new container div `.bp-content`.
```
<div class="bp" tabindex="0">
<div class="bp-content">
<button class="bp-btn-plain bp-navigate bp-navigate-left bp-is-hidden">
...
</button>
<button class="bp-btn-plain bp-navigate bp-navigate-right bp-is-hidden">
...
</button>
</div>
</div>
```

`.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.
3 changes: 3 additions & 0 deletions src/lib/Preview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down
8 changes: 7 additions & 1 deletion src/lib/__tests__/Preview-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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()', () => {
Expand Down
23 changes: 14 additions & 9 deletions src/lib/viewers/doc/DocBaseViewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

/**
Expand Down Expand Up @@ -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);

Expand Down
89 changes: 86 additions & 3 deletions src/lib/viewers/doc/__tests__/DocBaseViewer-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
Expand All @@ -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()', () => {
Expand Down Expand Up @@ -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()', () => {
Expand Down

0 comments on commit a686532

Please sign in to comment.