pandora/static/js/info.js

452 lines
18 KiB
JavaScript
Raw Normal View History

2011-07-29 18:37:11 +00:00
// vim: et:ts=4:sw=4:sts=4:ft=javascript
2011-11-05 17:04:10 +00:00
'use strict';
pandora.ui.info = function() {
2011-10-29 17:46:46 +00:00
2011-09-30 10:33:45 +00:00
var ui = pandora.user.ui,
2016-10-04 22:00:03 +00:00
folderItems = pandora.getFolderItems(ui.section),
folderItem = folderItems.slice(0, -1),
2011-09-18 21:18:05 +00:00
view = getView(),
2011-09-30 10:33:45 +00:00
2011-09-18 21:18:05 +00:00
that = Ox.Element()
.css({overflowX: 'hidden', overflowY: 'auto'})
.bindEvent({
toggle: function(data) {
pandora.UI.set({showInfo: !data.collapsed});
2011-09-30 10:33:45 +00:00
},
2017-01-26 17:47:24 +00:00
pandora_edit: updateInfo,
pandora_find: function() {
if (ui._list != pandora.UI.getPrevious('_list')) {
2016-10-04 22:00:03 +00:00
updateInfo();
}
},
2017-01-26 17:47:24 +00:00
pandora_finddocuments: function() {
if (ui._collection != pandora.UI.getPrevious('_collection')) {
2011-09-30 10:33:45 +00:00
updateInfo();
}
},
pandora_item: updateInfo,
pandora_listselection: updateInfo,
pandora_listview: function(data) {
if (
pandora.isClipView(data.value) != pandora.isClipView(data.previousValue)
|| data.value == 'timelines' || data.previousValue == 'timelines'
) {
updateInfo();
}
},
2016-10-04 22:00:03 +00:00
pandora_document: updateInfo,
pandora_collectionselection: updateInfo,
pandora_text: updateInfo
2011-08-18 07:54:46 +00:00
});
2011-09-30 10:33:45 +00:00
//pandora.$ui.leftPanel && resize();
updateInfo();
function emptyInfo() {
pandora.$ui.listInfo && pandora.$ui.listInfo.remove();
pandora.$ui.posterInfo && pandora.$ui.posterInfo.remove();
pandora.$ui.videoPreview && pandora.$ui.videoPreview.remove();
2014-09-23 21:57:35 +00:00
that.empty();
delete pandora.$ui.listInfo;
delete pandora.$ui.posterInfo;
delete pandora.$ui.videoPreview;
}
2011-09-30 10:33:45 +00:00
function getId() {
2017-01-26 17:47:24 +00:00
if (ui.section == 'documents') {
return ui[folderItem.toLowerCase()] || (
ui.collectionSelection.length
? ui.collectionSelection[0]
: null
);
}
return ui[folderItem.toLowerCase()] || (
2011-09-30 10:33:45 +00:00
ui.listSelection.length
? ui.listSelection[0]
2011-09-30 10:33:45 +00:00
: null
);
2011-09-18 21:18:05 +00:00
}
2011-09-30 10:33:45 +00:00
2011-09-18 21:18:05 +00:00
function getView() {
2017-01-26 17:47:24 +00:00
if (ui.section == 'items') {
return !getId()
? 'list'
: !ui.item && pandora.isClipView()
? 'poster'
2017-01-26 17:47:24 +00:00
: 'video';
} else if (ui.section == 'documents') {
return !getId() ? 'collection' : 'document';
} else {
return folderItem.toLowerCase();
}
2011-09-18 21:18:05 +00:00
}
2011-09-30 10:33:45 +00:00
function resizeInfo() {
2011-10-29 13:50:40 +00:00
var height = pandora.getInfoHeight(true);
2011-10-29 14:17:43 +00:00
pandora.$ui.leftPanel.size(2, height);
pandora.resizeFolders();
!ui.showInfo && pandora.$ui.leftPanel.css({bottom: -height + 'px'});
2011-09-30 10:33:45 +00:00
}
function updateInfo() {
var id = getId(),
previousView = view;
2011-10-29 17:46:46 +00:00
view = getView();
2017-01-26 17:47:24 +00:00
if (view == 'list' || view == 'edit' || view == 'collection') {
emptyInfo();
that.append(pandora.$ui.listInfo = pandora.ui.listInfo());
2011-09-30 10:33:45 +00:00
previousView == 'video' && resizeInfo();
} else if (view == 'poster') {
pandora.api.get({id: id, keys: ['modified', 'posterRatio'].concat(pandora.site.itemTitleKeys)}, function(result) {
2011-09-30 10:33:45 +00:00
var ratio = result.data.posterRatio,
2011-10-29 13:50:40 +00:00
height = pandora.getInfoHeight(true);
emptyInfo();
that.append(
2011-09-30 10:33:45 +00:00
pandora.$ui.posterInfo = pandora.ui.posterInfo(Ox.extend(result.data, {id: id}))
);
previousView == 'video' && resizeInfo();
});
2017-01-26 17:47:24 +00:00
} else if (view == 'document') {
//FIXME: document info
emptyInfo();
if(!pandora.user.ui.document) {
that.append(pandora.$ui.listInfo = pandora.ui.listInfo());
}
2011-09-30 10:33:45 +00:00
} else if (view == 'video') {
pandora.api.get({
id: id,
2015-11-10 15:08:00 +00:00
keys: ['duration', 'posterFrame', 'rendered', 'videoRatio', 'modified']
}, function(result) {
emptyInfo();
if (result.data && result.data.rendered) {
that.append(
pandora.$ui.videoPreview = pandora.ui.videoPreview({
duration: result.data.duration,
frameRatio: result.data.videoRatio,
height: pandora.getInfoHeight(true),
id: id,
2015-11-10 15:08:00 +00:00
modified: result.data.modified,
position: !ui.item && ui.listView == 'timelines'
? (ui.videoPoints[id] ? ui.videoPoints[id].position : 0)
2013-02-11 05:43:31 +00:00
: result.data.posterFrame,
2013-02-11 06:33:53 +00:00
videoTooltip: function() {
2013-02-11 06:38:13 +00:00
return (
pandora.user.ui.item
&& ['timeline', 'player', 'editor'].indexOf(pandora.user.ui.itemView) > -1
2013-05-09 10:13:58 +00:00
) ? Ox._('Go to Position') : (
Ox._(pandora.user.ui.item ? 'Switch to {0} View' : 'Open in {0} View',
2013-05-09 10:13:58 +00:00
[Ox._(Ox.getObjectById(pandora.site.itemViews, pandora.user.ui.videoView).title)]));
2013-02-11 06:30:30 +00:00
},
width: ui.sidebarSize
})
.bindEvent({
click: function(data) {
2012-04-17 08:03:11 +00:00
if (ui.item && ['timeline', 'player', 'editor'].indexOf(ui.itemView) > -1) {
pandora.$ui[ui.itemView].options({
position: data.position
});
} else {
pandora.UI.set('videoPoints.' + id, {
'in': 0, out: 0, position: data.position
});
pandora.UI.set({
item: id,
itemView: ui.videoView
});
}
2011-09-30 10:33:45 +00:00
}
})
);
} else {
that.append(
Ox.Bar({size: 16}).css({
position: 'absolute',
bottom: 0
}).append(
$('<div>').css({
marginTop: '2px',
fontSize: '9px',
textAlign: 'center'
2013-05-10 14:54:30 +00:00
}).html(Ox._('No Video'))
)
);
2011-09-30 10:33:45 +00:00
}
previousView != 'video' && resizeInfo();
2011-09-30 10:33:45 +00:00
});
2011-08-18 07:54:46 +00:00
}
2011-09-18 21:18:05 +00:00
}
2011-09-30 10:33:45 +00:00
2011-09-18 21:18:05 +00:00
that.resizeInfo = function() {
2011-09-30 10:33:45 +00:00
var view = getView();
if (view == 'list' || view == 'edit' || view == 'text') {
pandora.$ui.listInfo.resizeInfo();
2011-09-18 21:18:05 +00:00
} else if (view == 'poster') {
pandora.$ui.posterInfo.resizeInfo();
2011-09-18 21:18:05 +00:00
} else if (view == 'video') {
2013-02-19 13:26:34 +00:00
pandora.$ui.videoPreview && pandora.$ui.videoPreview.options({
2011-10-29 13:50:40 +00:00
height: pandora.getInfoHeight(true),
2011-09-30 10:33:45 +00:00
width: ui.sidebarSize
2011-09-29 17:25:04 +00:00
});
2011-09-18 21:18:05 +00:00
}
};
2011-09-30 10:33:45 +00:00
that.updateInfo = function() {
updateInfo();
};
that.updateListInfo = function() {
2014-09-23 21:57:35 +00:00
emptyInfo();
that.empty().append(
pandora.$ui.listInfo = pandora.ui.listInfo()
);
};
2011-09-18 21:18:05 +00:00
return that;
2011-09-30 10:33:45 +00:00
2011-09-18 21:18:05 +00:00
};
2011-10-22 16:07:05 +00:00
pandora.ui.listInfo = function() {
var ui = pandora.user.ui,
2016-10-04 22:00:03 +00:00
folderItems = pandora.getFolderItems(ui.section),
folderItem = folderItems.slice(0, -1),
2017-01-26 17:47:24 +00:00
list = pandora.user.ui.section == 'items'
? pandora.user.ui._list
: pandora.user.ui.section == 'documents'
? pandora.user.ui._collection
: ui[folderItem.toLowerCase()],
canEditFeaturedLists = pandora.site.capabilities['canEditFeatured' + folderItems][pandora.user.level],
2014-09-23 21:57:35 +00:00
that = Ox.Element().css({padding: '16px', textAlign: 'center'}),
$icon = Ox.Element('<img>')
2011-10-22 16:07:05 +00:00
.attr({
2016-10-04 22:00:03 +00:00
src: list ? pandora.getListIcon(ui.section, list, 256) : '/static/png/icon.png'
2011-10-22 16:07:05 +00:00
})
.css(getIconCSS())
.appendTo(that),
$title, $description;
2011-11-03 17:11:10 +00:00
that.append($('<div>').css({height: '16px'}));
2011-10-05 17:35:16 +00:00
//fixme: allow editing
//pandora.api.editList({id: list, description: 'foobbar'}, callback)
//pandora.api.editPage({name: 'allItems', body: 'foobar'}, callback)
2011-10-22 16:07:05 +00:00
if (list) {
pandora.api['find' + folderItems]({
query: {conditions: [{key: 'id', value: list, operator: '=='}]},
keys: ['description', 'status', 'name', 'user']
2011-10-05 17:35:16 +00:00
}, function(result) {
2011-10-22 16:07:05 +00:00
if (result.data.items.length) {
2011-11-06 12:33:34 +00:00
var item = result.data.items[0],
editable = item.user == pandora.user.username
|| (item.status == 'featured' && canEditFeaturedLists);
if (editable) {
$icon.options({
2013-05-09 10:13:58 +00:00
tooltip: Ox._('Doubleclick to edit icon')
}).bindEvent({
doubleclick: editIcon
});
}
2011-10-22 16:07:05 +00:00
that.append(
$title = Ox.Editable({
2011-11-06 12:33:34 +00:00
editable: editable,
2011-11-03 17:11:10 +00:00
format: function(value) {
// FIXME: document what we're trying to do here!
return Ox.encodeHTMLEntities(
Ox.decodeHTMLEntities(
item.status == 'featured' || editable
? value
: item.user + ': ' + value
)
)
2011-11-03 17:11:10 +00:00
},
tooltip: editable ? pandora.getEditTooltip('title') : '',
2011-11-03 17:11:10 +00:00
value: item.name,
width: pandora.user.ui.sidebarSize - 32
})
.css({fontWeight: 'bold', textAlign: 'center'})
.bindEvent({
edit: function() {
$title.options({
width: that.width()
});
},
submit: function(data) {
data.value = Ox.decodeHTMLEntities(data.value);
if (data.value != item.name) {
pandora.api['edit' + folderItem]({
id: list,
name: data.value
}, function(result) {
if (result.data.id != list) {
2017-02-15 18:13:18 +00:00
Ox.Request.clearCache('find' + folderItems);
Ox.Request.clearCache('Home');
pandora.renameList(list, result.data.id, result.data.name);
list = result.data.id;
item.name = result.data.name;
}
});
}
}
})
2011-10-22 16:07:05 +00:00
).append(
2011-11-03 17:11:10 +00:00
$('<div>').css({height: '8px'})
).append(
$description = Ox.Editable({
clickLink: pandora.clickLink,
2011-11-03 17:11:10 +00:00
format: function(value) {
return '<div class="OxLight" style="text-align: center">'
+ value + '</div>';
2011-11-03 17:11:10 +00:00
},
2011-11-06 12:33:34 +00:00
editable: editable,
height: pandora.user.ui.sidebarSize - 32,
2011-11-06 12:33:34 +00:00
placeholder: editable
2013-05-09 10:13:58 +00:00
? '<div class="OxLight" style="text-align: center">' + Ox._('No description') + '</span>'
: '',
tooltip: editable ? pandora.getEditTooltip('description') : '',
2011-11-03 17:11:10 +00:00
type: 'textarea',
value: item.description,
width: pandora.user.ui.sidebarSize - 32
})
.css({textAlign: 'center'})
.bindEvent({
edit: function() {
// scrollbars may appear
setTimeout(function() {
var width = that.width();
$description.options({
height: width,
width: width
});
}, 25);
},
submit: function(data) {
if (data.value != item.description) {
pandora.api['edit' + folderItem]({
id: list,
description: data.value
}, function(result) {
item.description = result.data.description;
Ox.Request.clearCache('find' + folderItems);
2017-02-15 18:13:18 +00:00
Ox.Request.clearCache('Home');
});
}
}
})
2011-10-22 16:07:05 +00:00
);
} else {
that.append(
$('<div>')
2011-11-03 17:11:10 +00:00
.css({paddingTop: '16px'})
.html(Ox._('{0} not found', [Ox._(folderItem)]))
2011-10-22 16:07:05 +00:00
);
}
2011-10-05 17:35:16 +00:00
});
2011-10-22 16:07:05 +00:00
} else {
that.append(
$('<div>')
.css({fontWeight: 'bold'})
.html(ui.section == 'items'
? Ox._('All {0}', [Ox._(pandora.site.itemName.plural)])
2017-01-26 17:47:24 +00:00
: ui.section == 'documents'
? Ox._('All {0}', [Ox._('Documents')])
: Ox._('{0} ' + folderItems, [pandora.site.site.name])
)
2011-10-22 16:07:05 +00:00
);
2011-10-05 17:35:16 +00:00
}
function editIcon() {
// timeout is needed since if the icon is clicked before the list
// folders have loaded, the list dialog cannot get the list data yet.
if (pandora.getListData().id) {
pandora.$ui.listDialog = pandora.ui.listDialog('icon').open();
} else {
setTimeout(editIcon, 250);
}
}
2011-09-18 21:18:05 +00:00
function getIconCSS() {
2014-11-15 11:16:09 +00:00
var list = pandora.user.ui.section == 'items' ? pandora.user.ui._list : ui[folderItem.toLowerCase()],
size = Math.round(pandora.user.ui.sidebarSize / 2);
return Ox.extend({
2011-09-29 17:25:04 +00:00
width: size + 'px',
2014-11-15 11:16:09 +00:00
height: size + 'px'
}, list ? {
2012-05-26 15:46:24 +00:00
borderRadius: Math.round(size / 4) + 'px'
2014-11-15 11:16:09 +00:00
} : {});
2011-09-18 21:18:05 +00:00
}
that.resizeInfo = function() {
var width = that.width();
2011-09-18 21:18:05 +00:00
$icon.css(getIconCSS());
2011-11-06 22:08:22 +00:00
$title && $title.options({
width: width
});
2011-11-06 22:08:22 +00:00
$description && $description.options({
height: width,
width: width
});
2011-10-05 17:35:16 +00:00
};
2011-05-25 19:42:45 +00:00
return that;
2011-05-25 19:42:45 +00:00
};
2011-09-18 21:18:05 +00:00
pandora.ui.posterInfo = function(data) {
var $poster = Ox.Element({
element: '<img>',
tooltip: function() {
return Ox._('Open in Info View');
}
})
2013-07-02 13:15:26 +00:00
.attr({src: '/' + data.id + '/poster512.jpg?' + data.modified})
.css(getPosterCSS())
.bindEvent({
anyclick: function() {
pandora.UI.set({item: data.id, itemView: 'info'});
}
}),
2011-09-18 21:18:05 +00:00
$text = $('<div>')
.css({
width: pandora.user.ui.sidebarSize - 8 + 'px',
height: '12px',
padding: '2px 4px 2px 4px',
fontSize: '9px',
textAlign: 'center',
textOverflow: 'ellipsis',
overflow: 'hidden'
})
.html(pandora.getItemTitle(data)),
2011-09-18 21:18:05 +00:00
that = Ox.SplitPanel({
elements: [
{
element: $('<div>').append($poster)
},
{
element: Ox.Bar({size: 16}).append($text),
size: 16
}
],
orientation: 'vertical'
});
function getPosterCSS() {
var css = {},
ratio = pandora.user.ui.sidebarSize / (pandora.user.ui.sidebarSize - 16);
if (data.posterRatio < ratio) {
css.height = pandora.user.ui.sidebarSize - 16;
css.width = Math.round(css.height * data.posterRatio);
css.marginLeft = Math.floor((pandora.user.ui.sidebarSize - css.width) / 2);
} else {
css.width = pandora.user.ui.sizebarSize;
css.height = Math.round(css.width / data.posterRatio);
css.marginTop = Math.floor((pandora.user.ui.sidebarSize - 16 - css.height) / 2);
}
return Ox.map(css, function(value) {
return value + 'px';
});
}
that.resizeInfo = function() {
2011-09-18 21:18:05 +00:00
$poster.css(getPosterCSS());
$text.css({width: pandora.user.ui.sidebarSize - 8 + 'px'})
}
return that;
};