Widget:Ppplanner05

Revision as of 08:11, 2 November 2024 by Dpaine (talk | contribs)
 <img id="runImage" src="https://docs.analytica.com/images/d/d2/Ppplanner03.png" style="width: 800px; height: 406px;">

<script> document.addEventListener('DOMContentLoaded', function () {

 let iframeAdded = false;
 const container = document.getElementById('container');
 const runImage = document.getElementById('runImage');
 function showIframe() {
   // Hide the initial image
   runImage.style.display = 'none';
   if (!iframeAdded) {
     // Create and configure the iframe
     const iframe = document.createElement('iframe');
     iframe.src = 'https://acp.analytica.com/view0?invite=4711&code=3885603542485212689';
     iframe.style.width = '800px';
     iframe.style.height = '406px';
     iframe.style.border = 'none';
     iframe.style.overflow = 'hidden'; // Disable iframe scrollbars
     // Append the iframe to the container
     container.appendChild(iframe);
     iframeAdded = true;
     // Create maximize button
     const maximizeButton = document.createElement('button');
     maximizeButton.textContent = 'Maximize';
     maximizeButton.style.position = 'absolute';
     maximizeButton.style.bottom = '10px';
     maximizeButton.style.right = '10px';
     // Create minimize button, initially hidden
     const minimizeButton = document.createElement('button');
     minimizeButton.textContent = 'Minimize';
     minimizeButton.style.position = 'absolute';
     minimizeButton.style.bottom = '10px';
     minimizeButton.style.right = '80px';
     minimizeButton.style.display = 'none';
     // Add click event for maximize button
     maximizeButton.addEventListener('click', function () {
       // Set container to fixed position and remove page scroll
       container.style.position = 'fixed';
       container.style.top = '0';
       container.style.left = '0';
       container.style.right = '0';
       container.style.bottom = '0';
       container.style.zIndex = '9999';
       container.style.margin = '0';
       container.style.padding = '0';
       container.style.backgroundColor = 'white';
       // Make iframe full screen within container
       iframe.style.width = '100%';
       iframe.style.height = '100%';
       iframe.style.overflow = 'hidden'; // Ensure no scrollbars in fullscreen
       maximizeButton.style.display = 'none';
       minimizeButton.style.display = 'inline-block';
     });
     // Add click event for minimize button
     minimizeButton.addEventListener('click', function () {
       // Restore original container and iframe dimensions
       container.style.position = 'relative';
       container.style.width = 'auto';
       container.style.height = 'auto';
       container.style.margin = '10px';
       container.style.padding = '10px';
       container.style.zIndex = '1';
       iframe.style.width = '800px';
       iframe.style.height = '406px';
       minimizeButton.style.display = 'none';
       maximizeButton.style.display = 'inline-block';
     });
     // Append buttons to the container
     container.appendChild(maximizeButton);
     container.appendChild(minimizeButton);
   }
 }
 // Add click event listener to the image container
 container.addEventListener('click', showIframe);

}); </script>