openmedialibrary/static/js/infoView.js

892 lines
35 KiB
JavaScript
Raw Normal View History

2014-05-04 17:26:43 +00:00
'use strict';
2016-01-11 13:33:15 +00:00
oml.ui.infoView = function(externalData, isMixed) {
isMixed = isMixed || {};
2014-05-04 17:26:43 +00:00
var ui = oml.user.ui,
2016-01-11 10:46:57 +00:00
arrayKeys = ['author', 'place', 'publisher', 'language', 'categories'],
2014-05-19 20:58:00 +00:00
editables = {},
2016-01-11 13:33:15 +00:00
iconSize = externalData ? 256 : ui.iconSize,
2016-01-05 18:38:33 +00:00
2016-01-11 15:10:39 +00:00
isMultiple = arguments.length == 2,
2014-05-25 12:16:04 +00:00
2016-01-11 10:46:57 +00:00
separator = '; ',
2016-01-11 13:33:15 +00:00
css = getCSS(iconSize, oml.config.iconRatio),
2014-05-04 17:26:43 +00:00
that = Ox.Element()
.addClass('OxTextPage')
.css({overflowY: 'auto'})
.bindEvent({
2014-05-21 00:02:39 +00:00
oml_icons: function() {
that.updateElement(ui.item, [$icon])
},
2014-05-04 17:26:43 +00:00
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) {
2016-01-17 12:29:34 +00:00
if (
data.value
&& data.value.length
&& data.value[0] != ui.item
) {
2014-05-17 11:45:57 +00:00
that.updateElement(data.value[0]);
2014-05-04 17:26:43 +00:00
}
}
}),
2014-05-21 00:02:39 +00:00
$icon = Ox.Element()
2014-05-04 17:26:43 +00:00
.css({
position: 'absolute',
left: '16px',
top: '16px',
2014-05-21 00:02:39 +00:00
width: css.icon.width
2014-05-04 17:26:43 +00:00
})
.appendTo(that),
$info = Ox.Element()
.addClass('OxSelectable')
.css({
position: 'absolute',
2016-01-11 13:33:15 +00:00
left: !isMultiple ? css.info.left : '16px',
right: !externalData && !isMultiple
? '176px' : 16 + Ox.UI.SCROLLBAR_SIZE + 'px',
2014-05-04 17:26:43 +00:00
top: '16px'
})
2014-05-21 00:02:39 +00:00
[iconSize == 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
2016-01-11 13:33:15 +00:00
if (!externalData) {
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
2016-01-11 10:46:57 +00:00
function formatLight(string) {
return '<span class="OxLight">' + string + '</span>';
}
function formatKey(key) {
return '<span style="font-weight: bold">'
+ Ox._(Ox.getObjectById(oml.config.itemKeys, key).title)
+ ':</span>&nbsp;';
}
function formatValue(value, key) {
var isEditor = key == 'author' && (value || []).some(function(value) {
return Ox.endsWith(value, ' (Ed.)');
});
return value ? (Ox.isArray(value) ? value : [value]).map(function(value) {
if (key == 'date' && value) {
value = value.slice(0, 4);
}
2016-01-11 13:33:15 +00:00
return (
key && !externalData ? '<a href="/' + key + '==' + value + '">' : ''
) + (
key == 'author' ? value.replace(/ \(Ed\.\)$/, '') : value
) + (
key && !externalData ? '</a>' : ''
);
2016-01-11 10:46:57 +00:00
}).join(separator) + (isEditor ? ' (Ed.)' : '') : '';
}
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 {
2014-05-21 00:02:39 +00:00
icon: {
2014-05-19 15:00:33 +00:00
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-21 00:02:39 +00:00
function renderIdentifyButton(data) {
2016-01-11 13:33:15 +00:00
return Ox.Button({
disabled: data.mediastate != 'available',
2016-01-11 10:46:57 +00:00
style: 'squared',
2016-01-11 13:33:15 +00:00
title: Ox._('Identify Book...'),
2015-11-30 16:50:03 +00:00
width: 128
})
2016-01-11 10:46:57 +00:00
.css({marginTop: '8px'})
2015-11-30 16:50:03 +00:00
.bindEvent({
click: function() {
2016-01-12 04:03:02 +00:00
oml.$ui.identifyDialog = oml.ui.identifyDialog(data).open();
2015-11-30 16:50:03 +00:00
}
2016-01-11 13:33:15 +00:00
});
2015-11-30 16:50:03 +00:00
}
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) {
2016-01-17 07:57:49 +00:00
return list.user === ''
2014-05-14 09:57:11 +00:00
&& list.type != 'smart';
}).map(function(list) {
return {
id: list.id,
2016-01-17 07:57:49 +00:00
title: Ox._('Download to {0}', [
Ox.encodeHTMLEntities(list.name)
])
2014-05-14 09:57:11 +00:00
};
});
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();
}
2016-01-17 07:57:49 +00:00
2015-04-20 07:53:20 +00:00
var $element = (data.mediastate == 'unavailable' || Ox.isUndefined(data.mediastate))
2014-05-12 12:57:47 +00:00
? Ox.FormElementGroup({
elements: [
Ox.Button({
2016-01-11 10:46:57 +00:00
style: 'squared',
2014-05-12 12:57:47 +00:00
title: Ox._('Download Book'),
width: 112
})
.bindEvent({
click: function() {
data.mediastate = 'transferring';
that.updateElement(data, $data);
oml.api.addListItems({
items: [ui.item],
list: ':'
}, function(result) {
// ...
2014-05-12 12:57:47 +00:00
});
}
}),
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',
2016-01-11 10:46:57 +00:00
style: 'squared',
2014-05-21 00:02:39 +00:00
title: 'select',
2014-05-12 12:57:47 +00:00
tooltip: Ox._('Download Book to a List'),
type: 'image'
})
.bindEvent({
2016-01-17 11:24:53 +00:00
click: function(data_) {
2014-05-14 09:57:11 +00:00
data.mediastate = 'transferring';
2014-05-17 11:45:57 +00:00
that.updateElement(data, $data);
2016-01-17 11:29:33 +00:00
oml.api.addListItems({
items: [ui.item],
list: data_.id
}, function(result) {
2014-05-14 09:57:11 +00:00
// ...
});
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({
2016-01-11 10:46:57 +00:00
style: 'squared',
2014-05-04 17:26:43 +00:00
title: Ox._('Transferring...'),
width: 112
})
.bindEvent({
click: function() {
oml.UI.set({page: 'transfers'});
}
}),
Ox.Button({
overlap: 'left',
2016-01-11 10:46:57 +00:00
style: 'squared',
2014-05-04 17:26:43 +00:00
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-25 14:05:26 +00:00
oml.api.cancelDownloads({ids: [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'
})
: data.missing
? Ox.FormElementGroup({
elements: [
Ox.Button({
style: 'squared',
title: Ox._('Book Missing'),
width: 112
})
.bindEvent({
click: function() {
if (!oml.readOnly) {
oml.api.openFolder({id: oml.user.ui.item});
}
}
}),
Ox.MenuButton({
items: [
].concat(oml.readOnly ? [] : [
{id: 'show', title: Ox._('Show File')}
]),
overlap: 'left',
style: 'squared',
title: 'select',
tooltip: Ox._('File was removed'),
type: 'image'
})
.bindEvent({
click: function(data_) {
if (!oml.readOnly) {
oml.api.openFolder({id: oml.user.ui.item});
}
}
})
],
float: 'right'
})
2016-01-18 10:51:07 +00:00
: Ox.FormElementGroup({
elements: [
Ox.Button({
style: 'squared',
title: Ox._('Read Book'),
width: 112
})
.bindEvent({
click: function() {
oml.UI.set({itemView: 'book'});
}
}),
Ox.MenuButton({
items: [
{id: 'read', title: Ox._('Read in Open Media Libary')},
{id: 'open', title: Ox._('Open in External Reader')},
2019-01-17 10:30:22 +00:00
].concat(oml.readOnly ? [] : [
2016-01-18 10:51:07 +00:00
{},
{id: 'show', title: Ox._('Show File')}
2019-01-17 10:30:22 +00:00
]),
2016-01-18 10:51:07 +00:00
overlap: 'left',
style: 'squared',
title: 'select',
tooltip: Ox._('Download Book to a List'),
type: 'image'
})
.bindEvent({
click: function(data_) {
if (data_.id == 'read') {
oml.UI.set({itemView: 'book'});
} else if (data_.id == 'open') {
2019-01-17 10:30:22 +00:00
if (oml.readOnly) {
document.location.href = '/' + oml.user.ui.item + '/get/'
} else {
oml.api.openFile({id: oml.user.ui.item});
}
2016-01-18 10:51:07 +00:00
} else {
oml.api.openFolder({id: oml.user.ui.item});
}
}
})
],
float: 'right'
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
}
2016-01-19 10:05:16 +00:00
function renderShareButton(data) {
2016-01-18 10:51:07 +00:00
return Ox.Checkbox({
2016-01-11 13:33:15 +00:00
style: 'squared',
2016-01-18 10:51:07 +00:00
title: Ox._('Share Metadata'),
2016-01-19 10:05:16 +00:00
value: data.sharemetadata,
2016-01-18 10:51:07 +00:00
width: 128,
2016-01-11 13:33:15 +00:00
})
.css({marginTop: '8px'})
.bindEvent({
2016-01-19 10:05:16 +00:00
change: function(changeData) {
oml.api.edit({
id: data.id,
sharemetadata: changeData.value
}, function(result) {
if (!changeData.value) {
that.updateElement(result.data, [$icon, $info, $data]);
}
});
2016-01-11 13:33:15 +00:00
}
});
}
2016-01-11 10:46:57 +00:00
function splitValue(value, key) {
var isEditor = key == 'author'
&& Ox.decodeHTMLEntities(value).split(separator).some(function(value) {
return Ox.endsWith(value, ' (Ed.)');
});
2016-01-14 10:25:29 +00:00
return value ? Ox.unique(
Ox.decodeHTMLEntities(value).split(separator).map(function(value) {
value = Ox.encodeHTMLEntities(value);
return isEditor
? value.replace(/ \(Ed\.\)$/, '') + ' (Ed.)'
: value;
})
2016-01-14 10:25:29 +00:00
) : [];
2016-01-08 10:11:24 +00:00
}
2014-05-19 15:00:33 +00:00
function toggleCoverSize(ratio) {
2014-05-19 20:58:00 +00:00
var css;
2014-05-21 00:02:39 +00:00
iconSize = iconSize == 256 ? 512 : 256,
css = getCSS(iconSize, ratio);
//$icon.animate(css.icon, 250);
2014-05-19 15:00:33 +00:00
$info.animate(css.info, 250);
$image.animate(css.image, 250);
$reflectionImage.animate(css.image, 250);
$reflection.animate(css.reflection, 250);
2014-05-21 00:02:39 +00:00
oml.UI.set({iconSize: iconSize});
2014-05-19 15:00:33 +00:00
}
function updateCover(ratio) {
2014-05-21 00:02:39 +00:00
var css = getCSS(iconSize, 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
}
2016-01-16 05:14:22 +00:00
that.updateCover = function(url) {
Ox.Request.clearCache('get');
that.updateElement(ui.item, $icon);
};
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)
2014-05-21 00:02:39 +00:00
: [$icon, $info, $data];
2014-05-04 17:26:43 +00:00
(data ? Ox.noop : oml.api.get)({
id: id,
keys: []
}, function(result) {
2016-01-11 13:33:15 +00:00
if (!externalData && 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-20 00:44:13 +00:00
Ox.print('BOOK DATA', data)
2014-05-21 00:02:39 +00:00
var $div,
2019-01-17 10:30:22 +00:00
isEditable = !oml.readOnly && (isMultiple || (
2016-01-11 13:33:15 +00:00
data.mediastate == 'available' && !externalData
2019-01-17 10:30:22 +00:00
)),
2016-01-11 13:33:15 +00:00
src = !externalData
2014-05-21 00:02:39 +00:00
? '/' + data.id + '/' + ui.icons + '512.jpg?' + data.modified
2014-05-14 18:46:31 +00:00
: data.cover,
2014-05-21 00:02:39 +00:00
ratio = (
2016-01-11 13:33:15 +00:00
ui.icons == 'cover' || externalData
2014-05-21 00:02:39 +00:00
? data.coverRatio : data.previewRatio
) || oml.config.iconRatio,
size = iconSize,
2014-05-04 17:26:43 +00:00
reflectionSize = Math.round(size / 2);
$elements.forEach(function($element) {
$element.empty();
2014-05-21 00:02:39 +00:00
if ($element == $icon) {
2014-05-04 17:26:43 +00:00
2014-05-19 15:00:33 +00:00
$image = Ox.Element({
element: '<img>',
tooltip: isEditable
2016-01-16 05:14:22 +00:00
? Ox._('Doubleclick to edit')
: ''
2014-05-19 15:00:33 +00:00
})
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({
2014-05-21 00:02:39 +00:00
doubleclick: function() {
2016-01-22 07:04:39 +00:00
if (isEditable) {
2016-01-16 05:14:22 +00:00
oml.$ui.coverDialog = oml.ui.coverDialog(
id, data.cover
).open();
2014-05-21 00:02:39 +00:00
}
},
2014-05-19 15:00:33 +00:00
singleclick: function() {
2016-01-11 13:33:15 +00:00
if (!externalData) {
2014-05-19 20:58:00 +00:00
toggleCoverSize(ratio);
}
2014-05-19 15:00:33 +00:00
}
})
2014-05-21 00:02:39 +00:00
.appendTo($icon);
2014-05-04 17:26:43 +00:00
$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-21 00:02:39 +00:00
.appendTo($icon);
2014-05-04 17:26:43 +00:00
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) {
2016-01-11 10:46:57 +00:00
// -------- Title --------
2014-05-21 00:02:39 +00:00
2014-05-04 17:26:43 +00:00
$('<div>')
2014-05-19 20:58:00 +00:00
.css({
2014-05-21 00:02:39 +00:00
marginTop: '-2px'
2014-05-19 20:58:00 +00:00
})
2014-05-21 00:02:39 +00:00
.append(
editables['title'] = Ox.EditableContent({
2014-05-21 00:02:39 +00:00
clickLink: oml.clickLink,
editable: isEditable,
2016-01-11 13:33:15 +00:00
placeholder: formatLight(Ox._(
isMixed.title ? 'Mixed Title' : 'Unknown Title'
)),
2014-05-21 00:02:39 +00:00
tooltip: isEditable ? oml.getEditTooltip() : '',
2016-01-11 13:33:15 +00:00
value: Ox.encodeHTMLEntities(data.title || '')
2014-05-21 00:02:39 +00:00
})
.css({
fontWeight: 'bold',
fontSize: '13px'
})
.bindEvent({
submit: function(event) {
2016-01-08 09:59:02 +00:00
editMetadata('title', Ox.decodeHTMLEntities(event.value));
2014-05-21 00:02:39 +00:00
}
})
2014-05-14 09:57:11 +00:00
)
2014-05-04 17:26:43 +00:00
.appendTo($info);
2016-01-11 10:46:57 +00:00
// -------- Author --------
2014-05-14 09:57:11 +00:00
2014-05-21 00:02:39 +00:00
$('<div>')
.css({
marginTop: '2px'
})
.append(
editables['author'] = Ox.EditableContent({
2014-05-21 00:02:39 +00:00
clickLink: oml.clickLink,
editable: isEditable,
format: function(value) {
2016-01-11 10:46:57 +00:00
return formatValue(splitValue(value, 'author'), 'author');
2014-05-21 00:02:39 +00:00
},
2016-01-11 13:33:15 +00:00
placeholder: formatLight(Ox._(
isMixed.author ? 'Mixed Author' : 'Unknown Author'
)),
2014-05-21 00:02:39 +00:00
tooltip: isEditable ? oml.getEditTooltip() : '',
2016-01-11 13:33:15 +00:00
value: Ox.encodeHTMLEntities(
(data.author || []).map(function(value, index) {
return index < data.author.length - 1
? value.replace(/ \(Ed\.\)$/, '')
: value;
}).join(separator)
2016-01-11 13:33:15 +00:00
)
2014-05-21 00:02:39 +00:00
})
.css({
marginBottom: '-3px',
fontWeight: 'bold',
fontSize: '13px'
})
.bindEvent({
submit: function(event) {
2016-01-08 09:59:02 +00:00
editMetadata('author', Ox.decodeHTMLEntities(event.value));
2014-05-21 00:02:39 +00:00
}
})
)
.appendTo($info);
2016-01-11 10:46:57 +00:00
// -------- Publisher, Place, Date --------
2014-05-21 00:02:39 +00:00
$div = $('<div>')
.css({
marginTop: '4px',
})
.appendTo($info);
2016-01-11 10:46:57 +00:00
['publisher', 'place', 'date'].forEach(function(key, index) {
2014-05-21 00:02:39 +00:00
if (index) {
$('<span>').html(', ').appendTo($div);
}
$('<span>')
.html(formatKey(key))
.appendTo($div);
editables[key] = Ox.EditableContent({
2014-05-21 00:02:39 +00:00
clickLink: oml.clickLink,
editable: isEditable,
format: function(value) {
2016-01-05 17:19:34 +00:00
return formatValue(
Ox.contains(arrayKeys, key)
2016-01-08 10:11:24 +00:00
? splitValue(value) : value,
2016-01-05 17:19:34 +00:00
key
);
2014-05-21 00:02:39 +00:00
},
2016-01-11 13:33:15 +00:00
placeholder: formatLight(Ox._(
isMixed[key] ? 'mixed' : 'unknown'
)),
2014-05-21 00:02:39 +00:00
tooltip: isEditable ? oml.getEditTooltip() : '',
2016-01-11 10:46:57 +00:00
value: Ox.encodeHTMLEntities(
2016-01-05 14:43:37 +00:00
Ox.contains(arrayKeys, key)
2016-01-11 10:46:57 +00:00
? (data[key] || []).join(separator)
: (data[key] || '')
)
2014-05-16 08:06:11 +00:00
})
2014-05-21 00:02:39 +00:00
.bindEvent({
submit: function(event) {
2016-01-08 09:59:02 +00:00
editMetadata(key, Ox.decodeHTMLEntities(event.value));
2014-05-21 00:02:39 +00:00
}
})
.appendTo($div);
});
2014-05-19 20:58:00 +00:00
2016-01-11 10:46:57 +00:00
// -------- Series, Edition, Language, Pages --------
2014-05-21 00:02:39 +00:00
$div = $('<div>')
.css({
marginTop: '4px',
})
.appendTo($info);
2016-01-11 10:46:57 +00:00
['series', 'edition', 'language', 'pages'].forEach(function(key, index) {
2014-05-21 00:02:39 +00:00
if (index) {
$('<span>').html(', ').appendTo($div);
}
$('<span>')
.html(formatKey(key))
.appendTo($div);
editables[key] = Ox.EditableContent({
2014-05-21 00:02:39 +00:00
clickLink: oml.clickLink,
editable: isEditable,
format: function(value) {
2016-01-12 04:03:02 +00:00
return (
Ox.contains(['series', 'language'], key)
? formatValue : Ox.identity
)(
2016-01-11 10:46:57 +00:00
Ox.contains(arrayKeys, key)
? splitValue(value) : value,
key
);
2014-05-21 00:02:39 +00:00
},
2016-01-11 13:33:15 +00:00
placeholder: formatLight(Ox._(
isMixed[key] ? 'mixed' : 'unknown'
)),
2014-05-21 00:02:39 +00:00
tooltip: isEditable ? oml.getEditTooltip() : '',
2016-01-11 10:46:57 +00:00
value: Ox.encodeHTMLEntities(
2016-01-05 14:43:37 +00:00
Ox.contains(arrayKeys, key)
2016-01-11 10:46:57 +00:00
? (data[key] || []).join(separator)
: (data[key] || '')
)
2014-05-19 20:58:00 +00:00
})
2014-05-21 00:02:39 +00:00
.bindEvent({
submit: function(event) {
2016-01-08 09:59:02 +00:00
editMetadata(key, Ox.decodeHTMLEntities(event.value));
2014-05-21 00:02:39 +00:00
}
})
.appendTo($div);
});
2016-01-11 10:46:57 +00:00
// -------- Categories --------
2014-05-21 11:07:41 +00:00
2016-01-11 10:46:57 +00:00
if (data.categories || isEditable) {
$div = $('<div>')
2014-05-21 11:07:41 +00:00
.css({
marginTop: '4px',
})
.appendTo($info);
2016-01-11 10:46:57 +00:00
$('<span>')
.html(formatKey('categories'))
.appendTo($div);
editables['categories'] = Ox.EditableContent({
2016-01-11 10:46:57 +00:00
clickLink: oml.clickLink,
editable: isEditable,
format: function(value) {
return formatValue(splitValue(value), 'categories');
},
2016-01-11 13:33:15 +00:00
placeholder: formatLight(Ox._(
isMixed.categories ? 'mixed' : 'unknown'
)),
2016-01-11 10:46:57 +00:00
tooltip: isEditable ? oml.getEditTooltip() : '',
value: Ox.encodeHTMLEntities((data.categories || []).join(separator))
})
.bindEvent({
submit: function(event) {
editMetadata('categories', Ox.decodeHTMLEntities(event.value));
}
})
.appendTo($div);
2014-05-21 11:07:41 +00:00
}
2016-01-11 10:46:57 +00:00
// -------- ISBN --------
2014-05-04 17:26:43 +00:00
2016-01-11 10:46:57 +00:00
if (data.isbn || isEditable) {
$div = $('<div>')
2014-05-16 08:06:11 +00:00
.css({
2016-01-11 10:46:57 +00:00
marginTop: '4px',
2014-05-16 08:06:11 +00:00
})
.appendTo($info);
2016-01-11 10:46:57 +00:00
$('<span>')
.html(formatKey('isbn'))
.appendTo($div);
editables['isbn'] = Ox.EditableContent({
2016-01-11 10:46:57 +00:00
editable: isEditable,
format: function(value) {
return (value ? [
2016-01-16 15:05:17 +00:00
Ox.formatISBN(value, 13, true),
Ox.formatISBN(value, 10, true)
2016-01-11 10:46:57 +00:00
] : []).join(separator);
},
2016-01-11 13:33:15 +00:00
placeholder: formatLight(Ox._(
isMixed.isbn ? 'mixed' : 'unknown'
)),
2016-01-11 10:46:57 +00:00
tooltip: isEditable ? oml.getEditTooltip() : '',
2016-01-16 15:18:14 +00:00
value: Ox.formatISBN(data.isbn || '', 13, true)
2016-01-11 10:46:57 +00:00
})
.bindEvent({
submit: function(event) {
2016-01-16 15:18:14 +00:00
this.options({
value: Ox.formatISBN(event.value, 13, true)
});
editMetadata(
'isbn', Ox.formatISBN(event.value, 13)
);
2016-01-11 10:46:57 +00:00
}
})
.appendTo($div);
2014-05-16 08:06:11 +00:00
}
2014-05-04 17:26:43 +00:00
2016-01-11 10:46:57 +00:00
// -------- Description, Table of Contents --------
2014-05-21 00:02:39 +00:00
2016-01-11 10:46:57 +00:00
['description', 'tableofcontents'].forEach(function(key) {
if (data[key] || isEditable) {
$('<div>')
.css({
marginTop: '8px',
textAlign: 'justify'
})
.append(
editables[key] = Ox.EditableContent({
2016-01-11 10:46:57 +00:00
clickLink: oml.clickLink,
editable: isEditable,
format: function(value) {
return value.replace(/\n/g, '<br>');
},
2016-01-11 13:33:15 +00:00
placeholder: formatLight(Ox._(
isMixed[key] ? 'Mixed {0}' : 'No {0}', [
2016-01-11 10:46:57 +00:00
Ox.getObjectById(oml.config.itemKeys, key).title
])),
tooltip: isEditable ? oml.getEditTooltip() : '',
type: 'textarea',
value: Ox.encodeHTMLEntities(data[key] || '')
})
.bindEvent({
submit: function(event) {
editMetadata(
key,
Ox.decodeHTMLEntities(event.value).replace(/<br>/g, '\n')
);
}
})
)
.appendTo($info);
}
});
2014-05-14 09:57:11 +00:00
2014-05-14 18:46:31 +00:00
$('<div>').css({height: '16px'}).appendTo($info);
2014-05-04 17:26:43 +00:00
2014-05-21 00:02:39 +00:00
oml.createLinks($info);
2014-05-04 17:26:43 +00:00
} else if ($element == $data) {
2014-05-21 00:02:39 +00:00
renderMediaButton(data).appendTo($data);
2014-05-12 12:57:47 +00:00
$('<div>')
.addClass('OxSelectable')
.css({
2014-05-14 09:57:11 +00:00
marginTop: '10px',
2014-05-12 12:57:47 +00:00
})
.text(
[
2014-05-21 00:02:39 +00:00
data.extension.toUpperCase(),
2014-05-12 12:57:47 +00:00
Ox.formatValue(data.size, 'B')
].join(', ')
)
.appendTo($data);
2019-01-17 10:30:22 +00:00
if (!oml.readOnly) {
renderIdentifyButton(data).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);
$('<div>')
.text(Ox.formatDate(data[id], '%B %e, %Y'))
.appendTo($data);
}
});
2014-05-12 12:57:47 +00:00
2019-01-17 10:30:22 +00:00
if (data.mediastate == 'available') {
renderShareButton(data).appendTo($data);
2014-05-12 12:57:47 +00:00
}
2016-01-11 13:33:15 +00:00
}
2015-11-30 16:50:03 +00:00
2014-05-04 17:26:43 +00:00
$('<div>').css({height: '16px'}).appendTo($data);
}
});
function editMetadata(key, value) {
var edit = Ox.extend(
{id: !isMultiple ? data.id : ui.listSelection},
key,
Ox.contains(arrayKeys, key)
? splitValue(value, key).map(Ox.decodeHTMLEntities)
: value
);
if (!Ox.isEqual(edit[key], data[key])) {
data[key] = edit[key];
2014-05-04 17:26:43 +00:00
oml.api.edit(edit, function(result) {
if (isMixed[key]) {
isMixed[key] = false
var placeholder = editables[key].options('placeholder').replace('Mixed', 'Unknown').replace('mixed', 'unknown')
editables[key].options({
placeholder: placeholder
})
}
2016-01-12 04:46:07 +00:00
if (!isMultiple || ui.updateResults) {
Ox.Request.clearCache();
if (Ox.contains(['title', 'author', 'description'], key)) {
oml.$ui.info.updateElement();
}
2016-01-16 08:57:38 +00:00
if (ui.showFilters) {
oml.$ui.filters.forEach(function($filter) {
$filter.reloadList(true);
});
}
2016-01-12 04:46:07 +00:00
oml.$ui.list.value(
result.data.id, key, result.data[key]
);
oml.$ui.browser.value(
result.data.id, key, result.data[key]
);
2016-01-05 17:40:39 +00:00
}
$data && that.updateElement(result.data, [$data]);
2016-01-12 04:46:07 +00:00
that.triggerEvent('change', Ox.extend({}, key, value));
2014-05-04 17:26:43 +00:00
});
}
}
});
};
2016-01-11 13:33:15 +00:00
if (!externalData) {
2014-05-17 11:45:57 +00:00
ui.item && that.updateElement(ui.item);
2016-01-11 13:33:15 +00:00
} else if (!isMultiple) {
that.updateElement(externalData, [$icon, $info]);
2014-05-14 18:46:31 +00:00
} else {
2016-01-11 13:33:15 +00:00
that.updateElement(externalData, [$info]);
2014-05-14 18:46:31 +00:00
}
2014-05-04 17:26:43 +00:00
that.bindEvent({
mousedown: function() {
2015-03-07 12:39:59 +00:00
setTimeout(function() {
!Ox.Focus.focusedElementIsInput() && that.gainFocus();
});
}
})
2014-05-04 17:26:43 +00:00
return that;
};