cablegates/static/js/pandora/ui/list.js

464 lines
21 KiB
JavaScript
Raw Normal View History

2011-07-29 18:37:11 +00:00
// vim: et:ts=4:sw=4:sts=4:ft=javascript
pandora.ui.list = function() { // fixme: remove view argument
2011-08-08 07:48:13 +00:00
var that, $map,
view = pandora.user.ui.lists[pandora.user.ui.list].listView,
preview = false
2011-05-25 19:42:45 +00:00
//Ox.print('constructList', view);
if (view == 'list') {
/*
keys = Ox.unique($.merge(
2011-06-06 15:48:11 +00:00
$.map(pandora.user.ui.lists[pandora.user.ui.list].columns, function(id) {
return Ox.getObjectById(pandora.site.sortKeys, id);
2011-05-25 19:42:45 +00:00
}),
2011-06-06 15:48:11 +00:00
pandora.site.sortKeys
2011-05-25 19:42:45 +00:00
));
Ox.print('$$$$', keys)
*/
2011-06-19 17:49:25 +00:00
that = Ox.TextList({
2011-06-06 15:48:11 +00:00
columns: $.map(pandora.site.sortKeys, function(key, i) {
var position = pandora.user.ui.lists[pandora.user.ui.list].columns.indexOf(key.id);
2011-05-25 19:42:45 +00:00
return {
align: ['string', 'text'].indexOf(
Ox.isArray(key.type) ? key.type[0]: key.type
) > -1 ? 'left' : 'right',
defaultWidth: key.columnWidth,
format: key.format,
id: key.id,
operator: pandora.getSortOperator(key.id),
position: position,
removable: !key.columnRequired,
title: key.title,
type: key.type,
unique: key.id == 'id',
visible: position > -1,
2011-06-06 15:48:11 +00:00
width: pandora.user.ui.lists[pandora.user.ui.list].columnWidth[key.id] || key.columnWidth
2011-05-25 19:42:45 +00:00
};
}),
columnsMovable: true,
columnsRemovable: true,
columnsResizable: true,
columnsVisible: true,
id: 'list',
items: function(data, callback) {
//Ox.print('data, pandora.Query.toObject', data, pandora.Query.toObject())
pandora.api.find($.extend(data, {
query: pandora.Query.toObject()
}), callback);
},
scrollbarVisible: true,
selected: pandora.user.ui.lists[pandora.user.ui.list].selected,
2011-06-06 15:48:11 +00:00
sort: pandora.user.ui.lists[pandora.user.ui.list].sort
2011-05-25 19:42:45 +00:00
})
.bindEvent({
columnchange: function(event, data) {
2011-06-27 13:39:35 +00:00
var columnWidth = {};
2011-06-06 15:48:11 +00:00
pandora.UI.set(['lists', pandora.user.ui.list, 'columns'].join('|'), data.ids);
2011-05-25 19:42:45 +00:00
/*
data.ids.forEach(function(id) {
columnWidth[id] =
2011-06-06 15:48:11 +00:00
pandora.user.ui.lists[pandora.user.ui.list].columnWidth[id] ||
Ox.getObjectById(pandora.site.sortKeys, id).width
2011-05-25 19:42:45 +00:00
});
2011-06-06 15:48:11 +00:00
pandora.UI.set(['lists', pandora.user.ui.list, 'columnWidth'].join('|'), columnWidth);
2011-05-25 19:42:45 +00:00
*/
},
columnresize: function(event, data) {
2011-06-06 15:48:11 +00:00
pandora.UI.set(['lists', pandora.user.ui.list, 'columnWidth', data.id].join('|'), data.width);
2011-05-25 19:42:45 +00:00
},
resize: function(event, data) { // this is the resize event of the split panel
that.size();
},
sort: function(event, data) {
2011-06-06 15:48:11 +00:00
pandora.UI.set(['lists', pandora.user.ui.list, 'sort'].join('|'), [data]);
2011-05-25 19:42:45 +00:00
}
});
} else if (view == 'icons') {
//alert(JSON.stringify(pandora.user.ui.lists[pandora.user.ui.list].selected))
2011-06-19 17:49:25 +00:00
that = Ox.IconList({
2011-08-07 20:25:33 +00:00
defaultRatio: pandora.user.ui.icons == 'posters' ? 5/8 : 1,
2011-05-25 19:42:45 +00:00
id: 'list',
item: function(data, sort, size) {
2011-08-06 18:00:15 +00:00
var icons = pandora.user.ui.icons,
ratio = icons == 'posters' ? data.poster.width / data.poster.height : 1;
2011-05-25 19:42:45 +00:00
size = size || 128;
return {
height: ratio <= 1 ? size : size / ratio,
2011-08-06 18:00:15 +00:00
id: data.id,
2011-05-25 19:42:45 +00:00
info: data[['title', 'director'].indexOf(sort[0].key) > -1 ? 'year' : sort[0].key],
title: data.title + (data.director.length ? ' (' + data.director.join(', ') + ')' : ''),
2011-08-06 18:00:15 +00:00
url: icons == 'posters'
? '/' + data.id + '/poster' + size + '.jpg'
: '/' + data.id + '/icon' + size + '.jpg',
2011-05-25 19:42:45 +00:00
width: ratio >= 1 ? size : size * ratio
};
},
items: function(data, callback) {
//Ox.print('data, pandora.Query.toObject', data, pandora.Query.toObject())
pandora.api.find($.extend(data, {
query: pandora.Query.toObject()
}), callback);
},
keys: ['director', 'id', 'poster', 'title', 'year'],
selected: pandora.user.ui.lists[pandora.user.ui.list].selected,
2011-05-25 19:42:45 +00:00
size: 128,
2011-06-06 15:48:11 +00:00
sort: pandora.user.ui.lists[pandora.user.ui.list].sort,
2011-05-25 19:42:45 +00:00
unique: 'id'
2011-06-16 20:00:10 +00:00
});
2011-06-27 13:39:35 +00:00
} else if (view == 'info') {
that = Ox.Element().css({margin: '16px'}).html(view + ' results view still missing.');
} else if (view == 'clips') {
that = Ox.Element().css({margin: '16px'}).html(view + ' results view still missing.');
} else if (view == 'timelines') {
that = Ox.Element().css({margin: '16px'}).html(view + ' results view still missing.');
} else if (view == 'maps') {
that = Ox.Element().css({margin: '16px'}).html(view + ' results view still missing.');
} else if (view == 'calendars') {
that = Ox.Element().css({margin: '16px'}).html(view + ' results view still missing.');
2011-06-16 20:00:10 +00:00
} else if (view == 'clip') {
var fixedRatio = 16/9;
2011-06-19 17:49:25 +00:00
that = Ox.IconList({
fixedRatio: fixedRatio,
2011-06-16 20:00:10 +00:00
item: function(data, sort, size) {
size = size || 128;
var ratio = data.aspectRatio,
width = ratio > fixedRatio ? size : Math.round(size * ratio / fixedRatio),
height = Math.round(width / ratio),
2011-08-06 18:17:22 +00:00
url = '/' + data.item + '/' + height + 'p' + data['in'] + '.jpg';
2011-06-16 20:00:10 +00:00
return {
height: height,
id: data['id'],
2011-08-06 18:00:15 +00:00
info: Ox.formatDuration(data['in'], 'short') + ' - ' + Ox.formatDuration(data['out'], 'short'),
2011-06-16 20:00:10 +00:00
title: data.value,
url: url,
width: width
};
},
items: function(data, callback) {
2011-06-17 07:44:45 +00:00
var itemQuery = pandora.Query.toObject(),
query = {conditions:[]};
//fixme: can this be in pandora.Query? dont just check for subtitles
itemQuery.conditions.forEach(function(q) {
2011-08-06 18:00:15 +00:00
if (q.key == 'subtitles') {
2011-06-17 07:44:45 +00:00
query.conditions.push({key: 'value', value: q.value, operator: q.operator});
}
});
2011-06-16 20:00:10 +00:00
pandora.api.findAnnotations($.extend(data, {
2011-06-17 07:44:45 +00:00
query: query,
itemQuery: itemQuery
2011-06-16 20:00:10 +00:00
}), callback);
},
keys: ['id', 'value', 'in', 'out', 'aspectRatio', 'item'],
size: 128,
sort: pandora.user.ui.lists[pandora.user.ui.list].sort,
unique: 'id'
2011-06-20 16:56:18 +00:00
}).bindEvent({
open: function(event, data) {
var id = data.ids[0],
item = that.value(id, 'item'),
position = that.value(id, 'in');
pandora.UI.set('videoPosition|' + item, position);
pandora.URL.set(item + '/timeline');
}
2011-06-16 20:00:10 +00:00
});
2011-05-25 19:42:45 +00:00
} else if (view == 'map') {
2011-08-07 23:43:21 +00:00
var fixedRatio = 16/9;
2011-06-19 17:49:25 +00:00
that = Ox.SplitPanel({
2011-05-25 19:42:45 +00:00
elements: [
{
2011-06-06 15:48:11 +00:00
element: pandora.$ui.map = Ox.Map({
height: window.innerHeight - pandora.user.ui.showGroups * pandora.user.ui.groupsSize - 61,
places: function(data, callback) {
2011-06-18 18:48:49 +00:00
var itemQuery = pandora.Query.toObject(),
query = {conditions:[]};
return pandora.api.findPlaces($.extend(data, {
itemQuery: itemQuery,
query: query
}), callback);
},
showTypes: true,
toolbar: true,
2011-06-06 15:48:11 +00:00
width: window.innerWidth - pandora.user.ui.showSidebar * pandora.user.ui.sidebarSize - 2 - 144 - Ox.UI.SCROLLBAR_SIZE,
2011-06-20 15:02:53 +00:00
}).bindEvent({
selectplace: function(event, place) {
2011-06-20 16:14:38 +00:00
if(place && place.id[0] != '_') {
2011-06-20 15:02:53 +00:00
pandora.$ui.clips.options({
items: function(data, callback) {
return pandora.api.findAnnotations($.extend(data, {
query: {
2011-06-20 16:14:38 +00:00
conditions:[{key: 'place', value: place.id, operator:'='}]
2011-06-20 15:02:53 +00:00
},
itemQuery: pandora.Query.toObject()
}), callback);
}
});
} else {
pandora.$ui.clips.options({
items: []
});
}
}
})
},
{
2011-06-20 15:02:53 +00:00
element: pandora.$ui.clips = Ox.IconList({
2011-08-07 23:43:21 +00:00
fixedRatio: fixedRatio,
2011-06-20 15:02:53 +00:00
item: function(data, sort, size) {
Ox.print('RATIO', data.aspectRatio);
2011-06-20 15:02:53 +00:00
size = size || 128;
2011-08-07 23:43:21 +00:00
var width = data.aspectRatio < fixedRatio ? size : size * data.aspectRatio / fixedRatio,
height = width / data.aspectRatio,
2011-08-06 18:18:39 +00:00
url = '/' + data.item + '/' + width + '/' + data['in'] + '.jpg';
2011-06-20 15:02:53 +00:00
return {
height: height,
id: data.id,
info: Ox.formatDuration(data['in'], 'short') + ' - '
+ Ox.formatDuration(data['out'], 'short'),
2011-06-20 15:02:53 +00:00
title: data.value,
url: url,
width: width
};
},
items: [],
keys: ['id', 'value', 'in', 'out', 'aspectRatio', 'item'],
size: 128,
sort: pandora.user.ui.lists[pandora.user.ui.list].sort,
unique: 'id'
2011-06-20 16:56:18 +00:00
}).bindEvent({
open: function(event, data) {
var id = data.ids[0],
item = pandora.$ui.clips.value(id, 'item'),
position = pandora.$ui.clips.value(id, 'in');
pandora.UI.set('videoPosition|' + item, position);
pandora.URL.set(item + '/timeline');
}
2011-06-20 15:02:53 +00:00
}),
id: 'place',
size: 144 + Ox.UI.SCROLLBAR_SIZE
}
],
orientation: 'horizontal'
})
.bindEvent('resize', function() {
2011-06-06 15:48:11 +00:00
pandora.$ui.map.resizeMap();
});
} else if (view == 'calendar') {
2011-06-19 17:49:25 +00:00
that = Ox.SplitPanel({
elements: [
{
2011-06-06 15:48:11 +00:00
element: pandora.$ui.calendar = Ox.Calendar({
date: new Date(0),
events: [
{name: 'Thirty Years\' War', start: '1618', end: '1648', type: 'other'},
{name: 'American Civil War', start: '1861-04-12', end: '1865-04-09', type: 'other'},
{name: 'Franco-Prussian War', start: '1870-07-19', end: '1871-05-10', type: 'other'},
{name: 'World War One', start: '1914-07-28', end: '1918-11-11', type: 'other'},
{name: 'World War Two', start: '1939-09-01', end: '1945-09-02', type: 'other'},
2011-06-02 17:39:54 +00:00
{name: 'Cold War', start: '1947', end: '1991', type: 'other'},
{name: 'Korean War', start: '1950-06-25', end: '1953-07-27', type: 'other'},
{name: 'Algerian War', start: '1954-11-01', end: '1962-03-19', type: 'other'},
{name: 'Vietnam War', start: '1955-11-01', end: '1975-04-30', type: 'other'},
{name: 'Six-Day War', start: '1967-06-05', end: '1967-06-11', type: 'other'},
{name: 'Iran-Iraq War', start: '1980-09-22', end: '1988-08-20', type: 'other'},
{name: 'Gulf War', start: '1990-08-02', end: '1991-02-28', type: 'other'}
2011-05-25 19:42:45 +00:00
],
2011-06-06 15:48:11 +00:00
height: window.innerHeight - pandora.user.ui.showGroups * pandora.user.ui.groupsSize - 61,
range: [-5000, 5000],
2011-06-06 15:48:11 +00:00
width: window.innerWidth - pandora.user.ui.showSidebar * pandora.user.ui.sidebarSize - 2 - 144 - Ox.UI.SCROLLBAR_SIZE,
zoom: 4
})
2011-05-25 19:42:45 +00:00
},
{
2011-06-19 17:49:25 +00:00
element: Ox.Element(),
2011-05-25 19:42:45 +00:00
id: 'place',
size: 144 + Ox.UI.SCROLLBAR_SIZE
2011-05-25 19:42:45 +00:00
}
],
orientation: 'horizontal'
})
.bindEvent('resize', function() {
2011-05-25 19:42:45 +00:00
});
} else {
2011-06-19 17:49:25 +00:00
$list = Ox.Element('<div>')
2011-05-25 19:42:45 +00:00
.css({
width: '100px',
height: '100px',
background: 'red'
});
}
['list', 'icons'].indexOf(view) > -1 && that.bind({
dragstart: function(e) {
2011-06-06 15:48:11 +00:00
pandora.$ui.folderList.forEach(function($list, i) {
2011-05-25 19:42:45 +00:00
$list.addClass('OxDrop');
});
},
dragend: function(e) {
2011-06-06 15:48:11 +00:00
pandora.$ui.folderList.forEach(function($list, i) {
2011-05-25 19:42:45 +00:00
$list.removeClass('OxDrop');
});
2011-06-16 20:00:10 +00:00
}
2011-05-25 19:42:45 +00:00
}).bindEvent({
closepreview: function(event, data) {
2011-06-06 15:48:11 +00:00
pandora.$ui.previewDialog.close();
2011-08-08 07:48:13 +00:00
preview = false;
//delete pandora.$ui.previewDialog;
2011-05-25 19:42:45 +00:00
},
copy: function(event, data) {
Ox.Clipboard.copy({
items: data.ids,
text: $.map(data.ids, function(id) {
2011-06-06 15:48:11 +00:00
return pandora.$ui.list.value(id, 'title');
2011-05-25 19:42:45 +00:00
}).join('\n')
});
},
'delete': function(event, data) {
2011-06-04 16:19:06 +00:00
pandora.getListData().editable && pandora.api.removeListItems({
2011-06-06 15:48:11 +00:00
list: pandora.user.ui.list,
2011-05-25 19:42:45 +00:00
items: data.ids
2011-06-04 16:19:06 +00:00
}, pandora.reloadList);
2011-05-25 19:42:45 +00:00
},
init: function(event, data) {
2011-06-06 15:48:11 +00:00
pandora.$ui.total.html(pandora.ui.status('total', data));
2011-05-25 19:42:45 +00:00
data = [];
2011-06-06 15:48:11 +00:00
$.each(pandora.site.totals, function(i, v) {
2011-05-25 19:42:45 +00:00
data[v.id] = 0;
});
2011-06-06 15:48:11 +00:00
pandora.$ui.selected.html(pandora.ui.status('selected', data));
2011-05-25 19:42:45 +00:00
},
open: function(event, data) {
var id = data.ids[0],
title = that.value(id, 'title');
pandora.URL.set(title, id);
},
openpreview: function(event, data) {
2011-06-06 15:48:11 +00:00
pandora.requests.preview && pandora.api.cancel(pandora.requests.preview);
pandora.requests.preview = pandora.api.find({
2011-05-25 19:42:45 +00:00
keys: ['director', 'id', 'poster', 'title'],
query: {
conditions: $.map(data.ids, function(id, i) {
return {
key: 'id',
value: id,
operator: '='
}
}),
operator: '|'
}
}, function(result) {
2011-08-08 07:48:13 +00:00
var item = result.data.items[0],
title = item.title + ' (' + item.director + ')'
ratio = item.poster.width / item.poster.height,
windowWidth = window.innerWidth * 0.8,
windowHeight = window.innerHeight * 0.8,
windowRatio = windowWidth / windowHeight,
width = Math.round(ratio > windowRatio ? windowWidth : windowHeight * ratio),
height = Math.round(ratio < windowRatio ? windowHeight : windowWidth / ratio);
pandora.$ui.previewImage = $('<img>')
.attr({src: item.poster.url.replace('.jpg', '128.jpg')})
.css({width: width + 'px', height: height + 'px'})
$('<img>').load(function() {
pandora.$ui.previewImage.attr({src: $(this).attr('src')});
})
.attr({src: item.poster.url.replace('.jpg', '1024.jpg')});
if (!preview) {
if (!pandora.$ui.previewDialog) {
pandora.$ui.previewDialog = Ox.Dialog({
closeButton: true,
content: pandora.$ui.previewImage,
fixedRatio: true,
focus: false,
height: height,
maximizeButton: true,
title: title,
width: width
})
.bindEvent({
close: function() {
that.closePreview();
preview = false;
},
resize: function(event) {
pandora.$ui.previewImage.css({
width: event.width + 'px',
height: event.height + 'px'
});
}
})
.open();
} else {
pandora.$ui.previewDialog.options({
content: pandora.$ui.previewImage,
height: height,
title: title,
width: width
})
.open();
}
preview = true;
2011-05-25 19:42:45 +00:00
} else {
2011-08-08 07:48:13 +00:00
pandora.$ui.previewDialog.options({
2011-06-06 15:48:11 +00:00
content: pandora.$ui.previewImage,
2011-05-25 19:42:45 +00:00
title: title,
})
2011-08-08 07:48:13 +00:00
.setSize(width, height);
2011-05-25 19:42:45 +00:00
}
});
},
paste: function(event, data) {
2011-06-04 16:19:06 +00:00
data.items && pandora.getListData().editable && pandora.api.addListItems({
2011-06-06 15:48:11 +00:00
list: pandora.user.ui.list,
2011-05-25 19:42:45 +00:00
items: data.items
2011-06-04 16:19:06 +00:00
}, pandora.reloadList);
2011-05-25 19:42:45 +00:00
},
select: function(event, data) {
var $still, $timeline;
pandora.UI.set(['lists', pandora.user.ui.list, 'selected'].join('|'), data.ids);
//pandora.user.ui.lists[pandora.user.ui.list].selected = data.ids;
2011-05-25 19:42:45 +00:00
if (data.ids.length) {
2011-06-06 15:48:11 +00:00
pandora.$ui.mainMenu.enableItem('copy');
pandora.$ui.mainMenu.enableItem('openmovie');
2011-05-25 19:42:45 +00:00
} else {
2011-06-06 15:48:11 +00:00
pandora.$ui.mainMenu.disableItem('copy');
pandora.$ui.mainMenu.disableItem('openmovie');
2011-05-25 19:42:45 +00:00
}
2011-08-08 13:58:28 +00:00
pandora.$ui.leftPanel.replaceElement(2, pandora.$ui.info = pandora.ui.info(data.ids[0]));
2011-05-25 19:42:45 +00:00
pandora.api.find({
query: {
conditions: $.map(data.ids, function(id, i) {
return {
key: 'id',
value: id,
operator: '='
}
}),
operator: '|'
}
}, function(result) {
2011-06-06 15:48:11 +00:00
pandora.$ui.selected.html(pandora.ui.status('selected', result.data));
2011-05-25 19:42:45 +00:00
});
},
sort: function(event, data) {
Ox.print('--SORT--', pandora.user.ui.sort[0].key)
2011-05-25 19:42:45 +00:00
/* some magic has already set user.ui.sort
Ox.print(':', user.ui.sort[0])
if (data.key != user.ui.sort[0].key) {
2011-06-06 15:48:11 +00:00
pandora.$ui.mainMenu.checkItem('sort_sortmovies_' + data.key);
2011-05-25 19:42:45 +00:00
}
if (data.operator != user.ui.sort[0].operator) {
2011-06-06 15:48:11 +00:00
pandora.$ui.mainMenu.checkItem('sort_ordermovies_' + data.operator === '' ? 'ascending' : 'descending');
2011-05-25 19:42:45 +00:00
}
user.ui.sort[0] = data;
*/
2011-06-06 15:48:11 +00:00
pandora.$ui.mainMenu.checkItem('sortMenu_sortmovies_' + data.key);
pandora.$ui.mainMenu.checkItem('sortMenu_ordermovies_' + (data.operator === '' ? 'ascending' : 'descending'));
2011-05-25 19:42:45 +00:00
}
});
that.display = function() { // fixme: used?
2011-06-06 15:48:11 +00:00
pandora.$ui.rightPanel.replaceElement(1, pandora.$ui.contentPanel = pandora.ui.contentPanel());
2011-05-25 19:42:45 +00:00
};
return that;
};