SravanthiJampala Posted October 8 Share Posted October 8 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) ); }; Link to comment Share on other sites More sharing options...
barchiel33 Posted October 8 Share Posted October 8 Would you mind posting the HTML that you used to implement the JS you posted? Link to comment Share on other sites More sharing options...
Jose Leviaguirre Posted October 9 Share Posted October 9 Hello @SravanthiJampala I updated the code, so the popup don't go off the screen. In any case, you can "restore" the popup position by switching back to the page. Here is the code for reference as well (click to expand) JavaScript /* place this in the html code <div class="JSPopup" id="myPopup"> <div>click to open popup (trigger)</div> <div>Popup title (pullable)</div> <div>Popup contents</div> </div> add this JavaScript to a text area. ***Only one per page*** */ (() => { let highestZIndex = 1000; // Start with a high z-index value class PopupManager { constructor(popupId, index) { this.popupId = popupId; this.index = index; this.draggingLibraryUrl = 'https://unpkg.com/draggabilly@3/dist/draggabilly.pkgd.min.js'; this.init(); } init() { this.loadDraggingLibrary().then(() => { this.createPopout(document.getElementById(this.popupId), this.index); }); } loadDraggingLibrary() { return new Promise((resolve) => { if (!document.querySelector(`script[src="${this.draggingLibraryUrl}"]`)) { const script = document.createElement("script"); script.src = this.draggingLibraryUrl; script.onload = resolve; document.body.appendChild(script); } else { resolve(); } }); } createPopout(popup, index) { let id = "JSPopup_" + index; let popupElements = popup.children; let popupTrigger = popupElements[0]; let popupTitle = popupElements[1].innerText; let popupContents = popupElements[2]; let isOpened = false; popupTrigger.style.cursor = "default"; let template = ` <div id="${id}" class="pullable ${isOpened ? "" : "hidden"}" style="z-index: ${highestZIndex};"> <span class="close"></span> <div class="contents"></div> </div> <style> .hidden { left: -1000px !important; } #${id} { border: 1px solid darkgray; position: fixed; padding: 5px; background: ${popup.style.background || "whitesmoke"}; 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; } #${id} .close::after { content: "✖"; color: darkgray; float: right; margin-top: -15px; cursor: default; font-size: 20px; } #${id} .close { padding: 5px; } #${id} .close:hover::after { color: gray; font-size: 22px; } #${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: 99999999; } </style> `; popup.innerHTML = template; let popupBody = document.getElementById(id); popup.appendChild(popupTrigger); if (popupTitle.endsWith("***")) { popupTitle = popupTitle.slice(0, popupTitle.length - 3); popupBody.classList.remove("hidden"); } let handle = document.createElement("div"); handle.className = "handle"; let textNode = document.createTextNode(popupTitle); handle.prepend(textNode); popupBody.prepend(handle); let templateContents = document.querySelector(`#${id} .contents`); templateContents.style = popupContents.style.cssText; popupBody.style = popup.style.cssText; popup.removeAttribute("style"); templateContents.append(...popupContents.childNodes); popupTrigger.onclick = () => { let pp = document.getElementById(id); pp.classList.remove("hidden"); this.bringToFront(pp); }; handle.onclick = () => { let pp = document.getElementById(id); this.bringToFront(pp); }; popupBody.addEventListener('mousedown', () => { this.bringToFront(popupBody); }); document.querySelectorAll("#" + id + " .close").forEach((x) => { x.onclick = () => { x.parentNode.classList.add("hidden"); }; }); document.querySelectorAll(".pullable").forEach((aPopup) => { const draggie = new Draggabilly(aPopup, { handle: ".handle", containment: 'body' }); draggie.on('dragStart', () => { this.bringToFront(aPopup); }); }); } bringToFront(element) { highestZIndex++; element.style.zIndex = highestZIndex; } } // Usage const popups = document.querySelectorAll('.JSPopup'); popups.forEach((popup, index) => { new PopupManager(popup.id, index); }); })(); Link to comment Share on other sites More sharing options...
SravanthiJampala Posted October 9 Author Share Posted October 9 Ho Jose. I tried this code but still it is going above spotfire and i am not able to bring that back Link to comment Share on other sites More sharing options...
SravanthiJampala Posted October 9 Author Share Posted October 9 <style> .accordion { background-color: #A9A9A9; color: #444; cursor: pointer; padding: 18px; width: 95%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .accordion2 { background-color: #FFFFFF; color: #000; cursor: pointer; padding: 18px; width: 95%; border-color: #C0C0C0; text-align: left; outline: none; font-size: 13px; transition: 0.4s; } .active, .accordion:hover { background-color: #fff; } .active, .accordion2:hover { background-color: #fff; } .accordion:after { content: '\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px; } .accordion2:after { content: '\002B'; color: #777; font-weight: bold; float: right; margin-left: 5px; } .active:after { content: "\2212"; } .panel { padding: 0 18px; display: none; background-color: #FFFFF; overflow: hidden; } img { visibility:hidden; padding-left:10px; border: 0; width: 15px; height: 15px; } #myPopup { width : 50%; } #myPopup2 { float : right; } .hidden { display:none; } </style><DIV class=JSPopup id=myPopup> <DIV style="WIDTH: 11%; FLOAT: left"><SpotfireControl id="d6c8fc8c14c34775a2141d407ec7cf67" /></DIV> <DIV>Filter PopUp Page</DIV> <DIV><BUTTON class=accordion2 id=btnNew type=submit>Columns Selection <IMG id=imgNew src="bc8e2ca6276941538ea48dce0a424e78.png"></BUTTON> <DIV class=panel><BR> <P> and i have added all the required filters as spotfire controls and closed Div Link to comment Share on other sites More sharing options...
barchiel33 Posted October 9 Share Posted October 9 Hmmm, so I tried out the code in my own testing report and it seems to function how I would expect. A popup is generated on top of the filter when I click on it, which can then be dragged wherever I want. Could you post a screenshot of what exactly is "wrong" on your end? Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now