From d0e2fe03402471848ac4d519bb8f4cf3717bcc9c Mon Sep 17 00:00:00 2001 From: rlx Date: Sat, 16 Jan 2016 10:44:22 +0530 Subject: [PATCH] allow for editing cover url --- static/js/coverDialog.js | 42 +++++++++++++++++++++++++++------------- static/js/info.js | 3 +++ static/js/infoView.js | 26 ++++++++++++------------- 3 files changed, 45 insertions(+), 26 deletions(-) diff --git a/static/js/coverDialog.js b/static/js/coverDialog.js index 778824b..8df1a1c 100644 --- a/static/js/coverDialog.js +++ b/static/js/coverDialog.js @@ -1,30 +1,27 @@ 'use strict'; -oml.ui.coverDialog = function(id, url) { +oml.ui.coverDialog = function(id, value) { - var $input = Ox.Input({ - value: url, + var ui = oml.user.ui, + + $input = Ox.Input({ + style: 'squared', + value: value, width: 480 }) .css({margin: '16px'}) .bindEvent({ - change: function(value) { + submit: function() { that.close(); - oml.api.edit({ - id: id, - cover: value - }, function(result) { - // ... - }); } }), that = Ox.Dialog({ buttons: [ Ox.Button({ - id: 'close', + id: 'done', style: 'squared', - title: Ox._('Close') + title: Ox._('Done') }) .bindEvent({ click: function() { @@ -35,12 +32,31 @@ oml.ui.coverDialog = function(id, url) { closeButton: true, content: $input, height: 48, - keys: {escape: 'close', enter: 'close'}, + keys: {enter: 'done'}, removeOnClose: true, title: Ox._('Edit Cover URL'), width: 512 }) .bindEvent({ + close: function() { + var inputValue = $input.value(); + if (inputValue != value) { + oml.api.edit({ + id: id, + cover: inputValue + }, function(result) { + if (ui.icons == 'cover') { + oml.$ui.info.updateElement(); + oml.$ui.browser.value(ui.item, { + cover: result.data.cover, + coverRatio: result.data.coverRatio, + modified: result.data.modified + }); + oml.$ui.infoView.updateCover(); + } + }); + } + }, open: function() { $input.focusInput(true); } diff --git a/static/js/info.js b/static/js/info.js index 3263a81..f0c7162 100644 --- a/static/js/info.js +++ b/static/js/info.js @@ -15,6 +15,9 @@ oml.ui.info = function() { toggle: function(data) { oml.UI.set({showInfo: !data.collapsed}); }, + oml_icons: function() { + that.updateElement(); + }, oml_item: function() { that.updateElement(); }, diff --git a/static/js/infoView.js b/static/js/infoView.js index b0fbe8d..77640b3 100644 --- a/static/js/infoView.js +++ b/static/js/infoView.js @@ -122,14 +122,6 @@ oml.ui.infoView = function(externalData, isMixed) { }; } - function getIconTooltip() { - return !externalData - ? 'Click to see ' + (ui.iconSize == 256 ? 'large' : 'small') - + ' ' + ui.icons + ', doubleclick to see ' - + (ui.icons == 'cover' ? 'preview' : 'cover') - : ''; - } - function renderIdentifyButton(data) { return Ox.Button({ disabled: data.mediastate != 'available', @@ -314,6 +306,11 @@ oml.ui.infoView = function(externalData, isMixed) { $reflection.css(css.reflection).show(); } + that.updateCover = function(url) { + Ox.Request.clearCache('get'); + that.updateElement(ui.item, $icon); + }; + that.updateElement = function(idOrData, $elements) { var data = Ox.isObject(idOrData) ? idOrData : null, @@ -352,6 +349,8 @@ oml.ui.infoView = function(externalData, isMixed) { size = iconSize, reflectionSize = Math.round(size / 2); + Ox.print('SRC', src); + $elements.forEach(function($element) { $element.empty(); @@ -360,7 +359,9 @@ oml.ui.infoView = function(externalData, isMixed) { $image = Ox.Element({ element: '', - tooltip: getIconTooltip() + tooltip: !externalData + ? Ox._('Doubleclick to edit') + : '' }) .on({ error: function() { @@ -386,10 +387,9 @@ oml.ui.infoView = function(externalData, isMixed) { .bindEvent({ doubleclick: function() { if (!externalData) { - oml.UI.set({ - icons: ui.icons == 'cover' - ? 'preview' : 'cover' - }); + oml.$ui.coverDialog = oml.ui.coverDialog( + id, data.cover + ).open(); } }, singleclick: function() {