forked from 0x2620/pandora
add pandora.js
This commit is contained in:
j
parent
0510588b28
commit
c8ff525873
1 changed files with 458 additions and 0 deletions
458
pandora/static/js/pandora.js
Normal file
458
pandora/static/js/pandora.js
Normal file
|
|
@ -0,0 +1,458 @@
|
||||||
|
$(function(){
|
||||||
|
app = new Ox.App({
|
||||||
|
requestURL: "/api/"
|
||||||
|
});
|
||||||
|
var size = window.location.hash.substr(1) || "medium",
|
||||||
|
$body = $("body"),
|
||||||
|
$toolbars = [];
|
||||||
|
|
||||||
|
var sidePanel = new Ox.Panel();
|
||||||
|
var mainPanel = new Ox.Panel().css({
|
||||||
|
//borderLeft: "1px solid rgb(160, 160, 160)"
|
||||||
|
});
|
||||||
|
var middleSplitPanel = Ox.SplitPanel({
|
||||||
|
elements: [
|
||||||
|
{
|
||||||
|
element: sidePanel,
|
||||||
|
size: 256
|
||||||
|
},
|
||||||
|
{
|
||||||
|
element: mainPanel
|
||||||
|
}
|
||||||
|
],
|
||||||
|
orientation: "horizontal"
|
||||||
|
})/*.css({
|
||||||
|
borderTop: "1px solid rgb(160, 160, 160)",
|
||||||
|
borderBottom: "1px solid rgb(160, 160, 160)"
|
||||||
|
})*/;
|
||||||
|
|
||||||
|
//FIXME: how to properly overwrite functions without replacing them
|
||||||
|
var super_launch = app.launch;
|
||||||
|
app.launch = function() {
|
||||||
|
app.request('hello', function(result) {
|
||||||
|
app.user = result.data.user;
|
||||||
|
if(app.user.group!='guest') {
|
||||||
|
app.menu.getItem('status').options('title', "User: " + app.user.username);
|
||||||
|
app.menu.getItem('login').options('title', 'Logout');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
super_launch();
|
||||||
|
};
|
||||||
|
|
||||||
|
var loadingIcon = new Ox.LoadingIcon({
|
||||||
|
size: "medium"
|
||||||
|
})
|
||||||
|
.css({
|
||||||
|
marginLeft: "4px"
|
||||||
|
});
|
||||||
|
|
||||||
|
app.menu = new Ox.MainMenu({
|
||||||
|
extras: [
|
||||||
|
new Ox.Input({
|
||||||
|
autocomplete: function(option, value, callback) {
|
||||||
|
var field = option.substring(6).toLowerCase();
|
||||||
|
Ox.print('app.menu.find.autocomplete: option: ', option, 'value: ', value, ', callback:',callback);
|
||||||
|
Ox.print('app.menu.find.autocomplete: field: ', field);
|
||||||
|
if(field == 'all') {
|
||||||
|
callback([]);
|
||||||
|
} else {
|
||||||
|
value = value.toLowerCase();
|
||||||
|
//var order = $.inArray(field, ['year', 'date'])?'-':'';
|
||||||
|
app.request('find', {
|
||||||
|
query: {
|
||||||
|
conditions: [
|
||||||
|
{
|
||||||
|
key: field,
|
||||||
|
value: value,
|
||||||
|
operator: '~'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
list: 'all',
|
||||||
|
sort: field,
|
||||||
|
keys: [field],
|
||||||
|
range: [0, 10]
|
||||||
|
}, function(result) {
|
||||||
|
var items = $.map(
|
||||||
|
result.data.items,
|
||||||
|
function(item, i) { return item.title; }
|
||||||
|
);
|
||||||
|
callback(items);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
clear: true,
|
||||||
|
highlight: false,
|
||||||
|
id: "find",
|
||||||
|
label: ["Find: Title", "Find: All", "Find: Director", "Find: Country", "Find: Cinematographer"],
|
||||||
|
labelWidth: 96
|
||||||
|
}).width(320),
|
||||||
|
loadingIcon
|
||||||
|
],
|
||||||
|
menus: [
|
||||||
|
{
|
||||||
|
id: "oxdbMM",
|
||||||
|
title: site.name,
|
||||||
|
items: [
|
||||||
|
{ id: "about", title: "About " + site.name },
|
||||||
|
{},
|
||||||
|
{ id: "faq", title: "Frequently Asked Questions"},
|
||||||
|
{ id: "tos", title: "Terms of Service"},
|
||||||
|
{ id: "sas", title: "Security Advisory System"},
|
||||||
|
{},
|
||||||
|
{ id: "contact", title: "Contact"},
|
||||||
|
{},
|
||||||
|
{ id: "technology", title: "Technology"},
|
||||||
|
{ id: "source", title: "Source Code"},
|
||||||
|
{ id: "report", title: "Report a Bug..."},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "user",
|
||||||
|
id: "user",
|
||||||
|
title: "User",
|
||||||
|
items: [
|
||||||
|
{ id: "status", title: "User: not logged in", disabled:true },
|
||||||
|
{},
|
||||||
|
{ id: "accunt", title: "Account", disabled:true},
|
||||||
|
{ id: "preferences", title: "Preferences", disabled:true},
|
||||||
|
{},
|
||||||
|
{id: "login", title: "Login"},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "file",
|
||||||
|
title: "File",
|
||||||
|
items: [
|
||||||
|
{ id: "load", keyboard: "control o", title: "Open" },
|
||||||
|
{ id: "save", keyboard: "control a", title: "Save" },
|
||||||
|
{ id: "save_ad", keyboard: "shift control s", title: "Save As..."}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "edit",
|
||||||
|
title: "Edit",
|
||||||
|
items: [
|
||||||
|
{ id: "undo", keyboard: "control z", title: "Undo" },
|
||||||
|
{ id: "redo", keyboard: "shift control z", title: "Redo" },
|
||||||
|
{},
|
||||||
|
{ id: "cut", keyboard: "control x", title: "Cut" },
|
||||||
|
{ id: "copy", keyboard: "control c", title: "Copy" },
|
||||||
|
{ id: "paste", keyboard: "control v", title: "Paste"},
|
||||||
|
{ id: "delete", keyboard: "delete", title: "Delete"},
|
||||||
|
{},
|
||||||
|
{ id: "select_all", keyboard: "control a", title: "Select All" },
|
||||||
|
{ id: "select_none", keyboard: "shift control a", title: "Select None" },
|
||||||
|
{ id: "invert_selection", keyboard: "alt control a", title: "Invert Selection" },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "sort",
|
||||||
|
title: "Sort",
|
||||||
|
items: [
|
||||||
|
{ id: "sort_movies", title: "Sort Movies by", items: [
|
||||||
|
{ checked: true, group: "sort_movies", id: "title", title: "Title"},
|
||||||
|
{ checked: false, group: "sort_movies", id: "director", title: "Director" },
|
||||||
|
] },
|
||||||
|
{ id: "order_movies", title: "Order Movies", items: [
|
||||||
|
{ checked: false, group: "order_movies", id: "ascending", title: "Ascending"},
|
||||||
|
{ checked: true, group: "order_movies", id: "descending", title: "Descending" },
|
||||||
|
] }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "help",
|
||||||
|
title: "Help",
|
||||||
|
items: [
|
||||||
|
{ id: "help", keyboard: "control h", title: "Help" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
size: "large"
|
||||||
|
});
|
||||||
|
|
||||||
|
var pageDialog = function(title, page) {
|
||||||
|
Ox.print(title, page);
|
||||||
|
var $dialog = new Ox.Dialog({
|
||||||
|
title: title,
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
value: "Ok",
|
||||||
|
click: function() { $dialog.close(); }
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
.append(page)
|
||||||
|
.open();
|
||||||
|
};
|
||||||
|
//this should be: mainMenu.bind('click_about', function(event) {
|
||||||
|
Ox.Event.bind(app.menu.id, 'click_about', function() {
|
||||||
|
pageDialog('About ' + site.name, site.pages.about);
|
||||||
|
});
|
||||||
|
Ox.Event.bind(app.menu.id, 'click_faq', function() {
|
||||||
|
pageDialog(app.menu.getItem('faq').options('title')[0],
|
||||||
|
site.pages.faq);
|
||||||
|
});
|
||||||
|
Ox.Event.bind(app.menu.id, 'click_tos', function() {
|
||||||
|
pageDialog(app.menu.getItem('tos').options('title')[0],
|
||||||
|
site.pages.tos);
|
||||||
|
});
|
||||||
|
Ox.Event.bind(app.menu.id, 'click_sas', function() {
|
||||||
|
pageDialog(app.menu.getItem('sas').options('title')[0],
|
||||||
|
site.pages.sas);
|
||||||
|
});
|
||||||
|
|
||||||
|
OxForm = function(options, self) {
|
||||||
|
var self = self || {},
|
||||||
|
that = new Ox.Element({}, self)
|
||||||
|
.defaults({
|
||||||
|
elements: [],
|
||||||
|
})
|
||||||
|
.options(options || {})
|
||||||
|
.addClass("OxForm"),
|
||||||
|
length = self.options.elements.length;
|
||||||
|
$.each(self.options.elements, function(i, v) {
|
||||||
|
that.append(Ox.Container().css({'margin': '5px'}).append(v));
|
||||||
|
});
|
||||||
|
that.values = function() {
|
||||||
|
var values = {};
|
||||||
|
$.each(self.options.elements, function(i, v) {
|
||||||
|
values[v.$input.attr('name')] = v.$input.val();
|
||||||
|
});
|
||||||
|
return values;
|
||||||
|
}
|
||||||
|
return that;
|
||||||
|
};
|
||||||
|
|
||||||
|
Ox.Event.bind(app.menu.id, 'click_contact', function() {
|
||||||
|
var labelWidth = 64;
|
||||||
|
var inputWidth = 380;
|
||||||
|
|
||||||
|
var u = new Ox.Input({
|
||||||
|
label: "Your Email",
|
||||||
|
labelWidth: labelWidth,
|
||||||
|
name:'email',
|
||||||
|
size: 'medium'
|
||||||
|
}).width(inputWidth).addClass("margin");
|
||||||
|
if(app.user && app.user.preferences.email) {
|
||||||
|
u.val(app.user.preferences.email);
|
||||||
|
}
|
||||||
|
|
||||||
|
var form = new OxForm({
|
||||||
|
elements: [
|
||||||
|
u,
|
||||||
|
new Ox.Input({
|
||||||
|
label: "Subject",
|
||||||
|
labelWidth: labelWidth,
|
||||||
|
name: "subject",
|
||||||
|
size: "medium"
|
||||||
|
}).width(inputWidth).addClass("margin"),
|
||||||
|
new Ox.Input({
|
||||||
|
label: "Message",
|
||||||
|
labelWidth: labelWidth,
|
||||||
|
type: "textarea",
|
||||||
|
size: "medium",
|
||||||
|
name: "message"
|
||||||
|
}).width(380).height(176).addClass("margin")
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
var $dialog = new Ox.Dialog({
|
||||||
|
title: "Contact",
|
||||||
|
width: 424,
|
||||||
|
height: 320,
|
||||||
|
buttons: [
|
||||||
|
{
|
||||||
|
value: "Cancel",
|
||||||
|
click: function() { $dialog.close(); }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "Contact",
|
||||||
|
click: function() {
|
||||||
|
app.request('contact', form.values(),
|
||||||
|
function(result) {
|
||||||
|
if(result.status.code == 200) {
|
||||||
|
$dialog.close();
|
||||||
|
} else {
|
||||||
|
$dialog.append(result.status.text);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
.append(form)
|
||||||
|
.open();
|
||||||
|
});
|
||||||
|
Ox.Event.bind(app.menu.id, 'click_technology', function() {
|
||||||
|
pageDialog(app.menu.getItem('technology').options('title')[0],
|
||||||
|
site.pages.technology);
|
||||||
|
});
|
||||||
|
Ox.Event.bind(app.menu.id, 'click_source', function() {
|
||||||
|
pageDialog(app.menu.getItem('source').options('title')[0],
|
||||||
|
site.pages.source);
|
||||||
|
});
|
||||||
|
Ox.Event.bind(app.menu.id, 'click_report', function() {
|
||||||
|
pageDialog(app.menu.getItem('report').options('title')[0],
|
||||||
|
site.pages.report);
|
||||||
|
});
|
||||||
|
|
||||||
|
app.logout = function () {
|
||||||
|
this.request('logout');
|
||||||
|
this.user = {};
|
||||||
|
this.menu.getItem('logout').toggle();
|
||||||
|
this.menu.getItem('status').options('title', "User: not logged in");
|
||||||
|
};
|
||||||
|
Ox.Event.bind(app.menu.id, 'click_logout', function(event, data) {
|
||||||
|
app.logout();
|
||||||
|
});
|
||||||
|
Ox.Event.bind(app.menu.id, 'click_login', function(element) {
|
||||||
|
var labelWidth = 64;
|
||||||
|
var inputWidth = labelWidth+200;
|
||||||
|
var loginForm = new OxForm({
|
||||||
|
elements: [
|
||||||
|
new Ox.Input({
|
||||||
|
label: "Username",
|
||||||
|
labelWidth: labelWidth,
|
||||||
|
name:'username',
|
||||||
|
size: 'medium'
|
||||||
|
}).addClass("margin").width(inputWidth),
|
||||||
|
new Ox.Input({
|
||||||
|
label: 'Password',
|
||||||
|
labelWidth: labelWidth,
|
||||||
|
name:'password',
|
||||||
|
type: 'password',
|
||||||
|
size: 'medium'
|
||||||
|
}).addClass("margin").width(inputWidth)
|
||||||
|
]
|
||||||
|
}).css({
|
||||||
|
'padding-top': '48px',
|
||||||
|
});
|
||||||
|
|
||||||
|
var submit = function() {
|
||||||
|
app.request('login', loginForm.values(), function(result) {
|
||||||
|
if(result.status.code == 200) {
|
||||||
|
$dialog.close();
|
||||||
|
app.user = result.data.user;
|
||||||
|
app.menu.getItem('status').options(title, "User: " + app.user.username);
|
||||||
|
app.menu.getItem('login').toggle();
|
||||||
|
|
||||||
|
} else {
|
||||||
|
$dialog.append('Login failed ' + result.status.text);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var d = new Ox.Container();
|
||||||
|
var registerInfo = new Ox.Panel();
|
||||||
|
|
||||||
|
registerInfo.append(Ox.Element().css({'margin-left': '4px'}).append('<br>Forgot your password? <a href="">Recover Password</a><br>Dont have an account? <a href="">Register Now</a>'));
|
||||||
|
|
||||||
|
var panel = Ox.SplitPanel({
|
||||||
|
elements: [
|
||||||
|
{
|
||||||
|
element: loginForm,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
element: registerInfo,
|
||||||
|
size: 80
|
||||||
|
}
|
||||||
|
],
|
||||||
|
orientation: "vertical"
|
||||||
|
}).appendTo(d);
|
||||||
|
|
||||||
|
|
||||||
|
var $dialog = new Ox.Dialog({
|
||||||
|
title: "Login",
|
||||||
|
width: inputWidth+24,
|
||||||
|
height: 184,
|
||||||
|
buttons: [
|
||||||
|
[],[
|
||||||
|
{
|
||||||
|
value: "Cancel",
|
||||||
|
click: function() { $dialog.close(); }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: "Login",
|
||||||
|
click: submit
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
})
|
||||||
|
.append(d)
|
||||||
|
.open();
|
||||||
|
});
|
||||||
|
|
||||||
|
var bottomPanel = Ox.Toolbar({size: "small"})
|
||||||
|
.css({
|
||||||
|
zIndex: 2,
|
||||||
|
MozBoxShadow: "0 0 4px rgb(0, 0, 0)",
|
||||||
|
WebkitBoxShadow: "0 0 4px rgb(0, 0, 0)"
|
||||||
|
})
|
||||||
|
.append(
|
||||||
|
$("<div/>")
|
||||||
|
.addClass("bottom")
|
||||||
|
.html(site.url + " - a rather unique kind of movie database.")
|
||||||
|
);
|
||||||
|
var mainSplitPanel = Ox.SplitPanel({
|
||||||
|
elements: [
|
||||||
|
{
|
||||||
|
element: app.menu,
|
||||||
|
size: 24
|
||||||
|
},
|
||||||
|
{
|
||||||
|
element: middleSplitPanel
|
||||||
|
},
|
||||||
|
{
|
||||||
|
element: bottomPanel,
|
||||||
|
size: 24
|
||||||
|
}
|
||||||
|
],
|
||||||
|
orientation: "vertical"
|
||||||
|
}).appendTo($body);
|
||||||
|
|
||||||
|
var listPanel = new Ox.CollapsePanel({
|
||||||
|
title: "Lists"
|
||||||
|
}).appendTo(sidePanel);
|
||||||
|
listPanel.$content.html("Nouvelle Vague<br/>Hollywood 40's<br/>Pirate Cinema Berlin")
|
||||||
|
|
||||||
|
var historyPanel = new Ox.CollapsePanel({
|
||||||
|
title: "Search History"
|
||||||
|
}).appendTo(sidePanel);
|
||||||
|
|
||||||
|
historyPanel.$content.html("Paris<br/>Matirx<br/>Godard")
|
||||||
|
|
||||||
|
/*
|
||||||
|
var tabbar = new Ox.Tabbar({
|
||||||
|
values: ["Info", "Scenes", "Timeline", "Map", "Admin"],
|
||||||
|
selected: 0,
|
||||||
|
}).appendTo(mainPanel)
|
||||||
|
*/
|
||||||
|
var content = new Ox.Container()
|
||||||
|
.css({'background-color': 'red'})
|
||||||
|
.appendTo(mainPanel);
|
||||||
|
|
||||||
|
/*
|
||||||
|
tabbar.bind('OxButtonToggle', function(event, data) {
|
||||||
|
Ox.print('tabbar selected');
|
||||||
|
Ox.print(data.value);
|
||||||
|
if(data.value=='Info') {
|
||||||
|
content.html('this is for testing purposes only, lets get down to it...');
|
||||||
|
} else if(data.value=='Scenes') {
|
||||||
|
content.html('what a wonderfull scene');
|
||||||
|
} else if(data.value=='Timeline') {
|
||||||
|
content.html('here we will see a timeline');
|
||||||
|
} else if(data.value=='Map') {
|
||||||
|
content.html('Here be a map of dragons');
|
||||||
|
} else if(data.value=='Admin') {
|
||||||
|
content.html('Here be admin');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
*/
|
||||||
|
var results = new Ox.List({
|
||||||
|
|
||||||
|
}).appendTo(content);
|
||||||
|
|
||||||
|
|
||||||
|
app.launch();
|
||||||
|
});
|
||||||
Loading…
Reference in a new issue