0x2620/openmedialibrary
1
0
Fork 0
Code Issues 131 Pull requests Releases Wiki Activity

update info view

Browse source
This commit is contained in:
rlx 2016-01-11 19:03:15 +05:30
parent 985c0cfbd4
commit f05335d4e5
1 changed files with 82 additions and 106 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

188
static/js/infoView.js
View file

@ -1,25 +1,21 @@
'use strict'; 'use strict';
oml.ui.infoView = function(identifyData) { oml.ui.infoView = function(externalData, isMixed) {
isMixed = isMixed || {};
var ui = oml.user.ui, var ui = oml.user.ui,
arrayKeys = ['author', 'place', 'publisher', 'language', 'categories'], arrayKeys = ['author', 'place', 'publisher', 'language', 'categories'],
iconSize = identifyData ? 256 : ui.iconSize, iconSize = externalData ? 256 : ui.iconSize,
css = getCSS(iconSize, oml.config.iconRatio), isMultiple = !oml.user.ui.item,
ids = [
{key: 'isbn', url: 'https://google.com/search?q=ISBN+{0}'},
{key: 'asin', url: 'http://www.amazon.com/dp/{0}'},
{key: 'lccn', url: 'http://lccn.loc.gov/{0}'},
{key: 'oclc', url: 'https://www.worldcat.org/oclc/{0}'},
{key: 'olid', url: 'https://openlibrary.org/books/{0}'}
],
separator = '; ', separator = '; ',
css = getCSS(iconSize, oml.config.iconRatio),
that = Ox.Element() that = Ox.Element()
.addClass('OxTextPage') .addClass('OxTextPage')
.css({overflowY: 'auto'}) .css({overflowY: 'auto'})
@ -52,8 +48,9 @@ oml.ui.infoView = function(identifyData) {
.addClass('OxSelectable') .addClass('OxSelectable')
.css({ .css({
position: 'absolute', position: 'absolute',
left: css.info.left, left: !isMultiple ? css.info.left : '16px',
right: !identifyData ? '176px' : 16 + Ox.UI.SCROLLBAR_SIZE + 'px', right: !externalData && !isMultiple
? '176px' : 16 + Ox.UI.SCROLLBAR_SIZE + 'px',
top: '16px' top: '16px'
}) })
[iconSize == 512 ? 'hide' : 'show']() [iconSize == 512 ? 'hide' : 'show']()
@ -63,7 +60,7 @@ oml.ui.infoView = function(identifyData) {
$image, $reflection, $reflectionImage; $image, $reflection, $reflectionImage;
if (!identifyData) { if (!externalData) {
$data = Ox.Element() $data = Ox.Element()
.addClass('OxSelectable') .addClass('OxSelectable')
.css({ .css({
@ -93,11 +90,13 @@ oml.ui.infoView = function(identifyData) {
if (key == 'date' && value) { if (key == 'date' && value) {
value = value.slice(0, 4); value = value.slice(0, 4);
} }
return key && !identifyData ? return (
'<a href="/' + key + '==' + value + '">' + ( key && !externalData ? '<a href="/' + key + '==' + value + '">' : ''
key == 'author' ? value.replace(/ \(Ed\.\)$/, '') : value ) + (
) + '</a>' key == 'author' ? value.replace(/ \(Ed\.\)$/, '') : value
: value; ) + (
key && !externalData ? '</a>' : ''
);
}).join(separator) + (isEditor ? ' (Ed.)' : '') : ''; }).join(separator) + (isEditor ? ' (Ed.)' : '') : '';
} }
@ -124,7 +123,7 @@ oml.ui.infoView = function(identifyData) {
} }
function getIconTooltip() { function getIconTooltip() {
return !identifyData return !externalData
? 'Click to see ' + (ui.iconSize == 256 ? 'large' : 'small') ? 'Click to see ' + (ui.iconSize == 256 ? 'large' : 'small')
+ ' ' + ui.icons + ', doubleclick to see ' + ' ' + ui.icons + ', doubleclick to see '
+ (ui.icons == 'cover' ? 'preview' : 'cover') + (ui.icons == 'cover' ? 'preview' : 'cover')
@ -136,81 +135,18 @@ oml.ui.infoView = function(identifyData) {
} }
function renderIdentifyButton(data) { function renderIdentifyButton(data) {
return Ox.FormElementGroup({ return Ox.Button({
elements: [ disabled: data.mediastate != 'available',
Ox.Button({
disabled: data.mediastate != 'available',
style: 'squared',
title: Ox._('Identify Book...'),
width: 112
})
.bindEvent({
click: function() {
identify(data);
}
}),
data.mediastate == 'available' && data.primaryid
? Ox.Select({
items: Ox.flatten(ids.map(function(id) {
return (data[id.key] || []).map(function(value) {
return {
id: id.key + ':' + value,
title: '<b>' + Ox.getObjectById(
oml.config.itemKeys, id.key
).title + ':</b> ' + value
};
});
})).concat([
{id: '', title: '<b>No ID</b>'}
]),
max: 1,
min: 1,
overlap: 'left',
style: 'squared',
title: 'select',
tooltip: Ox._('Set Primary ID'),
type: 'image',
value: data.primaryid.join(':')
})
.bindEvent({
click: function(data) {
// ...
},
change: function(data) {
oml.api.edit({
id: ui.item,
primaryid: data.value ? data.value.split(':') : ''
}, function(result) {
that.updateElement(result.data, [$info, $data]);
});
}
})
: Ox.Button({
disabled: true,
overlap: 'left',
style: 'squared',
title: 'select',
type: 'image'
})
],
float: 'right'
})
.css({marginTop: '8px'});
}
function renderOpenButton(data) {
return data.mediastate == 'available'
? Ox.Button({
style: 'squared', style: 'squared',
title: Ox._('Open Folder'), title: Ox._('Identify Book...'),
width: 128 width: 128
}) })
.css({marginTop: '8px'}) .css({marginTop: '8px'})
.bindEvent({ .bindEvent({
click: function() { click: function() {
oml.api.openFolder({id: oml.user.ui.item}); identify(data);
} }
}) : Ox.Element(); });
} }
function renderMediaButton(data) { function renderMediaButton(data) {
@ -334,6 +270,20 @@ oml.ui.infoView = function(identifyData) {
return $element; return $element;
} }
function renderOpenButton() {
return Ox.Button({
style: 'squared',
title: Ox._('Open Folder'),
width: 128
})
.css({marginTop: '8px'})
.bindEvent({
click: function() {
oml.api.openFolder({id: oml.user.ui.item});
}
});
}
function splitValue(value, key) { function splitValue(value, key) {
var isEditor = key == 'author' var isEditor = key == 'author'
&& Ox.decodeHTMLEntities(value).split(separator).some(function(value) { && Ox.decodeHTMLEntities(value).split(separator).some(function(value) {
@ -378,7 +328,7 @@ oml.ui.infoView = function(identifyData) {
keys: [] keys: []
}, function(result) { }, function(result) {
if (!identifyData && id && id != ui.item) { if (!externalData && id && id != ui.item) {
return; return;
} }
@ -389,12 +339,14 @@ oml.ui.infoView = function(identifyData) {
Ox.print('BOOK DATA', data) Ox.print('BOOK DATA', data)
var $div, var $div,
isEditable = data.mediastate == 'available' && !identifyData, isEditable = isMultiple || (
src = !identifyData data.mediastate == 'available' && !externalData
),
src = !externalData
? '/' + data.id + '/' + ui.icons + '512.jpg?' + data.modified ? '/' + data.id + '/' + ui.icons + '512.jpg?' + data.modified
: data.cover, : data.cover,
ratio = ( ratio = (
ui.icons == 'cover' || identifyData ui.icons == 'cover' || externalData
? data.coverRatio : data.previewRatio ? data.coverRatio : data.previewRatio
) || oml.config.iconRatio, ) || oml.config.iconRatio,
size = iconSize, size = iconSize,
@ -433,7 +385,7 @@ oml.ui.infoView = function(identifyData) {
.hide() .hide()
.bindEvent({ .bindEvent({
doubleclick: function() { doubleclick: function() {
if (!identifyData) { if (!externalData) {
oml.UI.set({ oml.UI.set({
icons: ui.icons == 'cover' icons: ui.icons == 'cover'
? 'preview' : 'cover' ? 'preview' : 'cover'
@ -441,7 +393,7 @@ oml.ui.infoView = function(identifyData) {
} }
}, },
singleclick: function() { singleclick: function() {
if (!identifyData) { if (!externalData) {
toggleCoverSize(ratio); toggleCoverSize(ratio);
} }
} }
@ -486,8 +438,11 @@ oml.ui.infoView = function(identifyData) {
Ox.EditableContent({ Ox.EditableContent({
clickLink: oml.clickLink, clickLink: oml.clickLink,
editable: isEditable, editable: isEditable,
placeholder: formatLight(Ox._(
isMixed.title ? 'Mixed Title' : 'Unknown Title'
)),
tooltip: isEditable ? oml.getEditTooltip() : '', tooltip: isEditable ? oml.getEditTooltip() : '',
value: data.title ? Ox.encodeHTMLEntities(data.title) : 'No Title' value: Ox.encodeHTMLEntities(data.title || '')
}) })
.css({ .css({
fontWeight: 'bold', fontWeight: 'bold',
@ -514,9 +469,13 @@ oml.ui.infoView = function(identifyData) {
format: function(value) { format: function(value) {
return formatValue(splitValue(value, 'author'), 'author'); return formatValue(splitValue(value, 'author'), 'author');
}, },
placeholder: formatLight(Ox._('Unknown Author')), placeholder: formatLight(Ox._(
isMixed.author ? 'Mixed Author' : 'Unknown Author'
)),
tooltip: isEditable ? oml.getEditTooltip() : '', tooltip: isEditable ? oml.getEditTooltip() : '',
value: Ox.encodeHTMLEntities((data.author || []).join(separator)) value: Ox.encodeHTMLEntities(
(data.author || []).join(separator)
)
}) })
.css({ .css({
marginBottom: '-3px', marginBottom: '-3px',
@ -555,7 +514,9 @@ oml.ui.infoView = function(identifyData) {
key key
); );
}, },
placeholder: formatLight(Ox._('unknown')), placeholder: formatLight(Ox._(
isMixed[key] ? 'mixed' : 'unknown'
)),
tooltip: isEditable ? oml.getEditTooltip() : '', tooltip: isEditable ? oml.getEditTooltip() : '',
value: Ox.encodeHTMLEntities( value: Ox.encodeHTMLEntities(
Ox.contains(arrayKeys, key) Ox.contains(arrayKeys, key)
@ -595,7 +556,9 @@ oml.ui.infoView = function(identifyData) {
key key
); );
}, },
placeholder: formatLight('unknown'), placeholder: formatLight(Ox._(
isMixed[key] ? 'mixed' : 'unknown'
)),
tooltip: isEditable ? oml.getEditTooltip() : '', tooltip: isEditable ? oml.getEditTooltip() : '',
value: Ox.encodeHTMLEntities( value: Ox.encodeHTMLEntities(
Ox.contains(arrayKeys, key) Ox.contains(arrayKeys, key)
@ -628,7 +591,9 @@ oml.ui.infoView = function(identifyData) {
format: function(value) { format: function(value) {
return formatValue(splitValue(value), 'categories'); return formatValue(splitValue(value), 'categories');
}, },
placeholder: formatLight(Ox._('unknown')), placeholder: formatLight(Ox._(
isMixed.categories ? 'mixed' : 'unknown'
)),
tooltip: isEditable ? oml.getEditTooltip() : '', tooltip: isEditable ? oml.getEditTooltip() : '',
value: Ox.encodeHTMLEntities((data.categories || []).join(separator)) value: Ox.encodeHTMLEntities((data.categories || []).join(separator))
}) })
@ -659,7 +624,9 @@ oml.ui.infoView = function(identifyData) {
Ox.formatISBN(value, 10) Ox.formatISBN(value, 10)
] : []).join(separator); ] : []).join(separator);
}, },
placeholder: formatLight(Ox._('unknown')), placeholder: formatLight(Ox._(
isMixed.isbn ? 'mixed' : 'unknown'
)),
tooltip: isEditable ? oml.getEditTooltip() : '', tooltip: isEditable ? oml.getEditTooltip() : '',
value: data.isbn || '' value: data.isbn || ''
}) })
@ -689,7 +656,8 @@ oml.ui.infoView = function(identifyData) {
format: function(value) { format: function(value) {
return value.replace(/\n/g, '<br>'); return value.replace(/\n/g, '<br>');
}, },
placeholder: formatLight(Ox._('No {0}', [ placeholder: formatLight(Ox._(
isMixed[key] ? 'Mixed {0}' : 'No {0}', [
Ox.getObjectById(oml.config.itemKeys, key).title Ox.getObjectById(oml.config.itemKeys, key).title
])), ])),
tooltip: isEditable ? oml.getEditTooltip() : '', tooltip: isEditable ? oml.getEditTooltip() : '',
@ -749,7 +717,9 @@ oml.ui.infoView = function(identifyData) {
} }
}); });
renderOpenButton(data).appendTo($data); if (data.mediastate == 'available') {
renderOpenButton().appendTo($data);
}
$('<div>').css({height: '16px'}).appendTo($data); $('<div>').css({height: '16px'}).appendTo($data);
@ -759,7 +729,7 @@ oml.ui.infoView = function(identifyData) {
function editMetadata(key, value) { function editMetadata(key, value) {
if (value != data[key]) { if (value != data[key]) {
var edit = {id: data.id}; var edit = {id: !isMultiple ? data.id : oml.ui.listSelection};
edit[key] = key == 'author' edit[key] = key == 'author'
? splitValue(value || [], 'author') ? splitValue(value || [], 'author')
: Ox.contains(arrayKeys, key) : Ox.contains(arrayKeys, key)
@ -770,6 +740,9 @@ oml.ui.infoView = function(identifyData) {
if (Ox.contains(['title', 'author', 'description'], key)) { if (Ox.contains(['title', 'author', 'description'], key)) {
oml.$ui.info.updateElement(); oml.$ui.info.updateElement();
} }
oml.$ui.filters.forEach(function($filter) {
$filter.reloadList();
});
oml.$ui.list.value( oml.$ui.list.value(
result.data.id, key, result.data[key] result.data.id, key, result.data[key]
); );
@ -787,10 +760,13 @@ oml.ui.infoView = function(identifyData) {
}; };
if (!identifyData) { if (!externalData) {
ui.item && that.updateElement(ui.item); ui.item && that.updateElement(ui.item);
} else if (!isMultiple) {
that.updateElement(externalData, [$icon, $info]);
} else { } else {
that.updateElement(identifyData, [$icon, $info]); Ox.print('***ELSE***', externalData)
that.updateElement(externalData, [$info]);
} }
oml.bindEvent({ oml.bindEvent({