simplify identify dialog
This commit is contained in:
parent
e8d23cab02
commit
204fdce0cf
1 changed files with 70 additions and 218 deletions
|
|
@ -4,97 +4,46 @@ oml.ui.identifyDialog = function(data) {
|
|||
|
||||
var ui = oml.user.ui,
|
||||
|
||||
lookupItems = [
|
||||
'isbn', 'asin', 'lccn', 'oclc', 'olid'
|
||||
].map(function(id) {
|
||||
return {
|
||||
id: id,
|
||||
title: Ox.getObjectById(oml.config.itemKeys, id).title
|
||||
};
|
||||
}),
|
||||
selected = data.isbn ? 'isbn' : 'title',
|
||||
|
||||
selected = data.primaryid ? 'lookup' : 'find',
|
||||
$form = Ox.Element(),
|
||||
|
||||
$lookupForm = Ox.Element(),
|
||||
|
||||
$lookupSelect = Ox.Select({
|
||||
items: lookupItems,
|
||||
$select = Ox.Select({
|
||||
items: [
|
||||
{id: 'title', title: Ox._('Title, Author etc.')},
|
||||
{id: 'isbn', title: Ox._('ISBN')},
|
||||
{id: 'id', title: Ox._('ID')}
|
||||
],
|
||||
overlap: 'right',
|
||||
max: 1,
|
||||
min: 1,
|
||||
value: data.primaryid ? data.primaryid[0] : 'isbn',
|
||||
style: 'squared',
|
||||
value: selected,
|
||||
width: 128
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
$lookupInput.focusInput(true);
|
||||
$input.options({
|
||||
value: getValue(data.value)
|
||||
}).focusInput(true);
|
||||
}
|
||||
}),
|
||||
|
||||
$lookupInput = Ox.Input({
|
||||
value: data.primaryid ? data.primaryid[1] : '',
|
||||
$input = Ox.Input({
|
||||
style: 'squared',
|
||||
value: getValue($select.value()),
|
||||
width: 480
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
// ...
|
||||
},
|
||||
submit: lookupMetadata
|
||||
}),
|
||||
|
||||
$lookupButton = Ox.Button({
|
||||
overlap: 'left',
|
||||
title: Ox._('Look Up'),
|
||||
width: 128
|
||||
})
|
||||
.bindEvent({
|
||||
click: lookupMetadata
|
||||
}),
|
||||
|
||||
$lookupElement = Ox.FormElementGroup({
|
||||
elements: [
|
||||
Ox.FormElementGroup({
|
||||
elements: [
|
||||
$lookupSelect,
|
||||
$lookupInput
|
||||
],
|
||||
float: 'left'
|
||||
}),
|
||||
$lookupButton
|
||||
],
|
||||
float: 'right'
|
||||
})
|
||||
.css({
|
||||
margin: '16px'
|
||||
})
|
||||
.appendTo($lookupForm),
|
||||
|
||||
$lookupPreview = data.primaryid
|
||||
? oml.ui.infoView(data)
|
||||
: Ox.Element(),
|
||||
|
||||
$lookupPanel = Ox.SplitPanel({
|
||||
elements: [
|
||||
{element: $lookupForm, size: 48},
|
||||
{element: $lookupPreview}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
}),
|
||||
|
||||
$findForm = Ox.Element(),
|
||||
|
||||
$findInput = Ox.Input({
|
||||
label: Ox._('Title, Author etc.'),
|
||||
labelWidth: 128,
|
||||
width: 608,
|
||||
value: Ox.decodeHTMLEntities([data.title].concat(data.author || []).join(' '))
|
||||
})
|
||||
.bindEvent({
|
||||
submit: findMetadata
|
||||
}),
|
||||
|
||||
$findButton = Ox.Button({
|
||||
$button = Ox.Button({
|
||||
overlap: 'left',
|
||||
style: 'squared',
|
||||
title: Ox._('Find'),
|
||||
width: 128
|
||||
})
|
||||
|
|
@ -102,103 +51,35 @@ oml.ui.identifyDialog = function(data) {
|
|||
click: findMetadata
|
||||
}),
|
||||
|
||||
$findElement = Ox.FormElementGroup({
|
||||
$formElement = Ox.FormElementGroup({
|
||||
elements: [
|
||||
$findInput,
|
||||
$findButton
|
||||
Ox.FormElementGroup({
|
||||
elements: [
|
||||
$select,
|
||||
$input
|
||||
],
|
||||
float: 'left'
|
||||
}),
|
||||
$button
|
||||
],
|
||||
float: 'right'
|
||||
})
|
||||
.css({
|
||||
margin: '16px'
|
||||
})
|
||||
.appendTo($findForm),
|
||||
.css({margin: '16px'})
|
||||
.appendTo($form),
|
||||
|
||||
$findList,
|
||||
$list,
|
||||
|
||||
$findPanel = Ox.SplitPanel({
|
||||
$outerPanel = Ox.SplitPanel({
|
||||
elements: [
|
||||
{element: $findForm, size: 48},
|
||||
{element: $form, size: 48},
|
||||
{element: renderResults([])}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
}),
|
||||
|
||||
$bar = Ox.Bar({size: 24}),
|
||||
|
||||
$buttons = Ox.ButtonGroup({
|
||||
buttons: [
|
||||
{id: 'lookup', title: Ox._('Look Up by ID')},
|
||||
{id: 'find', title: Ox._('Find by Title')}
|
||||
],
|
||||
selectable: true,
|
||||
value: selected
|
||||
})
|
||||
.css({
|
||||
width: '768px',
|
||||
padding: '4px 0',
|
||||
textAlign: 'center'
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
selected = data.value;
|
||||
$innerPanel.options({selected: selected});
|
||||
$updateButton.options({
|
||||
disabled: selected == 'find' && !$findList
|
||||
});
|
||||
}
|
||||
})
|
||||
.appendTo($bar),
|
||||
|
||||
$innerPanel = Ox.SlidePanel({
|
||||
elements: [
|
||||
{id: 'lookup', element: $lookupPanel},
|
||||
{id: 'find', element: $findPanel}
|
||||
],
|
||||
orientation: 'horizontal',
|
||||
selected: selected,
|
||||
size: 768
|
||||
}),
|
||||
|
||||
$outerPanel = Ox.SplitPanel({
|
||||
elements: [
|
||||
{element: $bar, size: 24},
|
||||
{element: $innerPanel}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
}),
|
||||
|
||||
$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')
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}),
|
||||
|
||||
$dontUpdateButton = Ox.Button({
|
||||
id: 'dontupdate',
|
||||
style: 'squared',
|
||||
title: Ox._('No, Don\'t Update')
|
||||
})
|
||||
.bindEvent({
|
||||
|
|
@ -210,6 +91,7 @@ oml.ui.identifyDialog = function(data) {
|
|||
$updateButton = Ox.Button({
|
||||
disabled: true,
|
||||
id: 'update',
|
||||
style: 'squared',
|
||||
title: Ox._('Yes, Update')
|
||||
})
|
||||
.bindEvent({
|
||||
|
|
@ -222,8 +104,8 @@ oml.ui.identifyDialog = function(data) {
|
|||
$lookupInput.value()
|
||||
];
|
||||
} else {
|
||||
primaryId = $findList.value(
|
||||
$findList.options('selected')[0],
|
||||
primaryId = $list.value(
|
||||
$list.options('selected')[0],
|
||||
'primaryid'
|
||||
);
|
||||
}
|
||||
|
|
@ -263,87 +145,67 @@ oml.ui.identifyDialog = function(data) {
|
|||
width: 768
|
||||
});
|
||||
|
||||
$($metadataSelect.find('.OxButton')[0]).css({margin: 0});
|
||||
$metadataSelect.appendTo($(that.find('.OxBar')[2]));
|
||||
|
||||
function disableButtons() {
|
||||
$lookupSelect.options('items').forEach(function(item) {
|
||||
$lookupSelect.disableItem(item.id);
|
||||
});
|
||||
$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);
|
||||
$select.options('items').forEach(function(item) {
|
||||
$select.disableItem(item.id);
|
||||
});
|
||||
$input.options({disabled: true});
|
||||
$button.options({disabled: true});
|
||||
$updateButton.options({disabled: true});
|
||||
}
|
||||
|
||||
function enableButtons() {
|
||||
$lookupSelect.options('items').forEach(function(item) {
|
||||
$select.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);
|
||||
});
|
||||
$input.options({disabled: false});
|
||||
$button.options({disabled: false});
|
||||
$updateButton.options({disabled: false});
|
||||
}
|
||||
|
||||
function findMetadata() {
|
||||
disableButtons();
|
||||
$findPanel.replaceElement(1, Ox.LoadingScreen().start());
|
||||
$outerPanel.replaceElement(1, Ox.LoadingScreen().start());
|
||||
oml.api.findMetadata({
|
||||
query: $findInput.value()
|
||||
key: $select.value(),
|
||||
value: $input.value()
|
||||
}, function(result) {
|
||||
var items = result.data.items.map(function(item, index) {
|
||||
return Ox.extend({index: index.toString()}, item);
|
||||
});
|
||||
enableButtons();
|
||||
$updateButton.options({disabled: !items.length});
|
||||
$findPanel.replaceElement(1, renderResults(items));
|
||||
$outerPanel.replaceElement(1, renderResults(items));
|
||||
});
|
||||
}
|
||||
|
||||
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);
|
||||
});
|
||||
function getValue(key) {
|
||||
return key == 'title' ? Ox.decodeHTMLEntities(
|
||||
[data.title || ''].concat(data.author || []).join(' ')
|
||||
)
|
||||
: data.value == 'isbn' ? (data.isbn || '')
|
||||
: data.id
|
||||
}
|
||||
|
||||
function renderResults(items) {
|
||||
var $resultsPanel;
|
||||
var $innerPanel;
|
||||
if (items.length) {
|
||||
$findList = Ox.TableList({
|
||||
$list = Ox.TableList({
|
||||
columns: [{
|
||||
format: function(value, data) {
|
||||
return '<b>' + Ox.getObjectById(
|
||||
lookupItems, data.primaryid[0]
|
||||
).title + ':</b> ' + data.primaryid[1]
|
||||
return '<b>' + data.title + '</b> ' + data.author
|
||||
},
|
||||
id: 'index',
|
||||
visible: true,
|
||||
width: 192 - Ox.UI.SCROLLBAR_SIZE
|
||||
}],
|
||||
items: items,
|
||||
keys: ['primaryid'].concat(lookupItems.map(function(item) {
|
||||
return item.id;
|
||||
})),
|
||||
keys: [
|
||||
'title', 'author',
|
||||
'publisher', 'place', 'date',
|
||||
'series', 'edition', 'language', 'pages',
|
||||
'categories', 'isbn', 'description', 'tableofcontents'
|
||||
],
|
||||
min: 1,
|
||||
max: 1,
|
||||
scrollbarVisible: true,
|
||||
|
|
@ -353,35 +215,25 @@ oml.ui.identifyDialog = function(data) {
|
|||
})
|
||||
.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));
|
||||
});
|
||||
var index = data.ids[0];
|
||||
$innerPanel.replaceElement(1, oml.ui.infoView($list.value(index)));
|
||||
}
|
||||
}),
|
||||
$resultsPanel = Ox.SplitPanel({
|
||||
$innerPanel = Ox.SplitPanel({
|
||||
elements: [
|
||||
{element: $findList || Ox.Element(), size: 192},
|
||||
{element: $list || Ox.Element(), size: 192},
|
||||
{element: Ox.Element()}
|
||||
],
|
||||
orientation: 'horizontal'
|
||||
});
|
||||
setTimeout(function() {
|
||||
$findList.triggerEvent('select', {ids: ['0']});
|
||||
$list.triggerEvent('select', {ids: ['0']});
|
||||
});
|
||||
} else {
|
||||
$findList = void 0;
|
||||
$resultsPanel = Ox.Element();
|
||||
$list = null;
|
||||
$innerPanel = Ox.Element();
|
||||
}
|
||||
return $resultsPanel;
|
||||
return $innerPanel;
|
||||
}
|
||||
|
||||
return that;
|
||||
|
|
|
|||
Loading…
Reference in a new issue