View source for Widget:Ppplanner05

<div id="container" style="position: relative; cursor: pointer; border: 1px solid #ccc; padding: 0px; margin: 0px;">
  <img id="runImage" src="https://docs.analytica.com/images/d/d2/Ppplanner03.png" style="width: 801px; height: 406px;">
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  let iframeAdded = false;
  const container = document.getElementById('container');
  const runImage = document.getElementById('runImage');

  function showIframe() {
    // Hide the initial image and interact button
    runImage.style.display = 'none';
    if (interactButton) {
      interactButton.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 = '801px';
      iframe.style.height = '406px';
      iframe.style.border = 'none';

      // Append the iframe to the container
      container.appendChild(iframe);
      iframeAdded = true;

      // Create maximize button with icon
      const maximizeButton = document.createElement('button');
      maximizeButton.style.position = 'absolute';
      maximizeButton.style.bottom = '10px';
      maximizeButton.style.right = '100px';
      maximizeButton.style.width = '30px';
      maximizeButton.style.height = '30px';
      maximizeButton.style.backgroundImage = 'url("https://docs.analytica.com/images/9/9c/Arrows-maximize.png")';
      maximizeButton.style.backgroundSize = 'contain';
      maximizeButton.style.backgroundRepeat = 'no-repeat';
      maximizeButton.style.backgroundColor = 'transparent';
      maximizeButton.style.border = 'none';
      maximizeButton.style.cursor = 'pointer';
      maximizeButton.title = 'Click to use full screen';

      // Add hover effect for maximize button
      maximizeButton.addEventListener('mouseover', function () {
        maximizeButton.style.fontWeight = 'bold';
        maximizeButton.style.fontSize = '16px';
      });
      maximizeButton.addEventListener('mouseout', function () {
        maximizeButton.style.fontWeight = '';
        maximizeButton.style.fontSize = '';
      });

      // Create minimize button with icon, initially hidden
      const minimizeButton = document.createElement('button');
      minimizeButton.style.position = 'absolute';
      minimizeButton.style.bottom = '8px';
      minimizeButton.style.right = '120px';
      minimizeButton.style.width = '30px';
      minimizeButton.style.height = '30px';
      minimizeButton.style.backgroundImage = 'url("https://docs.analytica.com/images/8/82/Arrows-minimize.png")';
      minimizeButton.style.backgroundSize = 'contain';
      minimizeButton.style.backgroundRepeat = 'no-repeat';
      minimizeButton.style.backgroundColor = 'transparent';
      minimizeButton.style.border = 'none';
      minimizeButton.style.cursor = 'pointer';
      minimizeButton.title = 'Exit full screen';
      minimizeButton.style.display = 'none';

      // Add hover effect for minimize button
      minimizeButton.addEventListener('mouseover', function () {
        minimizeButton.style.fontWeight = 'bold';
        minimizeButton.style.fontSize = '20px';
      });
      minimizeButton.addEventListener('mouseout', function () {
        minimizeButton.style.fontWeight = '';
        minimizeButton.style.fontSize = '';
      });

      // Add click event for maximize button to enter fullscreen mode
      maximizeButton.addEventListener('click', function () {
        if (container.requestFullscreen) {
          container.requestFullscreen();
        } else if (container.webkitRequestFullscreen) { /* Safari */
          container.webkitRequestFullscreen();
        } else if (container.msRequestFullscreen) { /* IE11 */
          container.msRequestFullscreen();
        }

        // Adjust iframe to fill the container
        iframe.style.width = '100%';
        iframe.style.height = '100%';

        maximizeButton.style.display = 'none';
        minimizeButton.style.display = 'inline-block';
      });

      // Add click event for minimize button to exit fullscreen mode
      minimizeButton.addEventListener('click', function () {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitExitFullscreen) { /* Safari */
          document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) { /* IE11 */
          document.msExitFullscreen();
        }

        // Restore iframe dimensions when exiting fullscreen
        iframe.style.width = '801px';
        iframe.style.height = '406px';

        minimizeButton.style.display = 'none';
        maximizeButton.style.display = 'inline-block';
      });

      // Append buttons to the container
      container.appendChild(maximizeButton);
      container.appendChild(minimizeButton);
    }
  }

  // Create the "Click to interact" button with updated styling
  const interactButton = document.createElement('button');
  interactButton.textContent = "Click to interact with the model in Analytica Cloud Platform";
  interactButton.style.position = 'absolute';
  interactButton.style.bottom = '7px';
  interactButton.style.right = '90px';
  interactButton.style.padding = '5px 10px';
  interactButton.style.fontSize = '16px'; // Font size 16px
  interactButton.style.fontWeight = 'bold'; // Bold text
  interactButton.style.backgroundColor = '#d3d3d3'; 
  interactButton.style.color = 'black'; 
  interactButton.style.border = 'none';
  interactButton.style.borderRadius = '5px';
  interactButton.style.cursor = 'pointer';
  interactButton.style.opacity = '0.9';

  // Add click event to interact button to display the iframe and hide button
  interactButton.addEventListener('click', function (event) {
    event.stopPropagation(); // Prevent the event from bubbling to the container
    showIframe();
  });

  // Append the interact button to the container
  container.appendChild(interactButton);

  // Add click event listener to the image container
  container.addEventListener('click', showIframe);
});
</script>