Widget:Ppplanner04
<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';
// 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 () { // Adjust iframe and container to fill the viewport container.style.position = 'absolute'; container.style.top = '0'; container.style.left = '0'; container.style.width = '100vw'; container.style.height = '100vh'; iframe.style.width = '100vw'; iframe.style.height = '100vh'; maximizeButton.style.display = 'none'; minimizeButton.style.display = 'inline-block'; });
// Add click event for minimize button minimizeButton.addEventListener('click', function () { // Restore original iframe and container dimensions container.style.position = 'relative'; container.style.width = 'auto'; container.style.height = 'auto'; 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>