From f1d4d5da63a3af18f0d60f343f88d094d5a7c2da Mon Sep 17 00:00:00 2001 From: j <0x006A@0x2620.org> Date: Mon, 6 Dec 2010 23:32:17 +0100 Subject: [PATCH] app.url navigation --- pandora/item/models.py | 2 +- pandora/templates/site.json | 2 +- pandora/user/models.py | 2 +- static/js/pandora.js | 174 ++++++++++++++++++++++-------------- 4 files changed, 109 insertions(+), 71 deletions(-) diff --git a/pandora/item/models.py b/pandora/item/models.py index 24bac6c..27f9adf 100644 --- a/pandora/item/models.py +++ b/pandora/item/models.py @@ -113,7 +113,7 @@ def siteJson(): "findQuery": {"conditions": [], "operator": ""}, "groupsQuery": {"conditions": [], "operator": "|"}, "groupsSize": 128, - "itemView": "info", + "itemView": "timeline", "listQuery": {"conditions": [], "operator": ""}, "listsSize": 192, "listView": "icons", diff --git a/pandora/templates/site.json b/pandora/templates/site.json index b0d760b..8907171 100644 --- a/pandora/templates/site.json +++ b/pandora/templates/site.json @@ -116,7 +116,7 @@ "findQuery": {"conditions": [], "operator": ""}, "groupsQuery": {"conditions": [], "operator": "|"}, "groupsSize": 128, - "itemView": "info", + "itemView": "timeline", "listQuery": {"conditions": [], "operator": ""}, "listsSize": 192, "listView": "icons", diff --git a/pandora/user/models.py b/pandora/user/models.py index 6312af7..375361a 100644 --- a/pandora/user/models.py +++ b/pandora/user/models.py @@ -47,7 +47,7 @@ def get_ui(user): "findQuery": {"conditions": [], "operator": ""}, "groupsQuery": {"conditions": [], "operator": "|"}, "groupsSize": 128, - "itemView": "info", + "itemView": "timeline", "listQuery": {"conditions": [], "operator": ""}, "listsSize": 192, "listView": "icons", diff --git a/static/js/pandora.js b/static/js/pandora.js index 5b51544..b55eb05 100755 --- a/static/js/pandora.js +++ b/static/js/pandora.js @@ -63,12 +63,31 @@ var app = new Ox.App({ app.template.info = $('
').load('/static/html/itemInfo.html'); $.each(app.afterLaunch, function(i, f) {f()}); + + app.url(); + window.onpopstate = function() { app.url()}; }); // Objects +app.url = function(url) { + if(!url) + var url = document.location.pathname; + else { + var title = document.title + ' '+ url; + history.pushState({}, title, url); + } + if(/[0-9A-Z]/.exec(url.substring(1,2))) { + var id = url.split('/')[1]; + var view = url.split('/')[2] || app.user.ui.itemView; + app.constructItem(id, view); + } else { + app.Query.fromString(location.hash.substr(2)); + app.$ui.rightPanel.replace(1, app.constructContentPanel()); + } +} app.Query = (function() { @@ -329,58 +348,7 @@ app.constructApp = function() { size: 24 }, { - element: app.$ui.contentPanel = new Ox.SplitPanel({ - elements: [ - { - collapsible: true, - element: app.$ui.groupsOuterPanel = new Ox.SplitPanel({ - elements: [ - { - element: app.$ui.groups[0], - size: app.ui.groups[0].size - }, - { - element: app.$ui.groupsInnerPanel = new Ox.SplitPanel({ - elements: [ - { - element: app.$ui.groups[1], - size: app.ui.groups[1].size - }, - { - element: app.$ui.groups[2], - }, - { - element: app.$ui.groups[3], - size: app.ui.groups[3].size - } - ], - orientation: 'horizontal' - }) - }, - { - element: app.$ui.groups[4], - size: app.ui.groups[4].size - }, - ], - id: 'browser', - orientation: 'horizontal' - }) - .bindEvent('resize', function(event, data) { - Ox.print('resizing groups...') - $.each(app.$ui.groups, function(i, list) { - list.size(); - }); - }), - resizable: true, - resize: [96, 112, 128, 144, 160, 176], - size: app.user.ui.groupsSize - }, - { - element: app.$ui.list = app.constructList(app.user.ui.listView) - } - ], - orientation: 'vertical' - }) + element: app.constructContentPanel() }, { element: app.$ui.statusbar, @@ -548,9 +516,69 @@ app.constructInfo = function() { ); } +app.constructContentPanel = function(listView) { + listView = listView || app.user.ui.listView; + return app.$ui.contentPanel = new Ox.SplitPanel({ + elements: [ + { + collapsible: true, + element: app.$ui.groupsOuterPanel = new Ox.SplitPanel({ + elements: [ + { + element: app.$ui.groups[0], + size: app.ui.groups[0].size + }, + { + element: app.$ui.groupsInnerPanel = new Ox.SplitPanel({ + elements: [ + { + element: app.$ui.groups[1], + size: app.ui.groups[1].size + }, + { + element: app.$ui.groups[2], + }, + { + element: app.$ui.groups[3], + size: app.ui.groups[3].size + } + ], + orientation: 'horizontal' + }) + }, + { + element: app.$ui.groups[4], + size: app.ui.groups[4].size + }, + ], + id: 'browser', + orientation: 'horizontal' + }) + .bindEvent('resize', function(event, data) { + Ox.print('resizing groups...') + $.each(app.$ui.groups, function(i, list) { + list.size(); + }); + }), + resizable: true, + resize: [96, 112, 128, 144, 160, 176], + size: app.user.ui.groupsSize + }, + { + element: app.$ui.list = app.constructList(listView) + } + ], + orientation: 'vertical' + }); +} + app.constructItem = function(id, view) { var $item; //location.hash = '!' + id; + app.$ui.mainMenu.enableItem('openmovie'); + app.$ui.mainMenu.checkItem('viewMenu_openmovie_' + view); + //FIXME: there should be a menu function for this + $.map(app.config.listViews, function(view, i) { app.$ui.mainMenu.uncheckItem('viewMenu_movies_'+view.id); }); app.$ui.contentPanel.empty(); if (view == 'timeline') { app.api.getItem(id, function(result) { @@ -658,22 +686,17 @@ app.constructItem = function(id, view) { app.api.getItem(id, function(result) { item_debug = result.data.item; var item = result.data.item; - $item = new Ox.Container(); + var $item = new Ox.Container(); $item.append(app.template.info.tmpl(item)); - app.$ui.contentPanel.replace(1, $item); + app.$ui.rightPanel.replace(1, $item); + /* app.$ui.rightPanel - /*.unbindEvent('resize')*/ .bindEvent('resize', function(event, data) { - Ox.print('seems to work', data) - $item.options({ - width: data - 256 - 1 + app.$ui.editor.options({ + width: data - app.$ui.timelinePanel.size(1) - 1 }); }); - app.$window.resize(function() { - $item.options({ - width: app.$document.width() - app.$ui.leftPanel.width() - 1 - 256 - 1 - }); - }); + */ }); } @@ -851,7 +874,8 @@ app.constructList = function(view) { app.$ui.selected.html(app.constructStatus('selected', data)); }, open: function(event, data) { - app.constructItem(data.ids[0], 'timeline') + var id = data.ids[0]; + app.url('/' + id); }, openpreview: function(event, data) { app.requests.preview && app.api.cancel(app.requests.preview); @@ -1137,7 +1161,7 @@ app.constructMainMenu = function() { ] }, { 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) { + { group: 'viewmovies', min: 0, max: 1, items: $.map(app.config.listViews, function(view, i) { return $.extend({ checked: app.user.ui.listView == view.id, }, view); @@ -1153,9 +1177,13 @@ app.constructMainMenu = function() { { id: 'video', title: 'Video' } ] }, {}, - { id: 'openmovie', title: ['Open Movie', 'Open Movies'], disabled: true, items: $.map(app.config.itemViews, function(view, i) { - return view; - }) }, + { id: 'openmovie', title: ['Open Movie', 'Open Movies'], disabled: true, items: [ + { group: 'movieview', min: 0, max: 1, items: $.map(app.config.itemViews, function(view, i) { + return $.extend({ + checked: app.user.ui.itemView == view.id, + }, view); + }) }, + ]}, {}, { id: 'lists', title: 'Hide Lists', keyboard: 'shift l' }, { id: 'info', title: 'Hide Info', keyboard: 'shift i' }, @@ -1229,6 +1257,13 @@ app.constructMainMenu = function() { if (data.id == 'find') { var id = data.checked[0].id; app.$ui.findSelect.selectItem(id); + } else if (data.id == 'movieview') { + var view = data.checked[0].id; + var id = document.location.pathname.split('/')[1]; + if (view == 'info') + app.url('/'+id+'/info'); + else + app.url('/'+id); } else if (data.id == 'ordermovies') { var id = data.checked[0].id; app.$ui.list.sortList(user.ui.sort[0].key, id == 'ascending' ? '' : '-'); @@ -1237,6 +1272,9 @@ app.constructMainMenu = function() { operator = Ox.getObjectById(app.config.sortKeys, id).operator; app.$ui.mainMenu.checkItem('sortMenu_ordermovies_' + (operator === '' ? 'ascending' : 'descending')); app.$ui.list.sortList(id, operator); + } else if (data.id == 'viewmovies') { + var view = data.checked[0].id; + app.url('/?v='+view); } }, click: function(event, data) {