adding preview dialog for list items

This commit is contained in:
rolux 2010-07-20 22:03:47 +02:00
parent f7bc932cdd
commit 7280cc7c6d

View file

@ -110,10 +110,13 @@ $(function() {
userSettings: {
group: "guest",
ui: {
columns: ["id", "title", "director", "country", "year", "language", "runtime", "genre"],
find: { conditions: [{ key: "", value: "", operator: "" }], operator: "" },
columns: ["id", "title", "director", "country", "year", "language", "runtime", "genre", "releasedate"],
// find: { conditions: [{ key: "", value: "", operator: "" }], operator: "" },
findQuery: { conditions: [], operator: "" },
groupsQuery: { conditions: [], operator: "|" },
groupsSize: 128,
itemView: "info",
listQuery: { conditions: [], operator: "" },
listsSize: 192,
listView: "list",
sections: ["history", "lists", "public", "featured"],
@ -144,13 +147,13 @@ $(function() {
function constructFind(query) {
Ox.print("cF", query)
return $.map(query.conditions, function(v, i) {
return /*encodeURI(*/$.map(query.conditions, function(v, i) {
if (!Ox.isUndefined(v.conditions)) {
return "[" + constructFind(v) + "]";
} else {
return v.value !== "" ? v.key + (v.key ? ":" : "") + constructValue(v.value, v.operator) : null;
}
}).join(query.operator);
}).join(query.operator)/*)*/;
}
function constructValue(value, operator) {
@ -201,7 +204,7 @@ $(function() {
function parseValue(str) {
var value = {
value: str,
value: decodeURI(str),
operator: ""
};
if (value.value[0] == "!") {
@ -226,8 +229,8 @@ $(function() {
var query = Ox.unserialize(str),
sort = [];
if ("find" in query) {
user.ui.find = parseFind(query.find);
Ox.print("user.ui.find", user.ui.find)
user.ui.findQuery = parseFind(query.find);
Ox.print("user.ui.findQuery", user.ui.findQuery)
}
if ("sort" in query) {
sort = query.sort.split(",")
@ -247,17 +250,16 @@ $(function() {
},
toObject: function(groupId) {
Ox.print("tO", user.ui.find.conditions)
Ox.print("tO", user.ui.findQuery.conditions)
// the inner $.merge() creates a clone
var conditions = $.merge($.merge([], user.ui.find.conditions), groups ? $.map(groups, function(v, i) {
if (v.id != groupId && v.conditions.length) {
return v.conditions.length == 1 ? v.conditions : {
conditions: v.conditions,
operator: "|"
};
var conditions = $.merge($.merge([], user.ui.listQuery.conditions), user.ui.findQuery.conditions);
$.merge(conditions, groups ? $.map(groups, function(v, i) {
if (v.id != groupId && v.query.conditions.length) {
return v.query.conditions.length == 1 ?
v.query.conditions : v.query;
}
}) : []),
operator = conditions.length < 2 ? "" : ",";
operator = conditions.length < 2 ? "" : ","; // fixme: should be &
Ox.print(groupId, user.ui.find, conditions);
return {
conditions: conditions,
@ -393,7 +395,9 @@ $(function() {
{ id: "find", title: "Find", items: [
{ id: "find", title: "Find", items: $.map(config.findKeys, function(key, i) {
return $.extend({
checked: user.ui.find.key == key.id || user.ui.find.key === "" && key.id == "all",
checked: user.ui.findQuery.conditions.length &&
(user.ui.findQuery.conditions[0].key == key.id ||
(user.ui.findQuery.conditions[0].key === "" && key.id == "all")),
group: "find"
}, key)
}) },
@ -551,7 +555,6 @@ $(function() {
width = getGroupWidth(i, panelWidth);
return {
id: id,
conditions: [],
element: new Ox.TextList({
columns: [
{
@ -587,6 +590,10 @@ $(function() {
}
]
}),
query: {
conditions: [],
operator: "|"
},
size: width.list,
title: title
};
@ -745,7 +752,6 @@ $ui.statusbar = new Ox.Bar({
$dialog.close();
},
id: "close",
title: "Close",
value: "Close"
}
],
@ -753,6 +759,83 @@ $ui.statusbar = new Ox.Bar({
title: "About"
}).open();
});
Ox.Event.bind("click_login", function(event, data) {
/*
var $form = $("<div>"),
$username = new Ox.Input({
id: "username",
label: "Username",
labelWidth: 96,
}).width(256).appendTo($form),
$password = new Ox.Input({
id: "password",
label: "Password",
labelWidth: 96,
type: "password"
}).width(256).css({ marginTop: "8px" }).appendTo($form),
*/
var $form = new Ox.Form({
error: "Unknown username or wrong password",
items: [
{
element: new Ox.Input({
id: "username",
label: "Username",
labelWidth: 96,
}).width(256),
regexp: /.+/
},
{
element: new Ox.Input({
id: "password",
label: "Password",
labelWidth: 96,
type: "password"
}).width(256),
regexp: /.+/
}
]
}),
$dialog = new Ox.Dialog({
buttons: [
[
{
click: function() {
},
id: "create",
value: "Create Account..."
},
{
click: function() {
},
id: "reset",
value: "Reset Password..."
}
],
[
{
click: function() {
$dialog.close();
},
id: "cancel",
value: "Cancel"
},
{
click: function() {
},
disabled: true,
id: "login",
value: "Login"
}
]
],
id: "login",
title: "Login"
}).append($form).open();
});
Ox.Event.bind("change_viewmovies", function(event, data) {
$ui.viewSelect.selectItem(data.id);
});
@ -797,18 +880,15 @@ $ui.statusbar = new Ox.Bar({
Ox.Event.bind("submit_findInput", function(event, data) {
var query;
user.ui.find = {
conditions: [
user.ui.findQuery.conditions = [
{
key: data.key == "all" ? "" : data.key,
value: data.value,
operator: ""
}
],
operator: ""
};
];
$.each(groups, function(i, group) {
groups[i].conditions = [];
groups[i].query.conditions = [];
$ui.groups[i].options({
request: function(options) {
delete options.keys;
@ -834,7 +914,7 @@ $ui.statusbar = new Ox.Bar({
$.each(groups, function(i, group) {
Ox.Event.bind("select_group_" + group.id, function(event, data) {
var query;
groups[i].conditions = $.map(data.ids, function(v) {
groups[i].query.conditions = $.map(data.ids, function(v) {
return {
key: group.id,
value: v,
@ -893,11 +973,6 @@ $ui.statusbar = new Ox.Bar({
Ox.Event.bind("select_list", function(event, data) {
var $still, $timeline;
ui.selectedMovies = data.ids;
setTimeout(function() {
if (
data.ids.length == ui.selectedMovies.length &&
(data.ids.length == 0 || data.ids[0] == ui.selectedMovies[0])
) {
if (data.ids.length) {
$ui.mainMenu.enableItem("copy");
$ui.mainMenu.enableItem("openmovie");
@ -983,10 +1058,83 @@ $ui.statusbar = new Ox.Bar({
}, function(result) {
$ui.selected.html(constructStatus("selected", result.data));
});
} else {
Ox.print("cancelled after timeout");
});
Ox.Event.bind("openpreview_list", function(event, data) {
app.request("find", {
keys: ["director", "id", "posterHeight", "posterWidth", "posterURL", "title"],
query: {
conditions: $.map(data.ids, function(id, i) {
return {
key: "id",
value: id,
operator: "="
}
}, 100);
}),
operator: "|"
}
}, function(result) {
var item = result.data.items[0],
title = item.title + (item.director ? " (" + item.director + ")" : ""),
height = $window.height() - 40,
width = height * 0.75,
$image = $("<img>")
.attr({
src: "http://0xdb.org/" + item.id + "/poster.large.jpg"
})
.css({
height: height + "px",
width: width + "px",
margin: "-16px -16px -16px -16px"
})
.one("load", function() {
var image = $image[0],
imageHeight = image.height,
imageWidth = image.width;
$image.css({
height: imageHeight + "px",
width: imageWidth + "px"
});
});
if ("previewDialog" in $ui) {
$ui.previewDialog.options({
title: title
});
$ui.previewImage.animate({
opacity: 0
}, 250, function() {
$ui.previewImage.replaceWith(
$image.css({
opacity: 0
}).animate({
opacity: 1
}, 250));
$ui.previewImage = $image;
});
} else {
$ui.previewDialog = new Ox.Dialog({
buttons: [
{
value: "Close",
click: function() {
$ui.previewDialog.close();
delete $ui.previewDialog;
$ui.list.closePreview();
}
}
],
height: height,
title: title,
width: width
})
.append($image)
.open();
$ui.previewImage = $image;
}
});
});
Ox.Event.bind("closepreview_list", function(event, data) {
$ui.previewDialog.close();
delete $ui.previewDialog;
});
// Resize
@ -1012,7 +1160,6 @@ $ui.statusbar = new Ox.Bar({
return v.key + " " + v.operator + " " + v.value;
}).join("<br/>") + "<br/><br/>Operator: " + query.operator,
$dialog = new Ox.Dialog({
title: "Show Query",
buttons: [
{
value: "Close",
@ -1020,7 +1167,8 @@ $ui.statusbar = new Ox.Bar({
$dialog.close();
}
}
]
],
title: "Show Query"
})
.append(html)
.open();