Merge pull request #8297 from timvandermeij/es6-find-bar
Convert the find bar to ES6 syntax
This commit is contained in:
Tim van der Meij
GitHub
commit
bd0e4dc4e3
@ -22,9 +22,10 @@ import { mozL10n } from './ui_utils';
|
||||
* also sets up the appropriate events for the controls. Actual searching
|
||||
* is done by PDFFindController.
|
||||
*/
|
||||
var PDFFindBar = (function PDFFindBarClosure() {
|
||||
function PDFFindBar(options) {
|
||||
class PDFFindBar {
|
||||
constructor(options) {
|
||||
this.opened = false;
|
||||
|
||||
this.bar = options.bar || null;
|
||||
this.toggleButton = options.toggleButton || null;
|
||||
this.findField = options.findField || null;
|
||||
@ -44,182 +45,175 @@ var PDFFindBar = (function PDFFindBarClosure() {
|
||||
}
|
||||
|
||||
// Add event listeners to the DOM elements.
|
||||
var self = this;
|
||||
this.toggleButton.addEventListener('click', function() {
|
||||
self.toggle();
|
||||
this.toggleButton.addEventListener('click', () => {
|
||||
this.toggle();
|
||||
});
|
||||
|
||||
this.findField.addEventListener('input', function() {
|
||||
self.dispatchEvent('');
|
||||
this.findField.addEventListener('input', () => {
|
||||
this.dispatchEvent('');
|
||||
});
|
||||
|
||||
this.bar.addEventListener('keydown', function(evt) {
|
||||
switch (evt.keyCode) {
|
||||
this.bar.addEventListener('keydown', (e) => {
|
||||
switch (e.keyCode) {
|
||||
case 13: // Enter
|
||||
if (evt.target === self.findField) {
|
||||
self.dispatchEvent('again', evt.shiftKey);
|
||||
if (e.target === this.findField) {
|
||||
this.dispatchEvent('again', e.shiftKey);
|
||||
}
|
||||
break;
|
||||
case 27: // Escape
|
||||
self.close();
|
||||
this.close();
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
this.findPreviousButton.addEventListener('click', function() {
|
||||
self.dispatchEvent('again', true);
|
||||
this.findPreviousButton.addEventListener('click', () => {
|
||||
this.dispatchEvent('again', true);
|
||||
});
|
||||
|
||||
this.findNextButton.addEventListener('click', function() {
|
||||
self.dispatchEvent('again', false);
|
||||
this.findNextButton.addEventListener('click', () => {
|
||||
this.dispatchEvent('again', false);
|
||||
});
|
||||
|
||||
this.highlightAll.addEventListener('click', function() {
|
||||
self.dispatchEvent('highlightallchange');
|
||||
this.highlightAll.addEventListener('click', () => {
|
||||
this.dispatchEvent('highlightallchange');
|
||||
});
|
||||
|
||||
this.caseSensitive.addEventListener('click', function() {
|
||||
self.dispatchEvent('casesensitivitychange');
|
||||
this.caseSensitive.addEventListener('click', () => {
|
||||
this.dispatchEvent('casesensitivitychange');
|
||||
});
|
||||
|
||||
this.eventBus.on('resize', this._adjustWidth.bind(this));
|
||||
}
|
||||
|
||||
PDFFindBar.prototype = {
|
||||
reset: function PDFFindBar_reset() {
|
||||
this.updateUIState();
|
||||
},
|
||||
reset() {
|
||||
this.updateUIState();
|
||||
}
|
||||
|
||||
dispatchEvent: function PDFFindBar_dispatchEvent(type, findPrev) {
|
||||
this.eventBus.dispatch('find', {
|
||||
source: this,
|
||||
type: type,
|
||||
query: this.findField.value,
|
||||
caseSensitive: this.caseSensitive.checked,
|
||||
phraseSearch: true,
|
||||
highlightAll: this.highlightAll.checked,
|
||||
findPrevious: findPrev
|
||||
});
|
||||
},
|
||||
dispatchEvent(type, findPrev) {
|
||||
this.eventBus.dispatch('find', {
|
||||
source: this,
|
||||
type,
|
||||
query: this.findField.value,
|
||||
caseSensitive: this.caseSensitive.checked,
|
||||
phraseSearch: true,
|
||||
highlightAll: this.highlightAll.checked,
|
||||
findPrevious: findPrev,
|
||||
});
|
||||
}
|
||||
|
||||
updateUIState:
|
||||
function PDFFindBar_updateUIState(state, previous, matchCount) {
|
||||
var notFound = false;
|
||||
var findMsg = '';
|
||||
var status = '';
|
||||
updateUIState(state, previous, matchCount) {
|
||||
var notFound = false;
|
||||
var findMsg = '';
|
||||
var status = '';
|
||||
|
||||
switch (state) {
|
||||
case FindStates.FIND_FOUND:
|
||||
break;
|
||||
switch (state) {
|
||||
case FindStates.FIND_FOUND:
|
||||
break;
|
||||
|
||||
case FindStates.FIND_PENDING:
|
||||
status = 'pending';
|
||||
break;
|
||||
case FindStates.FIND_PENDING:
|
||||
status = 'pending';
|
||||
break;
|
||||
|
||||
case FindStates.FIND_NOTFOUND:
|
||||
findMsg = mozL10n.get('find_not_found', null, 'Phrase not found');
|
||||
notFound = true;
|
||||
break;
|
||||
case FindStates.FIND_NOTFOUND:
|
||||
findMsg = mozL10n.get('find_not_found', null, 'Phrase not found');
|
||||
notFound = true;
|
||||
break;
|
||||
|
||||
case FindStates.FIND_WRAPPED:
|
||||
if (previous) {
|
||||
findMsg = mozL10n.get('find_reached_top', null,
|
||||
'Reached top of document, continued from bottom');
|
||||
} else {
|
||||
findMsg = mozL10n.get('find_reached_bottom', null,
|
||||
'Reached end of document, continued from top');
|
||||
}
|
||||
break;
|
||||
}
|
||||
case FindStates.FIND_WRAPPED:
|
||||
if (previous) {
|
||||
findMsg = mozL10n.get('find_reached_top', null,
|
||||
'Reached top of document, continued from bottom');
|
||||
} else {
|
||||
findMsg = mozL10n.get('find_reached_bottom', null,
|
||||
'Reached end of document, continued from top');
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
if (notFound) {
|
||||
this.findField.classList.add('notFound');
|
||||
} else {
|
||||
this.findField.classList.remove('notFound');
|
||||
}
|
||||
if (notFound) {
|
||||
this.findField.classList.add('notFound');
|
||||
} else {
|
||||
this.findField.classList.remove('notFound');
|
||||
}
|
||||
|
||||
this.findField.setAttribute('data-status', status);
|
||||
this.findMsg.textContent = findMsg;
|
||||
this.findField.setAttribute('data-status', status);
|
||||
this.findMsg.textContent = findMsg;
|
||||
|
||||
this.updateResultsCount(matchCount);
|
||||
this._adjustWidth();
|
||||
},
|
||||
this.updateResultsCount(matchCount);
|
||||
this._adjustWidth();
|
||||
}
|
||||
|
||||
updateResultsCount: function(matchCount) {
|
||||
if (!this.findResultsCount) {
|
||||
return; // no UI control is provided
|
||||
}
|
||||
updateResultsCount(matchCount) {
|
||||
if (!this.findResultsCount) {
|
||||
return; // No UI control is provided.
|
||||
}
|
||||
|
||||
// If there are no matches, hide the counter
|
||||
if (!matchCount) {
|
||||
this.findResultsCount.classList.add('hidden');
|
||||
return;
|
||||
}
|
||||
// If there are no matches, hide the counter.
|
||||
if (!matchCount) {
|
||||
this.findResultsCount.classList.add('hidden');
|
||||
return;
|
||||
}
|
||||
|
||||
// Create the match counter
|
||||
this.findResultsCount.textContent = matchCount.toLocaleString();
|
||||
// Create and show the match counter.
|
||||
this.findResultsCount.textContent = matchCount.toLocaleString();
|
||||
this.findResultsCount.classList.remove('hidden');
|
||||
}
|
||||
|
||||
// Show the counter
|
||||
this.findResultsCount.classList.remove('hidden');
|
||||
},
|
||||
open() {
|
||||
if (!this.opened) {
|
||||
this.opened = true;
|
||||
this.toggleButton.classList.add('toggled');
|
||||
this.bar.classList.remove('hidden');
|
||||
}
|
||||
this.findField.select();
|
||||
this.findField.focus();
|
||||
|
||||
open: function PDFFindBar_open() {
|
||||
if (!this.opened) {
|
||||
this.opened = true;
|
||||
this.toggleButton.classList.add('toggled');
|
||||
this.bar.classList.remove('hidden');
|
||||
}
|
||||
this.findField.select();
|
||||
this.findField.focus();
|
||||
this._adjustWidth();
|
||||
}
|
||||
|
||||
this._adjustWidth();
|
||||
},
|
||||
close() {
|
||||
if (!this.opened) {
|
||||
return;
|
||||
}
|
||||
this.opened = false;
|
||||
this.toggleButton.classList.remove('toggled');
|
||||
this.bar.classList.add('hidden');
|
||||
this.findController.active = false;
|
||||
}
|
||||
|
||||
close: function PDFFindBar_close() {
|
||||
if (!this.opened) {
|
||||
return;
|
||||
}
|
||||
this.opened = false;
|
||||
this.toggleButton.classList.remove('toggled');
|
||||
this.bar.classList.add('hidden');
|
||||
this.findController.active = false;
|
||||
},
|
||||
toggle() {
|
||||
if (this.opened) {
|
||||
this.close();
|
||||
} else {
|
||||
this.open();
|
||||
}
|
||||
}
|
||||
|
||||
toggle: function PDFFindBar_toggle() {
|
||||
if (this.opened) {
|
||||
this.close();
|
||||
} else {
|
||||
this.open();
|
||||
}
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_adjustWidth() {
|
||||
if (!this.opened) {
|
||||
return;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
_adjustWidth: function PDFFindBar_adjustWidth() {
|
||||
if (!this.opened) {
|
||||
return;
|
||||
}
|
||||
// The find bar has an absolute position and thus the browser extends
|
||||
// its width to the maximum possible width once the find bar does not fit
|
||||
// entirely within the window anymore (and its elements are automatically
|
||||
// wrapped). Here we detect and fix that.
|
||||
this.bar.classList.remove('wrapContainers');
|
||||
|
||||
// The find bar has an absolute position and thus the browser extends
|
||||
// its width to the maximum possible width once the find bar does not fit
|
||||
// entirely within the window anymore (and its elements are automatically
|
||||
// wrapped). Here we detect and fix that.
|
||||
this.bar.classList.remove('wrapContainers');
|
||||
var findbarHeight = this.bar.clientHeight;
|
||||
var inputContainerHeight = this.bar.firstElementChild.clientHeight;
|
||||
|
||||
var findbarHeight = this.bar.clientHeight;
|
||||
var inputContainerHeight = this.bar.firstElementChild.clientHeight;
|
||||
|
||||
if (findbarHeight > inputContainerHeight) {
|
||||
// The findbar is taller than the input container, which means that
|
||||
// the browser wrapped some of the elements. For a consistent look,
|
||||
// wrap all of them to adjust the width of the find bar.
|
||||
this.bar.classList.add('wrapContainers');
|
||||
}
|
||||
},
|
||||
};
|
||||
return PDFFindBar;
|
||||
})();
|
||||
if (findbarHeight > inputContainerHeight) {
|
||||
// The findbar is taller than the input container, which means that
|
||||
// the browser wrapped some of the elements. For a consistent look,
|
||||
// wrap all of them to adjust the width of the find bar.
|
||||
this.bar.classList.add('wrapContainers');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export {
|
||||
PDFFindBar,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user