Add a base object for application javascript code to contain it, and solve initialization timing issues

This commit is contained in:
Nathan Gray 2013-04-09 08:45:59 +00:00
parent cd0356219c
commit 978a90852c
5 changed files with 127 additions and 5 deletions

View File

@ -169,9 +169,9 @@ class etemplate_new extends etemplate_widget_template
// load translations // load translations
translation::add_app('etemplate'); translation::add_app('etemplate');
$langRequire = array(); $langRequire = array();
foreach(translation::$loaded_apps as $app => $lang) foreach(translation::$loaded_apps as $l_app => $lang)
{ {
$langRequire[] = array('app' => $app, 'lang' => $lang); $langRequire[] = array('app' => $l_app, 'lang' => $lang);
} }
// check if we are in an ajax-exec call from jdots template (or future other tabed templates) // check if we are in an ajax-exec call from jdots template (or future other tabed templates)
@ -186,8 +186,20 @@ class etemplate_new extends etemplate_widget_template
egw(window).includeJS('.json_encode(egw_framework::get_script_links(true, true)). // return and clear egw(window).includeJS('.json_encode(egw_framework::get_script_links(true, true)). // return and clear
',function() { ',function() {
egw.debug("info", "Instanciating etemplate2 object for '.$this->name.'"); egw.debug("info", "Instanciating etemplate2 object for '.$this->name.'");
// Setup callback to initialize application js
var callback = null;
// Only initialize once
if(typeof app["'.$app.'"] == "function")
{
(function() { new app["'.$app.'"]();}).call();
}
if(typeof app["'.$app.'"] == "object")
{
callback = function() {new app["'.$app.'"]()};
}
var et2 = new etemplate2(document.getElementById("container"), "etemplate::ajax_process_content"); var et2 = new etemplate2(document.getElementById("container"), "etemplate::ajax_process_content");
et2.load("'.$this->name.'","'.$GLOBALS['egw_info']['server']['webserver_url'].$this->rel_path.'",'.json_encode($data).'); et2.load("'.$this->name.'","'.$GLOBALS['egw_info']['server']['webserver_url'].$this->rel_path.'",'.json_encode($data).', callback);
}, window, egw.webserverUrl); }, window, egw.webserverUrl);
}); });
</script> </script>
@ -202,8 +214,19 @@ class etemplate_new extends etemplate_widget_template
egw.LAB.wait(function() { egw.LAB.wait(function() {
egw.langRequire(window, '.json_encode($langRequire).'); egw.langRequire(window, '.json_encode($langRequire).');
egw(window).ready(function() { egw(window).ready(function() {
// Initialize application js
var callback = null;
// Only initialize once
if(typeof app["'.$app.'"] == "function")
{
(function() { new app["'.$app.'"]();}).call();
}
if(typeof app["'.$app.'"] == "object")
{
callback = function(et2) {app["'.$app.'"].et2_ready(et2)};
}
var et2 = new etemplate2(document.getElementById("container"), "etemplate::ajax_process_content"); var et2 = new etemplate2(document.getElementById("container"), "etemplate::ajax_process_content");
et2.load("'.$this->name.'","'.$GLOBALS['egw_info']['server']['webserver_url'].$this->rel_path.'",'.json_encode($data).'); et2.load("'.$this->name.'","'.$GLOBALS['egw_info']['server']['webserver_url'].$this->rel_path.'",'.json_encode($data).',callback);
}, null, true); }, null, true);
}); });
</script> </script>

View File

@ -181,7 +181,7 @@ etemplate2.prototype._createArrayManagers = function(_data)
/** /**
* Loads the template from the given URL and sets the data object * Loads the template from the given URL and sets the data object
*/ */
etemplate2.prototype.load = function(_name, _url, _data) etemplate2.prototype.load = function(_name, _url, _data, _callback)
{ {
egw().debug("info", "Loaded data", _data); egw().debug("info", "Loaded data", _data);
@ -243,6 +243,11 @@ etemplate2.prototype.load = function(_name, _url, _data)
// Trigger the "resize" event // Trigger the "resize" event
this.resize(); this.resize();
if(typeof _callback == "function")
{
_callback.call(window,this);
}
}, this); }, this);
// Split the given data into array manager objects and pass those to the // Split the given data into array manager objects and pass those to the

View File

@ -361,11 +361,22 @@ egwFnct.prototype.setValue = function(_value)
typeof window[_value.substr(11)] == "function") typeof window[_value.substr(11)] == "function")
{ {
this.fnct = window[_value.substr(11)]; this.fnct = window[_value.substr(11)];
console.log("Global function is bad!", _value);
} }
else if (this.acceptedTypes.indexOf(typeof _value) >= 0) else if (this.acceptedTypes.indexOf(typeof _value) >= 0)
{ {
this.value = _value; this.value = _value;
} }
else if (typeof _value == "string" &&
_value.substr(0,15) == "javaScript:app." && window.app)
{
var parts = _value.split(".");
if(parts.length == 3 && typeof window.app[parts[1]] == "object" &&
typeof window.app[parts[1]][parts[2]] == "function")
{
this.fnct = window.app[parts[1]][parts[2]];
}
}
} }
/** /**

View File

@ -0,0 +1,81 @@
/**
* EGroupware clientside Application javascript base 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
* @version $Id$
*/
"use strict";
/*egw:uses
egw_core;
*/
window.app = {};
/**
* Common base class for application javascript
* Each app should extend as needed.
*
* All application javascript should be inside. Intitialization goes in init(),
* clean-up code goes in destroy(). Initialization is done once all js is loaded.
*
* var app.appname = AppJS.extend({
* // Actually set this one, the rest is example
* appname: appname,
*
* internal_var: 1000,
*
* init: function()
* {
* // Call the super
* this._super.apply(this, arguments);
*
* // Init the stuff
* if ( egw.preference('dateformat', 'common') )
* {
* // etc
* }
* },
* _private: function()
* {
* // Underscore private by convention
* }
* });
*/
var AppJS = Class.extend({
/**
* Internal application name - override this
*/
appname: '',
/**
* Initialization and setup goes here, but the etemplate2 object
* is not yet ready.
*/
init: function() {
window.app[this.appname] = this;
},
/**
* Clean up any created objects & references
*/
destroy: function() {
delete window.app[this.appname];
},
/**
* This function is called when the etemplate2 object is loaded
* and ready. If you must store a reference to the et2 object,
* make sure to clean it up in destroy().
*
* @param et2 etemplate2 Newly ready object
*/
et2_ready: function(et2) {
}
});

View File

@ -30,6 +30,8 @@
egw_calendar; egw_calendar;
egw_ready; egw_ready;
egw_data; egw_data;
egw_inheritance;
// egw_jquery; // egw_jquery;
app_base;
*/ */