Update AdminerTablesFilter
* Removes children request (Should work on IE6, 7, 8 now) * Uses <strong> instead of <b> * Doesn't leave said <strong> tags behind after updating the list * Highlights multiple matches in a single table name * Works case insensitively * Improves performance with setTimeout With 400 tables, the old implementation locks up the tab (or browser if using something without multiprocess) for about half a second per keyup. Yes, this includes modifiers that don't actually change the filter. The new version handles the same event in 0.09 milliseconds. That's with all the above improvements. Tested in firefox 45.1.1 performance monitor.
This commit is contained in:
parent
5f26d3a1b8
commit
2c8eff9b53
|
@ -7,28 +7,53 @@
|
||||||
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU General Public License, version 2 (one or other)
|
* @license http://www.gnu.org/licenses/gpl-2.0.html GNU General Public License, version 2 (one or other)
|
||||||
*/
|
*/
|
||||||
class AdminerTablesFilter {
|
class AdminerTablesFilter {
|
||||||
|
function tablesPrint($tables) { ?>
|
||||||
function tablesPrint($tables) {
|
<p class="jsonly"><input id="filter-field" onkeyup="tablesFilterInput();">
|
||||||
?>
|
<p id='tables' onmouseover='menuOver(this, event);' onmouseout='menuOut(this);'>
|
||||||
<script type="text/javascript">
|
|
||||||
function tablesFilter(value) {
|
|
||||||
var tables = document.getElementById('tables').getElementsByTagName('span');
|
|
||||||
for (var i = tables.length; i--; ) {
|
|
||||||
var a = tables[i].children[1];
|
|
||||||
var text = a.innerText || a.textContent;
|
|
||||||
tables[i].className = (text.indexOf(value) == -1 ? 'hidden' : '');
|
|
||||||
a.innerHTML = text.replace(value, '<b>' + value + '</b>');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<p class="jsonly"><input onkeyup="tablesFilter(this.value);">
|
|
||||||
<?php
|
<?php
|
||||||
echo "<p id='tables' onmouseover='menuOver(this, event);' onmouseout='menuOut(this);'>\n";
|
|
||||||
foreach ($tables as $table => $type) {
|
foreach ($tables as $table => $type) {
|
||||||
echo '<span><a href="' . h(ME) . 'select=' . urlencode($table) . '"' . bold($_GET["select"] == $table) . ">" . lang('select') . "</a> ";
|
echo '<span data-table-name="'.h($table).'"><a href="'.h(ME).'select='.urlencode($table).'"'.bold($_GET["select"] == $table).">".lang('select')."</a> ";
|
||||||
echo '<a href="'.h(ME).'table='.urlencode($table).'"'.bold($_GET["table"] == $table).">".h($table)."</a><br></span>\n";
|
echo '<a href="'.h(ME).'table='.urlencode($table).'"'.bold($_GET["table"] == $table).">".h($table)."</a><br></span>\n";
|
||||||
}
|
}
|
||||||
return true;
|
?>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var tablesFilterTimeout = null;
|
||||||
|
var tablesFilterValue = '';
|
||||||
|
|
||||||
|
function tablesFilter(){
|
||||||
|
var value = document.getElementById('filter-field').value.toLowerCase();
|
||||||
|
if (value == tablesFilterValue) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
tablesFilterValue = value;
|
||||||
|
if (value != '') {
|
||||||
|
var reg = (value + '').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, '\\$1');
|
||||||
|
reg = new RegExp('('+ reg + ')', 'gi');
|
||||||
|
}
|
||||||
|
var tables = document.getElementById('tables').getElementsByTagName('span');
|
||||||
|
for (var i = 0; i < tables.length; i++) {
|
||||||
|
var a = tables[i].getElementsByTagName('a')[1];
|
||||||
|
var text = tables[i].getAttribute('data-table-name');
|
||||||
|
if (value == '') {
|
||||||
|
tables[i].className = '';
|
||||||
|
a.innerHTML = text;
|
||||||
|
} else {
|
||||||
|
tables[i].className = (text.toLowerCase().indexOf(value) == -1 ? 'hidden' : '');
|
||||||
|
a.innerHTML = text.replace(reg, '<strong>$1</strong>');
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function tablesFilterInput() {
|
||||||
|
window.clearTimeout(tablesFilterTimeout);
|
||||||
|
tablesFilterTimeout = window.setTimeout(tablesFilter, 200);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (document.getElementById('filter-field').value){
|
||||||
|
tablesFilter();
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<?php
|
||||||
|
return true;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue