Allow search unregister
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
parent
c2da3bf1d9
commit
236dad51fa
|
@ -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');
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue