Difference between revisions of "Widget:Ppplanner03"

 
(12 intermediate revisions by the same user not shown)
Line 1: Line 1:
<!--<div id="container" style="cursor: pointer; border: 1px solid #ccc; padding: 10px; margin: 10px;">
+
<div id="container" style="position: relative; cursor: pointer; border: 1px solid #ccc; padding: 10px; margin: 10px;">
 
   <img id="runImage" src="https://docs.analytica.com/images/d/d2/Ppplanner03.png" style="width: 800px; height: 406px;">
 
   <img id="runImage" src="https://docs.analytica.com/images/d/d2/Ppplanner03.png" style="width: 800px; height: 406px;">
 
</div>
 
</div>
 +
 
<script>
 
<script>
 
document.addEventListener('DOMContentLoaded', function () {
 
document.addEventListener('DOMContentLoaded', function () {
 +
  let iframeAdded = false;
 +
 
   function showIframe() {
 
   function showIframe() {
     // Hide the image
+
     // Hide the initial image
 
     document.getElementById('runImage').style.display = 'none';
 
     document.getElementById('runImage').style.display = 'none';
  
     // Create and configure the iframe
+
     // Check if an iframe has already been added
    const iframe = document.createElement('iframe');
+
    if (!iframeAdded) {
    iframe.src = 'https://acp.analytica.com/view0?invite=4711&code=3885603542485212689';
+
      // Create and configure the iframe
    iframe.style.width = '800px'; // Adjusted width to match the image width
+
      const iframe = document.createElement('iframe');
    iframe.style.height = '406px'; // Adjusted height to match the image height
+
      iframe.src = 'https://acp.analytica.com/view0?invite=4711&code=3885603542485212689';
    iframe.style.border = 'none'; // Optional: Remove border
+
      iframe.style.width = '800px'; // Adjusted width to match the container width
 +
      iframe.style.height = '406px'; // Adjusted height to match the container height
 +
      iframe.style.border = 'none'; // Optional: Remove border
  
    // Append the iframe to the container
+
      // Append the iframe to the container
    document.getElementById('container').appendChild(iframe);
+
      const container = document.getElementById('container');
  }
+
      container.appendChild(iframe);
 
+
      iframeAdded = true; // Update flag to indicate iframe is added
  // Add click event listener to the image container
 
  document.getElementById('container').addEventListener('click', showIframe);
 
});
 
</script>-->
 
<div id="container" style="position: relative; cursor: pointer; border: 1px solid #ccc; padding: 10px; margin: 10px;">
 
  <img id="runImage" src="https://docs.analytica.com/images/d/d2/Ppplanner03.png" style="width: 800px; height: 406px;">
 
  <button id="maximizeButton" style="position: absolute; bottom: 10px; right: 10px;">Maximize</button>
 
</div>
 
  
<script>
+
      // Create maximize button
document.addEventListener('DOMContentLoaded', function () {
+
      const maximizeButton = document.createElement('button');
  function showIframe() {
+
      maximizeButton.textContent = 'Maximize';
    // Hide the image
+
      maximizeButton.style.position = 'absolute';
    document.getElementById('runImage').style.display = 'none';
+
      maximizeButton.style.bottom = '10px';
 +
      maximizeButton.style.right = '10px';
  
    // Create and configure the iframe
+
      // Add click event listener to maximize button
    const iframe = document.createElement('iframe');
+
      maximizeButton.addEventListener('click', function() {
    iframe.src = 'https://acp.analytica.com/view0?invite=4711&code=3885603542485212689';
+
        iframe.style.width = '100vw'; // Max width for iframe
    iframe.style.width = '800px'; // Adjusted width to match the image width
+
        iframe.style.height = '100vh'; // Max height for iframe
    iframe.style.height = '406px'; // Adjusted height to match the image height
+
        maximizeButton.style.display = 'none'; // Hide the maximize button
    iframe.style.border = 'none'; // Optional: Remove border
+
        container.style.position = 'absolute'; // Change container positioning to absolute
 +
        container.style.top = '0'; // Ensure container covers entire viewport
 +
        container.style.left = '0'; // Ensure container covers entire viewport
 +
        container.style.width = '100%'; // Ensure container covers entire viewport
 +
        container.style.height = '100%'; // Ensure container covers entire viewport
 +
      });
  
    // Append the iframe to the container
+
      // Append maximize button to the container
    document.getElementById('container').appendChild(iframe);
+
      container.appendChild(maximizeButton);
 +
    }
 
   }
 
   }
  
 
   // Add click event listener to the image container
 
   // Add click event listener to the image container
 
   document.getElementById('container').addEventListener('click', showIframe);
 
   document.getElementById('container').addEventListener('click', showIframe);
 
  // Add click event listener to the maximize button
 
  document.getElementById('maximizeButton').addEventListener('click', function() {
 
    const container = document.getElementById('container');
 
    const runImage = document.getElementById('runImage');
 
    const iframe = container.querySelector('iframe');
 
 
    // Toggle between original and max width
 
    if (container.style.width === '100%') {
 
      container.style.width = '800px'; // Original width
 
      container.style.height = '406px'; // Original height
 
      iframe.style.width = '800px'; // Original width for iframe
 
      iframe.style.height = '406px'; // Original height for iframe
 
    } else {
 
      container.style.width = '100%'; // Max width
 
      container.style.height = '100%'; // Max height
 
      iframe.style.width = '100%'; // Max width for iframe
 
      iframe.style.height = '100%'; // Max height for iframe
 
    }
 
  });
 
 
});
 
});
 
</script>
 
</script>
 
 
 
 
 
 
 
 
 
https://docs.analytica.com/images/d/d2/Ppplanner03.png
 
1156  570
 

Latest revision as of 01:07, 1 May 2024

 <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;
 function showIframe() {
   // Hide the initial image
   document.getElementById('runImage').style.display = 'none';
   // Check if an iframe has already been added
   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'; // Adjusted width to match the container width
     iframe.style.height = '406px'; // Adjusted height to match the container height
     iframe.style.border = 'none'; // Optional: Remove border
     // Append the iframe to the container
     const container = document.getElementById('container');
     container.appendChild(iframe);
     iframeAdded = true; // Update flag to indicate iframe is added
     // Create maximize button
     const maximizeButton = document.createElement('button');
     maximizeButton.textContent = 'Maximize';
     maximizeButton.style.position = 'absolute';
     maximizeButton.style.bottom = '10px';
     maximizeButton.style.right = '10px';
     // Add click event listener to maximize button
     maximizeButton.addEventListener('click', function() {
       iframe.style.width = '100vw'; // Max width for iframe
       iframe.style.height = '100vh'; // Max height for iframe
       maximizeButton.style.display = 'none'; // Hide the maximize button
       container.style.position = 'absolute'; // Change container positioning to absolute
       container.style.top = '0'; // Ensure container covers entire viewport
       container.style.left = '0'; // Ensure container covers entire viewport
       container.style.width = '100%'; // Ensure container covers entire viewport
       container.style.height = '100%'; // Ensure container covers entire viewport
     });
     // Append maximize button to the container
     container.appendChild(maximizeButton);
   }
 }
 // Add click event listener to the image container
 document.getElementById('container').addEventListener('click', showIframe);

}); </script>