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

   1 /*
   2         LuCI - Lua Configuration Interface
   3
   4         Copyright 2008 Steven Barth <steven@midlink.org>
   5         Copyright 2008-2009 Jo-Philipp Wich <xm@subsignal.org>
   6
   7         Licensed under the Apache License, Version 2.0 (the "License");
   8         you may not use this file except in compliance with the License.
   9         You may obtain a copy of the License at
  10
  11         http://www.apache.org/licenses/LICENSE-2.0
  12
  13         $Id$
  14 */
  15
  16 var cbi_d = [];
  17 var cbi_t = [];
  18 var cbi_c = [];
  19
  20 function cbi_d_add(field, dep, next) {
  21         var obj = document.getElementById(field);
  22         if (obj) {
  23                 var entry
  24                 for (var i=0; i<cbi_d.length; i++) {
  25                         if (cbi_d[i].id == field) {
  26                                 entry = cbi_d[i];
  27                                 break;
  28                         }
  29                 }
  30                 if (!entry) {
  31                         entry = {
  32                                 "node": obj,
  33                                 "id": field,
  34                                 "parent": obj.parentNode.id,
  35                                 "next": next,
  36                                 "deps": []
  37                         };
  38                         cbi_d.unshift(entry);
  39
  40                         if( entry.parent )
  41                                 cbi_c[entry.parent] = (cbi_c[entry.parent] || 0) + 1;
  42                 }
  43                 entry.deps.push(dep)
  44         }
  45 }
  46
  47 function cbi_d_checkvalue(target, ref) {
  48         var t = document.getElementById(target);
  49         var value;
  50
  51         if (!t || !t.value) {
  52                 value = "";
  53         } else {
  54                 value = t.value;
  55
  56                 if (t.type == "checkbox") {
  57                         value = t.checked ? value : "";
  58                 }
  59         }
  60
  61         return (value == ref)
  62 }
  63
  64 function cbi_d_check(deps) {
  65         for (var i=0; i<deps.length; i++) {
  66                 var istat = true
  67                 for (var j in deps[i]) {
  68                         istat = (istat && cbi_d_checkvalue(j, deps[i][j]))
  69                 }
  70                 if (istat) {
  71                         return true
  72                 }
  73         }
  74 }
  75
  76 function cbi_d_update() {
  77         var state = false;
  78         for (var i=0; i<cbi_d.length; i++) {
  79                 var entry = cbi_d[i];
  80                 var next  = document.getElementById(entry.next)
  81                 var node  = document.getElementById(entry.id)
  82                 var parent = document.getElementById(entry.parent)
  83
  84                 if (node && node.parentNode && !cbi_d_check(entry.deps)) {
  85                         node.parentNode.removeChild(node);
  86                         state = (state || !node.parentNode);
  87                         if( entry.parent )
  88                                 cbi_c[entry.parent]--;
  89                 } else if ((!node || !node.parentNode) && cbi_d_check(entry.deps)) {
  90                         if (!next) {
  91                                 parent.appendChild(entry.node);
  92                         } else {
  93                                 next.parentNode.insertBefore(entry.node, next);
  94                         }
  95                         state = (state || (node && node.parentNode))
  96                         if( entry.parent )
  97                                 cbi_c[entry.parent]++;
  98                 }
  99         }
 100
 101         if (entry.parent) {
 102                 cbi_t_update();
 103         }
 104
 105         if (state) {
 106                 cbi_d_update();
 107         }
 108 }
 109
 110 function cbi_bind(obj, type, callback, mode) {
 111         if (typeof mode == "undefined") {
 112                 mode = false;
 113         }
 114         if (!obj.addEventListener) {
 115                 ieCallback = function(){
 116                         var e = window.event;
 117                         if (!e.target && e.srcElement) {
 118                                 e.target = e.srcElement;
 119                         };
 120                         e.target['_eCB' + type + callback] = callback;
 121                         e.target['_eCB' + type + callback](e);
 122                         e.target['_eCB' + type + callback] = null;
 123                 };
 124                 obj.attachEvent('on' + type, ieCallback);
 125         } else {
 126                 obj.addEventListener(type, callback, mode);
 127         }
 128         return obj;
 129 }
 130
 131 function cbi_combobox(id, values, def, man) {
 132         var selid = "cbi.combobox." + id;
 133         if (document.getElementById(selid)) {
 134                 return
 135         }
 136
 137         var obj = document.getElementById(id)
 138         var sel = document.createElement("select");
 139         sel.id = selid;
 140         sel.className = 'cbi-input-select';
 141         if (obj.nextSibling) {
 142                 obj.parentNode.insertBefore(sel, obj.nextSibling);
 143         } else {
 144                 obj.parentNode.appendChild(sel);
 145         }
 146
 147         if (!values[obj.value]) {
 148                 if (obj.value == "") {
 149                         var optdef = document.createElement("option");
 150                         optdef.value = "";
 151                         optdef.appendChild(document.createTextNode(def));
 152                         sel.appendChild(optdef);
 153                 } else {
 154                         var opt = document.createElement("option");
 155                         opt.value = obj.value;
 156                         opt.selected = "selected";
 157                         opt.appendChild(document.createTextNode(obj.value));
 158                         sel.appendChild(opt);
 159                 }
 160         }
 161
 162         for (var i in values) {
 163                 var opt = document.createElement("option");
 164                 opt.value = i;
 165
 166                 if (obj.value == i) {
 167                         opt.selected = "selected";
 168                 }
 169
 170                 opt.appendChild(document.createTextNode(values[i]));
 171                 sel.appendChild(opt);
 172         }
 173
 174         var optman = document.createElement("option");
 175         optman.value = "";
 176         optman.appendChild(document.createTextNode(man));
 177         sel.appendChild(optman);
 178
 179         obj.style.display = "none";
 180
 181         cbi_bind(sel, "change", function() {
 182                 if (sel.selectedIndex == sel.options.length - 1) {
 183                         obj.style.display = "inline";
 184                         sel.parentNode.removeChild(sel);
 185                         obj.focus();
 186                 } else {
 187                         obj.value = sel.options[sel.selectedIndex].value;
 188                 }
 189
 190                 try {
 191                         cbi_d_update();
 192                 } catch (e) {
 193                         //Do nothing
 194                 }
 195         })
 196 }
 197
 198 function cbi_combobox_init(id, values, def, man) {
 199         var obj = document.getElementById(id);
 200         cbi_bind(obj, "blur", function() {
 201                 cbi_combobox(id, values, def, man)
 202         });
 203         cbi_combobox(id, values, def, man);
 204 }
 205
 206 function cbi_filebrowser(id, url, defpath) {
 207         var field   = document.getElementById(id);
 208         var browser = window.open(
 209                 url + ( field.value || defpath || '' ) + '?field=' + id,
 210                 "luci_filebrowser", "width=300,height=400,left=100,top=200,scrollbars=yes"
 211         );
 212
 213         browser.focus();
 214 }
 215
 216 //Hijacks the CBI form to send via XHR (requires Prototype)
 217 function cbi_hijack_forms(layer, win, fail, load) {
 218         var forms = layer.getElementsByTagName('form');
 219         for (var i=0; i<forms.length; i++) {
 220                 $(forms[i]).observe('submit', function(event) {
 221                         // Prevent the form from also submitting the regular way
 222                         event.stop();
 223
 224                         // Submit via XHR
 225                         event.element().request({
 226                                 onSuccess: win,
 227                                 onFailure: fail
 228                         });
 229
 230                         if (load) {
 231                                 load();
 232                         }
 233                 });
 234         }
 235 }
 236
 237
 238 function cbi_t_add(section, tab) {
 239         var t = document.getElementById('tab.' + section + '.' + tab);
 240         var c = document.getElementById('container.' + section + '.' + tab);
 241
 242         if( t && c ) {
 243                 cbi_t[section] = (cbi_t[section] || [ ]);
 244                 cbi_t[section][tab] = { 'tab': t, 'container': c, 'cid': c.id };
 245         }
 246 }
 247
 248 function cbi_t_switch(section, tab) {
 249         if( cbi_t[section] && cbi_t[section][tab] ) {
 250                 var o = cbi_t[section][tab];
 251                 var h = document.getElementById('tab.' + section);
 252                 for( var tid in cbi_t[section] ) {
 253                         var o2 = cbi_t[section][tid];
 254                         if( o.tab.id != o2.tab.id ) {
 255                                 o2.tab.className = o2.tab.className.replace(/(^| )cbi-tab( |$)/, " cbi-tab-disabled ");
 256                                 o2.container.style.display = 'none';
 257                         }
 258                         else {
 259                                 if(h) h.value = tab;
 260                                 o2.tab.className = o2.tab.className.replace(/(^| )cbi-tab-disabled( |$)/, " cbi-tab ");
 261                                 o2.container.style.display = 'block';
 262                         }
 263                 }
 264         }
 265         return false
 266 }
 267
 268 function cbi_t_update() {
 269         for( var sid in cbi_t )
 270                 for( var tid in cbi_t[sid] )
 271                         if( cbi_c[cbi_t[sid][tid].cid] == 0 ) {
 272                                 cbi_t[sid][tid].tab.style.display = 'none';
 273                         }
 274                         else if( cbi_t[sid][tid].tab && cbi_t[sid][tid].tab.style.display == 'none' ) {
 275                                 cbi_t[sid][tid].tab.style.display = '';
 276
 277                                 var t = cbi_t[sid][tid].tab;
 278                                 window.setTimeout(function() { t.className = t.className.replace(/ cbi-tab-highlighted/g, '') }, 750);
 279                                 cbi_t[sid][tid].tab.className += ' cbi-tab-highlighted';
 280                         }
 281 }
 282