+
![]()
diff --git a/src/lib/annotations/image/__tests__/ImageAnnotator-test.js b/src/lib/annotations/image/__tests__/ImageAnnotator-test.js
index 767656382..b70a4e36f 100644
--- a/src/lib/annotations/image/__tests__/ImageAnnotator-test.js
+++ b/src/lib/annotations/image/__tests__/ImageAnnotator-test.js
@@ -16,10 +16,14 @@ describe('lib/annotations/image/ImageAnnotator', () => {
fixture.load('annotations/image/__tests__/ImageAnnotator-test.html');
annotator = new ImageAnnotator({
- annotatedElement: document.querySelector('.annotated-element'),
+ canAnnotate: true,
+ container: document,
annotationService: {},
- fileVersionID: 1
+ fileVersionID: 1,
+ options: {}
});
+ annotator.annotatedElement = annotator.getAnnotatedEl(document);
+ annotator.annotationService = {};
});
afterEach(() => {
@@ -28,15 +32,16 @@ describe('lib/annotations/image/ImageAnnotator', () => {
annotator = null;
});
+ describe('getAnnotatedEl()', () => {
+ it('should return the annotated element as the document', () => {
+ expect(annotator.annotatedElement).to.not.be.null;
+ });
+ });
+
describe('getLocationFromEvent()', () => {
it('should not return a location if image isn\'t inside viewer', () => {
- const tempAnnotator = new ImageAnnotator({
- annotatedElement: document.createElement('div'),
- annotationService: {},
- fileVersionID: 1
- });
-
- const location = tempAnnotator.getLocationFromEvent({});
+ annotator.annotatedElement = document.createElement('div');
+ const location = annotator.getLocationFromEvent({});
expect(location).to.be.null;
});
diff --git a/src/lib/ui.js b/src/lib/ui.js
index 454715b6d..be0f4f146 100644
--- a/src/lib/ui.js
+++ b/src/lib/ui.js
@@ -9,7 +9,6 @@ import {
CLASS_PREVIEW_LOADED,
SELECTOR_BOX_PREVIEW_CONTAINER,
SELECTOR_BOX_PREVIEW,
- SELECTOR_BOX_PREVIEW_BTN_ANNOTATE,
SELECTOR_BOX_PREVIEW_BTN_PRINT,
SELECTOR_BOX_PREVIEW_BTN_DOWNLOAD,
SELECTOR_BOX_PREVIEW_BTN_LOADING_DOWNLOAD,
@@ -208,23 +207,6 @@ export function showNavigation(id, collection) {
}
}
-/**
- * Shows the point annotate button if the viewers implement annotations
- *
- * @param {Function} handler - Annotation button handler
- * @return {void}
- */
-export function showAnnotateButton(handler) {
- const annotateButtonEl = container.querySelector(SELECTOR_BOX_PREVIEW_BTN_ANNOTATE);
- if (!annotateButtonEl) {
- return;
- }
-
- annotateButtonEl.title = __('annotation_point_toggle');
- annotateButtonEl.classList.remove(CLASS_HIDDEN);
- annotateButtonEl.addEventListener('click', handler);
-}
-
/**
* Shows the print button if the viewers implement print
*
diff --git a/src/lib/viewers/BaseViewer.js b/src/lib/viewers/BaseViewer.js
index cfd6127a7..e80f470f9 100644
--- a/src/lib/viewers/BaseViewer.js
+++ b/src/lib/viewers/BaseViewer.js
@@ -12,15 +12,20 @@ import {
prefetchAssets,
createAssetUrlCreator
} from '../util';
+import { checkPermission } from '../file';
import Browser from '../Browser';
import {
+ PERMISSION_ANNOTATE,
CLASS_FULLSCREEN,
+ CLASS_HIDDEN,
CLASS_BOX_PREVIEW_MOBILE,
SELECTOR_BOX_PREVIEW,
+ SELECTOR_BOX_PREVIEW_BTN_ANNOTATE,
STATUS_SUCCESS,
STATUS_VIEWABLE
} from '../constants';
+const ANNOTATIONS_JS = ['annotations.js'];
const LOAD_TIMEOUT_MS = 180000; // 3m
const RESIZE_WAIT_TIME_IN_MILLIS = 300;
@@ -64,6 +69,19 @@ class BaseViewer extends EventEmitter {
if (Browser.isMobile()) {
this.containerEl.classList.add(CLASS_BOX_PREVIEW_MOBILE);
}
+
+ // Attempts to load annotations assets and initializes annotations if
+ // the assets are available, the showAnnotations flag is true, and the
+ // expiring embed is not a shared link
+ // TODO(@spramod): Determine the expected behavior on shared links
+ const { showAnnotations, sharedLink } = this.options;
+ if (showAnnotations && !sharedLink) {
+ this.loadAssets(ANNOTATIONS_JS)
+ .then(() => {
+ this.annotationsLoaded = true;
+ })
+ .catch(this.handleAssetError);
+ }
}
/**
@@ -255,6 +273,12 @@ class BaseViewer extends EventEmitter {
this.addListener('togglepointannotationmode', () => {
this.annotator.togglePointModeHandler();
});
+
+ this.addListener('load', () => {
+ if (this.annotationsLoaded && this.options.showAnnotations) {
+ this.loadAnnotator();
+ }
+ });
}
/**
@@ -483,6 +507,118 @@ class BaseViewer extends EventEmitter {
const status = RepStatus.getStatus(representation);
return status === STATUS_SUCCESS || status === STATUS_VIEWABLE;
}
+
+ //--------------------------------------------------------------------------
+ // Annotations
+ //--------------------------------------------------------------------------
+
+ /**
+ * Loads the appropriate annotator and loads the file's annotations
+ *
+ * @protected
+ * @return {void}
+ */
+ loadAnnotator() {
+ /* global BoxAnnotations */
+ this.loader = new BoxAnnotations();
+
+ this.annotatorLoader = this.loader.determineAnnotator(this.options.viewer.NAME);
+ if (this.annotatorLoader) {
+ this.annotationTypes = this.annotatorLoader.TYPE;
+
+ if (this.isAnnotatable()) {
+ const { file } = this.options;
+ if (checkPermission(file, PERMISSION_ANNOTATE) && !Browser.isMobile()) {
+ this.showAnnotateButton(this.getPointModeClickHandler());
+ }
+ this.initAnnotations();
+ }
+ }
+ }
+
+ /**
+ * Initializes annotations.
+ *
+ * @protected
+ * @return {void}
+ */
+ initAnnotations() {
+ const { apiHost, file, location, token } = this.options;
+ const fileVersionID = file.file_version.id;
+
+ // Users can currently only view annotations on mobile
+ const canAnnotate = checkPermission(file, PERMISSION_ANNOTATE) && !Browser.isMobile();
+ const annotationOptions = {
+ apiHost,
+ fileId: file.id,
+ token
+ };
+
+ // Construct and init annotator
+ this.annotator = new this.annotatorLoader.CONSTRUCTOR({
+ canAnnotate,
+ container: this.options.container,
+ options: annotationOptions,
+ fileVersionID,
+ locale: location.locale
+ });
+ this.annotator.init();
+ }
+
+ /**
+ * Returns whether or not viewer is annotatable. If an optional type is
+ * passed in, we check if that type of annotation is allowed.
+ *
+ * @param {string} [type] - Type of annotation
+ * @return {boolean} Whether or not viewer is annotatable
+ */
+ isAnnotatable(type) {
+ if (type && this.annotationTypes) {
+ const supportedType = this.annotationTypes.some((annotationType) => {
+ return type === annotationType;
+ });
+
+ if (!supportedType) {
+ return false;
+ }
+ }
+
+ // Respect viewer-specific annotation option if it is set
+ const viewerAnnotations = this.getViewerOption('annotations');
+ if (typeof viewerAnnotations === 'boolean') {
+ return viewerAnnotations;
+ }
+
+ // Otherwise, use global preview annotation option
+ return this.options.showAnnotations;
+ }
+
+ /**
+ * Shows the point annotate button if the viewers implement annotations
+ *
+ * @param {Function} handler - Annotation button handler
+ * @return {void}
+ */
+ showAnnotateButton(handler) {
+ const { container } = this.options;
+ const annotateButtonEl = container.querySelector(SELECTOR_BOX_PREVIEW_BTN_ANNOTATE);
+ if (!annotateButtonEl) {
+ return;
+ }
+
+ annotateButtonEl.title = __('annotation_point_toggle');
+ annotateButtonEl.classList.remove(CLASS_HIDDEN);
+ annotateButtonEl.addEventListener('click', handler);
+ }
+
+ /**
+ * Returns click handler for toggling point annotation mode.
+ *
+ * @return {Function|null} Click handler
+ */
+ /* eslint-disable no-unused-vars */
+ getPointModeClickHandler(containerEl) {}
+ /* eslint-enable no-unused-vars */
}
export default BaseViewer;
diff --git a/src/lib/viewers/__tests__/BaseViewer-test.js b/src/lib/viewers/__tests__/BaseViewer-test.js
index 5fec82ae7..8a289335d 100644
--- a/src/lib/viewers/__tests__/BaseViewer-test.js
+++ b/src/lib/viewers/__tests__/BaseViewer-test.js
@@ -5,9 +5,12 @@ import Browser from '../../Browser';
import RepStatus from '../../RepStatus';
import fullscreen from '../../Fullscreen';
import * as util from '../../util';
+import * as file from '../../file';
+import * as constants from '../../constants';
let base;
let containerEl;
+let stubs = {};
const sandbox = sinon.sandbox.create();
describe('lib/viewers/BaseViewer', () => {
@@ -38,6 +41,8 @@ describe('lib/viewers/BaseViewer', () => {
describe('setup()', () => {
it('should set options, a container, bind event listeners, and set timeout', () => {
sandbox.stub(base, 'addCommonListeners');
+ sandbox.stub(base, 'loadAssets').returns(Promise.resolve());
+ base.options.showAnnotations = true;
base.setup();
@@ -45,20 +50,37 @@ describe('lib/viewers/BaseViewer', () => {
container: containerEl,
file: {
id: '0'
- }
+ },
+ showAnnotations: true
});
expect(base.containerEl).to.have.class('bp');
expect(base.addCommonListeners).to.be.called;
expect(base.loadTimeout).to.be.a.number;
+ expect(base.loadAssets).to.be.called;
});
it('should add a mobile class to the container if on mobile', () => {
sandbox.stub(Browser, 'isMobile').returns(true);
+ sandbox.stub(base, 'loadAssets').returns(Promise.resolve());
base.setup();
const container = document.querySelector('.bp');
expect(container).to.have.class('bp-is-mobile');
});
+
+ it('should not load annotations assets if global preview showAnnotations option is false', () => {
+ sandbox.stub(base, 'addCommonListeners');
+ sandbox.stub(base, 'loadAssets');
+ base.options.showAnnotations = false;
+ expect(base.loadAssets).to.not.be.called;
+ });
+
+ it('should not load annotations assets if expiring embed is a shared link', () => {
+ sandbox.stub(base, 'addCommonListeners');
+ sandbox.stub(base, 'loadAssets');
+ base.options.sharedLink = 'url';
+ expect(base.loadAssets).to.not.be.called;
+ });
});
describe('debouncedResizeHandler()', () => {
@@ -224,6 +246,7 @@ describe('lib/viewers/BaseViewer', () => {
expect(fullscreen.addListener).to.be.calledWith('exit', sinon.match.func);
expect(document.defaultView.addEventListener).to.be.calledWith('resize', base.debouncedResizeHandler);
expect(base.addListener).to.be.calledWith('togglepointannotationmode', sinon.match.func);
+ expect(base.addListener).to.be.calledWith('load', sinon.match.func);
});
});
@@ -265,6 +288,8 @@ describe('lib/viewers/BaseViewer', () => {
});
it('should cleanup the base viewer', () => {
+ sandbox.stub(base, 'loadAssets').returns(Promise.resolve());
+ sandbox.stub(base, 'loadAnnotator');
base.setup();
sandbox.mock(fullscreen).expects('removeAllListeners');
@@ -317,7 +342,6 @@ describe('lib/viewers/BaseViewer', () => {
});
describe('Pinch to Zoom Handlers', () => {
- let stubs = {};
let event = {};
beforeEach(() => {
@@ -327,6 +351,8 @@ describe('lib/viewers/BaseViewer', () => {
id: '123'
}
});
+ sandbox.stub(base, 'loadAssets').returns(Promise.resolve());
+ sandbox.stub(base, 'loadAnnotator');
base.setup();
event = {
preventDefault: sandbox.stub(),
@@ -562,4 +588,141 @@ describe('lib/viewers/BaseViewer', () => {
expect(base.isRepresentationReady(representation)).to.be.false;
});
});
+
+ describe('loadAnnotator()', () => {
+ beforeEach(() => {
+ base.options.viewer = {
+ NAME: Document
+ };
+
+ stubs.annotatorLoader = {
+ TYPE: ['point', 'highlight']
+ };
+ stubs.isAnnotatable = sandbox.stub(base, 'isAnnotatable').returns(true);
+ sandbox.stub(base, 'initAnnotations');
+ sandbox.stub(base, 'showAnnotateButton');
+ stubs.checkPermission = sandbox.stub(file, 'checkPermission').returns(false);
+ });
+
+ it('should load the appropriate annotator for the current viewer', () => {
+ class BoxAnnotations {
+ determineAnnotator() {
+ return stubs.annotatorLoader;
+ }
+ }
+ sandbox.stub(Browser, 'isMobile').returns(false);
+ stubs.checkPermission.returns(true);
+
+ window.BoxAnnotations = BoxAnnotations;
+ base.loadAnnotator();
+ expect(base.initAnnotations).to.be.called;
+ expect(base.showAnnotateButton).to.be.called;
+ });
+
+ it('should not display the point annotation button if the user does not have the appropriate permissions', () => {
+ class BoxAnnotations {
+ determineAnnotator() {}
+ }
+ window.BoxAnnotations = BoxAnnotations;
+
+ base.loadAnnotator();
+ expect(base.initAnnotations).to.not.be.called;
+ expect(base.showAnnotateButton).to.not.be.called;
+ });
+
+ it('should not load an annotator if no loader was found', () => {
+ class BoxAnnotations {
+ determineAnnotator() {}
+ }
+ window.BoxAnnotations = BoxAnnotations;
+ base.loadAnnotator();
+ expect(base.initAnnotations).to.not.be.called;
+ expect(base.showAnnotateButton).to.not.be.called;
+ });
+
+ it('should not load an annotator if the viewer is not annotatable', () => {
+ class BoxAnnotations {
+ determineAnnotator() {
+ return stubs.annotatorLoader;
+ }
+ }
+ window.BoxAnnotations = BoxAnnotations;
+ stubs.isAnnotatable.returns(false);
+ base.loadAnnotator();
+ expect(base.initAnnotations).to.not.be.called;
+ expect(base.showAnnotateButton).to.not.be.called;
+ });
+ });
+
+ describe('initAnnotations()', () => {
+ it('should initialize the annotator', () => {
+ base.options = {
+ container: document,
+ file: {
+ file_version: {
+ id: 123
+ }
+ },
+ location: {
+ locale: 'en-US'
+ }
+ };
+ base.annotator = {
+ init: sandbox.stub()
+ };
+ base.annotatorLoader = {
+ CONSTRUCTOR: sandbox.stub().returns(base.annotator)
+ };
+ base.initAnnotations();
+ expect(base.annotator.init).to.be.called;
+ });
+ });
+
+ describe('isAnnotatable()', () => {
+ beforeEach(() => {
+ stubs.getViewerOption = sandbox.stub(base, 'getViewerOption');
+ stubs.getViewerOption.withArgs('annotations').returns(true);
+ base.annotationTypes = ['point', 'highlight'];
+ });
+
+ it('should return false if the type is not supported by the viewer', () => {
+ expect(base.isAnnotatable('drawing')).to.equal(false);
+ });
+
+ it('should return true if viewer option is set to true', () => {
+ expect(base.isAnnotatable('point')).to.equal(true);
+ stubs.getViewerOption.withArgs('annotations').returns(false);
+ expect(base.isAnnotatable('point')).to.equal(false);
+ });
+
+ it('should use the global show annotationsBoolean if the viewer param is not specified', () => {
+ base.annotationTypes = null;
+ stubs.getViewerOption.withArgs('annotations').returns(null);
+ base.options.showAnnotations = true;
+ expect(base.isAnnotatable()).to.equal(true);
+
+ base.options.showAnnotations = false;
+ expect(base.isAnnotatable()).to.equal(false);
+ });
+ });
+
+ describe('showAnnotateButton()', () => {
+ it('should set up and show annotate button', () => {
+ const buttonEl = document.createElement('div');
+ buttonEl.classList.add('bp-btn-annotate');
+ buttonEl.classList.add(constants.CLASS_HIDDEN);
+ base.options = {
+ container: document,
+ file: {
+ id: 123
+ }
+ };
+ containerEl.appendChild(buttonEl);
+ sandbox.mock(buttonEl).expects('addEventListener').withArgs('click', base.handler);
+
+ base.showAnnotateButton(base.handler);
+ expect(buttonEl.title).to.equal('Point annotation mode');
+ expect(buttonEl.classList.contains(constants.CLASS_HIDDEN)).to.be.false;
+ });
+ });
});
diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js
index bfb3a9e44..aaaaeb37d 100644
--- a/src/lib/viewers/doc/DocBaseViewer.js
+++ b/src/lib/viewers/doc/DocBaseViewer.js
@@ -1,11 +1,9 @@
import autobind from 'autobind-decorator';
import throttle from 'lodash.throttle';
-import AnnotationService from '../../annotations/AnnotationService';
import BaseViewer from '../BaseViewer';
import Browser from '../../Browser';
import cache from '../../Cache';
import Controls from '../../Controls';
-import DocAnnotator from '../../annotations/doc/DocAnnotator';
import DocFindBar from './DocFindBar';
import fullscreen from '../../Fullscreen';
import Popup from '../../Popup';
@@ -14,7 +12,6 @@ import {
CLASS_HIDDEN,
CLASS_IS_SCROLLABLE,
DOC_STATIC_ASSETS_VERSION,
- PERMISSION_ANNOTATE,
PERMISSION_DOWNLOAD,
PRELOAD_REP_NAME
} from '../../constants';
@@ -511,28 +508,6 @@ class DocBaseViewer extends BaseViewer {
this.pdfViewer.currentScaleValue = scale;
}
- /**
- * Returns whether or not viewer is annotatable. If an optional type is
- * passed in, we check if that type of annotation is allowed.
- *
- * @param {string} [type] - Type of annotation
- * @return {boolean} Whether or not viewer is annotatable
- */
- isAnnotatable(type) {
- if (typeof type === 'string' && type !== 'point' && type !== 'highlight') {
- return false;
- }
-
- // Respect viewer-specific annotation option if it is set
- const viewerAnnotations = this.getViewerOption('annotations');
- if (typeof viewerAnnotations === 'boolean') {
- return viewerAnnotations;
- }
-
- // Otherwise, use global preview annotation option
- return this.options.showAnnotations;
- }
-
/**
* Returns click handler for toggling point annotation mode.
*
@@ -685,47 +660,22 @@ class DocBaseViewer extends BaseViewer {
/**
* Initializes annotations.
*
+ * @protected
* @return {void}
- * @private
*/
initAnnotations() {
this.setupPageIds();
-
- const { apiHost, file, location, token, sharedLink } = this.options;
- const fileVersionID = file.file_version.id;
-
- // Do not initialize annotations for shared links
- // TODO(@spramod): Determine the expected behavior on shared links
- if (sharedLink) {
- return;
- }
-
- // Users can currently only view annotations on mobile
- const canAnnotate = checkPermission(file, PERMISSION_ANNOTATE) && !Browser.isMobile();
- const annotationService = new AnnotationService({
- apiHost,
- fileId: file.id,
- token,
- canAnnotate
- });
-
- // Construct and init annotator
- this.annotator = new DocAnnotator({
- annotatedElement: this.docEl,
- annotationService,
- fileVersionID,
- locale: location.locale
- });
- this.annotator.init();
- this.annotator.setScale(this.pdfViewer.currentScale);
+ super.initAnnotations();
// Disable controls during point annotation mode
+ /* istanbul ignore next */
this.annotator.addListener('pointmodeenter', () => {
if (this.controls) {
this.controls.disable();
}
});
+ /* istanbul ignore next */
this.annotator.addListener('pointmodeexit', () => {
if (this.controls) {
this.controls.enable();
@@ -1057,11 +1007,6 @@ class DocBaseViewer extends BaseViewer {
pagesinitHandler() {
this.pdfViewer.currentScaleValue = 'auto';
- // Initialize annotations before other UI
- if (this.isAnnotatable()) {
- this.initAnnotations();
- }
-
this.loadUI();
this.checkPaginationButtons();
@@ -1090,17 +1035,6 @@ class DocBaseViewer extends BaseViewer {
pagerenderedHandler(event) {
const pageNumber = event.detail ? event.detail.pageNumber : undefined;
- // Render annotations by page
- if (this.annotator) {
- // We should get a page number from pdfViewer most of the time
- if (pageNumber) {
- this.annotator.renderAnnotationsOnPage(pageNumber);
- // If not, we re-render all annotations to be safe
- } else {
- this.annotator.renderAnnotations();
- }
- }
-
// If text layer is disabled due to permissions, we still want to show annotations
if (PDFJS.disableTextLayer) {
this.textlayerrenderedHandler();
@@ -1126,13 +1060,7 @@ class DocBaseViewer extends BaseViewer {
* @private
*/
textlayerrenderedHandler() {
- if (!this.annotator || this.annotationsLoaded) {
- return;
- }
-
- // Show existing annotations after text layer is rendered
- this.annotator.showAnnotations();
- this.annotationsLoaded = true;
+ this.emit('load');
}
/**
diff --git a/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js b/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js
index e551ab045..e92239b14 100644
--- a/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js
+++ b/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js
@@ -12,7 +12,6 @@ import * as util from '../../../util';
import {
CLASS_BOX_PREVIEW_FIND_BAR,
CLASS_HIDDEN,
- PERMISSION_ANNOTATE,
PERMISSION_DOWNLOAD
} from '../../../constants';
@@ -56,7 +55,7 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
id: '0'
}
});
- Object.defineProperty(BaseViewer.prototype, 'setup', { value: sandbox.mock() });
+ Object.defineProperty(BaseViewer.prototype, 'setup', { value: sandbox.stub() });
docBase.containerEl = containerEl;
docBase.setup();
stubs = {};
@@ -316,10 +315,11 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
Object.defineProperty(BaseViewer.prototype, 'load', { value: sandbox.mock() });
sandbox.stub(docBase, 'createContentUrlWithAuthParams');
sandbox.stub(docBase, 'postload');
- sandbox.stub(docBase, 'loadAssets').returns(Promise.resolve());
sandbox.stub(docBase, 'getRepStatus').returns({ getPromise: () => Promise.resolve() });
+ sandbox.stub(docBase, 'loadAssets');
return docBase.load().then(() => {
+ expect(docBase.loadAssets).to.be.called;
expect(docBase.setup).to.be.called;
expect(docBase.createContentUrlWithAuthParams).to.be.calledWith('foo');
expect(docBase.postload).to.be.called;
@@ -331,6 +331,9 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
it('should setup pdfjs, init viewer, print, and find', () => {
const url = 'foo';
docBase.pdfUrl = url;
+ docBase.pdfViewer = {
+ currentScale: 1
+ };
const setupPdfjsStub = sandbox.stub(docBase, 'setupPdfjs');
const initViewerStub = sandbox.stub(docBase, 'initViewer');
@@ -851,32 +854,6 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
});
});
- describe('isAnnotatable()', () => {
- beforeEach(() => {
- stubs.getViewerOption = sandbox.stub(docBase, 'getViewerOption');
- stubs.getViewerOption.withArgs('annotations').returns(true);
- });
-
- it('should return false if the type is not a point or a highlight', () => {
- expect(docBase.isAnnotatable('drawing')).to.equal(false);
- });
-
- it('should return true if viewer option is set to true', () => {
- expect(docBase.isAnnotatable('point')).to.equal(true);
- stubs.getViewerOption.withArgs('annotations').returns(false);
- expect(docBase.isAnnotatable('point')).to.equal(false);
- });
-
- it('should use the global show annotationsBoolean if the viewer param is not specified', () => {
- stubs.getViewerOption.withArgs('annotations').returns(null);
- docBase.options.showAnnotations = true;
- expect(docBase.isAnnotatable('point')).to.equal(true);
-
- docBase.options.showAnnotations = false;
- expect(docBase.isAnnotatable('highlight')).to.equal(false);
- });
- });
-
describe('getPointModeClickHandler()', () => {
beforeEach(() => {
stubs.isAnnotatable = sandbox.stub(docBase, 'isAnnotatable').returns(false);
@@ -1127,54 +1104,24 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
});
describe('initAnnotations()', () => {
- beforeEach(() => {
- docBase.options = {
- file: {
- file_version: {
- id: 0
- },
- permissions: {
- can_annotate: true
- }
- },
- location: {
- locale: 'en-US'
- }
- };
- docBase.pdfViewer = {
- currentScale: 1
- };
- stubs.browser = sandbox.stub(Browser, 'isMobile').returns(false);
- stubs.setupPageIds = sandbox.stub(docBase, 'setupPageIds');
- stubs.checkPermission = sandbox.stub(file, 'checkPermission');
- });
+ const initFunc = BaseViewer.prototype.initAnnotations;
- it('should set up page IDs', () => {
- docBase.initAnnotations();
- expect(stubs.setupPageIds).to.be.called;
- });
-
- it('should do nothing if expiring embed is a shared link', () => {
- stubs.checkPermission.withArgs(docBase.options.file, PERMISSION_ANNOTATE).returns(true);
- docBase.options.sharedLink = 'url';
- docBase.initAnnotations();
- expect(docBase.annotator).to.be.undefined;
+ afterEach(() => {
+ Object.defineProperty(BaseViewer.prototype, 'initAnnotations', { value: initFunc });
});
- it('should allow annotations based on browser and permissions', () => {
- stubs.checkPermission.withArgs(docBase.options.file, PERMISSION_ANNOTATE).returns(true);
- docBase.initAnnotations();
- expect(docBase.annotator.annotationService.canAnnotate).to.be.true;
-
- stubs.browser.returns(true);
- stubs.checkPermission.withArgs(docBase.options.file, PERMISSION_ANNOTATE).returns(true);
- docBase.initAnnotations();
- expect(docBase.annotator.annotationService.canAnnotate).to.be.false;
+ it('should set up page IDs and initialize the annotator', () => {
+ docBase.pdfViewer = {
+ currentScale: 1
+ };
+ docBase.annotator = {
+ addListener: sandbox.stub()
+ };
+ sandbox.stub(docBase, 'setupPageIds');
+ Object.defineProperty(BaseViewer.prototype, 'initAnnotations', { value: sandbox.mock() });
- stubs.browser.returns(false);
- stubs.checkPermission.withArgs(docBase.options.file, PERMISSION_ANNOTATE).returns(false);
docBase.initAnnotations();
- expect(docBase.annotator.annotationService.canAnnotate).to.be.false;
+ expect(docBase.setupPageIds).to.be.called;
});
});
@@ -1488,8 +1435,6 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
describe('pagesinitHandler()', () => {
beforeEach(() => {
- stubs.isAnnotatable = sandbox.stub(docBase, 'isAnnotatable');
- stubs.initAnnotations = sandbox.stub(docBase, 'initAnnotations');
stubs.loadUI = sandbox.stub(docBase, 'loadUI');
stubs.checkPaginationButtons = sandbox.stub(docBase, 'checkPaginationButtons');
stubs.setPage = sandbox.stub(docBase, 'setPage');
@@ -1497,24 +1442,12 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
stubs.emit = sandbox.stub(docBase, 'emit');
});
- it('should init annotations if annotatable', () => {
- stubs.isAnnotatable.returns(true);
- docBase.pdfViewer = {
- currentScale: 'unknown'
- };
-
- docBase.pagesinitHandler();
- expect(stubs.initAnnotations).to.be.called;
- });
-
it('should load UI, check the pagination buttons, set the page, and make document scrollable', () => {
- stubs.isAnnotatable.returns(false);
docBase.pdfViewer = {
currentScale: 'unknown'
};
docBase.pagesinitHandler();
- expect(stubs.initAnnotations).to.not.be.called;
expect(stubs.loadUI).to.be.called;
expect(stubs.checkPaginationButtons).to.be.called;
expect(stubs.setPage).to.be.called;
@@ -1522,7 +1455,6 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
});
it('should broadcast that the preview is loaded if it hasn\'t already', () => {
- stubs.isAnnotatable.returns(false);
docBase.pdfViewer = {
currentScale: 'unknown'
};
@@ -1540,10 +1472,6 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
describe('pagerenderedHandler()', () => {
beforeEach(() => {
- docBase.annotator = {
- renderAnnotationsOnPage: sandbox.stub(),
- renderAnnotations: sandbox.stub()
- };
docBase.event = {
detail: {
pageNumber: 1
@@ -1562,52 +1490,13 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
docBase.pagerenderedHandler(docBase.event);
expect(stubs.emit).to.be.calledWith('progressend');
});
-
- it('should render annotations on a page if the annotator and event page are specified', () => {
- docBase.pagerenderedHandler(docBase.event);
- expect(docBase.annotator.renderAnnotationsOnPage).to.be.calledWith(docBase.event.detail.pageNumber);
- });
-
- it('should render annotations all annotations if the annotator but not the page is specified', () => {
- docBase.event.detail = undefined;
-
- docBase.pagerenderedHandler(docBase.event);
- expect(docBase.annotator.renderAnnotations).to.be.called;
- });
-
- it('should show annotations even if the text layer is disabled', () => {
- PDFJS.disableTextLayer = true;
-
- docBase.pagerenderedHandler(docBase.event);
- expect(stubs.textlayerrenderedHandler).to.be.called;
- });
});
describe('textlayerrenderedHandler()', () => {
- beforeEach(() => {
- docBase.annotator = {
- showAnnotations: sandbox.stub()
- };
- });
-
it('should do nothing if the annotator does not exist or if the annotations are loaded', () => {
- docBase.annotationsLoaded = true;
-
- docBase.textlayerrenderedHandler();
- expect(docBase.annotator.showAnnotations).to.not.be.called;
-
- docBase.annotationsLoaded = false;
- docBase.annotator = false;
- docBase.textlayerrenderedHandler();
- expect(docBase.annotationsLoaded).to.equal(false);
- });
-
- it('should show annotations and set them as loaded', () => {
- docBase.annotationsLoaded = false;
-
+ stubs.emit = sandbox.stub(docBase, 'emit');
docBase.textlayerrenderedHandler();
- expect(docBase.annotator.showAnnotations).to.be.called;
- expect(docBase.annotationsLoaded).to.be.true;
+ expect(stubs.emit).to.be.calledWith('load');
});
});
diff --git a/src/lib/viewers/image/ImageViewer.js b/src/lib/viewers/image/ImageViewer.js
index cb7afc897..44bd5f2a6 100644
--- a/src/lib/viewers/image/ImageViewer.js
+++ b/src/lib/viewers/image/ImageViewer.js
@@ -1,11 +1,8 @@
import autobind from 'autobind-decorator';
-import AnnotationService from '../../annotations/AnnotationService';
-import ImageAnnotator from '../../annotations/image/ImageAnnotator';
import Browser from '../../Browser';
import ImageBaseViewer from './ImageBaseViewer';
-import { checkPermission } from '../../file';
import { ICON_ROTATE_LEFT, ICON_FULLSCREEN_IN, ICON_FULLSCREEN_OUT } from '../../icons/icons';
-import { CLASS_INVISIBLE, PERMISSION_ANNOTATE } from '../../constants';
+import { CLASS_INVISIBLE } from '../../constants';
import { openContentInsideIframe } from '../../util';
import './Image.scss';
@@ -31,7 +28,6 @@ class ImageViewer extends ImageBaseViewer {
// hides image tag until content is loaded
this.imageEl.classList.add(CLASS_INVISIBLE);
- this.initAnnotations();
this.currentRotationAngle = 0;
}
@@ -268,13 +264,6 @@ class ImageViewer extends ImageBaseViewer {
this.controls.add(__('rotate_left'), this.rotateLeft, 'bp-image-rotate-left-icon', ICON_ROTATE_LEFT);
this.controls.add(__('enter_fullscreen'), this.toggleFullscreen, 'bp-enter-fullscreen-icon', ICON_FULLSCREEN_IN);
this.controls.add(__('exit_fullscreen'), this.toggleFullscreen, 'bp-exit-fullscreen-icon', ICON_FULLSCREEN_OUT);
-
- // Show existing annotations after image is rendered
- if (!this.annotator || this.annotationsLoaded) {
- return;
- }
- this.annotator.showAnnotations();
- this.annotationsLoaded = true;
}
/**
@@ -303,43 +292,11 @@ class ImageViewer extends ImageBaseViewer {
/**
* Initializes annotations.
*
- * @private
+ * @protected
* @return {void}
*/
initAnnotations() {
- // Ignore if viewer/file type is not annotatable
- if (!this.isAnnotatable()) {
- return;
- }
-
- // Users can currently only view annotations on mobile
- const { apiHost, file, location, token, sharedLink } = this.options;
-
- // Do not initialize annotations for shared links
- // TODO(@spramod): Determine the expected behavior on shared links
- if (sharedLink) {
- return;
- }
-
- const canAnnotate = checkPermission(file, PERMISSION_ANNOTATE) && !Browser.isMobile();
- this.canAnnotate = canAnnotate;
-
- const fileVersionID = file.file_version.id;
- const annotationService = new AnnotationService({
- apiHost,
- fileId: file.id,
- token,
- canAnnotate
- });
-
- // Construct and init annotator
- this.annotator = new ImageAnnotator({
- annotatedElement: this.wrapperEl,
- annotationService,
- fileVersionID,
- locale: location.locale
- });
- this.annotator.init(this);
+ super.initAnnotations();
// Disables controls during point annotation mode
/* istanbul ignore next */
diff --git a/src/lib/viewers/image/__tests__/ImageBaseViewer-test.js b/src/lib/viewers/image/__tests__/ImageBaseViewer-test.js
index 1ac85043a..1ce1d072d 100644
--- a/src/lib/viewers/image/__tests__/ImageBaseViewer-test.js
+++ b/src/lib/viewers/image/__tests__/ImageBaseViewer-test.js
@@ -487,7 +487,8 @@ describe('lib/viewers/image/ImageBaseViewer', () => {
imageBase.finishLoading();
expect(imageBase.loaded).to.be.true;
- expect(stubs.emit).to.have.been.called;
+ expect(stubs.emit).to.have.been.calledWith('load');
+ expect(stubs.emit).to.have.been.calledWith('load');
expect(stubs.zoom).to.have.been.called;
expect(stubs.loadUI).to.have.been.called;
});
diff --git a/src/lib/viewers/image/__tests__/ImageViewer-test.js b/src/lib/viewers/image/__tests__/ImageViewer-test.js
index debea696e..b16a2f563 100644
--- a/src/lib/viewers/image/__tests__/ImageViewer-test.js
+++ b/src/lib/viewers/image/__tests__/ImageViewer-test.js
@@ -2,9 +2,7 @@
import ImageViewer from '../ImageViewer';
import BaseViewer from '../../BaseViewer';
import Browser from '../../../Browser';
-import * as file from '../../../file';
import * as util from '../../../util';
-import { PERMISSION_ANNOTATE } from '../../../constants';
const CSS_CLASS_ZOOMABLE = 'zoomable';
const CSS_CLASS_PANNABLE = 'pannable';
@@ -70,21 +68,8 @@ describe('lib/viewers/image/ImageViewer', () => {
describe('setup()', () => {
it('should set up layout and init annotations', () => {
- image = new ImageViewer({
- container: containerEl,
- file: {
- id: '1'
- }
- });
- sandbox.stub(image, 'initAnnotations');
-
- Object.defineProperty(BaseViewer.prototype, 'setup', { value: sandbox.stub() });
- image.containerEl = containerEl;
- image.setup();
-
expect(image.wrapperEl).to.have.class('bp-image');
expect(image.imageEl).to.have.class('bp-is-invisible');
- expect(image.initAnnotations).to.be.called;
});
});
@@ -412,16 +397,6 @@ describe('lib/viewers/image/ImageViewer', () => {
expect(image.controls.buttonRefs.length).to.equal(5);
expect(image.annotationsLoaded).to.be.false;
});
-
- it('should show annotations after image is rendered', () => {
- image.annotator = {
- showAnnotations: sandbox.stub()
- };
-
- image.loadUI();
- expect(image.annotator.showAnnotations).to.be.called;
- expect(image.annotationsLoaded).to.be.true;
- });
});
describe('print()', () => {
@@ -466,70 +441,19 @@ describe('lib/viewers/image/ImageViewer', () => {
});
describe('initAnnotations()', () => {
- beforeEach(() => {
- stubs.annotatable = sandbox.stub(image, 'isAnnotatable');
- stubs.isMobile = sandbox.stub(Browser, 'isMobile').returns(false);
- stubs.checkPermission = sandbox.stub(file, 'checkPermission');
- image.options.location = {
- locale: 'en-US'
- };
- });
-
- it('should not init annotations if image is not annotatable', () => {
- stubs.annotatable.returns(false);
- image.annotator = undefined;
+ const initFunc = BaseViewer.prototype.initAnnotations;
- image.initAnnotations();
- expect(image.annotator).to.be.undefined;
- });
-
- it('should do nothing if expiring embed is a shared link', () => {
- stubs.annotatable.returns(true);
- image.options.sharedLink = 'url';
- image.initAnnotations();
- expect(image.annotator).to.be.undefined;
+ afterEach(() => {
+ Object.defineProperty(BaseViewer.prototype, 'initAnnotations', { value: initFunc });
});
it('should init annotations if user can annotate', () => {
- stubs.checkPermission.withArgs(image.options.file, PERMISSION_ANNOTATE).returns(true);
- stubs.annotatable.returns(true);
-
- image.initAnnotations();
- expect(image.canAnnotate).to.be.true;
- expect(image.annotator).to.not.be.undefined;
- });
-
- it('should init annotations if user cannot annotate', () => {
- stubs.checkPermission.withArgs(image.options.file, PERMISSION_ANNOTATE).returns(false);
- stubs.annotatable.returns(true);
-
+ Object.defineProperty(BaseViewer.prototype, 'initAnnotations', { value: sandbox.mock() });
+ image.annotator = {
+ addListener: sandbox.stub()
+ };
image.initAnnotations();
- expect(image.canAnnotate).to.be.false;
- expect(image.annotator).to.not.be.undefined;
- });
- });
-
- describe('isAnnotatable()', () => {
- beforeEach(() => {
- image.options.viewers = { Image: { annotations: true } };
- });
-
- it('should return false if not using point annotations', () => {
- const result = image.isAnnotatable('highlight');
- expect(result).to.be.false;
- });
-
- it('should return viewer permissions if set', () => {
- expect(image.isAnnotatable('point')).to.be.true;
- image.options.viewers.Image.annotations = false;
- expect(image.isAnnotatable('point')).to.be.false;
- });
-
- it('should return global preview permissions if viewer permissions is not set', () => {
- image.options.showAnnotations = true;
- image.options.viewers.Image.annotations = 'notboolean';
- const result = image.isAnnotatable('point');
- expect(result).to.be.true;
+ expect(image.annotator.addListener).to.be.calledTwice;
});
});