akira
/
pdfjs-dist
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge pull request #8537 from timvandermeij/es6-toolbar 

Convert the toolbar to ES6 syntax
Jonas Jenwald 8 years ago committed by GitHub
parent
679ffc84f6 d4e0aa4031
commit
054fe13920
1 changed files with 174 additions and 183 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 357
      web/toolbar.js

357
web/toolbar.js
Unescape View File

@ -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) {
this.pagesCount = pagesCount;
this.hasPageLabels = hasPageLabels;
this._updateUIState(true);
},
setPageScale(pageScaleValue, pageScale) {
this.pageScaleValue = pageScaleValue;
this.pageScale = pageScale;
this._updateUIState(false);
},
reset() {
this.pageNumber = 0;
this.pageLabel = null;
this.hasPageLabels = false;
this.pagesCount = 0;
this.pageScaleValue = DEFAULT_SCALE_VALUE;
this.pageScale = DEFAULT_SCALE;
this._updateUIState(true);
},
_bindListeners: function Toolbar_bindClickListeners() {
var eventBus = this.eventBus;
var self = this;
var items = this.items;
items.previous.addEventListener('click', function() {
eventBus.dispatch('previouspage');
});
items.next.addEventListener('click', function() { setPagesCount(pagesCount, hasPageLabels) {
eventBus.dispatch('nextpage'); this.pagesCount = pagesCount;
}); this.hasPageLabels = hasPageLabels;
this._updateUIState(true);
}
items.zoomIn.addEventListener('click', function() { setPageScale(pageScaleValue, pageScale) {
eventBus.dispatch('zoomin'); this.pageScaleValue = pageScaleValue;
}); this.pageScale = pageScale;
this._updateUIState(false);
}
items.zoomOut.addEventListener('click', function() { reset() {
eventBus.dispatch('zoomout'); this.pageNumber = 0;
}); this.pageLabel = null;
this.hasPageLabels = false;
this.pagesCount = 0;
this.pageScaleValue = DEFAULT_SCALE_VALUE;
this.pageScale = DEFAULT_SCALE;
this._updateUIState(true);
}
items.pageNumber.addEventListener('click', function() { _bindListeners() {
this.select(); let eventBus = this.eventBus;
}); let self = this;
let items = this.items;
items.pageNumber.addEventListener('change', function() { items.previous.addEventListener('click', function() {
eventBus.dispatch('pagenumberchanged', { eventBus.dispatch('previouspage');
source: self, });
value: this.value,
});
});
items.scaleSelect.addEventListener('change', function() { items.next.addEventListener('click', function() {
if (this.value === 'custom') { eventBus.dispatch('nextpage');
return; });
}
eventBus.dispatch('scalechanged', {
source: self,
value: this.value,
});
});
items.presentationModeButton.addEventListener('click', items.zoomIn.addEventListener('click', function() {
function (e) { eventBus.dispatch('zoomin');
eventBus.dispatch('presentationmode'); });
});
items.openFile.addEventListener('click', function (e) { items.zoomOut.addEventListener('click', function() {
eventBus.dispatch('openfile'); eventBus.dispatch('zoomout');
}); });
items.pageNumber.addEventListener('click', function() {
this.select();
});
items.print.addEventListener('click', function (e) { items.pageNumber.addEventListener('change', function() {
eventBus.dispatch('print'); eventBus.dispatch('pagenumberchanged', {
source: self,
value: this.value,
}); });
});
items.download.addEventListener('click', function (e) { items.scaleSelect.addEventListener('change', function() {
eventBus.dispatch('download'); if (this.value === 'custom') {
return;
}
eventBus.dispatch('scalechanged', {
source: self,
value: this.value,
}); });
});
// Suppress context menus for some controls items.presentationModeButton.addEventListener('click', function() {
items.scaleSelect.oncontextmenu = noContextMenuHandler; eventBus.dispatch('presentationmode');
});
eventBus.on('localized', (evt) => { items.openFile.addEventListener('click', function() {
this._localized(); eventBus.dispatch('openfile');
}); });
},
_localized: function Toolbar_localized() { items.print.addEventListener('click', function() {
this._wasLocalized = true; eventBus.dispatch('print');
this._adjustScaleWidth(); });
this._updateUIState(true);
},
_updateUIState: function Toolbar_updateUIState(resetNumPages) { items.download.addEventListener('click', function() {
if (!this._wasLocalized) { eventBus.dispatch('download');
// Don't update UI state until we will localize the toolbar. });
return;
}
let selectScaleOption = (value, scale) => { // Suppress context menus for some controls.
let customScale = Math.round(scale * 10000) / 100; items.scaleSelect.oncontextmenu = noContextMenuHandler;
this.l10n.get('page_scale_percent', { scale: customScale, },
'{{scale}}%').then((msg) => { eventBus.on('localized', () => {
let options = items.scaleSelect.options; this._localized();
let predefinedValueFound = false; });
for (let i = 0, ii = options.length; i < ii; i++) { }
let option = options[i];
if (option.value !== value) { _localized() {
option.selected = false; this._wasLocalized = true;
continue; this._adjustScaleWidth();
} this._updateUIState(true);
option.selected = true; }
predefinedValueFound = true;
} _updateUIState(resetNumPages = false) {
if (!predefinedValueFound) { if (!this._wasLocalized) {
items.customScaleOption.textContent = msg; // Don't update the UI state until we localize the toolbar.
items.customScaleOption.selected = true; 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;
} }
}); option.selected = true;
}; predefinedValueFound = 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;
}
if (this.hasPageLabels) {
items.pageNumber.value = this.pageLabel;
this.l10n.get('page_of_pages', { pageNumber, pagesCount, },
'({{pageNumber}} of {{pagesCount}})').
then((msg) => {
items.numPages.textContent = msg;
});
} else {
items.pageNumber.value = pageNumber;
}
items.previous.disabled = (pageNumber <= 1); items.previous.disabled = (pageNumber <= 1);
items.next.disabled = (pageNumber >= pagesCount); items.next.disabled = (pageNumber >= pagesCount);
items.zoomOut.disabled = (scale <= MIN_SCALE); items.zoomOut.disabled = (scale <= MIN_SCALE);
items.zoomIn.disabled = (scale >= MAX_SCALE); items.zoomIn.disabled = (scale >= MAX_SCALE);
selectScaleOption(scaleValue, scale); selectScaleOption(scaleValue, scale);
}, }
updateLoadingIndicatorState: updateLoadingIndicatorState(loading = false) {
function Toolbar_updateLoadingIndicatorState(loading) { let pageNumberInput = this.items.pageNumber;
var pageNumberInput = this.items.pageNumber;
if (loading) { if (loading) {
pageNumberInput.classList.add(PAGE_NUMBER_LOADING_INDICATOR); pageNumberInput.classList.add(PAGE_NUMBER_LOADING_INDICATOR);
} else { } else {
pageNumberInput.classList.remove(PAGE_NUMBER_LOADING_INDICATOR); pageNumberInput.classList.remove(PAGE_NUMBER_LOADING_INDICATOR);
} }
}, }
_adjustScaleWidth: function Toolbar_adjustScaleWidth() { _adjustScaleWidth() {
var container = this.items.scaleSelectContainer; let container = this.items.scaleSelectContainer;
var select = this.items.scaleSelect; 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;');
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;');
}
});
},
};
return Toolbar; 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,

Write Preview
Loading…
Cancel
Save