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';
oml.ui.infoView = function(identifyData) {
oml.ui.infoView = function(externalData, isMixed) {
isMixed = isMixed || {};
var ui = oml.user.ui,
arrayKeys = ['author', 'place', 'publisher', 'language', 'categories'],
iconSize = identifyData ? 256 : ui.iconSize,
iconSize = externalData ? 256 : ui.iconSize,
css = getCSS(iconSize, oml.config.iconRatio),
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}'}
],
isMultiple = !oml.user.ui.item,
separator = '; ',
css = getCSS(iconSize, oml.config.iconRatio),
that = Ox.Element()
.addClass('OxTextPage')
.css({overflowY: 'auto'})
@ -52,8 +48,9 @@ oml.ui.infoView = function(identifyData) {
.addClass('OxSelectable')
.css({
position: 'absolute',
left: css.info.left,
right: !identifyData ? '176px' : 16 + Ox.UI.SCROLLBAR_SIZE + 'px',
left: !isMultiple ? css.info.left : '16px',
right: !externalData && !isMultiple
? '176px' : 16 + Ox.UI.SCROLLBAR_SIZE + 'px',
top: '16px'
})
[iconSize == 512 ? 'hide' : 'show']()
@ -63,7 +60,7 @@ oml.ui.infoView = function(identifyData) {
$image, $reflection, $reflectionImage;
if (!identifyData) {
if (!externalData) {
$data = Ox.Element()
.addClass('OxSelectable')
.css({
@ -93,11 +90,13 @@ oml.ui.infoView = function(identifyData) {
if (key == 'date' && value) {
value = value.slice(0, 4);
}
return key && !identifyData ?
'<a href="/' + key + '==' + value + '">' + (
key == 'author' ? value.replace(/ \(Ed\.\)$/, '') : value
) + '</a>'
: value;
return (
key && !externalData ? '<a href="/' + key + '==' + value + '">' : ''
) + (
key == 'author' ? value.replace(/ \(Ed\.\)$/, '') : value
) + (
key && !externalData ? '</a>' : ''
);
}).join(separator) + (isEditor ? ' (Ed.)' : '') : '';
}
@ -124,7 +123,7 @@ oml.ui.infoView = function(identifyData) {
}
function getIconTooltip() {
return !identifyData
return !externalData
? 'Click to see ' + (ui.iconSize == 256 ? 'large' : 'small')
+ ' ' + ui.icons + ', doubleclick to see '
+ (ui.icons == 'cover' ? 'preview' : 'cover')
@ -136,81 +135,18 @@ oml.ui.infoView = function(identifyData) {
}
function renderIdentifyButton(data) {
return Ox.FormElementGroup({
elements: [
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({
return Ox.Button({
disabled: data.mediastate != 'available',
style: 'squared',
title: Ox._('Open Folder'),
title: Ox._('Identify Book...'),
width: 128
})
.css({marginTop: '8px'})
.bindEvent({
click: function() {
oml.api.openFolder({id: oml.user.ui.item});
identify(data);
}
}) : Ox.Element();
});
}
function renderMediaButton(data) {
@ -334,6 +270,20 @@ oml.ui.infoView = function(identifyData) {
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) {
var isEditor = key == 'author'
&& Ox.decodeHTMLEntities(value).split(separator).some(function(value) {
@ -378,7 +328,7 @@ oml.ui.infoView = function(identifyData) {
keys: []
}, function(result) {
if (!identifyData && id && id != ui.item) {
if (!externalData && id && id != ui.item) {
return;
}
@ -389,12 +339,14 @@ oml.ui.infoView = function(identifyData) {
Ox.print('BOOK DATA', data)
var $div,
isEditable = data.mediastate == 'available' && !identifyData,
src = !identifyData
isEditable = isMultiple || (
data.mediastate == 'available' && !externalData
),
src = !externalData
? '/' + data.id + '/' + ui.icons + '512.jpg?' + data.modified
: data.cover,
ratio = (
ui.icons == 'cover' || identifyData
ui.icons == 'cover' || externalData
? data.coverRatio : data.previewRatio
) || oml.config.iconRatio,
size = iconSize,
@ -433,7 +385,7 @@ oml.ui.infoView = function(identifyData) {
.hide()
.bindEvent({
doubleclick: function() {
if (!identifyData) {
if (!externalData) {
oml.UI.set({
icons: ui.icons == 'cover'
? 'preview' : 'cover'
@ -441,7 +393,7 @@ oml.ui.infoView = function(identifyData) {
}
},
singleclick: function() {
if (!identifyData) {
if (!externalData) {
toggleCoverSize(ratio);
}
}
@ -486,8 +438,11 @@ oml.ui.infoView = function(identifyData) {
Ox.EditableContent({
clickLink: oml.clickLink,
editable: isEditable,
placeholder: formatLight(Ox._(
isMixed.title ? 'Mixed Title' : 'Unknown Title'
)),
tooltip: isEditable ? oml.getEditTooltip() : '',
value: data.title ? Ox.encodeHTMLEntities(data.title) : 'No Title'
value: Ox.encodeHTMLEntities(data.title || '')
})
.css({
fontWeight: 'bold',
@ -514,9 +469,13 @@ oml.ui.infoView = function(identifyData) {
format: function(value) {
return formatValue(splitValue(value, 'author'), 'author');
},
placeholder: formatLight(Ox._('Unknown Author')),
placeholder: formatLight(Ox._(
isMixed.author ? 'Mixed Author' : 'Unknown Author'
)),
tooltip: isEditable ? oml.getEditTooltip() : '',
value: Ox.encodeHTMLEntities((data.author || []).join(separator))
value: Ox.encodeHTMLEntities(
(data.author || []).join(separator)
)
})
.css({
marginBottom: '-3px',
@ -555,7 +514,9 @@ oml.ui.infoView = function(identifyData) {
key
);
},
placeholder: formatLight(Ox._('unknown')),
placeholder: formatLight(Ox._(
isMixed[key] ? 'mixed' : 'unknown'
)),
tooltip: isEditable ? oml.getEditTooltip() : '',
value: Ox.encodeHTMLEntities(
Ox.contains(arrayKeys, key)
@ -595,7 +556,9 @@ oml.ui.infoView = function(identifyData) {
key
);
},
placeholder: formatLight('unknown'),
placeholder: formatLight(Ox._(
isMixed[key] ? 'mixed' : 'unknown'
)),
tooltip: isEditable ? oml.getEditTooltip() : '',
value: Ox.encodeHTMLEntities(
Ox.contains(arrayKeys, key)
@ -628,7 +591,9 @@ oml.ui.infoView = function(identifyData) {
format: function(value) {
return formatValue(splitValue(value), 'categories');
},
placeholder: formatLight(Ox._('unknown')),
placeholder: formatLight(Ox._(
isMixed.categories ? 'mixed' : 'unknown'
)),
tooltip: isEditable ? oml.getEditTooltip() : '',
value: Ox.encodeHTMLEntities((data.categories || []).join(separator))
})
@ -659,7 +624,9 @@ oml.ui.infoView = function(identifyData) {
Ox.formatISBN(value, 10)
] : []).join(separator);
},
placeholder: formatLight(Ox._('unknown')),
placeholder: formatLight(Ox._(
isMixed.isbn ? 'mixed' : 'unknown'
)),
tooltip: isEditable ? oml.getEditTooltip() : '',
value: data.isbn || ''
})
@ -689,7 +656,8 @@ oml.ui.infoView = function(identifyData) {
format: function(value) {
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
])),
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);
@ -759,7 +729,7 @@ oml.ui.infoView = function(identifyData) {
function editMetadata(key, value) {
if (value != data[key]) {
var edit = {id: data.id};
var edit = {id: !isMultiple ? data.id : oml.ui.listSelection};
edit[key] = key == 'author'
? splitValue(value || [], 'author')
: Ox.contains(arrayKeys, key)
@ -770,6 +740,9 @@ oml.ui.infoView = function(identifyData) {
if (Ox.contains(['title', 'author', 'description'], key)) {
oml.$ui.info.updateElement();
}
oml.$ui.filters.forEach(function($filter) {
$filter.reloadList();
});
oml.$ui.list.value(
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);
} else if (!isMultiple) {
that.updateElement(externalData, [$icon, $info]);
} else {
that.updateElement(identifyData, [$icon, $info]);
Ox.print('***ELSE***', externalData)
that.updateElement(externalData, [$info]);
}
oml.bindEvent({