2011-08-05 16:53:54 +02:00
/ * *
2013-04-13 21:00:13 +02:00
* EGroupware eTemplate2 - JS Description object
2011-08-05 16:53:54 +02:00
*
* @ license http : //opensource.org/licenses/gpl-license.php GPL - GNU General Public License
* @ package etemplate
* @ subpackage api
* @ link http : //www.egroupware.org
* @ author Andreas Stöckel
* @ copyright Stylite 2011
* @ version $Id$
* /
2011-08-07 15:43:46 +02:00
"use strict" ;
2011-08-05 16:53:54 +02:00
/ * e g w : u s e s
jquery . jquery ;
2011-08-24 12:18:07 +02:00
et2 _core _baseWidget ;
2015-03-24 12:40:06 +01:00
/ e t e m p l a t e / j s / e x p o s e . j s ;
2011-08-05 16:53:54 +02:00
* /
/ * *
* Class which implements the "description" XET - Tag
2013-11-11 15:16:18 +01:00
*
2013-04-13 21:00:13 +02:00
* @ augments et2 _baseWidget
2013-11-11 15:16:18 +01:00
* /
2015-03-24 12:40:06 +01:00
var et2 _description = expose ( et2 _baseWidget . extend ( [ et2 _IDetachedDOM ] ,
2013-04-13 21:00:13 +02:00
{
2011-08-10 16:36:31 +02:00
attributes : {
2015-02-19 00:02:35 +01:00
"label" : {
"name" : "Label" ,
"default" : "" ,
"type" : "string" ,
"description" : "The label is displayed by default in front (for radiobuttons behind) each widget (if not empty). If you want to specify a different position, use a '%s' in the label, which gets replaced by the widget itself. Eg. '%s Name' to have the label Name behind a checkbox. The label can contain variables, as descript for name. If the label starts with a '@' it is replaced by the value of the content-array at this index (with the '@'-removed and after expanding the variables)." ,
"translate" : true
} ,
2011-08-10 16:36:31 +02:00
"value" : {
2013-02-13 10:23:33 +01:00
"name" : "Value" ,
2011-08-10 16:36:31 +02:00
"type" : "string" ,
2011-08-23 19:05:05 +02:00
"description" : "Displayed text" ,
2013-04-09 09:22:35 +02:00
"translate" : "!no_lang" ,
"default" : ""
2011-08-10 16:36:31 +02:00
} ,
/ * *
* Options converted from the "options" - attribute .
* /
"font_style" : {
"name" : "Font Style" ,
"type" : "string" ,
"description" : "Style may be a compositum of \"b\" and \"i\" which " +
" renders the text bold and/or italic."
} ,
"href" : {
2014-03-06 11:41:22 +01:00
"name" : "Link URL" ,
2011-08-10 16:36:31 +02:00
"type" : "string" ,
"description" : "Link URL, empty if you don't wan't to display a link."
} ,
"activate_links" : {
"name" : "Replace URLs" ,
"type" : "boolean" ,
"default" : false ,
2013-11-11 15:16:18 +01:00
"description" : "If set, URLs in the text are automatically replaced " +
2011-08-10 16:36:31 +02:00
"by links"
} ,
2011-08-23 19:05:05 +02:00
"for" : {
2011-08-10 16:36:31 +02:00
"name" : "Label for widget" ,
"type" : "string" ,
"description" : "Marks the text as label for the given widget."
} ,
"extra_link_target" : {
"name" : "Link target" ,
"type" : "string" ,
2015-03-27 11:13:57 +01:00
"default" : "_browser" ,
2014-03-06 11:41:22 +01:00
"description" : "Link target for href attribute"
2011-08-10 16:36:31 +02:00
} ,
"extra_link_popup" : {
"name" : "Popup" ,
"type" : "string" ,
2011-09-08 22:44:53 +02:00
"description" : "widthxheight, if popup should be used, eg. 640x480"
2011-08-10 16:36:31 +02:00
} ,
"extra_link_title" : {
"name" : "Link Title" ,
"type" : "string" ,
2011-08-24 09:18:59 +02:00
"description" : "Link title which is displayed on mouse over." ,
"translate" : true
2015-03-24 12:40:06 +01:00
} ,
"expose_view" : {
name : "Expose view" ,
type : "boolean" ,
default : false ,
description : "Clicking on description with href value would popup an expose view, and will show content referenced by href."
} ,
mime : {
name : "Mime type" ,
type : "string" ,
default : '' ,
description : "Mime type of the registered link"
2015-03-24 19:08:57 +01:00
} ,
mime _data : {
name : "Mime data" ,
type : "string" ,
default : '' ,
description : "hash for data stored on service-side with egw_link::(get|set)_data()"
2011-08-10 16:36:31 +02:00
}
} ,
2013-11-11 15:16:18 +01:00
legacyOptions : [ "font_style" , "href" , "activate_links" , "for" ,
2011-08-10 16:36:31 +02:00
"extra_link_target" , "extra_link_popup" , "extra_link_title" ] ,
2011-08-05 16:53:54 +02:00
2013-04-13 21:00:13 +02:00
/ * *
* Constructor
2013-11-11 15:16:18 +01:00
*
2013-04-13 21:00:13 +02:00
* @ memberOf et2 _description
* /
2011-08-24 12:05:52 +02:00
init : function ( ) {
2011-08-10 16:36:31 +02:00
this . _super . apply ( this , arguments ) ;
2011-08-22 12:50:55 +02:00
// Create the span/label tag which contains the label text
2011-08-23 19:05:05 +02:00
this . span = $j ( document . createElement ( this . options [ "for" ] ? "label" : "span" ) )
2011-08-07 15:43:46 +02:00
. addClass ( "et2_label" ) ;
2011-08-05 16:53:54 +02:00
2011-08-23 19:05:05 +02:00
if ( this . options [ "for" ] )
2011-08-22 10:58:20 +02:00
{
// TODO: Get the real id of the widget in the doLoadingFinished method.
2011-08-23 19:05:05 +02:00
this . span . attr ( "for" , this . options [ "for" ] ) ;
2011-08-22 10:58:20 +02:00
}
2011-09-06 18:50:38 +02:00
et2 _insertLinkText ( this . _parseText ( this . options . value ) , this . span [ 0 ] ,
2014-03-06 11:41:22 +01:00
this . options . href ? this . options . extra _link _target : '_blank' ) ;
2011-08-22 12:50:55 +02:00
2011-08-10 16:36:31 +02:00
this . setDOMNode ( this . span [ 0 ] ) ;
2011-08-05 16:53:54 +02:00
} ,
2011-09-08 20:36:09 +02:00
transformAttributes : function ( _attrs ) {
2012-03-02 13:13:20 +01:00
this . _super . apply ( this , arguments ) ;
2011-09-08 20:36:09 +02:00
if ( this . id )
{
var val = this . getArrayMgr ( "content" ) . getEntry ( this . id ) ;
if ( val )
{
2013-11-11 15:16:18 +01:00
_attrs [ "value" ] = val ;
2011-09-08 20:36:09 +02:00
}
}
} ,
2015-02-19 00:02:35 +01:00
set _label : function ( _value ) {
// Abort if ther was no change in the label
if ( _value == this . label )
{
return ;
}
if ( _value )
{
// Create the label container if it didn't exist yet
if ( this . _labelContainer == null )
{
this . _labelContainer = $j ( document . createElement ( "label" ) )
. addClass ( "et2_label" ) ;
this . getSurroundings ( ) . insertDOMNode ( this . _labelContainer [ 0 ] ) ;
}
2015-03-25 18:48:24 +01:00
2015-02-19 00:02:35 +01:00
// Clear the label container.
this . _labelContainer . empty ( ) ;
// Create the placeholder element and set it
var ph = document . createElement ( "span" ) ;
this . getSurroundings ( ) . setWidgetPlaceholder ( ph ) ;
// Split the label at the "%s"
var parts = et2 _csvSplit ( _value , 2 , "%s" ) ;
// Update the content of the label container
for ( var i = 0 ; i < parts . length ; i ++ )
{
if ( parts [ i ] )
{
this . _labelContainer . append ( document . createTextNode ( parts [ i ] ) ) ;
}
if ( i == 0 )
{
this . _labelContainer . append ( ph ) ;
}
}
}
else
{
// Delete the labelContainer from the surroundings object
if ( this . _labelContainer )
{
this . getSurroundings ( ) . removeDOMNode ( this . _labelContainer [ 0 ] ) ;
}
this . _labelContainer = null ;
}
2015-03-25 18:48:24 +01:00
2015-02-19 00:02:35 +01:00
// Update the surroundings in order to reflect the change in the label
this . getSurroundings ( ) . update ( ) ;
// Copy the given value
this . label = _value ;
} ,
2015-03-24 12:40:06 +01:00
/ * *
* Function to get media content to feed the expose
* @ param { type } _value
* @ returns { Array | Array . getMedia . mediaContent }
* /
getMedia : function ( _value )
{
2015-03-26 09:48:23 +01:00
var base _url = egw . webserverUrl . match ( /^\// , 'ig' ) ? egw ( window ) . window . location . origin : '' ;
2015-03-24 12:40:06 +01:00
var mediaContent = [ ] ;
if ( _value )
{
mediaContent = [ {
title : this . options . label ,
href : base _url + _value ,
type : this . options . type + "/*" ,
thumbnail : base _url + _value
} ] ;
}
return mediaContent ;
} ,
2013-02-13 10:23:33 +01:00
set _value : function ( _value ) {
2013-11-19 16:18:12 +01:00
if ( ! _value ) _value = "" ;
if ( ! this . options . no _lang ) _value = this . egw ( ) . lang ( _value ) ;
2014-02-11 23:40:58 +01:00
if ( this . options . value && ( this . options . value + "" ) . indexOf ( '%s' ) != - 1 )
2013-11-19 16:18:12 +01:00
{
_value = this . options . value . replace ( /%s/g , _value ) ;
}
2013-02-13 10:04:17 +01:00
et2 _insertLinkText ( this . _parseText ( _value ) ,
this . span [ 0 ] ,
2014-03-06 11:41:22 +01:00
this . options . href ? this . options . extra _link _target : '_blank'
2013-02-13 10:04:17 +01:00
) ;
2015-03-24 12:40:06 +01:00
if ( this . options . extra _link _popup || this . options . mime )
2013-02-13 10:04:17 +01:00
{
2015-03-31 09:15:53 +02:00
var href = this . options . href ;
var mime _data = this . options . mime _data ;
2015-03-24 12:40:06 +01:00
var self = this ;
2015-03-24 19:08:57 +01:00
var $span = this . options . mime _data ? jQuery ( this . span ) : jQuery ( 'a' , this . span ) ;
$span . click ( function ( e ) {
2015-03-31 15:39:55 +02:00
if ( self . options . expose _view && typeof self . options . mime != 'undefined' && self . options . mime . match ( self . mime _regexp , 'ig' ) )
2015-03-24 19:08:57 +01:00
{
2015-03-31 09:15:53 +02:00
self . _init _blueimp _gallery ( e , href ) ;
2015-03-24 19:08:57 +01:00
}
else
{
2015-03-31 09:15:53 +02:00
egw ( window ) . open _link ( mime _data || href , self . options . extra _link _target , self . options . extra _link _popup , null , null , self . options . mime ) ;
2015-03-24 19:08:57 +01:00
}
e . preventDefault ( ) ;
return false ;
} ) ;
2013-02-13 10:04:17 +01:00
}
} ,
2011-09-06 18:50:38 +02:00
_parseText : function ( _value ) {
2011-08-22 12:50:55 +02:00
if ( this . options . href )
{
2013-02-06 16:05:31 +01:00
var href = this . options . href ;
2015-03-31 09:15:53 +02:00
if ( href . indexOf ( '/' ) == - 1 && href . split ( '.' ) . length >= 3 &&
2013-02-06 16:05:31 +01:00
! ( href . indexOf ( 'mailto:' ) != - 1 || href . indexOf ( '://' ) != - 1 || href . indexOf ( 'javascript:' ) != - 1 )
)
{
href = "/index.php?menuaction=" + href ;
}
if ( href . charAt ( 0 ) == '/' ) // link relative to eGW
{
href = egw . link ( href ) ;
}
2011-08-22 12:50:55 +02:00
return [ {
2013-02-06 16:05:31 +01:00
"href" : href ,
2011-09-06 18:50:38 +02:00
"text" : _value
2011-08-22 12:50:55 +02:00
} ] ;
}
else if ( this . options . activate _links )
{
2011-09-06 18:50:38 +02:00
return et2 _activateLinks ( _value ) ;
2011-08-22 12:50:55 +02:00
}
else
{
2011-09-06 18:50:38 +02:00
return [ _value ] ;
2011-08-22 12:50:55 +02:00
}
2011-08-05 16:53:54 +02:00
} ,
2011-08-10 16:36:31 +02:00
set _font _style : function ( _value ) {
2011-08-16 14:31:18 +02:00
this . font _style = _value ;
2011-08-10 16:36:31 +02:00
2011-08-16 14:31:18 +02:00
this . span . toggleClass ( "et2_bold" , _value . indexOf ( "b" ) >= 0 ) ;
this . span . toggleClass ( "et2_italic" , _value . indexOf ( "i" ) >= 0 ) ;
2011-09-06 18:50:38 +02:00
} ,
/ * *
* Code for implementing et2 _IDetachedDOM
2014-03-06 12:01:23 +01:00
*
* @ param { array } _attrs
2011-09-06 18:50:38 +02:00
* /
getDetachedAttributes : function ( _attrs )
{
2011-10-25 00:56:50 +02:00
_attrs . push ( "value" , "class" , "href" ) ;
2011-09-06 18:50:38 +02:00
} ,
2011-08-05 16:53:54 +02:00
2011-09-06 18:50:38 +02:00
getDetachedNodes : function ( )
{
return [ this . span [ 0 ] ] ;
} ,
setDetachedAttributes : function ( _nodes , _values )
{
2012-03-12 14:19:13 +01:00
// Update the properties
var updateLink = false ;
2011-10-25 00:56:50 +02:00
if ( typeof _values [ "href" ] != "undefined" )
{
2012-03-12 14:19:13 +01:00
updateLink = true ;
2011-10-25 00:56:50 +02:00
this . options . href = _values [ "href" ] ;
}
2012-03-02 13:13:20 +01:00
2012-07-11 01:13:05 +02:00
if ( typeof _values [ "value" ] != "undefined" || ( updateLink && ( _values [ "value" ] || this . options . value ) ) )
2011-09-06 18:50:38 +02:00
{
2013-02-13 10:04:17 +01:00
this . span = jQuery ( _nodes [ 0 ] ) ;
2013-02-13 10:23:33 +01:00
this . set _value ( _values [ "value" ] ) ;
2011-09-06 18:50:38 +02:00
}
2011-09-08 20:36:09 +02:00
if ( typeof _values [ "class" ] != "undefined" )
{
2012-03-12 14:19:13 +01:00
_nodes [ 0 ] . setAttribute ( "class" , _values [ "class" ] ) ;
2011-09-08 20:36:09 +02:00
}
2011-09-06 18:50:38 +02:00
}
2015-03-24 12:40:06 +01:00
} ) ) ;
2011-08-06 16:36:44 +02:00
et2 _register _widget ( et2 _description , [ "description" , "label" ] ) ;
2011-08-05 16:53:54 +02:00