From a06f4d163f508dae6251dea87f9cbde75a2553ca Mon Sep 17 00:00:00 2001 From: Roman Zoller Date: Mon, 9 Nov 2015 16:19:24 +0100 Subject: [PATCH] add a full screen preview option to the tree image widget Images can now be displayed in 3 different ways: - 'inline': display image directly in tree view (default) - 'icon': display only an icon, show a full screen preview of the picture on click - 'thumbnail': display image directly in tree view, show a full screen preview of the picture on click --- web_tree_image/README.rst | 10 ++- .../static/src/js/web_tree_image.js | 75 +++++++++++++++---- web_tree_image/static/src/xml/widget.xml | 41 +++++++++- 3 files changed, 104 insertions(+), 22 deletions(-) diff --git a/web_tree_image/README.rst b/web_tree_image/README.rst index 4e96f8aa..508956f0 100644 --- a/web_tree_image/README.rst +++ b/web_tree_image/README.rst @@ -28,11 +28,15 @@ This module defines a new widget type for tree views columns. Set the attribute ``widget=image`` in a ``field`` tag in a tree view. You can also set ``height=`` to set the height the image will have. -Note that this just sets the CSS ``max-height`` attribute, -if you want to make the server return a resized, maybe to save data by making it -return a smaller one or to have uniform images, use the +Note that this just sets the image ``height`` attribute, +if you want to make the server return a resized image, maybe to reduce the size +of the transferred file or to have uniform images, use the ``resize=","`` attribute. +You can set ``display=icon`` in order to get a clickable picture icon that will +open a full screen preview of the image. Set ``display=thumbnail`` to get a +clickable thumbnail. + Credits ======= diff --git a/web_tree_image/static/src/js/web_tree_image.js b/web_tree_image/static/src/js/web_tree_image.js index a533e583..c3e8aad2 100644 --- a/web_tree_image/static/src/js/web_tree_image.js +++ b/web_tree_image/static/src/js/web_tree_image.js @@ -1,4 +1,4 @@ -/* +/* OpenERP, Open Source Management Solution This module copyright (C) 2014 Therp BV () (C) 2013 Marcel van der Boom @@ -17,7 +17,9 @@ along with this program. If not, see . */ -openerp.web_tree_image = function (instance) { +openerp.web_tree_image = function(instance) { + "use strict"; + var QWeb = instance.web.qweb; instance.web.list.Image = instance.web.list.Column.extend({ format: function (row_data, options) { /* Return a valid img tag. For image fields, test if the @@ -26,34 +28,77 @@ openerp.web_tree_image = function (instance) { Otherwise, assume a character field containing either a stock Odoo icon name without path or extension or a fully fledged location or data url */ - if (!row_data[this.id] || !row_data[this.id].value) { + var self = this; + + /* + Allow image to be displayed in 3 different ways: + - 'inline': display image directly in tree view (default) + - 'icon': display only an icon, show a full screen preview + of the picture on click + - 'thumbnail': display image directly in tree view, show a + full screen preview of the picture on click + */ + self.display = self.display || 'inline'; + + if (!row_data[self.id] || !row_data[self.id].value) { return ''; } - var value = row_data[this.id].value, src; - if (this.type === 'binary') { + var value = row_data[self.id].value; + if (self.type === 'binary') { if (value && value.substr(0, 10).indexOf(' ') === -1) { // The media subtype (png) seems to be arbitrary - src = "data:image/png;base64," + value; + self.src = "data:image/png;base64," + value; } else { var imageArgs = { model: options.model, - field: this.id, + field: self.id, id: options.id } - if (this.resize) { - imageArgs.resize = this.resize; + if (self.resize) { + imageArgs.resize = self.resize; } - src = instance.session.url('/web/binary/image', imageArgs); + self.src = instance.session.url('/web/binary/image', + imageArgs); } } else { - if (!/\//.test(row_data[this.id].value)) { - src = '/web/static/src/img/icons/' + row_data[this.id].value + '.png'; + if (!/\//.test(row_data[self.id].value)) { + self.src = '/web/static/src/img/icons/' + + row_data[self.id].value + '.png'; } else { - src = row_data[this.id].value; + self.src = row_data[self.id].value; + } + } + + if (self.display == 'icon' || self.display == 'thumbnail') + { + // use a unique id for the popup DOM node + var popupId = "o_web_tree_image_popup-" + row_data.id.value; + // use a unique id for the clickable DOM node + var clickableId = "o_web_tree_image_clickable-" + + row_data.id.value; + + if (!$('#' + popupId).length) + { + // add full screen preview to DOM + $("body").append(QWeb.render("ListView.row.image.imageData", + {widget: self, + popupId: popupId})); } + + // defer execution until after this function has returned and + // DOM elements have been rendered + window.setTimeout(function() { + // enable full screen preview on click on icon + $("#" + clickableId).click(function() { + $('#' + popupId).modal('show'); + return false; + }); + }, 0); } - return instance.web.qweb.render('ListView.row.image', {widget: this, src: src}); - } + + return QWeb.render('ListView.row.image', + {widget: self, clickableId: clickableId}); + }, }); instance.web.list.columns.add('field.image', 'instance.web.list.Image'); }; diff --git a/web_tree_image/static/src/xml/widget.xml b/web_tree_image/static/src/xml/widget.xml index cbd1bc0b..abdce165 100644 --- a/web_tree_image/static/src/xml/widget.xml +++ b/web_tree_image/static/src/xml/widget.xml @@ -1,6 +1,39 @@ - - + + + + + +
+
+
+
+ +

Image preview

+
+
+ +
+
+
+