418 lines
11 KiB
JavaScript
418 lines
11 KiB
JavaScript
|
/* global $ */
|
||
|
|
/* exported load_modal */
|
||
|
|
|
||
|
|
var ENTERPRISE_DIR = "enterprise";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Display a confirm dialog box
|
||
|
|
*
|
||
|
|
* @param string Text to display
|
||
|
|
* @param string Ok button text
|
||
|
|
* @param string Cancel button text
|
||
|
|
* @param function Callback to action when ok button is pressed
|
||
|
|
*/
|
||
|
|
function display_confirm_dialog(message, ok_text, cancel_text, ok_function) {
|
||
|
|
// Clean function to close the dialog
|
||
|
|
var clean_function = function() {
|
||
|
|
$("#pandora_confirm_dialog_text").hide();
|
||
|
|
$("#pandora_confirm_dialog_text").remove();
|
||
|
|
};
|
||
|
|
|
||
|
|
// Modify the ok function to close the dialog too
|
||
|
|
var ok_function_clean = function() {
|
||
|
|
ok_function();
|
||
|
|
clean_function();
|
||
|
|
};
|
||
|
|
|
||
|
|
var buttons_obj = {};
|
||
|
|
buttons_obj[cancel_text] = clean_function;
|
||
|
|
buttons_obj[ok_text] = ok_function_clean;
|
||
|
|
|
||
|
|
// Display the dialog
|
||
|
|
$("body").append(
|
||
|
|
'<div id="pandora_confirm_dialog_text"><h3>' + message + "</h3></div>"
|
||
|
|
);
|
||
|
|
$("#pandora_confirm_dialog_text").dialog({
|
||
|
|
resizable: false,
|
||
|
|
draggable: true,
|
||
|
|
modal: true,
|
||
|
|
dialogClass: "pandora_confirm_dialog",
|
||
|
|
overlay: {
|
||
|
|
opacity: 0.5,
|
||
|
|
background: "black"
|
||
|
|
},
|
||
|
|
closeOnEscape: true,
|
||
|
|
modal: true,
|
||
|
|
buttons: buttons_obj
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
// Advanced Form control.
|
||
|
|
function load_modal(settings) {
|
||
|
|
var AJAX_RUNNING = 0;
|
||
|
|
var data = new FormData();
|
||
|
|
if (settings.extradata) {
|
||
|
|
settings.extradata.forEach(function(item) {
|
||
|
|
if (item.value != undefined) data.append(item.name, item.value);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
data.append("page", settings.onshow.page);
|
||
|
|
data.append("method", settings.onshow.method);
|
||
|
|
|
||
|
|
var width = 630;
|
||
|
|
if (settings.onshow.width) {
|
||
|
|
width = settings.onshow.width;
|
||
|
|
}
|
||
|
|
|
||
|
|
settings.target.html("Loading modal...");
|
||
|
|
settings.target
|
||
|
|
.dialog({
|
||
|
|
title: "Loading",
|
||
|
|
close: false,
|
||
|
|
width: 200,
|
||
|
|
buttons: []
|
||
|
|
})
|
||
|
|
.show();
|
||
|
|
var required_buttons = [];
|
||
|
|
if (settings.modal.cancel != undefined) {
|
||
|
|
//The variable contains a function
|
||
|
|
// that is responsible for executing the method it receives from settings
|
||
|
|
// which confirms the closure of a modal
|
||
|
|
var cancelModal = function() {
|
||
|
|
settings.target.dialog("close");
|
||
|
|
if (AJAX_RUNNING) return;
|
||
|
|
AJAX_RUNNING = 1;
|
||
|
|
var formdata = new FormData();
|
||
|
|
|
||
|
|
formdata.append("page", settings.oncancel.page);
|
||
|
|
formdata.append("method", settings.oncancel.method);
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
method: "post",
|
||
|
|
url: settings.url,
|
||
|
|
processData: false,
|
||
|
|
contentType: false,
|
||
|
|
data: formdata,
|
||
|
|
success: function(data) {
|
||
|
|
if (typeof settings.oncancel.callback == "function") {
|
||
|
|
settings.oncancel.callback(data);
|
||
|
|
settings.target.dialog("close");
|
||
|
|
}
|
||
|
|
AJAX_RUNNING = 0;
|
||
|
|
},
|
||
|
|
error: function(data) {
|
||
|
|
// console.log(data);
|
||
|
|
AJAX_RUNNING = 0;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
required_buttons.push({
|
||
|
|
class:
|
||
|
|
"ui-widget ui-state-default ui-corner-all ui-button-text-only sub upd submit-cancel",
|
||
|
|
text: settings.modal.cancel,
|
||
|
|
click: function() {
|
||
|
|
if (settings.oncancel != undefined) {
|
||
|
|
if (typeof settings.oncancel.confirm == "function") {
|
||
|
|
//receive function
|
||
|
|
settings.oncancel.confirm(cancelModal);
|
||
|
|
} else if (settings.oncancel != undefined) {
|
||
|
|
cancelModal();
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
$(this).dialog("close");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
if (settings.modal.ok != undefined) {
|
||
|
|
required_buttons.push({
|
||
|
|
class:
|
||
|
|
"ui-widget ui-state-default ui-corner-all ui-button-text-only sub ok submit-next",
|
||
|
|
text: settings.modal.ok,
|
||
|
|
click: function() {
|
||
|
|
if (AJAX_RUNNING) return;
|
||
|
|
|
||
|
|
if (settings.onsubmit != undefined) {
|
||
|
|
if (settings.onsubmit.preaction != undefined) {
|
||
|
|
settings.onsubmit.preaction();
|
||
|
|
}
|
||
|
|
AJAX_RUNNING = 1;
|
||
|
|
if (settings.onsubmit.dataType == undefined) {
|
||
|
|
settings.onsubmit.dataType = "html";
|
||
|
|
}
|
||
|
|
|
||
|
|
var formdata = new FormData();
|
||
|
|
if (settings.extradata) {
|
||
|
|
settings.extradata.forEach(function(item) {
|
||
|
|
if (item.value != undefined)
|
||
|
|
formdata.append(item.name, item.value);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
formdata.append("page", settings.onsubmit.page);
|
||
|
|
formdata.append("method", settings.onsubmit.method);
|
||
|
|
|
||
|
|
var flagError = false;
|
||
|
|
|
||
|
|
$("#" + settings.form + " :input").each(function() {
|
||
|
|
if (this.checkValidity() === false) {
|
||
|
|
$(this).attr("title", this.validationMessage);
|
||
|
|
$(this).tooltip({
|
||
|
|
tooltipClass: "uitooltip",
|
||
|
|
position: {
|
||
|
|
my: "right bottom",
|
||
|
|
at: "right top",
|
||
|
|
using: function(position, feedback) {
|
||
|
|
$(this).css(position);
|
||
|
|
$("<div>")
|
||
|
|
.addClass("arrow")
|
||
|
|
.addClass(feedback.vertical)
|
||
|
|
.addClass(feedback.horizontal)
|
||
|
|
.appendTo(this);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
$(this).tooltip("open");
|
||
|
|
|
||
|
|
var element = $(this);
|
||
|
|
setTimeout(
|
||
|
|
function(element) {
|
||
|
|
element.tooltip("destroy");
|
||
|
|
element.removeAttr("title");
|
||
|
|
},
|
||
|
|
3000,
|
||
|
|
element
|
||
|
|
);
|
||
|
|
|
||
|
|
flagError = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.type == "file") {
|
||
|
|
if ($(this).prop("files")[0]) {
|
||
|
|
formdata.append(this.name, $(this).prop("files")[0]);
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if ($(this).attr("type") == "checkbox") {
|
||
|
|
if (this.checked) {
|
||
|
|
formdata.append(this.name, "on");
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
formdata.append(this.name, $(this).val());
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
if (flagError === false) {
|
||
|
|
$.ajax({
|
||
|
|
method: "post",
|
||
|
|
url: settings.url,
|
||
|
|
processData: false,
|
||
|
|
contentType: false,
|
||
|
|
data: formdata,
|
||
|
|
dataType: settings.onsubmit.dataType,
|
||
|
|
success: function(data) {
|
||
|
|
if (settings.ajax_callback != undefined) {
|
||
|
|
if (settings.idMsgCallback != undefined) {
|
||
|
|
settings.ajax_callback(data, settings.idMsgCallback);
|
||
|
|
} else {
|
||
|
|
settings.ajax_callback(data);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
AJAX_RUNNING = 0;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
AJAX_RUNNING = 0;
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
// No onsumbit configured. Directly close.
|
||
|
|
$(this).dialog("close");
|
||
|
|
}
|
||
|
|
},
|
||
|
|
error: function(data) {
|
||
|
|
// console.log(data);
|
||
|
|
AJAX_RUNNING = 0;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
$.ajax({
|
||
|
|
method: "post",
|
||
|
|
url: settings.url,
|
||
|
|
processData: false,
|
||
|
|
contentType: false,
|
||
|
|
data: data,
|
||
|
|
success: function(data) {
|
||
|
|
settings.target.html(data);
|
||
|
|
if (settings.onload != undefined) {
|
||
|
|
settings.onload(data);
|
||
|
|
}
|
||
|
|
settings.target.dialog({
|
||
|
|
resizable: true,
|
||
|
|
draggable: true,
|
||
|
|
modal: true,
|
||
|
|
title: settings.modal.title,
|
||
|
|
width: width,
|
||
|
|
overlay: {
|
||
|
|
opacity: 0.5,
|
||
|
|
background: "black"
|
||
|
|
},
|
||
|
|
buttons: required_buttons,
|
||
|
|
closeOnEscape: false,
|
||
|
|
open: function() {
|
||
|
|
$(".ui-dialog-titlebar-close").hide();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
error: function(data) {
|
||
|
|
// console.log(data);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
//Function that shows a dialog box to confirm closures of generic manners. The modal id is random
|
||
|
|
function confirmDialog(settings) {
|
||
|
|
var randomStr =
|
||
|
|
Math.random()
|
||
|
|
.toString(36)
|
||
|
|
.substring(2, 15) +
|
||
|
|
Math.random()
|
||
|
|
.toString(36)
|
||
|
|
.substring(2, 15);
|
||
|
|
|
||
|
|
$("body").append(
|
||
|
|
'<div id="confirm_' + randomStr + '">' + settings.message + "</div>"
|
||
|
|
);
|
||
|
|
$("#confirm_" + randomStr);
|
||
|
|
$("#confirm_" + randomStr)
|
||
|
|
.dialog({
|
||
|
|
title: settings.title,
|
||
|
|
close: false,
|
||
|
|
width: 350,
|
||
|
|
modal: true,
|
||
|
|
buttons: [
|
||
|
|
{
|
||
|
|
text: "Cancel",
|
||
|
|
class:
|
||
|
|
"ui-widget ui-state-default ui-corner-all ui-button-text-only sub upd submit-cancel",
|
||
|
|
click: function() {
|
||
|
|
$(this).dialog("close");
|
||
|
|
if (typeof settings.onDeny == "function") settings.onDeny();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "Ok",
|
||
|
|
class:
|
||
|
|
"ui-widget ui-state-default ui-corner-all ui-button-text-only sub ok submit-next",
|
||
|
|
click: function() {
|
||
|
|
$(this).dialog("close");
|
||
|
|
if (typeof settings.onAccept == "function") settings.onAccept();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
})
|
||
|
|
.show();
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Function to show modal with message Validation.
|
||
|
|
*
|
||
|
|
* @param {json} data Json example:
|
||
|
|
* $return = [
|
||
|
|
* 'error' => 0 or 1,
|
||
|
|
* 'title' => [
|
||
|
|
* Failed,
|
||
|
|
* Success,
|
||
|
|
* ],
|
||
|
|
* 'text' => [
|
||
|
|
* Failed,
|
||
|
|
* Success,
|
||
|
|
* ],
|
||
|
|
*];
|
||
|
|
* @param {string} idMsg ID div charge modal.
|
||
|
|
*
|
||
|
|
* @return {void}
|
||
|
|
*/
|
||
|
|
function generalShowMsg(data, idMsg) {
|
||
|
|
var title = data.title[data.error];
|
||
|
|
var text = data.text[data.error];
|
||
|
|
var failed = !data.error;
|
||
|
|
|
||
|
|
$("#" + idMsg).empty();
|
||
|
|
$("#" + idMsg).html(text);
|
||
|
|
$("#" + idMsg).dialog({
|
||
|
|
width: 450,
|
||
|
|
position: {
|
||
|
|
my: "center",
|
||
|
|
at: "center",
|
||
|
|
of: window,
|
||
|
|
collision: "fit"
|
||
|
|
},
|
||
|
|
title: title,
|
||
|
|
buttons: [
|
||
|
|
{
|
||
|
|
class:
|
||
|
|
"ui-widget ui-state-default ui-corner-all ui-button-text-only sub ok submit-next",
|
||
|
|
text: "OK",
|
||
|
|
click: function(e) {
|
||
|
|
if (!failed) {
|
||
|
|
$(".ui-dialog-content").dialog("close");
|
||
|
|
} else {
|
||
|
|
$(this).dialog("close");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Display a dialog with an image
|
||
|
|
*
|
||
|
|
* @param {string} icon_name The name of the icon you will display
|
||
|
|
* @param {string} icon_path The path to the icon
|
||
|
|
* @param {Object} incoming_options All options
|
||
|
|
* grayed: {bool} True to display the background black
|
||
|
|
* title {string} 'Logo preview' by default
|
||
|
|
*/
|
||
|
|
function logo_preview(icon_name, icon_path, incoming_options) {
|
||
|
|
// Get the options
|
||
|
|
options = {
|
||
|
|
grayed: false,
|
||
|
|
title: "Logo preview"
|
||
|
|
};
|
||
|
|
$.extend(options, incoming_options);
|
||
|
|
|
||
|
|
if (icon_name == "") return;
|
||
|
|
|
||
|
|
$dialog = $("<div></div>");
|
||
|
|
$image = $('<img src="' + icon_path + '">');
|
||
|
|
$image.css("max-width", "500px").css("max-height", "500px");
|
||
|
|
|
||
|
|
try {
|
||
|
|
$dialog
|
||
|
|
.hide()
|
||
|
|
.html($image)
|
||
|
|
.dialog({
|
||
|
|
title: options.title,
|
||
|
|
resizable: true,
|
||
|
|
draggable: true,
|
||
|
|
modal: true,
|
||
|
|
dialogClass: options.grayed ? "dialog-grayed" : "",
|
||
|
|
overlay: {
|
||
|
|
opacity: 0.5,
|
||
|
|
background: "black"
|
||
|
|
},
|
||
|
|
minHeight: 1,
|
||
|
|
width: $image.width,
|
||
|
|
close: function() {
|
||
|
|
$dialog.empty().remove();
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.show();
|
||
|
|
} catch (err) {
|
||
|
|
// console.log(err);
|
||
|
|
}
|
||
|
|
}
|