gadjo.js: load script tag in displayPopup (#16658)

It allows forms using JS widgets to be loaded using link with rel="popup".
This commit is contained in:
Benjamin Dauvergne 2017-06-01 17:13:11 +02:00
parent 35732cf0ab
commit b9c8cfaef6
1 changed files with 123 additions and 93 deletions

View File

@ -3,6 +3,14 @@ var gadjo_js = gadjo_js || {};
if (gadjo_js.loaded) return
gadjo_js.loaded = true;
var $ = jQuery;
var popup_script_loaded = {};
var deferred_timeout = function (duration) {
var dfd = $.Deferred();
setTimeout(function () {
dfd.resolve();
}, duration);
return dfd.promise();
}
window.displayPopup = function(event)
{
/* Opens the target link into a dialog box
@ -106,105 +114,127 @@ var gadjo_js = gadjo_js || {};
var html = html;
}
var $html = $(html);
/* get content and form (if different) ouf of html */
var $content = $html.find(selector);
if ($content.is('form')) {
var $form = $content;
} else {
var $form = $content.find('form');
}
/* get title out of html */
var title = $html.find(title_selector).text();
$form.dialog({
modal: modal,
'title': title,
width: 'auto',
close: function (ev, ui) {
$(this).dialog('destroy');
},
});
/* if the form doesn't have an @action attribute, set it to URL */
if (! $form.attr('action')) {
$form.attr('action', url);
}
/* hide buttons from content and convert buttons (<button> and <a>)
* into proper dialog buttons */
$form.find('.buttons').hide();
var buttons = Array();
$form.find('.buttons button, .buttons a').each(function(idx, elem) {
var $elem = $(elem);
var button = Object();
button.text = $elem.text();
if ($elem.prop('disabled')) {
button.disabled = 'disabled';
/* load additional scripts from popup */
var $script = $html.filter('script[src]');
var loading = [];
for (var i = 0; i < $script.length; i++) {
var script = $script[i];
var src = script.attributes.src.value;
if ($('script[src="' + src + '"]').length) {
continue;
}
if ($elem.hasClass('cancel')) {
/* special behaviour for the cancel button: do not send
* anything to server, just close the dialog */
button.click = function() { $form.dialog('destroy'); return false; };
if (popup_script_loaded[src]) {
continue;
}
popup_script_loaded[src] = true;
loading.push($.ajax({
url: src,
dataType: 'script',
cache: true,
success: function () {},
}));
}
/* add millisecond timeout to let additional scripts load */
$.when(loading, deferred_timeout(100)).always(function () {
/* get content and form (if different) ouf of html */
var $content = $html.find(selector);
if ($content.is('form')) {
var $form = $content;
} else {
button.click = function() {
if (inplace_submit) {
var action_url = $form.attr('action');
if ($form[0].checkValidity() === false) {
/* if HTML5 validation fails, we trigger a
* click to get the errors displayed */
$form.find('button').click();
return false;
}
$('.ui-dialog-buttonpane button').button('disable');
$.ajax({
type: 'POST',
url: action_url,
data: $form.serialize(),
}).success(function(data) {
$anchor.trigger('gadjo:dialog-done', data);
$form.dialog('destroy');
}).fail(function() { $anchor.trigger('gadjo:dialog-submit-error');
});
} else {
$form.find('button').click();
}
return false;
};
var $form = $content.find('form');
}
/* add custom classes to some buttons */
if ($elem.hasClass('submit-button')) {
button.class = 'submit-button';
} else if ($elem.hasClass('cancel') || $elem.hasClass('cancel-button')) {
button.class = 'cancel-button';
} else if ($elem.hasClass('delete-button')) {
button.class = 'delete-button';
}
buttons.push(button);
});
/* get title out of html */
var title = $html.find(title_selector).text();
buttons.reverse();
$form.dialog('option', 'buttons', buttons);
/* focus initial input field */
if ($form.find('input:visible').length) {
$form.find('input:visible')[0].focus();
}
/* if received content was in json, apply jQuery Form plugin on it */
if (is_json && $.fn.ajaxForm != undefined) {
$form.ajaxForm({
success: ajaxform_submit,
error: function (jqXHR, textStatus, errorThrown) {
show_error("Dialog box submit failed: " + textStatus + " " + errorThrown);
}
$form.dialog({
modal: modal,
'title': title,
width: 'auto',
close: function (ev, ui) {
$(this).dialog('destroy');
},
});
}
$anchor.trigger('gadjo:dialog-loaded', $form);
/* if the form doesn't have an @action attribute, set it to URL */
if (! $form.attr('action')) {
$form.attr('action', url);
}
/* hide buttons from content and convert buttons (<button> and <a>)
* into proper dialog buttons */
$form.find('.buttons').hide();
var buttons = Array();
$form.find('.buttons button, .buttons a').each(function(idx, elem) {
var $elem = $(elem);
var button = Object();
button.text = $elem.text();
if ($elem.prop('disabled')) {
button.disabled = 'disabled';
}
if ($elem.hasClass('cancel')) {
/* special behaviour for the cancel button: do not send
* anything to server, just close the dialog */
button.click = function() { $form.dialog('destroy'); return false; };
} else {
button.click = function() {
if (inplace_submit) {
var action_url = $form.attr('action');
if ($form[0].checkValidity() === false) {
/* if HTML5 validation fails, we trigger a
* click to get the errors displayed */
$form.find('button').click();
return false;
}
$('.ui-dialog-buttonpane button').button('disable');
$.ajax({
type: 'POST',
url: action_url,
data: $form.serialize(),
}).success(function(data) {
$anchor.trigger('gadjo:dialog-done', data);
$form.dialog('destroy');
}).fail(function() { $anchor.trigger('gadjo:dialog-submit-error');
});
} else {
$form.find('button').click();
}
return false;
};
}
/* add custom classes to some buttons */
if ($elem.hasClass('submit-button')) {
button.class = 'submit-button';
} else if ($elem.hasClass('cancel') || $elem.hasClass('cancel-button')) {
button.class = 'cancel-button';
} else if ($elem.hasClass('delete-button')) {
button.class = 'delete-button';
}
buttons.push(button);
});
buttons.reverse();
$form.dialog('option', 'buttons', buttons);
/* focus initial input field */
if ($form.find('input:visible').length) {
$form.find('input:visible')[0].focus();
}
/* if received content was in json, apply jQuery Form plugin on it */
if (is_json && $.fn.ajaxForm != undefined) {
$form.ajaxForm({
success: ajaxform_submit,
error: function (jqXHR, textStatus, errorThrown) {
show_error("Dialog box submit failed: " + textStatus + " " + errorThrown);
}
});
}
$anchor.trigger('gadjo:dialog-loaded', $form);
});
return false;
},
error: function (jqXHR, textStatus, errorThrown) {