From a09813bc28f5959338476567347eed5555cb9cd8 Mon Sep 17 00:00:00 2001 From: rolux Date: Mon, 26 Sep 2011 18:46:31 +0200 Subject: [PATCH] update to new UI/URL handling --- static/js/pandora.js | 12 +++++------ static/js/pandora/UI.js | 28 ++++++++++++++++---------- static/js/pandora/URL.js | 30 ++++++++++------------------ static/js/pandora/pandora.js | 5 +---- static/js/pandora/ui/browser.js | 2 +- static/js/pandora/ui/contentPanel.js | 2 +- static/js/pandora/ui/filter.js | 6 +++--- static/js/pandora/ui/folders.js | 4 ++-- static/js/pandora/ui/foldersList.js | 4 ++-- static/js/pandora/ui/infoView.js | 2 +- static/js/pandora/ui/item.js | 12 +++++------ static/js/pandora/ui/list.js | 18 ++++++++--------- static/js/pandora/ui/listDialog.js | 2 +- static/js/pandora/ui/mainPanel.js | 2 +- static/js/pandora/ui/orderButton.js | 2 +- static/js/pandora/ui/rightPanel.js | 10 +++++----- static/js/pandora/ui/sortSelect.js | 2 +- static/js/pandora/ui/videoPreview.js | 7 ++++--- static/js/pandora/ui/viewSelect.js | 2 +- 19 files changed, 73 insertions(+), 79 deletions(-) diff --git a/static/js/pandora.js b/static/js/pandora.js index a28bd067..b0403c2b 100644 --- a/static/js/pandora.js +++ b/static/js/pandora.js @@ -191,13 +191,13 @@ Ox.load({ function unloadWindow() { // fixme: ajax request has to have async set to false for this to work - pandora.user.ui.section == 'items' && - ['player', 'timeline'].indexOf(pandora.user.ui.itemView) > -1 && - pandora.user.ui.item && - pandora.UI.set( - 'videoPosition|' + pandora.user.ui.item, + pandora.user.ui.section == 'items' + && pandora.user.ui.item + && ['video', 'timeline'].indexOf(pandora.user.ui.itemView) > -1 + && pandora.UI.set( + 'videoPosition.' + pandora.user.ui.item, pandora.$ui[ - pandora.user.ui.itemView == 'player' ? 'player' : 'editor' + pandora.user.ui.itemView == 'video' ? 'player' : 'editor' ].options('position') ); } diff --git a/static/js/pandora/UI.js b/static/js/pandora/UI.js index 4dd7fe7e..a43dab86 100644 --- a/static/js/pandora/UI.js +++ b/static/js/pandora/UI.js @@ -1,15 +1,19 @@ // vim: et:ts=4:sw=4:sts=4:ft=javascript pandora.UI = (function() { - // fixme: "|" as separator doesn't buy us much, use "." var self = {}, that = {}; self.previousUI = {}; - // sets pandora.user.ui.key to val - // key foo|bar|baz sets pandora.user.ui.foo.bar.baz - // (we have to use '|' as a separator since list names may contain '.') - // val null removes a key + that.bind = function() { + Ox.Event.bind.apply(null, arguments); + }; + that.encode = function(val) { + return val.replace(/\./g, '\\.'); + }; that.getPrevious = function(key) { return !key ? self.previousUI : self.previousUI[key]; }; + // sets pandora.user.ui.key to val + // key foo.bar.baz sets pandora.user.ui.foo.bar.baz + // val null removes a key that.set = function(/*{key: val} or key, val*/) { var obj = Ox.makeObject(arguments), set = {}; @@ -18,25 +22,25 @@ pandora.UI = (function() { var listSettings = pandora.site.listSettings if (key == 'list' && !pandora.user.ui.lists[val]) { // add default list settings - obj['lists|' + val] = {}; + obj['lists.' + that.encode(val)] = {}; Ox.forEach(listSettings, function(listSetting, setting) { - obj['lists|' + val][listSetting] = pandora.site.user.ui[setting]; + obj['lists.' + that.encode(val)][listSetting] = pandora.site.user.ui[setting]; }); } else if (Object.keys(listSettings).indexOf(key) > -1) { // add list setting - obj['lists|' + pandora.user.ui.list + '|' + listSettings[key]] = val; + obj['lists.' + that.encode(pandora.user.ui.list) + '.' + listSettings[key]] = val; } else if ( key == 'itemView' && ['video', 'timeline'].indexOf(val) > -1 && !pandora.user.ui.videoPoints[pandora.user.ui.item] ) { // add default videoPoints - obj['videoPoints|' + pandora.user.ui.item] = {'in': 0, out: 0, position: 0}; + obj['videoPoints.' + pandora.user.ui.item] = {'in': 0, out: 0, position: 0}; } }); Ox.forEach(obj, function(val, key) { var i = 0, - keys = key.split('|'), + keys = key.split('.'), ui = pandora.user.ui; while (i < keys.length - 1) { ui = ui[keys[i]]; @@ -48,7 +52,9 @@ pandora.UI = (function() { } else { ui[keys[i]] = val; } - set[key] = val; + // set[key] = val; + // fixme: remove later + set[key.replace(/\./g, '|')] = val; } }); if (Ox.len(set)) { diff --git a/static/js/pandora/URL.js b/static/js/pandora/URL.js index 081539b0..fa4517de 100644 --- a/static/js/pandora/URL.js +++ b/static/js/pandora/URL.js @@ -200,19 +200,16 @@ pandora.URL = (function() { } function getState() { - if (!pandora.user.ui.lists[pandora.user.ui.list]) { - pandora.user.ui.lists[pandora.user.ui.list] = pandora.site.user.ui.lists['']; - } return { type: pandora.user.ui.section == 'items' ? pandora.site.itemsSection : pandora.user.ui.section, item: pandora.user.ui.item, view: !pandora.user.ui.item - ? pandora.user.ui.lists[pandora.user.ui.list].view + ? pandora.user.ui.listView : pandora.user.ui.itemView, sort: !pandora.user.ui.item - ? pandora.user.ui.lists[pandora.user.ui.list].sort + ? pandora.user.ui.listSort : pandora.isClipView(pandora.user.ui.itemView) ? pandora.user.ui.itemSort : [], find: !pandora.user.ui.item @@ -298,17 +295,10 @@ pandora.URL = (function() { list: getListsState(state.find) }); - if (!pandora.user.ui.lists[pandora.user.ui.list]) { - pandora.UI.set( - 'lists|' + pandora.user.ui.list, - pandora.site.user.ui.lists[''] - ); - } - if (state.view) { pandora.UI.set( !pandora.user.ui.item - ? 'lists|' + pandora.user.ui.list + '|view' + ? 'lists.' + pandora.user.ui.list + '.view' : 'itemView', state.view ); @@ -320,13 +310,13 @@ pandora.URL = (function() { if (['video', 'timeline'].indexOf(pandora.user.ui.itemView) > -1) { if (state.span) { - pandora.UI.set('videoPoints|' + pandora.user.ui.item, { + pandora.UI.set('videoPoints.' + pandora.user.ui.item, { position: state.span[0], 'in': state.span[1] || 0, out: state.span[2] || 0 }); } else if (!pandora.user.ui.videoPoints[pandora.user.ui.item]) { - pandora.UI.set('videoPoints|' + pandora.user.ui.item, { + pandora.UI.set('videoPoints.' + pandora.user.ui.item, { position: 0, 'in': 0, out: 0 @@ -336,7 +326,7 @@ pandora.URL = (function() { state.sort && pandora.UI.set( !pandora.user.ui.item - ? 'lists|' + pandora.user.ui.list + '|sort' + ? 'lists.' + pandora.user.ui.list + '.sort' : 'itemSort', state.sort ); @@ -365,7 +355,7 @@ pandora.URL = (function() { pandora.$ui.mainMenu.replaceMenu('sortMenu', pandora.getSortMenu()); pandora.$ui.sortSelect.replaceWith(pandora.$ui.sortSelect = pandora.ui.sortSelect()); if (isClipView && !wasClipView) { - pandora.UI.set('lists|' + pandora.user.ui.list + '|selected', []); + pandora.UI.set('lists.' + pandora.user.ui.list + '.selected', []); } } } @@ -409,7 +399,7 @@ pandora.URL = (function() { previousUI.itemView == 'video' ? 'player' : 'editor' ]; $item && pandora.UI.set( - 'videoPoints|' + previousUI.item + '|position', + 'videoPoints.' + previousUI.item + '.position', $item.options('position') ); } @@ -442,7 +432,7 @@ pandora.URL = (function() { pandora.$ui.mainMenu.replaceMenu('sortMenu', pandora.getSortMenu()); pandora.$ui.sortSelect.replaceWith(pandora.$ui.sortSelect = pandora.ui.sortSelect()); if (isClipView && !wasClipView) { - pandora.UI.set('lists|' + pandora.user.ui.list + '|selected', []); + pandora.UI.set('lists.' + pandora.user.ui.list + '.selected', []); } } } @@ -480,7 +470,7 @@ pandora.URL = (function() { previousUI.itemView == 'video' ? 'player' : 'editor' ]; $item && pandora.UI.set( - 'videoPoints|' + previousUI.item + '|position', + 'videoPoints.' + previousUI.item + '.position', $item.options('position') ); } diff --git a/static/js/pandora/pandora.js b/static/js/pandora/pandora.js index fb62d0c7..e1e34f92 100644 --- a/static/js/pandora/pandora.js +++ b/static/js/pandora/pandora.js @@ -569,6 +569,7 @@ pandora.signout = function(data) { }; pandora.reloadGroups = function(i) { + // fixme: no longer needed var query = pandora.user.ui.query, view = pandora.user.ui.lists[pandora.user.ui.list].listView; if (view == 'clip') { @@ -688,10 +689,6 @@ pandora.resizeFolders = function() { }); }; -pandora.saveVideoPosition = function() { - //alert(JSON.stringify(['videoPosition|' + old.user.ui.item, pandora.$ui[old.user.ui.itemView == 'player' ? 'player' : 'editor'].options('position')])); -}; - pandora.selectList = function() { if (pandora.user.ui.list) { pandora.api.findLists({ diff --git a/static/js/pandora/ui/browser.js b/static/js/pandora/ui/browser.js index 66a99c96..1f1ff7fe 100644 --- a/static/js/pandora/ui/browser.js +++ b/static/js/pandora/ui/browser.js @@ -94,7 +94,7 @@ pandora.ui.browser = function() { } }); pandora.enableDragAndDrop(that, false); - Ox.Event.bind({ + pandora.UI.bind({ icons: function(value) { that.options({ borderRadius: value == 'posters' ? 0 : 8, diff --git a/static/js/pandora/ui/contentPanel.js b/static/js/pandora/ui/contentPanel.js index 852ef9c3..1ee38775 100644 --- a/static/js/pandora/ui/contentPanel.js +++ b/static/js/pandora/ui/contentPanel.js @@ -28,7 +28,7 @@ pandora.ui.contentPanel = function() { ], orientation: 'vertical' }); - Ox.Event.bind({ + pandora.UI.bind({ listView: function() { that.replaceElement(1, pandora.$ui.list = pandora.ui.list()); }, diff --git a/static/js/pandora/ui/filter.js b/static/js/pandora/ui/filter.js index bab3e324..ab6104ff 100644 --- a/static/js/pandora/ui/filter.js +++ b/static/js/pandora/ui/filter.js @@ -18,8 +18,8 @@ pandora.ui.filter = function(list) { type: 'list' }), list: list ? null : { - sort: pandora.user.ui.lists[pandora.user.ui.list].sort, - view: pandora.user.ui.lists[pandora.user.ui.list].listView + sort: pandora.user.ui.listSort, + view: pandora.user.ui.listView }, query: list ? list.query : pandora.user.ui.query, sortKeys: pandora.site.sortKeys, @@ -49,7 +49,7 @@ pandora.ui.filter = function(list) { }); } else { - pandora.UI.set('query', data.query); + pandora.UI.set({find: data.query}); pandora.URL.push(); //reload(); } diff --git a/static/js/pandora/ui/folders.js b/static/js/pandora/ui/folders.js index 1fc0bcee..8d28216f 100644 --- a/static/js/pandora/ui/folders.js +++ b/static/js/pandora/ui/folders.js @@ -49,7 +49,7 @@ pandora.ui.folders = function() { type: data.id == 'new' ? 'static' : 'smart' }, function(result) { var id = result.data.id; - pandora.UI.set(['lists', id].join('|'), pandora.site.user.ui.lists['']); // fixme: necessary? + pandora.UI.set('lists.' + id, pandora.site.user.ui.lists['']); // fixme: necessary? pandora.URL.set('?find=list:' + id) Ox.Request.clearCache(); // fixme: remove $list.reloadList().bindEventOnce({ @@ -220,7 +220,7 @@ pandora.ui.folders = function() { }, toggle: function(data) { data.collapsed && pandora.$ui.folderList[folder.id].loseFocus(); - pandora.UI.set('showFolder|items|' + folder.id, !data.collapsed); + pandora.UI.set('showFolder.items.' + folder.id, !data.collapsed); pandora.resizeFolders(); } }); diff --git a/static/js/pandora/ui/foldersList.js b/static/js/pandora/ui/foldersList.js index c3b2296f..e42a7ebe 100644 --- a/static/js/pandora/ui/foldersList.js +++ b/static/js/pandora/ui/foldersList.js @@ -263,7 +263,7 @@ pandora.ui.folderList = function(id) { type: event.keys == '' ? 'static' : 'smart' }, function(result) { var id = result.data.id; - pandora.UI.set(['lists', id].join('|'), pandora.site.user.ui.lists['']); // fixme: necessary? + pandora.UI.set('lists.' + id, pandora.site.user.ui.lists['']); // fixme: necessary? pandora.URL.set('?find=list:' + id) Ox.Request.clearCache(); // fixme: remove that.reloadList().bindEventOnce({ @@ -321,7 +321,7 @@ pandora.ui.folderList = function(id) { pandora.api.removeList({ id: data.ids[0] }, function(result) { - pandora.UI.set(['lists', data.ids[0]].join('|'), null); + pandora.UI.set('lists.' + data.ids[0], null); Ox.Request.clearCache(); // fixme: remove that.reloadList(); }); diff --git a/static/js/pandora/ui/infoView.js b/static/js/pandora/ui/infoView.js index 6ecfdfb8..d539aa9b 100644 --- a/static/js/pandora/ui/infoView.js +++ b/static/js/pandora/ui/infoView.js @@ -518,7 +518,7 @@ pandora.ui.infoView = function(data) { $data.css({height: height + 'px'}); }; - Ox.Event.bind({ + pandora.UI.bind({ icons: that.reload, showSitePoster: that.reload }); diff --git a/static/js/pandora/ui/item.js b/static/js/pandora/ui/item.js index 32d3c45f..c52ab916 100644 --- a/static/js/pandora/ui/item.js +++ b/static/js/pandora/ui/item.js @@ -146,7 +146,7 @@ pandora.ui.item = function() { 'in': pandora.$ui.clips.value(id, 'in'), out: pandora.$ui.clips.value(id, 'out') }; - pandora.UI.set('videoPoints|' + pandora.user.ui.item, Ox.extend(points, { + pandora.UI.set('videoPoints.' + pandora.user.ui.item, Ox.extend(points, { position: points['in'] })); pandora.UI.set({ @@ -212,7 +212,7 @@ pandora.ui.item = function() { } } })); - Ox.Event.bind({ + pandora.UI.bind({ itemSort: function(value) { pandora.$ui.clips.options({sort: value}); } @@ -323,14 +323,14 @@ pandora.ui.item = function() { width: pandora.$ui.document.width() - pandora.$ui.mainPanel.size(0) - 1 }).bindEvent({ points: function(data) { - pandora.UI.set('videoPoints|' + pandora.user.ui.item, { + pandora.UI.set('videoPoints.' + pandora.user.ui.item, { 'in': data['in'], out: data.out, position: pandora.user.ui.videoPoints[pandora.user.ui.item].position }); }, position: function(data) { - pandora.UI.set('videoPoints|' + pandora.user.ui.item + '|position', data.position); + pandora.UI.set('videoPoints.' + pandora.user.ui.item + '|position', data.position); }, resize: function(data) { Ox.print('RESIZE!!', data.size) @@ -453,7 +453,7 @@ pandora.ui.item = function() { items: [], keys: ['id', 'value', 'in', 'out', 'aspectRatio', 'item'], size: 128, - sort: pandora.user.ui.lists[pandora.user.ui.list].sort, + sort: pandora.user.ui.itemSort, unique: 'id' }).bindEvent({ open: function(data) { @@ -463,7 +463,7 @@ pandora.ui.item = function() { 'in': pandora.$ui.clips.value(id, 'in'), out: pandora.$ui.clips.value(id, 'out') }; - pandora.UI.set('videoPoints|' + item, Ox.extend(points, { + pandora.UI.set('videoPoints.' + item, Ox.extend(points, { position: points['in'] })); pandora.URL.set(item + '/timeline'); diff --git a/static/js/pandora/ui/list.js b/static/js/pandora/ui/list.js index a2e8223c..86344325 100644 --- a/static/js/pandora/ui/list.js +++ b/static/js/pandora/ui/list.js @@ -112,18 +112,18 @@ pandora.ui.list = function() { .bindEvent({ columnchange: function(data) { var columnWidth = {}; - pandora.UI.set(['lists', pandora.user.ui.list, 'columns'].join('|'), data.ids); + pandora.UI.set({listColumns: data.ids}); /* data.ids.forEach(function(id) { columnWidth[id] = - pandora.user.ui.lists[pandora.user.ui.list].columnWidth[id] || - Ox.getObjectById(pandora.site.sortKeys, id).width + pandora.user.ui.lists[pandora.user.ui.list].columnWidth[id] + || Ox.getObjectById(pandora.site.sortKeys, id).width }); - pandora.UI.set(['lists', pandora.user.ui.list, 'columnWidth'].join('|'), columnWidth); + pandora.UI.set({listColumnWidth: columnWidth}); */ }, columnresize: function(data) { - pandora.UI.set(['lists', pandora.user.ui.list, 'columnWidth', data.id].join('|'), data.width); + pandora.UI.set('listColumnWidth.' + data.id, data.width); }, resize: function(data) { // this is the resize event of the split panel that.size(); @@ -276,7 +276,7 @@ pandora.ui.list = function() { 'in': that.value(id, 'in'), out: that.value(id, 'out') }; - pandora.UI.set('videoPoints|' + item, Ox.extend(points, { + pandora.UI.set('videoPoints.' + item, Ox.extend(points, { position: points['in'] })); pandora.UI.set({ @@ -474,7 +474,7 @@ pandora.ui.list = function() { 'in': pandora.$ui.clips.value(id, 'in'), out: pandora.$ui.clips.value(id, 'out') }; - pandora.UI.set('videoPoints|' + item, Ox.extend(points, { + pandora.UI.set('videoPoints.' + item, Ox.extend(points, { position: points['in'] })); pandora.URL.set(item + '/timeline'); @@ -680,13 +680,13 @@ pandora.ui.list = function() { pandora.$ui.rightPanel.replaceElement(1, pandora.$ui.contentPanel = pandora.ui.contentPanel()); }; - Ox.Event.bind({ + pandora.UI.bind({ listSort: function(value) { that.options({sort: value}); } }); if (pandora.user.ui.listView == 'grid') { - Ox.Event.bind({ + pandora.UI.bind({ icons: function(value) { that.options({ borderRadius: value == 'posters' ? 0 : 16, diff --git a/static/js/pandora/ui/listDialog.js b/static/js/pandora/ui/listDialog.js index f2d4e093..f7f606bf 100644 --- a/static/js/pandora/ui/listDialog.js +++ b/static/js/pandora/ui/listDialog.js @@ -128,7 +128,7 @@ pandora.ui.listIconPanel = function(list) { min: 1, orientation: 'vertical', size: 128, - sort: pandora.user.ui.lists[pandora.user.ui.list].sort, + sort: pandora.user.ui.listSort, unique: 'id' }) .css({width: '144px'}) diff --git a/static/js/pandora/ui/mainPanel.js b/static/js/pandora/ui/mainPanel.js index b8e7f80a..17555a00 100644 --- a/static/js/pandora/ui/mainPanel.js +++ b/static/js/pandora/ui/mainPanel.js @@ -17,7 +17,7 @@ pandora.ui.mainPanel = function() { ], orientation: 'horizontal' }); - Ox.Event.bind({ + pandora.UI.bind({ item: function(value) { if (!value || !pandora.UI.getPrevious('item')) { that.replaceElement(1, pandora.$ui.rightPanel = pandora.ui.rightPanel()); diff --git a/static/js/pandora/ui/orderButton.js b/static/js/pandora/ui/orderButton.js index f481da91..d1afaaff 100644 --- a/static/js/pandora/ui/orderButton.js +++ b/static/js/pandora/ui/orderButton.js @@ -25,7 +25,7 @@ pandora.ui.orderButton = function() { function getTitle() { return pandora.user.ui.listSort[0].operator == '+' ? 'up' : 'down'; } - Ox.Event.bind({ + pandora.UI.bind({ listSort: function() { that.options({title: getTitle()}); } diff --git a/static/js/pandora/ui/rightPanel.js b/static/js/pandora/ui/rightPanel.js index abd72976..e0e67b92 100644 --- a/static/js/pandora/ui/rightPanel.js +++ b/static/js/pandora/ui/rightPanel.js @@ -39,12 +39,12 @@ pandora.ui.rightPanel = function() { if (!pandora.user.ui.item) { pandora.resizeGroups(); pandora.$ui.list.size(); - if (pandora.user.ui.lists[pandora.user.ui.list].listView == 'timelines') { + if (pandora.user.ui.listView == 'timelines') { pandora.$ui.list.options({width: data.size}); - } else if (pandora.user.ui.lists[pandora.user.ui.list].listView == 'map') { + } else if (pandora.user.ui.listView == 'map') { pandora.$ui.map.resizeMap(); - } else if (pandora.user.ui.lists[pandora.user.ui.list].listView == 'calendar') { - + } else if (pandora.user.ui.listView == 'calendar') { + pandora.$ui.calendar.resizeCalendar(); } } else { pandora.$ui.browser.scrollToSelection(); @@ -57,7 +57,7 @@ pandora.ui.rightPanel = function() { } }); } - Ox.Event.bind({ + pandora.UI.bind({ itemView: function(value) { if (pandora.isClipView() != pandora.isClipView(pandora.UI.getPrevious('itemView'))) { that.replaceElement(0, pandora.$ui.toolbar = pandora.ui.toolbar()); diff --git a/static/js/pandora/ui/sortSelect.js b/static/js/pandora/ui/sortSelect.js index 08b88074..089a4ba2 100644 --- a/static/js/pandora/ui/sortSelect.js +++ b/static/js/pandora/ui/sortSelect.js @@ -34,7 +34,7 @@ pandora.ui.sortSelect = function() { pandora.UI.set(sortKey, [{key: data.selected[0].id, operator: ''}]); } }); - Ox.Event.bind({ + pandora.UI.bind({ listSort: function(value) { that.selectItem(value[0].key); }, diff --git a/static/js/pandora/ui/videoPreview.js b/static/js/pandora/ui/videoPreview.js index b5b885fa..35ce372c 100644 --- a/static/js/pandora/ui/videoPreview.js +++ b/static/js/pandora/ui/videoPreview.js @@ -28,11 +28,12 @@ pandora.ui.videoPreview = function(data) { }); } else { pandora.UI.set( - 'videoPoints|' + data.id, + 'videoPoints.' + data.id, {'in': 0, out: 0, position: event.position} ); - pandora.URL.push( - '/' + data.id + '/' + pandora.user.ui.videoView + '/' + Ox.formatDuration(event.position, 2) + pandora.UI.set( + item: data.id, + itemView: pandora.user.ui.videoView ); } } diff --git a/static/js/pandora/ui/viewSelect.js b/static/js/pandora/ui/viewSelect.js index d9235789..801c7ae7 100644 --- a/static/js/pandora/ui/viewSelect.js +++ b/static/js/pandora/ui/viewSelect.js @@ -21,7 +21,7 @@ pandora.ui.viewSelect = function() { pandora.UI.set(viewKey, data.selected[0].id); } }); - Ox.Event.bind({ + pandora.UI.bind({ listView: function(value) { that.selectItem(value); },