feat(annotations): add support for passed annotations options (#1206)

* feat(annotations): add support for passed annotations options
* Add support for annotation options that will populate intl object that gets passed to annotator if present.

* feat(annotations): add support for passed annotations options
* Add option to pass locale
* PR Feedback

* feat(annotations): add support for passed annotations options
* PR Feedback

* feat(annotations): add support for passed annotations options

src/lib/__tests__/i18n-test.js

@@ -3,7 +3,8 @@ import i18n from '../i18n';
 describe('i18n', () => {
     it('should return an intl provider object', () => {
         const intl = i18n.createAnnotatorIntl();
-        expect(intl.messages).to.be.an('object');
         expect(intl.language).to.equal('en-US');
+        expect(intl.locale).to.equal('en');
+        expect(intl.messages).to.be.an('object');
     });
 });

src/lib/i18n.js

@@ -7,6 +7,10 @@ try {
 
 const language = __LANGUAGE__ || 'en-US'; // eslint-disable-line
 
+const getLocale = lang => {
+    return lang.substr(0, lang.indexOf('-'));
+};
+
 /**
  * Creates Intl object used by annotations
  *
@@ -15,8 +19,9 @@ const language = __LANGUAGE__ || 'en-US'; // eslint-disable-line
  */
 const createAnnotatorIntl = () => {
     return {
-        messages: annotationMessages,
         language,
+        locale: getLocale(language),
+        messages: annotationMessages,
     };
 };
 

src/lib/viewers/BaseViewer.js

@@ -2,7 +2,7 @@ import EventEmitter from 'events';
 import cloneDeep from 'lodash/cloneDeep';
 import debounce from 'lodash/debounce';
 import fullscreen from '../Fullscreen';
-import intl from '../i18n';
+import intlUtil from '../i18n';
 import RepStatus from '../RepStatus';
 import Browser from '../Browser';
 import {
@@ -938,10 +938,14 @@ class BaseViewer extends EventEmitter {
             return;
         }
 
+        const options = boxAnnotations.getOptions && boxAnnotations.getOptions();
+
         const annotatorOptions = this.createAnnotatorOptions({
             annotator: this.annotatorConf,
+            intl: (options && options.intl) || intlUtil.createAnnotatorIntl(),
             modeButtons: ANNOTATION_BUTTONS,
         });
+
         this.annotator = new this.annotatorConf.CONSTRUCTOR(annotatorOptions);
 
         if (this.annotatorPromiseResolver) {
@@ -1179,7 +1183,6 @@ class BaseViewer extends EventEmitter {
             ...this.options,
             ...moreOptions,
             hasTouch: this.hasTouch,
-            intl: intl.createAnnotatorIntl(),
             isMobile: this.isMobile,
             locale: this.options.location.locale,
             localizedStrings,

src/lib/viewers/__tests__/BaseViewer-test.js

@@ -5,6 +5,7 @@ import Browser from '../../Browser';
 import RepStatus from '../../RepStatus';
 import PreviewError from '../../PreviewError';
 import fullscreen from '../../Fullscreen';
+import intl from '../../i18n';
 import * as util from '../../util';
 import * as icons from '../../icons/icons';
 import * as constants from '../../constants';
@@ -1058,6 +1059,13 @@ describe('lib/viewers/BaseViewer', () => {
 
     describe('createAnnotator()', () => {
         const annotatorMock = {};
+        const annotationsOptions = {
+            intl: {
+                language: 'en-US',
+                locale: 'en-US',
+                messages: { test: 'Test Message' },
+            },
+        };
         const conf = {
             annotationsEnabled: true,
             types: {
@@ -1073,6 +1081,7 @@ describe('lib/viewers/BaseViewer', () => {
             base.options.showAnnotations = true;
             window.BoxAnnotations = function BoxAnnotations() {
                 this.determineAnnotator = sandbox.stub().returns(conf);
+                this.getAnnotationsOptions = sandbox.stub().returns(annotationsOptions);
             };
 
             sandbox.stub(base, 'initAnnotations');
@@ -1102,6 +1111,38 @@ describe('lib/viewers/BaseViewer', () => {
             base.createAnnotator();
             expect(base.options.boxAnnotations.determineAnnotator).to.be.called;
         });
+
+        it('should call createAnnotatorOptions with locale, language, and messages from options', () => {
+            sandbox.stub(base, 'areAnnotationsEnabled').returns(true);
+            sandbox.stub(base, 'createAnnotatorOptions');
+
+            base.options.boxAnnotations = {
+                determineAnnotator: sandbox.stub().returns(conf),
+                getOptions: sandbox.stub().returns(annotationsOptions),
+            };
+
+            base.createAnnotator();
+
+            expect(base.options.boxAnnotations.getOptions).to.be.called;
+            expect(base.createAnnotatorOptions).to.be.calledWith(sinon.match(annotationsOptions));
+        });
+
+        it('should use default intl lib if annotator options not present ', () => {
+            sandbox.stub(base, 'areAnnotationsEnabled').returns(true);
+            sandbox.stub(base, 'createAnnotatorOptions');
+            sandbox.stub(intl, 'createAnnotatorIntl').returns(annotationsOptions.intl);
+
+            base.options.boxAnnotations = {
+                determineAnnotator: sandbox.stub().returns(conf),
+                getOptions: sandbox.stub().returns(undefined),
+            };
+
+            base.createAnnotator();
+
+            expect(base.options.boxAnnotations.getOptions).to.be.called;
+            expect(intl.createAnnotatorIntl).to.be.called;
+            expect(base.createAnnotatorOptions).to.be.calledWith(sinon.match(annotationsOptions));
+        });
     });
 
     describe('initAnnotations()', () => {
@@ -1460,8 +1501,6 @@ describe('lib/viewers/BaseViewer', () => {
             expect(combinedOptions.location).to.deep.equal({ locale: 'en-US' });
             expect(combinedOptions.randomOption).to.equal('derp');
             expect(combinedOptions.localizedStrings).to.not.be.undefined;
-            expect(combinedOptions.intl.language).to.equal('en-US');
-            expect(combinedOptions.intl.messages).to.be.an('object');
         });
     });