meta
This commit is contained in:
parent
d385853186
commit
0e6b9533b4
12 changed files with 521 additions and 154 deletions
|
|
@ -9,108 +9,130 @@ oml.ui.identifyDialog = function(data) {
|
|||
].map(function(id) {
|
||||
return {
|
||||
id: id,
|
||||
title: Ox._(Ox.getObjectById(oml.config.itemKeys, id).title)
|
||||
title: Ox.getObjectById(oml.config.itemKeys, id).title
|
||||
};
|
||||
}),
|
||||
|
||||
keys = [
|
||||
'title', 'author', 'publisher', 'date'
|
||||
].map(function(id) {
|
||||
var key = Ox.getObjectById(oml.config.sortKeys, id);
|
||||
return {
|
||||
format: key.format,
|
||||
id: id,
|
||||
title: Ox._(Ox.getObjectById(oml.config.itemKeys, id).title)
|
||||
operator: key.operator,
|
||||
width: {
|
||||
title: 288,
|
||||
author: 224,
|
||||
publisher: 160,
|
||||
date: 96 - Ox.UI.SCROLLBAR_SIZE
|
||||
}[id],
|
||||
title: key.title,
|
||||
visible: true
|
||||
};
|
||||
}),
|
||||
|
||||
$input = Ox.FormElementGroup({
|
||||
elements: [
|
||||
Ox.Select({
|
||||
items: ids,
|
||||
overlap: 'right',
|
||||
value: 'isbn10',
|
||||
width: 128
|
||||
}),
|
||||
Ox.Input({
|
||||
value: data['isbn10'] || '',
|
||||
width: 610
|
||||
})
|
||||
]
|
||||
})
|
||||
.css({margin: '16px'}),
|
||||
originalData = Ox.clone(data, true),
|
||||
|
||||
$preview = Ox.Element(),
|
||||
$idForm = renderIdForm(data),
|
||||
|
||||
$preview = data.mainid
|
||||
? oml.ui.infoView(data)
|
||||
: Ox.Element(),
|
||||
|
||||
$idPanel = Ox.SplitPanel({
|
||||
elements: [
|
||||
{element: Ox.Element().append($input), size: 48},
|
||||
{element: Ox.Element().append($idForm), size: 96},
|
||||
{element: $preview}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
}),
|
||||
|
||||
$form = Ox.Form({
|
||||
items: keys.map(function(key) {
|
||||
return Ox.Input({
|
||||
id: key.id,
|
||||
labelWidth: 128,
|
||||
label: key.title,
|
||||
value: key == 'author'
|
||||
? (data[key.id] || []).join(', ')
|
||||
: data[key.id],
|
||||
width: 736
|
||||
});
|
||||
})
|
||||
})
|
||||
.css({padding: '16px'})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
Ox.print('FORM CHANGE', data);
|
||||
}
|
||||
}),
|
||||
$titleForm = Ox.Element(),
|
||||
|
||||
$list = Ox.TableList({
|
||||
columns: [
|
||||
{
|
||||
id: 'index'
|
||||
},
|
||||
{
|
||||
id: 'title',
|
||||
visible: true,
|
||||
width: 288,
|
||||
},
|
||||
{
|
||||
id: 'author',
|
||||
visible: true,
|
||||
width: 224
|
||||
},
|
||||
{
|
||||
id: 'publisher',
|
||||
visible: true,
|
||||
width: 160
|
||||
},
|
||||
{
|
||||
id: 'date',
|
||||
visible: true,
|
||||
width: 96
|
||||
$inputs = 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) {
|
||||
$findButton.triggerEvent('click');
|
||||
}
|
||||
],
|
||||
items: [],
|
||||
max: 1,
|
||||
sort: [{key: 'index', operator: '+'}],
|
||||
unique: 'index'
|
||||
})
|
||||
.appendTo($titleForm);
|
||||
}),
|
||||
|
||||
$clearButton = Ox.Button({
|
||||
title: Ox._('Clear'),
|
||||
width: 64
|
||||
})
|
||||
.css({
|
||||
position: 'absolute',
|
||||
right: '160px',
|
||||
top: '64px'
|
||||
})
|
||||
.bindEvent({
|
||||
select: function(data) {
|
||||
$that.options('buttons')[1].options({
|
||||
disabled: data.ids.length == 0
|
||||
click: function() {
|
||||
keys.forEach(function(key) {
|
||||
inputValue(key.id, '');
|
||||
});
|
||||
updateButtons();
|
||||
}
|
||||
}),
|
||||
})
|
||||
.appendTo($titleForm),
|
||||
|
||||
$resetButton = Ox.Button({
|
||||
disabled: true,
|
||||
title: Ox._('Reset'),
|
||||
width: 64
|
||||
})
|
||||
.css({
|
||||
position: 'absolute',
|
||||
right: '88px',
|
||||
top: '64px'
|
||||
})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
keys.forEach(function(key) {
|
||||
inputValue(key.id, originalData[key.id]);
|
||||
});
|
||||
updateButtons();
|
||||
}
|
||||
})
|
||||
.appendTo($titleForm),
|
||||
|
||||
$findButton = 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] = inputValue(key.id);
|
||||
});
|
||||
findMetadata(data);
|
||||
}
|
||||
})
|
||||
.appendTo($titleForm),
|
||||
|
||||
$titlePanel = Ox.SplitPanel({
|
||||
elements: [
|
||||
{element: Ox.Element().append($form), size: 120},
|
||||
{element: $list}
|
||||
{element: $titleForm, size: 96},
|
||||
{element: renderResults([Ox.extend({index: '0'}, data)])}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
}),
|
||||
|
|
@ -186,6 +208,233 @@ oml.ui.identifyDialog = function(data) {
|
|||
width: 768
|
||||
});
|
||||
|
||||
function findMetadata(data) {
|
||||
$titlePanel.replaceElement(1, Ox.LoadingScreen().start());
|
||||
oml.api.findMetadata(data, function(result) {
|
||||
Ox.print('GOT RESULTS', result.data);
|
||||
var items = result.data.items.map(function(item, index) {
|
||||
return Ox.extend({index: index.toString()}, item);
|
||||
}).concat([
|
||||
Ox.extend({index: result.data.items.length.toString()}, data)
|
||||
]);
|
||||
$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);
|
||||
$preview = oml.ui.infoView(result.data);
|
||||
$idPanel
|
||||
.replaceElement(0, $idForm)
|
||||
.replaceElement(1, $preview);
|
||||
});
|
||||
}
|
||||
|
||||
function inputValue(key, value) {
|
||||
// FIXME: UNELEGANT
|
||||
Ox.print('INPUTVALUE', key, value)
|
||||
var $input = $inputs[[
|
||||
'title', 'author', 'publisher', 'date'
|
||||
].indexOf(key)];
|
||||
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) {
|
||||
var $element = Ox.Element(),
|
||||
$elements = 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 = $elements[index].options('elements')[1].value()
|
||||
if (data.value) {
|
||||
if (value) {
|
||||
$elements.forEach(function($element, i) {
|
||||
if (i != index) {
|
||||
$elements[i].options('elements')[0].value(false);
|
||||
}
|
||||
});
|
||||
getMetadata(id.id, value, function() {
|
||||
// ...
|
||||
});
|
||||
} else {
|
||||
this.value(false);
|
||||
}
|
||||
} else {
|
||||
this.value(true);
|
||||
}
|
||||
}
|
||||
}),
|
||||
Ox.Input({
|
||||
value: data[id.id] || '',
|
||||
width: 160
|
||||
})
|
||||
.bindEvent({
|
||||
submit: function(data) {
|
||||
if (data.value) {
|
||||
$elements.forEach(function($element, i) {
|
||||
$element.options('elements')[0].options({
|
||||
disabled: true,
|
||||
value: i == index
|
||||
});
|
||||
$element.options('elements')[1].options({
|
||||
disabled: true
|
||||
});
|
||||
});
|
||||
getMetadata(id.id, data.value, function() {
|
||||
// ...
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
],
|
||||
float: 'left'
|
||||
})
|
||||
.css({
|
||||
position: 'absolute',
|
||||
left: 16 + Math.floor(index / 2) * 248 + 'px',
|
||||
top: 16 + (index % 2) * 24 + 'px'
|
||||
})
|
||||
.appendTo($element);
|
||||
}),
|
||||
$resetButton = Ox.Button({
|
||||
disabled: true,
|
||||
title: Ox._('Reset'),
|
||||
width: 64
|
||||
})
|
||||
.css({
|
||||
position: 'absolute',
|
||||
right: '16px',
|
||||
top: '64px'
|
||||
})
|
||||
.bindEvent({
|
||||
click: function() {
|
||||
/*
|
||||
keys.forEach(function(key) {
|
||||
inputValue(key.id, originalData[key.id]);
|
||||
});
|
||||
updateButtons();
|
||||
*/
|
||||
}
|
||||
})
|
||||
.appendTo($element);
|
||||
return $element;
|
||||
Ox.print('???', data.mainid)
|
||||
return Ox.Form({
|
||||
items: Ox.flatten(ids.map(function(id) {
|
||||
return [
|
||||
Ox.Checkbox({
|
||||
disabled: !data[id.id] || id.id == data.mainid,
|
||||
id: id.id + 'Checkbox',
|
||||
title: Ox._(id.title),
|
||||
value: id.id == data.mainid,
|
||||
width: 128
|
||||
})
|
||||
.bindEvent({
|
||||
change: function() {
|
||||
getMetadata(id.id, data[id.id]);
|
||||
}
|
||||
}),
|
||||
Ox.Input({
|
||||
id: id.id + 'Input',
|
||||
value: data[id.id] || '',
|
||||
width: 128
|
||||
})
|
||||
.css({marginBottom: '16px'})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
if (data.value) {
|
||||
getMetadata(id.id, data.value, function() {
|
||||
//...
|
||||
});
|
||||
} else {
|
||||
Ox.print('this', this)
|
||||
}
|
||||
}
|
||||
})
|
||||
];
|
||||
}))
|
||||
})
|
||||
.css({margin: '16px'});
|
||||
return $form;
|
||||
}
|
||||
|
||||
function renderResults(items) {
|
||||
Ox.print('LIST ITEMS::::', items);
|
||||
var $list = Ox.TableList({
|
||||
columns: Ox.clone(keys, true),
|
||||
items: items,
|
||||
min: 1,
|
||||
max: 1,
|
||||
scrollbarVisible: true,
|
||||
selected: ['0'],
|
||||
sort: [{key: 'index', operator: '+'}],
|
||||
unique: 'index'
|
||||
})
|
||||
.bindEvent({
|
||||
select: function(data) {
|
||||
var index = data.ids[0];
|
||||
data = Ox.getObject(items, 'index', index);
|
||||
$results.replaceElement(1, Ox.LoadingScreen().start());
|
||||
Ox.print('OLID', data.olid);
|
||||
oml.api.getMetadata({olid: data.olid}, function(result) {
|
||||
Ox.print('#### GOT DATA', result.data);
|
||||
$results.replaceElement(1, oml.ui.infoView(result.data));
|
||||
that.options('buttons')[1].options({disabled: false});
|
||||
});
|
||||
}
|
||||
}),
|
||||
$results = Ox.SplitPanel({
|
||||
elements: [
|
||||
{element: $list, size: 80},
|
||||
{element: oml.ui.infoView(items[0])}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
});
|
||||
return $results;
|
||||
}
|
||||
|
||||
function updateButtons() {
|
||||
var data = {}, empty, original;
|
||||
keys.forEach(function(key) {
|
||||
data[key.id] = inputValue(key.id);
|
||||
});
|
||||
empty = isEmpty(data);
|
||||
original = isOriginal(data);
|
||||
$clearButton.options({disabled: empty});
|
||||
$resetButton.options({disabled: original});
|
||||
$findButton.options({disabled: empty});
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue