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

@@ -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=<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="<width>,<height>"`` 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
 =======
 

web_tree_image/static/src/js/web_tree_image.js

@@ -17,7 +17,9 @@
     along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-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');
 };

web_tree_image/static/src/xml/widget.xml

@@ -1,6 +1,39 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<templates id="template" xml:space="preserve">
-    <img t-name="ListView.row.image"
-         t-att-height="widget.height || 16"
-         t-att-src="src" />
+<templates id="template">
+    <t t-name="ListView.row.image"><!--
+        Inline display of the image.
+        --><img t-if="widget.display == 'inline'"
+                t-att-height="widget.height || 16"
+                t-att-src="widget.src" /><!--
+        Icon that can be clicked for a full screen preview of the image.
+        --><span t-if="widget.display == 'icon'"
+                 t-att-id="clickableId"
+                 class="fa fa-picture-o" /><!--
+        Thumbnail that can be clicked for a full screen preview of the image.
+        --><img t-if="widget.display == 'thumbnail'"
+                t-att-id="clickableId"
+                t-att-height="widget.height || 16"
+                t-att-src="widget.src" />
+    </t>
+
+    <!-- Use a separate template for the content of the full screen preview,
+         as it has to be inserted into the DOM separately, otherwise its
+         z-index is affected by parent elements and it does not appear
+         correctly in the foreground. -->
+    <div t-name="ListView.row.image.imageData" t-att-id="popupId"
+         class="modal" tabindex="-1">
+        <div class="modal-dialog">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal">
+                        x
+                    </button>
+                    <h4 class="modal-title">Image preview</h4>
+                </div>
+                <div class="modal-body">
+                    <img t-att-src="widget.src" class="img-responsive" />
+                </div>
+            </div>
+        </div>
+    </div>
 </templates>