openmedialibrary/static/js/infoView.js

539 lines
19 KiB
JavaScript
Raw Normal View History

2014-05-04 17:26:43 +00:00
'use strict';
2014-05-14 18:46:31 +00:00
oml.ui.infoView = function(identifyData) {
2014-05-04 17:26:43 +00:00
var ui = oml.user.ui,
2014-05-19 20:58:00 +00:00
coverSize = identifyData ? 256 : ui.coverSize,
css = getCSS(coverSize, oml.config.coverRatio),
2014-05-19 15:00:33 +00:00
2014-05-04 17:26:43 +00:00
that = Ox.Element()
.addClass('OxTextPage')
.css({overflowY: 'auto'})
.bindEvent({
oml_item: function() {
if (ui.item) {
2014-05-17 11:45:57 +00:00
that.updateElement(ui.item);
2014-05-04 17:26:43 +00:00
}
},
oml_listselection: function(data) {
if (data.value && data.value.length) {
2014-05-17 11:45:57 +00:00
that.updateElement(data.value[0]);
2014-05-04 17:26:43 +00:00
}
}
}),
$cover = Ox.Element()
.css({
position: 'absolute',
left: '16px',
top: '16px',
2014-05-19 15:00:33 +00:00
width: css.cover.width
2014-05-04 17:26:43 +00:00
})
.appendTo(that),
$info = Ox.Element()
.addClass('OxSelectable')
.css({
position: 'absolute',
2014-05-19 15:00:33 +00:00
left: css.info.left,
2014-05-14 18:46:31 +00:00
right: !identifyData ? '176px' : 16 + Ox.UI.SCROLLBAR_SIZE + 'px',
2014-05-04 17:26:43 +00:00
top: '16px'
})
2014-05-19 20:58:00 +00:00
[coverSize == 512 ? 'hide' : 'show']()
2014-05-04 17:26:43 +00:00
.appendTo(that),
2014-05-14 23:28:49 +00:00
$data,
$image, $reflection, $reflectionImage;
2014-05-14 18:46:31 +00:00
if (!identifyData) {
2014-05-04 17:26:43 +00:00
$data = Ox.Element()
.addClass('OxSelectable')
.css({
position: 'absolute',
right: '16px',
top: '16px',
width: '128px'
})
.appendTo(that);
2014-05-14 18:46:31 +00:00
}
2014-05-04 17:26:43 +00:00
2014-05-19 15:00:33 +00:00
function getCSS(size, ratio) {
var width = Math.round(ratio >= 1 ? size : size * ratio),
height = Math.round(ratio <= 1 ? size : size / ratio),
left = size == 256 ? Math.floor((size - width) / 2) : 0;
return {
cover: {
width: size + 'px'
},
info: {
left: (size == 256 ? size + 32 : width + 48) + 'px'
},
image: {
left: left + 'px',
width: width + 'px',
height: height + 'px'
},
reflection: {
top: height + 'px'
}
};
}
2014-05-14 23:28:49 +00:00
function getImageSize(size, ratio) {
var width = Math.round(ratio >= 1 ? size : size * ratio),
height = Math.round(ratio <= 1 ? size : size / ratio),
left = Math.floor((size - width) / 2);
return {width: width, height: height, left: left};
}
2014-05-14 09:57:11 +00:00
function formatLight(str) {
return '<span class="OxLight">' + str + '</span>';
}
2014-05-16 08:06:11 +00:00
function formatKey(key) {
var item = Ox.getObjectById(oml.config.itemKeys, key);
return '<span style="font-weight: bold">'
+ Ox._(Ox.toTitleCase(key)) + ':&nbsp;</span> ';
}
2014-05-19 22:49:47 +00:00
function formatValue(value, key, join) {
value = Ox.encodeHTMLEntities(value);
return value ? (Ox.isArray(value) ? value : [value]).map(function(value) {
2014-05-14 09:57:11 +00:00
return key ?
'<a href="/' + key + '==' + value + '">' + value + '</a>'
: value;
2014-05-19 22:49:47 +00:00
}).join(join || ', ') : '';
2014-05-14 09:57:11 +00:00
}
2014-05-04 17:26:43 +00:00
function identify(data) {
2014-05-14 09:57:11 +00:00
oml.ui.identifyDialog(data).open();
2014-05-04 17:26:43 +00:00
}
function renderMediaButton(data) {
2014-05-14 23:28:49 +00:00
2014-05-14 09:57:11 +00:00
function getListItems() {
var items = [];
if (ui._lists) {
items = ui._lists.filter(function(list) {
return list.user == oml.user.preferences.username
&& list.type != 'smart';
}).map(function(list) {
return {
id: list.id,
title: Ox._('Download to {0}', [list.name])
};
});
items.splice(1, 0, [{}]);
}
return items;
}
2014-05-14 23:28:49 +00:00
2014-05-14 09:57:11 +00:00
function setListItems() {
if ($element && ui._lists) {
$element.options({
disabled: false
}).options('elements')[1].options({
items: getListItems()
});
} else {
setTimeout(setListItems, 100);
}
}
if (data.mediastate == 'unavailable' && !ui._lists) {
setListItems();
}
var $element = data.mediastate == 'unavailable'
2014-05-12 12:57:47 +00:00
? Ox.FormElementGroup({
elements: [
Ox.Button({
title: Ox._('Download Book'),
width: 112
})
.bindEvent({
click: function() {
data.mediastate = 'transferring';
2014-05-17 11:45:57 +00:00
that.updateElement(data, $data);
2014-05-12 12:57:47 +00:00
oml.api.download({id: ui.item}, function(result) {
// ...
});
}
}),
Ox.MenuButton({
2014-05-14 09:57:11 +00:00
disabled: !ui._lists,
items: getListItems(),
2014-05-12 12:57:47 +00:00
overlap: 'left',
title: 'list',
tooltip: Ox._('Download Book to a List'),
type: 'image'
})
.bindEvent({
2014-05-14 09:57:11 +00:00
click: function(data) {
data.mediastate = 'transferring';
2014-05-17 11:45:57 +00:00
that.updateElement(data, $data);
2014-05-14 09:57:11 +00:00
oml.api.download(Ox.extend({
id: ui.item,
}, data.id == ':' ? {} : {
list: data.id.slice(1)
}), function(result) {
// ...
});
2014-05-12 12:57:47 +00:00
}
})
],
float: 'right'
})
: data.mediastate == 'transferring'
2014-05-04 17:26:43 +00:00
? Ox.FormElementGroup({
elements: [
Ox.Button({
title: Ox._('Transferring...'),
width: 112
})
.bindEvent({
click: function() {
oml.UI.set({page: 'transfers'});
}
}),
Ox.Button({
overlap: 'left',
title: 'close',
tooltip: Ox._('Cancel Transfer'),
type: 'image'
})
.bindEvent({
click: function() {
data.mediastate = 'unavailable';
2014-05-17 11:45:57 +00:00
that.updateElement(data, $data);
2014-05-04 17:26:43 +00:00
oml.api.cancelDownload({id: ui.item}, function() {
2014-05-17 11:45:57 +00:00
that.updateElement(ui.item, $data);
2014-05-04 17:26:43 +00:00
});
}
})
],
float: 'right'
})
: Ox.Button({
2014-05-12 12:57:47 +00:00
title: Ox._('Read Book'),
2014-05-04 17:26:43 +00:00
width: 128
})
.bindEvent({
click: function() {
2014-05-12 12:57:47 +00:00
oml.UI.set({itemView: 'book'});
2014-05-04 17:26:43 +00:00
}
});
2014-05-14 09:57:11 +00:00
return $element;
2014-05-04 17:26:43 +00:00
}
2014-05-19 15:00:33 +00:00
function toggleCoverSize(ratio) {
2014-05-19 20:58:00 +00:00
var css;
coverSize = coverSize == 256 ? 512 : 256,
css = getCSS(coverSize, ratio);
2014-05-19 15:00:33 +00:00
//$cover.animate(css.cover, 250);
$info.animate(css.info, 250);
$image.animate(css.image, 250);
$reflectionImage.animate(css.image, 250);
$reflection.animate(css.reflection, 250);
oml.UI.set({coverSize: coverSize});
}
function updateCover(ratio) {
2014-05-19 20:58:00 +00:00
var css = getCSS(coverSize, ratio);
2014-05-19 15:00:33 +00:00
$image.css(css.image).show();
$reflectionImage.css(css.image);
$reflection.css(css.reflection).show();
2014-05-14 23:28:49 +00:00
}
2014-05-17 11:45:57 +00:00
that.updateElement = function(idOrData, $elements) {
2014-05-04 17:26:43 +00:00
var data = Ox.isObject(idOrData) ? idOrData : null,
2014-05-14 09:57:11 +00:00
id = data ? null : idOrData,
2014-05-04 17:26:43 +00:00
$elements = $elements
? Ox.makeArray($elements)
: [$cover, $info, $data];
(data ? Ox.noop : oml.api.get)({
id: id,
keys: []
}, function(result) {
2014-05-17 14:42:46 +00:00
if (!identifyData && id && id != ui.item) {
2014-05-17 08:17:34 +00:00
return;
}
2014-05-04 17:26:43 +00:00
if (result) {
data = result.data;
}
2014-05-14 23:28:49 +00:00
var $mediaButton,
2014-05-14 09:57:11 +00:00
isEditable = !data.mainid && data.mediastate == 'available',
2014-05-14 18:46:31 +00:00
src = !identifyData
2014-05-19 15:00:33 +00:00
? '/' + data.id + '/cover512.jpg?' + data.modified
2014-05-14 18:46:31 +00:00
: data.cover,
2014-05-14 23:28:49 +00:00
ratio = data.coverRatio || oml.config.coverRatio,
2014-05-19 20:58:00 +00:00
size = coverSize,
2014-05-04 17:26:43 +00:00
reflectionSize = Math.round(size / 2);
$elements.forEach(function($element) {
$element.empty();
if ($element == $cover) {
2014-05-19 15:00:33 +00:00
$image = Ox.Element({
element: '<img>',
tooltip: '' // TODO
})
2014-05-14 23:28:49 +00:00
.on({
2014-05-19 18:12:02 +00:00
error: function() {
if (size == 512) {
$info.show();
}
},
2014-05-14 23:28:49 +00:00
load: function() {
2014-05-19 15:00:33 +00:00
ratio = $image[0].width / $image[0].height;
updateCover(ratio);
2014-05-19 18:12:02 +00:00
if (size == 512) {
$info.css({
left: getCSS(512, ratio).info.left
}).show();
}
2014-05-14 23:28:49 +00:00
}
})
2014-05-04 17:26:43 +00:00
.attr({src: src})
.css({
2014-05-14 23:28:49 +00:00
position: 'absolute'
2014-05-04 17:26:43 +00:00
})
2014-05-14 23:28:49 +00:00
.hide()
2014-05-19 15:00:33 +00:00
.bindEvent({
singleclick: function() {
2014-05-19 20:58:00 +00:00
if (!identifyData) {
toggleCoverSize(ratio);
}
2014-05-19 15:00:33 +00:00
}
})
2014-05-04 17:26:43 +00:00
.appendTo($cover);
$reflection = $('<div>')
.addClass('OxReflection')
.css({
position: 'absolute',
width: size + 'px',
height: reflectionSize + 'px',
overflow: 'hidden'
})
2014-05-14 23:28:49 +00:00
.hide()
2014-05-04 17:26:43 +00:00
.appendTo($cover);
2014-05-14 23:28:49 +00:00
$reflectionImage = $('<img>')
2014-05-04 17:26:43 +00:00
.attr({src: src})
.css({
2014-05-14 23:28:49 +00:00
position: 'absolute'
2014-05-04 17:26:43 +00:00
})
.appendTo($reflection);
$('<div>')
.css({
position: 'absolute',
width: size + 'px',
height: reflectionSize + 'px'
})
.appendTo($reflection);
} else if ($element == $info) {
$('<div>')
2014-05-19 20:58:00 +00:00
.css({
marginTop: '-2px',
fontSize: '13px',
fontWeight: 'bold'
})
.html(
2014-05-19 22:49:47 +00:00
data.title ? Ox.encodeHTMLEntities(data.title)
: '<span class="OxLight">'
2014-05-19 20:58:00 +00:00
+ Ox._('No Title')
+ '</span>'
2014-05-14 09:57:11 +00:00
)
2014-05-04 17:26:43 +00:00
.appendTo($info);
2014-05-19 20:58:00 +00:00
if (data.author) {
2014-05-14 09:57:11 +00:00
$('<div>')
.css({
marginTop: '4px',
fontSize: '13px',
fontWeight: 'bold'
})
2014-05-19 20:58:00 +00:00
.html(formatValue(data.author, 'author'))
2014-05-14 09:57:11 +00:00
.appendTo($info);
}
2014-05-19 20:58:00 +00:00
if (data.place || data.publisher || data.date) {
2014-05-16 08:06:11 +00:00
$('<div>')
.css({
marginTop: '8px'
})
2014-05-19 22:49:47 +00:00
.html(
(formatValue(data.place, 'place', ' ; '))
2014-05-16 08:06:11 +00:00
+ (data.place && (data.publisher || data.date) ? ' : ' : '')
2014-05-19 22:49:47 +00:00
+ (formatValue(data.publisher, 'publisher'))
2014-05-16 08:06:11 +00:00
+ (data.publisher && data.date ? ', ' : '')
+ (data.date || '')
)
.appendTo($info);
2014-05-19 20:58:00 +00:00
}
if (data.edition || data.language) {
$('<div>')
.css({
marginTop: '8px'
})
2014-05-19 22:49:47 +00:00
.html(
(Ox.encodeHTMLEntities(data.edition || ''))
2014-05-19 20:58:00 +00:00
+ (data.edition && data.language ? '; ' : '')
2014-05-19 22:49:47 +00:00
+ (formatValue(data.language, 'language'))
2014-05-19 20:58:00 +00:00
)
2014-05-16 08:06:11 +00:00
.appendTo($info);
}
2014-05-04 17:26:43 +00:00
2014-05-16 08:06:11 +00:00
if (data.classification) {
$('<div>')
.css({
marginTop: '8px',
textAlign: 'justify'
})
2014-05-19 22:49:47 +00:00
.html(
Ox.formatValue(data.classification, 'classification')
)
2014-05-16 08:06:11 +00:00
.appendTo($info);
}
2014-05-04 17:26:43 +00:00
2014-05-14 09:57:11 +00:00
if (data.description) {
$('<div>')
.css({
marginTop: '8px',
textAlign: 'justify'
})
2014-05-19 22:49:47 +00:00
.html(
Ox.encodeHTMLEntities(data.description)
)
2014-05-14 09:57:11 +00:00
.appendTo($info);
}
2014-05-14 18:46:31 +00:00
$('<div>').css({height: '16px'}).appendTo($info);
2014-05-04 17:26:43 +00:00
} else if ($element == $data) {
2014-05-12 12:57:47 +00:00
$mediaButton = renderMediaButton(data)
.appendTo($data);
$('<div>')
.addClass('OxSelectable')
.css({
2014-05-14 09:57:11 +00:00
marginTop: '10px',
2014-05-12 12:57:47 +00:00
})
.text(
[
data.extension.toUpperCase(),
Ox.formatValue(data.size, 'B')
].join(', ')
)
.appendTo($data);
['accessed', 'modified', 'added', 'created'].forEach(function(id) {
var title;
if (data[id]) {
title = Ox.getObjectById(oml.config.itemKeys, id).title;
$('<div>')
.css({
marginTop: '8px',
fontWeight: 'bold'
})
.text(title)
.appendTo($data);
2014-05-14 09:57:11 +00:00
$('<div>')
.text(Ox.formatDate(data[id], '%b %e, %Y'))
2014-05-12 12:57:47 +00:00
.appendTo($data);
}
});
2014-05-14 09:57:11 +00:00
Ox.Button({
disabled: data.mediastate != 'available',
title: Ox._('Identify Book...'),
width: 128
})
.css({marginTop: '16px'})
.bindEvent({
click: function() {
identify(data);
}
})
.appendTo($data);
2014-05-12 23:43:27 +00:00
2014-05-14 09:57:11 +00:00
[
'isbn10', 'isbn13', 'asin', 'lccn', 'oclc', 'olid'
].forEach(function(id, index) {
var title;
if (data[id]) {
title = Ox.getObjectById(oml.config.itemKeys, id).title;
2014-05-12 23:43:27 +00:00
$('<div>')
.css({
marginTop: (index == 0 ? 10 : 6) + 'px',
fontWeight: 'bold'
})
.text(title)
.appendTo($data);
Ox.EditableContent({
2014-05-14 09:57:11 +00:00
editable: false,
value: data[id]
2014-05-12 23:43:27 +00:00
})
.appendTo($data);
2014-05-14 09:57:11 +00:00
}
});
2014-05-04 17:26:43 +00:00
$('<div>').css({height: '16px'}).appendTo($data);
}
});
2014-05-16 08:06:11 +00:00
// FIXME: identify dialog should call this too
2014-05-04 17:26:43 +00:00
function editMetadata(key, value) {
var edit;
2014-05-18 23:24:04 +00:00
Ox.print('EM', key, value, data[key])
2014-05-04 17:26:43 +00:00
if (value != data[key]) {
edit = Ox.extend({id: ui.item}, key, value);
oml.api.edit(edit, function(result) {
2014-05-16 08:06:11 +00:00
Ox.Request.clearCache('find');
oml.$ui.browser.reloadList();
2014-05-18 23:24:04 +00:00
//that.updateElement(result.data, $info);
2014-05-04 17:26:43 +00:00
});
}
}
});
};
2014-05-14 18:46:31 +00:00
if (!identifyData) {
2014-05-17 11:45:57 +00:00
ui.item && that.updateElement(ui.item);
2014-05-14 18:46:31 +00:00
} else {
2014-05-17 11:45:57 +00:00
that.updateElement(identifyData, [$cover, $info]);
2014-05-14 18:46:31 +00:00
}
2014-05-04 17:26:43 +00:00
oml.bindEvent({
transfer: function(data) {
if (data.id == ui.item && data.progress == 1) {
Ox.Request.clearCache(); // FIXME: too much
2014-05-17 11:45:57 +00:00
that.updateElement(ui.item, [$info, $data]);
2014-05-04 17:26:43 +00:00
}
}
});
return that;
};