0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

some autocomplete

Browse source
This commit is contained in:
Rolux 2010-07-02 14:33:45 +02:00
parent a62a18cb58
commit 3b7b3d8e64
2 changed files with 155 additions and 115 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
build/js/ox.ui.js
View file

@ -485,7 +485,6 @@ requires
//ret = true, //ret = true,
time; time;
$.each(modifierNames, function(k, v) { $.each(modifierNames, function(k, v) {
Ox.print(k, event[k])
if (event[k]) { if (event[k]) {
keys.push(v); keys.push(v);
} }
@ -715,6 +714,7 @@ requires
type: options.type, type: options.type,
url: options.url url: options.url
}); });
Ox.print("request", options.data);
Ox.length(requests) == 1 && Ox.Event.trigger("requestStart"); Ox.length(requests) == 1 && Ox.Event.trigger("requestStart");
} }
} }
@ -1759,11 +1759,11 @@ requires
}) })
.options(options || {}) .options(options || {})
.addClass("OxInput Ox" + Ox.toTitleCase(self.options.size)), .addClass("OxInput Ox" + Ox.toTitleCase(self.options.size)),
autocomplete; autocomplete; // fixme: should be self.autocomplete
if (self.options.label) { if (self.options.label) {
self.options.label = Ox.makeArray(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; self.items = self.options.label;
} else if (self.options.placeholder) { } else if (self.options.placeholder) {
self.options.placeholder = Ox.makeArray(self.options.placeholder); self.options.placeholder = Ox.makeArray(self.options.placeholder);
@ -1780,7 +1780,7 @@ requires
that.$label = new Ox.Element() that.$label = new Ox.Element()
.addClass("OxInputLabel") .addClass("OxInputLabel")
.width(self.options.labelWidth) .width(self.options.labelWidth)
.html(self.options.label[0]) .html(self.options.label[0].title)
.appendTo(that); .appendTo(that);
} }
if (self.options.label.length > 1 || self.options.placeholder.length > 1) { if (self.options.label.length > 1 || self.options.placeholder.length > 1) {
@ -1797,12 +1797,12 @@ requires
self.selectMenu = new Ox.Menu({ self.selectMenu = new Ox.Menu({
element: that, element: that,
id: self.selectId, id: self.selectId,
items: $.map(self.items, function(title, position) { items: $.map(self.items, function(item, position) {
return { return {
checked: position == self.options.selected, checked: position == self.options.selected,
id: title.toLowerCase(), id: item.id,
group: self.selectId, // fixme: same id, works here, but should be different group: self.selectId, // fixme: same id, works here, but should be different
title: title title: item.title
}; };
}), }),
offset: { offset: {
@ -1895,17 +1895,24 @@ requires
function call() { function call() {
var value = that.$input.val(); var value = that.$input.val();
Ox.print("autocomplete call", self.option, value)
if (self.options.autocomplete) { if (self.options.autocomplete) {
Ox.isFunction(self.options.autocomplete) ? ( if (value !== "") {
self.option ? Ox.isFunction(self.options.autocomplete) ? (
self.options.autocomplete(self.option, value, callback) : self.option ?
self.options.autocomplete(value, callback) self.options.autocomplete(self.option.id, value, callback) :
) : autocomplete(value, callback); self.options.autocomplete(value, callback)
) : autocomplete(value, callback);
} else {
callback();
}
} }
} }
function callback(items) { 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(); value = that.$input.val().toLowerCase();
if (items.length) { if (items.length) {
items = $.map(items, function(title, position) { items = $.map(items, function(title, position) {
@ -1935,9 +1942,15 @@ requires
} }
function change(event, data) { 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) { if (self.options.label) {
that.$label.html(self.option); that.$label.html(self.option.title);
that.$input.focus(); that.$input.focus();
call(); call();
} else { } else {
@ -1957,17 +1970,19 @@ requires
} }
function focus() { function focus() {
var value;
that.gainFocus(); that.gainFocus();
if (that.$input.is(".OxPlaceholder")) { if (that.$input.is(".OxPlaceholder")) {
that.$input.val("").removeClass("OxPlaceholder"); that.$input.val("").removeClass("OxPlaceholder");
} }
value = that.$input.val();
if (self.options.autocomplete) { if (self.options.autocomplete) {
// fixme: different in webkit and firefox (?), see keyboard handler, need generic function // fixme: different in webkit and firefox (?), see keyboard handler, need generic function
$document.bind("keydown", keypress); $document.bind("keydown", keypress);
$document.bind("keypress", keypress); $document.bind("keypress", keypress);
Ox.isFunction(self.options.autocomplete) ? value !== "" && Ox.isFunction(self.options.autocomplete) ?
self.options.autocomplete(that.$input.val(), callback) : self.options.autocomplete(self.option.id, value, callback) :
autocomplete(that.$input.val(), callback); autocomplete(value, callback);
} }
} }
@ -2006,6 +2021,7 @@ requires
} }
function submit() { function submit() {
Ox.print("input submit", that.$input.val())
that.$input.trigger("blur"); that.$input.trigger("blur");
that.triggerEvent("submit", that.$input.val()); that.triggerEvent("submit", that.$input.val());
} }
@ -2318,7 +2334,7 @@ requires
that.$button = new Ox.Button($.extend(self.options, { that.$button = new Ox.Button($.extend(self.options, {
id: self.buttonId, id: self.buttonId,
type: "text", // fixme: this shouldn't be necessary 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) .click(clickButton)
.appendTo(that); .appendTo(that);

216
demos/test/list.js
View file

@ -6,24 +6,30 @@ $(function() {
// requestURL: "http://blackbook.local:8000/api/" // requestURL: "http://blackbook.local:8000/api/"
requestURL: "http://lion.oil21.org:8000/api/" requestURL: "http://lion.oil21.org:8000/api/"
}), }),
findCondition = {},
groups = [ groups = [
{ {
conditions: [],
id: "director", id: "director",
title: "Director" title: "Director"
}, },
{ {
conditions: [],
id: "country", id: "country",
title: "Country" title: "Country"
}, },
{ {
conditions: [],
id: "year", id: "year",
title: "Year" title: "Year"
}, },
{ {
conditions: [],
id: "language", id: "language",
title: "Language" title: "Language"
}, },
{ {
conditions: [],
id: "genre", id: "genre",
title: "Genre" title: "Genre"
} }
@ -59,16 +65,7 @@ $(function() {
delete options.keys; delete options.keys;
app.request("find", $.extend(options, { app.request("find", $.extend(options, {
group: v.id, group: v.id,
query: { query: constructQuery()
conditions: [
{
key: "director",
value: "",
operator: ""
}
],
operator: ""
}
}), options.callback); }), options.callback);
}, },
sort: [ sort: [
@ -190,16 +187,7 @@ $(function() {
id: "list", id: "list",
request: function(options) { request: function(options) {
app.request("find", $.extend(options, { app.request("find", $.extend(options, {
query: { query: constructQuery()
conditions: [
{
key: "director",
value: "",
operator: ""
}
],
operator: ""
}
}), options.callback); }), options.callback);
}, },
sort: [ sort: [
@ -269,67 +257,59 @@ $(function() {
}).width(120).appendTo($toolBar); }).width(120).appendTo($toolBar);
$input = new Ox.Input({ $input = new Ox.Input({
autocomplete: { autocomplete: function(key, value, callback) {
"Find: All": [], Ox.print("autocomplete", key, value);
"Find: Title": [ value === "" && Ox.print("Warning: autocomplete function should never be called with empty value");
"A bout de souffle", if (key == "all") {
"Casino", callback();
"Diaries, Notes and Sketches", } else {
"L'age d'or", app.request("find", {
"Far From Heaven", keys: [key],
"In girum imus nocte et consumimur igni", query: {
"It Felt Like a Kiss", conditions: [
"Mulholland Dr.", {
"Querelle", key: key,
"Vertigo" value: value,
], operator: "~"
"Find: Director": [ }
"Luis Buñuel", ],
"Adam Curtis", operator: ""
"Guy Debord", },
"Rainer Werner Fassbinder", sort: [
"Jean-Luc Godard", {
"Todd Haynes", key: key,
"Alfred Hitchcock", operator: "+"
"David Lynch", }
"Jonas Mekas", ],
"Martin Scorsese" range: [0, 10]
], }, function(result) {
"Find: Country": [ callback($.map(result.data.items, function(v) {
"Austria", return v.title;
"Canada", }))
"France", });
"Germany", }
"Italy",
"Japan",
"Spain",
"Switzerland",
"UK",
"USA"
],
"Find: Cinematographer": []
}, },
clear: true, clear: true,
highlight: false, highlight: false,
id: "find", id: "find",
label: [ label: [
"Find: All", { id: "all", title: "Find: All" },
"Find: Title", { id: "title", title: "Find: Title" },
"Find: Director", { id: "director", title: "Find: Director" },
"Find: Country", { id: "country", title: "Find: Country" },
"Find: Year", { id: "year", title: "Find: Year" },
"Find: Language", { id: "language", title: "Find: Language" },
"Find: Writer", { id: "writer", title: "Find: Writer" },
"Find: Producer", { id: "producer", title: "Find: Producer" },
"Find: Cinematographer", { id: "cinematographer", title: "Find: Cinematographer" },
"Find: Editor", { id: "editor", title: "Find: Editor" },
"Find: Actor", { id: "actor", title: "Find: Actor" },
"Find: Character", { id: "character", title: "Find: Character" },
"Find: Name", { id: "name", title: "Find: Name" },
"Find: Genre", { id: "genre", title: "Find: Genre" },
"Find: Keyword", { id: "keyword", title: "Find: Keyword" },
"Find: Summary", { id: "summary", title: "Find: Summary" },
"Find: Dialog", { id: "dialog", title: "Find: Dialog" }
], ],
labelWidth: 85 labelWidth: 85
}).css({ }).css({
@ -414,6 +394,13 @@ $(function() {
] } ] }
] ]
}, },
{
id: "debug",
title: "Debug",
items: [
{ id: "show_query", title: "Show Query" }
]
}
], ],
size: "medium" size: "medium"
}), }),
@ -457,17 +444,16 @@ $(function() {
Ox.Event.bind(null, "select_group_" + group.id, function(event, data) { Ox.Event.bind(null, "select_group_" + group.id, function(event, data) {
$list.options({ $list.options({
request: function(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, { return app.request("find", $.extend(options, {
query: { query: constructQuery()
conditions: $.map(data.ids, function(v, j) {
return {
key: group.id,
value: v,
operator: "="
}
}),
operator: "|"
}
}), options.callback); }), options.callback);
} }
}); });
@ -478,16 +464,7 @@ $(function() {
delete options.keys; delete options.keys;
return app.request("find", $.extend(options, { return app.request("find", $.extend(options, {
group: group_.id, group: group_.id,
query: { query: constructQuery(group_.id)
conditions: $.map(data.ids, function(v, j) {
return {
key: group.id,
value: v,
operator: "="
}
}),
operator: "|"
}
}), options.callback); }), options.callback);
} }
}) })
@ -515,4 +492,51 @@ $(function() {
Ox.Event.bind(null, "sort_list", function(event, data) { Ox.Event.bind(null, "sort_list", function(event, data) {
}); });
Ox.Event.bind(null, "click_show_query", function(event, data) {
var query = constructQuery(),
html = "Conditions<br/><br/>" + $.map(query.conditions, function(v) {
return v.key + " " + v.operator + " " + v.value;
}).join("<br/>") + "<br/><br/>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;
}
}); });