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

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

Convert the find bar to ES6 syntax
Tim van der Meij 8 years ago committed by GitHub
parent
009d91d735 6f6fb4dfd0
commit
bd0e4dc4e3
1 changed files with 133 additions and 139 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. 272
      web/pdf_find_bar.js

272
web/pdf_find_bar.js
Unescape 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) {
this.eventBus.dispatch('find', {
source: this,
type: 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 = '';
switch (state) {
case FindStates.FIND_FOUND:
break;
case FindStates.FIND_PENDING: dispatchEvent(type, findPrev) {
status = 'pending'; this.eventBus.dispatch('find', {
break; source: this,
type,
query: this.findField.value,
caseSensitive: this.caseSensitive.checked,
phraseSearch: true,
highlightAll: this.highlightAll.checked,
findPrevious: findPrev,
});
}
case FindStates.FIND_NOTFOUND: updateUIState(state, previous, matchCount) {
findMsg = mozL10n.get('find_not_found', null, 'Phrase not found'); var notFound = false;
notFound = true; var findMsg = '';
break; var status = '';
switch (state) {
case FindStates.FIND_FOUND:
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_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 (notFound) {
if (previous) { this.findField.classList.add('notFound');
findMsg = mozL10n.get('find_reached_top', null, } else {
'Reached top of document, continued from bottom'); this.findField.classList.remove('notFound');
} else { }
findMsg = mozL10n.get('find_reached_bottom', null,
'Reached end of document, continued from top');
}
break;
}
if (notFound) { this.findField.setAttribute('data-status', status);
this.findField.classList.add('notFound'); this.findMsg.textContent = findMsg;
} else {
this.findField.classList.remove('notFound');
}
this.findField.setAttribute('data-status', status); this.updateResultsCount(matchCount);
this.findMsg.textContent = findMsg; this._adjustWidth();
}
this.updateResultsCount(matchCount); updateResultsCount(matchCount) {
this._adjustWidth(); if (!this.findResultsCount) {
}, return; // No UI control is provided.
}
updateResultsCount: function(matchCount) { // If there are no matches, hide the counter.
if (!this.findResultsCount) { if (!matchCount) {
return; // no UI control is provided this.findResultsCount.classList.add('hidden');
} return;
}
// If there are no matches, hide the counter // Create and show the match counter.
if (!matchCount) { this.findResultsCount.textContent = matchCount.toLocaleString();
this.findResultsCount.classList.add('hidden'); this.findResultsCount.classList.remove('hidden');
return; }
}
// Create the match counter open() {
this.findResultsCount.textContent = matchCount.toLocaleString(); if (!this.opened) {
this.opened = true;
this.toggleButton.classList.add('toggled');
this.bar.classList.remove('hidden');
}
this.findField.select();
this.findField.focus();
// Show the counter this._adjustWidth();
this.findResultsCount.classList.remove('hidden'); }
},
open: function PDFFindBar_open() { close() {
if (!this.opened) { if (!this.opened) {
this.opened = true; return;
this.toggleButton.classList.add('toggled'); }
this.bar.classList.remove('hidden'); this.opened = false;
} this.toggleButton.classList.remove('toggled');
this.findField.select(); this.bar.classList.add('hidden');
this.findField.focus(); this.findController.active = false;
}
this._adjustWidth(); toggle() {
}, if (this.opened) {
this.close();
} else {
this.open();
}
}
close: function PDFFindBar_close() { /**
if (!this.opened) { * @private
return; */
} _adjustWidth() {
this.opened = false; if (!this.opened) {
this.toggleButton.classList.remove('toggled'); return;
this.bar.classList.add('hidden'); }
this.findController.active = false;
},
toggle: function PDFFindBar_toggle() {
if (this.opened) {
this.close();
} else {
this.open();
}
},
/**
* @private
*/
_adjustWidth: function PDFFindBar_adjustWidth() {
if (!this.opened) {
return;
}
// The find bar has an absolute position and thus the browser extends // 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 // its width to the maximum possible width once the find bar does not fit
// entirely within the window anymore (and its elements are automatically // entirely within the window anymore (and its elements are automatically
// wrapped). Here we detect and fix that. // wrapped). Here we detect and fix that.
this.bar.classList.remove('wrapContainers'); this.bar.classList.remove('wrapContainers');
var findbarHeight = this.bar.clientHeight; var findbarHeight = this.bar.clientHeight;
var inputContainerHeight = this.bar.firstElementChild.clientHeight; var inputContainerHeight = this.bar.firstElementChild.clientHeight;
if (findbarHeight > inputContainerHeight) { if (findbarHeight > inputContainerHeight) {
// The findbar is taller than the input container, which means that // The findbar is taller than the input container, which means that
// the browser wrapped some of the elements. For a consistent look, // the browser wrapped some of the elements. For a consistent look,
// wrap all of them to adjust the width of the find bar. // wrap all of them to adjust the width of the find bar.
this.bar.classList.add('wrapContainers'); this.bar.classList.add('wrapContainers');
} }
}, }
}; }
return PDFFindBar;
})();
export { export {
PDFFindBar, PDFFindBar,

Write Preview
Loading…
Cancel
Save