lots of stuff (part2)
This commit is contained in:
parent
feddea0ccd
commit
0d77cfd158
14 changed files with 767 additions and 578 deletions
|
|
@ -4,14 +4,17 @@ oml.ui.infoView = function(identifyData) {
|
|||
|
||||
var ui = oml.user.ui,
|
||||
|
||||
coverSize = identifyData ? 256 : ui.coverSize,
|
||||
iconSize = identifyData ? 256 : ui.iconSize,
|
||||
|
||||
css = getCSS(coverSize, oml.config.coverRatio),
|
||||
css = getCSS(iconSize, oml.config.iconRatio),
|
||||
|
||||
that = Ox.Element()
|
||||
.addClass('OxTextPage')
|
||||
.css({overflowY: 'auto'})
|
||||
.bindEvent({
|
||||
oml_icons: function() {
|
||||
that.updateElement(ui.item, [$icon])
|
||||
},
|
||||
oml_item: function() {
|
||||
if (ui.item) {
|
||||
that.updateElement(ui.item);
|
||||
|
|
@ -24,12 +27,12 @@ oml.ui.infoView = function(identifyData) {
|
|||
}
|
||||
}),
|
||||
|
||||
$cover = Ox.Element()
|
||||
$icon = Ox.Element()
|
||||
.css({
|
||||
position: 'absolute',
|
||||
left: '16px',
|
||||
top: '16px',
|
||||
width: css.cover.width
|
||||
width: css.icon.width
|
||||
})
|
||||
.appendTo(that),
|
||||
|
||||
|
|
@ -41,7 +44,7 @@ oml.ui.infoView = function(identifyData) {
|
|||
right: !identifyData ? '176px' : 16 + Ox.UI.SCROLLBAR_SIZE + 'px',
|
||||
top: '16px'
|
||||
})
|
||||
[coverSize == 512 ? 'hide' : 'show']()
|
||||
[iconSize == 512 ? 'hide' : 'show']()
|
||||
.appendTo(that),
|
||||
|
||||
$data,
|
||||
|
|
@ -65,7 +68,7 @@ oml.ui.infoView = function(identifyData) {
|
|||
height = Math.round(ratio <= 1 ? size : size / ratio),
|
||||
left = size == 256 ? Math.floor((size - width) / 2) : 0;
|
||||
return {
|
||||
cover: {
|
||||
icon: {
|
||||
width: size + 'px'
|
||||
},
|
||||
info: {
|
||||
|
|
@ -82,34 +85,99 @@ oml.ui.infoView = function(identifyData) {
|
|||
};
|
||||
}
|
||||
|
||||
function getImageSize(size, ratio) {
|
||||
var width = Math.round(ratio >= 1 ? size : size * ratio),
|
||||
height = Math.round(ratio <= 1 ? size : size / ratio),
|
||||
left = Math.floor((size - width) / 2);
|
||||
return {width: width, height: height, left: left};
|
||||
function getIconTooltip() {
|
||||
return !identifyData
|
||||
? 'Click to see ' + (ui.iconSize == 256 ? 'large' : 'small')
|
||||
+ ' ' + ui.icons + ', doubleclick to see '
|
||||
+ (ui.icons == 'cover' ? 'preview' : 'cover')
|
||||
: '';
|
||||
}
|
||||
|
||||
function formatLight(str) {
|
||||
return '<span class="OxLight">' + str + '</span>';
|
||||
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> ';
|
||||
+ Ox._(Ox.toTitleCase(key)) + ':</span> ';
|
||||
}
|
||||
|
||||
function formatValue(value, key, join) {
|
||||
value = Ox.encodeHTMLEntities(value);
|
||||
function formatValue(value, key) {
|
||||
return value ? (Ox.isArray(value) ? value : [value]).map(function(value) {
|
||||
return key && !identifyData ?
|
||||
'<a href="/' + key + '==' + value + '">' + value + '</a>'
|
||||
'<a href="/' + key + '==' + (
|
||||
key == 'date' ? value.slice(0, 4) : value
|
||||
) + '">' + value + '</a>'
|
||||
: value;
|
||||
}).join(join || ', ') : '';
|
||||
}).join('; ') : '';
|
||||
}
|
||||
|
||||
function identify(data) {
|
||||
oml.ui.identifyDialog(data).open();
|
||||
oml.$ui.identifyDialog = oml.ui.identifyDialog(data).open();
|
||||
}
|
||||
|
||||
function renderIdentifyButton(data) {
|
||||
return Ox.FormElementGroup({
|
||||
elements: [
|
||||
Ox.Button({
|
||||
disabled: data.mediastate != 'available',
|
||||
title: Ox._('Identify Book...'),
|
||||
width: 112
|
||||
})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
identify(data);
|
||||
}
|
||||
}),
|
||||
data.mediastate == 'available' && data.primaryid
|
||||
? Ox.Select({
|
||||
items: Ox.flatten([
|
||||
'isbn', 'asin', 'lccn', 'oclc', 'olid'
|
||||
].map(function(key) {
|
||||
return (data[key] || []).map(function(value) {
|
||||
return {
|
||||
id: key + ':' + value,
|
||||
title: '<b>' + Ox.getObjectById(
|
||||
oml.config.itemKeys, key
|
||||
).title + ':</b> ' + value
|
||||
};
|
||||
});
|
||||
})).concat([
|
||||
{id: '', title: '<b>No ID</b>'}
|
||||
]),
|
||||
max: 1,
|
||||
min: 1,
|
||||
overlap: 'left',
|
||||
title: 'select',
|
||||
tooltip: Ox._('Set Primary ID'),
|
||||
type: 'image',
|
||||
value: data.primaryid.join(':')
|
||||
})
|
||||
.bindEvent({
|
||||
click: function(data) {
|
||||
Ox.print('####', data);
|
||||
},
|
||||
change: function(data) {
|
||||
Ox.print('$$$', data);
|
||||
oml.api.edit({
|
||||
id: ui.item,
|
||||
primaryid: data.value ? data.value.split(':') : ''
|
||||
}, function(result) {
|
||||
that.updateElement(result.data, [$data]);
|
||||
});
|
||||
}
|
||||
})
|
||||
: Ox.Button({
|
||||
disabled: true,
|
||||
overlap: 'left',
|
||||
title: 'select',
|
||||
type: 'image'
|
||||
})
|
||||
],
|
||||
float: 'right'
|
||||
})
|
||||
.css({marginTop: '16px'});
|
||||
}
|
||||
|
||||
function renderMediaButton(data) {
|
||||
|
|
@ -166,7 +234,7 @@ oml.ui.infoView = function(identifyData) {
|
|||
disabled: !ui._lists,
|
||||
items: getListItems(),
|
||||
overlap: 'left',
|
||||
title: 'list',
|
||||
title: 'select',
|
||||
tooltip: Ox._('Download Book to a List'),
|
||||
type: 'image'
|
||||
})
|
||||
|
|
@ -230,18 +298,19 @@ oml.ui.infoView = function(identifyData) {
|
|||
|
||||
function toggleCoverSize(ratio) {
|
||||
var css;
|
||||
coverSize = coverSize == 256 ? 512 : 256,
|
||||
css = getCSS(coverSize, ratio);
|
||||
//$cover.animate(css.cover, 250);
|
||||
iconSize = iconSize == 256 ? 512 : 256,
|
||||
css = getCSS(iconSize, ratio);
|
||||
//$icon.animate(css.icon, 250);
|
||||
Ox.print('ANIMATE,', css)
|
||||
$info.animate(css.info, 250);
|
||||
$image.animate(css.image, 250);
|
||||
$reflectionImage.animate(css.image, 250);
|
||||
$reflection.animate(css.reflection, 250);
|
||||
oml.UI.set({coverSize: coverSize});
|
||||
oml.UI.set({iconSize: iconSize});
|
||||
}
|
||||
|
||||
function updateCover(ratio) {
|
||||
var css = getCSS(coverSize, ratio);
|
||||
var css = getCSS(iconSize, ratio);
|
||||
$image.css(css.image).show();
|
||||
$reflectionImage.css(css.image);
|
||||
$reflection.css(css.reflection).show();
|
||||
|
|
@ -254,7 +323,7 @@ oml.ui.infoView = function(identifyData) {
|
|||
|
||||
$elements = $elements
|
||||
? Ox.makeArray($elements)
|
||||
: [$cover, $info, $data];
|
||||
: [$icon, $info, $data];
|
||||
|
||||
(data ? Ox.noop : oml.api.get)({
|
||||
id: id,
|
||||
|
|
@ -271,24 +340,27 @@ oml.ui.infoView = function(identifyData) {
|
|||
|
||||
Ox.print('BOOK DATA', data)
|
||||
|
||||
var $mediaButton,
|
||||
isEditable = !data.mainid && data.mediastate == 'available',
|
||||
var $div,
|
||||
isEditable = data.mediastate == 'available' && !identifyData,
|
||||
src = !identifyData
|
||||
? '/' + data.id + '/cover512.jpg?' + data.modified
|
||||
? '/' + data.id + '/' + ui.icons + '512.jpg?' + data.modified
|
||||
: data.cover,
|
||||
ratio = data.coverRatio || oml.config.coverRatio,
|
||||
size = coverSize,
|
||||
ratio = (
|
||||
ui.icons == 'cover' || identifyData
|
||||
? data.coverRatio : data.previewRatio
|
||||
) || oml.config.iconRatio,
|
||||
size = iconSize,
|
||||
reflectionSize = Math.round(size / 2);
|
||||
|
||||
$elements.forEach(function($element) {
|
||||
|
||||
$element.empty();
|
||||
|
||||
if ($element == $cover) {
|
||||
if ($element == $icon) {
|
||||
|
||||
$image = Ox.Element({
|
||||
element: '<img>',
|
||||
tooltip: '' // TODO
|
||||
tooltip: getIconTooltip()
|
||||
})
|
||||
.on({
|
||||
error: function() {
|
||||
|
|
@ -312,13 +384,21 @@ oml.ui.infoView = function(identifyData) {
|
|||
})
|
||||
.hide()
|
||||
.bindEvent({
|
||||
doubleclick: function() {
|
||||
if (!identifyData) {
|
||||
oml.UI.set({
|
||||
icons: ui.icons == 'cover'
|
||||
? 'preview' : 'cover'
|
||||
});
|
||||
}
|
||||
},
|
||||
singleclick: function() {
|
||||
if (!identifyData) {
|
||||
toggleCoverSize(ratio);
|
||||
}
|
||||
}
|
||||
})
|
||||
.appendTo($cover);
|
||||
.appendTo($icon);
|
||||
|
||||
$reflection = $('<div>')
|
||||
.addClass('OxReflection')
|
||||
|
|
@ -329,7 +409,7 @@ oml.ui.infoView = function(identifyData) {
|
|||
overflow: 'hidden'
|
||||
})
|
||||
.hide()
|
||||
.appendTo($cover);
|
||||
.appendTo($icon);
|
||||
|
||||
$reflectionImage = $('<img>')
|
||||
.attr({src: src})
|
||||
|
|
@ -348,58 +428,130 @@ oml.ui.infoView = function(identifyData) {
|
|||
|
||||
} else if ($element == $info) {
|
||||
|
||||
// -------- Title
|
||||
|
||||
$('<div>')
|
||||
.css({
|
||||
marginTop: '-2px',
|
||||
fontSize: '13px',
|
||||
fontWeight: 'bold'
|
||||
marginTop: '-2px'
|
||||
})
|
||||
.html(
|
||||
data.title ? Ox.encodeHTMLEntities(data.title)
|
||||
: '<span class="OxLight">'
|
||||
+ Ox._('No Title')
|
||||
+ '</span>'
|
||||
.append(
|
||||
Ox.EditableContent({
|
||||
clickLink: oml.clickLink,
|
||||
editable: isEditable,
|
||||
tooltip: isEditable ? oml.getEditTooltip() : '',
|
||||
value: data.title || 'No Title'
|
||||
})
|
||||
.css({
|
||||
fontWeight: 'bold',
|
||||
fontSize: '13px'
|
||||
})
|
||||
.bindEvent({
|
||||
submit: function(event) {
|
||||
editMetadata('title', event.value);
|
||||
}
|
||||
})
|
||||
)
|
||||
.appendTo($info);
|
||||
|
||||
if (data.author) {
|
||||
$('<div>')
|
||||
.css({
|
||||
marginTop: '4px',
|
||||
fontSize: '13px',
|
||||
fontWeight: 'bold'
|
||||
})
|
||||
.html(formatValue(data.author, 'author'))
|
||||
.appendTo($info);
|
||||
}
|
||||
// -------- Author
|
||||
|
||||
if (data.place || data.publisher || data.date) {
|
||||
$('<div>')
|
||||
.css({
|
||||
marginTop: '8px'
|
||||
})
|
||||
.html(
|
||||
(formatValue(data.place, 'place', ' ; '))
|
||||
+ (data.place && (data.publisher || data.date) ? ' : ' : '')
|
||||
+ (formatValue(data.publisher, 'publisher'))
|
||||
+ (data.publisher && data.date ? ', ' : '')
|
||||
+ (data.date || '')
|
||||
)
|
||||
.appendTo($info);
|
||||
}
|
||||
$('<div>')
|
||||
.css({
|
||||
marginTop: '2px'
|
||||
})
|
||||
.append(
|
||||
Ox.EditableContent({
|
||||
clickLink: oml.clickLink,
|
||||
editable: isEditable,
|
||||
format: function(value) {
|
||||
return formatValue(value.split('; '), 'author');
|
||||
},
|
||||
placeholder: formatLight(Ox._('Unknown Author')),
|
||||
tooltip: isEditable ? oml.getEditTooltip() : '',
|
||||
value: data.author ? data.author.join('; ') : ''
|
||||
})
|
||||
.css({
|
||||
marginBottom: '-3px',
|
||||
fontWeight: 'bold',
|
||||
fontSize: '13px'
|
||||
})
|
||||
.bindEvent({
|
||||
submit: function(event) {
|
||||
editMetadata('author', event.value);
|
||||
}
|
||||
})
|
||||
)
|
||||
.appendTo($info);
|
||||
|
||||
if (data.edition || data.language) {
|
||||
$('<div>')
|
||||
.css({
|
||||
marginTop: '8px'
|
||||
// -------- Place, Publisher, Date
|
||||
|
||||
$div = $('<div>')
|
||||
.css({
|
||||
marginTop: '4px',
|
||||
})
|
||||
.appendTo($info);
|
||||
['place', 'publisher', 'date'].forEach(function(key, index) {
|
||||
if (index) {
|
||||
$('<span>').html(', ').appendTo($div);
|
||||
}
|
||||
$('<span>')
|
||||
.html(formatKey(key))
|
||||
.appendTo($div);
|
||||
Ox.EditableContent({
|
||||
clickLink: oml.clickLink,
|
||||
editable: isEditable,
|
||||
format: function(value) {
|
||||
return formatValue(value.split('; '), key)
|
||||
},
|
||||
placeholder: formatLight('unknown'),
|
||||
tooltip: isEditable ? oml.getEditTooltip() : '',
|
||||
value: key == 'place'
|
||||
? (data[key] ? data[key].join('; ') : [''])
|
||||
: data[key] || ''
|
||||
})
|
||||
.html(
|
||||
(Ox.encodeHTMLEntities(data.edition || ''))
|
||||
+ (data.edition && data.language ? '; ' : '')
|
||||
+ (formatValue(data.language, 'language'))
|
||||
)
|
||||
.appendTo($info);
|
||||
}
|
||||
.bindEvent({
|
||||
submit: function(event) {
|
||||
editMetadata(key, event.value);
|
||||
}
|
||||
})
|
||||
.appendTo($div);
|
||||
});
|
||||
|
||||
// -------- Edition, Language, Pages
|
||||
|
||||
$div = $('<div>')
|
||||
.css({
|
||||
marginTop: '4px',
|
||||
})
|
||||
.appendTo($info);
|
||||
['edition', 'language', 'pages'].forEach(function(key, index) {
|
||||
if (index) {
|
||||
$('<span>').html(', ').appendTo($div);
|
||||
}
|
||||
$('<span>')
|
||||
.html(formatKey(key))
|
||||
.appendTo($div);
|
||||
Ox.EditableContent({
|
||||
clickLink: oml.clickLink,
|
||||
editable: isEditable,
|
||||
format: function(value) {
|
||||
return key == 'language'
|
||||
? formatValue(value, key)
|
||||
: value;
|
||||
},
|
||||
placeholder: formatLight('unknown'),
|
||||
tooltip: isEditable ? oml.getEditTooltip() : '',
|
||||
value: data[key] || ''
|
||||
})
|
||||
.bindEvent({
|
||||
submit: function(event) {
|
||||
editMetadata(key, event.value);
|
||||
}
|
||||
})
|
||||
.appendTo($div);
|
||||
});
|
||||
|
||||
// -------- Classification
|
||||
|
||||
if (data.classification) {
|
||||
$('<div>')
|
||||
|
|
@ -413,6 +565,8 @@ oml.ui.infoView = function(identifyData) {
|
|||
.appendTo($info);
|
||||
}
|
||||
|
||||
// -------- Description
|
||||
|
||||
if (data.description) {
|
||||
$('<div>')
|
||||
.css({
|
||||
|
|
@ -427,10 +581,11 @@ oml.ui.infoView = function(identifyData) {
|
|||
|
||||
$('<div>').css({height: '16px'}).appendTo($info);
|
||||
|
||||
oml.createLinks($info);
|
||||
|
||||
} else if ($element == $data) {
|
||||
|
||||
$mediaButton = renderMediaButton(data)
|
||||
.appendTo($data);
|
||||
renderMediaButton(data).appendTo($data);
|
||||
|
||||
$('<div>')
|
||||
.addClass('OxSelectable')
|
||||
|
|
@ -439,7 +594,7 @@ oml.ui.infoView = function(identifyData) {
|
|||
})
|
||||
.text(
|
||||
[
|
||||
(data.extension || '???').toUpperCase(), // FIXME
|
||||
data.extension.toUpperCase(),
|
||||
Ox.formatValue(data.size, 'B')
|
||||
].join(', ')
|
||||
)
|
||||
|
|
@ -462,24 +617,13 @@ oml.ui.infoView = function(identifyData) {
|
|||
}
|
||||
});
|
||||
|
||||
Ox.Button({
|
||||
disabled: data.mediastate != 'available',
|
||||
title: Ox._('Identify Book...'),
|
||||
width: 128
|
||||
})
|
||||
.css({marginTop: '16px'})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
identify(data);
|
||||
}
|
||||
})
|
||||
.appendTo($data);
|
||||
renderIdentifyButton(data).appendTo($data);
|
||||
|
||||
[
|
||||
'isbn10', 'isbn13', 'asin', 'lccn', 'oclc', 'olid'
|
||||
'isbn', 'asin', 'lccn', 'oclc', 'olid'
|
||||
].forEach(function(id, index) {
|
||||
var title;
|
||||
if (data[id]) {
|
||||
if (data[id] && !Ox.isEmpty(data[id])) {
|
||||
title = Ox.getObjectById(oml.config.itemKeys, id).title;
|
||||
$('<div>')
|
||||
.css({
|
||||
|
|
@ -488,11 +632,19 @@ oml.ui.infoView = function(identifyData) {
|
|||
})
|
||||
.text(title)
|
||||
.appendTo($data);
|
||||
Ox.EditableContent({
|
||||
editable: false,
|
||||
value: data[id]
|
||||
})
|
||||
.appendTo($data);
|
||||
Ox.makeArray(data[id]/*FIXME!*/).forEach(function(value) {
|
||||
var isPrimary = data.primaryid[0] == id
|
||||
&& data.primaryid[1] == value;
|
||||
Ox.Element({
|
||||
tooltip: isPrimary ? 'Primary ID' : ''
|
||||
})
|
||||
.html(
|
||||
Ox.encodeHTMLEntities(value) + (
|
||||
isPrimary ? ' (*)' : ''
|
||||
)
|
||||
)
|
||||
.appendTo($data);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -502,16 +654,19 @@ oml.ui.infoView = function(identifyData) {
|
|||
|
||||
});
|
||||
|
||||
// FIXME: identify dialog should call this too
|
||||
function editMetadata(key, value) {
|
||||
var edit;
|
||||
Ox.print('EM', key, value, data[key])
|
||||
if (value != data[key]) {
|
||||
edit = Ox.extend({id: ui.item}, key, value);
|
||||
var edit = {id: data.id};
|
||||
if (Ox.contains(['author', 'place'], key)) {
|
||||
edit[key] = value ? value.split('; ') : [];
|
||||
} else {
|
||||
edit[key] = value;
|
||||
}
|
||||
Ox.print('EDIT METADATA', key, value, edit);
|
||||
oml.api.edit(edit, function(result) {
|
||||
Ox.Request.clearCache('find');
|
||||
oml.$ui.browser.reloadList();
|
||||
//that.updateElement(result.data, $info);
|
||||
oml.$ui.browser.value(
|
||||
result.data.id, key, result.data[key]
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -523,7 +678,7 @@ oml.ui.infoView = function(identifyData) {
|
|||
if (!identifyData) {
|
||||
ui.item && that.updateElement(ui.item);
|
||||
} else {
|
||||
that.updateElement(identifyData, [$cover, $info]);
|
||||
that.updateElement(identifyData, [$icon, $info]);
|
||||
}
|
||||
|
||||
oml.bindEvent({
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue