0x2620/cablegates
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

improving frames and posters view

Browse source
This commit is contained in:
rlx 2011-06-07 03:17:36 +00:00
parent f803892178
commit 6de1e6d55a
4 changed files with 102 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
static/js/pandora.js
View file

@ -163,6 +163,8 @@ Ox.load('Geo', function() {
height: pandora.$ui.contentPanel.size(1), height: pandora.$ui.contentPanel.size(1),
width: pandora.$ui.document.width() - pandora.$ui.mainPanel.size(0) - 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();
} }
} }

6
static/js/pandora/ui/item.js
View file

@ -344,7 +344,11 @@ pandora.ui.item = function() {
); );
} else if (pandora.user.ui.itemView == 'frames' || pandora.user.ui.itemView == 'posters') { } else if (pandora.user.ui.itemView == 'frames' || pandora.user.ui.itemView == 'posters') {
pandora.$ui.contentPanel.replaceElement(1, 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(', ')+')':''; var director = result.data.director?' ('+result.data.director.join(', ')+')':'';

133
static/js/pandora/ui/mediaView.js
View file

@ -2,12 +2,8 @@ pandora.ui.mediaView = function() {
var item = pandora.user.ui.item, var item = pandora.user.ui.item,
view = pandora.user.ui.itemView, 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, listWidth = 144 + Ox.UI.SCROLLBAR_SIZE,
previewWidth = width - listWidth, selectedImage = {};
previewHeight = height - 48,
previewRatio = previewWidth / previewHeight,
$preview = Ox.Element(), $preview = Ox.Element(),
that = Ox.SplitPanel({ that = Ox.SplitPanel({
elements: [ elements: [
@ -22,15 +18,19 @@ pandora.ui.mediaView = function() {
orientation: 'horizontal' orientation: 'horizontal'
}); });
that.resize = function() {
selectedImage.url && renderPreview();
}
pandora.api.get({ pandora.api.get({
id: item, id: item,
keys: [view] keys: [view]
}, function(result) { }, function(result) {
var images = result.data[view], var images = result.data[view];
selected = [images.filter(function(image) { selectedImage = images.filter(function(image) {
return image.selected; return image.selected;
})[0]['index']], })[0];
$list = Ox.IconList({ var $list = Ox.IconList({
item: function(data, sort, size) { item: function(data, sort, size) {
var ratio = data.width / data.height; var ratio = data.width / data.height;
size = size || 128; size = size || 128;
@ -50,7 +50,7 @@ pandora.ui.mediaView = function() {
max: 1, max: 1,
min: 1, min: 1,
orientation: 'vertical', orientation: 'vertical',
selected: selected, selected: [selectedImage['index']],
size: 128, size: 128,
sort: [{key: 'index', operator: '+'}], sort: [{key: 'index', operator: '+'}],
unique: 'index' unique: 'index'
@ -58,49 +58,100 @@ pandora.ui.mediaView = function() {
.css({background: 'rgb(16, 16, 16)'}) .css({background: 'rgb(16, 16, 16)'})
.bindEvent({ .bindEvent({
select: function(event) { select: function(event) {
var index = event.ids[0], var index = event.ids[0];
image = images.filter(function(image) { selectedImage = images.filter(function(image) {
return image.index == index; return image.index == index;
})[0], })[0];
imageRatio = image.width / image.height, renderPreview(selectedImage);
imageWidth = imageRatio > previewRatio ? previewWidth : previewHeight * imageRatio,
imageHeight = imageRatio < previewRatio ? previewHeight : previewWidth / imageRatio;
$preview.html(
$('<img>')
.attr({
src: image.url
})
.css({
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: 0,
width: imageWidth + 'px',
height: imageHeight + 'px',
margin: 'auto'
})
);
pandora.api[view == 'frames' ? 'setPosterFrame' : 'setPoster'](Ox.extend({ pandora.api[view == 'frames' ? 'setPosterFrame' : 'setPoster'](Ox.extend({
id: item id: item
}, view == 'frames' ? { }, view == 'frames' ? {
position: image.index // api slightly inconsistent position: selectedImage.index // api slightly inconsistent
} : { } : {
source: image.source source: selectedImage.source
}), function(result) { }), function(result) {
var imageRatio = selectedImage.width / selectedImage.height;
$('img[src*="/' + item + '/poster"]').each(function() { $('img[src*="/' + item + '/poster"]').each(function() {
var $this = $(this); var $this = $(this),
Ox.print('??', $this.attr('src').split('?')[0] + '?' + Ox.uid()) size = Math.max($this.width(), $this.height()),
$this.attr({ src = $this.attr('src').split('?')[0] + '?' + Ox.uid();
src: $this.attr('src').split('?')[0] + '?' + Ox.uid() $('<img>')
}); .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); 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(
$('<img>')
.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);
$('<div>')
.addClass('OxPosterMarker OxPosterMarkerLeft')
.css({
display: 'block',
left: imageLeft + 'px',
top: imageTop + 'px',
width: left + 'px',
height: imageHeight + 'px'
})
.appendTo($preview.$element);
$('<div>')
.addClass('OxPosterMarker OxPosterMarkerCenter')
.css({
display: 'block',
left: imageLeft + left + 'px',
top: imageTop + 'px',
width: imageHeight - 2 + 'px',
height: imageHeight - 2 + 'px'
})
.appendTo($preview.$element);
$('<div>')
.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; return that;

2
static/js/pandora/ui/rightPanel.js
View file

@ -51,6 +51,8 @@ pandora.ui.rightPanel = function() {
pandora.user.ui.itemView == 'timeline' && pandora.$ui.editor.options({ pandora.user.ui.itemView == 'timeline' && pandora.$ui.editor.options({
width: data width: data
}); });
pandora.user.ui.itemView == 'frames' && pandora.$ui.item.resize();
pandora.user.ui.itemView == 'posters' && pandora.$ui.item.resize();
} }
} }
}); });