From f05335d4e58c167a40311a9c7be1f45b03b23a95 Mon Sep 17 00:00:00 2001 From: rlx Date: Mon, 11 Jan 2016 19:03:15 +0530 Subject: [PATCH] update info view --- static/js/infoView.js | 188 ++++++++++++++++++------------------------ 1 file changed, 82 insertions(+), 106 deletions(-) diff --git a/static/js/infoView.js b/static/js/infoView.js index dd24d75..a7a218f 100644 --- a/static/js/infoView.js +++ b/static/js/infoView.js @@ -1,25 +1,21 @@ 'use strict'; -oml.ui.infoView = function(identifyData) { +oml.ui.infoView = function(externalData, isMixed) { + + isMixed = isMixed || {}; var ui = oml.user.ui, arrayKeys = ['author', 'place', 'publisher', 'language', 'categories'], - iconSize = identifyData ? 256 : ui.iconSize, + iconSize = externalData ? 256 : ui.iconSize, - css = getCSS(iconSize, oml.config.iconRatio), - - ids = [ - {key: 'isbn', url: 'https://google.com/search?q=ISBN+{0}'}, - {key: 'asin', url: 'http://www.amazon.com/dp/{0}'}, - {key: 'lccn', url: 'http://lccn.loc.gov/{0}'}, - {key: 'oclc', url: 'https://www.worldcat.org/oclc/{0}'}, - {key: 'olid', url: 'https://openlibrary.org/books/{0}'} - ], + isMultiple = !oml.user.ui.item, separator = '; ', + css = getCSS(iconSize, oml.config.iconRatio), + that = Ox.Element() .addClass('OxTextPage') .css({overflowY: 'auto'}) @@ -52,8 +48,9 @@ oml.ui.infoView = function(identifyData) { .addClass('OxSelectable') .css({ position: 'absolute', - left: css.info.left, - right: !identifyData ? '176px' : 16 + Ox.UI.SCROLLBAR_SIZE + 'px', + left: !isMultiple ? css.info.left : '16px', + right: !externalData && !isMultiple + ? '176px' : 16 + Ox.UI.SCROLLBAR_SIZE + 'px', top: '16px' }) [iconSize == 512 ? 'hide' : 'show']() @@ -63,7 +60,7 @@ oml.ui.infoView = function(identifyData) { $image, $reflection, $reflectionImage; - if (!identifyData) { + if (!externalData) { $data = Ox.Element() .addClass('OxSelectable') .css({ @@ -93,11 +90,13 @@ oml.ui.infoView = function(identifyData) { if (key == 'date' && value) { value = value.slice(0, 4); } - return key && !identifyData ? - '' + ( - key == 'author' ? value.replace(/ \(Ed\.\)$/, '') : value - ) + '' - : value; + return ( + key && !externalData ? '' : '' + ) + ( + key == 'author' ? value.replace(/ \(Ed\.\)$/, '') : value + ) + ( + key && !externalData ? '' : '' + ); }).join(separator) + (isEditor ? ' (Ed.)' : '') : ''; } @@ -124,7 +123,7 @@ oml.ui.infoView = function(identifyData) { } function getIconTooltip() { - return !identifyData + return !externalData ? 'Click to see ' + (ui.iconSize == 256 ? 'large' : 'small') + ' ' + ui.icons + ', doubleclick to see ' + (ui.icons == 'cover' ? 'preview' : 'cover') @@ -136,81 +135,18 @@ oml.ui.infoView = function(identifyData) { } function renderIdentifyButton(data) { - return Ox.FormElementGroup({ - elements: [ - Ox.Button({ - disabled: data.mediastate != 'available', - style: 'squared', - title: Ox._('Identify Book...'), - width: 112 - }) - .bindEvent({ - click: function() { - identify(data); - } - }), - data.mediastate == 'available' && data.primaryid - ? Ox.Select({ - items: Ox.flatten(ids.map(function(id) { - return (data[id.key] || []).map(function(value) { - return { - id: id.key + ':' + value, - title: '' + Ox.getObjectById( - oml.config.itemKeys, id.key - ).title + ': ' + value - }; - }); - })).concat([ - {id: '', title: 'No ID'} - ]), - max: 1, - min: 1, - overlap: 'left', - style: 'squared', - title: 'select', - tooltip: Ox._('Set Primary ID'), - type: 'image', - value: data.primaryid.join(':') - }) - .bindEvent({ - click: function(data) { - // ... - }, - change: function(data) { - oml.api.edit({ - id: ui.item, - primaryid: data.value ? data.value.split(':') : '' - }, function(result) { - that.updateElement(result.data, [$info, $data]); - }); - } - }) - : Ox.Button({ - disabled: true, - overlap: 'left', - style: 'squared', - title: 'select', - type: 'image' - }) - ], - float: 'right' - }) - .css({marginTop: '8px'}); - } - - function renderOpenButton(data) { - return data.mediastate == 'available' - ? Ox.Button({ + return Ox.Button({ + disabled: data.mediastate != 'available', style: 'squared', - title: Ox._('Open Folder'), + title: Ox._('Identify Book...'), width: 128 }) .css({marginTop: '8px'}) .bindEvent({ click: function() { - oml.api.openFolder({id: oml.user.ui.item}); + identify(data); } - }) : Ox.Element(); + }); } function renderMediaButton(data) { @@ -334,6 +270,20 @@ oml.ui.infoView = function(identifyData) { return $element; } + function renderOpenButton() { + return Ox.Button({ + style: 'squared', + title: Ox._('Open Folder'), + width: 128 + }) + .css({marginTop: '8px'}) + .bindEvent({ + click: function() { + oml.api.openFolder({id: oml.user.ui.item}); + } + }); + } + function splitValue(value, key) { var isEditor = key == 'author' && Ox.decodeHTMLEntities(value).split(separator).some(function(value) { @@ -378,7 +328,7 @@ oml.ui.infoView = function(identifyData) { keys: [] }, function(result) { - if (!identifyData && id && id != ui.item) { + if (!externalData && id && id != ui.item) { return; } @@ -389,12 +339,14 @@ oml.ui.infoView = function(identifyData) { Ox.print('BOOK DATA', data) var $div, - isEditable = data.mediastate == 'available' && !identifyData, - src = !identifyData + isEditable = isMultiple || ( + data.mediastate == 'available' && !externalData + ), + src = !externalData ? '/' + data.id + '/' + ui.icons + '512.jpg?' + data.modified : data.cover, ratio = ( - ui.icons == 'cover' || identifyData + ui.icons == 'cover' || externalData ? data.coverRatio : data.previewRatio ) || oml.config.iconRatio, size = iconSize, @@ -433,7 +385,7 @@ oml.ui.infoView = function(identifyData) { .hide() .bindEvent({ doubleclick: function() { - if (!identifyData) { + if (!externalData) { oml.UI.set({ icons: ui.icons == 'cover' ? 'preview' : 'cover' @@ -441,7 +393,7 @@ oml.ui.infoView = function(identifyData) { } }, singleclick: function() { - if (!identifyData) { + if (!externalData) { toggleCoverSize(ratio); } } @@ -486,8 +438,11 @@ oml.ui.infoView = function(identifyData) { Ox.EditableContent({ clickLink: oml.clickLink, editable: isEditable, + placeholder: formatLight(Ox._( + isMixed.title ? 'Mixed Title' : 'Unknown Title' + )), tooltip: isEditable ? oml.getEditTooltip() : '', - value: data.title ? Ox.encodeHTMLEntities(data.title) : 'No Title' + value: Ox.encodeHTMLEntities(data.title || '') }) .css({ fontWeight: 'bold', @@ -514,9 +469,13 @@ oml.ui.infoView = function(identifyData) { format: function(value) { return formatValue(splitValue(value, 'author'), 'author'); }, - placeholder: formatLight(Ox._('Unknown Author')), + placeholder: formatLight(Ox._( + isMixed.author ? 'Mixed Author' : 'Unknown Author' + )), tooltip: isEditable ? oml.getEditTooltip() : '', - value: Ox.encodeHTMLEntities((data.author || []).join(separator)) + value: Ox.encodeHTMLEntities( + (data.author || []).join(separator) + ) }) .css({ marginBottom: '-3px', @@ -555,7 +514,9 @@ oml.ui.infoView = function(identifyData) { key ); }, - placeholder: formatLight(Ox._('unknown')), + placeholder: formatLight(Ox._( + isMixed[key] ? 'mixed' : 'unknown' + )), tooltip: isEditable ? oml.getEditTooltip() : '', value: Ox.encodeHTMLEntities( Ox.contains(arrayKeys, key) @@ -595,7 +556,9 @@ oml.ui.infoView = function(identifyData) { key ); }, - placeholder: formatLight('unknown'), + placeholder: formatLight(Ox._( + isMixed[key] ? 'mixed' : 'unknown' + )), tooltip: isEditable ? oml.getEditTooltip() : '', value: Ox.encodeHTMLEntities( Ox.contains(arrayKeys, key) @@ -628,7 +591,9 @@ oml.ui.infoView = function(identifyData) { format: function(value) { return formatValue(splitValue(value), 'categories'); }, - placeholder: formatLight(Ox._('unknown')), + placeholder: formatLight(Ox._( + isMixed.categories ? 'mixed' : 'unknown' + )), tooltip: isEditable ? oml.getEditTooltip() : '', value: Ox.encodeHTMLEntities((data.categories || []).join(separator)) }) @@ -659,7 +624,9 @@ oml.ui.infoView = function(identifyData) { Ox.formatISBN(value, 10) ] : []).join(separator); }, - placeholder: formatLight(Ox._('unknown')), + placeholder: formatLight(Ox._( + isMixed.isbn ? 'mixed' : 'unknown' + )), tooltip: isEditable ? oml.getEditTooltip() : '', value: data.isbn || '' }) @@ -689,7 +656,8 @@ oml.ui.infoView = function(identifyData) { format: function(value) { return value.replace(/\n/g, '
'); }, - placeholder: formatLight(Ox._('No {0}', [ + placeholder: formatLight(Ox._( + isMixed[key] ? 'Mixed {0}' : 'No {0}', [ Ox.getObjectById(oml.config.itemKeys, key).title ])), tooltip: isEditable ? oml.getEditTooltip() : '', @@ -749,7 +717,9 @@ oml.ui.infoView = function(identifyData) { } }); - renderOpenButton(data).appendTo($data); + if (data.mediastate == 'available') { + renderOpenButton().appendTo($data); + } $('
').css({height: '16px'}).appendTo($data); @@ -759,7 +729,7 @@ oml.ui.infoView = function(identifyData) { function editMetadata(key, value) { if (value != data[key]) { - var edit = {id: data.id}; + var edit = {id: !isMultiple ? data.id : oml.ui.listSelection}; edit[key] = key == 'author' ? splitValue(value || [], 'author') : Ox.contains(arrayKeys, key) @@ -770,6 +740,9 @@ oml.ui.infoView = function(identifyData) { if (Ox.contains(['title', 'author', 'description'], key)) { oml.$ui.info.updateElement(); } + oml.$ui.filters.forEach(function($filter) { + $filter.reloadList(); + }); oml.$ui.list.value( result.data.id, key, result.data[key] ); @@ -787,10 +760,13 @@ oml.ui.infoView = function(identifyData) { }; - if (!identifyData) { + if (!externalData) { ui.item && that.updateElement(ui.item); + } else if (!isMultiple) { + that.updateElement(externalData, [$icon, $info]); } else { - that.updateElement(identifyData, [$icon, $info]); + Ox.print('***ELSE***', externalData) + that.updateElement(externalData, [$info]); } oml.bindEvent({