Load app hooks with ajax=true into a div instead of an iframe

This commit is contained in:
nathangray 2016-06-29 09:48:54 -06:00
parent 407b405c36
commit 7c3d97ba12
3 changed files with 54 additions and 6 deletions

View File

@ -90,7 +90,6 @@ class admin_ui
{ {
$vars = $_GET; $vars = $_GET;
$vars['menuaction'] = $vars['load']; $vars['menuaction'] = $vars['load'];
unset($vars['ajax']);
unset($vars['load']); unset($vars['load']);
$content['iframe'] = Egw::link('/index.php', $vars); $content['iframe'] = Egw::link('/index.php', $vars);
} }

View File

@ -35,6 +35,13 @@ app.classes.admin = AppJS.extend(
*/ */
nm: null, nm: null,
/**
* Refarence to div to hold AJAX loadable pages
*
* {et2_box}
*/
ajax_target: null,
/** /**
* Reference to ACL edit dialog (not the list) * Reference to ACL edit dialog (not the list)
*/ */
@ -82,6 +89,7 @@ app.classes.admin = AppJS.extend(
case 'admin.index': case 'admin.index':
var iframe = this.iframe = this.et2.getWidgetById('iframe'); var iframe = this.iframe = this.et2.getWidgetById('iframe');
this.nm = this.et2.getWidgetById('nm'); this.nm = this.et2.getWidgetById('nm');
this.ajax_target = this.et2.getWidgetById('ajax_target');
if (iframe) if (iframe)
{ {
var self = this; var self = this;
@ -130,9 +138,35 @@ app.classes.admin = AppJS.extend(
window.open(_url, '_blank'); window.open(_url, '_blank');
return; return;
} }
var ajax = false;
if (_url) if (_url)
{ {
this.iframe.set_src(_url); // Try to load it without the iframe
ajax = _url.match(/ajax=true/);
if(ajax)
{
if(this.ajax_target.node.children.length)
{
// Node has children already? Check for loading over an
// existing etemplate, and remove it first
jQuery(this.ajax_target.node.children).each(function() {
var old = etemplate2.getById(this.id);
if(old) old.clear();
});
jQuery(this.ajax_target.node).empty();
}
this.egw.json(
framework.activeApp.getMenuaction('ajax_exec'),
// It's important that the context is null, or etemplate2
// won't load the template properly
[_url], this._ajax_load_callback,null, true, this
).sendRequest();
}
else
{
this.iframe.set_src(_url);
}
} }
else else
{ {
@ -140,8 +174,9 @@ app.classes.admin = AppJS.extend(
// blank iframe, to not keep something running there // blank iframe, to not keep something running there
this.iframe.getDOMNode().contentDocument.location.href = 'about:blank'; this.iframe.getDOMNode().contentDocument.location.href = 'about:blank';
} }
this.iframe.set_disabled(!_url); this.iframe.set_disabled(!_url || ajax);
this.nm.set_disabled(!!_url); this.nm.set_disabled(!!_url || ajax);
this.ajax_target.set_disabled(!ajax);
}, },
/** /**
@ -263,6 +298,19 @@ app.classes.admin = AppJS.extend(
this.load(url); this.load(url);
}, },
/**
* Callback to load an etemplate
*
* @param {Object} data
*/
_ajax_load_callback: function(_data)
{
if(!_data || _data.type != undefined) return;
// Insert the content, etemplate will load into it
jQuery(this.ajax_target.node).append(_data[0]);
},
/** /**
* Link hander for jDots template to just reload our iframe, instead of reloading whole admin app * Link hander for jDots template to just reload our iframe, instead of reloading whole admin app
* *
@ -276,7 +324,7 @@ app.classes.admin = AppJS.extend(
{ {
if (matches) if (matches)
{ {
_url = _url.replace(/menuaction=admin.admin_ui.index/, 'menuaction='+matches[1]).replace(/&(ajax=true|load=[^&]+)/g, ''); _url = _url.replace(/menuaction=admin.admin_ui.index/, 'menuaction='+matches[1]).replace(/&(load=[^&]+)/g, '');
} }
this.load(_url); this.load(_url);
return true; return true;

View File

@ -50,5 +50,6 @@
<tree autoloading="admin_ui::ajax_tree" id="tree" onclick="app.admin.run" parent_node="admin_tree_target" std_images="bullet"/> <tree autoloading="admin_ui::ajax_tree" id="tree" onclick="app.admin.run" parent_node="admin_tree_target" std_images="bullet"/>
<nextmatch id="nm" template="admin.index.rows" header_left="admin.index.add"/> <nextmatch id="nm" template="admin.index.rows" header_left="admin.index.add"/>
<iframe frameborder="1" height="100%" id="iframe" scrolling="auto" width="100%" disabled="true"/> <iframe frameborder="1" height="100%" id="iframe" scrolling="auto" width="100%" disabled="true"/>
<box id="ajax_target" height="99%" disabled="true"/>
</template> </template>
</overlay> </overlay>