openmedialibrary/static/js/identifyDialog.js

506 lines
17 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,
ids = [
'isbn10', 'isbn13', 'asin', 'lccn', 'oclc', 'olid'
].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
};
}),
keys = [
'title', 'author', 'publisher', 'date'
].map(function(id) {
2014-05-14 18:46:31 +00:00
var key = Ox.getObjectById(oml.config.sortKeys, id);
2014-05-14 09:57:11 +00:00
return {
2014-05-14 18:46:31 +00:00
format: key.format,
2014-05-14 09:57:11 +00:00
id: id,
2014-05-14 18:46:31 +00:00
operator: key.operator,
width: {
title: 288,
author: 224,
publisher: 160,
date: 96 - Ox.UI.SCROLLBAR_SIZE
}[id],
title: key.title,
visible: true
2014-05-14 09:57:11 +00:00
};
}),
2014-05-14 18:46:31 +00:00
originalData = Ox.clone(data, true),
2014-05-16 08:06:11 +00:00
idValue, titleValue,
2014-05-14 23:28:49 +00:00
$idInputs, $idButtons = {},
2014-05-14 18:46:31 +00:00
$idForm = renderIdForm(data),
2014-05-14 09:57:11 +00:00
2014-05-14 23:28:49 +00:00
$idPreview = data.mainid
2014-05-14 18:46:31 +00:00
? oml.ui.infoView(data)
: Ox.Element(),
2014-05-14 09:57:11 +00:00
$idPanel = Ox.SplitPanel({
elements: [
2014-05-14 18:46:31 +00:00
{element: Ox.Element().append($idForm), size: 96},
2014-05-14 23:28:49 +00:00
{element: $idPreview}
2014-05-14 09:57:11 +00:00
],
orientation: 'vertical'
}),
2014-05-14 23:28:49 +00:00
$titleInputs, $titleButtons = {},
2014-05-14 18:46:31 +00:00
2014-05-14 23:28:49 +00:00
$titleForm = renderTitleForm(),
2014-05-14 09:57:11 +00:00
$titlePanel = Ox.SplitPanel({
elements: [
2014-05-14 18:46:31 +00:00
{element: $titleForm, size: 96},
2014-05-14 23:28:49 +00:00
{element: renderResults([])}
2014-05-14 09:57:11 +00:00
],
orientation: 'vertical'
}),
$bar = Ox.Bar({size: 24}),
$buttons = Ox.ButtonGroup({
buttons: [
{id: 'id', title: Ox._('Look Up by ID')},
{id: 'title', title: Ox._('Find by Title')}
],
selectable: true,
selected: 'id'
})
.css({
width: '768px',
padding: '4px 0',
textAlign: 'center'
})
.bindEvent({
change: function(data) {
$innerPanel.options({selected: data.value});
}
})
.appendTo($bar),
$innerPanel = Ox.SlidePanel({
elements: [
{id: 'id', element: $idPanel},
{id: 'title', element: $titlePanel}
],
orientation: 'horizontal',
selected: 'id',
size: 768
}),
$outerPanel = Ox.SplitPanel({
elements: [
{element: $bar, size: 24},
{element: $innerPanel}
],
orientation: 'vertical'
}),
that = Ox.Dialog({
buttons: [
Ox.Button({
id: 'dontupdate',
title: Ox._('No, Don\'t Update')
})
.bindEvent({
click: function() {
that.close();
}
}),
Ox.Button({
disabled: true,
id: 'update',
title: Ox._('Yes, Update')
})
.bindEvent({
click: function() {
2014-05-14 23:28:49 +00:00
var edit = Ox.extend(
{id: data.id},
$innerPanel.options('selected') == 'id'
2014-05-16 08:06:11 +00:00
? idValue
: titleValue
2014-05-14 23:28:49 +00:00
);
that.options({content: Ox.LoadingScreen().start()});
2014-05-16 08:06:11 +00:00
that.disableButtons();
oml.api.edit(edit, function(result) {
2014-05-17 14:42:46 +00:00
Ox.print('EDITED', result.data);
2014-05-14 23:28:49 +00:00
that.close();
2014-05-16 08:06:11 +00:00
Ox.Request.clearCache('find');
oml.$ui.browser.reloadList(true);
Ox.Request.clearCache(data.id);
2014-05-17 11:45:57 +00:00
oml.$ui.infoView.updateElement(result.data);
2014-05-14 23:28:49 +00:00
});
2014-05-14 09:57:11 +00:00
}
})
],
closeButton: true,
content: $outerPanel,
fixedSize: true,
height: 384,
title: Ox._('Identify Book'),
width: 768
});
2014-05-14 18:46:31 +00:00
function findMetadata(data) {
$titlePanel.replaceElement(1, Ox.LoadingScreen().start());
oml.api.findMetadata(data, function(result) {
Ox.print('GOT RESULTS', result.data);
2014-05-14 23:28:49 +00:00
// FIXME: CONCAT HERE
2014-05-14 18:46:31 +00:00
var items = result.data.items.map(function(item, index) {
2014-05-14 23:28:49 +00:00
return Ox.extend({index: (index + 1).toString()}, item);
});
2014-05-14 18:46:31 +00:00
$titlePanel.replaceElement(1, renderResults(items));
});
}
function getMetadata(key, value) {
$idPanel.replaceElement(1, Ox.LoadingScreen().start());
oml.api.getMetadata(Ox.extend({}, key, value), function(result) {
Ox.print('GOT RESULT', result.data);
$idForm = renderIdForm(result.data);
2014-05-14 23:28:49 +00:00
$idPreview = oml.ui.infoView(result.data);
2014-05-14 18:46:31 +00:00
$idPanel
.replaceElement(0, $idForm)
2014-05-14 23:28:49 +00:00
.replaceElement(1, $idPreview);
2014-05-14 18:46:31 +00:00
});
}
2014-05-14 23:28:49 +00:00
function idInputValues(key, values) {
Ox.print('WTF,', $idInputs);
var $input = $idInputs[ids.map(function(id) {
return id.id;
}).indexOf(key)];
if (Ox.isUndefined(values)) {
values = $input.options('elements').map(function($element) {
return $element.value();
});
} else {
$input.options('elements').forEach(function($element, index) {
$element.value(values[index]);
});
}
return values;
}
function titleInputValue(key, value) {
var $input = $titleInputs[keys.map(function(key) {
return key.id;
}).indexOf(key)];
2014-05-14 18:46:31 +00:00
if (Ox.isUndefined(value)) {
value = $input.value();
if (key == 'author') {
value = value ? value.split(', ') : [];
}
} else {
$input.value(
key == 'author' ? (value || []).join(', ') : value
);
}
return value;
}
function isEmpty(data) {
return Ox.every(data, Ox.isEmpty);
}
function isOriginal(data) {
return Ox.every(data, function(value, key) {
return value == originalData[key];
});
}
function renderIdForm(data) {
2014-05-14 23:28:49 +00:00
var $element = Ox.Element();
$idInputs = ids.map(function(id, index) {
return Ox.FormElementGroup({
elements: [
Ox.Checkbox({
overlap: 'right',
title: Ox._(id.title),
value: id.id == data.mainid,
width: 80
})
.bindEvent({
change: function(data) {
var value = $idInputs[index].options('elements')[1].value();
if (data.value) {
if (value) {
2014-05-16 08:06:11 +00:00
idValue = Ox.extend({}, id.id, value);
2014-05-14 23:28:49 +00:00
$idInputs.forEach(function($input, i) {
if (i != index) {
$input.options('elements')[0].value(false);
}
});
getMetadata(id.id, value, function() {
// ...
});
2014-05-14 18:46:31 +00:00
} else {
2014-05-14 23:28:49 +00:00
this.value(false);
2014-05-14 18:46:31 +00:00
}
2014-05-14 23:28:49 +00:00
} else {
this.value(true);
2014-05-14 18:46:31 +00:00
}
2014-05-14 23:28:49 +00:00
}
}),
Ox.Input({
value: data[id.id] || '',
width: 160
})
.bindEvent({
submit: function(data) {
if (data.value) {
2014-05-16 08:06:11 +00:00
idValue = Ox.extend({}, id.id, data.value);
2014-05-14 23:28:49 +00:00
$idInputs.forEach(function($input, i) {
$input.options('elements')[0].options({
disabled: true,
value: i == index
2014-05-14 18:46:31 +00:00
});
2014-05-14 23:28:49 +00:00
$input.options('elements')[1].options({
disabled: true
2014-05-14 18:46:31 +00:00
});
2014-05-14 23:28:49 +00:00
});
getMetadata(id.id, data.value, function() {
// ...
});
2014-05-14 18:46:31 +00:00
}
2014-05-14 23:28:49 +00:00
}
})
],
float: 'left'
})
.css({
position: 'absolute',
left: 16 + Math.floor(index / 2) * 248 + 'px',
top: 16 + (index % 2) * 24 + 'px'
})
.appendTo($element);
});
$idButtons.clear = Ox.Button({
title: Ox._('Clear'),
width: 64
})
.css({
position: 'absolute',
right: '160px',
top: '64px'
})
.bindEvent({
click: function() {
ids.forEach(function(id) {
idInputValues(id.id, [false, '']);
});
updateIdButtons();
}
})
.appendTo($element);
$idButtons.reset = Ox.Button({
disabled: true,
title: Ox._('Reset'),
width: 64
})
.css({
position: 'absolute',
right: '88px',
top: '64px'
})
.bindEvent({
click: function() {
ids.forEach(function(id) {
idInputValues(id.id, [
id.id == originalData.mainid,
originalData[id.id]
]);
});
updateIdButtons();
}
})
.appendTo($element);
$idButtons.find = Ox.Button({
title: Ox._('Look Up'),
width: 64
2014-05-14 18:46:31 +00:00
})
2014-05-14 23:28:49 +00:00
.css({
position: 'absolute',
right: '16px',
top: '64px'
})
.bindEvent({
click: function() {
Ox.print('NOT IMPLEMENTED')
}
})
.appendTo($element);
return $element;
2014-05-14 18:46:31 +00:00
}
function renderResults(items) {
Ox.print('LIST ITEMS::::', items);
var $list = Ox.TableList({
2014-05-16 08:06:11 +00:00
columns: [
{
format: function(value) {
return Ox.getObjectById(ids, value).title;
},
id: 'mainid',
visible: true,
width: 64
2014-05-14 23:28:49 +00:00
},
2014-05-16 08:06:11 +00:00
{
format: function(value, data) {
return data[data.mainid];
},
id: 'index',
visible: true,
width: 128 - Ox.UI.SCROLLBAR_SIZE
}
],
2014-05-14 18:46:31 +00:00
items: items,
2014-05-16 08:06:11 +00:00
keys: ['mainid', 'isbn10', 'isbn13'],
2014-05-14 18:46:31 +00:00
min: 1,
max: 1,
scrollbarVisible: true,
2014-05-16 08:06:11 +00:00
sort: [{key: 'mainid', operator: '+'}],
2014-05-14 18:46:31 +00:00
unique: 'index'
})
.bindEvent({
select: function(data) {
2014-05-16 08:06:11 +00:00
var index = data.ids[0], mainid;
mainid = $list.value(index, 'mainid');
Ox.print('MAINID', 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});
}
});
2014-05-14 18:46:31 +00:00
}
}),
$results = Ox.SplitPanel({
elements: [
2014-05-14 23:28:49 +00:00
{element: $list, 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
});
return $results;
}
2014-05-14 23:28:49 +00:00
function renderTitleForm() {
var $element = Ox.Element();
$titleInputs = keys.map(function(key, index) {
return Ox.Input({
label: Ox._(key.title),
labelWidth: 64,
value: data[key.id],
width: 360
})
.css({
position: 'absolute',
left: index < 2 ? '16px' : '392px',
top: index % 2 == 0 ? '16px' : '40px'
})
.bindEvent({
submit: function(data) {
$titleButtons.find.triggerEvent('click');
}
})
.appendTo($element);
});
$titleButtons.clear = Ox.Button({
title: Ox._('Clear'),
width: 64
})
.css({
position: 'absolute',
right: '160px',
top: '64px'
})
.bindEvent({
click: function() {
keys.forEach(function(key) {
titleInputValue(key.id, '');
});
updateTitleButtons();
}
})
.appendTo($element);
$titleButtons.reset = Ox.Button({
disabled: true,
title: Ox._('Reset'),
width: 64
})
.css({
position: 'absolute',
right: '88px',
top: '64px'
})
.bindEvent({
click: function() {
keys.forEach(function(key) {
titleInputValue(key.id, originalData[key.id]);
});
updateTitleButtons();
}
})
.appendTo($element);
$titleButtons.find = Ox.Button({
title: Ox._('Find'),
width: 64
})
.css({
position: 'absolute',
right: '16px',
top: '64px'
})
.bindEvent({
click: function() {
var data = {};
keys.forEach(function(key) {
data[key.id] = titleInputValue(key.id);
});
findMetadata(data);
}
})
.appendTo($element);
return $element;
}
function updateIdButtons() {
var data = {}, empty, original;
ids.forEach(function(id) {
data[id.id] = idInputValues(id.id)[1];
});
empty = isEmpty(data);
original = isOriginal(data);
$idButtons.clear.options({disabled: empty});
$idButtons.reset.options({disabled: original});
$idButtons.find.options({disabled: empty});
2014-05-16 08:06:11 +00:00
that[original ? 'disableButton' : 'enableButton']('update');
2014-05-14 23:28:49 +00:00
}
function updateTitleButtons() {
2014-05-14 18:46:31 +00:00
var data = {}, empty, original;
keys.forEach(function(key) {
2014-05-14 23:28:49 +00:00
data[key.id] = titleInputValue(key.id);
2014-05-14 18:46:31 +00:00
});
empty = isEmpty(data);
original = isOriginal(data);
2014-05-14 23:28:49 +00:00
$titleButtons.clear.options({disabled: empty});
$titleButtons.reset.options({disabled: original});
$titleButtons.find.options({disabled: empty});
2014-05-16 08:06:11 +00:00
that[original ? 'disableButton' : 'enableButton']('update');
2014-05-14 18:46:31 +00:00
}
2014-05-14 09:57:11 +00:00
return that;
};