From 0b6a81d793f72b3c8ee9bc3279863b826613693c Mon Sep 17 00:00:00 2001 From: Rolux Date: Fri, 2 Jul 2010 14:33:45 +0200 Subject: [PATCH] some autocomplete --- build/js/ox.ui.js | 54 ++++++++---- demos/test/list.js | 216 +++++++++++++++++++++++++-------------------- 2 files changed, 155 insertions(+), 115 deletions(-) diff --git a/build/js/ox.ui.js b/build/js/ox.ui.js index 3ce181e..e500ff7 100644 --- a/build/js/ox.ui.js +++ b/build/js/ox.ui.js @@ -485,7 +485,6 @@ requires //ret = true, time; $.each(modifierNames, function(k, v) { - Ox.print(k, event[k]) if (event[k]) { keys.push(v); } @@ -715,6 +714,7 @@ requires type: options.type, url: options.url }); + Ox.print("request", options.data); Ox.length(requests) == 1 && Ox.Event.trigger("requestStart"); } } @@ -1759,11 +1759,11 @@ requires }) .options(options || {}) .addClass("OxInput Ox" + Ox.toTitleCase(self.options.size)), - autocomplete; + autocomplete; // fixme: should be self.autocomplete if (self.options.label) { self.options.label = Ox.makeArray(self.options.label); - self.option = self.options.label[self.options.selected]; + self.option = self.options.label[self.options.selected]; // fixme: id or title? or not use this at all? self.items = self.options.label; } else if (self.options.placeholder) { self.options.placeholder = Ox.makeArray(self.options.placeholder); @@ -1780,7 +1780,7 @@ requires that.$label = new Ox.Element() .addClass("OxInputLabel") .width(self.options.labelWidth) - .html(self.options.label[0]) + .html(self.options.label[0].title) .appendTo(that); } if (self.options.label.length > 1 || self.options.placeholder.length > 1) { @@ -1797,12 +1797,12 @@ requires self.selectMenu = new Ox.Menu({ element: that, id: self.selectId, - items: $.map(self.items, function(title, position) { + items: $.map(self.items, function(item, position) { return { checked: position == self.options.selected, - id: title.toLowerCase(), + id: item.id, group: self.selectId, // fixme: same id, works here, but should be different - title: title + title: item.title }; }), offset: { @@ -1895,17 +1895,24 @@ requires function call() { var value = that.$input.val(); + Ox.print("autocomplete call", self.option, value) if (self.options.autocomplete) { - Ox.isFunction(self.options.autocomplete) ? ( - self.option ? - self.options.autocomplete(self.option, value, callback) : - self.options.autocomplete(value, callback) - ) : autocomplete(value, callback); + if (value !== "") { + Ox.isFunction(self.options.autocomplete) ? ( + self.option ? + self.options.autocomplete(self.option.id, value, callback) : + self.options.autocomplete(value, callback) + ) : autocomplete(value, callback); + } else { + callback(); + } } } function callback(items) { - var selected = items.length == 1 ? 0 : -1, + Ox.print("autocomplete callback", items) + var items = items || [], + selected = items.length == 1 ? 0 : -1, value = that.$input.val().toLowerCase(); if (items.length) { items = $.map(items, function(title, position) { @@ -1935,9 +1942,15 @@ requires } function change(event, data) { - self.option = data.value; // fixme: could be "title" as well + Ox.print("input change", event, data) + if (data) { + self.option = { + id: data.id, + title: data.value // fixme: should be data.title + }; + } if (self.options.label) { - that.$label.html(self.option); + that.$label.html(self.option.title); that.$input.focus(); call(); } else { @@ -1957,17 +1970,19 @@ requires } function focus() { + var value; that.gainFocus(); if (that.$input.is(".OxPlaceholder")) { that.$input.val("").removeClass("OxPlaceholder"); } + value = that.$input.val(); if (self.options.autocomplete) { // fixme: different in webkit and firefox (?), see keyboard handler, need generic function $document.bind("keydown", keypress); $document.bind("keypress", keypress); - Ox.isFunction(self.options.autocomplete) ? - self.options.autocomplete(that.$input.val(), callback) : - autocomplete(that.$input.val(), callback); + value !== "" && Ox.isFunction(self.options.autocomplete) ? + self.options.autocomplete(self.option.id, value, callback) : + autocomplete(value, callback); } } @@ -2006,6 +2021,7 @@ requires } function submit() { + Ox.print("input submit", that.$input.val()) that.$input.trigger("blur"); that.triggerEvent("submit", that.$input.val()); } @@ -2318,7 +2334,7 @@ requires that.$button = new Ox.Button($.extend(self.options, { id: self.buttonId, type: "text", // fixme: this shouldn't be necessary - value: self.options.items[self.selected].title + value: self.options.items[self.selected].title // fixme: title instead of value? }), {}) .click(clickButton) .appendTo(that); diff --git a/demos/test/list.js b/demos/test/list.js index 634a174..b8b1246 100644 --- a/demos/test/list.js +++ b/demos/test/list.js @@ -6,24 +6,30 @@ $(function() { // requestURL: "http://blackbook.local:8000/api/" requestURL: "http://lion.oil21.org:8000/api/" }), + findCondition = {}, groups = [ { + conditions: [], id: "director", title: "Director" }, { + conditions: [], id: "country", title: "Country" }, { + conditions: [], id: "year", title: "Year" }, { + conditions: [], id: "language", title: "Language" }, { + conditions: [], id: "genre", title: "Genre" } @@ -59,16 +65,7 @@ $(function() { delete options.keys; app.request("find", $.extend(options, { group: v.id, - query: { - conditions: [ - { - key: "director", - value: "", - operator: "" - } - ], - operator: "" - } + query: constructQuery() }), options.callback); }, sort: [ @@ -190,16 +187,7 @@ $(function() { id: "list", request: function(options) { app.request("find", $.extend(options, { - query: { - conditions: [ - { - key: "director", - value: "", - operator: "" - } - ], - operator: "" - } + query: constructQuery() }), options.callback); }, sort: [ @@ -269,67 +257,59 @@ $(function() { }).width(120).appendTo($toolBar); $input = new Ox.Input({ - autocomplete: { - "Find: All": [], - "Find: Title": [ - "A bout de souffle", - "Casino", - "Diaries, Notes and Sketches", - "L'age d'or", - "Far From Heaven", - "In girum imus nocte et consumimur igni", - "It Felt Like a Kiss", - "Mulholland Dr.", - "Querelle", - "Vertigo" - ], - "Find: Director": [ - "Luis Buñuel", - "Adam Curtis", - "Guy Debord", - "Rainer Werner Fassbinder", - "Jean-Luc Godard", - "Todd Haynes", - "Alfred Hitchcock", - "David Lynch", - "Jonas Mekas", - "Martin Scorsese" - ], - "Find: Country": [ - "Austria", - "Canada", - "France", - "Germany", - "Italy", - "Japan", - "Spain", - "Switzerland", - "UK", - "USA" - ], - "Find: Cinematographer": [] + autocomplete: function(key, value, callback) { + Ox.print("autocomplete", key, value); + value === "" && Ox.print("Warning: autocomplete function should never be called with empty value"); + if (key == "all") { + callback(); + } else { + app.request("find", { + keys: [key], + query: { + conditions: [ + { + key: key, + value: value, + operator: "~" + } + ], + operator: "" + }, + sort: [ + { + key: key, + operator: "+" + } + ], + range: [0, 10] + }, function(result) { + callback($.map(result.data.items, function(v) { + return v.title; + })) + }); + } }, clear: true, highlight: false, id: "find", label: [ - "Find: All", - "Find: Title", - "Find: Director", - "Find: Country", - "Find: Year", - "Find: Language", - "Find: Writer", - "Find: Producer", - "Find: Cinematographer", - "Find: Editor", - "Find: Actor", - "Find: Character", - "Find: Name", - "Find: Genre", - "Find: Keyword", - "Find: Summary", - "Find: Dialog", + { id: "all", title: "Find: All" }, + { id: "title", title: "Find: Title" }, + { id: "director", title: "Find: Director" }, + { id: "country", title: "Find: Country" }, + { id: "year", title: "Find: Year" }, + { id: "language", title: "Find: Language" }, + { id: "writer", title: "Find: Writer" }, + { id: "producer", title: "Find: Producer" }, + { id: "cinematographer", title: "Find: Cinematographer" }, + { id: "editor", title: "Find: Editor" }, + { id: "actor", title: "Find: Actor" }, + { id: "character", title: "Find: Character" }, + { id: "name", title: "Find: Name" }, + { id: "genre", title: "Find: Genre" }, + { id: "keyword", title: "Find: Keyword" }, + { id: "summary", title: "Find: Summary" }, + { id: "dialog", title: "Find: Dialog" } ], labelWidth: 85 }).css({ @@ -414,6 +394,13 @@ $(function() { ] } ] }, + { + id: "debug", + title: "Debug", + items: [ + { id: "show_query", title: "Show Query" } + ] + } ], size: "medium" }), @@ -457,17 +444,16 @@ $(function() { Ox.Event.bind(null, "select_group_" + group.id, function(event, data) { $list.options({ request: function(options) { + groups[i].conditions = $.map(data.ids, function(v) { + return { + key: group.id, + value: v, + operator: "=" + }; + }); + Ox.print return app.request("find", $.extend(options, { - query: { - conditions: $.map(data.ids, function(v, j) { - return { - key: group.id, - value: v, - operator: "=" - } - }), - operator: "|" - } + query: constructQuery() }), options.callback); } }); @@ -478,16 +464,7 @@ $(function() { delete options.keys; return app.request("find", $.extend(options, { group: group_.id, - query: { - conditions: $.map(data.ids, function(v, j) { - return { - key: group.id, - value: v, - operator: "=" - } - }), - operator: "|" - } + query: constructQuery(group_.id) }), options.callback); } }) @@ -515,4 +492,51 @@ $(function() { Ox.Event.bind(null, "sort_list", function(event, data) { }); + + Ox.Event.bind(null, "click_show_query", function(event, data) { + var query = constructQuery(), + html = "Conditions

" + $.map(query.conditions, function(v) { + return v.key + " " + v.operator + " " + v.value; + }).join("
") + "

Operator: " + query.operator, + $dialog = new Ox.Dialog({ + title: "Show Query", + buttons: [ + { + value: "Close", + click: function() { + $dialog.close(); + } + } + ] + }) + .append(html) + .open(); + }); + + function constructQuery(groupId) { + var conditions = $.merge(!Ox.isUndefined(findCondition.query) ? [findCondition] : [], $.map(groups, function(v, i) { + if (v.id != groupId) { + return v.conditions; + } + })); + /* + Ox.print("conditions", conditions, "groups conditions", $.map(groups, function(v) { + return v.conditions; + })); + */ + return { + conditions: conditions, + operator: conditions.length ? "," : "" + }; + } + + function getGroupById(id) { // unused + $.each(groups, function(i, v) { + if (v.id == id) { + return i; + } + }); + return -1; + } + });