Add XHR CBI helper
[project/luci.git] / libs / cbi / htdocs / luci-static / resources / cbi.js
index 38e27d8..e9a8011 100644 (file)
@@ -1,39 +1,95 @@
-var cbi_d = {};
+/*
+       LuCI - Lua Configuration Interface
 
-function cbi_d_add(field, target, value) {
-       if (!cbi_d[target]) {
-               cbi_d[target] = {};
-       }
-       if (!cbi_d[target][value]) {
-               cbi_d[target][value] = [];
+       Copyright 2008 Steven Barth <steven@midlink.org>
+       Copyright 2008 Jo-Philipp Wich <xm@leipzig.freifunk.net>
+
+       Licensed under the Apache License, Version 2.0 (the "License");
+       you may not use this file except in compliance with the License.
+       You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+       $Id$
+*/
+
+var cbi_d = [];
+
+function cbi_d_add(field, dep, next) {
+       var obj = document.getElementById(field);
+       if (obj) {
+               var entry
+               for (var i=0; i<cbi_d.length; i++) {
+                       if (cbi_d[i].id == field) {
+                               entry = cbi_d[i];
+                               break;
+                       }
+               }
+               if (!entry) {
+                       entry = {
+                               "node": obj,
+                               "id": field,
+                               "parent": obj.parentNode.id,
+                               "next": next,
+                               "deps": []
+                       };
+                       cbi_d.unshift(entry);
+               }
+               entry.deps.push(dep)
        }
-       cbi_d[target][value].push(field);
 }
 
-function cbi_d_update(target) {
-       if (!cbi_d[target]) {
-               return;
-       }
-       
-       for (var x in cbi_d[target]) {
-               for (var i=0; i<cbi_d[target][x].length; i++) { 
-                       var y = document.getElementById(cbi_d[target][x][i])    
-                       y.style.display = "none";
+function cbi_d_checkvalue(target, ref) {
+       var t = document.getElementById(target);
+       var value;
+
+       if (!t || !t.value) {
+               value = "";
+       } else {
+               value = t.value;
+
+               if (t.type == "checkbox") {
+                       value = t.checked ? value : "";
                }
        }
-       
-       var t = document.getElementById(target);
-       if (t && t.value && cbi_d[target][t.value]) {
-               for (var i=0; i<cbi_d[target][t.value].length; i++) {                   
-                       var y = document.getElementById(cbi_d[target][t.value][i])
-                       y.style.display = "block";
+
+       return (value == ref)
+}
+
+function cbi_d_check(deps) {
+       for (var i=0; i<deps.length; i++) {
+               var istat = true
+               for (var j in deps[i]) {
+                       istat = (istat && cbi_d_checkvalue(j, deps[i][j]))
+               }
+               if (istat) {
+                       return true
                }
        }
 }
 
-function cbi_d_init() {
-       for (var x in cbi_d) {
-               cbi_d_update(x);
+function cbi_d_update() {
+       var state = false;
+       for (var i=0; i<cbi_d.length; i++) {
+               var entry = cbi_d[i];
+               var next  = document.getElementById(entry.next)
+               var node  = document.getElementById(entry.id)
+               var parent = document.getElementById(entry.parent)
+
+               if (node && node.parentNode && !cbi_d_check(entry.deps)) {
+                       node.parentNode.removeChild(node);
+                       state = (state || !node.parentNode)
+               } else if ((!node || !node.parentNode) && cbi_d_check(entry.deps)) {
+                       if (!next) {
+                               parent.appendChild(entry.node);
+                       } else {
+                               next.parentNode.insertBefore(entry.node, next);
+                       }
+                       state = (state || (node && node.parentNode))
+               }
+       }
+       if (state) {
+               cbi_d_update();
        }
 }
 
@@ -59,53 +115,102 @@ function cbi_bind(obj, type, callback, mode) {
 }
 
 function cbi_combobox(id, values, def, man) {
+       var selid = "cbi.combobox." + id;
+       if (document.getElementById(selid)) {
+               return
+       }
+
        var obj = document.getElementById(id)
-       if (obj.value == "" || values[obj.value]) {
-               var sel = document.createElement("select")
-               obj.parentNode.appendChild(sel)
+       var sel = document.createElement("select");
+       sel.id = selid;
+       sel.className = 'cbi-input-select';
+       if (obj.nextSibling) {
+               obj.parentNode.insertBefore(sel, obj.nextSibling);
+       } else {
+               obj.parentNode.appendChild(sel);
+       }
 
+       if (!values[obj.value]) {
                if (obj.value == "") {
-                       var optdef = document.createElement("option")
-                       optdef.value = ""
-                       optdef.appendChild(document.createTextNode(def))
-                       sel.appendChild(optdef)
+                       var optdef = document.createElement("option");
+                       optdef.value = "";
+                       optdef.appendChild(document.createTextNode(def));
+                       sel.appendChild(optdef);
+               } else {
+                       var opt = document.createElement("option");
+                       opt.value = obj.value;
+                       opt.selected = "selected";
+                       opt.appendChild(document.createTextNode(obj.value));
+                       sel.appendChild(opt);
                }
+       }
 
-               for (var i in values) {
-                       var opt = document.createElement("option")
-                       opt.value = i
-
-                       if (obj.value == i) {
-                               opt.selected = "selected"
-                       }
+       for (var i in values) {
+               var opt = document.createElement("option");
+               opt.value = i;
 
-                       opt.appendChild(document.createTextNode(values[i]))
-                       sel.appendChild(opt)
+               if (obj.value == i) {
+                       opt.selected = "selected";
                }
 
-               var optman = document.createElement("option")
-               optman.value = ""
-               optman.appendChild(document.createTextNode(man))
-               sel.appendChild(optman)
+               opt.appendChild(document.createTextNode(values[i]));
+               sel.appendChild(opt);
+       }
 
-               obj.style.display = "none"
+       var optman = document.createElement("option");
+       optman.value = "";
+       optman.appendChild(document.createTextNode(man));
+       sel.appendChild(optman);
 
-               cbi_bind(sel, "change", function() {
-                       obj.value = sel.options[sel.selectedIndex].value
+       obj.style.display = "none";
 
-                       if (sel.selectedIndex == sel.options.length - 1) {
-                               obj.style.display = "inline"
-                               sel.parentNode.removeChild(sel)
-                               obj.focus()
-                       }
-               })
-       }
+       cbi_bind(sel, "change", function() {
+               if (sel.selectedIndex == sel.options.length - 1) {
+                       obj.style.display = "inline";
+                       sel.parentNode.removeChild(sel);
+                       obj.focus();
+               } else {
+                       obj.value = sel.options[sel.selectedIndex].value;
+               }
+       })
 }
 
 function cbi_combobox_init(id, values, def, man) {
-       var obj = document.getElementById(id)
-       cbi_bind(obj, "change", function() {
+       var obj = document.getElementById(id);
+       cbi_bind(obj, "blur", function() {
                cbi_combobox(id, values, def, man)
-       })
-       cbi_combobox(id, values, def, man)
-}
\ No newline at end of file
+       });
+       cbi_combobox(id, values, def, man);
+}
+
+function cbi_filebrowser(id, url, defpath) {
+       var field   = document.getElementById(id);
+       var browser = window.open(
+               url + ( field.value || defpath || '' ) + '?field=' + id,
+               "luci_filebrowser", "width=300,height=400,left=100,top=200,scrollbars=yes"
+       );
+
+       browser.focus();
+}
+
+//Hijacks the CBI form to send via XHR (requires Prototype)
+function cbi_hijack_forms(layer, win, fail, load) {
+       layer.select('form').each(function(form) {
+               form.observe('submit', function(event) {
+                       // Prevent the form from also submitting the regular way
+                       event.stop();
+
+                       var form = event.element();
+
+                       if (load) {
+                               load();
+                       }
+
+                       // Submit via XHR
+                       form.request({
+                               onSuccess: win,
+                               onFailure: fail
+                       });
+               });
+       });
+}