Filter tables plugin cleanup

- Put markup first and consolidate all script into single block
- Fix some JS oddities
- Put into IIFE no does not pollute the global namespace (prevents
  conflicts)
- Hide when JS disabled

plugins/tables-filter.php

@@ -6,29 +6,43 @@
 * @license https://www.apache.org/licenses/LICENSE-2.0 Apache License, Version 2.0
 * @license https://www.gnu.org/licenses/gpl-2.0.html GNU General Public License, version 2 (one or other)
 */
+
 class AdminerTablesFilter {
 	function tablesPrint($tables) { ?>
-<script<?php echo nonce(); ?>>
+<fieldset class="jsonly" style="margin-left: .8em;">
-var tablesFilterTimeout = null;
+	<legend><?php echo lang('Filter tables'); ?></legend>
-var tablesFilterValue = '';
+	<div>
+		<input type="search" id="filter-field" autocomplete="off">
+		<input type="button" id="filter-field-reset" value="<?php echo lang('Clear'); ?>">
+	</div>
+</fieldset>
 
-function tablesFilter(){
+<script<?php echo nonce(); ?>>
-	var value = qs('#filter-field').value.toLowerCase();
+(function() {
-	if (value == tablesFilterValue) {
+
+var timeout;
+var lastValue = '';
+var filterField = qs('#filter-field');
+
+function filter() {
+	timeout && (timeout = null);
+	var value = filterField.value.toLowerCase();
+	if (value == lastValue) {
 		return;
 	}
-	tablesFilterValue = value;
+	lastValue = value;
 	if (value != '') {
-		var reg = (value + '').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, '\\$1');
+		var reg = (value + '').replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 		reg = new RegExp('('+ reg + ')', 'gi');
 	}
-	if (sessionStorage) {
+	if (window.sessionStorage) {
 		sessionStorage.setItem('adminer_tables_filter', value);
 	}
 	var tables = qsa('li', qs('#tables'));
+	var a;
+	var text;
 	for (var i = 0; i < tables.length; i++) {
-		var a = null;
+		text = tables[i].getAttribute('data-table-name');
-		var text = tables[i].getAttribute('data-table-name');
 		if (text == null) {
 			a = qsa('a', tables[i])[1];
 			text = a.innerHTML.trim();
@@ -48,33 +62,32 @@ function tablesFilter(){
 	}
 }
 
-function tablesFilterInput() {
+filterField.addEventListener('input', function input() {
-	window.clearTimeout(tablesFilterTimeout);
+	timeout && window.clearTimeout(timeout);
-	tablesFilterTimeout = window.setTimeout(tablesFilter, 200);
+	timeout = window.setTimeout(filter, 200);
-}
-
-sessionStorage && document.addEventListener('DOMContentLoaded', function () {
-	if (qs('#dbs') != null) {
-		var db = qs('#dbs').querySelector('select');
-		db = db.options[db.selectedIndex].text;
-		if (db == sessionStorage.getItem('adminer_tables_filter_db') && sessionStorage.getItem('adminer_tables_filter')){
-			qs('#filter-field').value = sessionStorage.getItem('adminer_tables_filter');
-			tablesFilter();
-		}
-		sessionStorage.setItem('adminer_tables_filter_db', db);
-	}
 });
+
+qs('#filter-field-reset').addEventListener('click', function() {
+	filterField.value = '';
+	filterField.dispatchEvent(new Event('input'));
+});
+
+window.sessionStorage && document.addEventListener('DOMContentLoaded', function restore() {
+	var db = qs('#dbs select');
+	var value;
+	db = db.options[db.selectedIndex].text;
+	if (
+		db == sessionStorage.getItem('adminer_tables_filter_db')
+		&& (value = sessionStorage.getItem('adminer_tables_filter'))
+	) {
+		filterField.value = value;
+		filter();
+	}
+	sessionStorage.setItem('adminer_tables_filter_db', db);
+});
+
+})();
 </script>
-
-<fieldset style="margin-left: .8em;">
-	<legend><?php echo lang('Filter tables'); ?></legend>
-	<div>
-		<input type="search" id="filter-field" autocomplete="off"><?php echo script("qs('#filter-field').oninput = tablesFilterInput;"); ?>
-		<input type="button" id="filter-field-reset" value="<?php echo lang('Clear'); ?>">
-		<?php echo script("qs('#filter-field-reset').onclick = function() { qs('#filter-field').value = ''; qs('#filter-field').dispatchEvent(new Event('input')); }"); ?>
-	</div>
-</fieldset>
-
 <?php
 	}
 }