Convert the secondary toolbar to ES6 syntax
This commit is contained in:
parent
bc49524ac7
commit
67049602c5
@ -45,17 +45,13 @@ import { mozL10n, SCROLLBAR_PADDING } from './ui_utils';
|
|||||||
* the document properties dialog.
|
* the document properties dialog.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/**
|
class SecondaryToolbar {
|
||||||
* @class
|
|
||||||
*/
|
|
||||||
var SecondaryToolbar = (function SecondaryToolbarClosure() {
|
|
||||||
/**
|
/**
|
||||||
* @constructs SecondaryToolbar
|
|
||||||
* @param {SecondaryToolbarOptions} options
|
* @param {SecondaryToolbarOptions} options
|
||||||
* @param {HTMLDivElement} mainContainer
|
* @param {HTMLDivElement} mainContainer
|
||||||
* @param {EventBus} eventBus
|
* @param {EventBus} eventBus
|
||||||
*/
|
*/
|
||||||
function SecondaryToolbar(options, mainContainer, eventBus) {
|
constructor(options, mainContainer, eventBus) {
|
||||||
this.toolbar = options.toolbar;
|
this.toolbar = options.toolbar;
|
||||||
this.toggleButton = options.toggleButton;
|
this.toggleButton = options.toggleButton;
|
||||||
this.toolbarButtonContainer = options.toolbarButtonContainer;
|
this.toolbarButtonContainer = options.toolbarButtonContainer;
|
||||||
@ -101,129 +97,124 @@ var SecondaryToolbar = (function SecondaryToolbarClosure() {
|
|||||||
this.eventBus.on('resize', this._setMaxHeight.bind(this));
|
this.eventBus.on('resize', this._setMaxHeight.bind(this));
|
||||||
}
|
}
|
||||||
|
|
||||||
SecondaryToolbar.prototype = {
|
/**
|
||||||
/**
|
* @return {boolean}
|
||||||
* @return {boolean}
|
*/
|
||||||
*/
|
get isOpen() {
|
||||||
get isOpen() {
|
return this.opened;
|
||||||
return this.opened;
|
}
|
||||||
},
|
|
||||||
|
|
||||||
setPageNumber: function SecondaryToolbar_setPageNumber(pageNumber) {
|
setPageNumber(pageNumber) {
|
||||||
this.pageNumber = pageNumber;
|
this.pageNumber = pageNumber;
|
||||||
this._updateUIState();
|
this._updateUIState();
|
||||||
},
|
}
|
||||||
|
|
||||||
setPagesCount: function SecondaryToolbar_setPagesCount(pagesCount) {
|
setPagesCount(pagesCount) {
|
||||||
this.pagesCount = pagesCount;
|
this.pagesCount = pagesCount;
|
||||||
this._updateUIState();
|
this._updateUIState();
|
||||||
},
|
}
|
||||||
|
|
||||||
reset: function SecondaryToolbar_reset() {
|
reset() {
|
||||||
this.pageNumber = 0;
|
this.pageNumber = 0;
|
||||||
this.pagesCount = 0;
|
this.pagesCount = 0;
|
||||||
this._updateUIState();
|
this._updateUIState();
|
||||||
},
|
}
|
||||||
|
|
||||||
_updateUIState: function SecondaryToolbar_updateUIState() {
|
_updateUIState() {
|
||||||
var items = this.items;
|
this.items.firstPage.disabled = (this.pageNumber <= 1);
|
||||||
|
this.items.lastPage.disabled = (this.pageNumber >= this.pagesCount);
|
||||||
|
this.items.pageRotateCw.disabled = this.pagesCount === 0;
|
||||||
|
this.items.pageRotateCcw.disabled = this.pagesCount === 0;
|
||||||
|
}
|
||||||
|
|
||||||
items.firstPage.disabled = (this.pageNumber <= 1);
|
_bindClickListeners() {
|
||||||
items.lastPage.disabled = (this.pageNumber >= this.pagesCount);
|
// Button to toggle the visibility of the secondary toolbar.
|
||||||
items.pageRotateCw.disabled = this.pagesCount === 0;
|
this.toggleButton.addEventListener('click', this.toggle.bind(this));
|
||||||
items.pageRotateCcw.disabled = this.pagesCount === 0;
|
|
||||||
},
|
|
||||||
|
|
||||||
_bindClickListeners: function SecondaryToolbar_bindClickListeners() {
|
// All items within the secondary toolbar.
|
||||||
// Button to toggle the visibility of the secondary toolbar.
|
for (let button in this.buttons) {
|
||||||
this.toggleButton.addEventListener('click', this.toggle.bind(this));
|
let { element, eventName, close, } = this.buttons[button];
|
||||||
|
|
||||||
// All items within the secondary toolbar.
|
element.addEventListener('click', (evt) => {
|
||||||
for (let button in this.buttons) {
|
if (eventName !== null) {
|
||||||
let { element, eventName, close, } = this.buttons[button];
|
this.eventBus.dispatch(eventName, { source: this, });
|
||||||
|
|
||||||
element.addEventListener('click', (evt) => {
|
|
||||||
if (eventName !== null) {
|
|
||||||
this.eventBus.dispatch(eventName, { source: this, });
|
|
||||||
}
|
|
||||||
if (close) {
|
|
||||||
this.close();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
_bindHandToolListener:
|
|
||||||
function SecondaryToolbar_bindHandToolListener(toggleHandToolButton) {
|
|
||||||
var isHandToolActive = false;
|
|
||||||
this.eventBus.on('handtoolchanged', function (e) {
|
|
||||||
if (isHandToolActive === e.isActive) {
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
isHandToolActive = e.isActive;
|
if (close) {
|
||||||
if (isHandToolActive) {
|
this.close();
|
||||||
toggleHandToolButton.title =
|
|
||||||
mozL10n.get('hand_tool_disable.title', null, 'Disable hand tool');
|
|
||||||
toggleHandToolButton.firstElementChild.textContent =
|
|
||||||
mozL10n.get('hand_tool_disable_label', null, 'Disable hand tool');
|
|
||||||
} else {
|
|
||||||
toggleHandToolButton.title =
|
|
||||||
mozL10n.get('hand_tool_enable.title', null, 'Enable hand tool');
|
|
||||||
toggleHandToolButton.firstElementChild.textContent =
|
|
||||||
mozL10n.get('hand_tool_enable_label', null, 'Enable hand tool');
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
|
||||||
|
|
||||||
open: function SecondaryToolbar_open() {
|
|
||||||
if (this.opened) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.opened = true;
|
|
||||||
this._setMaxHeight();
|
|
||||||
|
|
||||||
this.toggleButton.classList.add('toggled');
|
|
||||||
this.toolbar.classList.remove('hidden');
|
|
||||||
},
|
|
||||||
|
|
||||||
close: function SecondaryToolbar_close() {
|
|
||||||
if (!this.opened) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.opened = false;
|
|
||||||
this.toolbar.classList.add('hidden');
|
|
||||||
this.toggleButton.classList.remove('toggled');
|
|
||||||
},
|
|
||||||
|
|
||||||
toggle: function SecondaryToolbar_toggle() {
|
|
||||||
if (this.opened) {
|
|
||||||
this.close();
|
|
||||||
} else {
|
|
||||||
this.open();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
_setMaxHeight: function SecondaryToolbar_setMaxHeight() {
|
|
||||||
if (!this.opened) {
|
|
||||||
return; // Only adjust the 'max-height' if the toolbar is visible.
|
|
||||||
}
|
|
||||||
this.containerHeight = this.mainContainer.clientHeight;
|
|
||||||
|
|
||||||
if (this.containerHeight === this.previousContainerHeight) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.toolbarButtonContainer.setAttribute('style',
|
|
||||||
'max-height: ' + (this.containerHeight - SCROLLBAR_PADDING) + 'px;');
|
|
||||||
|
|
||||||
this.previousContainerHeight = this.containerHeight;
|
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
return SecondaryToolbar;
|
_bindHandToolListener(toggleHandToolButton) {
|
||||||
})();
|
let isHandToolActive = false;
|
||||||
|
|
||||||
|
this.eventBus.on('handtoolchanged', function(evt) {
|
||||||
|
if (isHandToolActive === evt.isActive) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
isHandToolActive = evt.isActive;
|
||||||
|
|
||||||
|
if (isHandToolActive) {
|
||||||
|
toggleHandToolButton.title =
|
||||||
|
mozL10n.get('hand_tool_disable.title', null, 'Disable hand tool');
|
||||||
|
toggleHandToolButton.firstElementChild.textContent =
|
||||||
|
mozL10n.get('hand_tool_disable_label', null, 'Disable hand tool');
|
||||||
|
} else {
|
||||||
|
toggleHandToolButton.title =
|
||||||
|
mozL10n.get('hand_tool_enable.title', null, 'Enable hand tool');
|
||||||
|
toggleHandToolButton.firstElementChild.textContent =
|
||||||
|
mozL10n.get('hand_tool_enable_label', null, 'Enable hand tool');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
open() {
|
||||||
|
if (this.opened) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.opened = true;
|
||||||
|
this._setMaxHeight();
|
||||||
|
|
||||||
|
this.toggleButton.classList.add('toggled');
|
||||||
|
this.toolbar.classList.remove('hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
close() {
|
||||||
|
if (!this.opened) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.opened = false;
|
||||||
|
this.toolbar.classList.add('hidden');
|
||||||
|
this.toggleButton.classList.remove('toggled');
|
||||||
|
}
|
||||||
|
|
||||||
|
toggle() {
|
||||||
|
if (this.opened) {
|
||||||
|
this.close();
|
||||||
|
} else {
|
||||||
|
this.open();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
*/
|
||||||
|
_setMaxHeight() {
|
||||||
|
if (!this.opened) {
|
||||||
|
return; // Only adjust the 'max-height' if the toolbar is visible.
|
||||||
|
}
|
||||||
|
this.containerHeight = this.mainContainer.clientHeight;
|
||||||
|
|
||||||
|
if (this.containerHeight === this.previousContainerHeight) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.toolbarButtonContainer.setAttribute('style',
|
||||||
|
'max-height: ' + (this.containerHeight - SCROLLBAR_PADDING) + 'px;');
|
||||||
|
|
||||||
|
this.previousContainerHeight = this.containerHeight;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export {
|
export {
|
||||||
SecondaryToolbar,
|
SecondaryToolbar,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user