allow custom metadata
This commit is contained in:
parent
ed7053c0cb
commit
996a754db5
12 changed files with 126 additions and 144 deletions
|
|
@ -29,7 +29,7 @@ oml.ui.browser = function() {
|
|||
borderWidth: Math.round(size / 64) + 'px 0',
|
||||
borderStyle: 'solid',
|
||||
borderColor: 'rgba(' + color[2].join(', ') + ')',
|
||||
margin: Math.round(size / 18) + 'px ' + Math.round(width / 3) + 'px',
|
||||
margin: Math.round(size / 18) + 'px ' + Math.round(width / 2 - 14) + 'px',
|
||||
fontSize: Math.round(size / 16) + 'px',
|
||||
textAlign: 'center',
|
||||
color: 'rgba(' + color[2].join(', ') + ')',
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ oml.ui.gridView = function() {
|
|||
borderWidth: Math.round(size / 64) + 'px 0',
|
||||
borderStyle: 'solid',
|
||||
borderColor: 'rgba(' + color[2].join(', ') + ')',
|
||||
margin: Math.round(size / 18) + 'px ' + Math.round(width / 3) + 'px',
|
||||
margin: Math.round(size / 18) + 'px ' + Math.round(width / 2 - 14) + 'px',
|
||||
fontSize: Math.round(size / 16) + 'px',
|
||||
textAlign: 'center',
|
||||
color: 'rgba(' + color[2].join(', ') + ')',
|
||||
|
|
|
|||
|
|
@ -14,19 +14,12 @@ oml.ui.identifyDialog = function(data) {
|
|||
}),
|
||||
|
||||
keys = [
|
||||
'title', 'author', 'publisher', 'date'
|
||||
'title', 'author', 'publisher', 'date', 'edition', 'language'
|
||||
].map(function(id) {
|
||||
var key = Ox.getObjectById(oml.config.sortKeys, id);
|
||||
var key = Ox.getObjectById(oml.config.itemKeys, id);
|
||||
return {
|
||||
format: key.format,
|
||||
id: id,
|
||||
operator: key.operator,
|
||||
width: {
|
||||
title: 288,
|
||||
author: 224,
|
||||
publisher: 160,
|
||||
date: 96 - Ox.UI.SCROLLBAR_SIZE
|
||||
}[id],
|
||||
title: key.title,
|
||||
visible: true
|
||||
};
|
||||
|
|
@ -61,7 +54,7 @@ oml.ui.identifyDialog = function(data) {
|
|||
$titlePanel = Ox.SplitPanel({
|
||||
elements: [
|
||||
{element: $titleForm, size: 96},
|
||||
{element: Ox.Element()}
|
||||
{element: renderResults()}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
}),
|
||||
|
|
@ -134,12 +127,13 @@ oml.ui.identifyDialog = function(data) {
|
|||
);
|
||||
that.options({content: Ox.LoadingScreen().start()});
|
||||
that.disableButtons();
|
||||
Ox.print('VALUE SENT:', edit)
|
||||
oml.api.edit(edit, function(result) {
|
||||
that.close();
|
||||
Ox.Request.clearCache('find');
|
||||
oml.$ui.browser.reloadList(true);
|
||||
Ox.Request.clearCache(data.id);
|
||||
oml.$ui.infoView.updateElement(result.data);
|
||||
oml.$ui.infoView.updateElement(data.id);
|
||||
});
|
||||
}
|
||||
})
|
||||
|
|
@ -163,7 +157,6 @@ oml.ui.identifyDialog = function(data) {
|
|||
disableButtons();
|
||||
$titlePanel.replaceElement(1, Ox.LoadingScreen().start());
|
||||
oml.api.findMetadata(data, function(result) {
|
||||
// FIXME: CONCAT HERE
|
||||
var items = result.data.items.map(function(item, index) {
|
||||
return Ox.extend({index: (index + 1).toString()}, item);
|
||||
});
|
||||
|
|
@ -352,42 +345,48 @@ oml.ui.identifyDialog = function(data) {
|
|||
var $list = Ox.TableList({
|
||||
columns: [
|
||||
{
|
||||
format: function(value) {
|
||||
return Ox.getObjectById(ids, value).title;
|
||||
format: function(value, data) {
|
||||
return value
|
||||
? '<b>' + Ox.getObjectById(ids, value).title
|
||||
+ ':</b> ' + data[data.mainid]
|
||||
: '<b>No ID</b>'
|
||||
},
|
||||
id: 'mainid',
|
||||
visible: true,
|
||||
width: 64
|
||||
},
|
||||
{
|
||||
format: function(value, data) {
|
||||
return data[data.mainid];
|
||||
},
|
||||
id: 'index',
|
||||
visible: true,
|
||||
width: 128 - Ox.UI.SCROLLBAR_SIZE
|
||||
width: 192 - Ox.UI.SCROLLBAR_SIZE
|
||||
}
|
||||
],
|
||||
items: items,
|
||||
items: [{
|
||||
'index': '0',
|
||||
'mainid': ''
|
||||
}].concat(items || []),
|
||||
keys: ['mainid', 'isbn10', 'isbn13'],
|
||||
min: 1,
|
||||
max: 1,
|
||||
scrollbarVisible: true,
|
||||
sort: [{key: 'mainid', operator: '+'}],
|
||||
sort: [{key: 'index', operator: '+'}],
|
||||
unique: 'index'
|
||||
})
|
||||
.bindEvent({
|
||||
select: function(data) {
|
||||
var index = data.ids[0], mainid;
|
||||
mainid = $list.value(index, 'mainid');
|
||||
titleValue = Ox.extend({}, mainid, $list.value(index, mainid));
|
||||
$results.replaceElement(1, Ox.LoadingScreen().start());
|
||||
oml.api.getMetadata(titleValue, function(result) {
|
||||
if (index == $list.options('selected')[0]) {
|
||||
$results.replaceElement(1, oml.ui.infoView(result.data));
|
||||
that.options('buttons')[1].options({disabled: false});
|
||||
}
|
||||
});
|
||||
var index = data.ids[0],
|
||||
mainid = $list.value(index, 'mainid');
|
||||
if (!mainid) {
|
||||
titleValue = {};
|
||||
keys.forEach(function(key) {
|
||||
titleValue[key.id] = titleInputValue(key.id);
|
||||
});
|
||||
$results.replaceElement(1, oml.ui.infoView(titleValue));
|
||||
} else {
|
||||
titleValue = Ox.extend({}, mainid, $list.value(index, mainid));
|
||||
$results.replaceElement(1, Ox.LoadingScreen().start());
|
||||
oml.api.getMetadata(titleValue, function(result) {
|
||||
if (index == $list.options('selected')[0]) {
|
||||
$results.replaceElement(1, oml.ui.infoView(result.data));
|
||||
that.options('buttons')[1].options({disabled: false});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}),
|
||||
$results = Ox.SplitPanel({
|
||||
|
|
@ -405,14 +404,14 @@ oml.ui.identifyDialog = function(data) {
|
|||
$titleInputs = keys.map(function(key, index) {
|
||||
return Ox.Input({
|
||||
label: Ox._(key.title),
|
||||
labelWidth: 64,
|
||||
labelWidth: 80,
|
||||
value: data[key.id],
|
||||
width: 360
|
||||
width: 240
|
||||
})
|
||||
.css({
|
||||
position: 'absolute',
|
||||
left: index < 2 ? '16px' : '392px',
|
||||
top: index % 2 == 0 ? '16px' : '40px'
|
||||
left: 16 + Math.floor(index / 2) * 248 + 'px',
|
||||
top: 16 + (index % 2) * 24 + 'px'
|
||||
})
|
||||
.bindEvent({
|
||||
submit: function(data) {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@ oml.ui.infoView = function(identifyData) {
|
|||
|
||||
var ui = oml.user.ui,
|
||||
|
||||
css = getCSS(ui.coverSize, oml.config.coverRatio),
|
||||
coverSize = identifyData ? 256 : ui.coverSize,
|
||||
|
||||
css = getCSS(coverSize, oml.config.coverRatio),
|
||||
|
||||
that = Ox.Element()
|
||||
.addClass('OxTextPage')
|
||||
|
|
@ -39,7 +41,7 @@ oml.ui.infoView = function(identifyData) {
|
|||
right: !identifyData ? '176px' : 16 + Ox.UI.SCROLLBAR_SIZE + 'px',
|
||||
top: '16px'
|
||||
})
|
||||
[ui.coverSize == 512 ? 'hide' : 'show']()
|
||||
[coverSize == 512 ? 'hide' : 'show']()
|
||||
.appendTo(that),
|
||||
|
||||
$data,
|
||||
|
|
@ -226,8 +228,9 @@ oml.ui.infoView = function(identifyData) {
|
|||
}
|
||||
|
||||
function toggleCoverSize(ratio) {
|
||||
var coverSize = ui.coverSize == 256 ? 512 : 256,
|
||||
css = getCSS(coverSize, ratio);
|
||||
var css;
|
||||
coverSize = coverSize == 256 ? 512 : 256,
|
||||
css = getCSS(coverSize, ratio);
|
||||
//$cover.animate(css.cover, 250);
|
||||
$info.animate(css.info, 250);
|
||||
$image.animate(css.image, 250);
|
||||
|
|
@ -237,7 +240,7 @@ oml.ui.infoView = function(identifyData) {
|
|||
}
|
||||
|
||||
function updateCover(ratio) {
|
||||
var css = getCSS(ui.coverSize, ratio);
|
||||
var css = getCSS(coverSize, ratio);
|
||||
$image.css(css.image).show();
|
||||
$reflectionImage.css(css.image);
|
||||
$reflection.css(css.reflection).show();
|
||||
|
|
@ -271,7 +274,7 @@ oml.ui.infoView = function(identifyData) {
|
|||
? '/' + data.id + '/cover512.jpg?' + data.modified
|
||||
: data.cover,
|
||||
ratio = data.coverRatio || oml.config.coverRatio,
|
||||
size = ui.coverSize,
|
||||
size = coverSize,
|
||||
reflectionSize = Math.round(size / 2);
|
||||
|
||||
$elements.forEach(function($element) {
|
||||
|
|
@ -307,7 +310,9 @@ oml.ui.infoView = function(identifyData) {
|
|||
.hide()
|
||||
.bindEvent({
|
||||
singleclick: function() {
|
||||
toggleCoverSize(ratio);
|
||||
if (!identifyData) {
|
||||
toggleCoverSize(ratio);
|
||||
}
|
||||
}
|
||||
})
|
||||
.appendTo($cover);
|
||||
|
|
@ -341,101 +346,56 @@ oml.ui.infoView = function(identifyData) {
|
|||
} else if ($element == $info) {
|
||||
|
||||
$('<div>')
|
||||
.css({marginTop: '-2px'})
|
||||
.append(
|
||||
Ox.EditableContent({
|
||||
clickLink: oml.clickLink,
|
||||
editable: isEditable,
|
||||
placeholder: formatLight(Ox._('Unknown Title')),
|
||||
tooltip: isEditable ? oml.getEditTooltip() : '',
|
||||
value: data.title || ''
|
||||
})
|
||||
.bindEvent({
|
||||
submit: function(data) {
|
||||
editMetadata('title', data.value);
|
||||
}
|
||||
})
|
||||
.css({
|
||||
fontSize: '13px',
|
||||
fontWeight: 'bold'
|
||||
})
|
||||
.css({
|
||||
marginTop: '-2px',
|
||||
fontSize: '13px',
|
||||
fontWeight: 'bold'
|
||||
})
|
||||
.html(
|
||||
data.title
|
||||
|| '<span class="OxLight">'
|
||||
+ Ox._('No Title')
|
||||
+ '</span>'
|
||||
)
|
||||
.appendTo($info);
|
||||
|
||||
if (data.author || isEditable) {
|
||||
if (data.author) {
|
||||
$('<div>')
|
||||
.css({
|
||||
marginTop: '4px',
|
||||
fontSize: '13px',
|
||||
fontWeight: 'bold'
|
||||
})
|
||||
.append(
|
||||
Ox.EditableContent({
|
||||
clickLink: oml.clickLink,
|
||||
editable: isEditable,
|
||||
format: function(value) {
|
||||
return !identifyData
|
||||
? formatValue(value.split(', '), 'author')
|
||||
: value;
|
||||
},
|
||||
placeholder: formatLight(Ox._('Unknown Author')),
|
||||
tooltip: isEditable ? oml.getEditTooltip() : '',
|
||||
value: data.author ? data.author.join(', ') : ''
|
||||
})
|
||||
.css({
|
||||
fontSize: '13px',
|
||||
fontWeight: 'bold'
|
||||
})
|
||||
.bindEvent({
|
||||
submit: function(data) {
|
||||
editMetadata('author', value.split(', '));
|
||||
}
|
||||
})
|
||||
)
|
||||
.html(formatValue(data.author, 'author'))
|
||||
.appendTo($info);
|
||||
}
|
||||
|
||||
if (!isEditable) {
|
||||
if (data.place || data.publisher || data.date) {
|
||||
$('<div>')
|
||||
.css({
|
||||
marginTop: '8px'
|
||||
})
|
||||
.text(
|
||||
(data.place || '')
|
||||
(data.place || []).join(' ; ')
|
||||
+ (data.place && (data.publisher || data.date) ? ' : ' : '')
|
||||
+ (data.publisher || '')
|
||||
+ (data.publisher && data.date ? ', ' : '')
|
||||
+ (data.date || '')
|
||||
)
|
||||
.appendTo($info);
|
||||
} else {
|
||||
var $div = $('<div>')
|
||||
.addClass('OxSelectable')
|
||||
.css({marginTop: '8px'})
|
||||
}
|
||||
|
||||
if (data.edition || data.language) {
|
||||
$('<div>')
|
||||
.css({
|
||||
marginTop: '8px'
|
||||
})
|
||||
.text(
|
||||
(data.edition || '')
|
||||
+ (data.edition && data.language ? '; ' : '')
|
||||
+ (data.language || '')
|
||||
)
|
||||
.appendTo($info);
|
||||
['edition', 'publisher', 'date'].forEach(function(key, index) {
|
||||
index && $('<div>').css({float: 'left'}).html('; ').appendTo($div);
|
||||
$('<div>')
|
||||
.css({float: 'left'})
|
||||
.html(formatKey(key))
|
||||
.appendTo($div);
|
||||
Ox.EditableContent({
|
||||
clickLink: oml.clickLink,
|
||||
format: function(value) {
|
||||
return formatValue(value.split(', '), key)
|
||||
},
|
||||
placeholder: formatLight('unknown'),
|
||||
tooltip: oml.getEditTooltip(),
|
||||
value: data[key] || ''
|
||||
})
|
||||
.css({float: 'left'})
|
||||
.bindEvent({
|
||||
submit: function(event) {
|
||||
editMetadata(key, event.value);
|
||||
}
|
||||
})
|
||||
.appendTo($div);
|
||||
});
|
||||
}
|
||||
|
||||
if (data.classification) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue