Merge branch 'ent-4876-pandora_ui.js' into 'develop'

first changes pandora.js to pandora_ui.js

See merge request artica/pandorafms!2909
This commit is contained in:
Daniel Rodriguez 2020-01-20 09:54:20 +01:00
commit 738361d237
7 changed files with 411 additions and 389 deletions

View File

@ -83,6 +83,7 @@ if (check_login(false) === false) {
<link rel="stylesheet" href="styles/js/jquery-ui.min.css" type="text/css" />
<link rel="stylesheet" href="styles/js/jquery-ui_custom.css" type="text/css" />
<script language="javascript" type='text/javascript' src='javascript/pandora.js'></script>
<script language="javascript" type='text/javascript' src='javascript/pandora_ui.js'></script>
<script language="javascript" type='text/javascript' src='javascript/jquery-3.3.1.min.js'></script>
</head>
<body>
@ -140,6 +141,7 @@ if (file_exists('languages/'.$user_language.'.mo') === true) {
<link rel="stylesheet" href="styles/js/jquery-ui.min.css" type="text/css" />
<link rel="stylesheet" href="styles/js/jquery-ui_custom.css" type="text/css" />
<script language="javascript" type='text/javascript' src='javascript/pandora.js'></script>
<script language="javascript" type='text/javascript' src='javascript/pandora_ui.js'></script>
<script language="javascript" type='text/javascript' src='javascript/jquery-3.3.1.min.js'></script>
<script language="javascript" type='text/javascript' src='javascript/jquery.pandora.js'></script>
<script language="javascript" type='text/javascript' src='javascript/jquery-ui.min.js'></script>

View File

@ -1892,7 +1892,13 @@ function ui_process_page_head($string, $bitfield)
}
// Pandora specific JavaScript should go first.
$config['js'] = array_merge(['pandora' => 'include/javascript/pandora.js'], $config['js']);
$config['js'] = array_merge(
[
'pandora' => 'include/javascript/pandora.js',
'pandora_ui' => 'include/javascript/pandora_ui.js',
],
$config['js']
);
// Load base64 javascript library.
$config['js']['base64'] = 'include/javascript/encode_decode_base64.js';
// Load webchat javascript library.

View File

@ -1826,342 +1826,6 @@ function ellipsize(str, max, ellipse) {
return str.trim().length > max ? str.substr(0, max).trim() + ellipse : str;
}
/**
* 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);
}
}
// 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);
if (settings.onshow.extradata != undefined) {
data.append("extradata", JSON.stringify(settings.onshow.extradata));
}
if (settings.target == undefined) {
var uniq = uniqId();
var div = document.createElement("div");
div.id = "div-modal-" + uniq;
div.style.display = "none";
document.getElementById("main").append(div);
var id_modal_target = "#div-modal-" + uniq;
settings.target = $(id_modal_target);
}
var width = 630;
if (settings.onshow.width) {
width = settings.onshow.width;
}
if (settings.modal.overlay == undefined) {
settings.modal.overlay = {
opacity: 0.5,
background: "black"
};
}
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: settings.modal.overlay,
buttons: required_buttons,
closeOnEscape: false,
open: function() {
$(".ui-dialog-titlebar-close").hide();
},
close: function() {
if (id_modal_target != undefined) {
$(id_modal_target).remove();
}
}
});
},
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 = uniqId();
$("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 uniqId() {
var randomStr =
Math.random()
@ -2174,58 +1838,6 @@ function uniqId() {
return randomStr;
}
/**
* 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");
}
}
}
]
});
}
/**
* Function for AJAX request.
*

View File

@ -0,0 +1,399 @@
/* global $ */
/* exported load_modal */
/*JS to Show user modals :
- Confirm dialogs.
- Display dialogs.
- Load modal windows.
- Logo Previews.
- General show messages.
*/
var ENTERPRISE_DIR = "enterprise";
/**
* 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);
}
}
// 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);
if (settings.onshow.extradata != undefined) {
data.append("extradata", JSON.stringify(settings.onshow.extradata));
}
if (settings.target == undefined) {
var uniq = uniqId();
var div = document.createElement("div");
div.id = "div-modal-" + uniq;
div.style.display = "none";
document.getElementById("main").append(div);
var id_modal_target = "#div-modal-" + uniq;
settings.target = $(id_modal_target);
}
var width = 630;
if (settings.onshow.width) {
width = settings.onshow.width;
}
if (settings.modal.overlay == undefined) {
settings.modal.overlay = {
opacity: 0.5,
background: "black"
};
}
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: settings.modal.overlay,
buttons: required_buttons,
closeOnEscape: false,
open: function() {
$(".ui-dialog-titlebar-close").hide();
},
close: function() {
if (id_modal_target != undefined) {
$(id_modal_target).remove();
}
}
});
},
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 = uniqId();
$("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");
}
}
}
]
});
}

View File

@ -775,6 +775,7 @@ class Ui
echo " <script src='include/javascript/jquery.js'></script>\n";
echo " <script src='include/javascript/jquery.mobile-1.3.1.js'></script>\n";
echo " <script src='../include/javascript/pandora.js'></script>\n";
echo " <script src='../include/javascript/pandora_ui.js'></script>\n";
echo " </head>\n";
echo " <body>\n";

View File

@ -65,6 +65,7 @@ echo '<link rel="stylesheet" href="../../include/styles/pandora.css" type="text/
<link rel="stylesheet" href="../../include/styles/pandora_minimal.css" type="text/css" />
<link rel="stylesheet" href="../../include/styles/js/jquery-ui.min.css" type="text/css" />
<script type='text/javascript' src='../../include/javascript/pandora.js'></script>
<script type='text/javascript' src='../../include/javascript/pandora_ui.js'></script>
<script type='text/javascript' src='../../include/javascript/jquery-3.3.1.min.js'></script>
<script type='text/javascript' src='../../include/javascript/jquery.pandora.js'></script>
<script type='text/javascript' src='../../include/javascript/jquery-ui.min.js'></script>

View File

@ -73,6 +73,7 @@ $label = db_get_value('nombre', 'tagente_modulo', 'id_agente_modulo', $id)
<link rel="stylesheet" href="../../include/styles/js/jquery-ui.min.css" type="text/css" />
<link rel="stylesheet" href="../../include/styles/js/jquery-ui_custom.css" type="text/css" />
<script type='text/javascript' src='../../include/javascript/pandora.js'></script>
<script type='text/javascript' src='../../include/javascript/pandora_ui.js'></script>
<script type='text/javascript' src='../../include/javascript/jquery-3.3.1.min.js'></script>
<script type='text/javascript' src='../../include/javascript/jquery.pandora.js'></script>
<script type='text/javascript' src='../../include/javascript/jquery-ui.min.js'></script>