Convert the toolbar to ES6 syntax
This commit is contained in:
Tim van der Meij
parent
8e9b4b5ff2
commit
d4e0aa4031
377
web/toolbar.js
377
web/toolbar.js
@ -18,9 +18,9 @@ import {
|
|||||||
MIN_SCALE, noContextMenuHandler, NullL10n
|
MIN_SCALE, noContextMenuHandler, NullL10n
|
||||||
} from './ui_utils';
|
} from './ui_utils';
|
||||||
|
|
||||||
var PAGE_NUMBER_LOADING_INDICATOR = 'visiblePageIsLoading';
|
const PAGE_NUMBER_LOADING_INDICATOR = 'visiblePageIsLoading';
|
||||||
var SCALE_SELECT_CONTAINER_PADDING = 8;
|
const SCALE_SELECT_CONTAINER_PADDING = 8;
|
||||||
var SCALE_SELECT_PADDING = 22;
|
const SCALE_SELECT_PADDING = 22;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @typedef {Object} ToolbarOptions
|
* @typedef {Object} ToolbarOptions
|
||||||
@ -46,18 +46,14 @@ var SCALE_SELECT_PADDING = 22;
|
|||||||
* the page view.
|
* the page view.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/**
|
class Toolbar {
|
||||||
* @class
|
|
||||||
*/
|
|
||||||
var Toolbar = (function ToolbarClosure() {
|
|
||||||
/**
|
/**
|
||||||
* @constructs Toolbar
|
|
||||||
* @param {ToolbarOptions} options
|
* @param {ToolbarOptions} options
|
||||||
* @param {HTMLDivElement} mainContainer
|
* @param {HTMLDivElement} mainContainer
|
||||||
* @param {EventBus} eventBus
|
* @param {EventBus} eventBus
|
||||||
* @param {IL10n} l10n - Localization service.
|
* @param {IL10n} l10n - Localization service.
|
||||||
*/
|
*/
|
||||||
function Toolbar(options, mainContainer, eventBus, l10n = NullL10n) {
|
constructor(options, mainContainer, eventBus, l10n = NullL10n) {
|
||||||
this.toolbar = options.container;
|
this.toolbar = options.container;
|
||||||
this.mainContainer = mainContainer;
|
this.mainContainer = mainContainer;
|
||||||
this.eventBus = eventBus;
|
this.eventBus = eventBus;
|
||||||
@ -71,211 +67,206 @@ var Toolbar = (function ToolbarClosure() {
|
|||||||
this._bindListeners();
|
this._bindListeners();
|
||||||
}
|
}
|
||||||
|
|
||||||
Toolbar.prototype = {
|
setPageNumber(pageNumber, pageLabel) {
|
||||||
setPageNumber(pageNumber, pageLabel) {
|
this.pageNumber = pageNumber;
|
||||||
this.pageNumber = pageNumber;
|
this.pageLabel = pageLabel;
|
||||||
this.pageLabel = pageLabel;
|
this._updateUIState(false);
|
||||||
this._updateUIState(false);
|
}
|
||||||
},
|
|
||||||
|
|
||||||
setPagesCount(pagesCount, hasPageLabels) {
|
setPagesCount(pagesCount, hasPageLabels) {
|
||||||
this.pagesCount = pagesCount;
|
this.pagesCount = pagesCount;
|
||||||
this.hasPageLabels = hasPageLabels;
|
this.hasPageLabels = hasPageLabels;
|
||||||
this._updateUIState(true);
|
this._updateUIState(true);
|
||||||
},
|
}
|
||||||
|
|
||||||
setPageScale(pageScaleValue, pageScale) {
|
setPageScale(pageScaleValue, pageScale) {
|
||||||
this.pageScaleValue = pageScaleValue;
|
this.pageScaleValue = pageScaleValue;
|
||||||
this.pageScale = pageScale;
|
this.pageScale = pageScale;
|
||||||
this._updateUIState(false);
|
this._updateUIState(false);
|
||||||
},
|
}
|
||||||
|
|
||||||
reset() {
|
reset() {
|
||||||
this.pageNumber = 0;
|
this.pageNumber = 0;
|
||||||
this.pageLabel = null;
|
this.pageLabel = null;
|
||||||
this.hasPageLabels = false;
|
this.hasPageLabels = false;
|
||||||
this.pagesCount = 0;
|
this.pagesCount = 0;
|
||||||
this.pageScaleValue = DEFAULT_SCALE_VALUE;
|
this.pageScaleValue = DEFAULT_SCALE_VALUE;
|
||||||
this.pageScale = DEFAULT_SCALE;
|
this.pageScale = DEFAULT_SCALE;
|
||||||
this._updateUIState(true);
|
this._updateUIState(true);
|
||||||
},
|
}
|
||||||
|
|
||||||
_bindListeners: function Toolbar_bindClickListeners() {
|
_bindListeners() {
|
||||||
var eventBus = this.eventBus;
|
let eventBus = this.eventBus;
|
||||||
var self = this;
|
let self = this;
|
||||||
var items = this.items;
|
let items = this.items;
|
||||||
|
|
||||||
items.previous.addEventListener('click', function() {
|
items.previous.addEventListener('click', function() {
|
||||||
eventBus.dispatch('previouspage');
|
eventBus.dispatch('previouspage');
|
||||||
|
});
|
||||||
|
|
||||||
|
items.next.addEventListener('click', function() {
|
||||||
|
eventBus.dispatch('nextpage');
|
||||||
|
});
|
||||||
|
|
||||||
|
items.zoomIn.addEventListener('click', function() {
|
||||||
|
eventBus.dispatch('zoomin');
|
||||||
|
});
|
||||||
|
|
||||||
|
items.zoomOut.addEventListener('click', function() {
|
||||||
|
eventBus.dispatch('zoomout');
|
||||||
|
});
|
||||||
|
|
||||||
|
items.pageNumber.addEventListener('click', function() {
|
||||||
|
this.select();
|
||||||
|
});
|
||||||
|
|
||||||
|
items.pageNumber.addEventListener('change', function() {
|
||||||
|
eventBus.dispatch('pagenumberchanged', {
|
||||||
|
source: self,
|
||||||
|
value: this.value,
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
|
||||||
items.next.addEventListener('click', function() {
|
items.scaleSelect.addEventListener('change', function() {
|
||||||
eventBus.dispatch('nextpage');
|
if (this.value === 'custom') {
|
||||||
});
|
|
||||||
|
|
||||||
items.zoomIn.addEventListener('click', function() {
|
|
||||||
eventBus.dispatch('zoomin');
|
|
||||||
});
|
|
||||||
|
|
||||||
items.zoomOut.addEventListener('click', function() {
|
|
||||||
eventBus.dispatch('zoomout');
|
|
||||||
});
|
|
||||||
|
|
||||||
items.pageNumber.addEventListener('click', function() {
|
|
||||||
this.select();
|
|
||||||
});
|
|
||||||
|
|
||||||
items.pageNumber.addEventListener('change', function() {
|
|
||||||
eventBus.dispatch('pagenumberchanged', {
|
|
||||||
source: self,
|
|
||||||
value: this.value,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
items.scaleSelect.addEventListener('change', function() {
|
|
||||||
if (this.value === 'custom') {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
eventBus.dispatch('scalechanged', {
|
|
||||||
source: self,
|
|
||||||
value: this.value,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
items.presentationModeButton.addEventListener('click',
|
|
||||||
function (e) {
|
|
||||||
eventBus.dispatch('presentationmode');
|
|
||||||
});
|
|
||||||
|
|
||||||
items.openFile.addEventListener('click', function (e) {
|
|
||||||
eventBus.dispatch('openfile');
|
|
||||||
});
|
|
||||||
|
|
||||||
items.print.addEventListener('click', function (e) {
|
|
||||||
eventBus.dispatch('print');
|
|
||||||
});
|
|
||||||
|
|
||||||
items.download.addEventListener('click', function (e) {
|
|
||||||
eventBus.dispatch('download');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Suppress context menus for some controls
|
|
||||||
items.scaleSelect.oncontextmenu = noContextMenuHandler;
|
|
||||||
|
|
||||||
eventBus.on('localized', (evt) => {
|
|
||||||
this._localized();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
_localized: function Toolbar_localized() {
|
|
||||||
this._wasLocalized = true;
|
|
||||||
this._adjustScaleWidth();
|
|
||||||
this._updateUIState(true);
|
|
||||||
},
|
|
||||||
|
|
||||||
_updateUIState: function Toolbar_updateUIState(resetNumPages) {
|
|
||||||
if (!this._wasLocalized) {
|
|
||||||
// Don't update UI state until we will localize the toolbar.
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
eventBus.dispatch('scalechanged', {
|
||||||
|
source: self,
|
||||||
|
value: this.value,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
let selectScaleOption = (value, scale) => {
|
items.presentationModeButton.addEventListener('click', function() {
|
||||||
let customScale = Math.round(scale * 10000) / 100;
|
eventBus.dispatch('presentationmode');
|
||||||
this.l10n.get('page_scale_percent', { scale: customScale, },
|
});
|
||||||
'{{scale}}%').then((msg) => {
|
|
||||||
let options = items.scaleSelect.options;
|
items.openFile.addEventListener('click', function() {
|
||||||
let predefinedValueFound = false;
|
eventBus.dispatch('openfile');
|
||||||
for (let i = 0, ii = options.length; i < ii; i++) {
|
});
|
||||||
let option = options[i];
|
|
||||||
if (option.value !== value) {
|
items.print.addEventListener('click', function() {
|
||||||
option.selected = false;
|
eventBus.dispatch('print');
|
||||||
continue;
|
});
|
||||||
}
|
|
||||||
option.selected = true;
|
items.download.addEventListener('click', function() {
|
||||||
predefinedValueFound = true;
|
eventBus.dispatch('download');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Suppress context menus for some controls.
|
||||||
|
items.scaleSelect.oncontextmenu = noContextMenuHandler;
|
||||||
|
|
||||||
|
eventBus.on('localized', () => {
|
||||||
|
this._localized();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
_localized() {
|
||||||
|
this._wasLocalized = true;
|
||||||
|
this._adjustScaleWidth();
|
||||||
|
this._updateUIState(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
_updateUIState(resetNumPages = false) {
|
||||||
|
if (!this._wasLocalized) {
|
||||||
|
// Don't update the UI state until we localize the toolbar.
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let selectScaleOption = (value, scale) => {
|
||||||
|
let customScale = Math.round(scale * 10000) / 100;
|
||||||
|
this.l10n.get('page_scale_percent', { scale: customScale, },
|
||||||
|
'{{scale}}%').then((msg) => {
|
||||||
|
let options = items.scaleSelect.options;
|
||||||
|
let predefinedValueFound = false;
|
||||||
|
for (let i = 0, ii = options.length; i < ii; i++) {
|
||||||
|
let option = options[i];
|
||||||
|
if (option.value !== value) {
|
||||||
|
option.selected = false;
|
||||||
|
continue;
|
||||||
}
|
}
|
||||||
if (!predefinedValueFound) {
|
option.selected = true;
|
||||||
items.customScaleOption.textContent = msg;
|
predefinedValueFound = true;
|
||||||
items.customScaleOption.selected = true;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
var pageNumber = this.pageNumber;
|
|
||||||
var scaleValue = (this.pageScaleValue || this.pageScale).toString();
|
|
||||||
var scale = this.pageScale;
|
|
||||||
|
|
||||||
var items = this.items;
|
|
||||||
var pagesCount = this.pagesCount;
|
|
||||||
|
|
||||||
if (resetNumPages) {
|
|
||||||
if (this.hasPageLabels) {
|
|
||||||
items.pageNumber.type = 'text';
|
|
||||||
} else {
|
|
||||||
items.pageNumber.type = 'number';
|
|
||||||
this.l10n.get('of_pages', { pagesCount, }, 'of {{pagesCount}}').
|
|
||||||
then((msg) => {
|
|
||||||
items.numPages.textContent = msg;
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
items.pageNumber.max = pagesCount;
|
if (!predefinedValueFound) {
|
||||||
}
|
items.customScaleOption.textContent = msg;
|
||||||
|
items.customScaleOption.selected = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
let pageNumber = this.pageNumber;
|
||||||
|
let scaleValue = (this.pageScaleValue || this.pageScale).toString();
|
||||||
|
let scale = this.pageScale;
|
||||||
|
|
||||||
|
let items = this.items;
|
||||||
|
let pagesCount = this.pagesCount;
|
||||||
|
|
||||||
|
if (resetNumPages) {
|
||||||
if (this.hasPageLabels) {
|
if (this.hasPageLabels) {
|
||||||
items.pageNumber.value = this.pageLabel;
|
items.pageNumber.type = 'text';
|
||||||
this.l10n.get('page_of_pages', { pageNumber, pagesCount, },
|
} else {
|
||||||
'({{pageNumber}} of {{pagesCount}})').
|
items.pageNumber.type = 'number';
|
||||||
|
this.l10n.get('of_pages', { pagesCount, }, 'of {{pagesCount}}').
|
||||||
then((msg) => {
|
then((msg) => {
|
||||||
items.numPages.textContent = msg;
|
items.numPages.textContent = msg;
|
||||||
});
|
});
|
||||||
} else {
|
|
||||||
items.pageNumber.value = pageNumber;
|
|
||||||
}
|
}
|
||||||
|
items.pageNumber.max = pagesCount;
|
||||||
|
}
|
||||||
|
|
||||||
items.previous.disabled = (pageNumber <= 1);
|
if (this.hasPageLabels) {
|
||||||
items.next.disabled = (pageNumber >= pagesCount);
|
items.pageNumber.value = this.pageLabel;
|
||||||
|
this.l10n.get('page_of_pages', { pageNumber, pagesCount, },
|
||||||
items.zoomOut.disabled = (scale <= MIN_SCALE);
|
'({{pageNumber}} of {{pagesCount}})').
|
||||||
items.zoomIn.disabled = (scale >= MAX_SCALE);
|
then((msg) => {
|
||||||
|
items.numPages.textContent = msg;
|
||||||
selectScaleOption(scaleValue, scale);
|
|
||||||
},
|
|
||||||
|
|
||||||
updateLoadingIndicatorState:
|
|
||||||
function Toolbar_updateLoadingIndicatorState(loading) {
|
|
||||||
var pageNumberInput = this.items.pageNumber;
|
|
||||||
|
|
||||||
if (loading) {
|
|
||||||
pageNumberInput.classList.add(PAGE_NUMBER_LOADING_INDICATOR);
|
|
||||||
} else {
|
|
||||||
pageNumberInput.classList.remove(PAGE_NUMBER_LOADING_INDICATOR);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_adjustScaleWidth: function Toolbar_adjustScaleWidth() {
|
|
||||||
var container = this.items.scaleSelectContainer;
|
|
||||||
var select = this.items.scaleSelect;
|
|
||||||
animationStarted.then(function() {
|
|
||||||
// Adjust the width of the zoom box to fit the content.
|
|
||||||
// Note: If the window is narrow enough that the zoom box is not
|
|
||||||
// visible, we temporarily show it to be able to adjust its width.
|
|
||||||
if (container.clientWidth === 0) {
|
|
||||||
container.setAttribute('style', 'display: inherit;');
|
|
||||||
}
|
|
||||||
if (container.clientWidth > 0) {
|
|
||||||
select.setAttribute('style', 'min-width: inherit;');
|
|
||||||
var width = select.clientWidth + SCALE_SELECT_CONTAINER_PADDING;
|
|
||||||
select.setAttribute('style', 'min-width: ' +
|
|
||||||
(width + SCALE_SELECT_PADDING) + 'px;');
|
|
||||||
container.setAttribute('style', 'min-width: ' + width + 'px; ' +
|
|
||||||
'max-width: ' + width + 'px;');
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
},
|
} else {
|
||||||
};
|
items.pageNumber.value = pageNumber;
|
||||||
|
}
|
||||||
|
|
||||||
return Toolbar;
|
items.previous.disabled = (pageNumber <= 1);
|
||||||
})();
|
items.next.disabled = (pageNumber >= pagesCount);
|
||||||
|
|
||||||
|
items.zoomOut.disabled = (scale <= MIN_SCALE);
|
||||||
|
items.zoomIn.disabled = (scale >= MAX_SCALE);
|
||||||
|
|
||||||
|
selectScaleOption(scaleValue, scale);
|
||||||
|
}
|
||||||
|
|
||||||
|
updateLoadingIndicatorState(loading = false) {
|
||||||
|
let pageNumberInput = this.items.pageNumber;
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
pageNumberInput.classList.add(PAGE_NUMBER_LOADING_INDICATOR);
|
||||||
|
} else {
|
||||||
|
pageNumberInput.classList.remove(PAGE_NUMBER_LOADING_INDICATOR);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_adjustScaleWidth() {
|
||||||
|
let container = this.items.scaleSelectContainer;
|
||||||
|
let select = this.items.scaleSelect;
|
||||||
|
|
||||||
|
animationStarted.then(function() {
|
||||||
|
// Adjust the width of the zoom box to fit the content.
|
||||||
|
// Note: If the window is narrow enough that the zoom box is not
|
||||||
|
// visible, we temporarily show it to be able to adjust its width.
|
||||||
|
if (container.clientWidth === 0) {
|
||||||
|
container.setAttribute('style', 'display: inherit;');
|
||||||
|
}
|
||||||
|
if (container.clientWidth > 0) {
|
||||||
|
select.setAttribute('style', 'min-width: inherit;');
|
||||||
|
let width = select.clientWidth + SCALE_SELECT_CONTAINER_PADDING;
|
||||||
|
select.setAttribute('style', 'min-width: ' +
|
||||||
|
(width + SCALE_SELECT_PADDING) + 'px;');
|
||||||
|
container.setAttribute('style', 'min-width: ' + width + 'px; ' +
|
||||||
|
'max-width: ' + width + 'px;');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export {
|
export {
|
||||||
Toolbar,
|
Toolbar,
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user