2011-09-08 01:32:24 +02:00
/ * *
* eGroupWare eTemplate2 - JS Link 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 2011 Nathan Gray
* @ version $Id$
* /
"use strict" ;
/ * e g w : u s e s
jquery . jquery ;
jquery . jquery - ui ;
et2 _core _inputWidget ;
et2 _core _valueWidget ;
* /
/ * *
* UI widgets for Egroupware linking system
* /
var et2 _link _to = et2 _inputWidget . extend ( {
attributes : {
"application" : {
"name" : "Application" ,
"type" : "string" ,
2011-09-14 22:36:39 +02:00
"default" : "" ,
2011-09-08 01:32:24 +02:00
"description" : "Limit to the listed application or applications (comma seperated)"
} ,
"blur" : {
"name" : "Placeholder" ,
"type" : "string" ,
"default" : "" ,
"description" : "This text get displayed if an input-field is empty and does not have the input-focus (blur). It can be used to show a default value or a kind of help-text."
} ,
2011-09-14 02:06:04 +02:00
"no_files" : {
"name" : "No files" ,
"type" : "boolean" ,
"default" : false ,
"description" : "Suppress attach-files"
} ,
"search_label" : {
"name" : "Search label" ,
"type" : "string" ,
"default" : "" ,
"description" : "Label to use for search"
} ,
"link_label" : {
"name" : "Link label" ,
"type" : "string" ,
"default" : "Link" ,
"description" : "Label for the link button"
}
2011-09-08 01:32:24 +02:00
} ,
search _timeout : 200 , //ms after change to send query
minimum _characters : 2 , // Don't send query unless there's at least this many chars
init : function ( ) {
this . _super . apply ( this , arguments ) ;
this . div = null ;
2011-09-13 01:43:39 +02:00
2011-09-09 02:05:46 +02:00
this . link _button = null ;
this . status _span = null ;
this . comment = null ;
2011-09-08 01:32:24 +02:00
2011-09-13 01:43:39 +02:00
this . link _entry = null ;
this . file _upload = null ;
2011-09-08 01:32:24 +02:00
this . createInputWidget ( ) ;
} ,
destroy : function ( ) {
2011-09-09 02:05:46 +02:00
this . link _button = null ;
this . status _span = null ;
this . comment = null ;
2011-09-13 01:43:39 +02:00
this . link _entry . destroy ( ) ;
this . link _entry = null ;
2011-09-09 02:05:46 +02:00
this . file _upload . destroy ( ) ;
this . file _upload = null ;
2011-09-13 01:43:39 +02:00
this . div = null ;
2012-03-01 11:13:12 +01:00
this . _super . apply ( this , arguments ) ;
2011-09-09 02:05:46 +02:00
} ,
2011-09-08 01:32:24 +02:00
2011-09-09 02:05:46 +02:00
/ * *
2011-09-13 01:43:39 +02:00
* Override to provide proper node for sub widgets to go in
2011-09-09 02:05:46 +02:00
* /
getDOMNode : function ( _sender ) {
if ( _sender == this ) {
return this . div [ 0 ] ;
2011-09-13 01:43:39 +02:00
} else if ( _sender . _type == 'link-entry' ) {
return this . link _div [ 0 ] ;
} else if ( _sender . _type == 'file' ) {
2011-09-09 02:05:46 +02:00
return this . file _div [ 0 ] ;
2011-09-13 01:43:39 +02:00
2011-09-09 02:05:46 +02:00
}
2011-09-08 01:32:24 +02:00
} ,
createInputWidget : function ( ) {
2011-09-09 02:05:46 +02:00
this . div = $j ( document . createElement ( "div" ) ) . addClass ( "et2_link_to" ) ;
2011-09-08 01:32:24 +02:00
2011-09-13 01:43:39 +02:00
// One common link button
this . link _button = $j ( document . createElement ( "button" ) )
2012-03-02 11:44:56 +01:00
. text ( this . egw ( ) . lang ( this . options . link _label ) )
2011-09-13 01:43:39 +02:00
. appendTo ( this . div ) . hide ( )
. click ( this , this . createLink ) ;
// Span for indicating status
this . status _span = $j ( document . createElement ( "span" ) )
. appendTo ( this . div ) . addClass ( "status" ) . hide ( ) ;
// Need a div for link-to widget
this . link _div = $j ( document . createElement ( "div" ) ) . appendTo ( this . div ) ;
// Link comment field
this . comment = $j ( document . createElement ( "input" ) )
. css ( "display" , "block" ) . css ( "width" , "89%" )
. appendTo ( this . div ) . hide ( ) ;
2012-03-02 11:44:56 +01:00
et2 _link _entry . prototype . set _blur ( this . egw ( ) . lang ( "Comment..." ) , this . comment ) ;
2011-09-13 01:43:39 +02:00
// Need a div for file upload widget
this . file _div = $j ( document . createElement ( "div" ) ) . appendTo ( this . div ) ;
this . setDOMNode ( this . div [ 0 ] ) ;
} ,
doLoadingFinished : function ( ) {
this . _super . apply ( this , arguments ) ;
var self = this ;
// Link-to
var link _entry _attrs = {
id : this . id + '_link_entry' ,
2012-03-02 11:44:56 +01:00
blur : this . options . search _label ? this . options . search _label : this . egw ( ) . lang ( 'Search...' ) ,
2011-09-13 01:43:39 +02:00
query : function ( ) { self . link _button . hide ( ) ; self . comment . hide ( ) ; return true ; } ,
select : function ( ) { self . link _button . show ( ) ; self . comment . show ( ) ; return true ; }
}
this . link _entry = et2 _createWidget ( "link-entry" , link _entry _attrs , this ) ;
// File upload
var file _attrs = {
multiple : true ,
id : this . id + '_file' ,
onFinish : function ( event , file _count ) {
self . filesUploaded ( event ) ;
}
} ;
this . file _upload = et2 _createWidget ( "file" , file _attrs , this ) ;
return true ;
} ,
getValue : function ( ) {
return this . options . value ;
} ,
filesUploaded : function ( event ) {
var self = this ;
this . link _button . show ( ) ;
// Add some comment fields
this . file _upload . progress . children ( ) . each ( function ( ) {
var comment = jQuery ( document . createElement ( "input" ) )
. appendTo ( this ) . hide ( ) ;
2012-03-02 13:41:29 +01:00
self . link _entry . set _blur ( self . egw ( ) . lang ( "Comment..." ) , comment ) ;
2011-09-13 01:43:39 +02:00
var comment _icon = jQuery ( document . createElement ( "span" ) )
. appendTo ( this )
. addClass ( "ui-icon ui-icon-comment" )
. click ( function ( ) { comment _icon . hide ( ) ; comment . toggle ( ) ; } )
} ) ;
} ,
/ * *
* Create a link using the current internal values
* /
createLink : function ( event ) {
// Disable link button
event . data . link _button . attr ( "disabled" , true ) ;
var values = event . data . options . value ;
var self = event . data ;
var links = [ ] ;
// Links to other entries
event . data = self . link _entry ;
self . link _entry . createLink ( event , links ) ;
// Add comment
2011-09-14 02:06:04 +02:00
if ( links . length > 0 && self . comment . val ( ) && self . comment . val ( ) != self . comment . attr ( "placeholder" ) )
2011-09-13 01:43:39 +02:00
{
for ( var i = 0 ; i < links . length ; i ++ )
{
links [ i ] . remark = self . comment . val ( ) ;
}
2011-09-14 02:06:04 +02:00
self . comment . val ( self . comment . attr ( "placeholder" ) ) ;
2011-09-13 01:43:39 +02:00
}
// Files
for ( var file in self . file _upload . options . value ) {
links . push ( {
app : 'file' ,
id : file ,
name : self . file _upload . options . value [ file ] . name ,
type : self . file _upload . options . value [ file ] . type ,
remark : jQuery ( "li[file='" + self . file _upload . options . value [ file ] . name + "'] > input" , self . file _upload . progress )
. filter ( function ( ) { return jQuery ( this ) . attr ( "placeholder" ) != jQuery ( this ) . val ( ) ; } ) . val ( )
} ) ;
}
var request = new egw _json _request ( "etemplate_widget_link::ajax_link::etemplate" ,
[ values . to _app , values . to _id , links ] ,
this
) ;
request . sendRequest ( true , self . _link _result , self ) ;
} ,
/ * *
* Sent some links , server has a result
* /
_link _result : function ( success ) {
if ( success ) {
this . comment . hide ( ) ;
this . link _button . hide ( ) . attr ( "disabled" , false ) ;
this . status _span . fadeIn ( ) . delay ( 1000 ) . fadeOut ( ) ;
delete this . options . value . app ;
delete this . options . value . id ;
for ( var file in this . file _upload . options . value ) {
delete this . file _upload . options . value [ file ] ;
}
this . file _upload . progress . empty ( ) ;
2011-09-14 02:06:04 +02:00
// Look for a link-list with the same ID, refresh it
var self = this ;
this . getRoot ( ) . iterateOver (
function ( widget ) {
if ( widget . id == self . id ) {
widget . _get _links ( ) ;
}
} ,
this , et2 _link _list
) ;
2011-09-13 01:43:39 +02:00
}
}
} ) ;
et2 _register _widget ( et2 _link _to , [ "link-to" ] ) ;
2011-09-14 22:36:39 +02:00
var et2 _link _apps = et2 _selectbox . extend ( {
attributes : {
"application" : {
"name" : "Application" ,
"type" : "string" ,
"default" : "" ,
"description" : "Limit to the listed application or applications (comma seperated)"
}
} ,
init : function ( ) {
this . _super . apply ( this , arguments ) ;
var select _options = { } ;
// Limit to one app
if ( this . options . application ) {
2012-03-02 11:44:56 +01:00
select _options [ _attrs . application ] = this . egw ( ) . lang ( _attrs . application ) ;
2011-09-14 22:36:39 +02:00
} else {
2012-03-02 11:44:56 +01:00
select _options = this . egw ( ) . link _app _list ( 'query' ) ;
2011-09-14 22:36:39 +02:00
// Check whether the options entry was found, if not read it from the
// content array.
if ( select _options == null )
{
select _options = this . getArrayMgr ( 'content' )
. getEntry ( "options-" + this . id )
}
// Default to an empty object
if ( select _options == null )
{
select _options = { } ;
}
}
this . set _select _options ( select _options ) ;
}
} ) ;
et2 _register _widget ( et2 _link _apps , [ "link-apps" ] ) ;
2011-09-13 01:43:39 +02:00
var et2 _link _entry = et2 _valueWidget . extend ( {
attributes : {
"application" : {
"name" : "Application" ,
"type" : "string" ,
2011-09-14 22:36:39 +02:00
"default" : "" ,
2011-09-13 01:43:39 +02:00
"description" : "Limit to the listed application or applications (comma seperated)"
} ,
"blur" : {
"name" : "Placeholder" ,
"type" : "string" ,
"default" : "" ,
"description" : "This text get displayed if an input-field is empty and does not have the input-focus (blur). It can be used to show a default value or a kind of help-text."
} ,
"query" : {
"name" : "Query callback" ,
"type" : "any" ,
"default" : false ,
"description" : "Callback before query to server. Must return true, or false to abort query."
} ,
"select" : {
"name" : "Select callback" ,
"type" : "any" ,
"default" : false ,
"description" : "Callback when user selects an option. Must return true, or false to abort normal action."
} ,
} ,
search _timeout : 200 , //ms after change to send query
minimum _characters : 2 , // Don't send query unless there's at least this many chars
init : function ( ) {
this . _super . apply ( this , arguments ) ;
this . div = null ;
this . search = null ;
this . app _select = null ;
if ( typeof this . options . value == 'undefined' ) this . options . value = { } ;
this . cache = { } ;
this . createInputWidget ( ) ;
} ,
destroy : function ( ) {
this . _super . apply ( this , arguments ) ;
this . div = null ;
this . search . autocomplete ( "destroy" ) ;
this . search = null ;
this . app _select = null ;
} ,
createInputWidget : function ( ) {
var self = this ;
this . div = $j ( document . createElement ( "div" ) ) . addClass ( "et2_link_entry" ) ;
2011-09-08 01:32:24 +02:00
// Application selection
2011-10-18 21:15:32 +02:00
2011-09-08 01:32:24 +02:00
this . app _select = $j ( document . createElement ( "select" ) ) . appendTo ( this . div )
. change ( function ( e ) {
self . cache = { } ; // Clear cache when app changes
2011-09-09 02:05:46 +02:00
self . options . value . app = self . app _select . val ( ) ;
} )
. css ( "width" , "39%" ) ;
2011-10-18 21:15:32 +02:00
var opt _count = 0 ;
2011-09-08 01:32:24 +02:00
for ( var key in this . options . select _options ) {
2011-10-18 21:15:32 +02:00
opt _count ++ ;
2011-09-08 01:32:24 +02:00
var option = $j ( document . createElement ( "option" ) )
. attr ( "value" , key )
. text ( this . options . select _options [ key ] ) ;
option . appendTo ( this . app _select ) ;
}
2011-10-18 21:15:32 +02:00
this . app _select . val ( this . options . application ) ;
if ( opt _count == 1 )
{
this . app _select . hide ( ) ;
}
2011-09-08 01:32:24 +02:00
self . options . value . app = this . app _select . val ( ) ;
// Search input
2011-09-09 02:05:46 +02:00
this . search = $j ( document . createElement ( "input" ) ) . attr ( "type" , "search" )
. css ( "width" , "50%" )
2011-10-18 21:15:32 +02:00
. focus ( function ( ) { if ( ! self . options . application ) { self . app _select . show ( ) ; } } )
2011-09-09 02:05:46 +02:00
. appendTo ( this . div ) ;
2011-09-08 01:32:24 +02:00
2012-03-02 11:44:56 +01:00
this . set _blur ( this . options . blur ? this . options . blur : this . egw ( ) . lang ( "search" ) , this . search ) ;
2011-09-09 02:05:46 +02:00
// Autocomplete
2011-09-08 01:32:24 +02:00
this . search . autocomplete ( {
source : function ( request , response ) { return self . query ( request , response ) ; } ,
select : function ( event , item ) { event . data = self ; self . select ( event , item ) ; return false ; } ,
focus : function ( event , item ) {
event . stopPropagation ( ) ;
self . search . val ( item . item . label ) ;
return false ;
} ,
minLength : self . minimum _characters ,
disabled : self . options . disabled
} ) ;
2011-09-09 02:05:46 +02:00
2011-09-08 01:32:24 +02:00
this . setDOMNode ( this . div [ 0 ] ) ;
} ,
2011-09-13 01:43:39 +02:00
getDOMNode : function ( ) {
return this . div [ 0 ] ;
2011-09-09 02:05:46 +02:00
} ,
2011-09-08 01:32:24 +02:00
transformAttributes : function ( _attrs ) {
this . _super . apply ( this , arguments ) ;
2011-09-13 01:43:39 +02:00
2011-10-18 21:15:32 +02:00
_attrs [ "select_options" ] = { } ;
if ( _attrs [ "application" ] )
{
var apps = et2 _csvSplit ( _attrs [ "application" ] , null , "," ) ;
for ( var i = 0 ; i < apps . length ; i ++ )
{
2012-03-02 11:44:56 +01:00
_attrs [ "select_options" ] [ apps [ i ] ] = this . egw ( ) . lang ( apps [ i ] ) ;
2011-10-18 21:15:32 +02:00
}
}
else
{
2012-03-02 11:44:56 +01:00
_attrs [ "select_options" ] = this . egw ( ) . link _app _list ( 'query' ) ;
2011-10-18 21:15:32 +02:00
}
2011-09-08 01:32:24 +02:00
// Check whether the options entry was found, if not read it from the
// content array.
if ( _attrs [ "select_options" ] == null )
{
_attrs [ "select_options" ] = this . getArrayMgr ( 'content' )
2011-09-08 20:36:09 +02:00
. getEntry ( "options-" + this . id )
2011-09-08 01:32:24 +02:00
}
// Default to an empty object
if ( _attrs [ "select_options" ] == null )
{
_attrs [ "select_options" ] = { } ;
}
} ,
getValue : function ( ) {
return this . options . value ;
} ,
2011-09-14 22:36:39 +02:00
set _value : function ( _value ) {
if ( ! _value || _value . length == 0 )
{
this . search . text ( "" ) ;
this . value = { } ;
return ;
}
if ( typeof _value == 'string' )
{
if ( _value . indexOf ( ":" ) >= 0 )
{
var split = et2 _csvSplit ( _value , 2 , ":" ) ;
_value = {
app : split [ 0 ] ,
id : split [ 1 ]
} ;
}
else if ( _value && this . options . application )
{
_value = {
app : this . options . application ,
id : _value
} ;
}
}
if ( ! _value . app ) _value . app = this . options . application ;
if ( typeof _value != 'object' || ! ( _value . app && _value . id ) )
{
console . warn ( "Bad value for link widget. Need an object with keys 'app', 'id', and optionally 'title'" , _value ) ;
return ;
}
if ( ! _value . title ) {
2012-03-02 11:44:56 +01:00
var title = this . egw ( ) . link _title ( _value . app , _value . id ) ;
2011-09-14 22:36:39 +02:00
if ( title != null ) {
_value . title = title ;
}
else
{
// Title will be fetched from server and then set
2012-03-02 11:44:56 +01:00
var title = this . egw ( ) . link _title ( _value . app , _value . id , function ( title ) { this . val ( title + "" ) ; } , this . search ) ;
2011-09-14 22:36:39 +02:00
}
}
this . value = _value ;
this . search . val ( _value . title + "" ) ;
jQuery ( "option[value='" + _value . app + "']" , this . app _select ) . attr ( "selected" , true ) ;
this . app _select . hide ( ) ;
} ,
2011-09-09 02:05:46 +02:00
set _blur : function ( _value , input ) {
2011-09-13 01:43:39 +02:00
2011-09-09 02:05:46 +02:00
if ( typeof input == 'undefined' ) input = this . search ;
2011-09-08 01:32:24 +02:00
if ( _value ) {
2011-09-09 02:05:46 +02:00
input . attr ( "placeholder" , _value ) ; // HTML5
if ( ! input [ 0 ] . placeholder ) {
2011-09-08 01:32:24 +02:00
// Not HTML5
2011-09-13 01:43:39 +02:00
if ( input . val ( ) == "" ) input . val ( _value ) ;
2011-09-09 02:05:46 +02:00
input . focus ( input , function ( e ) {
var placeholder = _value ;
if ( e . data . val ( ) == placeholder ) e . data . val ( "" ) ;
} ) . blur ( input , function ( e ) {
var placeholder = _value ;
if ( e . data . val ( ) == "" ) e . data . val ( placeholder ) ;
2011-09-08 01:32:24 +02:00
} ) ;
2011-09-09 02:05:46 +02:00
if ( input . val ( ) == "" ) input . val ( _value ) ;
2011-09-08 01:32:24 +02:00
}
} else {
this . search . removeAttr ( "placeholder" ) ;
}
} ,
/ * *
* Ask server for entries matching selected app / type and filtered by search string
* /
query : function ( request , response ) {
if ( request . term in this . cache ) {
return response ( this . cache [ request . term ] ) ;
}
2011-09-13 01:43:39 +02:00
// Allow hook / tie in
if ( this . options . query && typeof this . options . query == 'function' )
{
if ( ! this . options . query ( request , response ) ) return false ;
}
2011-09-08 01:32:24 +02:00
this . search . addClass ( "loading" ) ;
var request = new egw _json _request ( "etemplate_widget_link::ajax_link_search::etemplate" ,
[ this . app _select . val ( ) , '' , request . term ] ,
this
) ;
this . response = response ;
request . sendRequest ( true , this . _results , this ) ;
} ,
/ * *
* User selected a value
* /
select : function ( event , selected ) {
2011-09-13 01:43:39 +02:00
if ( this . options . select && typeof this . options . select == 'function' )
{
if ( ! this . options . select ( event , selected ) ) return false ;
}
2011-09-08 01:32:24 +02:00
event . data . options . value . id = selected . item . value ;
event . data . search . val ( selected . item . label ) ;
2011-09-13 01:43:39 +02:00
2011-09-08 01:32:24 +02:00
} ,
/ * *
* Server found some results
* /
_results : function ( data ) {
this . search . removeClass ( "loading" ) ;
var result = [ ] ;
for ( var id in data ) {
result . push ( { "value" : id , "label" : data [ id ] } ) ;
}
this . cache [ this . search . val ( ) ] = result ;
this . response ( result ) ;
} ,
/ * *
* Create a link using the current internal values
* /
2011-09-13 01:43:39 +02:00
createLink : function ( event , _links ) {
2011-09-09 02:05:46 +02:00
var values = event . data . options . value ;
var self = event . data ;
2011-09-30 18:19:09 +02:00
var links = [ ] ;
2011-09-09 02:05:46 +02:00
2011-09-13 01:43:39 +02:00
if ( typeof _links == 'undefined' )
{
links = [ ] ;
2011-09-14 02:06:04 +02:00
}
else
{
2011-09-13 01:43:39 +02:00
links = _links ;
}
2011-09-09 02:05:46 +02:00
// Links to other entries
if ( values . id ) {
links . push ( {
app : values . app ,
id : values . id ,
} ) ;
self . search . val ( "" ) ;
}
2011-09-13 01:43:39 +02:00
// If a link array was passed in, don't make the ajax call
if ( typeof _links == 'undefined' )
{
var request = new egw _json _request ( "etemplate_widget_link::ajax_link::etemplate" ,
[ values . to _app , values . to _id , links ] ,
this
) ;
request . sendRequest ( true , self . _link _result , self ) ;
2011-09-09 02:05:46 +02:00
}
} ,
/ * *
* Sent some links , server has a result
* /
_link _result : function ( success ) {
if ( success ) {
this . link _button . hide ( ) . attr ( "disabled" , false ) ;
this . status _span . fadeIn ( ) . delay ( 1000 ) . fadeOut ( ) ;
delete this . options . value . app ;
delete this . options . value . id ;
}
2011-09-08 01:32:24 +02:00
}
} ) ;
2011-09-13 01:43:39 +02:00
et2 _register _widget ( et2 _link _entry , [ "link-entry" ] ) ;
2011-09-08 01:32:24 +02:00
2011-09-13 01:43:39 +02:00
/ * *
* UI widget for a single ( read - only ) link
* /
var et2 _link = et2 _valueWidget . extend ( [ et2 _IDetachedDOM ] , {
attributes : {
"application" : {
"name" : "Application" ,
"type" : "string" ,
"default" : "" ,
"description" : "Use the given application, so you can pass just the ID for value"
} ,
"value" : {
description : "Array with keys app, id, and optionally title" ,
type : "any"
}
} ,
init : function ( ) {
this . _super . apply ( this , arguments ) ;
2011-09-22 21:02:33 +02:00
this . link = $j ( document . createElement ( "span" ) )
2011-09-13 01:43:39 +02:00
. addClass ( "et2_link" ) ;
2011-09-22 21:02:33 +02:00
if ( this . options . class ) this . link . addClass ( this . options . class ) ;
this . setDOMNode ( this . link [ 0 ] ) ;
2011-09-13 01:43:39 +02:00
} ,
destroy : function ( ) {
2011-09-22 21:02:33 +02:00
this . link . unbind ( ) ;
this . link = null ;
2011-09-13 01:43:39 +02:00
} ,
set _value : function ( _value ) {
2011-10-18 22:09:48 +02:00
if ( typeof _value != 'object' && _value && ! this . options . application )
{
console . warn ( "Bad value for link widget. Need an object with keys 'app', 'id', and optionally 'title'" , _value ) ;
2011-09-13 01:43:39 +02:00
return ;
}
2011-10-18 22:09:48 +02:00
// Application set, just passed ID
else if ( _value == parseInt ( _value ) )
2011-09-13 01:43:39 +02:00
{
2011-10-18 22:09:48 +02:00
_value = {
app : this . options . application ,
id : _value
} ;
}
if ( ! _value || jQuery . isEmptyObject ( _value ) ) {
this . link . text ( "" ) . unbind ( ) ;
2011-09-13 01:43:39 +02:00
return ;
}
2011-09-14 02:06:04 +02:00
if ( ! _value . title ) {
2011-10-18 22:09:48 +02:00
var self = this ;
2012-03-02 11:44:56 +01:00
var title = this . egw ( ) . link _title ( _value . app , _value . id , function ( title ) { self . set _title ( self . link [ 0 ] , title ) ; } , this ) ;
2011-09-14 02:06:04 +02:00
if ( title != null ) {
_value . title = title ;
}
else
{
// Title will be fetched from server and then set
return ;
}
}
2011-10-18 22:09:48 +02:00
this . set _title ( this . link , _value . title ) ;
2012-03-02 13:41:29 +01:00
var self = this ;
2011-10-18 22:09:48 +02:00
this . link . unbind ( )
2012-03-02 13:41:29 +01:00
. click ( function ( ) { self . egw ( ) . open ( _value . id , _value . app , "edit" , _value . extra ) ; } ) ;
2011-09-13 01:43:39 +02:00
} ,
2011-10-18 22:09:48 +02:00
/ * *
* Sets the text to be displayed .
* Used as a callback , so node is provided to make sure we get the right one
* /
set _title : function ( node , _value ) {
jQuery ( node ) . text ( _value + "" ) ;
} ,
2011-09-13 01:43:39 +02:00
/ * *
* Creates a list of attributes which can be set when working in the
* "detached" mode . The result is stored in the _attrs array which is provided
* by the calling code .
* /
getDetachedAttributes : function ( _attrs ) {
_attrs . push ( "value" ) ;
} ,
/ * *
* Returns an array of DOM nodes . The ( relatively ) same DOM - Nodes have to be
* passed to the "setDetachedAttributes" function in the same order .
* /
getDetachedNodes : function ( ) {
return [ this . node ] ;
} ,
/ * *
* Sets the given associative attribute - > value array and applies the
* attributes to the given DOM - Node .
*
* @ param _nodes is an array of nodes which have to be in the same order as
* the nodes returned by "getDetachedNodes"
* @ param _values is an associative array which contains a subset of attributes
* returned by the "getDetachedAttributes" function and sets them to the
* given values .
* /
setDetachedAttributes : function ( _nodes , _values ) {
2011-09-22 21:02:33 +02:00
this . link = $j ( _nodes [ 0 ] ) ;
2011-09-13 01:43:39 +02:00
this . set _value ( _values [ "value" ] ) ;
}
} ) ;
2011-10-18 22:09:48 +02:00
et2 _register _widget ( et2 _link , [ "link" , "link-entry_ro" ] ) ;
2011-09-13 01:43:39 +02:00
/ * *
* UI widget for one or more links , comma separated
* /
var et2 _link _string = et2 _valueWidget . extend ( [ et2 _IDetachedDOM ] , {
attributes : {
"application" : {
"name" : "Application" ,
"type" : "string" ,
"default" : "" ,
"description" : "Use the given application, so you can pass just the ID for value"
} ,
"value" : {
2011-09-14 02:06:04 +02:00
"description" : "Either an array of link information (see egw_link::link()) or array with keys to_app and to_id" ,
"type" : "any"
} ,
"only_app" : {
"name" : "Application filter" ,
"type" : "string" ,
"default" : "" ,
"description" : "Appname, eg. 'projectmananager' to list only linked projects"
} ,
"link_type" : {
"name" : "Type filter" ,
"type" : "string" ,
"default" : "" ,
"description" : "Sub-type key to list only entries of that type"
2011-09-13 01:43:39 +02:00
}
} ,
init : function ( ) {
this . _super . apply ( this , arguments ) ;
2011-09-08 01:32:24 +02:00
2011-09-14 02:06:04 +02:00
this . list = $j ( document . createElement ( "ul" ) )
2011-09-13 01:43:39 +02:00
. addClass ( "et2_link_string" ) ;
2011-09-08 01:32:24 +02:00
2011-09-13 01:43:39 +02:00
if ( this . options . class ) this . node . addClass ( this . options . class ) ;
2011-09-14 02:06:04 +02:00
this . setDOMNode ( this . list [ 0 ] ) ;
2011-09-13 01:43:39 +02:00
} ,
destroy : function ( ) {
this . _super . apply ( this , arguments ) ;
2012-03-01 11:13:12 +01:00
if ( this . node != null ) {
this . node . children ( ) . unbind ( ) ;
}
2011-09-13 01:43:39 +02:00
} ,
set _value : function ( _value ) {
// Get data
2011-09-14 02:06:04 +02:00
if ( ! _value || _value == null ) return ;
if ( ! _value . to _app && this . options . application ) _value . to _app = this . options . application ;
if ( typeof _value == 'object' && _value . to _app && _value . to _id )
{
this . value = _value ;
this . _get _links ( ) ;
return ;
2011-09-13 01:43:39 +02:00
}
2011-09-14 02:06:04 +02:00
if ( _value . length > 0 ) {
// Have full info
// Don't store new value, just update display
this . list . empty ( ) ;
2011-09-13 01:43:39 +02:00
// Make new links
2011-09-14 02:06:04 +02:00
for ( var i = 0 ; i < _value . length ; i ++ )
{
if ( ! this . options . only _app || this . options . only _app && _value [ i ] . app == this . options . only _app )
{
this . _add _link ( _value [ i ] ) ;
}
2011-09-13 01:43:39 +02:00
}
}
} ,
2011-09-14 02:06:04 +02:00
_get _links : function ( ) {
var _value = this . value ;
// Just IDs - get from server
if ( this . options . only _app )
{
_value . only _app = this . options . only _app ;
}
2012-03-02 11:44:56 +01:00
this . egw ( ) . jsonq ( 'etemplate.etemplate_widget_link.ajax_link_list' , [ _value ] , this . set _value , this ) ;
2011-09-14 02:06:04 +02:00
return ;
} ,
2011-09-13 01:43:39 +02:00
_add _link : function ( _link _data ) {
2011-09-14 02:06:04 +02:00
if ( ! _link _data . title ) {
// No callback yet, need something to do with it
2012-03-02 11:44:56 +01:00
var title = this . egw ( ) . link _title ( _link _data . app , _link _data . id ) ;
2011-09-14 02:06:04 +02:00
// Need to set it to something, or call to text() will return current value
if ( title == null || title == false ) _link _data . title = "" ;
}
2012-03-02 13:41:29 +01:00
var self = this ;
2011-09-14 02:06:04 +02:00
var link = $j ( document . createElement ( "li" ) )
. appendTo ( this . list )
2011-09-13 01:43:39 +02:00
. addClass ( "et2_link" )
2012-03-02 13:41:29 +01:00
. click ( function ( ) { self . egw ( ) . open ( _link _data . id , _link _data . app , "edit" , _link _data . extra ) ; } ) ;
2011-09-22 23:40:21 +02:00
if ( _link _data . title ) link . text ( _link _data . title ) ;
2011-09-14 02:06:04 +02:00
// Now that link is created, get title from server & update
if ( ! _link _data . title ) {
2012-03-02 11:44:56 +01:00
this . egw ( ) . link _title ( _link _data . app , _link _data . id , function ( title ) { this . text ( title ) ; } , link ) ;
2011-09-14 02:06:04 +02:00
}
2011-09-13 01:43:39 +02:00
} ,
/ * *
* Creates a list of attributes which can be set when working in the
* "detached" mode . The result is stored in the _attrs array which is provided
* by the calling code .
* /
getDetachedAttributes : function ( _attrs ) {
_attrs . push ( "value" ) ;
} ,
/ * *
* Returns an array of DOM nodes . The ( relatively ) same DOM - Nodes have to be
* passed to the "setDetachedAttributes" function in the same order .
* /
getDetachedNodes : function ( ) {
2011-09-14 02:06:04 +02:00
return [ this . list [ 0 ] ] ;
2011-09-13 01:43:39 +02:00
} ,
/ * *
* Sets the given associative attribute - > value array and applies the
* attributes to the given DOM - Node .
*
* @ param _nodes is an array of nodes which have to be in the same order as
* the nodes returned by "getDetachedNodes"
* @ param _values is an associative array which contains a subset of attributes
* returned by the "getDetachedAttributes" function and sets them to the
* given values .
* /
setDetachedAttributes : function ( _nodes , _values ) {
2011-09-14 02:06:04 +02:00
this . list = $j ( _nodes [ 0 ] ) ;
2011-09-13 01:43:39 +02:00
this . set _value ( _values [ "value" ] ) ;
}
} ) ;
et2 _register _widget ( et2 _link _string , [ "link-string" ] ) ;
2011-09-14 02:06:04 +02:00
/ * *
* UI widget for one or more links in a list ( table )
* /
var et2 _link _list = et2 _link _string . extend ( {
attributes : {
"show_deleted" : {
"name" : "Show deleted" ,
"type" : "boolean" ,
"default" : false ,
"description" : "Show links that are marked as deleted, being held for purge"
}
} ,
init : function ( ) {
this . _super . apply ( this , arguments ) ;
this . list = $j ( document . createElement ( "table" ) )
. addClass ( "et2_link_list" ) ;
if ( this . options . class ) this . node . addClass ( this . options . class ) ;
this . setDOMNode ( this . list [ 0 ] ) ;
} ,
_add _link : function ( _link _data ) {
var row = $j ( document . createElement ( "tr" ) )
. appendTo ( this . list )
// Icon
//TODO: Needs vfs widget
var icon = $j ( document . createElement ( "td" ) )
. appendTo ( row )
. addClass ( "icon" ) ;
if ( _link _data . icon )
{
var icon _widget = et2 _createWidget ( "image" ) ;
icon _widget . set _src ( _link _data . icon ) ;
icon . append ( icon _widget . getDOMNode ( ) ) ;
}
var columns = [ 'app' , 'title' , 'remark' ] ;
2012-03-02 13:41:29 +01:00
var self = this ;
2011-09-14 02:06:04 +02:00
for ( var i = 0 ; i < columns . length ; i ++ ) {
$j ( document . createElement ( "td" ) )
. appendTo ( row )
. addClass ( columns [ i ] )
2012-03-02 13:41:29 +01:00
. click ( function ( ) { self . egw ( ) . open ( _link _data . id , _link _data . app , "edit" , _link _data . extra ) ; } )
2011-09-23 01:03:37 +02:00
. text ( _link _data [ columns [ i ] ] ) ;
2011-09-14 02:06:04 +02:00
}
// Date
/ *
var date _row = $j ( document . createElement ( "td" ) )
. appendTo ( row ) ;
if ( _link _data . lastmod )
{
var date _widget = et2 _createWidget ( "date-since" ) ;
date _widget . set _value ( _link _data . lastmod ) ;
date _row . append ( date _widget . getDOMNode ( ) ) ;
}
* /
// Delete
var delete _button = $j ( document . createElement ( "td" ) )
. appendTo ( row )
. addClass ( "delete icon" )
. bind ( 'click' , function ( ) {
delete _button . addClass ( "loading" ) . removeClass ( "delete" ) ;
new egw _json _request ( "etemplate.etemplate_widget_link.ajax_delete" , [ _link _data . link _id ] )
. sendRequest ( true , function ( data ) { if ( data ) { row . slideUp ( row . remove ) ; } } ) ;
} ) ;
}
} ) ;
et2 _register _widget ( et2 _link _list , [ "link-list" ] ) ;
2011-09-14 22:36:39 +02:00
/ * *
* UI widget for one or more links in a list ( table )
* /
var et2 _link _add = et2 _inputWidget . extend ( {
attributes : {
"application" : {
"name" : "Application" ,
"type" : "string" ,
"default" : "" ,
"description" : "Limit to the listed application or applications (comma seperated)"
}
} ,
init : function ( ) {
this . _super . apply ( this , arguments ) ;
2012-03-02 11:44:56 +01:00
this . div = jQuery ( document . createElement ( "div" ) ) . text ( this . egw ( ) . lang ( "Add new" ) ) ;
2011-09-14 22:36:39 +02:00
this . setDOMNode ( this . div [ 0 ] ) ;
} ,
doLoadingFinished : function ( ) {
this . _super . apply ( this , arguments ) ;
this . app _select = et2 _createWidget ( "link-apps" , this . options , this ) ;
this . div . append ( this . app _select . getDOMNode ( ) ) ;
2012-03-02 11:44:56 +01:00
this . button = et2 _createWidget ( "button" , { label : this . egw ( ) . lang ( "add" ) } , this ) ;
this . button . set _label ( this . egw ( ) . lang ( "add" ) ) ;
2011-09-14 22:36:39 +02:00
var self = this ;
this . button . click = function ( ) {
2012-03-02 13:41:29 +01:00
self . egw ( ) . open ( self . options . value . to _app + ":" + self . options . value . to _id , self . app _select . get _value ( ) , 'add' ) ;
2011-09-14 22:36:39 +02:00
} ;
this . div . append ( this . button . getDOMNode ( ) ) ;
}
} ) ;
et2 _register _widget ( et2 _link _add , [ "link-add" ] ) ;