Techsystech
/
web
mirror of https://github.com/OCA/web.git
3
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #254 from rz-comp/8.0 

add a full screen preview option to the tree image widget
pull/227/head
Pedro M. Baeza 2015-11-18 16:30:11 +01:00
parent dae7460ce8 a06f4d163f
commit 388b86910f
3 changed files with 104 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web_tree_image/README.rst
View File

@ -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
=======

69
web_tree_image/static/src/js/web_tree_image.js
View File

@ -18,6 +18,8 @@
*/
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;
}
}
return instance.web.qweb.render('ListView.row.image', {widget: this, src: src});
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 QWeb.render('ListView.row.image',
{widget: self, clickableId: clickableId});
},
});
instance.web.list.columns.add('field.image', 'instance.web.list.Image');
};

39
web_tree_image/static/src/xml/widget.xml
View File

@ -1,6 +1,39 @@
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<img t-name="ListView.row.image"
<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="src" />
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>