egroupware_official/etemplate/js/et2_widget_image.js

312 lines
6.6 KiB
JavaScript

/**
* EGroupware eTemplate2 - JS Description object
*
* @license http://opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @package etemplate
* @subpackage api
* @link http://www.egroupware.org
* @author Nathan Gray
* @copyright Nathan Gray 2011
* @version $Id$
*/
"use strict";
/*egw:uses
jquery.jquery;
et2_core_interfaces;
et2_core_baseWidget;
*/
/**
* Class which implements the "image" XET-Tag
*
* @augments et2_baseWidget
*/
var et2_image = et2_baseWidget.extend([et2_IDetachedDOM],
{
attributes: {
"src": {
"name": "Image",
"type": "string",
"description": "Displayed image"
},
default_src: {
name: "Default image",
type: "string",
description: "Image to use if src is not found"
},
"href": {
"name": "Link Target",
"type": "string",
"description": "Link URL, empty if you don't wan't to display a link.",
"default": et2_no_init
},
"extra_link_target": {
"name": "Link target",
"type": "string",
"default": "_self",
"description": "Link target descriptor"
},
"extra_link_popup": {
"name": "Popup",
"type": "string",
"description": "widthxheight, if popup should be used, eg. 640x480"
},
"imagemap":{
// TODO: Do something with this
"name": "Image map",
"description": "Currently not implemented"
},
"label": {
"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"],
/**
* Constructor
*
* @memberOf et2_image
*/
init: function() {
this._super.apply(this, arguments);
// Create the image or a/image tag
this.image = $j(document.createElement("img"));
if (this.options.label)
{
this.image.attr("alt", this.options.label).attr("title", this.options.label);
}
if (this.options.href)
{
this.image.addClass('et2_clickable');
}
if(this.options["class"])
{
this.image.addClass(this.options["class"]);
}
this.setDOMNode(this.image[0]);
},
click: function()
{
if(this.options.href)
{
this.egw().open_link(this.options.href, this.options.extra_link_target, this.options.extra_link_popup);
}
else
{
this._super.apply(this,arguments);
}
},
transformAttributes: function(_attrs) {
this._super.apply(arguments);
// Check to expand name
if (typeof _attrs["src"] != "undefined")
{
var manager = this.getArrayMgr("content");
if(manager) {
var src = manager.getEntry(_attrs["src"]);
if (typeof src != "undefined" && src !== null)
{
if(typeof src == "object")
{
src = egw().link('/index.php', src);
}
_attrs["src"] = src;
}
}
}
},
set_label: function(_value) {
this.options.label = _value;
_value = this.egw().lang(_value);
// label is NOT the alt attribute in eTemplate, but the title/tooltip
this.image.attr("alt", _value).attr("title", _value);
},
setValue: function(_value) {
// Value is src, images don't get IDs
this.set_src(_value);
},
set_href: function (_value)
{
if (!this.isInTree())
{
return false;
}
this.options.href = _value;
this.image.wrapAll('<a href="'+_value+'"></a>"');
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)
{
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;
});
return true;
},
/**
* Set image src
*
* @param {string} _value image, app/image or url
* @return {boolean} true if image was found, false if not (image is either not displayed or default_src is used)
*/
set_src: function(_value) {
if(!this.isInTree())
{
return false;
}
this.options.src = _value;
var src = this.egw().image(_value);
if (src)
{
this.image.attr("src", src).show();
return true;
}
// allow url's too
else if (_value[0] == '/' || _value.substr(0,4) == 'http')
{
this.image.attr('src', _value).show();
return true;
}
src = null;
if (this.options.default_src)
{
src = this.egw().image(this.options.default_src);
}
if (src)
{
this.image.attr("src", src).show();
}
else
{
this.image.css("display","none");
}
return false;
},
/**
* Implementation of "et2_IDetachedDOM" for fast viewing in gridview
*
* @param {array} _attrs
*/
getDetachedAttributes: function(_attrs) {
_attrs.push("src", "label", "href");
},
getDetachedNodes: function() {
return [this.image[0]];
},
setDetachedAttributes: function(_nodes, _values) {
// Set the given DOM-Nodes
this.image = $j(_nodes[0]);
// Set the attributes
if (_values["src"])
{
this.set_src(_values["src"]);
}
if (_values["label"])
{
this.set_label(_values["label"]);
}
if(_values["href"])
{
this.image.addClass('et2_clickable');
this.set_href(_values["href"]);
}
}
});
et2_register_widget(et2_image, ["image"]);
/**
* Widget displaying an application icon
*/
var et2_appicon = et2_image.extend(
{
attributes: {
default_src: {
name: "Default image",
type: "string",
default: "nonav",
description: "Image to use if there is no application icon"
}
},
set_src: function(_app)
{
if (!_app) _app = this.egw().app_name();
this.image.addClass('et2_appicon');
this._super.call(this, _app == 'sitemgr-link' ? 'sitemgr/sitemgr-link' : // got removed from jdots
(this.egw().app(_app, 'icon_app') || _app)+'/'+(this.egw().app(_app, 'icon') || 'navbar'));
}
});
et2_register_widget(et2_appicon, ["appicon"]);