Merge pull request mozilla#9877 from Snuffleupagus/scroll-spread-hide

Hide the Scroll/Spread mode buttons if the viewer is a `PDFSinglePageViewer` instance (PR 9858 follow-up)
Rob--W · Jul 8, 2018 · 7e1f727 · 7e1f727
2 parents 9c06338 + d8c2bcc
commit 7e1f727
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 12 deletions.
diff --git a/web/base_viewer.js b/web/base_viewer.js
@@ -183,6 +183,12 @@ class BaseViewer {
         this.spreadMode = options.spreadMode;
       }
     }
+
+    // Defer the dispatching of this event, to give other viewer components
+    // time to initialize *and* register 'baseviewerinit' event listeners.
+    Promise.resolve().then(() => {
+      this.eventBus.dispatch('baseviewerinit', { source: this, });
+    });
   }
 
   get pagesCount() {

diff --git a/web/pdf_cursor_tools.js b/web/pdf_cursor_tools.js
@@ -47,6 +47,8 @@ class PDFCursorTools {
 
     this._addEventListeners();
 
+    // Defer the initial `switchTool` call, to give other viewer components
+    // time to initialize *and* register 'cursortoolchanged' event listeners.
     Promise.resolve().then(() => {
       this.switchTool(cursorToolOnLoad);
     });

diff --git a/web/secondary_toolbar.js b/web/secondary_toolbar.js
@@ -15,6 +15,7 @@
 
 import { ScrollMode, SpreadMode } from './base_viewer';
 import { CursorTool } from './pdf_cursor_tools';
+import { PDFSinglePageViewer } from './pdf_single_page_viewer';
 import { SCROLLBAR_PADDING } from './ui_utils';
 
 /**
@@ -117,6 +118,18 @@ class SecondaryToolbar {
 
     // Bind the event listener for adjusting the 'max-height' of the toolbar.
     this.eventBus.on('resize', this._setMaxHeight.bind(this));
+
+    // Hide the Scroll/Spread mode buttons, when they're not applicable to the
+    // current `BaseViewer` instance (in particular `PDFSinglePageViewer`).
+    this.eventBus.on('baseviewerinit', (evt) => {
+      if (evt.source instanceof PDFSinglePageViewer) {
+        this.toolbarButtonContainer.classList.add('hiddenScrollModeButtons');
+        this.toolbarButtonContainer.classList.add('hiddenSpreadModeButtons');
+      } else {
+        this.toolbarButtonContainer.classList.remove('hiddenScrollModeButtons');
+        this.toolbarButtonContainer.classList.remove('hiddenSpreadModeButtons');
+      }
+    });
   }
 
   /**
@@ -142,8 +155,7 @@ class SecondaryToolbar {
     this._updateUIState();
 
     // Reset the Scroll/Spread buttons too, since they're document specific.
-    this.eventBus.dispatch('resetscrollmode', { source: this, });
-    this.eventBus.dispatch('resetspreadmode', { source: this, });
+    this.eventBus.dispatch('secondarytoolbarreset', { source: this, });
   }
 
   _updateUIState() {
@@ -209,10 +221,17 @@ class SecondaryToolbar {
           buttons.scrollWrappedButton.classList.add('toggled');
           break;
       }
+
+      // Temporarily *disable* the Spread buttons when horizontal scrolling is
+      // enabled, since the non-default Spread modes doesn't affect the layout.
+      const isScrollModeHorizontal = (evt.mode === ScrollMode.HORIZONTAL);
+      buttons.spreadNoneButton.disabled = isScrollModeHorizontal;
+      buttons.spreadOddButton.disabled = isScrollModeHorizontal;
+      buttons.spreadEvenButton.disabled = isScrollModeHorizontal;
     }
     this.eventBus.on('scrollmodechanged', scrollModeChanged);
 
-    this.eventBus.on('resetscrollmode', (evt) => {
+    this.eventBus.on('secondarytoolbarreset', (evt) => {
       if (evt.source === this) {
         scrollModeChanged({ mode: ScrollMode.VERTICAL, });
       }
@@ -239,7 +258,7 @@ class SecondaryToolbar {
     }
     this.eventBus.on('spreadmodechanged', spreadModeChanged);
 
-    this.eventBus.on('resetspreadmode', (evt) => {
+    this.eventBus.on('secondarytoolbarreset', (evt) => {
       if (evt.source === this) {
         spreadModeChanged({ mode: SpreadMode.NONE, });
       }

diff --git a/web/viewer.css b/web/viewer.css
@@ -394,6 +394,11 @@ html[dir='rtl'] .secondaryToolbar {
   margin-bottom: -4px;
 }
 
+#secondaryToolbarButtonContainer.hiddenScrollModeButtons > .scrollModeButtons,
+#secondaryToolbarButtonContainer.hiddenSpreadModeButtons > .spreadModeButtons {
+  display: none !important;
+}
+
 .doorHanger,
 .doorHangerRight {
   border: 1px solid hsla(0,0%,0%,.5);

diff --git a/web/viewer.html b/web/viewer.html
@@ -168,29 +168,29 @@
 
             <div class="horizontalToolbarSeparator"></div>
 
-            <button id="scrollVertical" class="secondaryToolbarButton scrollVertical toggled" title="Use Vertical Scrolling" tabindex="62" data-l10n-id="scroll_vertical">
+            <button id="scrollVertical" class="secondaryToolbarButton scrollModeButtons scrollVertical toggled" title="Use Vertical Scrolling" tabindex="62" data-l10n-id="scroll_vertical">
               <span data-l10n-id="scroll_vertical_label">Vertical Scrolling</span>
             </button>
-            <button id="scrollHorizontal" class="secondaryToolbarButton scrollHorizontal" title="Use Horizontal Scrolling" tabindex="63" data-l10n-id="scroll_horizontal">
+            <button id="scrollHorizontal" class="secondaryToolbarButton scrollModeButtons scrollHorizontal" title="Use Horizontal Scrolling" tabindex="63" data-l10n-id="scroll_horizontal">
               <span data-l10n-id="scroll_horizontal_label">Horizontal Scrolling</span>
             </button>
-            <button id="scrollWrapped" class="secondaryToolbarButton scrollWrapped" title="Use Wrapped Scrolling" tabindex="64" data-l10n-id="scroll_wrapped">
+            <button id="scrollWrapped" class="secondaryToolbarButton scrollModeButtons scrollWrapped" title="Use Wrapped Scrolling" tabindex="64" data-l10n-id="scroll_wrapped">
               <span data-l10n-id="scroll_wrapped_label">Wrapped Scrolling</span>
             </button>
 
-            <div class="horizontalToolbarSeparator"></div>
+            <div class="horizontalToolbarSeparator scrollModeButtons"></div>
 
-            <button id="spreadNone" class="secondaryToolbarButton spreadNone toggled" title="Do not join page spreads" tabindex="65" data-l10n-id="spread_none">
+            <button id="spreadNone" class="secondaryToolbarButton spreadModeButtons spreadNone toggled" title="Do not join page spreads" tabindex="65" data-l10n-id="spread_none">
               <span data-l10n-id="spread_none_label">No Spreads</span>
             </button>
-            <button id="spreadOdd" class="secondaryToolbarButton spreadOdd" title="Join page spreads starting with odd-numbered pages" tabindex="66" data-l10n-id="spread_odd">
+            <button id="spreadOdd" class="secondaryToolbarButton spreadModeButtons spreadOdd" title="Join page spreads starting with odd-numbered pages" tabindex="66" data-l10n-id="spread_odd">
               <span data-l10n-id="spread_odd_label">Odd Spreads</span>
             </button>
-            <button id="spreadEven" class="secondaryToolbarButton spreadEven" title="Join page spreads starting with even-numbered pages" tabindex="67" data-l10n-id="spread_even">
+            <button id="spreadEven" class="secondaryToolbarButton spreadModeButtons spreadEven" title="Join page spreads starting with even-numbered pages" tabindex="67" data-l10n-id="spread_even">
               <span data-l10n-id="spread_even_label">Even Spreads</span>
             </button>
 
-            <div class="horizontalToolbarSeparator"></div>
+            <div class="horizontalToolbarSeparator spreadModeButtons"></div>
 
             <button id="documentProperties" class="secondaryToolbarButton documentProperties" title="Document Properties…" tabindex="68" data-l10n-id="document_properties">
               <span data-l10n-id="document_properties_label">Document Properties…</span>