webserver 1.8: webbox: Own checkbox images, because browsers use funny symbols otherwise

4 files changed, 19 insertions, 11 deletions

diff --git a/plugins/webbox/html/checkbox-checked.png b/plugins/webbox/html/checkbox-checked.png
new file mode 100644
index 0000000..4fb51cd
--- /dev/null
+++ b/plugins/webbox/html/checkbox-checked.png
diff --git a/plugins/webbox/html/checkbox.png b/plugins/webbox/html/checkbox.png
new file mode 100644
index 0000000..545a928
--- /dev/null
+++ b/plugins/webbox/html/checkbox.png
diff --git a/plugins/webbox/html/webbox.css b/plugins/webbox/html/webbox.css
index dbb151c..dac1d64 100644
--- a/plugins/webbox/html/webbox.css
+++ b/plugins/webbox/html/webbox.css
@@ -204,7 +204,7 @@ table.list td {
 }
 
 table.list td.selector {
-	width: 20px;
+	width: 36px;
 }
 
 table.list td.type {
diff --git a/plugins/webbox/html/webbox.js b/plugins/webbox/html/webbox.js
index cad32b1..963491d 100644
--- a/plugins/webbox/html/webbox.js
+++ b/plugins/webbox/html/webbox.js
@@ -80,10 +80,11 @@ function loadContents(dir) {
 					type = "";
 				}
 
-                                var selector = "<td class=\"selector\"></td>";
+                                var selector = "<td class=\"selector\"";
 				if (filename != "..") {
-					selector = "<td class=\"selector\" onclick=\"toggleSelection('" + filename + "')\">&#9744;</td>";
+					selector += " onclick=\"toggleSelection('" + filename + "')\"><img src=\"webbox-html/checkbox.png\"/><img src=\"webbox-html/checkbox-checked.png\" hidden/";
 				}
+				selector += "></td>";
 
 				result += "<tr>" +
 					selector +
@@ -163,6 +164,16 @@ function getSelection(filename) {
 	return false;
 }
 
+function clearSelector(element) {
+	element.childNodes[0].style.display = 'block';
+	element.childNodes[1].style.display = 'none';
+}
+
+function setSelector(element) {
+	element.childNodes[0].style.display = 'none';
+	element.childNodes[1].style.display = 'block';
+}
+
 function clearSelection(filename) {
 	var row = getRow(filename);
 
@@ -172,7 +183,7 @@ function clearSelection(filename) {
 	}
 	
 	var selectorElement = row.getElementsByClassName("selector")[0];
-	selectorElement.innerHTML = "&#9744;";
+	clearSelector(selectorElement);
 }
 
 function setSelection(filename) {
@@ -188,7 +199,7 @@ function setSelection(filename) {
 	}
 	
 	var selectorElement = row.getElementsByClassName("selector")[0];
-	selectorElement.innerHTML = "&#9745;";
+	setSelector(selectorElement);
 }
 
 function toggleSelection(filename) {
@@ -198,20 +209,17 @@ function toggleSelection(filename) {
 
 	var row = getRow(filename);
 
-	var selector_sign;
+	var selectorElement = row.getElementsByClassName("selector")[0];
 
 	if (row.classList.contains("selectedrow")) {
 		row.classList.remove("selectedrow");
 		numberOfSelectedRows--;
-		selector_sign = "&#9744;"
+	        clearSelector(selectorElement);
 	} else {
 		row.classList.add("selectedrow");
 		numberOfSelectedRows++;
-		selector_sign = "&#9745;"
+	        setSelector(selectorElement);
 	}
-
-	var selectorElement = row.getElementsByClassName("selector")[0];
-	selectorElement.innerHTML = selector_sign;
 }
 
 function entryMouse(filename) {