some autocomplete
This commit is contained in:
Rolux
parent
a62a18cb58
commit
3b7b3d8e64
2 changed files with 155 additions and 115 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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<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;
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue