moved filterbox function into JS for reuse

open768 · Mar 8, 2022 · fb340e6 · fb340e6
1 parent 53259eb
commit fb340e6
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 54 deletions.
diff --git a/inc/render.php b/inc/render.php
@@ -161,63 +161,14 @@ public static function plain_button ($psCaption, $psUrl){
 
 	//**************************************************************************
 	public static function add_filter_box($psSelector,$psAttr,$psParentSelector, $psCaption = "Filter"){
+		global $home;
+
 		if 	(self::is_list_mode() && !self::$FORCE_FILTERBOX_DISPLAY) return;
 
-		?><form action="#">
-			<div class="mdl-textfield mdl-js-textfield">
-				<input class="mdl-textfield__input" type="text" id="filter" disabled>
-				<label class="mdl-textfield__label" for="filter"><?=$psCaption?>...</label>
-			</div>
-		</form>
+		?>
+		<script language="javascript" src="<?=$home?>/js/filter.js"></script>
 		<script language="javascript">
-
-			function onFilterKeyUp( poEvent){
-				//look through divs with selectmenu
-				var aSelected = $("<?=$psSelector?>");
-				var sInput = $("#filter").val().toLowerCase();
-				//iterate
-				aSelected.each(
-					function(index){
-
-						var oEl = $(this);
-						var sAttr = oEl.attr("<?=$psAttr?>"); 
-						if (sAttr) { //skip selected that dont have the desired attribute
-
-							var oParent=$(this).closest("<?=$psParentSelector?>");
-							var oTRParent = $(this).closest("TR");					
-							var oHider = oParent;
-							if (oTRParent.length > 0){
-								 if (oTRParent.parents().length > oParent.parents().length) //element is in a table
-								 	oHider = oTRParent;
-							}
-
-
-							if (sInput.length < 3){	//must be at least 3 chars
-								oHider.show();
-							}else{
-								sAttr = sAttr.toLowerCase();
-								if ( sAttr.indexOf(sInput) == -1)	////check the attribute for a match
-									oHider.hide();
-								else{
-									oHider.show();
-									oParent.show();
-								}
-							}
-						}
-					}
-				);
-			}
-
-			$( 			
-				function setFilterKeyUp(){
-					$(
-						function(){
-							$("#filter" ).prop( "disabled", false );
-							$("#filter" ).keyup(onFilterKeyUp);
-						}
-					);
-				}
-			);
+			cFilterFunctions.filter_box("<?=$psCaption?>", "<?=$psSelector?>","<?=$psAttr?>", "<?=$psParentSelector?>" );
 		</script>
 	<?php	}
 

diff --git a/js/filter.js b/js/filter.js
@@ -0,0 +1,75 @@
+'use strict';
+var cFilterFunctions={
+	selector:null,
+	parent_selector:null,
+	attr:null,
+	id:"filter",
+
+	//**********************************************************************************
+	filter_box: function(psCaption, psSelector, psAttr, psParentSelector){
+		var oThis=this;
+		this.selector = psSelector;
+		this.attr = psAttr;
+		this.parent_selector = psParentSelector;
+
+		var sHTML = '<form action="#">' +
+			'<div class="mdl-textfield mdl-js-textfield">' +
+				'<input class="mdl-textfield__input" type="text" id="' + this.id + '" disabled>' +
+				'<label class="mdl-textfield__label" for="' + this.id + '">' + psCaption + '...</label>' +
+			'</div>' +
+		'</form>';
+		document.writeln(sHTML);
+
+		$( function(){oThis.setOnKeyUp()});			
+	},
+
+	//**********************************************************************************
+	setOnKeyUp: function(psID){
+		var oThis=this;
+		$("#" + this.id ).prop( "disabled", false );
+		$("#" + this.id ).keyup( 
+			function(poEvent){
+				oThis.onFilterKeyUp(poEvent);
+			}
+		);
+	},
+
+	//**********************************************************************************
+	onFilterKeyUp: function( poEvent){
+		//look through divs with selectmenu
+		var oThis = this;
+		var aSelected = $(oThis.selector);
+		var sInput = $("#filter").val().toLowerCase();
+		//iterate
+		aSelected.each(
+			function(index){
+
+				var oEl = $(this);
+				var sAttr = oEl.attr(oThis.attr); 
+				if (sAttr) { //skip selected that dont have the desired attribute
+
+					var oParent=$(this).closest(oThis.parent_selector);
+					var oTRParent = $(this).closest("TR");					
+					var oHider = oParent;
+					if (oTRParent.length > 0){
+						 if (oTRParent.parents().length > oParent.parents().length) //element is in a table
+							oHider = oTRParent;
+					}
+
+
+					if (sInput.length < 3){	//must be at least 3 chars
+						oHider.show();
+					}else{
+						sAttr = sAttr.toLowerCase();
+						if ( sAttr.indexOf(sInput) == -1)	////check the attribute for a match
+							oHider.hide();
+						else{
+							oHider.show();
+							oParent.show();
+						}
+					}
+				}
+			}
+		);
+	}
+}
diff --git a/js/render.js b/js/render.js
@@ -174,7 +174,13 @@ var cRender={
 	//**************************************************************************
 	fade_element: function(poEl){
 		poEl.fadeOut(1000,function(){poEl.remove();});
+	},
+
+	//**************************************************************************
+	filter_box: function(){
 	}
+
+
 };
 
 var cRenderW3={

diff --git a/js/widgets/tierserviceendpoints.js b/js/widgets/tierserviceendpoints.js
@@ -113,6 +113,7 @@ $.widget( "ck.adserviceendpoints",{
 		oElement.empty();
 		var oTable = $("<table>", {border:1,cellspacing:0,style:"width:100%;overflow-wrap: break-word"});
 			oTable.append("<TR><TH>Calls</TH><TH>Response Times</TH><TH>Errors per minute</TH></TR>");
+
 			paData.forEach( function(poSP){
 				var sBaseUrl = oElement.attr(cRenderQS.HOME_QS) + "/pages/service/endpoint.php";
 				var oParams = {};