Allow search unregister

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2019-02-27 09:21:04 +01:00
parent c2da3bf1d9
commit 236dad51fa
No known key found for this signature in database
GPG Key ID: 60C25B8C072916CF
1 changed files with 78 additions and 28 deletions

View File

@ -1,4 +1,4 @@
/* /**
* @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com> * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
* *
* @author John Molakvoæ <skjnldsv@protonmail.com> * @author John Molakvoæ <skjnldsv@protonmail.com>
@ -69,7 +69,7 @@
/** /**
* Search * Search
*/ */
this.search = function(event) { this._search = function(event) {
event.preventDefault(); event.preventDefault();
var query = document.getElementById('searchbox').value; var query = document.getElementById('searchbox').value;
self.searchCallback(query); self.searchCallback(query);
@ -78,34 +78,25 @@
/** /**
* Reset form * Reset form
*/ */
this.reset = function(event) { this._reset = function(event) {
event.preventDefault(); event.preventDefault();
document.getElementById('searchbox').value = ''; document.getElementById('searchbox').value = '';
self.resetCallback(); self.resetCallback();
}; };
// Show search /**
document.getElementById('searchbox').style.display = 'block'; * Submit event handler
*/
this._submitHandler = function(event) {
// Avoid form submit
event.preventDefault();
_.debounce(self.search, 500);
}
// Register input event /**
document * keyUp event handler for the escape key
.getElementById('searchbox') */
.addEventListener('input', _.debounce(self.search, 500), true); this._keyUpHandler = function(event) {
document
.querySelector('form.searchbox')
.addEventListener('submit', function(event) {
// Avoid form submit
event.preventDefault();
_.debounce(self.search, 500);
}, true);
// Register reset
document
.querySelector('form.searchbox')
.addEventListener('reset', _.debounce(self.reset, 500), true);
// Register esc key shortcut reset if focused
document.addEventListener('keyup', function(event) {
if (event.defaultPrevented) { if (event.defaultPrevented) {
return; return;
} }
@ -116,13 +107,20 @@
document.getElementById('searchbox').value === '' document.getElementById('searchbox').value === ''
) { ) {
if (key === 'Escape' || key === 'Esc' || key === 27) { if (key === 'Escape' || key === 'Esc' || key === 27) {
document.activeElement.blur(); // remove focus on searchbox
_.debounce(self.reset, 500); _.debounce(self.reset, 500);
} }
} }
}); }
// Register ctrl+F key shortcut to focus this._searchDebounced = _.debounce(self._search, 500)
document.addEventListener('keydown', function(event) {
this._resetDebounced = _.debounce(self._reset, 500)
/**
* keyDown event handler for the ctrl+F shortcut
*/
this._keyDownHandler = function(event) {
if (event.defaultPrevented) { if (event.defaultPrevented) {
return; return;
} }
@ -139,7 +137,59 @@
document.getElementById('searchbox').select(); document.getElementById('searchbox').select();
} }
} }
}); }
// Show search
document.getElementById('searchbox').style.display = 'block';
// Register input event
document
.getElementById('searchbox')
.addEventListener('input', this._searchDebounced, true);
document
.querySelector('form.searchbox')
.addEventListener('submit', this._submitHandler, true);
// Register reset
document
.querySelector('form.searchbox')
.addEventListener('reset', this._resetDebounced, true);
// Register esc key shortcut reset if focused
document.addEventListener('keyup', this._keyUpHandler);
// Register ctrl+F key shortcut to focus
document.addEventListener('keydown', this._keyDownHandler);
},
unregister: function() {
// Hide search
document.getElementById('searchbox').style.display = 'none';
// Reset search
document.getElementById('searchbox').value = '';
this.resetCallback();
// Unregister input event
document
.getElementById('searchbox')
.removeEventListener('input', this._searchDebounced, true);
document
.querySelector('form.searchbox')
.removeEventListener('submit', this._submitHandler, true);
// Unregister reset
document
.querySelector('form.searchbox')
.removeEventListener('reset', this._resetDebounced, true);
// Unregister esc key shortcut reset if focused
document.removeEventListener('keyup', this._keyUpHandler);
// Unregister ctrl+F key shortcut to focus
document.removeEventListener('keydown', this._keyDownHandler);
console.debug('Search handler unregistered');
} }
}; };