From 1640c03fc31bf1e012f32f00f10fd97cda8ca7fb Mon Sep 17 00:00:00 2001 From: marcos Date: Thu, 21 Nov 2019 16:42:39 +0100 Subject: [PATCH 1/4] first changes pandora.js to pandora_ui.js --- pandora_console/include/chart_generator.php | 2 + pandora_console/include/functions_ui.php | 8 +- pandora_console/include/javascript/pandora.js | 369 ---------------- .../include/javascript/pandora_ui.js | 417 ++++++++++++++++++ pandora_console/mobile/include/ui.class.php | 1 + .../operation/agentes/realtime_win.php | 1 + .../operation/agentes/stat_win.php | 1 + 7 files changed, 429 insertions(+), 370 deletions(-) create mode 100644 pandora_console/include/javascript/pandora_ui.js diff --git a/pandora_console/include/chart_generator.php b/pandora_console/include/chart_generator.php index 0d1d138ae6..a8933b4e34 100644 --- a/pandora_console/include/chart_generator.php +++ b/pandora_console/include/chart_generator.php @@ -83,6 +83,7 @@ if (check_login(false) === false) { + @@ -140,6 +141,7 @@ if (file_exists('languages/'.$user_language.'.mo') === true) { + diff --git a/pandora_console/include/functions_ui.php b/pandora_console/include/functions_ui.php index a430f02fdc..bbde87d1f4 100755 --- a/pandora_console/include/functions_ui.php +++ b/pandora_console/include/functions_ui.php @@ -1880,7 +1880,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. diff --git a/pandora_console/include/javascript/pandora.js b/pandora_console/include/javascript/pandora.js index c3ed855213..f01daf00b0 100644 --- a/pandora_console/include/javascript/pandora.js +++ b/pandora_console/include/javascript/pandora.js @@ -1825,375 +1825,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 = $("
"); - $image = $(''); - $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); - - 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); - $("
") - .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( - '
' + settings.message + "
" - ); - $("#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"); - } - } - } - ] - }); -} - /** * Function for AJAX request. * diff --git a/pandora_console/include/javascript/pandora_ui.js b/pandora_console/include/javascript/pandora_ui.js new file mode 100644 index 0000000000..426659bec4 --- /dev/null +++ b/pandora_console/include/javascript/pandora_ui.js @@ -0,0 +1,417 @@ +/* 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( + '

' + message + "

" + ); + $("#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); + $("
") + .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( + '
' + settings.message + "
" + ); + $("#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 = $("
"); + $image = $(''); + $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); + } +} diff --git a/pandora_console/mobile/include/ui.class.php b/pandora_console/mobile/include/ui.class.php index ff411a86e0..87954cf96e 100755 --- a/pandora_console/mobile/include/ui.class.php +++ b/pandora_console/mobile/include/ui.class.php @@ -775,6 +775,7 @@ class Ui echo " \n"; echo " \n"; echo " \n"; + echo " \n"; echo " \n"; echo " \n"; diff --git a/pandora_console/operation/agentes/realtime_win.php b/pandora_console/operation/agentes/realtime_win.php index 5223a4bb2e..93c8c85ea2 100644 --- a/pandora_console/operation/agentes/realtime_win.php +++ b/pandora_console/operation/agentes/realtime_win.php @@ -65,6 +65,7 @@ echo ' + diff --git a/pandora_console/operation/agentes/stat_win.php b/pandora_console/operation/agentes/stat_win.php index 18f2fea040..ed683cf052 100644 --- a/pandora_console/operation/agentes/stat_win.php +++ b/pandora_console/operation/agentes/stat_win.php @@ -74,6 +74,7 @@ $alias = db_get_value('alias', 'tagente', 'id_agente', $id_agent); + From e84610120b82dbb799ab9d8eab44b9251a7b9539 Mon Sep 17 00:00:00 2001 From: marcos Date: Wed, 27 Nov 2019 11:43:50 +0100 Subject: [PATCH 2/4] Add coments in pandora_ui.js --- pandora_console/include/javascript/pandora_ui.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/pandora_console/include/javascript/pandora_ui.js b/pandora_console/include/javascript/pandora_ui.js index 426659bec4..d31bcb1546 100644 --- a/pandora_console/include/javascript/pandora_ui.js +++ b/pandora_console/include/javascript/pandora_ui.js @@ -1,5 +1,12 @@ /* 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"; From d910c53b734735b55a1eec92a2c97055736a849f Mon Sep 17 00:00:00 2001 From: marcos Date: Wed, 27 Nov 2019 15:06:16 +0100 Subject: [PATCH 3/4] add coments From a67b0a9978756839cf74aebc2c2a59a1961db1a5 Mon Sep 17 00:00:00 2001 From: marcos Date: Thu, 28 Nov 2019 18:27:05 +0100 Subject: [PATCH 4/4] update pandora.js pandora_ui.js --- pandora_console/include/javascript/pandora.js | 12 ++ .../include/javascript/pandora_ui.js | 165 ++++++++---------- 2 files changed, 82 insertions(+), 95 deletions(-) diff --git a/pandora_console/include/javascript/pandora.js b/pandora_console/include/javascript/pandora.js index f01daf00b0..c85ed5a608 100644 --- a/pandora_console/include/javascript/pandora.js +++ b/pandora_console/include/javascript/pandora.js @@ -1825,6 +1825,18 @@ function ellipsize(str, max, ellipse) { return str.trim().length > max ? str.substr(0, max).trim() + ellipse : str; } +function uniqId() { + var randomStr = + Math.random() + .toString(36) + .substring(2, 15) + + Math.random() + .toString(36) + .substring(2, 15); + + return randomStr; +} + /** * Function for AJAX request. * diff --git a/pandora_console/include/javascript/pandora_ui.js b/pandora_console/include/javascript/pandora_ui.js index d31bcb1546..37f91e7950 100644 --- a/pandora_console/include/javascript/pandora_ui.js +++ b/pandora_console/include/javascript/pandora_ui.js @@ -11,47 +11,52 @@ var ENTERPRISE_DIR = "enterprise"; /** - * Display a confirm dialog box + * Display a dialog with an image * - * @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 + * @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 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(); +function logo_preview(icon_name, icon_path, incoming_options) { + // Get the options + options = { + grayed: false, + title: "Logo preview" }; + $.extend(options, incoming_options); - // Modify the ok function to close the dialog too - var ok_function_clean = function() { - ok_function(); - clean_function(); - }; + if (icon_name == "") return; - var buttons_obj = {}; - buttons_obj[cancel_text] = clean_function; - buttons_obj[ok_text] = ok_function_clean; + $dialog = $("
"); + $image = $(''); + $image.css("max-width", "500px").css("max-height", "500px"); - // Display the dialog - $("body").append( - '

' + message + "

" - ); - $("#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 - }); + 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. @@ -65,12 +70,35 @@ function load_modal(settings) { } 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({ @@ -261,14 +289,16 @@ function load_modal(settings) { modal: true, title: settings.modal.title, width: width, - overlay: { - opacity: 0.5, - background: "black" - }, + 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(); + } } }); }, @@ -280,13 +310,7 @@ function load_modal(settings) { //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); + var randomStr = uniqId(); $("body").append( '
' + settings.message + "
" @@ -373,52 +397,3 @@ function generalShowMsg(data, idMsg) { ] }); } - -/** - * 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 = $("
"); - $image = $(''); - $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); - } -}