some functionality for login etc.

This commit is contained in:
rolux 2010-12-24 17:13:51 +00:00
parent dfda9a0e6d
commit 631a64b32d
4 changed files with 7780 additions and 396 deletions

View file

@ -18,7 +18,8 @@ if(typeof(console)=='undefined') {
<script type="text/javascript" src="/static/oxjs/build/js/ox.js"></script> <script type="text/javascript" src="/static/oxjs/build/js/ox.js"></script>
<script type="text/javascript" src="/static/oxjs/build/js/ox.ui.js"></script> <script type="text/javascript" src="/static/oxjs/build/js/ox.ui.js"></script>
<script type="text/javascript" src="/static/js/pandora.js"></script> <script type="text/javascript" src="/static/js/pandora.js"></script>
<script type="text/javascript" src="/static/js/pandora.local.js"></script> <!--
<script type="text/javascript" src="/static/js/pandora.local.js"></script> -->
</head> </head>
<body></body> <body></body>
</html> </html>

View file

@ -58,8 +58,7 @@
{"id": "history", "title": "History"}, {"id": "history", "title": "History"},
{"id": "lists", "title": "My Lists"}, {"id": "lists", "title": "My Lists"},
{"id": "public", "title": "Public Lists"}, {"id": "public", "title": "Public Lists"},
{"id": "featured", "title": "Featured Lists"}, {"id": "featured", "title": "Featured Lists"}
{"id": "admin", "title": "Admin"}
], ],
"sortKeys": [ "sortKeys": [
{"id": "title", "title": "Title", "operator": "", "align": "left", "width": 180, "removable": false}, {"id": "title", "title": "Title", "operator": "", "align": "left", "width": 180, "removable": false},
@ -121,17 +120,19 @@
"findQuery": {"conditions": [], "operator": ""}, "findQuery": {"conditions": [], "operator": ""},
"groupsQuery": {"conditions": [], "operator": "|"}, "groupsQuery": {"conditions": [], "operator": "|"},
"groupsSize": 176, "groupsSize": 176,
"item": "",
"itemView": "timeline", "itemView": "timeline",
"listQuery": {"conditions": [], "operator": ""}, "listQuery": {"conditions": [], "operator": ""},
"listsSize": 256, "listsSize": 256,
"listView": "icons", "listView": "icons",
"section": "items", "section": "items",
"sections": ["history", "lists", "public", "featured", "admin"], "sections": ["history", "lists", "public", "featured"],
"showAnnotations": true, "showAnnotations": true,
"showGroups": true, "showGroups": true,
"showInfo": true, "showInfo": true,
"showLists": true, "showLists": true,
"showMovies": true, "showMovies": true,
"sitePage": "home",
"sort": [ "sort": [
{"key": "director", "operator": ""} {"key": "director", "operator": ""}
], ],

File diff suppressed because it is too large Load diff

View file

@ -52,27 +52,317 @@ var pandora = new Ox.App({
Query.fromString(location.hash.substr(1)); Query.fromString(location.hash.substr(1));
//url(); URL.parse();
window.onpopstate = function() { window.onpopstate = function() {
url(); URL.update();
}; };
app.$ui.appPanel = ui.appPanel().display(); app.$ui.appPanel = ui.appPanel();
app.$ui.appPanel.display();
app.ui.sectionButtonsWidth = app.$ui.sectionButtons.width() + 8; app.ui.sectionButtonsWidth = app.$ui.sectionButtons.width() + 8;
app.$ui.window.resize(function(foo) { app.$ui.window.resize(function() {
Ox.print('foo', foo) if (app.user.ui.item == '') {
app.$ui.list.size(); app.$ui.list.size();
resizeGroups(app.$ui.rightPanel.width()); resizeGroups(app.$ui.rightPanel.width());
if (app.user.ui.listView == 'map') { if (app.user.ui.listView == 'map') {
app.$ui.map.triggerResize(); app.$ui.map.triggerResize();
} }
} else {
Ox.print('app.$ui.window.resize');
app.$ui.editor.options({
height: app.$ui.document.height() -
20 - 24 - app.$ui.contentPanel.size(0) - 1 - 16,
width: app.$ui.document.width() -
app.$ui.mainPanel.size(0) - app.$ui.timelinePanel.size(1) - 2 // fixme: item, not timelinePanel
}); });
}
});
pandora.app = app; // remove later
} }
function login(data) {
app.user = data.user;
app.$ui.appPanel.reload();
}
function logout(data) {
app.user = data.user;
app.$ui.appPanel.reload();
}
var ui = { var ui = {
accountCodeInput: function() {
return new Ox.Input({
id: 'code',
label: 'Code',
labelWidth: 100,
validate: function(value, callback) {
callback({
message: 'Missing Code',
valid: value.length > 0
});
},
width: 368
});
},
accountDialog: function(action) {
var buttonTitle = {
login: 'Login',
register: 'Register',
reset: 'Reset Password',
resetlogin: 'Reset Password and Login'
},
buttons = {
login: ['register', 'reset'],
register: ['login'],
reset: ['login'],
resetlogin: ['login']
},
text = {
login: '',
register: '',
reset: 'To reset your password, please enter your username or e-mail address.',
resetlogin: 'To login to your account, please choose a new password, and enter the code that we have e-mailed you.'
},
title = {
login: 'Login',
register: 'Register',
reset: 'Reset Password',
resetlogin: 'Reset Password'
};
var that = new Ox.Dialog({
buttons: [
$.map(buttons[action], function(v) {
return button(v);
}),
[button('cancel'), button('submit')]
],
content: app.$ui.accountForm = ui.accountForm(action),
height: 200,
id: 'accountDialog',
minHeight: 200,
minWidth: 400,
title: title[action],
width: 400
})
.bindEvent({
resize: function(event, data) {
var width = data.width - 32;
app.$ui.accountForm.items.forEach(function(item) {
item.options({width: width})
});
}
});
function button(type) {
if (type == 'cancel') {
return new Ox.Button({
id: 'cancel',
title: 'Cancel'
}).bindEvent('click', function() {
that.close();
})
} else if (type == 'submit') {
return new Ox.Button({
disabled: true,
id: 'submit',
title: buttonTitle[action]
}).bindEvent('click', function() {
app.$ui.accountForm.submit()
})
} else {
return new Ox.Button({
id: type,
title: title[type] + '...'
}).bindEvent('click', function() {
action = type;
that.options({
buttons: [
$.map(buttons[type], function(v) {
return button(v);
}),
[button('cancel'), button('submit')]
],
content: app.$ui.accountForm = ui.accountForm(type),
title: title[type]
});
});
}
}
return that;
},
accountEmailInput: function() {
return new Ox.Input({
id: 'email',
label: 'E-Mail Address',
labelWidth: 100,
type: 'email',
validate: function(value, callback) {
callback({
message: 'Missing E-Mail Address',
valid: value.length > 0
});
},
width: 368
});
},
accountForm: function(action) {
app.$ui.codeInput = ui.accountEmailInput();
app.$ui.emailInput = ui.accountEmailInput();
app.$ui.passwordInput = ui.accountPasswordInput();
app.$ui.usernameInput = ui.accountUsernameInput();
app.$ui.usernameOrEmailInput = ui.accountUsernameOrEmailInput();
var items = {
'login': [
app.$ui.usernameInput,
app.$ui.passwordInput
],
'register': [
app.$ui.usernameInput,
app.$ui.passwordInput,
app.$ui.emailInput
],
'reset': [
app.$ui.usernameOrEmailInput
],
'resetlogin': [
app.$ui.usernameInput,
app.$ui.passwordInput,
app.$ui.codeInput
]
},
that = new Ox.Form({
error: 'Unknown username or wrong password',
id: 'accountForm',
items: $.map(items[action], function(v, i) {
return {element: v};
}),
submit: function(data, callback) {
pandora.api.login(data, function(result) {
if (!result.data.errors) {
app.$ui.accountDialog.close();
login(result.data);
} else {
callback([{id: 'password', message: 'Incorrect Password'}]);
}
});
}
})
.bindEvent({
submit: function(event, data) {
},
validate: function(event, data) {
app.$ui.accountDialog[(data.valid ? 'enable' : 'disable') + 'Button']('submit');
}
});
that.items = items[action];
return that;
},
accountLogoutDialog: function() {
var that = new Ox.Dialog({
buttons: [
new Ox.Button({
id: 'cancel',
title: 'Cancel'
}).bindEvent('click', function() {
that.close();
app.$ui.mainMenu.getItem('loginlogout').toggleTitle();
}),
new Ox.Button({
id: 'submit',
title: 'Logout'
}).bindEvent('click', function() {
that.close();
pandora.api.logout({}, function(result) {
logout(result.data);
});
})
],
height: 160,
title: 'Logout',
width: 300
})
.append(
new Ox.Element('div')
.html('Are you sure you want to logout?')
)
return that;
},
accountPasswordInput: function() {
return new Ox.Input({
autovalidate: /.+/,
id: 'password',
label: 'Password',
labelWidth: 100,
type: 'password',
validate: function(value, callback) {
callback({
message: 'Missing Password',
valid: value.length > 0
});
},
width: 368
});
},
accountUsernameInput: function() {
return new Ox.Input({
autovalidate: function(value, blur, callback) {
var length = value.length;
value = $.map(value.toLowerCase().split(''), function(v, i) {
if (new RegExp('[a-z0-9' + ((i == 0 || (i == length - 1 && blur)) ? '' : '\-_') + ']')(v)) {
return v
} else {
return null;
}
}).join('');
$.each(['--', '-_', '_-', '__'], function(i, v) {
while (value.indexOf(v) > -1) {
value = value.replace(new RegExp(v, 'g'), v[0]);
}
})
callback(value);
},
id: 'username',
label: 'Username',
labelWidth: 100,
validate: function(value, callback) {
!value.length ? callback({
message: 'Missing Username',
valid: false
}) : pandora.api.findUser({
key: 'username',
value: value,
operator: '='
}, function(result) {
Ox.print('result', result)
var valid = result.data.users.length == 1;
callback({
message: 'Unknown Username',
valid: valid
});
});
},
width: 368
});
},
accountUsernameOrEmailInput: function() {
return new Ox.Input({
id: 'email',
label: 'Username or E-Mail Address',
labelWidth: 184,
validate: function(value, callback) {
callback({
message: 'Missing Username or E-Mail Address',
valid: value.length > 0
});
},
width: 368
});
},
annotations: function() { annotations: function() {
var that = new Ox.Element(), var that = new Ox.Element(),
$bins = []; $bins = [];
@ -116,7 +406,14 @@ var pandora = new Ox.App({
that.display = function() { that.display = function() {
app.$ui.body.css({opacity: 0}); app.$ui.body.css({opacity: 0});
that.appendTo(app.$ui.body); that.appendTo(app.$ui.body);
app.$ui.body.animate({opacity: 1}); app.$ui.body.animate({opacity: 1}, 1000);
return that;
}
that.reload = function() {
$.each($elements, function(i, $element) {
$element.remove();
});
app.$ui.appPanel = ui.appPanel().appendTo(app.$ui.body);
return that; return that;
} }
return that; return that;
@ -148,13 +445,13 @@ var pandora = new Ox.App({
}); });
}); });
} else if (mode == 'item') { } else if (mode == 'item') {
var that = new Ox.Element('div');
} }
return that; return that;
}, },
contentPanel: function() { contentPanel: function() {
var that = new Ox.SplitPanel({ var that = new Ox.SplitPanel({
elements: [ elements: app.user.ui.item == '' ? [
{ {
collapsible: true, collapsible: true,
element: app.$ui.browser = ui.browser('list') element: app.$ui.browser = ui.browser('list')
@ -171,6 +468,15 @@ var pandora = new Ox.App({
{ {
element: app.$ui.list = ui.list(app.user.ui.listView) element: app.$ui.list = ui.list(app.user.ui.listView)
} }
] : [
{
collapsible: true,
element: app.$ui.browser = ui.browser('item'),
size: 80
},
{
element: app.$ui.item = ui.item(app.user.ui.item, app.user.ui.itemView)
}
], ],
orientation: 'vertical' orientation: 'vertical'
}); });
@ -409,13 +715,108 @@ var pandora = new Ox.App({
); );
return that; return that;
}, },
item: function(id, view) { item: function(id, view) { // fixme: params are not necessary
var that,
elements = [
];
if (view == 'timeline') {
that = app.$ui.timelinePanel = new Ox.SplitPanel({
elements: [
{
element: new Ox.Element('div'),
},
{
collapsible: true,
element: app.$ui.annotations = ui.annotations(),
size: 256
}
],
orientation: 'horizontal'
});
getItem();
}
function getItem() {
pandora.api.getItem(id, function(result) {
var video = result.data.item.stream,
cuts = result.data.item.layers.cuts || {},
subtitles = result.data.item.layers.subtitles || [{
'in': 5,
'out': 10,
'text': 'This subtitle is just a test...'
}];
video.height = 96;
video.width = parseInt(video.height * video.aspectRatio / 2) * 2;
video.url = video.baseUrl + '/' + video.height + 'p.' + ($.support.video.webm ? 'webm' : 'mp4');
app.$ui.timelinePanel.replace(0, app.$ui.editor = new Ox.VideoEditor({
cuts: cuts,
duration: video.duration,
find: '',
frameURL: function(position) {
return '/' + id + '/frame/' + video.width.toString() + '/' + position.toString() + '.jpg'
},
height: app.$ui.contentPanel.size(1),
id: 'editor',
largeTimeline: true,
matches: [],
points: [0, 0],
position: 0,
posterFrame: parseInt(video.duration / 2),
subtitles: subtitles,
videoHeight: video.height,
videoId: id,
videoWidth: video.width,
videoSize: 'small',
videoURL: video.url,
width: app.$ui.document.width() - app.$ui.mainPanel.size(0) - 1 - 256 - 1
}).bindEvent('resize', function(event, data) {
Ox.print('RESIZE:', data)
app.$ui.editor.options({
width: data
});
}));
app.$ui.rightPanel.bindEvent('resize', function(event, data) {
Ox.print('rightPanel resize', data, app.$ui.timelinePanel.size(1))
app.$ui.editor.options({
width: data - app.$ui.timelinePanel.size(1) - 1
});
});
});
}
that.display = function() {
app.$ui.contentPanel.replaceElements([
{
collapsible: true,
element: app.$ui.browser = new Ox.Element('div').options({id: 'browser'}),
resizable: false,
size: 80
},
{
element: app.$ui.timelinePanel = new Ox.SplitPanel({
elements: [
{
element: app.$ui.editor = new Ox.Element('div')
},
{
collapsible: true,
element: app.$ui.annotations = ui.annotations(),
size: 256
}
],
orientation: 'horizontal'
})
}
]);
// getItem(); // fixme: can the asynchronicity be moved within the video editor?
}
return that;
},
item_: function(id, view) {
var $item; var $item;
//location.hash = '!' + id; //location.hash = '!' + id;
//app.user.ui.mode = 'item';
app.$ui.mainMenu.enableItem('openmovie'); app.$ui.mainMenu.enableItem('openmovie');
app.$ui.mainMenu.checkItem('viewMenu_openmovie_' + view); app.$ui.mainMenu.checkItem('viewMenu_openmovie_' + view);
//FIXME: there should be a menu function for this //FIXME: there should be a menu function for this
app.$ui.contentPanel.empty();
if (view == 'timeline') { if (view == 'timeline') {
pandora.api.getItem(id, function(result) { pandora.api.getItem(id, function(result) {
item_debug = result.data.item; item_debug = result.data.item;
@ -429,12 +830,11 @@ var pandora = new Ox.App({
video.height = 96; video.height = 96;
video.width = parseInt(video.height * video.aspectRatio / 2) * 2; video.width = parseInt(video.height * video.aspectRatio / 2) * 2;
video.url = video.baseUrl + '/' + video.height + 'p.' + ($.support.video.webm ? 'webm' : 'mp4'); video.url = video.baseUrl + '/' + video.height + 'p.' + ($.support.video.webm ? 'webm' : 'mp4');
$item = new Ox.SplitPanel({ //app.$ui.contentPanel.size(0, 80);
elements: [ app.$ui.contentPanel.replaceElements([
{ {
collapsible: true, collapsible: true,
element: app.$ui.browser = new Ox.Element('div') element: app.$ui.browser = new Ox.Element('div').options({id: 'browser'}),
.options({id: 'browser'}),
resizable: false, resizable: false,
size: 80 size: 80
}, },
@ -472,22 +872,6 @@ var pandora = new Ox.App({
}), }),
size: 'auto' size: 'auto'
}, },
/*
{
collapsible: true,
element: app.$ui.annotations = new Ox.Map({
places: ['Boston', 'Brussels', 'Barcelona', 'Berlin', 'Beirut', 'Bombay', 'Bangalore', 'Beijing']
})
.bindEvent('resize', function(event, data) {
app.$ui.editor.options({
width: app.$document.width() - app.$ui.mainPanel.size(0) - app.$ui.timelinePanel.size(1) - 2.
})
}),
resizable: true,
resize: [192, 256],
size: 256
}
*/
{ {
collapsible: true, collapsible: true,
element: app.$ui.annotations = ui.annotations(), element: app.$ui.annotations = ui.annotations(),
@ -498,15 +882,12 @@ var pandora = new Ox.App({
}), }),
size: 'auto' size: 'auto'
} }
], ]);
orientation: 'vertical'
});
app.$ui.rightPanel.replace(1, $item);
app.$ui.rightPanel app.$ui.rightPanel
.bindEvent('resize', function(event, data) { .bindEvent('resize', function(event, data) {
Ox.print('rightPanel resize', data, app.$ui.timelinePanel.size(1)) Ox.print('rightPanel resize', data, app.$ui.item.size(1))
app.$ui.editor.options({ app.$ui.editor.options({
width: data - app.$ui.timelinePanel.size(1) - 1 width: data - app.$ui.item.size(1) - 1
}); });
}); });
///* ///*
@ -577,6 +958,7 @@ var pandora = new Ox.App({
list: function(view) { list: function(view) {
var that, $map, var that, $map,
keys = ['director', 'id', 'poster', 'title', 'year']; keys = ['director', 'id', 'poster', 'title', 'year'];
app.user.ui.mode = 'list';
Ox.print('constructList', view); Ox.print('constructList', view);
if (view == 'list') { if (view == 'list') {
that = new Ox.TextList({ that = new Ox.TextList({
@ -752,7 +1134,7 @@ var pandora = new Ox.App({
}, },
open: function(event, data) { open: function(event, data) {
var id = data.ids[0]; var id = data.ids[0];
url(id); URL.set(id);
}, },
openpreview: function(event, data) { openpreview: function(event, data) {
app.requests.preview && pandora.api.cancel(app.requests.preview); app.requests.preview && pandora.api.cancel(app.requests.preview);
@ -963,11 +1345,14 @@ var pandora = new Ox.App({
app.$ui.mainMenu.checkItem('sortMenu_ordermovies_' + (data.operator === '' ? 'ascending' : 'descending')); app.$ui.mainMenu.checkItem('sortMenu_ordermovies_' + (data.operator === '' ? 'ascending' : 'descending'));
} }
}); });
that.display = function() {
};
return that; return that;
}, },
mainMenu: function() { mainMenu: function() {
var that = new Ox.MainMenu({ var isGuest = app.user.group == 'guest',
that = new Ox.MainMenu({
extras: [ extras: [
app.$ui.loadingIcon = new Ox.LoadingIcon({ app.$ui.loadingIcon = new Ox.LoadingIcon({
size: 'medium' size: 'medium'
@ -978,21 +1363,27 @@ var pandora = new Ox.App({
{ id: app.config.site.id + 'Menu', title: app.config.site.name, items: [ { id: app.config.site.id + 'Menu', title: app.config.site.name, items: [
{ id: 'home', title: 'Home' }, { id: 'home', title: 'Home' },
{}, {},
{ id: 'about', title: 'About' }, { id: 'about', title: 'About ' + app.config.site.name },
{ id: 'tour', title: 'Tour' }, { id: 'news', title: app.config.site.name + ' News' },
{ id: 'news', title: 'News' }, { id: 'tour', title: 'Take a Tour' },
{ id: 'faq', title: 'Frequently Asked Questions' }, { id: 'faq', title: 'Frequently Asked Questions' },
{ id: 'tos', title: 'Terms of Service' }, { id: 'tos', title: 'Terms of Service' },
{}, {},
{ id: 'contact', title: 'Contact' } { id: 'software', title: 'Software', items: [
{ id: 'about', title: 'About' },
{ id: 'download', title: 'Download' },
{ id: 'report', title: 'Report a Bug' }
] },
{},
{ id: 'contact', title: 'Contact ' + app.config.site.name }
] }, ] },
{ id: 'userMenu', title: 'User', items: [ { id: 'userMenu', title: 'User', items: [
{ id: 'username', title: 'User: not logged in', disabled: true }, { id: 'username', title: 'User: ' + (isGuest ? 'not logged in' : app.user.username), disabled: true },
{}, {},
{ id: 'preferences', title: 'Preferences...', disabled: true, keyboard: 'control ,' }, { id: 'preferences', title: 'Preferences...', disabled: isGuest, keyboard: 'control ,' },
{}, {},
{ id: 'register', title: 'Create an Account...' }, { id: 'register', title: 'Register...', disabled: !isGuest },
{ id: 'loginlogout', title: ['Login...', 'Logout...'] } { id: 'loginlogout', title: isGuest ? 'Login...' : 'Logout...' }
] }, ] },
{ id: 'listMenu', title: 'List', items: [ { id: 'listMenu', title: 'List', items: [
{ id: 'history', title: 'History', items: [ { id: 'history', title: 'History', items: [
@ -1135,7 +1526,7 @@ var pandora = new Ox.App({
url(id); url(id);
} else if (data.id == 'ordermovies') { } else if (data.id == 'ordermovies') {
var id = data.checked[0].id; var id = data.checked[0].id;
app.$ui.list.sortList(user.ui.sort[0].key, id == 'ascending' ? '' : '-'); app.$ui.list.sortList(app.user.ui.sort[0].key, id == 'ascending' ? '' : '-');
} else if (data.id == 'sortmovies') { } else if (data.id == 'sortmovies') {
var id = data.checked[0].id, var id = data.checked[0].id,
operator = Ox.getObjectById(app.config.sortKeys, id).operator; operator = Ox.getObjectById(app.config.sortKeys, id).operator;
@ -1174,128 +1565,14 @@ var pandora = new Ox.App({
], ],
height: 498, height: 498,
id: 'home', id: 'home',
title: app.options('name'), title: app.config.site.name,
width: 800 width: 800
}).open(); }).open();
} else if (data.id == 'register') {
app.$ui.accountDialog = ui.accountDialog('register').open();
} else if (data.id == 'loginlogout') { } else if (data.id == 'loginlogout') {
var $form = new Ox.Form({ app.$ui.accountDialog = (app.user.group == 'guest' ?
error: 'Unknown username or wrong password', ui.accountDialog('login') : ui.accountLogoutDialog()).open();
id: 'login',
items: [
{
element: new Ox.Input({
autovalidate: function(value, blur, callback) {
var length = value.length;
value = $.map(value.toLowerCase().split(''), function(v, i) {
if (new RegExp('[a-z0-9' + ((i == 0 || (i == length - 1 && blur)) ? '' : '\- ') + ']')(v)) {
return v
} else {
return null;
}
}).join('');
$.each(['--', '- ', ' -', '--'], function(i, v) {
while (value.indexOf(v) > -1) {
value = value.replace(new RegExp(v, 'g'), v[0]);
}
})
callback(value);
},
id: 'username',
label: 'Username',
labelWidth: 120,
validate: function(value, callback) {
pandora.api.findUser({
key: 'username',
value: value,
operator: '='
}, function(result) {
Ox.print('result', result)
var valid = result.data.users.length == 1;
callback({
message: 'Unknown Username',
valid: valid
});
});
},
width: 300
})
},
{
element: new Ox.Input({
id: 'password',
label: 'Password',
labelWidth: 120,
type: 'password',
validate: /.+/,
width: 300
})
}
],
submit: function(data, callback) {
pandora.api.login(data, function(result) {
if (result.status.code == 200) {
$dialog.close();
app.user = result.data.user;
app.$ui.mainMenu.getItem('username').options({
title: 'User: ' + app.user.name
});
app.$ui.mainMenu.getItem('preferences').options({
disabled: false
});
app.$ui.mainMenu.getItem('register').options({
disabled: true
});
} else {
callback([{ id: 'password', message: 'Incorrect Password' }]);
}
});
}
})
.bindEvent({
validate: function(event, data) {
$dialog[(data.valid ? 'enable' : 'disable') + 'Button']('signin');
}
}),
$dialog = new Ox.Dialog({
buttons: [
[
{
click: function() {
},
id: 'signup',
title: 'Sign up...'
},
{
click: function() {
},
id: 'reset',
title: 'Reset Password...'
}
],
[
{
click: function() {
$dialog.close();
app.$ui.mainMenu.getItem('loginlogout').toggleTitle();
},
id: 'cancel',
title: 'Cancel'
},
{
click: $form.submit,
disabled: true,
id: 'signin',
title: 'Sign in'
}
]
],
id: 'login',
minWidth: 332,
title: 'Sign in',
width: 332
}).append($form).open();
} else if (data.id == 'places') { } else if (data.id == 'places') {
var $manage = new Ox.SplitPanel({ var $manage = new Ox.SplitPanel({
elements: [ elements: [
@ -1610,11 +1887,19 @@ var pandora = new Ox.App({
orientation: 'vertical' orientation: 'vertical'
}) })
.bindEvent('resize', function(event, data) { .bindEvent('resize', function(event, data) {
if (!app.user.ui.item) {
resizeGroups(data); resizeGroups(data);
app.$ui.list.size(); app.$ui.list.size();
if (app.user.ui.listView == 'map') { if (app.user.ui.listView == 'map') {
app.$ui.map.triggerResize(); app.$ui.map.triggerResize();
} }
} else {
if (app.user.ui.itemView == 'timeline') {
app.$ui.editor.options({
width: data
});
}
}
}); });
return that; return that;
}, },
@ -1634,11 +1919,11 @@ var pandora = new Ox.App({
}, },
sectionButtons: function() { sectionButtons: function() {
var that = new Ox.ButtonGroup({ var that = new Ox.ButtonGroup({
buttons: items = [ buttons: [
{id: 'site', title: app.config.site.name}, {id: 'site', selected: app.user.ui.section == 'site', title: app.config.site.name},
{id: 'items', title: app.config.itemName.plural}, {id: 'items', selected: app.user.ui.section == 'items', title: app.config.itemName.plural},
{id: 'texts', title: 'Texts'}, {id: 'texts', selected: app.user.ui.section == 'texts', title: 'Texts'},
{id: 'admin', title: 'Admin'} {id: 'admin', selected: app.user.ui.section == 'admin', title: 'Admin'}
], ],
id: 'sectionButtons', id: 'sectionButtons',
selectable: true selectable: true
@ -1652,8 +1937,24 @@ var pandora = new Ox.App({
var that = new Ox.Element(); var that = new Ox.Element();
var $sections = []; var $sections = [];
$.each(app.user.ui.sections, function(i, id) { $.each(app.user.ui.sections, function(i, id) {
var menu = [];
if (id == 'lists') {
menu = [
{ id: 'new', title: 'New List...' },
{ id: 'newfromselection', title: 'New List from Selection...' },
{ id: 'newsmart', title: 'New Smart List...' },
{ id: 'newfromresults', title: 'New Smart List from Results...' },
{},
{ id: 'addselection', title: 'Add Selection to List...' }
];
} else if (id == 'public') {
menu = [
{ id: 'browse', title: 'More Public Lists...' },
];
}
var $section = new Ox.CollapsePanel({ var $section = new Ox.CollapsePanel({
id: id, id: id,
menu: menu,
size: 16, size: 16,
title: Ox.getObjectById(app.config.sections, id).title title: Ox.getObjectById(app.config.sections, id).title
}); });
@ -1681,11 +1982,11 @@ var pandora = new Ox.App({
sectionSelect: function() { sectionSelect: function() {
var that = new Ox.Select({ var that = new Ox.Select({
id: 'sectionSelect', id: 'sectionSelect',
items: items = [ items: [
{id: 'site', title: app.config.site.name}, {checked: app.user.ui.section == 'site', id: 'site', title: app.config.site.name},
{id: 'items', title: app.config.itemName.plural}, {checked: app.user.ui.section == 'items', id: 'items', title: app.config.itemName.plural},
{id: 'texts', title: 'Texts'}, {checked: app.user.ui.section == 'texts', id: 'texts', title: 'Texts'},
{id: 'admin', title: 'Admin'} {checked: app.user.ui.section == 'admin', id: 'admin', title: 'Admin'}
] ]
}).css({ }).css({
float: 'left', float: 'left',
@ -1748,10 +2049,10 @@ var pandora = new Ox.App({
var that = new Ox.Select({ var that = new Ox.Select({
id: 'viewSelect', id: 'viewSelect',
items: $.map(app.config.listViews, function(view, i) { items: $.map(app.config.listViews, function(view, i) {
view.title = 'View ' + view.title return $.extend($.extend({}, view), {
return $.extend({
checked: app.user.ui.listView == view.id, checked: app.user.ui.listView == view.id,
}, view); title: 'View ' + view.title
});
}), }),
width: 144 width: 144
}) })
@ -1763,9 +2064,6 @@ var pandora = new Ox.App({
var id = data.selected[0].id; var id = data.selected[0].id;
app.user.ui.listView = id; app.user.ui.listView = id;
app.$ui.mainMenu.checkItem('viewMenu_movies_' + id); app.$ui.mainMenu.checkItem('viewMenu_movies_' + id);
//$ui.list.$element.replaceWith(constructList(id));
// Ox.print('change ... id', id, list = app.constructList(id), list.options(), list.options('id'))
//$ui.contentPanel.replace('list', constructList(id));
app.$ui.contentPanel.replace(1, app.$ui.list = ui.list(id)); app.$ui.contentPanel.replace(1, app.$ui.list = ui.list(id));
}); });
return that; return that;
@ -1932,6 +2230,78 @@ var pandora = new Ox.App({
})(); })();
var URL = (function() {
var old = {
user: {
ui: {}
}
},
regexps = {
'^(|about|faq|home|news|software|terms|tour)$': function(url) {
app.user.ui.section = 'site';
app.user.ui.sitePage = url;
},
'^(|find)$': function() {
app.user.ui.section = 'items';
app.user.ui.item = '';
},
'^(calendar|calendars|clips|icons|flow|map|maps|timelines)$': function() {
app.user.ui.section = 'items';
app.user.ui.item = '';
app.user.ui.listView = url;
},
'^[0-9A-Z]': function() {
var split = url.split('/'),
item = split[0],
view = new RegExp(
'^(calendar|clips|files|info|map|player|statistics|timeline)$'
)(split[1]) || app.user.ui.itemView;
app.user.ui.section = 'items';
app.user.ui.item = item;
app.user.ui.itemView = view;
},
'^texts$': function() {
app.user.ui.section = 'texts';
},
'^admin$': function() {
app.user.ui.section = 'admin';
}
};
return {
set: function(url) {
history.pushState({}, '', '/' + url);
old.user.ui = $.extend({}, app.user.ui); // make a clone
URL.update();
},
parse: function() {
url = document.location.pathname.substr(1) + document.location.hash;
$.each(regexps, function(re, fn) {
Ox.print(url, 're', re)
re = new RegExp(re);
if (re(url)) {
fn(url);
return false;
}
});
},
update: function() {
URL.parse();
if (!old.user.ui.item && app.user.ui.item) {
ui.item(app.user.ui.item, app.user.ui.itemView).display();
} else if (old.user.ui.item && !app.user.ui.item) {
ui.list(app.user.ui.listView).display();
}
}
}
}());
var url = function(url) { var url = function(url) {
var currentURL = document.location.pathname.substr(1) + document.location.hash, var currentURL = document.location.pathname.substr(1) + document.location.hash,
match = false; match = false;