0x2620/openmedialibrary
1
0
Fork 0
Code Issues 131 Pull requests Releases Wiki Activity

simplify identify dialog

Browse source
This commit is contained in:
rlx 2016-01-11 19:56:40 +05:30
parent e8d23cab02
commit 204fdce0cf
1 changed files with 70 additions and 218 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

288
static/js/identifyDialog.js
View file

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