Rework etemplate2 loading to use JSON plugin when loading from regular request & AJAX. instead of inline script tag

This commit is contained in:
Nathan Gray 2013-07-20 13:57:53 +00:00
parent f60fa14c30
commit bd63529096
2 changed files with 106 additions and 88 deletions

View File

@ -133,13 +133,19 @@ class etemplate_new extends etemplate_widget_template
'modifications' => self::$request->modifications,
'validation_errors' => self::$validation_errors,
);
// Info required to load the etemplate client-side
$dom_id = str_replace('.','-',$this->name);
$load_array = array(
'name' => $this->name,
'url' => $GLOBALS['egw_info']['server']['webserver_url'].$this->rel_path,
'data' => $data,
'DOMNodeID' => $dom_id
);
if (self::$response) // call is within an ajax event / form submit
{
self::$response->generic('et2_load', array(
'name' => $this->name,
'url' => $GLOBALS['egw_info']['server']['webserver_url'].$this->rel_path,
'data' => $data,
));
//error_log("Ajax " . __LINE__);
self::$response->generic('et2_load', $load_array);
}
else // first call
{
@ -148,8 +154,7 @@ class etemplate_new extends etemplate_widget_template
// Include the jQuery-UI CSS - many more complex widgets use it
$theme = 'redmond';
egw_framework::includeCSS("/phpgwapi/js/jquery/jquery-ui/$theme/jquery-ui-1.8.21.custom.css");
egw_framework::includeCSS("/phpgwapi/js/jquery/jquery-ui/$theme/jquery-ui-1.10.3.custom.css");
// Load our CSS after jQuery-UI, so we can override it
egw_framework::includeCSS('/etemplate/templates/default/etemplate2.css');
@ -160,11 +165,7 @@ class etemplate_new extends etemplate_widget_template
egw_framework::validate_file('.','app',$app,false);
}
common::egw_header();
if ($output_mode != 2)
{
parse_navbar();
}
// load translations
translation::add_app('etemplate');
$langRequire = array();
@ -173,66 +174,27 @@ class etemplate_new extends etemplate_widget_template
$langRequire[] = array('app' => $l_app, 'lang' => $lang);
}
$dom_id = str_replace('.','-',$this->name);
// check if we are in an ajax-exec call from jdots template (or future other tabed templates)
$header = $GLOBALS['egw']->framework->header(array(
'etemplate' => $load_array
));
// check if we are in an ajax-exec call from jdots template (or future other tabbed templates)
if (isset($GLOBALS['egw']->framework->response))
{
echo '
<div id="' . $dom_id .'" class="et2_container"></div>
<script>
// Wait for all files to be loaded & executed first
egw_LAB.wait(function() {
egw.langRequire(window, '.json_encode($langRequire).');
egw(window).includeJS('.json_encode(egw_framework::get_script_links(true, true)). // return and clear
',function() {
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();
} ' . (!file_exists(EGW_SERVER_ROOT.'/'.$app.'/js/app.js') ? '' :'
else { egw.debug("warn", "Did not load '.$app.' JS object"); }').'
if(typeof app["'.$app.'"] == "object")
{
callback = function(et2) {app["'.$app.'"].et2_ready(et2)};
}
var et2 = new etemplate2(document.getElementById("'.$dom_id.'"), "etemplate::ajax_process_content");
et2.load("'.$this->name.'","'.$GLOBALS['egw_info']['server']['webserver_url'].$this->rel_path.'",'.json_encode($data).', callback);
}, window, egw.webserverUrl);
});
</script>
';
//error_log("Ajax " . __LINE__);
$GLOBALS['egw']->framework->response->generic("data", array('<div id="'.$dom_id.'" class="et2_container"></div>'));
$GLOBALS['egw']->framework->response->generic('et2_load',$load_array);
return;
}
else
{
echo '
<div id="'.$dom_id.'" class="et2_container"></div>
<script>
// Wait for all files to be loaded & executed first
egw_LAB.wait(function() {
egw.langRequire(window, '.json_encode($langRequire).');
egw(window).ready(function() {
// Initialize application js
var callback = null;
// Only initialize once
if(typeof app["'.$app.'"] == "function")
{
(function() { new app["'.$app.'"]();}).call();
} ' . (!file_exists(EGW_SERVER_ROOT.'/'.$app.'/js/app.js') ? '' :'
else { egw.debug("warn", "Did not load '.$app.' JS object"); }') . '
if(typeof app["'.$app.'"] == "object")
{
callback = function(et2) {app["'.$app.'"].et2_ready(et2)};
}
var et2 = new etemplate2(document.getElementById("'.$dom_id.'"), "etemplate::ajax_process_content");
et2.load("'.$this->name.'","'.$GLOBALS['egw_info']['server']['webserver_url'].$this->rel_path.'",'.json_encode($data).',callback);
}, null, true);
});
</script>
';
//error_log("NON-Ajax " . __LINE__);
echo $header;
if ($output_mode != 2)
{
parse_navbar();
}
echo '<div id="'.$dom_id.'" class="et2_container"></div>';
$GLOBALS['egw']->framework->footer();
}
ob_flush();
@ -246,7 +208,6 @@ class etemplate_new extends etemplate_widget_template
unset($response);
echo ')});</script>';
}
common::egw_footer();
}
}
@ -578,7 +539,7 @@ class etemplate_new extends etemplate_widget_template
}
}
// default etemplate class has to be defined by either extending etemplate_new or etemplate_old
class etemplate extends etemplate_old {};
class etemplate extends etemplate_new {};
// Try to discover all widgets, as names don't always match tags (eg: listbox is in menupopup)
$files = scandir(EGW_INCLUDE_ROOT . '/etemplate/inc');

View File

@ -135,7 +135,6 @@ etemplate2.prototype.clear = function()
}
}
}
this.templates = {};
};
/**
@ -195,6 +194,22 @@ etemplate2.prototype.load = function(_name, _url, _data, _callback)
var split = _name.split('.');
var appname = split[0];
// Initialize application js
var app_callback = null;
// Only initialize once
if(typeof app[appname] == "function")
{
(function() { new app[appname]();}).call();
}
else
{
egw.debug("warn", "Did not load '%s' JS object",appname);
}
if(typeof app[appname] == "object")
{
app_callback = function(et2) {app[appname].et2_ready(et2)};
}
// Create the document fragment into which the HTML will be injected
var frag = document.createDocumentFragment();
@ -220,17 +235,7 @@ etemplate2.prototype.load = function(_name, _url, _data, _callback)
// todo for idots or jdots framework
}
// Asynchronously load the XET file
et2_loadXMLFromURL(_url, function(_xmldoc) {
// Scan for templates and store them
for(var i = 0; i < _xmldoc.childNodes.length; i++) {
var template = _xmldoc.childNodes[i];
if(template.nodeName.toLowerCase() != "template") continue;
this.templates[template.getAttribute("id")] = template;
if(!_name) missing_name = template.getAttribute("id");
}
var _load = function() {
// Read the XML structure of the requested template
this.widgetContainer.loadFromXML(this.templates[_name || missing_name]);
@ -254,13 +259,46 @@ etemplate2.prototype.load = function(_name, _url, _data, _callback)
{
_callback.call(window,this);
}
if(_callback != app_callback)
{
app_callback.call(window,this);
}
$j(this.DOMContainer).trigger('load', this);
}, this);
};
// Load & process
if(!this.templates[_name])
{
// Asynchronously load the XET file
et2_loadXMLFromURL(_url, function(_xmldoc) {
// Scan for templates and store them
for(var i = 0; i < _xmldoc.childNodes.length; i++) {
var template = _xmldoc.childNodes[i];
if(template.nodeName.toLowerCase() != "template") continue;
this.templates[template.getAttribute("id")] = template;
if(!_name) missing_name = template.getAttribute("id");
}
_load.apply(this,[]);
}, this);
// Split the given data into array manager objects and pass those to the
// widget container - do this here because file is loaded async
this.widgetContainer.setArrayMgrs(this._createArrayManagers(_data));
}
else
{
// Set array managers first, or errors will happen
this.widgetContainer.setArrayMgrs(this._createArrayManagers(_data));
// Already have it
_load.apply(this,[]);
}
// Split the given data into array manager objects and pass those to the
// widget container
this.widgetContainer.setArrayMgrs(this._createArrayManagers(_data));
};
etemplate2.prototype.submit = function(button)
@ -565,8 +603,27 @@ function etemplate2_handle_load(_type, _response)
var data = _response.data;
if (typeof data.url == "string" && typeof data.data === 'object')
{
this.load(data.name, data.url, data.data);
return true;
if(typeof this.load == 'function')
{
// Called from etemplate
this.load(data.name, data.url, data.data);
return true;
}
else
{
// Not etemplate
var node = document.getElementById(data.DOMNodeID);
if(node)
{
var et2 = new etemplate2(node, "etemplate::ajax_process_content");
et2.load(data.name, data.url, data.data);
return true;
}
else
{
egw.debug("error", "Could not find target node %s", data.DOMNodeId);
}
}
}
throw("Error while parsing et2_load response");