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

update info view (new item keys)

This commit is contained in:
rlx 2016-01-11 16:16:57 +05:30
parent 3cdc039cb2
commit 2dcc11dbb6
1 changed files with 162 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

297
static/js/infoView.js
View File

@ -4,7 +4,7 @@ oml.ui.infoView = function(identifyData) {
var ui = oml.user.ui, var ui = oml.user.ui,
arrayKeys = ['author', 'place', 'publisher', 'language'], arrayKeys = ['author', 'place', 'publisher', 'language', 'categories'],
iconSize = identifyData ? 256 : ui.iconSize, iconSize = identifyData ? 256 : ui.iconSize,
@ -18,6 +18,8 @@ oml.ui.infoView = function(identifyData) {
{key: 'olid', url: 'https://openlibrary.org/books/{0}'} {key: 'olid', url: 'https://openlibrary.org/books/{0}'}
], ],
separator = '; ',
that = Ox.Element() that = Ox.Element()
.addClass('OxTextPage') .addClass('OxTextPage')
.css({overflowY: 'auto'}) .css({overflowY: 'auto'})
@ -73,6 +75,32 @@ oml.ui.infoView = function(identifyData) {
.appendTo(that); .appendTo(that);
} }
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);
}
return key && !identifyData ?
'<a href="/' + key + '==' + value + '">' + (
key == 'author' ? value.replace(/ \(Ed\.\)$/, '') : value
) + '</a>'
: value;
}).join(separator) + (isEditor ? ' (Ed.)' : '') : '';
}
function getCSS(size, ratio) { function getCSS(size, ratio) {
var width = Math.round(ratio >= 1 ? size : size * ratio), var width = Math.round(ratio >= 1 ? size : size * ratio),
height = Math.round(ratio <= 1 ? size : size / ratio), height = Math.round(ratio <= 1 ? size : size / ratio),
@ -103,27 +131,6 @@ oml.ui.infoView = function(identifyData) {
: ''; : '';
} }
function formatLight(string) {
return '<span class="OxLight">' + string + '</span>';
}
function formatKey(key) {
var item = Ox.getObjectById(oml.config.itemKeys, key);
return '<span style="font-weight: bold">'
+ Ox._(Ox.toTitleCase(key)) + ':</span>&nbsp;';
}
function formatValue(value, key) {
return value ? (Ox.isArray(value) ? value : [value]).map(function(value) {
if (key == 'date' && value) {
value = value.slice(0, 4);
}
return key && !identifyData ?
'<a href="/' + key + '==' + value + '">' + value + '</a>'
: value;
}).join('; ') : '';
}
function identify(data) { function identify(data) {
oml.$ui.identifyDialog = oml.ui.identifyDialog(data).open(); oml.$ui.identifyDialog = oml.ui.identifyDialog(data).open();
} }
@ -133,6 +140,7 @@ oml.ui.infoView = function(identifyData) {
elements: [ elements: [
Ox.Button({ Ox.Button({
disabled: data.mediastate != 'available', disabled: data.mediastate != 'available',
style: 'squared',
title: Ox._('Identify Book...'), title: Ox._('Identify Book...'),
width: 112 width: 112
}) })
@ -158,6 +166,7 @@ oml.ui.infoView = function(identifyData) {
max: 1, max: 1,
min: 1, min: 1,
overlap: 'left', overlap: 'left',
style: 'squared',
title: 'select', title: 'select',
tooltip: Ox._('Set Primary ID'), tooltip: Ox._('Set Primary ID'),
type: 'image', type: 'image',
@ -179,22 +188,24 @@ oml.ui.infoView = function(identifyData) {
: Ox.Button({ : Ox.Button({
disabled: true, disabled: true,
overlap: 'left', overlap: 'left',
style: 'squared',
title: 'select', title: 'select',
type: 'image' type: 'image'
}) })
], ],
float: 'right' float: 'right'
}) })
.css({marginTop: '16px'}); .css({marginTop: '8px'});
} }
function renderOpenButton(data) { function renderOpenButton(data) {
return data.mediastate == 'available' return data.mediastate == 'available'
? Ox.Button({ ? Ox.Button({
style: 'squared',
title: Ox._('Open Folder'), title: Ox._('Open Folder'),
width: 128 width: 128
}) })
.css({marginTop: '16px'}) .css({marginTop: '8px'})
.bindEvent({ .bindEvent({
click: function() { click: function() {
oml.api.openFolder({id: oml.user.ui.item}); oml.api.openFolder({id: oml.user.ui.item});
@ -240,6 +251,7 @@ oml.ui.infoView = function(identifyData) {
? Ox.FormElementGroup({ ? Ox.FormElementGroup({
elements: [ elements: [
Ox.Button({ Ox.Button({
style: 'squared',
title: Ox._('Download Book'), title: Ox._('Download Book'),
width: 112 width: 112
}) })
@ -256,6 +268,7 @@ oml.ui.infoView = function(identifyData) {
disabled: !ui._lists, disabled: !ui._lists,
items: getListItems(), items: getListItems(),
overlap: 'left', overlap: 'left',
style: 'squared',
title: 'select', title: 'select',
tooltip: Ox._('Download Book to a List'), tooltip: Ox._('Download Book to a List'),
type: 'image' type: 'image'
@ -280,6 +293,7 @@ oml.ui.infoView = function(identifyData) {
? Ox.FormElementGroup({ ? Ox.FormElementGroup({
elements: [ elements: [
Ox.Button({ Ox.Button({
style: 'squared',
title: Ox._('Transferring...'), title: Ox._('Transferring...'),
width: 112 width: 112
}) })
@ -290,6 +304,7 @@ oml.ui.infoView = function(identifyData) {
}), }),
Ox.Button({ Ox.Button({
overlap: 'left', overlap: 'left',
style: 'squared',
title: 'close', title: 'close',
tooltip: Ox._('Cancel Transfer'), tooltip: Ox._('Cancel Transfer'),
type: 'image' type: 'image'
@ -307,6 +322,7 @@ oml.ui.infoView = function(identifyData) {
float: 'right' float: 'right'
}) })
: Ox.Button({ : Ox.Button({
style: 'squared',
title: Ox._('Read Book'), title: Ox._('Read Book'),
width: 128 width: 128
}) })
@ -318,9 +334,14 @@ oml.ui.infoView = function(identifyData) {
return $element; return $element;
} }
function splitValue(value) { function splitValue(value, key) {
return Ox.decodeHTMLEntities(value).split('; ').map(function(value) { var isEditor = key == 'author'
return Ox.encodeHTMLEntities(value); && Ox.decodeHTMLEntities(value).split(separator).some(function(value) {
return Ox.endsWith(value, ' (Ed.)');
});
return Ox.decodeHTMLEntities(value).split(separator).map(function(value) {
return Ox.encodeHTMLEntities(value).replace(/ \(Ed\.\)/, '')
+ (isEditor ? ' (Ed.)' : '');
}); });
} }
@ -455,7 +476,7 @@ oml.ui.infoView = function(identifyData) {
} else if ($element == $info) { } else if ($element == $info) {
// -------- Title // -------- Title --------
$('<div>') $('<div>')
.css({ .css({
@ -480,7 +501,7 @@ oml.ui.infoView = function(identifyData) {
) )
.appendTo($info); .appendTo($info);
// -------- Author // -------- Author --------
$('<div>') $('<div>')
.css({ .css({
@ -491,11 +512,11 @@ oml.ui.infoView = function(identifyData) {
clickLink: oml.clickLink, clickLink: oml.clickLink,
editable: isEditable, editable: isEditable,
format: function(value) { format: function(value) {
return formatValue(splitValue(value), 'author'); return formatValue(splitValue(value, 'author'), 'author');
}, },
placeholder: formatLight(Ox._('Unknown Author')), placeholder: formatLight(Ox._('Unknown Author')),
tooltip: isEditable ? oml.getEditTooltip() : '', tooltip: isEditable ? oml.getEditTooltip() : '',
value: data.author ? Ox.encodeHTMLEntities(data.author.join('; ')) : '' value: Ox.encodeHTMLEntities((data.author || []).join(separator))
}) })
.css({ .css({
marginBottom: '-3px', marginBottom: '-3px',
@ -510,14 +531,14 @@ oml.ui.infoView = function(identifyData) {
) )
.appendTo($info); .appendTo($info);
// -------- Place, Publisher, Date // -------- Publisher, Place, Date --------
$div = $('<div>') $div = $('<div>')
.css({ .css({
marginTop: '4px', marginTop: '4px',
}) })
.appendTo($info); .appendTo($info);
['place', 'publisher', 'date'].forEach(function(key, index) { ['publisher', 'place', 'date'].forEach(function(key, index) {
if (index) { if (index) {
$('<span>').html(', ').appendTo($div); $('<span>').html(', ').appendTo($div);
} }
@ -536,10 +557,11 @@ oml.ui.infoView = function(identifyData) {
}, },
placeholder: formatLight(Ox._('unknown')), placeholder: formatLight(Ox._('unknown')),
tooltip: isEditable ? oml.getEditTooltip() : '', tooltip: isEditable ? oml.getEditTooltip() : '',
value: data[key] ? Ox.encodeHTMLEntities( value: Ox.encodeHTMLEntities(
Ox.contains(arrayKeys, key) Ox.contains(arrayKeys, key)
? data[key].join('; ') : data[key] ? (data[key] || []).join(separator)
) : '' : (data[key] || '')
)
}) })
.bindEvent({ .bindEvent({
submit: function(event) { submit: function(event) {
@ -549,14 +571,14 @@ oml.ui.infoView = function(identifyData) {
.appendTo($div); .appendTo($div);
}); });
// -------- Edition, Language, Pages // -------- Series, Edition, Language, Pages --------
$div = $('<div>') $div = $('<div>')
.css({ .css({
marginTop: '4px', marginTop: '4px',
}) })
.appendTo($info); .appendTo($info);
['edition', 'language', 'pages'].forEach(function(key, index) { ['series', 'edition', 'language', 'pages'].forEach(function(key, index) {
if (index) { if (index) {
$('<span>').html(', ').appendTo($div); $('<span>').html(', ').appendTo($div);
} }
@ -567,16 +589,19 @@ oml.ui.infoView = function(identifyData) {
clickLink: oml.clickLink, clickLink: oml.clickLink,
editable: isEditable, editable: isEditable,
format: function(value) { format: function(value) {
return key == 'language' return formatValue(
? formatValue(splitValue(value), key) Ox.contains(arrayKeys, key)
: value; ? splitValue(value) : value,
key
);
}, },
placeholder: formatLight('unknown'), placeholder: formatLight('unknown'),
tooltip: isEditable ? oml.getEditTooltip() : '', tooltip: isEditable ? oml.getEditTooltip() : '',
value: data[key] ? Ox.encodeHTMLEntities( value: Ox.encodeHTMLEntities(
Ox.contains(arrayKeys, key) Ox.contains(arrayKeys, key)
? data[key].join('; ') : data[key] ? (data[key] || []).join(separator)
) : '' : (data[key] || '')
)
}) })
.bindEvent({ .bindEvent({
submit: function(event) { submit: function(event) {
@ -586,74 +611,104 @@ oml.ui.infoView = function(identifyData) {
.appendTo($div); .appendTo($div);
}); });
// -------- Primary ID // -------- Categories --------
if (data.primaryid) { if (data.categories || isEditable) {
$('<div>') $div = $('<div>')
.css({ .css({
marginTop: '4px', marginTop: '4px',
}) })
.html(
'<b>' + Ox.getObjectById(oml.config.itemKeys, data.primaryid[0]).title
+ ':</b> ' + data.primaryid[1]
)
.appendTo($info); .appendTo($info);
} $('<span>')
.html(formatKey('categories'))
// -------- Classification .appendTo($div);
Ox.EditableContent({
if (data.classification || isEditable) { clickLink: oml.clickLink,
$('<div>') editable: isEditable,
.css({ format: function(value) {
marginTop: '8px', return formatValue(splitValue(value), 'categories');
},
placeholder: formatLight(Ox._('unknown')),
tooltip: isEditable ? oml.getEditTooltip() : '',
value: Ox.encodeHTMLEntities((data.categories || []).join(separator))
}) })
.append( .bindEvent({
Ox.EditableContent({ submit: function(event) {
clickLink: oml.clickLink, editMetadata('categories', Ox.decodeHTMLEntities(event.value));
editable: isEditable, }
placeholder: formatLight('No Classification'), })
tooltip: isEditable ? oml.getEditTooltip() : '', .appendTo($div);
value: data.classification ? Ox.encodeHTMLEntities(data.classification) : '',
})
.bindEvent({
submit: function(event) {
editMetadata('classification', Ox.decodeHTMLEntities(event.value));
}
})
)
.appendTo($info);
} }
// -------- Description // -------- ISBN --------
if (data.description || isEditable) { if (data.isbn || isEditable) {
$('<div>') $div = $('<div>')
.css({ .css({
marginTop: '8px', marginTop: '4px',
textAlign: 'justify' })
}).append( .appendTo($info);
Ox.EditableContent({ $('<span>')
clickLink: oml.clickLink, .html(formatKey('isbn'))
editable: isEditable, .appendTo($div);
format: function(value) { Ox.EditableContent({
return value.replace(/\n/g, '<br>'); editable: isEditable,
}, format: function(value) {
placeholder: formatLight('No Description'), return (value ? [
tooltip: isEditable ? oml.getEditTooltip() : '', Ox.formatISBN(value, 13),
type: 'textarea', Ox.formatISBN(value, 10)
value: data.description ? Ox.encodeHTMLEntities(data.description) : '' ] : []).join(separator);
}) },
.bindEvent({ placeholder: formatLight(Ox._('unknown')),
submit: function(event) { tooltip: isEditable ? oml.getEditTooltip() : '',
editMetadata( value: data.isbn || ''
'description', })
Ox.decodeHTMLEntities(event.value).replace(/<br>/g, '\n') .bindEvent({
); submit: function(event) {
} var value = Ox.formatISBN(event.value, 13);
}) this.options({value: value});
).appendTo($info); editMetadata('isbn', value);
}
})
.appendTo($div);
} }
// -------- Description, Table of Contents --------
['description', 'tableofcontents'].forEach(function(key) {
if (data[key] || isEditable) {
$('<div>')
.css({
marginTop: '8px',
textAlign: 'justify'
})
.append(
Ox.EditableContent({
clickLink: oml.clickLink,
editable: isEditable,
format: function(value) {
return value.replace(/\n/g, '<br>');
},
placeholder: formatLight(Ox._('No {0}', [
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);
}
});
$('<div>').css({height: '16px'}).appendTo($info); $('<div>').css({height: '16px'}).appendTo($info);
oml.createLinks($info); oml.createLinks($info);
@ -675,6 +730,8 @@ oml.ui.infoView = function(identifyData) {
) )
.appendTo($data); .appendTo($data);
renderIdentifyButton(data).appendTo($data);
['accessed', 'modified', 'added', 'created'].forEach(function(id) { ['accessed', 'modified', 'added', 'created'].forEach(function(id) {
var title; var title;
if (data[id]) { if (data[id]) {
@ -692,36 +749,6 @@ oml.ui.infoView = function(identifyData) {
} }
}); });
renderIdentifyButton(data).appendTo($data);
ids.forEach(function(id, index) {
var title;
if (data[id.key] && !Ox.isEmpty(data[id.key])) {
title = Ox.getObjectById(oml.config.itemKeys, id.key).title;
$('<div>')
.css({
marginTop: (index == 0 ? 10 : 6) + 'px',
fontWeight: 'bold'
})
.text(title)
.appendTo($data);
Ox.makeArray(data[id.key]/*FIXME!*/).forEach(function(value) {
var isPrimary = data.primaryid && data.primaryid[0] == id.key
&& data.primaryid[1] == value;
value = Ox.encodeHTMLEntities(value);
Ox.Element({
tooltip: isPrimary ? 'Primary ID' : ''
})
.html(
'<a href="' + Ox.formatString(id.url, [value])
+ '" target="_blank">' + value + '</a>'
+ (isPrimary ? ' (*)' : '')
)
.appendTo($data);
});
}
});
renderOpenButton(data).appendTo($data); renderOpenButton(data).appendTo($data);
$('<div>').css({height: '16px'}).appendTo($data); $('<div>').css({height: '16px'}).appendTo($data);
@ -733,11 +760,11 @@ 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: data.id};
if (Ox.contains(arrayKeys, key)) { edit[key] = key == 'author'
edit[key] = value ? value.split('; ') : []; ? splitValue(value || [], 'author')
} else { : Ox.contains(arrayKeys, key)
edit[key] = value; ? (value || '').split(separator)
} : value;
oml.api.edit(edit, function(result) { oml.api.edit(edit, function(result) {
Ox.Request.clearCache(); Ox.Request.clearCache();
if (Ox.contains(['title', 'author', 'description'], key)) { if (Ox.contains(['title', 'author', 'description'], key)) {