Chore: Page num input uses numeric keyboard on mobile devices (#200)

box · Jul 7, 2017 · 6acf8fa · 6acf8fa
1 parent 5d42af4
commit 6acf8fa
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 7 deletions.
diff --git a/src/lib/viewers/doc/DocBaseViewer.js b/src/lib/viewers/doc/DocBaseViewer.js
@@ -705,6 +705,8 @@ const MOBILE_MAX_CANVAS_SIZE = 2949120; // ~3MP 1920x1536
 
         // Keep reference to page number input and current page elements
         this.pageNumInputEl = pageNumEl.querySelector('.bp-doc-page-num-input');
+        this.pageNumInputEl.setAttribute('max', this.pdfViewer.pagesCount);
+
         this.currentPageEl = pageNumEl.querySelector('.bp-doc-current-page');
     }
 
@@ -956,13 +958,14 @@ const MOBILE_MAX_CANVAS_SIZE = 2949120; // ~3MP 1920x1536
 
         switch (key) {
             case 'Enter':
+            case 'Tab':
+                // The keycode of the 'next' key on Android Chrome is 9, which maps to 'Tab'.
+                this.docEl.focus();
                 // We normally trigger the blur handler by blurring the input
                 // field, but this doesn't work for IE in fullscreen. For IE,
                 // we blur the page behind the controls - this unfortunately
                 // is an IE-only solution that doesn't work with other browsers
-                if (Browser.getName() === 'Explorer') {
-                    this.docEl.focus();
-                } else {
+                if (Browser.getName() !== 'Explorer') {
                     event.target.blur();
                 }
 

diff --git a/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js b/src/lib/viewers/doc/__tests__/DocBaseViewer-test.js
@@ -1148,7 +1148,8 @@ describe('src/lib/viewers/doc/DocBaseViewer', () => {
                 pagesCount: 5
             };
             stubs.totalPageEl = {
-                textContent: 0
+                textContent: 0,
+                setAttribute: sandbox.stub()
             };
             stubs.querySelector = {
                 querySelector: sandbox.stub().returns(stubs.totalPageEl)

diff --git a/src/lib/viewers/doc/_docBase.scss b/src/lib/viewers/doc/_docBase.scss
@@ -99,11 +99,26 @@
         padding: 7px 5px;
     }
 
+    /* stylelint-disable property-no-vendor-prefix */
+    // Removes the spinner for number type inputs in Webkit browsers
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+    }
+
+    // Removes the spinner for number type inputs in Firefox
+    input[type=number] {
+        -moz-appearance: textfield;
+    }
+
+    /* stylelint-enable property-no-vendor-prefix */
+
     .bp-doc-page-num-input {
-        display: none;
         font-size: 14px;
         margin: 0 auto;
+        position: absolute;
         text-align: center;
+        visibility: hidden;
         width: 44px; // hard-coded to solve layout issues
     }
 
@@ -125,7 +140,9 @@
         }
 
         .bp-doc-page-num-input {
-            display: block;
+            display: inline-block;
+            position: static;
+            visibility: visible;
         }
     }
 }

diff --git a/src/lib/viewers/doc/pageNumButtonContent.html b/src/lib/viewers/doc/pageNumButtonContent.html
@@ -1,6 +1,6 @@
 <div class="bp-doc-page-num-wrapper">
     <span class="bp-doc-current-page">1</span>
-    <input type="text" value="" size="3" class="bp-doc-page-num-input" />
+    <input type="number" pattern="[0-9]*" min="1"  value="" size="3" class="bp-doc-page-num-input" />
     <span class="bp-doc-page-num-divider">&nbsp;/&nbsp;</span>
     <span class="bp-doc-total-pages">1</span>
 </div>