0x2620/cablegates
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

adding preview dialog for list items

Browse source
This commit is contained in:
rolux 2010-07-20 22:03:47 +02:00
parent f7bc932cdd
commit 7280cc7c6d
1 changed files with 270 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

392
pandora/static/js/pandora.js
View file

@ -110,10 +110,13 @@ $(function() {
userSettings: { userSettings: {
group: "guest", group: "guest",
ui: { ui: {
columns: ["id", "title", "director", "country", "year", "language", "runtime", "genre"], columns: ["id", "title", "director", "country", "year", "language", "runtime", "genre", "releasedate"],
find: { conditions: [{ key: "", value: "", operator: "" }], operator: "" }, // find: { conditions: [{ key: "", value: "", operator: "" }], operator: "" },
findQuery: { conditions: [], operator: "" },
groupsQuery: { conditions: [], operator: "|" },
groupsSize: 128, groupsSize: 128,
itemView: "info", itemView: "info",
listQuery: { conditions: [], operator: "" },
listsSize: 192, listsSize: 192,
listView: "list", listView: "list",
sections: ["history", "lists", "public", "featured"], sections: ["history", "lists", "public", "featured"],
@ -144,13 +147,13 @@ $(function() {
function constructFind(query) { function constructFind(query) {
Ox.print("cF", 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)) { if (!Ox.isUndefined(v.conditions)) {
return "[" + constructFind(v) + "]"; return "[" + constructFind(v) + "]";
} else { } else {
return v.value !== "" ? v.key + (v.key ? ":" : "") + constructValue(v.value, v.operator) : null; return v.value !== "" ? v.key + (v.key ? ":" : "") + constructValue(v.value, v.operator) : null;
} }
}).join(query.operator); }).join(query.operator)/*)*/;
} }
function constructValue(value, operator) { function constructValue(value, operator) {
@ -201,7 +204,7 @@ $(function() {
function parseValue(str) { function parseValue(str) {
var value = { var value = {
value: str, value: decodeURI(str),
operator: "" operator: ""
}; };
if (value.value[0] == "!") { if (value.value[0] == "!") {
@ -226,8 +229,8 @@ $(function() {
var query = Ox.unserialize(str), var query = Ox.unserialize(str),
sort = []; sort = [];
if ("find" in query) { if ("find" in query) {
user.ui.find = parseFind(query.find); user.ui.findQuery = parseFind(query.find);
Ox.print("user.ui.find", user.ui.find) Ox.print("user.ui.findQuery", user.ui.findQuery)
} }
if ("sort" in query) { if ("sort" in query) {
sort = query.sort.split(",") sort = query.sort.split(",")
@ -247,17 +250,16 @@ $(function() {
}, },
toObject: function(groupId) { toObject: function(groupId) {
Ox.print("tO", user.ui.find.conditions) Ox.print("tO", user.ui.findQuery.conditions)
// the inner $.merge() creates a clone // the inner $.merge() creates a clone
var conditions = $.merge($.merge([], user.ui.find.conditions), groups ? $.map(groups, function(v, i) { var conditions = $.merge($.merge([], user.ui.listQuery.conditions), user.ui.findQuery.conditions);
if (v.id != groupId && v.conditions.length) { $.merge(conditions, groups ? $.map(groups, function(v, i) {
return v.conditions.length == 1 ? v.conditions : { if (v.id != groupId && v.query.conditions.length) {
conditions: v.conditions, return v.query.conditions.length == 1 ?
operator: "|" v.query.conditions : v.query;
};
} }
}) : []), }) : []),
operator = conditions.length < 2 ? "" : ","; operator = conditions.length < 2 ? "" : ","; // fixme: should be &
Ox.print(groupId, user.ui.find, conditions); Ox.print(groupId, user.ui.find, conditions);
return { return {
conditions: conditions, conditions: conditions,
@ -393,7 +395,9 @@ $(function() {
{ id: "find", title: "Find", items: [ { id: "find", title: "Find", items: [
{ id: "find", title: "Find", items: $.map(config.findKeys, function(key, i) { { id: "find", title: "Find", items: $.map(config.findKeys, function(key, i) {
return $.extend({ 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" group: "find"
}, key) }, key)
}) }, }) },
@ -551,7 +555,6 @@ $(function() {
width = getGroupWidth(i, panelWidth); width = getGroupWidth(i, panelWidth);
return { return {
id: id, id: id,
conditions: [],
element: new Ox.TextList({ element: new Ox.TextList({
columns: [ columns: [
{ {
@ -587,6 +590,10 @@ $(function() {
} }
] ]
}), }),
query: {
conditions: [],
operator: "|"
},
size: width.list, size: width.list,
title: title title: title
}; };
@ -745,7 +752,6 @@ $ui.statusbar = new Ox.Bar({
$dialog.close(); $dialog.close();
}, },
id: "close", id: "close",
title: "Close",
value: "Close" value: "Close"
} }
], ],
@ -753,6 +759,83 @@ $ui.statusbar = new Ox.Bar({
title: "About" title: "About"
}).open(); }).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) { Ox.Event.bind("change_viewmovies", function(event, data) {
$ui.viewSelect.selectItem(data.id); $ui.viewSelect.selectItem(data.id);
}); });
@ -797,18 +880,15 @@ $ui.statusbar = new Ox.Bar({
Ox.Event.bind("submit_findInput", function(event, data) { Ox.Event.bind("submit_findInput", function(event, data) {
var query; var query;
user.ui.find = { user.ui.findQuery.conditions = [
conditions: [ {
{ key: data.key == "all" ? "" : data.key,
key: data.key == "all" ? "" : data.key, value: data.value,
value: data.value, operator: ""
operator: "" }
} ];
],
operator: ""
};
$.each(groups, function(i, group) { $.each(groups, function(i, group) {
groups[i].conditions = []; groups[i].query.conditions = [];
$ui.groups[i].options({ $ui.groups[i].options({
request: function(options) { request: function(options) {
delete options.keys; delete options.keys;
@ -834,7 +914,7 @@ $ui.statusbar = new Ox.Bar({
$.each(groups, function(i, group) { $.each(groups, function(i, group) {
Ox.Event.bind("select_group_" + group.id, function(event, data) { Ox.Event.bind("select_group_" + group.id, function(event, data) {
var query; var query;
groups[i].conditions = $.map(data.ids, function(v) { groups[i].query.conditions = $.map(data.ids, function(v) {
return { return {
key: group.id, key: group.id,
value: v, value: v,
@ -893,100 +973,168 @@ $ui.statusbar = new Ox.Bar({
Ox.Event.bind("select_list", function(event, data) { Ox.Event.bind("select_list", function(event, data) {
var $still, $timeline; var $still, $timeline;
ui.selectedMovies = data.ids; ui.selectedMovies = data.ids;
setTimeout(function() { if (data.ids.length) {
if ( $ui.mainMenu.enableItem("copy");
data.ids.length == ui.selectedMovies.length && $ui.mainMenu.enableItem("openmovie");
(data.ids.length == 0 || data.ids[0] == ui.selectedMovies[0]) } else {
) { $ui.mainMenu.disableItem("copy");
if (data.ids.length) { $ui.mainMenu.disableItem("openmovie");
$ui.mainMenu.enableItem("copy"); }
$ui.mainMenu.enableItem("openmovie"); if (data.ids.length == 1) {
} else { $still = $("<img>")
$ui.mainMenu.disableItem("copy"); .attr({
$ui.mainMenu.disableItem("openmovie"); src: "http://0xdb.org/" + data.ids[0] + "/still.jpg"
} })
if (data.ids.length == 1) { .one("load", function() {
$still = $("<img>") if (data.ids[0] != ui.selectedMovies[0]) {
.attr({ Ox.print("cancel after load...")
src: "http://0xdb.org/" + data.ids[0] + "/still.jpg" return;
})
.one("load", function() {
if (data.ids[0] != ui.selectedMovies[0]) {
Ox.print("cancel after load...")
return;
}
var image = $still[0],
imageWidth = image.width,
imageHeight = image.height,
width = $ui.info.width(),
height = imageHeight * width / imageWidth;
ui.infoRatio = width / height;
$still.css({
position: "absolute",
left: 0,
top: 0,
//width: width + "px",
//height: height + "px",
width: "100%",
opacity: 0
})
.appendTo($ui.info.$element)
.animate({
opacity: 1
});
$ui.infoStill.animate({
opacity: 0
}, 250);
$ui.info.animate({
height: (height + 16) + "px"
}, 250, function() {
$ui.infoStill.remove();
$ui.infoStill = $still;
});
});
/*
$timeline = $("<img>")
.attr({
src: "http://0xdb.org/" + data.ids[0] + "/timeline/timeline.png"
})
.one("load", function() {
$timeline.css({
position: "absolute",
left: 0,
bottom: "16px",
opacity: 0
})
.appendTo($ui.info.$element)
.animate({
opacity: 1
});
$ui.infoTimeline.animate({
opacity: 0
}, 250, function() {
$ui.infoTimeline.remove();
$ui.infoTimeline = $timeline;
});
});
*/
}
app.request("find", {
query: {
conditions: $.map(data.ids, function(id, i) {
return {
key: "id",
value: id,
operator: "="
}
}),
operator: "|"
} }
}, function(result) { var image = $still[0],
$ui.selected.html(constructStatus("selected", result.data)); imageWidth = image.width,
imageHeight = image.height,
width = $ui.info.width(),
height = imageHeight * width / imageWidth;
ui.infoRatio = width / height;
$still.css({
position: "absolute",
left: 0,
top: 0,
//width: width + "px",
//height: height + "px",
width: "100%",
opacity: 0
})
.appendTo($ui.info.$element)
.animate({
opacity: 1
});
$ui.infoStill.animate({
opacity: 0
}, 250);
$ui.info.animate({
height: (height + 16) + "px"
}, 250, function() {
$ui.infoStill.remove();
$ui.infoStill = $still;
});
});
/*
$timeline = $("<img>")
.attr({
src: "http://0xdb.org/" + data.ids[0] + "/timeline/timeline.png"
})
.one("load", function() {
$timeline.css({
position: "absolute",
left: 0,
bottom: "16px",
opacity: 0
})
.appendTo($ui.info.$element)
.animate({
opacity: 1
});
$ui.infoTimeline.animate({
opacity: 0
}, 250, function() {
$ui.infoTimeline.remove();
$ui.infoTimeline = $timeline;
});
});
*/
}
app.request("find", {
query: {
conditions: $.map(data.ids, function(id, i) {
return {
key: "id",
value: id,
operator: "="
}
}),
operator: "|"
}
}, function(result) {
$ui.selected.html(constructStatus("selected", result.data));
});
});
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: "="
}
}),
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 { } else {
Ox.print("cancelled after timeout"); $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;
} }
}, 100); });
});
Ox.Event.bind("closepreview_list", function(event, data) {
$ui.previewDialog.close();
delete $ui.previewDialog;
}); });
// Resize // Resize
@ -1012,7 +1160,6 @@ $ui.statusbar = new Ox.Bar({
return v.key + " " + v.operator + " " + v.value; return v.key + " " + v.operator + " " + v.value;
}).join("<br/>") + "<br/><br/>Operator: " + query.operator, }).join("<br/>") + "<br/><br/>Operator: " + query.operator,
$dialog = new Ox.Dialog({ $dialog = new Ox.Dialog({
title: "Show Query",
buttons: [ buttons: [
{ {
value: "Close", value: "Close",
@ -1020,7 +1167,8 @@ $ui.statusbar = new Ox.Bar({
$dialog.close(); $dialog.close();
} }
} }
] ],
title: "Show Query"
}) })
.append(html) .append(html)
.open(); .open();