From 3a93f972df9c4b0ead4489279460501e38db9efe Mon Sep 17 00:00:00 2001 From: rolux Date: Tue, 7 Jun 2011 03:17:36 +0000 Subject: [PATCH] improving frames and posters view --- static/js/pandora.js | 4 +- static/js/pandora/ui/item.js | 6 +- static/js/pandora/ui/mediaView.js | 133 ++++++++++++++++++++--------- static/js/pandora/ui/rightPanel.js | 2 + 4 files changed, 102 insertions(+), 43 deletions(-) diff --git a/static/js/pandora.js b/static/js/pandora.js index 57b643ca..04b398d3 100644 --- a/static/js/pandora.js +++ b/static/js/pandora.js @@ -163,7 +163,9 @@ Ox.load('Geo', function() { height: pandora.$ui.contentPanel.size(1), width: pandora.$ui.document.width() - pandora.$ui.mainPanel.size(0) - 1 }); - } + pandora.user.ui.itemView == 'frames' && pandora.$ui.item.resize(); + pandora.user.ui.itemView == 'posters' && pandora.$ui.item.resize(); + } } function unloadWindow() { diff --git a/static/js/pandora/ui/item.js b/static/js/pandora/ui/item.js index 06eac394..7851790f 100644 --- a/static/js/pandora/ui/item.js +++ b/static/js/pandora/ui/item.js @@ -344,7 +344,11 @@ pandora.ui.item = function() { ); } else if (pandora.user.ui.itemView == 'frames' || pandora.user.ui.itemView == 'posters') { pandora.$ui.contentPanel.replaceElement(1, - pandora.$ui.item = pandora.ui.mediaView() + pandora.$ui.item = pandora.ui.mediaView().bindEvent({ + resize: function() { + pandora.$ui.item.resize(); + } + }) ); } var director = result.data.director?' ('+result.data.director.join(', ')+')':''; diff --git a/static/js/pandora/ui/mediaView.js b/static/js/pandora/ui/mediaView.js index 79260c99..98575a0c 100644 --- a/static/js/pandora/ui/mediaView.js +++ b/static/js/pandora/ui/mediaView.js @@ -2,12 +2,8 @@ pandora.ui.mediaView = function() { var item = pandora.user.ui.item, view = pandora.user.ui.itemView, - width = pandora.$ui.document.width() - pandora.$ui.mainPanel.size(0) - 1, - height = pandora.$ui.contentPanel.size(1), listWidth = 144 + Ox.UI.SCROLLBAR_SIZE, - previewWidth = width - listWidth, - previewHeight = height - 48, - previewRatio = previewWidth / previewHeight, + selectedImage = {}; $preview = Ox.Element(), that = Ox.SplitPanel({ elements: [ @@ -22,15 +18,19 @@ pandora.ui.mediaView = function() { orientation: 'horizontal' }); + that.resize = function() { + selectedImage.url && renderPreview(); + } + pandora.api.get({ id: item, keys: [view] }, function(result) { - var images = result.data[view], - selected = [images.filter(function(image) { - return image.selected; - })[0]['index']], - $list = Ox.IconList({ + var images = result.data[view]; + selectedImage = images.filter(function(image) { + return image.selected; + })[0]; + var $list = Ox.IconList({ item: function(data, sort, size) { var ratio = data.width / data.height; size = size || 128; @@ -50,7 +50,7 @@ pandora.ui.mediaView = function() { max: 1, min: 1, orientation: 'vertical', - selected: selected, + selected: [selectedImage['index']], size: 128, sort: [{key: 'index', operator: '+'}], unique: 'index' @@ -58,49 +58,100 @@ pandora.ui.mediaView = function() { .css({background: 'rgb(16, 16, 16)'}) .bindEvent({ select: function(event) { - var index = event.ids[0], - image = images.filter(function(image) { - return image.index == index; - })[0], - imageRatio = image.width / image.height, - imageWidth = imageRatio > previewRatio ? previewWidth : previewHeight * imageRatio, - imageHeight = imageRatio < previewRatio ? previewHeight : previewWidth / imageRatio; - $preview.html( - $('') - .attr({ - src: image.url - }) - .css({ - position: 'absolute', - left: 0, - top: 0, - right: 0, - bottom: 0, - width: imageWidth + 'px', - height: imageHeight + 'px', - margin: 'auto' - }) - ); + var index = event.ids[0]; + selectedImage = images.filter(function(image) { + return image.index == index; + })[0]; + renderPreview(selectedImage); pandora.api[view == 'frames' ? 'setPosterFrame' : 'setPoster'](Ox.extend({ id: item }, view == 'frames' ? { - position: image.index // api slightly inconsistent + position: selectedImage.index // api slightly inconsistent } : { - source: image.source + source: selectedImage.source }), function(result) { + var imageRatio = selectedImage.width / selectedImage.height; $('img[src*="/' + item + '/poster"]').each(function() { - var $this = $(this); - Ox.print('??', $this.attr('src').split('?')[0] + '?' + Ox.uid()) - $this.attr({ - src: $this.attr('src').split('?')[0] + '?' + Ox.uid() - }); + var $this = $(this), + size = Math.max($this.width(), $this.height()), + src = $this.attr('src').split('?')[0] + '?' + Ox.uid(); + $('') + .attr({src: src}) + .load(function() { + $this.attr({src: src}); + view == 'posters' && $this.css(imageRatio < 1 ? { + width: Math.round(size * imageRatio) + 'px', + height: size + 'px' + } : { + width: size + 'px', + height: Math.round(size / imageRatio) + 'px' + }); + }); }); }); } }); that.replaceElement(0, $list); + renderPreview(); }); + function renderPreview() { + var previewWidth = pandora.$ui.document.width() - pandora.$ui.mainPanel.size(0) - 1 - listWidth, + previewHeight = pandora.$ui.contentPanel.size(1), + previewRatio = previewWidth / previewHeight, + imageRatio = selectedImage.width / selectedImage.height, + imageWidth = imageRatio > previewRatio ? previewWidth : Math.round(previewHeight * imageRatio), + imageHeight = imageRatio < previewRatio ? previewHeight : Math.round(previewWidth / imageRatio), + imageLeft = Math.floor((previewWidth - imageWidth) / 2), + imageTop = Math.floor((previewHeight - imageHeight) / 2); + $preview.html( + $('') + .attr({ + src: selectedImage.url + }) + .css({ + position: 'absolute', + left: imageLeft + 'px', + top: imageTop + 'px', + width: imageWidth + 'px', + height: imageHeight + 'px', + }) + ); + if (view == 'frames') { + var left = Math.floor((imageWidth - imageHeight) / 2), + right = Math.ceil((imageWidth - imageHeight) / 2); + $('
') + .addClass('OxPosterMarker OxPosterMarkerLeft') + .css({ + display: 'block', + left: imageLeft + 'px', + top: imageTop + 'px', + width: left + 'px', + height: imageHeight + 'px' + }) + .appendTo($preview.$element); + $('
') + .addClass('OxPosterMarker OxPosterMarkerCenter') + .css({ + display: 'block', + left: imageLeft + left + 'px', + top: imageTop + 'px', + width: imageHeight - 2 + 'px', + height: imageHeight - 2 + 'px' + }) + .appendTo($preview.$element); + $('
') + .addClass('OxPosterMarker OxPosterMarkerRight') + .css({ + display: 'block', + left: imageLeft + left + imageHeight + 'px', + top: imageTop + 'px', + width: right + 'px', + height: imageHeight + 'px' + }) + .appendTo($preview.$element); + } + } return that; diff --git a/static/js/pandora/ui/rightPanel.js b/static/js/pandora/ui/rightPanel.js index a03dc451..1bc25114 100644 --- a/static/js/pandora/ui/rightPanel.js +++ b/static/js/pandora/ui/rightPanel.js @@ -51,6 +51,8 @@ pandora.ui.rightPanel = function() { pandora.user.ui.itemView == 'timeline' && pandora.$ui.editor.options({ width: data }); + pandora.user.ui.itemView == 'frames' && pandora.$ui.item.resize(); + pandora.user.ui.itemView == 'posters' && pandora.$ui.item.resize(); } } });