-
Notifications
You must be signed in to change notification settings - Fork 105
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
New: Allow scrolling for multi-page image files #308
Changes from 3 commits
d1434f1
a9ebfc6
8c52781
f1580d8
8da02a4
9e6a9ec
d266bea
e13756a
8cdc415
10876d7
c356a5f
8a0467d
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,7 @@ | ||
import throttle from 'lodash.throttle'; | ||
import Browser from './Browser'; | ||
import { CLASS_HIDDEN } from './constants'; | ||
import fullscreen from './Fullscreen'; | ||
|
||
const SHOW_PREVIEW_CONTROLS_CLASS = 'box-show-preview-controls'; | ||
const CONTROLS_BUTTON_CLASS = 'bp-controls-btn'; | ||
|
@@ -24,6 +25,18 @@ class Controls { | |
/** @property {boolean} - Whether browser supports touch */ | ||
hasTouch = Browser.hasTouch(); | ||
|
||
/** @property {HTMLElement} - Page num input element */ | ||
pageNumInputEl; | ||
|
||
/** @property {String} - HTML template for page num element */ | ||
pageNumTemplate = ` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Instead of making this a property of Controls.js (since it is not required for base controls, and is used as a constant) could you make this an exported |
||
<div class='bp-page-num-wrapper'> | ||
<span class='bp-current-page'>1</span> | ||
<input type='number' pattern='[0-9]*' min='1' value='' size='3' class='bp-page-num-input' /> | ||
<span class='bp-page-num-divider'> / </span> | ||
<span class='bp-total-pages'>1</span> | ||
</div>`.replace(/>\s*</g, '><'); | ||
|
||
/** | ||
* [constructor] | ||
* | ||
|
@@ -239,6 +252,69 @@ class Controls { | |
isPageNumFocused() { | ||
return document.activeElement.classList.contains(CONTROLS_PAGE_NUM_INPUT_CLASS); | ||
} | ||
|
||
/** | ||
* Initializes page number selector. | ||
* | ||
* @private | ||
* @param {number} pagesCount - Total number of page | ||
* @return {void} | ||
*/ | ||
initPageNumEl(pagesCount) { | ||
const pageNumEl = this.controlsEl.querySelector('.bp-page-num'); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can you consolidate re-used selectors into constants? IE) |
||
|
||
// Update total page number | ||
const totalPageEl = pageNumEl.querySelector('.bp-total-pages'); | ||
totalPageEl.textContent = pagesCount; | ||
|
||
// Keep reference to page number input and current page elements | ||
this.pageNumInputEl = pageNumEl.querySelector('.bp-page-num-input'); | ||
this.pageNumInputEl.setAttribute('max', pagesCount); | ||
|
||
this.currentPageEl = pageNumEl.querySelector('.bp-current-page'); | ||
} | ||
|
||
/** | ||
* Disables or enables previous/next pagination buttons depending on | ||
* current page number. | ||
* | ||
* @return {void} | ||
*/ | ||
checkPaginationButtons(currentPageNum, pagesCount) { | ||
const pageNumButtonEl = this.containerEl.querySelector('.bp-page-num'); | ||
const previousPageButtonEl = this.containerEl.querySelector('.bp-previous-page'); | ||
const nextPageButtonEl = this.containerEl.querySelector('.bp-next-page'); | ||
|
||
// Safari disables keyboard input in fullscreen before Safari 10.1 | ||
const isSafariFullscreen = Browser.getName() === 'Safari' && fullscreen.isFullscreen(this.containerEl); | ||
|
||
// Disable page number selector if there is only one page or less | ||
if (pageNumButtonEl) { | ||
if (pagesCount <= 1 || isSafariFullscreen) { | ||
pageNumButtonEl.disabled = true; | ||
} else { | ||
pageNumButtonEl.disabled = false; | ||
} | ||
} | ||
|
||
// Disable previous page if on first page, otherwise enable | ||
if (previousPageButtonEl) { | ||
if (currentPageNum === 1) { | ||
previousPageButtonEl.disabled = true; | ||
} else { | ||
previousPageButtonEl.disabled = false; | ||
} | ||
} | ||
|
||
// Disable next page if on last page, otherwise enable | ||
if (nextPageButtonEl) { | ||
if (currentPageNum === pagesCount) { | ||
nextPageButtonEl.disabled = true; | ||
} else { | ||
nextPageButtonEl.disabled = false; | ||
} | ||
} | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can you imagine if we had React? |
||
} | ||
|
||
export default Controls; |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -347,50 +347,6 @@ class DocBaseViewer extends BaseViewer { | |
this.cache.set(CURRENT_PAGE_MAP_KEY, currentPageMap, true /* useLocalStorage */); | ||
} | ||
|
||
/** | ||
* Disables or enables previous/next pagination buttons depending on | ||
* current page number. | ||
* | ||
* @return {void} | ||
*/ | ||
checkPaginationButtons() { | ||
const pagesCount = this.pdfViewer.pagesCount; | ||
const currentPageNum = this.pdfViewer.currentPageNumber; | ||
const pageNumButtonEl = this.containerEl.querySelector('.bp-doc-page-num'); | ||
const previousPageButtonEl = this.containerEl.querySelector('.bp-previous-page'); | ||
const nextPageButtonEl = this.containerEl.querySelector('.bp-next-page'); | ||
|
||
// Safari disables keyboard input in fullscreen before Safari 10.1 | ||
const isSafariFullscreen = Browser.getName() === 'Safari' && fullscreen.isFullscreen(this.containerEl); | ||
|
||
// Disable page number selector if there is only one page or less | ||
if (pageNumButtonEl) { | ||
if (pagesCount <= 1 || isSafariFullscreen) { | ||
pageNumButtonEl.disabled = true; | ||
} else { | ||
pageNumButtonEl.disabled = false; | ||
} | ||
} | ||
|
||
// Disable previous page if on first page, otherwise enable | ||
if (previousPageButtonEl) { | ||
if (currentPageNum === 1) { | ||
previousPageButtonEl.disabled = true; | ||
} else { | ||
previousPageButtonEl.disabled = false; | ||
} | ||
} | ||
|
||
// Disable next page if on last page, otherwise enable | ||
if (nextPageButtonEl) { | ||
if (currentPageNum === this.pdfViewer.pagesCount) { | ||
nextPageButtonEl.disabled = true; | ||
} else { | ||
nextPageButtonEl.disabled = false; | ||
} | ||
} | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. +100000 for removing UI stuff from the Viewer :) |
||
|
||
/** | ||
* Zoom into document. | ||
* | ||
|
@@ -663,26 +619,6 @@ class DocBaseViewer extends BaseViewer { | |
}); | ||
} | ||
|
||
/** | ||
* Initializes page number selector. | ||
* | ||
* @private | ||
* @return {void} | ||
*/ | ||
initPageNumEl() { | ||
const pageNumEl = this.controls.controlsEl.querySelector('.bp-doc-page-num'); | ||
|
||
// Update total page number | ||
const totalPageEl = pageNumEl.querySelector('.bp-doc-total-pages'); | ||
totalPageEl.textContent = this.pdfViewer.pagesCount; | ||
|
||
// 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'); | ||
} | ||
|
||
/** | ||
* Fetches PDF and converts to blob for printing. | ||
* | ||
|
@@ -761,7 +697,7 @@ class DocBaseViewer extends BaseViewer { | |
loadUI() { | ||
this.controls = new Controls(this.containerEl); | ||
this.bindControlListeners(); | ||
this.initPageNumEl(); | ||
this.controls.initPageNumEl(this.pdfViewer.pagesCount); | ||
} | ||
|
||
/** | ||
|
@@ -774,13 +710,13 @@ class DocBaseViewer extends BaseViewer { | |
// show the input box with the current page number selected within it | ||
this.controls.controlsEl.classList.add(SHOW_PAGE_NUM_INPUT_CLASS); | ||
|
||
this.pageNumInputEl.value = this.currentPageEl.textContent; | ||
this.pageNumInputEl.focus(); | ||
this.pageNumInputEl.select(); | ||
this.controls.pageNumInputEl.value = this.controls.currentPageEl.textContent; | ||
this.controls.pageNumInputEl.focus(); | ||
this.controls.pageNumInputEl.select(); | ||
|
||
// finish input when input is blurred or enter key is pressed | ||
this.pageNumInputEl.addEventListener('blur', this.pageNumInputBlurHandler); | ||
this.pageNumInputEl.addEventListener('keydown', this.pageNumInputKeydownHandler); | ||
this.controls.pageNumInputEl.addEventListener('blur', this.pageNumInputBlurHandler); | ||
this.controls.pageNumInputEl.addEventListener('keydown', this.pageNumInputKeydownHandler); | ||
} | ||
|
||
/** | ||
|
@@ -791,8 +727,8 @@ class DocBaseViewer extends BaseViewer { | |
*/ | ||
hidePageNumInput() { | ||
this.controls.controlsEl.classList.remove(SHOW_PAGE_NUM_INPUT_CLASS); | ||
this.pageNumInputEl.removeEventListener('blur', this.pageNumInputBlurHandler); | ||
this.pageNumInputEl.removeEventListener('keydown', this.pageNumInputKeydownHandler); | ||
this.controls.pageNumInputEl.removeEventListener('blur', this.pageNumInputBlurHandler); | ||
this.controls.pageNumInputEl.removeEventListener('keydown', this.pageNumInputKeydownHandler); | ||
} | ||
|
||
/** | ||
|
@@ -813,15 +749,15 @@ class DocBaseViewer extends BaseViewer { | |
truePageNum = 1; | ||
} | ||
|
||
if (this.pageNumInputEl) { | ||
this.pageNumInputEl.value = truePageNum; | ||
if (this.controls.pageNumInputEl) { | ||
this.controls.pageNumInputEl.value = truePageNum; | ||
} | ||
|
||
if (this.currentPageEl) { | ||
this.currentPageEl.textContent = truePageNum; | ||
if (this.controls.currentPageEl) { | ||
this.controls.currentPageEl.textContent = truePageNum; | ||
} | ||
|
||
this.checkPaginationButtons(); | ||
this.controls.checkPaginationButtons(this.pdfViewer.currentPageNumber, this.pdfViewer.pagesCount); | ||
} | ||
|
||
//-------------------------------------------------------------------------- | ||
|
@@ -969,7 +905,7 @@ class DocBaseViewer extends BaseViewer { | |
this.pdfViewer.currentScaleValue = 'auto'; | ||
|
||
this.loadUI(); | ||
this.checkPaginationButtons(); | ||
this.controls.checkPaginationButtons(this.pdfViewer.currentPageNumber, this.pdfViewer.pagesCount); | ||
|
||
// Set current page to previously opened page or first page | ||
this.setPage(this.getCachedPage()); | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,5 @@ | ||
import autobind from 'autobind-decorator'; | ||
import throttle from 'lodash.throttle'; | ||
import pageNumTemplate from './pageNumButtonContent.html'; | ||
import DocBaseViewer from './DocBaseViewer'; | ||
import PresentationPreloader from './PresentationPreloader'; | ||
import { CLASS_INVISIBLE } from '../../constants'; | ||
|
@@ -199,9 +198,7 @@ class PresentationViewer extends DocBaseViewer { | |
'bp-presentation-previous-page-icon bp-previous-page', | ||
ICON_DROP_UP | ||
); | ||
|
||
const buttonContent = pageNumTemplate.replace(/>\s*</g, '><'); // removing new lines | ||
this.controls.add(__('enter_page_num'), this.showPageNumInput, 'bp-doc-page-num', buttonContent); | ||
this.controls.add(__('enter_page_num'), this.showPageNumInput, 'bp-page-num', this.controls.pageNumTemplate); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. constant for |
||
|
||
this.controls.add( | ||
__('next_page'), | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
removing