diff --git a/pandora/static/js/pandora.js b/pandora/static/js/pandora.js index 30ee89cd4..d11aa860b 100755 --- a/pandora/static/js/pandora.js +++ b/pandora/static/js/pandora.js @@ -37,7 +37,14 @@ var app = new Ox.App({ app.$ui.statusbar = app.constructStatusbar(); app.$ui.app = app.constructApp(); + + app.$body.css({ + opacity: 0 + }); app.$ui.app.appendTo(app.$body); + app.$body.animate({ + opacity: 1 + }, 2000); Ox.Request.requests() && app.$ui.loadingIcon.start(); Ox.Event.bind('', 'requestStart', function() { @@ -183,7 +190,7 @@ app.Query = (function() { toString: function() { Ox.print('tS', app.user.ui.find) return Ox.serialize({ - find: constructFind(Query.toObject()), + find: constructFind(app.Query.toObject()), sort: app.user.ui.sort[0].operator + app.user.ui.sort[0].key, view: app.user.ui.listView }); @@ -413,9 +420,9 @@ app.constructGroups = function() { }) .bindEvent('select', function(event, data) { Ox.print('select', i) - var group = groups[i], + var group = app.ui.groups[i], query; - groups[i].query.conditions = $.map(data.ids, function(v) { + app.ui.groups[i].query.conditions = $.map(data.ids, function(v) { return { key: group.id, value: v, @@ -430,7 +437,7 @@ app.constructGroups = function() { }), options.callback); } }); - $.each(groups, function(i_, group_) { + $.each(app.ui.groups, function(i_, group_) { if (i_ != i) { app.$ui.groups[i_].options({ request: function(options) { @@ -515,7 +522,7 @@ app.constructList = function(view) { keys: ['director', 'id', 'posterHeight', 'posterWidth', 'posterURL', 'title'], request: function(options) { app.request('find', $.extend(options, { - query: Query.toObject() + query: app.Query.toObject() }), options.callback); }, size: 128, @@ -795,4 +802,1142 @@ app.constructMainMenu = function() { { id: 'redo', title: 'Redo', disabled: true, keyboard: 'shift control z' }, {}, { id: 'cut', title: 'Cut', disabled: true, keyboard: 'control x' }, - { id: 'copy', title: 'Copy', disabled: true, keyboard: 'control c \ No newline at end of file + { id: 'copy', title: 'Copy', disabled: true, keyboard: 'control c' }, + { id: 'paste', title: 'Paste', disabled: true, keyboard: 'control v' }, + { id: 'delete', title: 'Delete', disabled: true, keyboard: 'delete' }, + {}, + { id: 'selectall', title: 'Select All', disabled: true, keyboard: 'control a' }, + { id: 'selectnone', title: 'Select None', disabled: true, keyboard: 'shift control a' }, + { id: 'invertselection', title: 'Invert Selection', disabled: true, keyboard: 'alt control a' } + ] }, + { id: 'viewMenu', title: 'View', items: [ + { id: 'movies', title: 'View Movies', items: [ + { group: 'viewmovies', min: 1, max: 1, items: $.map(app.config.listViews, function(view, i) { + return $.extend({ + checked: app.user.ui.listView == view.id, + }, view); + }) }, + ]}, + { id: 'icons', title: 'Icons', items: [ + { id: 'poster', title: 'Poster' }, + { id: 'still', title: 'Still' }, + { id: 'timeline', title: 'Timeline' } + ] }, + { id: 'info', title: 'Info', items: [ + { id: 'poster', title: 'Poster' }, + { id: 'video', title: 'Video' } + ] }, + {}, + { id: 'openmovie', title: ['Open Movie', 'Open Movies'], disabled: true, items: $.map(app.config.itemViews, function(view, i) { + return view; + }) }, + {}, + { id: 'lists', title: 'Hide Lists', keyboard: 'shift l' }, + { id: 'info', title: 'Hide Info', keyboard: 'shift i' }, + { id: 'groups', title: 'Hide Groups', keyboard: 'shift g' }, + { id: 'movies', title: 'Hide Movies', disabled: true, keyboard: 'shift m' } + ]}, + { id: 'sortMenu', title: 'Sort', items: [ + { id: 'sortmovies', title: 'Sort Movies by', items: [ + { group: 'sortmovies', min: 1, max: 1, items: $.map(app.config.sortKeys, function(key, i) { + return $.extend({ + checked: app.user.ui.sort[0].key == key.id, + }, key); + }) } + ] }, + { id: 'ordermovies', title: 'Order Movies', items: [ + { group: 'ordermovies', min: 1, max: 1, items: [ + { id: 'ascending', title: 'Ascending', checked: app.user.ui.sort[0].operator === '' }, + { id: 'descending', title: 'Descending', checked: app.user.ui.sort[0].operator == '-' } + ]} + ] }, + { id: 'advancedsort', title: 'Advanced Sort...', keyboard: 'shift control s' }, + {}, + { id: 'groupsstuff', title: 'Groups Stuff' } + ] }, + { id: 'findMenu', title: 'Find', items: [ + { id: 'find', title: 'Find', items: [ + { group: 'find', min: 1, max: 1, items: $.map(app.config.findKeys, function(key, i) { + return $.extend({ + checked: app.user.ui.findQuery.conditions.length && + (app.user.ui.findQuery.conditions[0].key == key.id || + (app.user.ui.findQuery.conditions[0].key === '' && key.id == 'all')), + }, key) + }) } + ] }, + { id: 'advancedfind', title: 'Advanced Find...', keyboard: 'shift control f' } + ] }, + { id: 'dataMenu', title: 'Data', items: [ + { id: 'titles', title: 'Manage Titles...' }, + { id: 'names', title: 'Manage Names...' }, + {}, + { id: 'posters', title: 'Manage Stills...' }, + { id: 'posters', title: 'Manage Posters...' }, + {}, + { id: 'places', title: 'Manage Places...' }, + { id: 'events', title: 'Manage Events...' }, + {}, + { id: 'users', title: 'Manage Users...' }, + { id: 'lists', title: 'Manage Lists...' }, + ] }, + { id: 'codeMenu', title: 'Code', items: [ + { id: 'download', title: 'Download' }, + { id: 'contribute', title: 'Contribute' }, + { id: 'report', title: 'Report a Bug' }, + ] }, + { id: 'helpMenu', title: 'Help', items: [ + { id: 'help', title: app.options('name') + ' Help', keyboard: 'shift ?' } + ] }, + { id: 'debugMenu', title: 'Debug', items: [ + { id: 'query', title: 'Show Query' } + ] }, + { id: 'testMenu', title: 'Test', items: [ + { group: 'foogroup', items: [ + { id: 'item1', title: 'Item 1' }, + { id: 'item2', title: 'Item 2' } + ] } + ] } + ] + }) + .bindEvent({ + change: function(event, data) { + if (data.id == 'find') { + var id = data.checked[0].id; + app.$ui.findSelect.selectItem(id); + } else if (data.id == 'ordermovies') { + var id = data.checked[0].id; + app.$ui.list.sort(user.ui.sort[0].key, id == 'ascending' ? '' : '-'); + } else if (data.id == 'sortmovies') { + var id = data.checked[0].id, + operator = Ox.getObjectById(app.config.sortKeys, id).operator; + app.$ui.mainMenu.checkItem('sortMenu_ordermovies_' + (operator === '' ? 'ascending' : 'descending')); + app.$ui.list.sort(id, operator); + } + }, + click: function(event, data) { + if (data.id == 'about') { + var $dialog = new Ox.Dialog({ + buttons: [ + { + click: function() { + $dialog.close(); + }, + id: 'close', + title: 'Close' + } + ], + id: 'about', + title: 'About' + }).open(); + } else if (data.id == 'home') { + var $dialog = new Ox.Dialog({ + buttons: [ + { + click: function() { + $dialog.close(); + }, + id: 'close', + title: 'Close' + } + ], + height: 498, + id: 'home', + title: app.options('name'), + width: 800 + }).open(); + } else if (data.id == 'loginlogout') { + var $form = new Ox.Form({ + error: 'Unknown username or wrong password', + 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) { + app.request('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 + }) + .bindEvent({ + validate: function(event, data) { + $dialog[(data.valid ? 'enable' : 'disable') + 'Button']('signin'); + } + }) + }, + { + element: new Ox.Input({ + id: 'password', + label: 'Password', + labelWidth: 120, + type: 'password', + validate: /.+/, + width: 300 + }) + } + ], + submit: function(data, callback) { + app.request('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' }]); + } + }); + } + }), + $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') { + var $manage = new Ox.SplitPanel({ + elements: [ + { + collapsible: true, + element: new Ox.SplitPanel({ + elements: [ + { + element: new Ox.Toolbar({ + orientation: 'horizontal', + size: 44 + }).append( + app.$ui.findPlacesElement = new Ox.FormElementGroup({ + elements: [ + app.$ui.findPlacesSelect = new Ox.Select({ + id: 'findPlacesSelect', + items: [ + { id: 'name', title: 'Find: Name' }, + { id: 'region', title: 'Find: Region' }, + { id: 'user', title: 'Find: User' } + ], + overlap: 'right', + type: 'image' + }) + .bindEvent({ + change: function(event, data) { + app.$ui.findPlacesSelect.loseFocus(); + app.$ui.findPlacesInput.options({ + placeholder: data.selected[0].title + }); + } + }), + app.$ui.findPlacesInput = new Ox.Input({ + clear: true, + id: 'findPlacesInput', + placeholder: 'Find: Name', + width: 168 + }) + ], + id: 'findPlacesElement' + }) + .css({ + float: 'left', + margin: '4px' + }) + ).append( + app.$ui.sortPlacesSelect = new Ox.Select({ + id: 'sortPlacesSelect', + items: [ + { id: 'name', title: 'Sort by Name', checked: true }, + { id: 'region', title: 'Sort by Region' }, + { id: 'size', title: 'Sort by Size' }, + { id: 'latitude', title: 'Sort by Latitude' }, + { id: 'longitude', title: 'Sort by Longitude' }, + { id: 'clips', title: 'Sort by Number of Clips' }, + { id: 'user', title: 'Sort by User' }, + { id: 'datecreated', title: 'Sort by Date Added' }, + { id: 'datemodified', title: 'Sort by Date Modified' } + ], + width: 184 + }) + .css({ + float: 'left', + margin: '0 4px 4px 4px' + }) + ), + size: 44 + }, + { + element: new Ox.Element('div') + }, + { + element: new Ox.Toolbar({ + orientation: 'horizontal', + size: 16 + }), + size: 16 + } + ], + orientation: 'vertical' + }), + resizable: true, + resize: [128, 192, 256], + size: 192 + }, + { + element: new Ox.SplitPanel({ + elements: [ + { + element: new Ox.Toolbar({ + orientation: 'horizontal', + size: 24 + }).append( + app.$ui.labelsButton = new Ox.Button({ + id: 'labelsButton', + title: [ + {id: 'show', title: 'Show Labels'}, + {id: 'hide', title: 'Hide Labels'} + ], + width: 96 + }) + .css({ + float: 'left', + margin: '4px' + }) + ).append( + app.$ui.findMapInput = new Ox.Input({ + clear: true, + id: 'findMapInput', + placeholder: 'Find on Map', + width: 192 + }) + .css({ + float: 'right', + margin: '4px' + }) + ), + size: 24 + }, + { + element: app.$ui.map = new Ox.Map({ + places: ['Boston', 'Barcelona', 'Berlin', 'Beirut', 'Bombay', 'Bangalore', 'Beijing'] + }).css({ + left: 0, + top: 0, + right: 0, + bottom: 0 + }) + }, + { + element: new Ox.Toolbar({ + orientation: 'horizontal', + size: 24 + }).append( + app.$ui.newPlaceButton = new Ox.Button({ + id: 'newPlaceButton', + title: 'New Place...', + width: 96 + }) + .css({ + float: 'left', + margin: '4px' + }) + ), + size: 24 + } + ], + orientation: 'vertical' + }) + } + ], + orientation: 'horizontal' + }).css({ + top: '24px', + bottom: '24px', + }), + $dialog = new Ox.Dialog({ + buttons: [ + { + click: function() { + $dialog.close(); + }, + id: 'close', + title: 'Close', + value: 'Close' + } + ], + height: parseInt(app.$document.height() * 0.8), + id: 'places', + minHeight: 400, + minWidth: 600, + padding: 0, + title: 'Manage Places', + width: parseInt(app.$document.width() * 0.8) + }).css({ + overflow: 'hidden' + }).append($manage).open(); + } + } + }); +} + +app.constructSections = function() { + var $sections = []; + $.each(app.user.ui.sections, function(i, id) { + var $section = new Ox.CollapsePanel({ + id: id, + size: 'small', + title: Ox.getObjectById(app.config.sections, id).title + }); + $sections.push($section); + $section.$content.append( + $('