holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Introduce new attribute to image widget in order to show image as a tooltip next to the widget with provided source

Browse Source
This commit is contained in:
Hadi Nategh 2014-09-29 16:29:17 +00:00
parent b6c86c2df0
commit b4adc01f6e
2 changed files with 64 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
etemplate/js/et2_widget_image.js
View File

@ -62,6 +62,12 @@ var et2_image = et2_baseWidget.extend([et2_IDetachedDOM],
"name": "Label",
"type": "string",
"description": "Label for image"
},
"image_tooltip":{
"name": "Image tooltip",
"type": "string",
"default": false,
"description": "Clicking on an image would popup a tooltip which shows the actual size of the image"
}
},
legacyOptions: ["href", "extra_link_target", "imagemap", "extra_link_popup", "id"],
@ -149,9 +155,52 @@ var et2_image = et2_baseWidget.extend([et2_IDetachedDOM],
var href = this.options.href;
var popup = this.options.extra_link_popup;
var target = this.options.extra_link_target;
var self = this;
if (self.options.image_tooltip)
{
this.image.parent().tooltip({
position: {my:"left center", at:"right+10 center", collision:"none"},
tooltipClass:'et2_image_tooltipPopup',
content: function()
{
return jQuery('<div><img src="'+ href +'"/></div>');
},
close: function()
{
jQuery(this).tooltip('disable');
}
}).tooltip('disable');
}
this.image.parent().click(function(e)
{
egw.open_link(href,target,popup);
if (self.options.image_tooltip)
{
var ttElem = jQuery(e.target).parent();
var ttOptions = ttElem.tooltip('option');
if (!ttOptions.disabled)
{
ttElem.tooltip('disable');
jQuery(e.target).trigger('mouseout');
}
else
{
ttElem.tooltip('enable');
jQuery(e.target).trigger('mouseover');
}
jQuery(e.target).on('mouseout', function (event){
if (ttOptions.disabled)
{
jQuery(event.target).trigger('mouseover');
}
});
}
else
{
egw.open_link(href,target,popup);
}
e.preventDefault();
return false;
});

14
etemplate/templates/default/etemplate2.css
View File

@ -1568,3 +1568,17 @@ ul.et2_nowrap, div.et2_nowrap{
width: 77%;
float: right;
}
/*et2_image_widget*/
div.et2_image_tooltipPopup {
background: white;
color: black;
border: 1px solid gray;
padding: 0;
opacity: 1;
max-width: 600px;
max-height: 480px;
box-shadow: 5px 5px 11px gray;
overflow:auto;
}