Experimental selection system in imagecombobox.

1 files changed, 20 insertions, 7 deletions

diff --git a/utils/forms.php b/utils/forms.php
index 3d1050a..d946c34 100644
--- a/utils/forms.php
+++ b/utils/forms.php
@@ -209,20 +209,33 @@ class ImageComboBox {
 
 	public function render($indent = "")
 	{
-		$width = 64;
+		$width = 100;
 		$str  = $indent . "<div class=\"input\">\n";
 		$str .= $indent . "  <div class=\"label\">".$this->label."</div>\n";
 		$str .= $indent . "  <div class=\"widget\">\n";
-		$str .= $indent . "    <div style=\"width:200px;overflow:scroll;\">\n";
-		$str .= $indent . "      <div style=\"width:".($width + 6)*sizeof($this->values)."px;\">\n";
-		$str .= $indent . "        <input id=\"".$this->name."\" name=\"vars[".$this->name."]\" type=\"hidden\" value=\"".$this->value."\"/>\n";
-
+		$str .= $indent . "    <script type=\"text/javascript\">\n";
+		$str .= $indent . "    function setSelection(value)\n";
+		$str .= $indent . "    {\n";
+		$str .= $indent . "      document.getElementById('".$this->name."').value = value\n";
+		$str .= $indent . "      var container = document.getElementById('icons');\n";
+		$str .= $indent . "      var icons = document.getElementsByName('icon');\n";
+		$str .= $indent . "      for(i = 0; i < icons.length; i++) {\n";
+		$str .= $indent . "        if(icons[i].src == value) icons[i].width = ".$width.";\n";
+		$str .= $indent . "        else icons[i].width = ".($width - 10).";\n";
+		//		$str .= $indent . "        if(icons[i].src == value) icons[i].style.border = '10px blue';\n";
+		//		$str .= $indent . "        else { icons[i].style.border = '0px' }\n";
+		$str .= $indent . "      }\n";
+		$str .= $indent . "    }\n";
+		$str .= $indent . "    </script>\n";
+		$str .= $indent . "    <div style=\"width:300px;overflow:scroll;\">\n";
+		$str .= $indent . "      <div id=\"icons\" style=\"width:".($width + 6)*sizeof($this->values)."px;\">\n";
+		$str .= $indent . "        <input id=\"".$this->name."\" name=\"vars[".$this->name."]\" type=\"hidden\" value=\"\"/>\n";
 		foreach($this->values as $k => $v) {
-			$str .= $indent . "        <img src=\"".$v."\" style=\"max-width:".$width."px;\"\n";
-			$str .= $indent . "             onclick=\"document.getElementById('".$this->name."').value='".$v."'\"/>\n";
+			$str .= $indent . "        <img name=\"icon\" src=\"".$v."\" style=\"max-width: ".$width."\" onclick=\"setSelection('".$v."')\"/>\n";
 		}
 		$str .= $indent . "      </div>\n"; // box
 		$str .= $indent . "    </div>\n"; // overflow
+		$str .= $indent . "    <script type=\"text/javascript\">setSelection('".$this->value."');</script>\n";
 		$str .= $indent . "  </div>\n"; // widget
 		$str .= $indent . "</div>\n"; // input
 		return $str;