adding preview dialog for list items
This commit is contained in:
parent
f7bc932cdd
commit
7280cc7c6d
1 changed files with 270 additions and 122 deletions
|
@ -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,11 +973,6 @@ $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 == ui.selectedMovies.length &&
|
|
||||||
(data.ids.length == 0 || data.ids[0] == ui.selectedMovies[0])
|
|
||||||
) {
|
|
||||||
if (data.ids.length) {
|
if (data.ids.length) {
|
||||||
$ui.mainMenu.enableItem("copy");
|
$ui.mainMenu.enableItem("copy");
|
||||||
$ui.mainMenu.enableItem("openmovie");
|
$ui.mainMenu.enableItem("openmovie");
|
||||||
|
@ -983,10 +1058,83 @@ $ui.statusbar = new Ox.Bar({
|
||||||
}, function(result) {
|
}, function(result) {
|
||||||
$ui.selected.html(constructStatus("selected", result.data));
|
$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
|
// 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();
|
||||||
|
|
Loading…
Reference in a new issue