Changeset 8106

Timestamp:

12/19/11 19:55:59 (17 months ago)

Author:

jow

Message:

libs/web: rework DynamicList? widget to support dynamic lists composed of comboboxes

Location:

luci/trunk/libs/web

Files:

• htdocs/luci-static/resources/cbi.js (modified) (5 diffs)
• luasrc/view/cbi/dynlist.htm (modified) (1 diff)

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

@@ -495 +495 @@
 }
 
-function cbi_dynlist_init(name, respath)
+function cbi_dynlist_init(name, respath, datatype, optional, choices)
 {
-    function cbi_dynlist_renumber(e)
-    {
-        /* in a perfect world, we could just getElementsByName() - but not if
-         * MSIE is involved... */
-        var inputs = [ ]; // = document.getElementsByName(name);
-        for (var i = 0; i < e.parentNode.childNodes.length; i++)
-            if (e.parentNode.childNodes[i].name == name)
-                inputs.push(e.parentNode.childNodes[i]);
-
-        for (var i = 0; i < inputs.length; i++)
-        {
-            inputs[i].id = name + '.' + (i + 1);
-            inputs[i].nextSibling.src = respath + (
-                (i+1) < inputs.length ? '/cbi/remove.gif' : '/cbi/add.gif'
-            );
-        }
-
-        e.focus();
+    var input0 = document.getElementsByName(name)[0];
+    var prefix = input0.name;
+    var parent = input0.parentNode;
+
+    var values;
+
+    function cbi_dynlist_redraw(focus, add, del)
+    {
+        values = [ ];
+
+        while (parent.firstChild)
+        {
+            var n = parent.firstChild;
+            var i = parseInt(n.index);
+
+            if (i != del)
+            {
+                if (n.nodeName.toLowerCase() == 'input')
+                    values.push(n.value || '');
+                else if (n.nodeName.toLowerCase() == 'select')
+                    values[values.length-1] = n.options[n.selectedIndex].value;
+            }
+
+            parent.removeChild(n);
+        }
+
+        if (add >= 0)
+        {
+            focus = add+1;
+            values.splice(focus, 0, '');
+        }
+        else if (values.length == 0)
+        {
+            focus = 0;
+            values.push('');
+        }
+
+        for (var i = 0; i < values.length; i++)
+        {
+            var t = document.createElement('input');
+                t.id = prefix + '.' + (i+1);
+                t.name = prefix;
+                t.value = values[i];
+                t.type = 'text';
+                t.index = i;
+                t.className = 'cbi-input-text';
+
+            var b = document.createElement('img');
+                b.src = respath + ((i+1) < values.length ? '/cbi/remove.gif' : '/cbi/add.gif');
+                b.className = 'cbi-image-button';
+
+            parent.appendChild(t);
+            parent.appendChild(b);
+            parent.appendChild(document.createElement('br'));
+
+            if (datatype)
+            {
+                cbi_validate_field(t.id, ((i+1) == values.length) || optional, datatype);
+            }
+
+            if (choices)
+            {
+                cbi_combobox_init(t.id, choices[0], '', choices[1]);
+                t.nextSibling.index = i;
+
+                cbi_bind(t.nextSibling, 'keydown',  cbi_dynlist_keydown);
+                cbi_bind(t.nextSibling, 'keypress', cbi_dynlist_keypress);
+
+                if (i == focus || -i == focus)
+                    t.nextSibling.focus();
+            }
+            else
+            {
+                cbi_bind(t, 'keydown',  cbi_dynlist_keydown);
+                cbi_bind(t, 'keypress', cbi_dynlist_keypress);
+
+                if (i == focus)
+                {
+                    t.focus();
+                }
+                else if (-i == focus)
+                {
+                    t.focus();
+
+                    /* force cursor to end */
+                    var v = t.value;
+                    t.value = ' '
+                    t.value = v;
+                }
+            }
+
+            cbi_bind(b, 'click', cbi_dynlist_btnclick);
+        }
     }
 
@@ -571 +646 @@
             next = next.nextSibling;
 
+        /* advance one further in combobox case */
+        if (next && next.nextSibling.name == name)
+            next = next.nextSibling;
+
         switch (ev.keyCode)
         {
@@ -576 +655 @@
             case 8:
             case 46:
-                var jump = (ev.keyCode == 8)
-                    ? (prev || next) : (next || prev);
-
-                if (se.value.length == 0 && jump)
+                var del = (se.nodeName.toLowerCase() == 'select')
+                    ? true : (se.value.length == 0);
+
+                if (del)
                 {
-                    se.parentNode.removeChild(se.nextSibling.nextSibling);
-                    se.parentNode.removeChild(se.nextSibling);
-                    se.parentNode.removeChild(se);
-
-                    cbi_dynlist_renumber(jump);
-
                     if (ev.preventDefault)
                         ev.preventDefault();
 
-                    /* IE Quirk, needs double focus somehow */
-                    jump.focus();
+                    var focus = se.index;
+                    if (ev.keyCode == 8)
+                        focus = -focus+1;
+
+                    cbi_dynlist_redraw(focus, -1, se.index);
 
                     return false;
@@ -600 +676 @@
             /* enter */
             case 13:
-                var n = document.createElement('input');
-                    n.name       = se.name;
-                    n.type       = se.type;
-
-                var b = document.createElement('img');
-
-                cbi_bind(n, 'keydown',  cbi_dynlist_keydown);
-                cbi_bind(n, 'keypress', cbi_dynlist_keypress);
-                cbi_bind(b, 'click',    cbi_dynlist_btnclick);
-
-                if (next)
-                {
-                    se.parentNode.insertBefore(n, next);
-                    se.parentNode.insertBefore(b, next);
-                    se.parentNode.insertBefore(document.createElement('br'), next);
-                }
-                else
-                {
-                    se.parentNode.appendChild(n);
-                    se.parentNode.appendChild(b);
-                    se.parentNode.appendChild(document.createElement('br'));
-                }
-
-                var dt = se.getAttribute('cbi_datatype');
-                var op = se.getAttribute('cbi_optional') == 'true';
-
-                if (dt)
-                    cbi_validate_field(n, op, dt);
-
-                cbi_dynlist_renumber(n);
+                cbi_dynlist_redraw(-1, se.index, -1);
                 break;
 
@@ -676 +723 @@
     }
 
-    var inputs = document.getElementsByName(name);
-    for( var i = 0; i < inputs.length; i++ )
-    {
-        var btn = document.createElement('img');
-            btn.className = 'cbi-image-button';
-            btn.src = respath + (
-                (i+1) < inputs.length ? '/cbi/remove.gif' : '/cbi/add.gif'
-            );
-
-        inputs[i].parentNode.insertBefore(btn, inputs[i].nextSibling);
-
-        cbi_bind(inputs[i], 'keydown',  cbi_dynlist_keydown);
-        cbi_bind(inputs[i], 'keypress', cbi_dynlist_keypress);
-        cbi_bind(btn,       'click',    cbi_dynlist_btnclick);
-    }
+    cbi_dynlist_redraw(0, -1, -1);
 }
 

luci/trunk/libs/web/luasrc/view/cbi/dynlist.htm

@@ -14 +14 @@
 </div>
 <script type="text/javascript">
-cbi_dynlist_init('<%=cbid%>', '<%=resource%>');
-<% if self.datatype then -%>
-    <% if #self.keylist > 0 then -%>
-        cbi_combobox_init('<%=cbid .. "." .. i%>', {
+cbi_dynlist_init(
+    '<%=cbid%>', '<%=resource%>', '<%=self.datatype%>',
+    <%=tostring(self.optional or self.rmempty)%>
+    <%- if #self.keylist > 0 then -%>, [{
         <%- for i, k in ipairs(self.keylist) do -%>
             <%-=string.format("%q", k) .. ":" .. string.format("%q", self.vallist[i])-%>
             <%-if i<#self.keylist then-%>,<%-end-%>
         <%- end -%>
-        }, '<%- if not self.rmempty and not self.optional then -%>
-            <%-: -- Please choose -- -%>
-        <%- end -%>', '<%: -- custom -- %>');
-    <% end -%>
-    <% for i=1, #vals + 1 do -%>
-    cbi_validate_field('<%=cbid%>.<%=i%>', <%=tostring((self.optional or self.rmempty) == true or i > #vals)%>, '<%=self.datatype%>');
-    <%- end %>
-<% end -%>
+    }, '<%: -- custom -- %>']<% end -%>);
 </script>
 <%+cbi/valuefooter%>