Created popup for placing all the filters. if the user drag it to the top it is going even above spotfire and title is not visible so that i can hold and drag that back to the screen . How to resolve this.
The java script i used is below. please sugguest some solution for this issue.
id="myPopup"
var xid=$("#calcValue").text();
function createPopout(popup, i) {
let id = "JSPopup_" + i;
let popupElements = popup.children;
let popupTrigger = popupElements[0];
let popupTitle = popupElements[1].innerText;
let popupContents = popupElements[2];
let isOpened = false; /*show all popup on start? If not, popup opens if title ends with "***" */
popupTrigger.style.cursor = "default";
//add dragging library
let template = `
<div id="${id}" class="pullable ${isOpened ? "" : "hidden"}" >
<span class="close"></span>
<div class="contents"></div>
</div>
<style>
.hidden{
left:-1000px !important;
}
#${id}{
border:1px solid darkgray;
position:fixed;
padding:5px 5px 5px 5px;
background:${popup.style.background || "whitesmoke"};
Xcolor:${popup.style.color};
Xfont-size:${popup.style.fontSize};
Xfont-family:${popup.style.fontFamily};
box-shadow: 0 3px 11px 0 rgba(0,0,0,.16),0 3px 6px 0 rgba(0,0,0,.16);
border-radius: 6px;
cursor:default;
width:300px;
overflow-y: auto;
max-height: 700px; /* Limit the popup height */
}
#${id} .close::after{
content:"✖";
color:darkgray;
float:right;
margin-top:-15px;
cursor:default;
cursor:default;
font-size:20px;
}
#${id} .close {
padding: 5px; /* Add padding */
}
#${id} .close:hover::after{
color: gray;
font-size: 22px; /* Change size on hover if desired */
}
#${id} .contents{
border:0px solid darkgray;
background:${popupContents.style.background || "#FFF"};
margin-top:3px;
padding:5px;
min-height:100px;
}
.DropdownListContainer.sf-element-styled-dialog.sfc-style-root.prevent-flyout-close {
z-index: 999;
}
</style>
`;
popup.innerHTML = template;
let popupBody = document.getElementById(id);
//add trigger
popup.appendChild(popupTrigger);
//add title to hidden popup template
if (popupTitle.endsWith("***")) {
popupTitle = popupTitle.slice(0, popupTitle.length - 3);
popupBody.classList.remove("hidden");
}
handle = document.createElement("div");
handle.className = "handle";
textNode = document.createTextNode(popupTitle);
handle.prepend(textNode);
popupBody.prepend(handle);
//add contents to hidden popup template
let templateContents = document.querySelector(`#${id} .contents`);
templateContents.style = popupContents.style.cssText;
popupBody.style = popup.style.cssText;
popup.removeAttribute("style");
templateContents.append(...popupContents.childNodes);
//make target open dialog
popupTrigger.onclick = (x) => {
pp = document.getElementById(id);
pp.classList.toggle("hidden");
[...document.querySelectorAll(".pullable")].forEach((d) => {
d.style.zIndex = 0;
});
pp.style.zIndex = 10;
};
//make dialog close button close
document.querySelectorAll("#" + id + " .close").forEach((x) => {
x.onclick = () => {
x.parentNode.classList.add("hidden");
// $("#2873dd08b1c4467c9eeebc6bc4849613").click();
};
});
//make dialogs draggable
document.querySelectorAll(".pullable").forEach((aPopup) => {
new Draggabilly(aPopup, { handle: ".handle" });
});
}
// Close popup on clicking outside
document.addEventListener('click', (event) => {
if (!popupBody.contains(event.target) && !popupTrigger.contains(event.target)) {
popupBody.classList.add("hidden");
}
});
// Add dragging library
draggingLibraryUrl =
'https://unpkg.com/draggabilly@3/dist/draggabilly.pkgd.min.js';
script = document.createElement("script");
script.src = draggingLibraryUrl;
ph = document.getElementById(id);
ph.appendChild(script);
//parse popups after dragging library loads
script.onload = () => {
//create a popup for every JSPopup class
[...document.querySelectorAll(".JSPopup")].forEach((rawPopup, i) =>
createPopout(rawPopup, i)
);
};
