feat(discoverability): add class to bp-content if FF is enabled (#1256)

* feat(discoverability): add class to docEl if FF is enabled * feat(discoverability): rename class * feat(discoverability): move bp-annotations-discoverable to BaseViewer * feat(discoverability): use containerEl instead of rootEl / use nextMode * feat(discoverability): move styles from bp to bp-content * feat(discoverability): move styles together under bp-content * feat(discoverability): remove FF check / remove NONE case * feat(discoverability): update BaseViewer test * feat(discoverability): define const for class * feat(discoverability): use empty div / use constant for class * feat(discoverability): fix test title typo * feat(discoverability): move classes to constants file * feat(discoverability): parameterize tests * feat(discoverability): add pointer events to annotationLayer section * feat(discoverability): remove section class from styles * feat(discoverability): abc constants * feat(discoverability): abc constants Co-authored-by: Conrad Chan <[email protected]>
box · Sep 17, 2020 · c6e3379 · c6e3379
1 parent b88eedc
commit c6e3379
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 17 deletions.
diff --git a/src/lib/constants.js b/src/lib/constants.js
@@ -1,4 +1,6 @@
 export const CLASS_ACTIVE = 'bp-is-active';
+export const CLASS_ANNOTATIONS_CREATE_REGION = 'bp-annotations-create--region';
+export const CLASS_ANNOTATIONS_DISCOVERABLE = 'bp-annotations-discoverable';
 export const CLASS_NAVIGATION_VISIBILITY = 'bp-is-navigation-visible';
 export const CLASS_HIDDEN = 'bp-is-hidden';
 export const CLASS_PREVIEW_LOADED = 'bp-loaded';

diff --git a/src/lib/viewers/BaseViewer.js b/src/lib/viewers/BaseViewer.js
@@ -19,6 +19,8 @@ import {
 } from '../util';
 import {
     ANNOTATOR_EVENT,
+    CLASS_ANNOTATIONS_CREATE_REGION,
+    CLASS_ANNOTATIONS_DISCOVERABLE,
     CLASS_BOX_PREVIEW_MOBILE,
     CLASS_HIDDEN,
     FILE_OPTION_START,
@@ -214,6 +216,10 @@ class BaseViewer extends EventEmitter {
             });
         }
 
+        if (this.options.enableAnnotationsDiscoverability) {
+            this.containerEl.classList.add(CLASS_ANNOTATIONS_DISCOVERABLE);
+        }
+
         this.isSetup = true;
     }
 
@@ -260,6 +266,7 @@ class BaseViewer extends EventEmitter {
         if (this.containerEl) {
             this.containerEl.removeEventListener('contextmenu', this.preventDefault);
             this.containerEl.innerHTML = '';
+            this.containerEl.classList.remove(CLASS_ANNOTATIONS_DISCOVERABLE);
         }
 
         // Destroy the annotator
@@ -1089,6 +1096,17 @@ class BaseViewer extends EventEmitter {
                 : nextMode,
         );
         this.annotationControls.setMode(nextMode);
+
+        if (this.options.enableAnnotationsDiscoverability) {
+            switch (nextMode) {
+                case AnnotationMode.REGION:
+                    this.containerEl.classList.add(CLASS_ANNOTATIONS_CREATE_REGION);
+                    break;
+                default:
+                    this.containerEl.classList.remove(CLASS_ANNOTATIONS_CREATE_REGION);
+                    break;
+            }
+        }
     }
 
     /**

diff --git a/src/lib/viewers/__tests__/BaseViewer-test.js b/src/lib/viewers/__tests__/BaseViewer-test.js
@@ -20,7 +20,7 @@ let base;
 let containerEl;
 let stubs = {};
 const sandbox = sinon.sandbox.create();
-const { ANNOTATOR_EVENT } = constants;
+const { ANNOTATOR_EVENT, CLASS_ANNOTATIONS_CREATE_REGION, CLASS_ANNOTATIONS_DISCOVERABLE } = constants;
 
 describe('lib/viewers/BaseViewer', () => {
     before(() => {
@@ -68,6 +68,7 @@ describe('lib/viewers/BaseViewer', () => {
             sandbox.stub(base, 'finishLoadingSetup');
             sandbox.stub(base, 'loadBoxAnnotations').returns(Promise.resolve());
             base.options.showAnnotations = true;
+            base.options.enableAnnotationsDiscoverability = true;
 
             base.setup();
 
@@ -81,9 +82,11 @@ describe('lib/viewers/BaseViewer', () => {
                     },
                 },
                 showAnnotations: true,
+                enableAnnotationsDiscoverability: true,
             });
 
             expect(base.containerEl).to.have.class(constants.CLASS_BOX_PREVIEW_CONTENT);
+            expect(base.containerEl).to.have.class(CLASS_ANNOTATIONS_DISCOVERABLE);
             expect(base.addCommonListeners).to.be.called;
             expect(getIconFromExtensionStub).to.be.called;
             expect(base.loadTimeout).to.be.a('number');
@@ -443,7 +446,13 @@ describe('lib/viewers/BaseViewer', () => {
             stubs.fullscreenAddListener = sandbox.stub(fullscreen, 'addListener');
             stubs.baseAddListener = sandbox.spy(base, 'addListener');
             stubs.documentAddEventListener = sandbox.stub(document.defaultView, 'addEventListener');
-            base.containerEl = document;
+            base.containerEl = {
+                addEventListener: sandbox.stub(),
+                removeEventListener: sandbox.stub(),
+                classList: {
+                    remove: sandbox.stub(),
+                },
+            };
         });
 
         it('should append common event listeners', () => {
@@ -460,11 +469,6 @@ describe('lib/viewers/BaseViewer', () => {
                 can_download: false,
             };
 
-            base.containerEl = {
-                addEventListener: sandbox.stub(),
-                removeEventListener: sandbox.stub(),
-            };
-
             base.addCommonListeners();
 
             expect(base.containerEl.addEventListener).to.be.calledWith('contextmenu', sinon.match.func);
@@ -627,6 +631,7 @@ describe('lib/viewers/BaseViewer', () => {
 
             expect(base.removeAllListeners).to.be.called;
             expect(base.containerEl.innerHTML).to.equal('');
+            expect(base.containerEl).to.not.have.class(CLASS_ANNOTATIONS_DISCOVERABLE);
             expect(base.destroyed).to.be.true;
             expect(base.emit).to.be.calledWith('destroy');
         });
@@ -654,6 +659,9 @@ describe('lib/viewers/BaseViewer', () => {
             base.containerEl = {
                 addEventListener: sandbox.stub(),
                 removeEventListener: sandbox.stub(),
+                classList: {
+                    remove: sandbox.stub(),
+                },
             };
 
             base.destroy();
@@ -1858,24 +1866,20 @@ describe('lib/viewers/BaseViewer', () => {
                 destroy: sandbox.stub(),
                 setMode: sandbox.stub(),
             };
-        });
-
-        it('should call toggleAnnotationMode and setMode', () => {
+            base.containerEl = document.createElement('div');
             base.annotator = {
                 toggleAnnotationMode: sandbox.stub(),
             };
+        });
 
+        it('should call toggleAnnotationMode and setMode', () => {
             base.handleAnnotationControlsClick({ mode: AnnotationMode.REGION });
 
             expect(base.annotator.toggleAnnotationMode).to.be.calledWith(AnnotationMode.REGION);
             expect(base.annotationControls.setMode).to.be.calledWith(AnnotationMode.REGION);
         });
 
         it('should call toggleAnnotationMode with appropriate mode if discoverability is enabled', () => {
-            base.annotator = {
-                toggleAnnotationMode: sandbox.stub(),
-            };
-
             base.options.enableAnnotationsDiscoverability = false;
             base.handleAnnotationControlsClick({ mode: AnnotationMode.NONE });
             expect(base.annotator.toggleAnnotationMode).to.be.calledWith(AnnotationMode.NONE);
@@ -1884,5 +1888,21 @@ describe('lib/viewers/BaseViewer', () => {
             base.handleAnnotationControlsClick({ mode: AnnotationMode.NONE });
             expect(base.annotator.toggleAnnotationMode).to.be.calledWith(AnnotationMode.REGION);
         });
+
+        it('should add create region class if discoverability is enabled and mode is REGION', () => {
+            base.options.enableAnnotationsDiscoverability = true;
+            base.handleAnnotationControlsClick({ mode: AnnotationMode.REGION });
+
+            expect(base.containerEl).to.have.class(CLASS_ANNOTATIONS_CREATE_REGION);
+        });
+
+        [AnnotationMode.NONE, AnnotationMode.HIGHLIGHT].forEach(mode => {
+            it(`should remove create region class if discoverability is enabled and mode is ${mode}`, () => {
+                base.options.enableAnnotationsDiscoverability = true;
+                base.handleAnnotationControlsClick({ mode });
+
+                expect(base.containerEl).to.not.have.class(CLASS_ANNOTATIONS_CREATE_REGION);
+            });
+        });
     });
 });
diff --git a/src/lib/viewers/doc/_docBase.scss b/src/lib/viewers/doc/_docBase.scss
@@ -332,7 +332,31 @@ $thumbnail-sidebar-width: 226px;
     }
 }
 
-// Hide the toggle thumbnails button when in fullscreen
-.bp-content.bp-is-fullscreen .bp-toggle-thumbnails-icon {
-    display: none;
+.bp-content {
+    &.bp-annotations-discoverable {
+        .textLayer {
+            pointer-events: none;
+
+            span {
+                pointer-events: auto;
+            }
+        }
+
+        &.bp-annotations-create--region {
+            .textLayer {
+                span {
+                    pointer-events: none;
+                }
+            }
+
+            .annotationLayer {
+                pointer-events: none;
+            }
+        }
+    }
+
+    // Hide the toggle thumbnails button when in fullscreen
+    &.bp-is-fullscreen .bp-toggle-thumbnails-icon {
+        display: none;
+    }
 }