pandora/static/js/navigationView.js

260 lines
8.8 KiB
JavaScript
Raw Normal View History

// vim: et:ts=4:sw=4:sts=4:ft=javascript
2011-11-05 17:04:10 +00:00
'use strict';
pandora.ui.navigationView = function(type, videoRatio) {
var ui = pandora.user.ui,
2013-03-01 11:24:22 +00:00
isEmbed = pandora.isEmbedURL(),
itemName = type == 'map' ? 'place' : 'event',
listSizes = [
144 + Ox.UI.SCROLLBAR_SIZE,
280 + Ox.UI.SCROLLBAR_SIZE,
416 + Ox.UI.SCROLLBAR_SIZE
],
2013-07-12 20:31:34 +00:00
listSize = listSizes[ui.clipColumns - 1],
$element = Ox.Element(),
$toolbar = Ox.Bar({size: 24})
.append(
pandora.$ui.sortElement = pandora.ui.sortElement(true)
)
.bindEvent({
doubleclick: function(e) {
if ($(e.target).is('.OxBar')) {
$list.animate({scrollTop: 0}, 250);
}
}
}),
$list = pandora.ui.clipList(videoRatio)
.bindEvent({
init: function(data) {
updateStatusbar(data.items);
}
}),
$status = $('<div>')
.css({
width: '100%',
marginTop: '2px',
fontSize: '9px',
textAlign: 'center',
textOverflow: 'ellipsis'
}),
$statusbar = Ox.Bar({size: 16}).append($status),
$listPanel = Ox.SplitPanel({
elements: [
{
element: $toolbar,
size: 24
},
{
element: $list
},
{
element: $statusbar,
size: 16
}
],
orientation: 'vertical'
})
.bindEvent({
2011-10-30 21:05:57 +00:00
resize: function() {
$list.size()
},
resizeend: function(data) {
var size = data.size;
if (listSizes.indexOf(size) == -1) {
if (size <= (listSizes[0] + listSizes[1]) / 2) {
size = listSizes[0];
} else if (size < (listSizes[1] + listSizes[2]) / 2) {
size = listSizes[1];
} else {
size = listSizes[2];
}
that.size(1, size, function() {
// strangely, the animation may still not be fully
// finished, causing the list size to be off by one
setTimeout(function() {
$element['resize' + Ox.toTitleCase(type)]();
$list.size();
}, 0);
});
}
2013-07-12 20:31:34 +00:00
pandora.UI.set({clipColumns: listSizes.indexOf(size) + 1});
}
}),
2013-03-01 11:24:22 +00:00
that = !isEmbed ? Ox.SplitPanel({
elements: [
{
2012-05-26 15:46:24 +00:00
element: $element
},
{
element: $listPanel,
resizable: true,
resize: listSizes,
size: listSize,
2013-05-09 10:13:58 +00:00
tooltip: Ox._('clips')
}
],
orientation: 'horizontal'
2013-03-01 11:24:22 +00:00
}) : Ox.SplitPanel({
elements: [
{
element: $element
},
{
element: $listPanel,
size: 188 + Ox.UI.SCROLLBAR_SIZE
}
],
orientation: 'vertical'
});
if (type == 'map') {
that.replaceElement(0,
$element = Ox.Map({
2011-10-30 21:05:57 +00:00
// clickable: pandora.site.capabilities.canClickMap[pandora.user.level],
find: ui.mapFind,
// 20 px menu + 24 px toolbar + 1px resizbar + 16px statusbar (if !item)
2013-03-01 11:24:22 +00:00
height: isEmbed ? window.innerHeight - 40
: !ui.item ? window.innerHeight - ui.showFilters * ui.filtersSize - 61
: window.innerHeight - ui.showBrowser * (112 + Ox.UI.SCROLLBAR_SIZE) - 45,
places: function(data, callback) {
2011-10-19 16:20:12 +00:00
var itemsQuery;
if (!ui.item) {
2011-10-19 16:20:12 +00:00
itemsQuery = ui.find;
} else {
2011-10-19 16:20:12 +00:00
itemsQuery = {
conditions: [{key: 'id', value: ui.item, operator: '=='}],
operator: '&'
};
}
return pandora.api.findPlaces(Ox.extend({
2011-10-19 16:20:12 +00:00
itemsQuery: itemsQuery
}, data), callback);
},
selected: ui.mapSelection,
2011-10-04 02:26:54 +00:00
showControls: ui.showMapControls,
showLabels: ui.showMapLabels,
showTypes: true,
toolbar: true,
2013-03-01 11:24:22 +00:00
width: isEmbed ? window.innerWidth
: window.innerWidth - ui.showSidebar * ui.sidebarSize - listSize - 2,
zoombar: true
})
.bindEvent({
resize: function() {
$element.resizeMap();
},
2011-10-04 02:26:54 +00:00
selectplace: selectItem,
togglecontrols: function(data) {
2013-07-14 15:36:49 +00:00
pandora.UI.set({showMapControls: data.visible});
2011-10-04 02:26:54 +00:00
},
togglelabels: function(data) {
2013-07-14 15:36:49 +00:00
pandora.UI.set({showMapLabels: data.visible});
2011-10-04 02:26:54 +00:00
}
})
);
2011-10-08 19:09:25 +00:00
// needed for resize handlers further up
pandora.$ui.map = $element;
2011-10-29 17:46:46 +00:00
} else {
pandora.api.findEvents({
2011-10-19 16:20:12 +00:00
itemsQuery: !ui.item ? ui.find : {
conditions: [{key: 'id', value: ui.item, operator: '=='}],
operator: '&'
},
keys: ['id', 'name', 'start', 'end'],
2012-02-02 05:16:32 +00:00
query: {
conditions: [{key: 'start', value: '', operator: '!='}]
},
range: [0, 1000000]
}, function(result) {
that.replaceElement(0,
$element = Ox.Calendar({
2013-03-06 14:09:18 +00:00
date: new Date(ui.calendarFind || 0),
events: result.data.items,
// 20 px menu + 24 px toolbar + 1px resizbar + 16px statusbar (if !item)
height: !ui.item
? window.innerHeight - ui.showFilters * ui.filtersSize - 61
: window.innerHeight - ui.showBrowser * (112 + Ox.UI.SCROLLBAR_SIZE) - 45,
range: [-5000, 5000],
2013-03-06 14:09:18 +00:00
selected: ui.calendarSelection,
showControls: ui.showCalendarControls,
2012-01-13 16:26:07 +00:00
showToolbar: true,
showZoombar: true,
width: window.innerWidth - ui.showSidebar * ui.sidebarSize - listSize - 2,
zoom: 4
})
.bindEvent({
resize: function(data) {
2011-10-09 21:12:50 +00:00
// triggered by SplitPanel
$element.resizeCalendar();
},
select: selectItem
})
);
2011-10-08 19:09:25 +00:00
// needed for resize handlers further up
pandora.$ui.calendar = $element;
2011-10-29 17:46:46 +00:00
});
}
2013-08-05 22:45:49 +00:00
updateStatusbar(0);
function selectItem(data) {
var id = data.id || '';
if (id && id[0] != '_') {
2013-05-09 10:13:58 +00:00
$status.html(Ox._('Loading...'));
$list.options({
items: function(data, callback) {
2011-10-19 16:20:12 +00:00
var itemsQuery;
if (!ui.item) {
2011-10-19 16:20:12 +00:00
itemsQuery = ui.find;
} else {
2011-10-19 16:20:12 +00:00
itemsQuery = {
conditions: [{key: 'id', value: ui.item, operator: '=='}],
operator: '&'
};
}
2012-06-20 17:45:14 +00:00
return pandora.api.findClips(Ox.extend(data, {
2011-10-19 16:20:12 +00:00
itemsQuery: itemsQuery,
query: {
conditions: [{key: itemName, value: id, operator:'=='}],
operator: '&'
2012-05-26 15:46:24 +00:00
}
2012-06-20 17:45:14 +00:00
}), callback);
}
});
type == 'map' && pandora.UI.set({mapSelection: data.name});
} else {
$list.options({
selected: []
}).options({
items: function(data, callback) {
callback({data: {items: data.keys ? [] : 0}});
}
});
type == 'map' && pandora.UI.set({mapSelection: id ? $element.options('find') : ''});
}
}
function updateStatusbar(items) {
$status.html(Ox.toTitleCase(Ox.formatCount(items, 'clip')));
}
// needed to it can recieve events from UI module
pandora.$ui.clipList = $list;
return that;
2012-02-02 05:16:32 +00:00
};