Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #8297 from timvandermeij/es6-find-bar

Browse Source 
Convert the find bar to ES6 syntax
This commit is contained in:
Tim van der Meij 2017-04-16 23:46:25 +02:00 committed by GitHub
commit bd0e4dc4e3
1 changed files with 129 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

264
web/pdf_find_bar.js
View File

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