popup goes out of spotfire and unable to brinng that back and close it.

[SravanthiJampala]

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)
  );
};

 

[barchiel33]

Would you mind posting the HTML that you used to implement the JS you posted? 

[Jose Leviaguirre]

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);
  });
})();

 

 

[SravanthiJampala]

Ho Jose. I tried this code but still it is going above spotfire and i am not able to bring that back

 

[SravanthiJampala]

<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

 

[barchiel33]

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?