feat(controls): Cleanup legacy controls from non-media viewers (#1312)

box · Jan 12, 2021 · e8a3c57 · e8a3c57
1 parent c695342
commit e8a3c57
Show file tree

Hide file tree

Showing 60 changed files with 294 additions and 2,579 deletions.
diff --git a/src/lib/AnnotationControls.scss b/src/lib/AnnotationControls.scss
diff --git a/src/lib/AnnotationControls.ts b/src/lib/AnnotationControls.ts
diff --git a/src/lib/AnnotationControlsFSM.ts b/src/lib/AnnotationControlsFSM.ts
@@ -1,4 +1,6 @@
-import { AnnotationMode } from './AnnotationControls';
+import { AnnotationMode } from './types';
+
+export * from './types';
 
 export enum AnnotationState {
     DRAWING = 'drawing',

diff --git a/src/lib/Controls.js b/src/lib/Controls.js
@@ -4,8 +4,6 @@ import { CLASS_HIDDEN } from './constants';
 
 const SHOW_PREVIEW_CONTROLS_CLASS = 'box-show-preview-controls';
 const CONTROLS_BUTTON_CLASS = 'bp-controls-btn';
-const CONTROLS_PAGE_NUM_INPUT_CLASS = 'bp-page-num-input';
-const CONTROLS_PAGE_NUM_WRAPPER_CLASS = 'bp-page-num-wrapper';
 const CONTROLS_AUTO_HIDE_TIMEOUT_IN_MILLIS = 2000;
 
 export const CLASS_BOX_CONTROLS_GROUP_BUTTON = 'bp-controls-group-btn';
@@ -81,11 +79,7 @@ class Controls {
      * @return {boolean} true if element is a preview control button
      */
     isPreviewControlButton(element) {
-        return (
-            !!element &&
-            (element.classList.contains(CONTROLS_BUTTON_CLASS) ||
-                element.parentNode.classList.contains(CONTROLS_PAGE_NUM_WRAPPER_CLASS))
-        );
+        return !!element && element.classList.contains(CONTROLS_BUTTON_CLASS);
     }
 
     /**
@@ -97,7 +91,7 @@ class Controls {
         this.controlDisplayTimeoutId = setTimeout(() => {
             clearTimeout(this.controlDisplayTimeoutId);
 
-            if (!this.shouldHide || this.isPageNumFocused()) {
+            if (!this.shouldHide) {
                 this.resetTimeout();
             } else {
                 this.containerEl.classList.remove(SHOW_PREVIEW_CONTROLS_CLASS);
@@ -269,16 +263,6 @@ class Controls {
     disable() {
         this.controlsEl.classList.add(CLASS_HIDDEN);
     }
-
-    /**
-     * Determines if the page number input is focused.
-     *
-     * @public
-     * @return {boolean} Is the input focused
-     */
-    isPageNumFocused() {
-        return document.activeElement && document.activeElement.classList.contains(CONTROLS_PAGE_NUM_INPUT_CLASS);
-    }
 }
 
 export default Controls;
diff --git a/src/lib/Controls.scss b/src/lib/Controls.scss
@@ -1,8 +1,5 @@
 $controls-button-width: 32px;
 
-@import './AnnotationControls';
-@import './ZoomControls';
-
 .bp-controls {
     position: absolute;
     bottom: 25px;
@@ -14,24 +11,6 @@ $controls-button-width: 32px;
     opacity: 0;
     transition: opacity .5s;
 
-    // Page num input CSS
-    .bp-page-num {
-        width: auto; // Let page num expand as needed
-        min-width: 48px;
-
-        span {
-            display: inline;
-            font-size: 14px;
-        }
-    }
-
-    .bp-page-num-wrapper {
-        margin: 5px;
-        padding: 7px 5px;
-        background-color: #444;
-        border-radius: 3px;
-    }
-
     /* stylelint-disable property-no-vendor-prefix */
     // Removes the spinner for number type inputs in Webkit browsers
     input::-webkit-outer-spin-button,
@@ -43,47 +22,7 @@ $controls-button-width: 32px;
     input[type='number'] {
         -moz-appearance: textfield;
     }
-
     /* stylelint-enable property-no-vendor-prefix */
-
-    input[type='number'].bp-page-num-input {
-        position: absolute;
-        width: 44px; // hard-coded to solve layout issues
-        margin: 0 auto;
-        font-size: 14px;
-        text-align: center;
-        visibility: hidden;
-    }
-
-    &.show-page-number-input {
-        .bp-page-num-wrapper {
-            padding: 0;
-            background-color: transparent;
-            border: none;
-        }
-
-        .bp-page-num {
-            opacity: 1;
-        }
-
-        .bp-current-page,
-        .bp-page-num-divider,
-        .bp-total-pages {
-            display: none;
-        }
-
-        input[type='number'].bp-page-num-input {
-            position: static;
-            display: inline-block;
-            visibility: visible;
-        }
-    }
-
-    .bp-zoom-btn {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
 }
 
 .box-show-preview-controls .bp-controls {