diff --git a/web_tree_image/static/src/css/web_tree_image.css b/web_tree_image/static/src/css/web_tree_image.css
new file mode 100644
index 00000000..427e0226
--- /dev/null
+++ b/web_tree_image/static/src/css/web_tree_image.css
@@ -0,0 +1,3 @@
+.o_web_tree_image_clickable {
+ cursor: pointer;
+}
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 c3e8aad2..c90c6cb6 100644
--- a/web_tree_image/static/src/js/web_tree_image.js
+++ b/web_tree_image/static/src/js/web_tree_image.js
@@ -19,8 +19,30 @@
openerp.web_tree_image = function(instance) {
"use strict";
+
+ // unique DOM id for the popup DOM node
+ function popup_id(name, id) {
+ return "o_web_tree_image_popup-" + name + "-" + id;
+ }
+
+ // unique DOM id for the clickable DOM node
+ function clickable_id(name, id) {
+ return "o_web_tree_image_clickable-" + name + "-" + id;
+ }
+
+ // add callback for click on image icon/thumbnail for given row name/id
+ function make_clickable(name, id) {
+ // defer execution until after DOM elements have been rendered
+ window.setTimeout(function() {
+ $("#" + clickable_id(name, id)).click(function() {
+ $('#' + popup_id(name, id)).modal('show');
+ return false;
+ });
+ }, 0);
+ }
+
var QWeb = instance.web.qweb;
- instance.web.list.Image = instance.web.list.Column.extend({
+ instance.web.list.ImagePreview = instance.web.list.Column.extend({
format: function (row_data, options) {
/* Return a valid img tag. For image fields, test if the
field's value contains just the binary size and retrieve
@@ -71,34 +93,40 @@ openerp.web_tree_image = function(instance) {
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);
+ var id = row_data.id.value;
+ var popupId = popup_id(self.name, id);
+ // add full screen preview to DOM
+ $('#' + popupId).remove();
+ $("body").append(QWeb.render("ListView.row.image.imageData", {
+ widget: self,
+ popupId: popupId,
+ }));
+ make_clickable(self.name, id);
}
- return QWeb.render('ListView.row.image',
- {widget: self, clickableId: clickableId});
+ return QWeb.render('ListView.row.image', {
+ widget: self,
+ clickableId: clickable_id(self.name, id),
+ });
+ },
+ });
+ instance.web.list.columns.add('field.image',
+ 'instance.web.list.ImagePreview');
+ instance.web.list.columns.add('field.image_preview',
+ 'instance.web.list.ImagePreview');
+
+ instance.web.form.ImagePreview = instance.web.form.FieldBinary.extend({
+ template: 'FieldBinaryImage',
+ render_value: function() {
+ var id = this.view.datarecord.id;
+ make_clickable(this.name, id);
+ var content = {
+ widget: {display: 'icon'},
+ clickableId: clickable_id(this.name, id),
+ };
+ this.$el.html($(QWeb.render('ListView.row.image', content)));
},
});
- instance.web.list.columns.add('field.image', 'instance.web.list.Image');
+ instance.web.form.widgets.add('image_preview',
+ 'instance.web.form.ImagePreview');
};
diff --git a/web_tree_image/static/src/xml/widget.xml b/web_tree_image/static/src/xml/widget.xml
index abdce165..6af2cee8 100644
--- a/web_tree_image/static/src/xml/widget.xml
+++ b/web_tree_image/static/src/xml/widget.xml
@@ -8,12 +8,13 @@
Icon that can be clicked for a full screen preview of the image.
-->
+ t-att-src="widget.src"
+ class="o_web_tree_image_clickable" />