From 204fdce0cfdf71368ab10abf9ed9b29da7107a57 Mon Sep 17 00:00:00 2001 From: rlx Date: Mon, 11 Jan 2016 19:56:40 +0530 Subject: [PATCH] simplify identify dialog --- static/js/identifyDialog.js | 288 +++++++++--------------------------- 1 file changed, 70 insertions(+), 218 deletions(-) diff --git a/static/js/identifyDialog.js b/static/js/identifyDialog.js index a708167..12dd156 100644 --- a/static/js/identifyDialog.js +++ b/static/js/identifyDialog.js @@ -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 '' + Ox.getObjectById( - lookupItems, data.primaryid[0] - ).title + ': ' + data.primaryid[1] + return '' + data.title + ' ' + 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;