Changeset 1369

Timestamp:

11/16/09 10:29:39 (10 months ago)

Author:

karel

Message:

Autocomplete kauri control

Location:

trunk

Files:

• modules/kauri-forms/kauri-forms-extra/src/main/kauri/static/autocomplete/js/autocomplete.js (modified) (1 diff)
• samples/kauri-forms-sample/src/main/kauri/pages/autocomplete-control.html.xml (modified) (3 diffs)

trunk/modules/kauri-forms/kauri-forms-extra/src/main/kauri/static/autocomplete/js/autocomplete.js

@@ -3 +3 @@
 (function($) {
 
-  //TODO: implement autocomplete control
+    if (!$)
+        throw "Kauri Forms AutocompleteControl requires jQuery";
+    if (!$.org.kauriproject.forms)
+        throw "Kauri Forms AutocompleteControl requires the kauri-form namespace";
 
-//    if (!$)
-//        throw "Kauri Forms DoubleSelectControl requires jQuery";
-//    if (!$.org.kauriproject.forms)
-//        throw "Kauri Forms DoubleSelectControl requires the kauri-form namespace";
-//
-//    var kp = $.org.kauriproject;
-//    var kf = $.org.kauriproject.forms;
-//
-//    kf.controlTypes.put("dblselect-control", DoubleSelectControl);
-//
-//    $.inherit(DoubleSelectControl, kf.Control);
-//
-//    function DoubleSelectControl(id, form, conf) {
-//        this['<super.init>'](id, form, conf);
-//
-//        this.availableOptions = {
-//            userValues: [],
-//            labels: []
-//        }
-//    }
-//
-//    DoubleSelectControl.prototype.elements = {};
-//    $.extend(DoubleSelectControl.prototype.elements, kf.Control.prototype.elements);
-//    $.extend(DoubleSelectControl.prototype.elements, {
-//        input : {
-//            /* Kauri Forms needs an input-role element, but we don't, therefore
-//               simply create a hidden div. */
-//            create : "<div style='display:none'/>"
-//        },
-//        available : {
-//            create : "<select size='5' multiple='multiple'/>"
-//        },
-//        selected : {
-//            create : "<select size='5' multiple='multiple'/>"
-//        },
-//        add : {
-//            create: "<button>></button>"
-//        },
-//        remove : {
-//            create: "<button>&lt;</button>"
-//        }
-//    });
-//
-//    DoubleSelectControl.prototype.initType = function(conf) {
-//        this["<super.call>"]("initType", [conf]);
-//        // Force the field type to being multivalue
-//        this.getType().multivalue = true;
-//    }
-//
-//    DoubleSelectControl.prototype.initElements = function(create) {
-//        $available = kf.ControlElements.lookup(this, "available", true);
-//        $add = kf.ControlElements.lookup(this, "add", true);
-//        $remove = kf.ControlElements.lookup(this, "remove", true);
-//        $selected = kf.ControlElements.lookup(this, "selected", true);
-//        $addAll = kf.ControlElements.lookup(this, "addAll", false);
-//        $removeAll = kf.ControlElements.lookup(this, "removeAll", false);
-//        $other = kf.ControlElements.lookup(this, "other", false);
-//        $addOther = kf.ControlElements.lookup(this, "addOther", false);
-//
-//        var me = this;
-//
-//        $add.click(function(event) {
-//            event.preventDefault();
-//            event.stopPropagation();
-//            me.handleAdd();
-//        });
-//
-//        $available.keypress(function(event) {
-//            // Ctrl + key right
-//            if (event.ctrlKey && event.keyCode == 39) {
-//                me.handleAdd();
-//            }
-//        });
-//
-//        $available.dblclick(function() {
-//            me.handleAdd();
-//        });
-//
-//        $remove.click(function(event) {
-//            event.preventDefault();
-//            event.stopPropagation();
-//            me.handleRemove();
-//        });
-//
-//        $selected.keypress(function(event) {
-//            // Ctrl + key left
-//            if (event.ctrlKey && event.keyCode == 37) {
-//                me.handleRemove();
-//            } else if (event.keyCode == 46) {
-//                // delete key
-//                me.handleRemove();
-//            }
-//        })
-//
-//        $selected.dblclick(function() {
-//            me.handleRemove();
-//        });
-//
-//        if ($addAll) {
-//            $addAll.click(function(event) {
-//                event.preventDefault();
-//                event.stopPropagation();
-//                me.handleAddAll();
-//            });
-//        }
-//
-//        if ($removeAll) {
-//            $removeAll.click(function(event) {
-//                event.preventDefault();
-//                event.stopPropagation();
-//                me.handleRemoveAll();
-//            });
-//        }
-//
-//        $available.change(function() {
-//            me.refreshButtonsState();
-//        });
-//
-//        $selected.change(function() {
-//            me.refreshButtonsState();
-//        });
-//
-//        if ($other && $addOther) {
-//            $addOther.click(function(event) {
-//                event.preventDefault();
-//                event.stopPropagation();
-//                me.handleAddOther();
-//            });
-//
-//            $other.keypress(function(event) {
-//                if (event.keyCode == 13) {
-//                    event.preventDefault();
-//                    event.stopPropagation();
-//                    me.handleAddOther();
-//                }
-//            })
-//
-//            $other.keyup(function(event) {
-//                me.refreshAddOtherButtonState();
-//            });
-//        }
-//
-//        this.valueChanged(function() {
+    var kp = $.org.kauriproject;
+    var kf = $.org.kauriproject.forms;
+
+    kf.controlTypes.put("autocomplete-control", AutocompleteControl);
+
+    $.inherit(AutocompleteControl, kf.Control);
+
+    function AutocompleteControl(id, form, conf) {
+        this['<super.init>'](id, form, conf);
+        
+        this.availableOptions = {
+            userValues: [],
+            labels: []
+        }
+    }
+
+    AutocompleteControl.prototype.elements = {};
+    $.extend(AutocompleteControl.prototype.elements, kf.Control.prototype.elements);
+    $.extend(AutocompleteControl.prototype.elements, {
+        input : {
+            /* Kauri Forms needs an input-role element, but we don't, therefore
+               simply create a hidden div. */
+            create : "<div style='display:none'/>"
+        },
+        acinput : {
+            create : "<input type='text'/>"
+        }
+    });
+
+    AutocompleteControl.prototype.initType = function(conf) {
+        this["<super.call>"]("initType", [conf]);
+        
+    }
+
+    AutocompleteControl.prototype.initElements = function(create) {
+        $acinput = kf.ControlElements.lookup(this, "acinput", true);
+
+        var me = this;
+        
+        var inputTemplate = new kp.UriTemplate("{email}");
+        var listTemplate  = new kp.UriTemplate("{id} - {email})");
+        var valueTemplate = new kp.UriTemplate("{id}");
+        
+        $acinput.autocomplete(this.options.dataUri, {
+          dataType: "json", 
+          parse: function(data) {
+            var parsed = [];
+            for (var i=0;i<data.length;i++) {
+              parsed.push({ data: data[i], value: valueTemplate.expand(data[i], true), result: inputTemplate.expand(data[i], true)});
+            }
+            return parsed;
+          },
+          formatItem: function(data, current, last) {
+            return listTemplate.expand(data, true);
+          }
+        }).bind("result", function(event, objData, valueData) {
+          alert('You selected ' + valueData);
+        });
+        
+        this.valueChanged(function() {
 //            me.refreshSelectedSelect();
-//            me.refreshAvailableSelect();
-//            me.refreshButtonsState();
-//        });
-//
+        });
+
 //        this.refreshAvailableSelect();
-//        this.refreshButtonsState();
-//        this.refreshAddOtherButtonState();
-//    }
-//
-//    DoubleSelectControl.prototype.getUserValue = function() {
-//        // Not needed, should never be called
-//    }
-//
-//    DoubleSelectControl.prototype.setUserValue = function(value) {
-//        // Not needed, should never be called
-//    }
-//
-//    DoubleSelectControl.prototype.getUpdateElement = function() {
-//        // There is no 'change' event to react to
-//        return undefined;
-//    }
-//
-//    DoubleSelectControl.prototype.updateOptions = function(userValues, labels) {
-//        // This callback might be called before initElements() is complete, therefore
-//        // the check if the 'available' binding does already exist.
-//        var $available = this.getElement("available");
-//        if ($available) {
-//            this.refreshAvailableSelect();
-//            this.refreshSelectedSelect();
-//            this.refreshButtonsState();
-//        }
-//    }
-//
-//    DoubleSelectControl.prototype.refreshButtonsState = function() {
-//        var $available = this.getElement("available");
-//        var $selected = this.getElement("selected");
-//
-//        var buttons = [
-//            {role: "add", enabled: $available.val() !== null},
-//            {role: "addAll", enabled: $available[0].options.length > 0},
-//            {role: "remove", enabled: $selected.val() !== null},
-//            {role: "removeAll", enabled: $selected[0].options.length > 0}
-//        ]
-//
-//        for (var i = 0; i < buttons.length; i++) {
-//            var $el = this.getElement(buttons[i].role);
-//            if ($el) {
-//                $el.attr("disabled", !buttons[i].enabled);
-//            }
-//        }
-//    }
-//
-//    DoubleSelectControl.prototype.refreshAddOtherButtonState = function() {
-//        var $other = this.getElement("other");
-//        var $addOther = this.getElement("addOther");
-//
-//        if ($other && $addOther) {
-//            $addOther.attr('disabled', $.isEmpty($other.val()));
-//        }
-//    }
-//
-//    DoubleSelectControl.prototype.refreshAvailableSelect = function() {
-//        var options = this.options || {};
-//        var values = options.values || [];
-//        var userValues = options.userValues || [];
-//        var labels = options.labels || userValues;
-//
-//        var $available = this.getElement("available");
-//        var availableSelect = $available[0];
-//
-//        var selectOptions = availableSelect.options;
-//        var prevSelectedIndex = selectOptions.selectedIndex;
-//        selectOptions.length = 0;
-//
-//        var controlValue = this.getValue();
-//
-//        var last = values.length;
-//        for (var i = 0; i < last; i++) {
-//            var isSelectedValue = false;
-//            if (controlValue) {
-//                // TODO make this more efficient?
-//                for (var j = 0; j < controlValue.length; j++) {
-//                    if ($.valueCompare(values[i], controlValue[j])) {
-//                        isSelectedValue = true;
-//                        break;
-//                    }
-//                }
-//            }
-//
-//            if (!isSelectedValue) {
-//                availableSelect.options[availableSelect.options.length] = new Option(labels[i], userValues[i])
-//            }
-//        }
-//
-//        if (prevSelectedIndex >= 0) {
-//            prevSelectedIndex = prevSelectedIndex >= selectOptions.length ? selectOptions.length - 1 : prevSelectedIndex;
-//            availableSelect.options.selectedIndex = prevSelectedIndex;
-//        }
-//    }
-//
-//    DoubleSelectControl.prototype.refreshSelectedSelect = function() {
-//        var $selected = this.getElement("selected");
-//        var selectedSelect = $selected[0];
-//
-//        var selectOptions = selectedSelect.options;
-//        var prevSelectedIndex = selectOptions.selectedIndex;
-//        selectOptions.length = 0;
-//
-//        var values = this.getValue();
-//        if (!values)
-//            return;
-//
-//        for (var i = 0; i < values.length; i++) {
-//            var userValue = this.getType().toUserValue(values[i]);
-//            var label = this.getLabel(userValue);
-//            selectedSelect.options[selectedSelect.options.length] = new Option(label, userValue);
-//        }
-//
-//        if (prevSelectedIndex >= 0) {
-//            prevSelectedIndex = prevSelectedIndex >= selectOptions.length ? selectOptions.length - 1 : prevSelectedIndex;
-//            selectedSelect.options.selectedIndex = prevSelectedIndex;
-//        }
-//    }
-//
-//    DoubleSelectControl.prototype.getLabel = function(userValue) {
-//        var options = this.options || {};
-//        var userValues = options.userValues || [];
-//        var labels = options.labels;
-//
-//        if (!labels) {
-//            return userValue;
-//        }
-//
-//        // TODO maybe we need hash-based lookup for performance?
-//        for (var i = 0; i < userValues.length; i++) {
-//            if ($.valueCompare(userValues[i], userValue)) {
-//                var label = labels[i];
-//                return label || userValue;
-//            }
-//        }
-//
-//        return userValue;
-//    }
-//
-//    /**
-//     * Adds the value entered into the 'other' input to the list
-//     * of selected values.
-//     */
-//    DoubleSelectControl.prototype.handleAddOther = function() {
-//        var value = this.getValue();
-//        var $other = this.getElement("other");
-//        var other = $other.val();
-//
-//        if ($.isEmpty(other)) {
-//            return;
-//        }
-//
-//        try {
-//            other = this.getType().parseUserValue(other);
-//        } catch (e) {
-//            var text = $.isFunction(e.getText) ? e.getText() : "Formatting error " + e;
-//            alert(text);
-//            return;
-//        }
-//
-//        if (!value) {
-//            value = [];
-//        }
-//
-//        // Check that the value is not already among the selected values.
-//        for (var i = 0; i < value.length; i++) {
-//            if ($.valueCompare(value[i], other)) {
-//                // TODO i18n
-//                alert("This value is already in the list");
-//                return;
-//            }
-//        }
-//
-//        this.setValue([].concat(value, other));
-//        $other.val("");
-//        this.refreshAddOtherButtonState();
-//    }
-//
-//    DoubleSelectControl.prototype.handleAdd = function() {
-//        var $available = this.getElement("available");
-//
-//        var selectedValues = [];
-//        var options = $available[0].options;
-//        for (var i = 0; i < options.length; i++) {
-//            if (options[i].selected) {
-//                selectedValues.push(this.getType().parseUserValue(options[i].value));
-//            }
-//        }
-//
-//        var values = this.getValue();
-//        if (!values) {
-//            values = selectedValues;
-//        } else {
-//            values = values.concat(selectedValues);
-//        }
-//
-//        this.setValue(values);
-//    }
-//
-//    DoubleSelectControl.prototype.handleAddAll = function() {
-//        // Note that we don't simply set the value to the complete list of option
-//        // values, as to avoid that any custom-entered values would be lost
-//
-//        var $available = this.getElement("available");
-//
-//        var selectedValues = [];
-//        var options = $available[0].options;
-//        for (var i = 0; i < options.length; i++) {
-//            selectedValues.push(this.getType().parseUserValue(options[i].value));
-//        }
-//
-//        var values = this.getValue();
-//        if (!values) {
-//            values = selectedValues;
-//        } else {
-//            values = [].concat(values, selectedValues);
-//        }
-//
-//        this.setValue(values);
-//    }
-//
-//    DoubleSelectControl.prototype.handleRemove = function() {
-//        var $selected = this.getElement("selected");
-//
-//        var values = this.getValue();
-//        if (!values) {
-//            // nothing useful can have happened
-//            return;
-//        }
-//
-//        // make sure we don't modify the original array
-//        values = [].concat(values);
-//
-//        var options = $selected[0].options;
-//        for (var i = options.length - 1; i >= 0; i--) {
-//            if (options[i].selected) {
-//                values.splice(i, 1)
-//            }
-//        }
-//
-//        this.setValue(values);
-//    }
-//
-//    DoubleSelectControl.prototype.handleRemoveAll = function() {
-//        this.setValue(undefined);
-//    }
-//
-//    DoubleSelectControl.prototype.setValue = function(value) {
-//        if (value && value.constructor == Array) {
-//            // TODO this sort is always alphabetically, let the field type provide an order function?
-//            // TODO consider sorting on the labels (if any) rather than the value?
-//            value.sort()
-//        }
-//        this["<super.call>"]("setValue", [value]);
-//    }
+    }
+
+    AutocompleteControl.prototype.getUserValue = function() {
+        // Not needed, should never be called
+    }
+
+    AutocompleteControl.prototype.setUserValue = function(value) {
+        // Not needed, should never be called
+    }
+
+    AutocompleteControl.prototype.getUpdateElement = function() {
+        // There is no 'change' event to react to
+        return undefined;
+    }
+
+    AutocompleteControl.prototype.setValue = function(value) {
+        // FIXME: implement?
+        this["<super.call>"]("setValue", [value]);
+    }
 
 })(jQuery);

trunk/samples/kauri-forms-sample/src/main/kauri/pages/autocomplete-control.html.xml

@@ -17 +17 @@
                   "label": "Select a contact",
                   "control": {
-                      "base": "selection-control",
+                      "base": "autocomplete-control",
                       "options": {
-                          "uri": "${publicUri('service:/data/contact/')}",
+                          "dataUri": "${publicUri('service:/data/contact/')}",
                           "valueTemplate": "{id}",
                           "labelTemplate": "{name}",
-                          "nullable": true,
-                          "null-text": "--- please select ---"
+                          "nullable": true
                       }
                   }
@@ -41 +40 @@
         <h2>Autocomplete control</h2>
 
-        <dl>
-          <dt><label kauri-idref="contact" kauri-role="label"/></dt>
-          <dd><select kauri-idref="contact"/></dd>
+        <dl kauri-idref="contact">
+          <dt><label kauri-role="label"/></dt>
+          <dd><input type="text" kauri-role="acinput"/></dd>
         </dl>
 
       </fieldset>
     </form>
-    
+
+<!--     
     <h3>jquery (no control)</h3>
     
@@ -74 +74 @@
       }).bind("result", function(event, objData, valueData) {
         alert('You selected ' + valueData);
-      });;
+      });
     });
     </script>
+ -->
   </t:block>