openmedialibrary/static/js/identifyDialog.js

389 lines
12 KiB
JavaScript
Raw Normal View History

2014-05-14 09:57:11 +00:00
'use strict';
oml.ui.identifyDialog = function(data) {
var ui = oml.user.ui,
2014-05-21 00:02:39 +00:00
lookupItems = [
'isbn', 'asin', 'lccn', 'oclc', 'olid'
2014-05-14 09:57:11 +00:00
].map(function(id) {
return {
id: id,
2014-05-14 18:46:31 +00:00
title: Ox.getObjectById(oml.config.itemKeys, id).title
2014-05-14 09:57:11 +00:00
};
}),
2014-05-21 00:02:39 +00:00
selected = data.primaryid ? 'lookup' : 'find',
2014-05-14 09:57:11 +00:00
2014-05-21 00:02:39 +00:00
$lookupForm = Ox.Element(),
2014-05-14 18:46:31 +00:00
2014-05-21 00:02:39 +00:00
$lookupSelect = Ox.Select({
items: lookupItems,
overlap: 'right',
max: 1,
min: 1,
value: data.primaryid ? data.primaryid[0] : 'isbn',
width: 128
})
.bindEvent({
change: function(data) {
$lookupInput.focusInput(true);
}
}),
2014-05-18 23:24:04 +00:00
2014-05-21 00:02:39 +00:00
$lookupInput = Ox.Input({
value: data.primaryid ? data.primaryid[1] : '',
width: 480
})
.bindEvent({
change: function(data) {
// ...
},
submit: lookupMetadata
}),
2014-05-14 23:28:49 +00:00
2014-05-21 00:02:39 +00:00
$lookupButton = Ox.Button({
overlap: 'left',
title: Ox._('Look Up'),
width: 128
})
.bindEvent({
click: lookupMetadata
}),
2014-05-14 23:28:49 +00:00
2014-05-21 00:02:39 +00:00
$lookupElement = Ox.FormElementGroup({
elements: [
Ox.FormElementGroup({
elements: [
$lookupSelect,
$lookupInput
],
float: 'left'
}),
$lookupButton
],
float: 'right'
})
.css({
margin: '16px'
})
.appendTo($lookupForm),
2014-05-14 09:57:11 +00:00
2014-05-21 00:02:39 +00:00
$lookupPreview = data.primaryid
2014-05-14 18:46:31 +00:00
? oml.ui.infoView(data)
: Ox.Element(),
2014-05-14 09:57:11 +00:00
2014-05-21 00:02:39 +00:00
$lookupPanel = Ox.SplitPanel({
2014-05-14 09:57:11 +00:00
elements: [
2014-05-21 00:02:39 +00:00
{element: $lookupForm, size: 48},
{element: $lookupPreview}
2014-05-14 09:57:11 +00:00
],
orientation: 'vertical'
}),
2014-05-21 00:02:39 +00:00
$findForm = Ox.Element(),
$findInput = Ox.Input({
label: Ox._('Title, Author etc.'),
labelWidth: 128,
width: 608,
2016-01-05 05:29:09 +00:00
value: Ox.decodeHTMLEntities([data.title].concat(data.author || []).join(' '))
2014-05-21 00:02:39 +00:00
})
.bindEvent({
submit: findMetadata
}),
$findButton = Ox.Button({
overlap: 'left',
title: Ox._('Find'),
width: 128
})
.bindEvent({
click: findMetadata
}),
$findElement = Ox.FormElementGroup({
elements: [
$findInput,
$findButton
],
float: 'right'
})
.css({
margin: '16px'
})
.appendTo($findForm),
2014-05-14 18:46:31 +00:00
2014-05-21 00:02:39 +00:00
$findList,
2014-05-14 09:57:11 +00:00
2014-05-21 00:02:39 +00:00
$findPanel = Ox.SplitPanel({
2014-05-14 09:57:11 +00:00
elements: [
2014-05-21 00:02:39 +00:00
{element: $findForm, size: 48},
{element: renderResults([])}
2014-05-14 09:57:11 +00:00
],
orientation: 'vertical'
}),
$bar = Ox.Bar({size: 24}),
$buttons = Ox.ButtonGroup({
buttons: [
2014-05-21 00:02:39 +00:00
{id: 'lookup', title: Ox._('Look Up by ID')},
{id: 'find', title: Ox._('Find by Title')}
2014-05-14 09:57:11 +00:00
],
selectable: true,
2014-05-18 23:24:04 +00:00
value: selected
2014-05-14 09:57:11 +00:00
})
.css({
width: '768px',
padding: '4px 0',
textAlign: 'center'
})
.bindEvent({
change: function(data) {
2014-05-18 23:24:04 +00:00
selected = data.value;
$innerPanel.options({selected: selected});
2014-05-21 00:02:39 +00:00
$updateButton.options({
disabled: selected == 'find' && !$findList
});
2014-05-14 09:57:11 +00:00
}
})
.appendTo($bar),
$innerPanel = Ox.SlidePanel({
elements: [
2014-05-21 00:02:39 +00:00
{id: 'lookup', element: $lookupPanel},
{id: 'find', element: $findPanel}
2014-05-14 09:57:11 +00:00
],
orientation: 'horizontal',
2014-05-18 23:24:04 +00:00
selected: selected,
2014-05-14 09:57:11 +00:00
size: 768
}),
$outerPanel = Ox.SplitPanel({
elements: [
{element: $bar, size: 24},
{element: $innerPanel}
],
orientation: 'vertical'
}),
2014-05-21 00:02:39 +00:00
$metadataSelect = Ox.Select({
items: [
{id: 'original', title: Ox._('Show Original Metadata')},
{id: 'edited', title: Ox._('Show Edited Metadata')}
],
max: 1,
min: 1,
value: 'edited',
width: 192
})
.css({
margin: '4px'
})
.bindEvent({
change: function(data) {
if (selected == 'lookup') {
if (!$lookupButton.options('disabled')) {
$lookupButton.triggerEvent('click');
}
} else {
if ($findList) {
$findList.triggerEvent('select', {
ids: $findList.options('selected')
});
}
2014-05-14 09:57:11 +00:00
}
2014-05-21 00:02:39 +00:00
}
}),
$dontUpdateButton = Ox.Button({
id: 'dontupdate',
title: Ox._('No, Don\'t Update')
})
.bindEvent({
click: function() {
that.close();
}
}),
$updateButton = Ox.Button({
disabled: true,
id: 'update',
title: Ox._('Yes, Update')
})
.bindEvent({
click: function() {
// FIXME: Wrong if user messes with lookup elements before clicking update button
var primaryId;
if (selected == 'lookup') {
primaryId = [
$lookupSelect.value(),
$lookupInput.value()
];
} else {
primaryId = $findList.value(
$findList.options('selected')[0],
'primaryid'
2014-05-14 23:28:49 +00:00
);
2014-05-21 00:02:39 +00:00
}
that.options({content: Ox.LoadingScreen().start()});
that.disableButtons();
oml.api.edit({
id: data.id,
primaryid: primaryId
}, function(result) {
(
$metadataSelect.value() == 'original'
? oml.api.resetMetadata : Ox.noop
)({id: ui.item}, function(result) {
2014-05-16 08:06:11 +00:00
Ox.Request.clearCache('find');
oml.$ui.browser.reloadList(true);
oml.$ui.list.reloadList(true);
2014-05-16 08:06:11 +00:00
Ox.Request.clearCache(data.id);
2014-05-19 20:58:00 +00:00
oml.$ui.infoView.updateElement(data.id);
2015-04-21 17:57:27 +00:00
that.close();
2014-05-14 23:28:49 +00:00
});
2014-05-21 00:02:39 +00:00
});
}
}),
that = Ox.Dialog({
buttons: [
$dontUpdateButton,
$updateButton
2014-05-14 09:57:11 +00:00
],
closeButton: true,
content: $outerPanel,
fixedSize: true,
height: 384,
2014-05-18 23:24:04 +00:00
removeOnClose: true,
2014-05-14 09:57:11 +00:00
title: Ox._('Identify Book'),
width: 768
});
2014-05-21 00:02:39 +00:00
$($metadataSelect.find('.OxButton')[0]).css({margin: 0});
$metadataSelect.appendTo($(that.find('.OxBar')[2]));
2014-05-18 23:24:04 +00:00
function disableButtons() {
2014-05-21 00:02:39 +00:00
$lookupSelect.options('items').forEach(function(item) {
$lookupSelect.disableItem(item.id);
2014-05-18 23:24:04 +00:00
});
2014-05-21 00:02:39 +00:00
$lookupInput.options({disabled: true});
$lookupButton.options({disabled: true});
$findInput.options({disabled: true});
$findButton.options({disabled: true});
$metadataSelect.options('items').forEach(function(item) {
$metadataSelect.disableItem(item.id);
2014-05-14 18:46:31 +00:00
});
2014-05-21 00:02:39 +00:00
$updateButton.options({disabled: true});
2014-05-14 18:46:31 +00:00
}
2014-05-21 00:02:39 +00:00
function enableButtons() {
$lookupSelect.options('items').forEach(function(item) {
$lookupSelect.enableItem(item.id);
});
$lookupInput.options({disabled: false});
$lookupButton.options({disabled: false});
$findInput.options({disabled: false});
$findButton.options({disabled: false});
$metadataSelect.options('items').forEach(function(item) {
$metadataSelect.enableItem(item.id);
2014-05-14 18:46:31 +00:00
});
2014-05-21 00:02:39 +00:00
$updateButton.options({disabled: false});
2014-05-14 18:46:31 +00:00
}
2014-05-21 00:02:39 +00:00
function findMetadata() {
disableButtons();
$findPanel.replaceElement(1, Ox.LoadingScreen().start());
oml.api.findMetadata({
query: $findInput.value()
}, function(result) {
var items = result.data.items.map(function(item, index) {
return Ox.extend({index: index.toString()}, item);
2014-05-14 23:28:49 +00:00
});
2014-05-21 00:02:39 +00:00
enableButtons();
$updateButton.options({disabled: !items.length});
$findPanel.replaceElement(1, renderResults(items));
2014-05-14 18:46:31 +00:00
});
}
2014-05-21 00:02:39 +00:00
function lookupMetadata() {
disableButtons();
$lookupPanel.replaceElement(1, Ox.LoadingScreen().start());
oml.api.getMetadata(Ox.extend(
{includeEdits: $metadataSelect.value() == 'edited'},
$lookupSelect.value(),
$lookupInput.value()
), function(result) {
enableButtons();
$updateButton.options({disabled: Ox.isEmpty(data)});
$lookupPreview = Ox.isEmpty(data)
? Ox.Element()
: oml.ui.infoView(result.data);
$lookupPanel.replaceElement(1, $lookupPreview);
2014-05-14 23:28:49 +00:00
});
2014-05-14 18:46:31 +00:00
}
function renderResults(items) {
2014-05-21 00:02:39 +00:00
var $resultsPanel;
if (items.length) {
$findList = Ox.TableList({
columns: [{
2014-05-16 08:06:11 +00:00
format: function(value, data) {
2014-05-21 00:02:39 +00:00
return '<b>' + Ox.getObjectById(
lookupItems, data.primaryid[0]
).title + ':</b> ' + data.primaryid[1]
2014-05-16 08:06:11 +00:00
},
2014-05-21 00:02:39 +00:00
id: 'index',
2014-05-16 08:06:11 +00:00
visible: true,
2014-05-19 20:58:00 +00:00
width: 192 - Ox.UI.SCROLLBAR_SIZE
2014-05-21 00:02:39 +00:00
}],
items: items,
keys: ['primaryid'].concat(lookupItems.map(function(item) {
return item.id;
})),
min: 1,
max: 1,
scrollbarVisible: true,
selected: ['0'],
sort: [{key: 'index', operator: '+'}],
unique: 'index'
})
.bindEvent({
select: function(data) {
var index = data.ids[0],
primaryId = $findList.value(index, 'primaryid');
disableButtons();
$resultsPanel.replaceElement(1, Ox.LoadingScreen().start());
oml.api.getMetadata(Ox.extend(
{includeEdits: $metadataSelect.value() == 'edited'},
primaryId[0],
primaryId[1]
), function(result) {
enableButtons();
$resultsPanel.replaceElement(1, oml.ui.infoView(result.data));
2014-05-19 20:58:00 +00:00
});
}
2014-05-21 00:02:39 +00:00
}),
$resultsPanel = Ox.SplitPanel({
2014-05-14 18:46:31 +00:00
elements: [
2014-05-21 00:02:39 +00:00
{element: $findList || Ox.Element(), size: 192},
2014-05-16 08:06:11 +00:00
{element: Ox.Element()}
2014-05-14 18:46:31 +00:00
],
2014-05-14 23:28:49 +00:00
orientation: 'horizontal'
2014-05-14 18:46:31 +00:00
});
2014-05-21 00:02:39 +00:00
setTimeout(function() {
$findList.triggerEvent('select', {ids: ['0']});
});
2014-05-18 23:24:04 +00:00
} else {
2014-05-21 00:02:39 +00:00
$findList = void 0;
$resultsPanel = Ox.Element();
2014-05-18 23:24:04 +00:00
}
2014-05-21 00:02:39 +00:00
return $resultsPanel;
2014-05-14 18:46:31 +00:00
}
2014-05-14 09:57:11 +00:00
return that;
2014-05-18 03:01:24 +00:00
};