feat(zoom controls): Restyle zoom controls

src/lib/Controls.js

@@ -189,34 +189,39 @@ class Controls {
      * @param {string} text - button text
      * @param {Function} handler - button handler
      * @param {string} [classList] - optional class list
-     * @param {string} [buttonContent] - Optional button content HTML
+     * @param {string} [content] - Optional button content HTML
      * @return {void}
      */
-    add(text, handler, classList = '', buttonContent = '') {
+    add(text, handler, classList = '', content = '', tag = 'button') {
         const cell = document.createElement('div');
         cell.className = 'bp-controls-cell';
 
-        const button = document.createElement('button');
-        button.setAttribute('aria-label', text);
-        button.setAttribute('type', 'button');
-        button.setAttribute('title', text);
-        button.className = `${CONTROLS_BUTTON_CLASS} ${classList}`;
-        button.addEventListener('click', handler);
+        const element = document.createElement(tag);
+        element.setAttribute('aria-label', text);
+        element.setAttribute('title', text);
+
+        if (tag === 'button') {
+            element.setAttribute('type', 'button');
+            element.className = `${CONTROLS_BUTTON_CLASS} ${classList}`;
+            element.addEventListener('click', handler);
+
+            // Maintain a reference for cleanup
+            this.buttonRefs.push({
+                button: element,
+                handler,
+            });
+        } else {
+            element.className = `${classList}`;
+        }
 
-        if (buttonContent) {
-            button.innerHTML = buttonContent;
+        if (content) {
+            element.innerHTML = content;
         }
 
-        cell.appendChild(button);
+        cell.appendChild(element);
         this.controlsEl.appendChild(cell);
 
-        // Maintain a reference for cleanup
-        this.buttonRefs.push({
-            button,
-            handler,
-        });
-
-        return button;
+        return element;
     }
 
     /**

src/lib/Controls.scss

@@ -153,3 +153,8 @@
         display: block;
     }
 }
+
+.bp-zoom-current-scale {
+    color: $white;
+    font-size: 14px;
+}

src/lib/ZoomControls.js

@@ -0,0 +1,134 @@
+import isFinite from 'lodash/isFinite';
+import EventEmitter from 'events';
+import { ICON_ZOOM_IN, ICON_ZOOM_OUT } from './icons/icons';
+
+const CLASS_ZOOM_CURRENT_SCALE = 'bp-zoom-current-scale';
+const CLASS_ZOOM_IN_BUTTON = 'bp-zoom-in-btn';
+const CLASS_ZOOM_OUT_BUTTON = 'bp-zoom-out-btn';
+
+class ZoomControls extends EventEmitter {
+    /** @property {Controls} - Controls object */
+    controls;
+
+    /** @property {HTMLElement} - Controls element */
+    controlsElement;
+
+    /** @property {number} - Current zoom scale */
+    currentScale;
+
+    /** @property {HTMLElement} - Current scale element */
+    currentScaleElement;
+
+    /** @property {number} - Max zoom scale */
+    maxZoom;
+
+    /** @property {number} - Min zoom scale */
+    minZoom;
+
+    /**
+     * [constructor]
+     *
+     * @param {HTMLElement} controls - Viewer controls
+     * @return {Controls} Instance of controls
+     */
+    constructor(controls) {
+        super();
+
+        this.controls = controls;
+        this.controlsElement = controls.controlsEl;
+
+        this.handleZoomIn = this.handleZoomIn.bind(this);
+        this.handleZoomOut = this.handleZoomOut.bind(this);
+    }
+
+    /**
+     * Add the zoom controls
+     *
+     * @param {number} currentScale - Initial scale value, assumes range of 0-1
+     * @param {number} [options.maxZoom] - Maximum zoom, range 0-1
+     * @param {number} [options.minZoom] - Minimum zoom, range 0-1
+     * @param {String} [options.zoomInClassName] - Class name for zoom in button
+     * @param {String} [options.zoomOutClassName] - Class name for zoom out button
+     * @return {void}
+     */
+    add(
+        currentScale,
+        { zoomOutClassName = '', zoomInClassName = '', minZoom = 0, maxZoom = Number.POSITIVE_INFINITY } = {},
+    ) {
+        this.maxZoom = Math.ceil(maxZoom * 100);
+        this.minZoom = Math.ceil(minZoom * 100);
+
+        this.controls.add(
+            __('zoom_out'),
+            this.handleZoomOut,
+            `${CLASS_ZOOM_OUT_BUTTON} ${zoomOutClassName}`,
+            ICON_ZOOM_OUT,
+        );
+        this.controls.add(
+            __('zoom_current_scale'),
+            undefined,
+            undefined,
+            `<span class="${CLASS_ZOOM_CURRENT_SCALE}" data-testid="current-zoom">100%</span>`,
+            'div',
+        );
+        this.controls.add(__('zoom_in'), this.handleZoomIn, `${CLASS_ZOOM_IN_BUTTON} ${zoomInClassName}`, ICON_ZOOM_IN);
+
+        this.currentScaleElement = this.controlsElement.querySelector(`.${CLASS_ZOOM_CURRENT_SCALE}`);
+        this.setCurrentScale(currentScale);
+    }
+
+    /**
+     * Sets the current scale
+     *
+     * @param {number} scale - New scale to be set as current, range 0-1
+     * @return {void}
+     */
+    setCurrentScale(scale) {
+        if (!isFinite(scale)) {
+            return;
+        }
+
+        this.currentScale = Math.round(scale * 100);
+        this.currentScaleElement.textContent = `${this.currentScale}%`;
+
+        this.checkButtonEnablement();
+    }
+
+    /**
+     * Checks the zoom in and zoom out button enablement
+     *
+     * @return {void}
+     */
+    checkButtonEnablement() {
+        const zoomOutElement = this.controlsElement.querySelector(`.${CLASS_ZOOM_OUT_BUTTON}`);
+        const zoomInElement = this.controlsElement.querySelector(`.${CLASS_ZOOM_IN_BUTTON}`);
+
+        if (zoomOutElement) {
+            zoomOutElement.disabled = this.currentScale <= this.minZoom;
+        }
+
+        if (zoomInElement) {
+            zoomInElement.disabled = this.currentScale >= this.maxZoom;
+        }
+    }
+
+    /**
+     * Handles the zoom in button click
+     *
+     * @emits zoomin
+     */
+    handleZoomIn() {
+        this.emit('zoomin');
+    }
+
+    /**
+     * Handles the zoom out button click
+     *
+     * @emits zoomout
+     */
+    handleZoomOut() {
+        this.emit('zoomout');
+    }
+}
+
+export default ZoomControls;

src/lib/icons/icons.js

@@ -4,8 +4,8 @@ import DELETE from './delete_24px.svg';
 import FULLSCREEN_IN from './full_screen_in_24px.svg';
 import FULLSCREEN_OUT from './full_screen_out_24px.svg';
 import ROTATE_LEFT from './rotate_left_24px.svg';
-import ZOOM_IN from './zoom_in_24px.svg';
-import ZOOM_OUT from './zoom_out_24px.svg';
+import ZOOM_IN from './zoom_in_16px.svg';
+import ZOOM_OUT from './zoom_out_16px.svg';
 import ARROW_LEFT from './arrow_left_24px.svg';
 import ARROW_RIGHT from './arrow_right_24px.svg';
 import CHECK_MARK from './checkmark_24px.svg';

src/lib/viewers/doc/DocBaseViewer.js

@@ -3,6 +3,7 @@ import BaseViewer from '../BaseViewer';
 import Browser from '../../Browser';
 import Controls from '../../Controls';
 import PageControls from '../../PageControls';
+import ZoomControls from '../../ZoomControls';
 import DocFindBar from './DocFindBar';
 import Popup from '../../Popup';
 import RepStatus from '../../RepStatus';
@@ -30,8 +31,6 @@ import { checkPermission, getRepresentation } from '../../file';
 import { appendQueryParams, createAssetUrlCreator, getMidpoint, getDistance, getClosestPageToPinch } from '../../util';
 import {
     ICON_PRINT_CHECKMARK,
-    ICON_ZOOM_OUT,
-    ICON_ZOOM_IN,
     ICON_FULLSCREEN_IN,
     ICON_FULLSCREEN_OUT,
     ICON_THUMBNAILS_TOGGLE,
@@ -41,7 +40,7 @@ import { ERROR_CODE, VIEWER_EVENT, LOAD_METRIC, USER_DOCUMENT_THUMBNAIL_EVENTS }
 import Timer from '../../Timer';
 
 const CURRENT_PAGE_MAP_KEY = 'doc-current-page-map';
-const DEFAULT_SCALE_DELTA = 1.1;
+const DEFAULT_SCALE_DELTA = 0.1;
 const IS_SAFARI_CLASS = 'is-safari';
 const LOAD_TIMEOUT_MS = 180000; // 3 min timeout
 const MAX_PINCH_SCALE_VALUE = 3;
@@ -167,6 +166,11 @@ class DocBaseViewer extends BaseViewer {
             this.pageControls.removeListener('pagechange', this.setPage);
         }
 
+        if (this.zoomControls) {
+            this.zoomControls.removeListener('zoomin', this.zoomIn);
+            this.zoomControls.removeListener('zoomout', this.zoomOut);
+        }
+
         if (this.controls && typeof this.controls.destroy === 'function') {
             this.controls.destroy();
         }
@@ -523,7 +527,7 @@ class DocBaseViewer extends BaseViewer {
         let numTicks = ticks;
         let newScale = this.pdfViewer.currentScale;
         do {
-            newScale = (newScale * DEFAULT_SCALE_DELTA).toFixed(3);
+            newScale += DEFAULT_SCALE_DELTA;
             newScale = Math.min(MAX_SCALE, newScale);
             numTicks -= 1;
         } while (numTicks > 0 && newScale < MAX_SCALE);
@@ -536,6 +540,7 @@ class DocBaseViewer extends BaseViewer {
             });
         }
         this.pdfViewer.currentScaleValue = newScale;
+        this.zoomControls.setCurrentScale(newScale);
     }
 
     /**
@@ -548,7 +553,7 @@ class DocBaseViewer extends BaseViewer {
         let numTicks = ticks;
         let newScale = this.pdfViewer.currentScale;
         do {
-            newScale = (newScale / DEFAULT_SCALE_DELTA).toFixed(3);
+            newScale -= DEFAULT_SCALE_DELTA;
             newScale = Math.max(MIN_SCALE, newScale);
             numTicks -= 1;
         } while (numTicks > 0 && newScale > MIN_SCALE);
@@ -561,6 +566,7 @@ class DocBaseViewer extends BaseViewer {
             });
         }
         this.pdfViewer.currentScaleValue = newScale;
+        this.zoomControls.setCurrentScale(newScale);
     }
 
     /**
@@ -1006,7 +1012,10 @@ class DocBaseViewer extends BaseViewer {
     loadUI() {
         this.controls = new Controls(this.containerEl);
         this.pageControls = new PageControls(this.controls, this.docEl);
+        this.zoomControls = new ZoomControls(this.controls);
         this.pageControls.addListener('pagechange', this.setPage);
+        this.zoomControls.addListener('zoomin', this.zoomIn);
+        this.zoomControls.addListener('zoomout', this.zoomOut);
         this.bindControlListeners();
     }
 
@@ -1065,8 +1074,12 @@ class DocBaseViewer extends BaseViewer {
             );
         }
 
-        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);
+        this.zoomControls.add(this.pdfViewer.currentScale, {
+            maxZoom: MAX_SCALE,
+            minZoom: MIN_SCALE,
+            zoomInClassName: 'bp-doc-zoom-in-icon',
+            zoomOutClassName: 'bp-doc-zoom-out-icon',
+        });
 
         this.pageControls.add(this.pdfViewer.currentPageNumber, this.pdfViewer.pagesCount);
 

src/lib/viewers/image/ImageBaseViewer.js

@@ -2,11 +2,11 @@ import Controls from '../../Controls';
 import BaseViewer from '../BaseViewer';
 import Browser from '../../Browser';
 import PreviewError from '../../PreviewError';
-import { ICON_ZOOM_IN, ICON_ZOOM_OUT } from '../../icons/icons';
 
 import { BROWSERS, CLASS_INVISIBLE } from '../../constants';
 import { ERROR_CODE, VIEWER_EVENT } from '../../events';
 import { openContentInsideIframe } from '../../util';
+import ZoomControls from '../../ZoomControls';
 
 const CSS_CLASS_PANNING = 'panning';
 const CSS_CLASS_ZOOMABLE = 'zoomable';
@@ -52,6 +52,11 @@ class ImageBaseViewer extends BaseViewer {
     destroy() {
         this.unbindDOMListeners();
 
+        if (this.zoomControls) {
+            this.zoomControls.removeListener('zoomin', this.zoomIn);
+            this.zoomControls.removeListener('zoomout', this.zoomOut);
+        }
+
         // Destroy the controls
         if (this.controls && typeof this.controls.destroy === 'function') {
             this.controls.destroy();
@@ -77,8 +82,8 @@ class ImageBaseViewer extends BaseViewer {
 
         const loadOriginalDimensions = this.setOriginalImageSize(this.imageEl);
         loadOriginalDimensions.then(() => {
-            this.loadUI();
             this.zoom();
+            this.loadUI();
 
             this.imageEl.classList.remove(CLASS_INVISIBLE);
             this.loaded = true;
@@ -199,7 +204,7 @@ class ImageBaseViewer extends BaseViewer {
      */
     loadUI() {
         this.controls = new Controls(this.containerEl);
-        this.bindControlListeners();
+        this.zoomControls = new ZoomControls(this.controls);
     }
 
     /**
@@ -254,17 +259,6 @@ class ImageBaseViewer extends BaseViewer {
     // Event Listeners
     //--------------------------------------------------------------------------
 
-    /**
-     * Bind event listeners for document controls
-     *
-     * @private
-     * @return {void}
-     */
-    bindControlListeners() {
-        this.controls.add(__('zoom_out'), this.zoomOut, 'bp-image-zoom-out-icon', ICON_ZOOM_OUT);
-        this.controls.add(__('zoom_in'), this.zoomIn, 'bp-image-zoom-in-icon', ICON_ZOOM_IN);
-    }
-
     /**
      * Binds DOM listeners for image viewers.
      *