libs/cbi: Added value function to luci.cbi.Value to create Comboboxes

i18n/english/luasrc/i18n/cbi.en.lua

@@ -4,3 +4,5 @@ cbi_invalid = "Error: Invalid input value"
 cbi_addopt = "-- Additional Field --"
 cbi_optional = " (optional)"
 cbi_sectempty = "This section contains no values yet"
+cbi_manual = "-- manual --"
+cbi_select = "-- Please choose --"

i18n/german/luasrc/i18n/cbi.de.lua

@@ -2,4 +2,6 @@ cbi_add = "Eintrag hinzufügen"
 cbi_del = "Eintrag entfernen"
 cbi_invalid = "Error: Ungültige Eingabe"
 cbi_addopt = "-- Zusätzliches Feld --"
-cbi_sectempty = "Diese Sektion enthält noch keine Einträge"
+cbi_sectempty = "Diese Sektion enthält noch keine Einträge"
+cbi_manual = "-- manuell --"
+cbi_select = "-- Bitte auswählen --"

libs/cbi/htdocs/luci-static/resources/cbi.js

@@ -35,4 +35,77 @@ function cbi_d_init() {
 	for (var x in cbi_d) {
 		cbi_d_update(x);
 	}
+}
+
+function cbi_bind(obj, type, callback, mode) {
+	if (typeof mode == "undefined") {
+		mode = false;
+	}
+	if (!obj.addEventListener) {
+		ieCallback = function(){
+			var e = window.event;
+			if (!e.target && e.srcElement) {
+				e.target = e.srcElement;
+			};
+			e.target['_eCB' + type + callback] = callback;
+			e.target['_eCB' + type + callback](e);
+			e.target['_eCB' + type + callback] = null;
+		};
+		obj.attachEvent('on' + type, ieCallback);
+	} else {
+		obj.addEventListener(type, callback, mode);
+	}
+	return obj;
+}
+
+function cbi_combobox(id, values, def, man) {
+	var obj = document.getElementById(id)
+	if (obj.value == "" || values[obj.value]) {
+		var sel = document.createElement("select")
+		obj.parentNode.appendChild(sel)
+
+		if (obj.value == "") {
+			var optdef = document.createElement("option")
+			optdef.value = ""
+			optdef.appendChild(document.createTextNode(def))
+			sel.appendChild(optdef)
+		}
+
+		for (var i in values) {
+			var opt = document.createElement("option")
+			opt.value = i
+
+			if (obj.value == i) {
+				opt.selected = "selected"
+			}
+
+			opt.appendChild(document.createTextNode(values[i]))
+			sel.appendChild(opt)
+		}
+
+		var optman = document.createElement("option")
+		optman.value = ""
+		optman.appendChild(document.createTextNode(man))
+		sel.appendChild(optman)
+
+		obj.style.display = "none"
+
+		cbi_bind(sel, "change", function() {
+			obj.value = sel.options[sel.selectedIndex].value
+
+			if (sel.selectedIndex == sel.options.length - 1) {
+				obj.style.display = "inline"
+				sel.parentNode.removeChild(sel)
+				obj.focus()
+			}
+		})
+	}
+}
+
+function cbi_combobox_init(id, values, def, man) {
+	var obj = document.getElementById(id)
+	cbi_bind(obj, "change", function() {
+		cbi_combobox(id, values, def, man)
+	})
+	cbi_combobox(id, values, def, man)
 }

libs/cbi/luasrc/cbi.lua

@@ -595,7 +595,10 @@ function AbstractValue.render(self, s, scope)
 			if cond then
 				return string.format(
 					' %s="%s"', tostring(key),
-					tostring( val or scope[key] or self[key] or "" )
+					tostring( val
+					 or scope[key]
+					 or (type(self[key]) ~= "function" and self[key])
+					 or "" )
 				)
 			else
 				return ''
@@ -642,17 +645,14 @@ Value = class(AbstractValue)
 function Value.__init__(self, ...)
 	AbstractValue.__init__(self, ...)
 	self.template  = "cbi/value"
-
-	self.maxlength  = nil
+	self.keylist = {}
+	self.vallist = {}
 end
 
--- This validation is a bit more complex
-function Value.validate(self, val)
-	if self.maxlength and tostring(val):len() > self.maxlength then
-		val = nil
-	end
-
-	return val
+function Value.value(self, key, val)
+	val = val or key
+	table.insert(self.keylist, tostring(key))
+	table.insert(self.vallist, tostring(val))
 end
 
 

libs/cbi/luasrc/view/cbi/value.htm

@@ -14,4 +14,17 @@ $Id$
 -%>
 <%+cbi/valueheader%>
 	<input type="text" onchange="cbi_d_update(this.id)"<%= attr("name", cbid) .. attr("id", cbid) .. attr("value", self:cfgvalue(section)) .. ifattr(self.size, "size") .. ifattr(self.maxlength, "maxlength") %> />
+	<% if #self.keylist > 0 then -%>
+	<script type="text/javascript">
+		cbi_combobox_init('<%=cbid%>', {
+		<%-
+			for i, k in ipairs(self.keylist) do
+		-%>
+			<%-=string.format("%q", k) .. ":" .. string.format("%q", self.vallist[i])-%>,
+		<%-
+			end
+		-%>
+		}, '<%:cbi_select%>', '<%:cbi_manual%>');
+	</script>
+	<% end -%>
 <%+cbi/valuefooter%>