diff --git a/static/js/pandora.js b/static/js/pandora.js index 3efddcf66..c3c437f2c 100755 --- a/static/js/pandora.js +++ b/static/js/pandora.js @@ -18,9 +18,6 @@ var pandora = new Ox.App({ }, config: data.config, requests: {}, - templates: { - info: $('
').load('/static/html/itemInfo.html') - }, ui: { infoRatio: 4 / 3, sectionElement: 'buttons', @@ -78,7 +75,7 @@ var pandora = new Ox.App({ 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 + app.$ui.mainPanel.size(0) - app.$ui.item.size(1) - 2 }); } }); @@ -451,7 +448,9 @@ var pandora = new Ox.App({ return that; }, annotations: function() { - var that = new Ox.Element(), + var that = new Ox.Element({ + id: 'annotations' + }), $bins = []; $.each(app.config.layers, function(i, layer) { var $bin = new Ox.CollapsePanel({ @@ -475,6 +474,7 @@ var pandora = new Ox.App({ $.each($bins, function(i, bin) { that.append(bin); }); + //alert(JSON.stringify(that.id)) return that; }, appPanel: function() { @@ -564,7 +564,7 @@ var pandora = new Ox.App({ } ], orientation: 'vertical' - }); + }) return that; }, findElement: function() { @@ -805,73 +805,91 @@ var pandora = new Ox.App({ return that; }, 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(); - } + var that = new Ox.Element('div'); + elements = []; + 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 - }); - }); + pandora.api.getItem(app.user.ui.item, function(result) { + if (app.user.ui.itemView == 'info') { + Ox.print('result.data.item', result.data.item) + $.get('/static/html/itemInfo.html', {}, function(template) { + Ox.print(template); + app.$ui.contentPanel.replace(1, + app.$ui.item = new Ox.Element('div') + .append($.tmpl(template, result.data.item)) + ); + }); + } else if (app.user.ui.itemView == 'timeline') { + 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.contentPanel.replace(1, app.$ui.item = new Ox.SplitPanel({ + elements: [ + { + element: 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 editor', data) + app.$ui.editor.options({ + width: data + }); + Ox.print('resize done') + }), + }, + { + collapsible: true, + element: app.$ui.annotations = ui.annotations(), + resizable: true, + resize: [256, 384], + size: 256 + } + ], + orientation: 'horizontal' + }).bindEvent('resize', function(event, data) { + Ox.print('resize item', data) + app.$ui.editor.options({ + height: 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() { + //alert('display') app.$ui.contentPanel.replaceElements([ { collapsible: true, @@ -880,25 +898,14 @@ var pandora = new Ox.App({ 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' - }) + element: new Ox.Element('div') } ]); - // getItem(); // fixme: can the asynchronicity be moved within the video editor? + getItem(); // fixme: can the asynchronicity be moved within the video editor? } return that; }, + /* item_: function(id, view) { var $item; //location.hash = '!' + id; @@ -979,14 +986,12 @@ var pandora = new Ox.App({ width: data - app.$ui.item.size(1) - 1 }); }); - ///* app.$ui.window.resize(function() { 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 }); }); - //*/ }); } else if (view == 'info') { pandora.api.getItem(id, function(result) { @@ -995,17 +1000,16 @@ var pandora = new Ox.App({ var $item = new Ox.Container(); $item.append(app.template.info.tmpl(item)); app.$ui.rightPanel.replace(1, $item); - /* app.$ui.rightPanel .bindEvent('resize', function(event, data) { app.$ui.editor.options({ width: data - app.$ui.timelinePanel.size(1) - 1 }); }); - */ }); } }, + */ leftPanel: function() { var that = new Ox.SplitPanel({ elements: [ @@ -1959,7 +1963,7 @@ var pandora = new Ox.App({ } ], orientation: 'horizontal' - }); + }) return that; }, rightPanel: function() { @@ -1981,6 +1985,7 @@ var pandora = new Ox.App({ orientation: 'vertical' }) .bindEvent('resize', function(event, data) { + Ox.print('???? resize rightPanel', event, data) if (!app.user.ui.item) { resizeGroups(data); app.$ui.list.size(); @@ -1990,7 +1995,7 @@ var pandora = new Ox.App({ } else { if (app.user.ui.itemView == 'timeline') { app.$ui.editor.options({ - width: data + width: data - app.$ui.item.size(1) - 1 }); } } @@ -2156,26 +2161,31 @@ var pandora = new Ox.App({ }) .append( app.$ui.viewSelect = ui.viewSelect() - ) - .append( - app.$ui.sortSelect = ui.sortSelect() - ) - .append( - app.$ui.findElement = ui.findElement() ); - that.toggle = function() { - + !app.user.ui.item && that.append( + app.$ui.sortSelect = ui.sortSelect() + ); + that.append( + app.$ui.findElement = ui.findElement() + ); + that.display = function() { + app.$ui.rightPanel.replace(0, app.$ui.toolbar = toolbar()); } return that; }, viewSelect: function() { var that = new Ox.Select({ id: 'viewSelect', - items: $.map(app.config.listViews, function(view) { + items: !app.user.ui.item ? $.map(app.config.listViews, function(view) { return $.extend($.extend({}, view), { checked: app.user.ui.listView == view.id, title: 'View ' + view.title }); + }) : $.map(app.config.itemViews, function(view) { + return $.extend($.extend({}, view), { + checked: app.user.ui.itemView == view.id, + title: 'View ' + view.title + }); }), width: 144 }) @@ -2183,11 +2193,15 @@ var pandora = new Ox.App({ float: 'left', margin: '4px 0 0 4px' }) - .bindEvent('change', function(event, data) { + .bindEvent('change', !app.user.ui.item ? function(event, data) { var id = data.selected[0].id; app.user.ui.listView = id; app.$ui.mainMenu.checkItem('viewMenu_movies_' + id); app.$ui.contentPanel.replace(1, app.$ui.list = ui.list(id)); + } : function(event, data) { + var id = data.selected[0].id; + app.user.ui.itemView = id; + app.$ui.contentPanel.replace(1, app.$ui.item = ui.item()); }); return that; } @@ -2471,6 +2485,8 @@ var pandora = new Ox.App({ update: function() { URL.parse(); if (!old.user.ui.item && app.user.ui.item) { + //ui.toolbar.display(); + app.$ui.rightPanel.replace(0, app.$ui.toolbar = ui.toolbar()); 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();