From 49c013c4efc8218a2bdbef8b1ea8ec31fc08edff Mon Sep 17 00:00:00 2001 From: rolux Date: Tue, 20 Sep 2011 04:11:25 +0000 Subject: [PATCH] move more asynchronous tasks into the url controller; fix bugs with list selection when page loads in item view --- static/js/pandora.js | 21 +- static/js/pandora/Query.js | 30 +-- static/js/pandora/UI.js | 2 +- static/js/pandora/URL.js | 354 +++++++++++++++++----------- static/js/pandora/ui/backButton.js | 3 +- static/js/pandora/ui/browser.js | 2 +- static/js/pandora/ui/foldersList.js | 13 +- static/js/pandora/ui/item.js | 68 +----- 8 files changed, 260 insertions(+), 233 deletions(-) diff --git a/static/js/pandora.js b/static/js/pandora.js index 925266ce4..b88781566 100644 --- a/static/js/pandora.js +++ b/static/js/pandora.js @@ -93,23 +93,26 @@ Ox.load({ pandora.user.ui.theme = 'classic'; } - pandora.URL.parse(); window.onpopstate = function(event) { pandora.URL.update(); }; - Ox.UI.hideLoadingScreen(); + pandora.URL.parse(function() { - Ox.Theme(pandora.user.ui.theme); - pandora.$ui.appPanel = pandora.ui.appPanel().display(); + Ox.UI.hideLoadingScreen(); - Ox.Request.requests() && pandora.$ui.loadingIcon.start(); - pandora.$ui.body.ajaxStart(pandora.$ui.loadingIcon.start); - pandora.$ui.body.ajaxStop(pandora.$ui.loadingIcon.stop); + Ox.Theme(pandora.user.ui.theme); + pandora.$ui.appPanel = pandora.ui.appPanel().display(); - pandora.site.sectionButtonsWidth = pandora.$ui.sectionButtons.width() + 8; + Ox.Request.requests() && pandora.$ui.loadingIcon.start(); + pandora.$ui.body.ajaxStart(pandora.$ui.loadingIcon.start); + pandora.$ui.body.ajaxStop(pandora.$ui.loadingIcon.stop); - }, '/static/'); + pandora.site.sectionButtonsWidth = pandora.$ui.sectionButtons.width() + 8; + + }); + + }, '/static/'); // fixme: why does loadResources have an argument after callback???? } }); diff --git a/static/js/pandora/Query.js b/static/js/pandora/Query.js index 953705595..09549baaf 100644 --- a/static/js/pandora/Query.js +++ b/static/js/pandora/Query.js @@ -227,19 +227,10 @@ pandora.Query = (function() { Ox.print(Ox.repeat('-', 120)); Ox.print('STATE', data); Ox.print(Ox.repeat('-', 120)); - Ox.print('@@@@@', data.list, pandora.user.ui.lists[data.list]) + pandora.UI.set({list: data.list}); !pandora.user.ui.lists[data.list] && pandora.UI.set( 'lists|' + data.list, pandora.site.user.ui.lists[''] ); - ///* - // ---- fixme: remove, server sends wrong data - !pandora.user.ui.lists[data.list].sort && pandora.UI.set( - 'lists|' + data.list, pandora.site.user.ui.lists[''] - ); - // ---- - //*/ - Ox.print('@@@@@', data.lists, pandora.user.ui.lists[data.list]) - pandora.UI.set({list: data.list}); pandora.user.ui.find = data.find; pandora.user.ui.groupsData = data.groups; pandora.user.ui.query = data.query; @@ -287,13 +278,18 @@ pandora.Query = (function() { toString: function() { //Ox.print('tS', pandora.user.ui.find) - var sort = pandora.user.ui.lists[pandora.user.ui.list].sort[0], - key = sort.key, - operator = sort.operator; - return pandora.user.ui.lists[pandora.user.ui.list].listView + '/?' + Ox.serialize({ - find: constructFind(pandora.user.ui.query), - sort: (operator == pandora.getSortOperator(key) ? '' : operator) + key - }); + if (!pandora.user.ui.item) { + var sort = pandora.user.ui.lists[pandora.user.ui.list].sort[0], + key = sort.key, + operator = sort.operator; + return pandora.user.ui.lists[pandora.user.ui.list].listView + '/?' + Ox.serialize({ + find: constructFind(pandora.user.ui.query), + sort: (operator == pandora.getSortOperator(key) ? '' : operator) + key + }); + + } else { + return pandora.user.ui.item + '/' + pandora.user.ui.itemView; + } }, updateGroups: function() { diff --git a/static/js/pandora/UI.js b/static/js/pandora/UI.js index 441e17288..2521aabb0 100644 --- a/static/js/pandora/UI.js +++ b/static/js/pandora/UI.js @@ -13,7 +13,7 @@ pandora.UI = (function() { var obj = Ox.makeObject(arguments); previousUI = Ox.clone(pandora.user.ui, true); Ox.forEach(obj, function(val, key) { - Ox.print('key', key, 'val', val); + Ox.print('UI.set key', key, 'val', val); var i = 0, keys = key.split('|'), ui = pandora.user.ui; diff --git a/static/js/pandora/URL.js b/static/js/pandora/URL.js index 65eb44516..94123a7b5 100644 --- a/static/js/pandora/URL.js +++ b/static/js/pandora/URL.js @@ -1,12 +1,10 @@ // vim: et:ts=4:sw=4:sts=4:ft=javascript - pandora.URL = (function() { - var previousUI = {}, - previousURL = '', + var previousURL = '', regexps = { - '^$': function(pathname, search) { + '^$': function(pathname, search, callback) { if (/^\?url=/.test(search)) { document.location = decodeURIComponent(search.substr(5)); } else { @@ -24,22 +22,27 @@ pandora.URL = (function() { }); } } + callback(); }, - '^home$': function(pathname, search) { + '^home$': function(pathname, search, callback) { pandora.$ui.home = pandora.ui.home().showScreen(); + callback(); }, - '^(items|edits|texts)$': function(pathname, search) { + '^(items|edits|texts)$': function(pathname, search, callback) { pandora.UI.set({ section: pathname }); + callback(); }, - '^(about|contact|faq|news|software|terms|tour)$': function(pathname, search) { + '^(about|contact|faq|news|software|terms|tour)$': function(pathname, search, callback) { pandora.$ui.siteDialog = pandora.ui.siteDialog(pathname).open(); + callback(); }, - '^help$': function(pathname, search) { + '^help$': function(pathname, search, callback) { pandora.$ui.helpDialog = pandora.ui.helpDialog().open(); + callback(); }, - '^(signin|signout|signup)$': function(pathname, search) { + '^(signin|signout|signup)$': function(pathname, search, callback) { if ((pathname == 'signout') == (pandora.user.level != 'guest')) { pandora.$ui.accountDialog = ( pandora.user.level == 'guest' @@ -47,21 +50,24 @@ pandora.URL = (function() { : pandora.ui.accountSignoutDialog() ).open(); } + callback(); }, - '^preferences$': function(pathname, search) { + '^preferences$': function(pathname, search, callback) { pandora.$ui.preferencesDialog = pandora.ui.preferencesDialog().open(); + callback(); }, - '^(calendar|calendars|clip|clips|flow|grid|list|map|maps|timelines)$': function(pathname, search) { + '^(calendar|calendars|clip|clips|flow|grid|list|map|maps|timelines)$': function(pathname, search, callback) { pandora.UI.set({ section: 'items', item: '' }); pandora.UI.set('lists|' + pandora.user.ui.list + '|listView', pathname); pandora.Query.fromString(search); + callback(); }, - '^[0-9A-Z]': function(pathname, search) { + '.*': function(pathname, search, callback) { var split = pathname.split('/'), - item = split[0], + item = decodeURI(split[0]), points, time = split.length > 1 ? /[\d\.:,-]+/.exec(split[split.length - 1]) @@ -74,57 +80,126 @@ pandora.URL = (function() { view = view ? view[0] : time ? pandora.user.ui.videoView : pandora.user.ui.itemView; - pandora.UI.set(Ox.extend({ - section: 'items', - item: item, - itemView: view - }, ['player', 'timeline'].indexOf(view) > -1 ? { - videoView: view - } : {})); - if (time) { - points = time[0].split(','); - if (points.length == 2) { - points = Ox.flatten([points[0], points[1].split('-')]); - if (points[2] == '') { - points[2] = '-1'; + pandora.api.get({id: item, keys: ['id']}, function(result) { + if (result.status.code == 200) { + foundItem(); + } else { + pandora.api.find({ + query: { + conditions: [{key: 'title', value: item, operator: ''}], + operator: '&' + }, + sort: [{key: 'votes', operator: ''}], // fixme: not all systems have "votes" + range: [0, 100], + keys: ['id', 'title', 'votes'] + }, function(result) { + if (result.data.items.length) { + var re = { + exact: new RegExp('^' + item + '$', 'i'), + word: new RegExp('\\b' + item + '\\b', 'i') + }; + item = result.data.items.sort(function(a, b) { + return (parseInt(b.votes) || 0) + + re.word.test(b.title) * 1000000 + + re.exact.test(b.title) * 2000000 + - (parseInt(a.votes) || 0) + - re.word.test(a.title) * 1000000 + - re.exact.test(a.title) * 2000000; + })[0].id; + split[0] = item; + foundItem(); + } else { + pandora.UI.set({ + section: 'items', + item: '' + }); + pandora.Query.fromString('?find=' + pathname); + pandora.URL.replace('?find=' + pathname); + callback(); + } + }); + } + }); + function foundItem() { + pandora.UI.set(Ox.extend({ + section: 'items', + item: item, + itemView: view + }, ['player', 'timeline'].indexOf(view) > -1 ? { + videoView: view + } : {})); + if (time) { + points = time[0].split(','); + if ( + points.length == 2 + && (points = Ox.flatten([points[0], points[1].split('-')]))[2] == '' + ) { + pandora.api.get({ + id: item, + keys: ['duration'] + }, function(result) { + points[2] = result.data.duration.toString(); + foundTime(); + }); + } else { + foundTime(); + } + } else { + if (!pandora.user.ui.videoPoints[item]) { + pandora.UI.set('videoPoints|' + item, { + 'in': 0, out: 0, position: 0 + }); + } + foundTime(); + } + function foundTime() { + if (time) { + // fixme: this is duplicated, see Ox.VideoPlayer() parsePositionInput() + points = points.map(function(point, i) { + var parts = point.split(':').reverse(); + while (parts.length > 3) { + parts.pop(); + } + return parts.reduce(function(prev, curr, i) { + return prev + (parseFloat(curr) || 0) * Math.pow(60, i); + }, 0); + }); + pandora.UI.set('videoPoints|' + item, { + 'in': points.length == 1 ? 0 : points[points.length - 2], + out: points.length == 1 ? 0 : points[points.length - 1], + position: points[0], + }); + points = points.map(function(point) { + return point == -1 ? '' : Ox.formatDuration(point, 3).replace(/\.000$/, ''); + }); + split[split.length - 1] = points[0] + ( + points.length == 1 ? '' : ',' + points[1] + '-' + points[2] + ); + } + pandora.URL.replace(split.join('/')); + // on page load, we have to check if the item is in the previously selected list + // if it is not, the movie browser has to be reloaded + if (pandora.user.ui.list) { + pandora.user.ui.query = { + conditions: [{key: 'list', value: pandora.user.ui.list, operator: ''}], + operator: '&' + }; + pandora.api.find({ + query: pandora.user.ui.query, + positions: [pandora.user.ui.item], + sort: [{key: 'id', operator: ''}] + }, function(result) { + if (Ox.isUndefined(result.data.positions[pandora.user.ui.item])) { + pandora.UI.set({list: ''}); + pandora.user.ui.query = {conditions:[], operator: '&'}; + } + callback(); + }); + } else { + callback(); } } - // fixme: this is duplicated, see Ox.VideoPlayer() parsePositionInput() - points = points.map(function(point, i) { - var parts = point.split(':').reverse(); - while (parts.length > 3) { - parts.pop(); - } - return parts.reduce(function(prev, curr, i) { - return prev + (parseFloat(curr) || 0) * Math.pow(60, i); - }, 0); - }); - pandora.UI.set('videoPoints|' + item, { - 'in': points.length == 1 ? 0 : points[points.length - 2], - out: points.length == 1 ? 0 : points[points.length - 1], - position: points[0], - }); - points = points.map(function(point) { - return point == -1 ? '' : Ox.formatDuration(point, 3).replace(/\.000$/, ''); - }); - split[split.length - 1] = points[0] + ( - points.length == 1 ? '' : ',' + points[1] + '-' + points[2] - ); - pandora.URL.replace(split.join('/')); - } else if (!pandora.user.ui.videoPoints[item]) { - pandora.UI.set('videoPoints|' + item, { - 'in': 0, out: 0, position: 0 - }); } - }, - '.*': function(pathname, search) { - var query = search || 'find=' + pathname; - pandora.UI.set({ - section: 'items', - item: '' - }); - pandora.Query.fromString(query); - pandora.URL.replace('?' + query); } }; @@ -132,81 +207,13 @@ pandora.URL = (function() { previousURL = document.location.pathname + document.location.search; } - return { - - parse: function() { - var pathname = document.location.pathname.substr(1), - search = document.location.search.substr(1); - if (/\/$/.test(pathname)) { - pathname = pathname.substr(0, pathname.length - 1); - } - /* - var url = document.location.pathname.substr(1) - + document.location.search - + document.location.hash; - */ - Ox.forEach(regexps, function(fn, re) { - re = new RegExp(re); - if (re.test(pathname)) { - Ox.print('URL re ' + re); - fn(pathname, search); - return false; - } - }); - pandora.Query.updateGroups(); - pandora.user.ui.showHome = false; - }, - - push: function(title, url) { - if (arguments.length == 1) { // fixme: remove later - url = title; - } - if (url[0] != '/') { - url = '/' + url; - } - saveURL(); - history.pushState({}, pandora.site.site.name + (title ? ' - ' + title : ''), url); - }, - - pushPrevious: function() { - history.pushState({}, '', previousURL); - }, - - set: function(title, url) { - if (arguments.length == 1) { // fixme: remove later - url = title; - } - if (url[0] != '/') { - url = '/' + url; - } - history.pushState({}, pandora.site.site.name + (title ? ' - ' + title : ''), url); - this._update(); - }, - - replace: function(title, url) { - if (arguments.length == 1) { // fixme: remove later - url = title; - } - if (url[0] != '/') { - url = '/' + url; - } - saveURL(); - history.replaceState({}, pandora.site.site.name + (title ? ' - ' + title : ''), url); - }, - - update: function() { - this.set(pandora.Query.toString()); - }, - - _update: function() { - // fixme: make this method private - var previousUI = pandora.UI.getPrevious(); - Ox.print('now', pandora.user.ui, 'previously', previousUI) - Ox.Request.cancel(); - $('video').each(function() { - $(this).trigger('stop'); - }); - this.parse(); + function updateURL() { + var previousUI = pandora.UI.getPrevious(); + Ox.Request.cancel(); + $('video').each(function() { + $(this).trigger('stop'); + }); + pandora.URL.parse(function() { if (pandora.user.ui.section != previousUI.section) { pandora.$ui.appPanel.replaceElement(1, pandora.$ui.mainPanel = pandora.ui.mainPanel()); } else if (!pandora.user.ui.item && !previousUI.item) { @@ -218,7 +225,6 @@ pandora.URL = (function() { if (list.listView != previousList.listView) { pandora.$ui.mainMenu.checkItem('viewMenu_movies_' + list.listView); pandora.$ui.viewSelect.options({value: list.listView}); - Ox.print('is', isClipView, 'was', wasClipView); if (isClipView != wasClipView) { pandora.$ui.mainMenu.replaceMenu('sortMenu', pandora.getSortMenu()); pandora.$ui.sortSelect.replaceWith(pandora.$ui.sortSelect = pandora.ui.sortSelect()); @@ -229,14 +235,12 @@ pandora.URL = (function() { } if (!Ox.isEqual(list.sort, previousList.sort)) { pandora.$ui.mainMenu.checkItem('sortMenu_sortmovies_' + list.sort[0].key); - pandora.$ui.mainMenu.checkItem('sortMenu_ordermovies_' + ( - list.sort[0].operator == '' ? pandora.getSortOperator(list.sort[0].key) - : list.sort[0].operator == '+' ? 'ascending' : 'descending' - )); + pandora.$ui.mainMenu.checkItem('sortMenu_ordermovies_' + (( + list.sort[0].operator || pandora.getSortOperator(list.sort[0].key) + ) == '+' ? 'ascending' : 'descending')); pandora.$ui.sortSelect.options({value: list.sort[0].key}); } pandora.$ui.leftPanel.replaceElement(2, pandora.$ui.info = pandora.ui.info()); - Ox.print('EQUAL?', pandora.user.ui.query, previousUI.query, Ox.isEqual(pandora.user.ui.query, previousUI.query)) if (Ox.isEqual(pandora.user.ui.query, previousUI.query)) { pandora.$ui.contentPanel.replaceElement(1, pandora.$ui.list = pandora.ui.list()); } else { @@ -268,7 +272,71 @@ pandora.URL = (function() { $item.options('position') ); } - } + }); + } + + return { + + parse: function(callback) { + var pathname = document.location.pathname.substr(1), + search = document.location.search.substr(1); + if (/\/$/.test(pathname)) { + pathname = pathname.substr(0, pathname.length - 1); + } + Ox.forEach(regexps, function(fn, re) { + re = new RegExp(re); + if (re.test(pathname)) { + Ox.print('URL re ' + re); + fn(pathname, search, function() { + pandora.Query.updateGroups(); + pandora.user.ui.showHome = false; + callback(); + }); + return false; + } + }); + }, + + push: function(title, url) { + if (arguments.length == 1) { // fixme: remove later + url = title; + } + if (url[0] != '/') { + url = '/' + url; + } + saveURL(); + history.pushState({}, pandora.site.site.name + (title ? ' - ' + title : ''), url); + }, + + pushPrevious: function() { + history.pushState({}, '', previousURL); + }, + + set: function(title, url) { + if (arguments.length == 1) { // fixme: remove later + url = title; + } + if (url[0] != '/') { + url = '/' + url; + } + history.pushState({}, pandora.site.site.name + (title ? ' - ' + title : ''), url); + updateURL(); + }, + + replace: function(title, url) { + if (arguments.length == 1) { // fixme: remove later + url = title; + } + if (url[0] != '/') { + url = '/' + url; + } + saveURL(); + history.replaceState({}, pandora.site.site.name + (title ? ' - ' + title : ''), url); + }, + + update: function() { + this.set(pandora.Query.toString()); + }, }; diff --git a/static/js/pandora/ui/backButton.js b/static/js/pandora/ui/backButton.js index a2210e2f8..830d84258 100644 --- a/static/js/pandora/ui/backButton.js +++ b/static/js/pandora/ui/backButton.js @@ -9,7 +9,8 @@ pandora.ui.backButton = function() { }) .bindEvent({ click: function() { - pandora.URL.set(pandora.Query.toString()); + pandora.UI.set({item: null}); + pandora.URL.update(); } }); return that; diff --git a/static/js/pandora/ui/browser.js b/static/js/pandora/ui/browser.js index 7699ada81..e4a77a367 100644 --- a/static/js/pandora/ui/browser.js +++ b/static/js/pandora/ui/browser.js @@ -1,6 +1,6 @@ // vim: et:ts=4:sw=4:sts=4:ft=javascript pandora.ui.browser = function() { - var sizes, that; + var that; if (!pandora.user.ui.item) { pandora.user.ui.groupsSizes = pandora.getGroupsSizes(); pandora.$ui.groups = pandora.ui.groups(); diff --git a/static/js/pandora/ui/foldersList.js b/static/js/pandora/ui/foldersList.js index d9f520c03..3fd2e68b7 100644 --- a/static/js/pandora/ui/foldersList.js +++ b/static/js/pandora/ui/foldersList.js @@ -371,17 +371,18 @@ pandora.ui.folderList = function(id) { pandora.$ui.list.triggerEvent('paste', data); }, select: function(data) { - //pandora.user.ui.item && pandora.UI.set({item: ''}); if (data.ids.length) { Ox.forEach(pandora.$ui.folderList, function($list, id_) { id != id_ && $list.options('selected', []); }); - //pandora.UI.set({list: data.ids[0]}); - pandora.URL.set('?find=' + (id == 'volumes' ? 'volume' : 'list') + ':' + data.ids[0]); - } else { - //pandora.UI.set({list: ''}); - pandora.URL.set(''); } + pandora.URL.set(data.ids.length ? '?find=list:' + data.ids[0] : ''); + /* + pandora.UI.set({ + item: '', + list: data.ids.length ? data.ids[0] : '' + }); + */ }, submit: function(data) { data_ = {id: data.id}; diff --git a/static/js/pandora/ui/item.js b/static/js/pandora/ui/item.js index 14a3fff14..2415af928 100644 --- a/static/js/pandora/ui/item.js +++ b/static/js/pandora/ui/item.js @@ -11,63 +11,21 @@ pandora.ui.item = function() { if (result.status.code == 200) { // fixme: probably does not belong here document.title = '0xDB - ' + result.data.title; - if (pandora.user.ui.videoPoints[result.data.id].out == -1) { - pandora.UI.set('videoPoints|' + result.data.id + '|out', result.data.duration); - pandora.URL.replace( - document.location.pathname - + Ox.formatDuration(result.data.duration, 3).replace(/\.000$/, '') - ); - } } - if (result.status.code != 200) { - // fixme: this is quite a hack - var title = decodeURI(pandora.user.ui.item).toLowerCase(), - videoPoints; - if (pandora.user.ui.item in pandora.user.ui.videoPoints) { - videoPoints = pandora.user.ui.videoPoints[pandora.user.ui.item]; - pandora.UI.set(['videoPoints', pandora.user.ui.item].join('|'), null); - } - pandora.api.find({ - query: { - conditions: [{key: 'title', value: title, operator: ''}], - operator: '' - }, - sort: [{key: 'votes', operator: '-'}], // fixme: operator '' should work as well - range: [0, 100], - keys: ['id', 'title', 'votes'] - }, function(result) { - if (result.data.items.length) { - Ox.print(result.data.items) - var re = { - exact: new RegExp('^' + title + '$', 'i'), - word: new RegExp('\\b' + title + '\\b', 'i') - }, - id = result.data.items.sort(function(a, b) { - return (parseInt(b.votes) || 0) - + re.word.test(b.title) * 1000000 - + re.exact.test(b.title) * 2000000 - - (parseInt(a.votes) || 0) - - re.word.test(a.title) * 1000000 - - re.exact.test(a.title) * 2000000; - })[0].id; - pandora.user.ui.item = ''; - !Ox.isUndefined(videoPoints) - && pandora.UI.set(['videoPoints', id].join('|'), videoPoints); - pandora.URL.set(id); - } else { - pandora.$ui.contentPanel.replaceElement(1, - Ox.Element() - .css({marginTop: '32px', fontSize: '12px', textAlign: 'center'}) - .html( - 'Sorry, we can\'t find the ' - + pandora.site.itemName.singular.toLowerCase() - + ' you\'re looking for.' - ) - ); - } - }); - } else if (!result.data.rendered && [ + /*if (result.status.code != 200) { + pandora.$ui.contentPanel.replaceElement(1, + Ox.Element() + .css({marginTop: '32px', fontSize: '12px', textAlign: 'center'}) + .html( + 'Sorry, we can\'t find the ' + + pandora.site.itemName.singular.toLowerCase() + + ' you\'re looking for.' + ) + ); + }*/ + + if (!result.data.rendered && [ 'clips', 'map', 'player', 'timeline' ].indexOf(pandora.user.ui.itemView)>-1) { pandora.$ui.contentPanel.replaceElement(1,