tyler.durden/pandorafms
1
0
Fork 0
mirror of https://github.com/pandorafms/pandorafms.git synced 2025-07-30 01:05:39 +02:00
Code Issues Packages Projects Releases Wiki Activity

#11386 Fix modal error

Browse Source
This commit is contained in:
miguel angel rasteu 2023-07-25 11:12:05 +02:00
parent a1965de2ea
commit 7c9d441648
1 changed files with 201 additions and 206 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

407
pandora_console/include/javascript/pandora_events.js
View File

@ -955,8 +955,8 @@ function openSoundEventsDialog(settings) {
return; return;
} }
//Modify button //Modify button
$("#minimize_arrow_event_sound").removeClass("arrow_menu_down"); $("#minimize_arrow_event_sound").removeClass("arrow_menu_up");
$("#minimize_arrow_event_sound").addClass("arrow_menu_up"); $("#minimize_arrow_event_sound").addClass("arrow_menu_down");
$("#minimize_arrow_event_sound").show(); $("#minimize_arrow_event_sound").show();
// Initialize modal. // Initialize modal.
@ -1370,180 +1370,168 @@ function removeElement(name_select, id_modal) {
$(document).ajaxSend(function(event, jqXHR, ajaxOptions) { $(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
const requestBody = ajaxOptions.data; const requestBody = ajaxOptions.data;
if (requestBody && requestBody.includes("drawConsoleSound=1")) { try {
console.log("AJAX request sent with drawConsoleSound=1:", ajaxOptions.url); if (requestBody && requestBody.includes("drawConsoleSound=1")) {
console.log(
"AJAX request sent with drawConsoleSound=1:",
ajaxOptions.url
);
// Find the dialog element by the aria-describedby attribute // Find the dialog element by the aria-describedby attribute
var dialog = $('[aria-describedby="modal-sound"]'); var dialog = $('[aria-describedby="modal-sound"]');
// Select the close button within the dialog // Select the close button within the dialog
var closeButton = dialog.find(".ui-dialog-titlebar-close"); var closeButton = dialog.find(".ui-dialog-titlebar-close");
// Add the minimize button before the close button // Add the minimize button before the close button
var minimizeButton = $("<button>", { var minimizeButton = $("<button>", {
class: class:
"ui-corner-all ui-widget ui-button-icon-only ui-window-minimize ui-dialog-titlebar-minimize", "ui-corner-all ui-widget ui-button-icon-only ui-window-minimize ui-dialog-titlebar-minimize",
type: "button", type: "button",
title: "Minimize", title: "Minimize",
style: "float: right;margin-right: 1.5em;" style: "float: right;margin-right: 1.5em;"
}).insertBefore(closeButton); }).insertBefore(closeButton);
// Add the minimize icon to the minimize button // Add the minimize icon to the minimize button
$("<span>", { $("<span>", {
class: "ui-button-icon ui-icon ui-icon-minusthick", class: "ui-button-icon ui-icon ui-icon-minusthick",
style: "background-color: #fff;" style: "background-color: #fff;"
}).appendTo(minimizeButton); }).appendTo(minimizeButton);
$("<span>", { $("<span>", {
class: "ui-button-icon-space" class: "ui-button-icon-space"
}) })
.html(" ") .html(" ")
.appendTo(minimizeButton); .appendTo(minimizeButton);
// Add the disengage button before the minimize button // Add the disengage button before the minimize button
var disengageButton = $("<button>", { var disengageButton = $("<button>", {
class: class:
"ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-disengage", "ui-corner-all ui-widget ui-button-icon-only ui-dialog-titlebar-disengage",
type: "button", type: "button",
title: "Disengage", title: "Disengage",
style: "float: right;margin-right: 0.5em; position:relative;" style: "float: right;margin-right: 0.5em; position:relative;"
}).insertBefore(minimizeButton); }).insertBefore(minimizeButton);
// Add the disengage icon to the disengage button // Add the disengage icon to the disengage button
$("<span>", { $("<span>", {
class: "ui-button-icon ui-icon ui-icon-circle-triangle-n", class: "ui-button-icon ui-icon ui-icon-circle-triangle-n",
style: "background-color: #fff;" style: "background-color: #fff;"
}).appendTo(disengageButton); }).appendTo(disengageButton);
$("<span>", { $("<span>", {
class: "ui-button-icon-space" class: "ui-button-icon-space"
}) })
.html(" ") .html(" ")
.appendTo(disengageButton); .appendTo(disengageButton);
// Define the minimize button functionality; // Define the minimize button functionality;
function hidden_dialog() { function hidden_dialog() {
setTimeout(function() { setTimeout(function() {
dialog.css("z-index", "-1"); $("#modal-sound").css("visibility", "hidden");
}, 200); dialog.css("z-index", "-1");
} }, 200);
function show_dialog() {
setTimeout(function() {
dialog.css("z-index", "1115");
}, 50);
}
minimizeButton.click(function(e) {
console.log("here");
if ($("#minimize_arrow_event_sound").hasClass("arrow_menu_up")) {
console.log("arrow_menu_up");
$("#minimize_arrow_event_sound").removeClass("arrow_menu_up");
$("#minimize_arrow_event_sound").addClass("arrow_menu_down");
} else if ($("#minimize_arrow_event_sound").hasClass("arrow_menu_down")) {
console.log("arrow_menu_down");
$("#minimize_arrow_event_sound").removeClass("arrow_menu_down");
$("#minimize_arrow_event_sound").addClass("arrow_menu_up");
} }
function show_dialog() {
if (!dialog.data("isMinimized")) { setTimeout(function() {
$(".ui-widget-overlay").hide(); $("#modal-sound").css("visibility", "visible");
console.log("Minimize Window"); dialog.css("z-index", "1115");
dialog.data("originalPos", dialog.position()); }, 50);
dialog.data("originalSize", {
width: dialog.width(),
height: dialog.height()
});
dialog.data("isMinimized", true);
dialog.animate(
{
height: "40px",
top: 0,
top: $(window).height() - 100
},
200,
"linear",
hidden_dialog()
);
dialog.css({ height: "" });
//dialog.find(".ui-dialog-content").hide();
} else {
console.log("Restore Window");
$(".ui-widget-overlay").show();
//dialog.find(".ui-dialog-content").show();
dialog.data("isMinimized", false);
dialog.animate(
{
height: dialog.data("originalSize").height + "px",
top: dialog.data("originalPos").top + "px"
},
200,
"linear",
show_dialog()
);
} }
}); minimizeButton.click(function(e) {
console.log("here");
if ($("#minimize_arrow_event_sound").hasClass("arrow_menu_up")) {
console.log("arrow_menu_up");
$("#minimize_arrow_event_sound").removeClass("arrow_menu_up");
$("#minimize_arrow_event_sound").addClass("arrow_menu_down");
} else if (
$("#minimize_arrow_event_sound").hasClass("arrow_menu_down")
) {
console.log("arrow_menu_down");
$("#minimize_arrow_event_sound").removeClass("arrow_menu_down");
$("#minimize_arrow_event_sound").addClass("arrow_menu_up");
}
disengageButton.click(function() { if (!dialog.data("isMinimized")) {
$(".ui-dialog-titlebar-close").trigger("click"); $(".ui-widget-overlay").hide();
$("#button-sound_events_button_hidden").trigger("click"); console.log("Minimize Window");
}); dialog.data("originalPos", dialog.position());
dialog.data("originalSize", {
width: dialog.width(),
height: dialog.height()
});
dialog.data("isMinimized", true);
// Listener to check if the dialog content contains <li> elements dialog.animate(
var dialogContent = dialog.find(".ui-dialog-content"); {
var observer = new MutationObserver(function(mutations) { height: "40px",
mutations.forEach(function(mutation) { top: 0,
var addedNodes = mutation.addedNodes; top: $(window).height() - 100
for (var i = 0; i < addedNodes.length; i++) { },
if (addedNodes[i].nodeName.toLowerCase() === "li") { 200,
console.log("The dialog content contains an <li> tag."); "linear",
/*if (dialog.data("isMinimized")) { hidden_dialog()
console.log("Restore Window"); );
$(".ui-widget-overlay").show(); dialog.css({ height: "" });
dialog.data("isMinimized", false); dialog.animate(
dialog.animate( {
{ height: dialog.data("originalSize").height + "px",
height: dialog.data("originalSize").height + "px", top: dialog.data("originalPos").top + "px"
top: dialog.data("originalPos").top + "px" },
}, 5
200 );
); //dialog.find(".ui-dialog-content").hide();
}*/ } else {
/* console.log("Restore Window");
var $el = $('[aria-describedby="modal-sound"]').find( $(".ui-widget-overlay").show();
".ui-dialog-title" //dialog.find(".ui-dialog-content").show();
); dialog.data("isMinimized", false);
var flashingDuration = 10000; // 10 seconds
$("<style>") dialog.animate(
.text( {
` height: "40px",
@keyframes flashRed { top: 0,
from { background-color: initial; } top: $(window).height() - 100
to { background-color: red; } },
} 5
.red-flash { animation: flashRed 0.5s alternate infinite; } );
` dialog.animate(
) {
.appendTo("head"); height: dialog.data("originalSize").height + "px",
top: dialog.data("originalPos").top + "px"
$el.addClass("red-flash"); },
200,
setTimeout(() => { "linear",
$el.removeClass("red-flash"); show_dialog()
$("style") );
.last()
.remove();
}, flashingDuration);*/
break;
}
} }
}); });
});
// Configure and start observing the dialog content for changes disengageButton.click(function() {
var config = { childList: true, subtree: true }; $(".ui-dialog-titlebar-close").trigger("click");
observer.observe(dialogContent[0], config); $("#button-sound_events_button_hidden").trigger("click");
});
// Listener to check if the dialog content contains <li> elements
var dialogContent = dialog.find(".ui-dialog-content");
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
var addedNodes = mutation.addedNodes;
for (var i = 0; i < addedNodes.length; i++) {
if (addedNodes[i].nodeName.toLowerCase() === "li") {
console.log("The dialog content contains an <li> tag.");
break;
}
}
});
});
// Configure and start observing the dialog content for changes
var config = { childList: true, subtree: true };
observer.observe(dialogContent[0], config);
}
} catch (e) {
console.log(e);
} }
}); });
@ -1557,55 +1545,62 @@ $(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
*/ */
$(document).ajaxSend(function(event, jqXHR, ajaxOptions) { $(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
const requestBody = ajaxOptions.data; const requestBody = ajaxOptions.data;
if (requestBody && requestBody.includes("drawConsoleSound=1")) { try {
console.log("AJAX request sent with drawConsoleSound=1:", ajaxOptions.url); if (requestBody && requestBody.includes("drawConsoleSound=1")) {
console.log(
// Find the dialog element by the aria-describedby attribute "AJAX request sent with drawConsoleSound=1:",
var dialog = $('[aria-describedby="modal-sound"]'); ajaxOptions.url
dialog.css({
// "backgroundColor":"black",
// "color":"white"
});
// Set CSS properties for #modal-sound
$("#modal-sound").css({
height: "450px",
margin: "0px"
});
// Set CSS properties for #tabs-sound-modal
$("#tabs-sound-modal").css({
"margin-top": "0px",
padding: "0px",
"font-weight": "bolder"
});
// Set CSS properties for #actions-sound-modal
$("#actions-sound-modal").css({
"margin-bottom": "0px"
});
// Hide the overlay with specific class and z-index
$('.ui-widget-overlay.ui-front[style="z-index: 10000;"]').css(
"display",
"none"
);
// Handle the 'change' event for #modal-sound, simply to compact the size of the img "No alerts discovered"
// An image should always have a size assigned!!!
$("#modal-sound").on("change", function() {
// Find the image within the specific div
var image = $(this).find(
'img.invert_filter.forced_title[data-title="No alerts discovered"][alt="No alerts discovered"]'
); );
// Set the desired width and height // Find the dialog element by the aria-describedby attribute
var width = 48; var dialog = $('[aria-describedby="modal-sound"]');
var height = 48; dialog.css({
// "backgroundColor":"black",
// "color":"white"
});
// Resize the image // Set CSS properties for #modal-sound
image.width(width); $("#modal-sound").css({
image.height(height); height: "450px",
}); margin: "0px"
});
// Set CSS properties for #tabs-sound-modal
$("#tabs-sound-modal").css({
"margin-top": "0px",
padding: "0px",
"font-weight": "bolder"
});
// Set CSS properties for #actions-sound-modal
$("#actions-sound-modal").css({
"margin-bottom": "0px"
});
// Hide the overlay with specific class and z-index
$('.ui-widget-overlay.ui-front[style="z-index: 10000;"]').css(
"display",
"none"
);
// Handle the 'change' event for #modal-sound, simply to compact the size of the img "No alerts discovered"
// An image should always have a size assigned!!!
$("#modal-sound").on("change", function() {
// Find the image within the specific div
var image = $(this).find(
'img.invert_filter.forced_title[data-title="No alerts discovered"][alt="No alerts discovered"]'
);
// Set the desired width and height
var width = 48;
var height = 48;
// Resize the image
image.width(width);
image.height(height);
});
}
} catch (e) {
console.log(e);
} }
}); });