snapcode.js

import LZString from './lz-string.min.js';

// Get URL to SnapCode
var SNAPCODE_URL = 'https://reportmill.com/SnapCode/app/app09?loader=none#embed:';
if (window.location.host.includes('localhost'))
 SNAPCODE_URL = 'http://localhost:8080?loader=none#embed:';

const MIN_HEIGHT = 260;

const SnapCode = {

 addSnapCodeToElementForId,
 addPlayButtonToElementForId
};

//
// Adds SnapCode to given element.
//
function addSnapCodeToElementForId(containerId)
{
 // Remove any existing runner
 removeExistingSnapCodeRunner();

 // Get container and ensure it can host absolutely positioned children
 const container = document.getElementById(containerId);
 if (getComputedStyle(container).position === "static")
 container.style.position = "relative";

 // Remove play button
 const playButton = container.querySelector('#SnapCodeRunnerPlayButton');
 if (playButton !== null)
 container.removeChild(playButton);

 // Make sure it's at least MIN_HEIGHT tall
 const containerOriginalHeight = container.style.height;
 const containerOriginalClientHeight = container.clientHeight;
 if (containerOriginalClientHeight < MIN_HEIGHT)
 container.style.height = MIN_HEIGHT + 'px';

 // Get java string from parent element and Base64 encode with lzwstring
 const javaStr = container.innerText;
 var javaStrLzw = LZString.compressToEncodedURIComponent(javaStr);

 // Create iframe for parent element
 const iframe = document.createElement("iframe");
 iframe.id = 'SnapCodeRunner';
 iframe.originalHeight = containerOriginalHeight;
 iframe.originalClientHeight = containerOriginalClientHeight;
 iframe.src = SNAPCODE_URL + javaStrLzw;
 iframe.style.border = "none";
 iframe.style.position = 'absolute';
 iframe.style.top = '0';
 iframe.style.left = '0';
 iframe.style.width = '100%';
 iframe.style.height = '100%';
 iframe.style.zIndex = '9999';
 iframe.style.display = "block"; // avoids scrollbar glitches

 // Append iframe to container
 container.appendChild(iframe);

 // Create close button, add action and add to container
 const closeButton = getCloseButton();
 closeButton.addEventListener("click", () => { removeExistingSnapCodeRunner(containerId); });
 container.appendChild(closeButton);
}

//
// Adds a SnapCode play button to element for given id.
//
function addPlayButtonToElementForId(containerId)
{
 addFontAwesome();

 // Get container and ensure it can host absolutely positioned children
 const container = document.getElementById(containerId);
 if (getComputedStyle(container).position === "static")
 container.style.position = "relative";

 // If height not explicitly set, explicitly set it
 if (container.style.height === "") {
 container.style.width = container.offsetWidth + 'px';
 container.style.height = container.offsetHeight + 'px';
 container.style.boxSizing = 'border-box';
 }

 // Get play button, add action and add to container
 const playButton = getPlayButton();
 playButton.addEventListener("click", () => { addSnapCodeToElementForId(containerId); });
 container.appendChild(playButton);
}

//
// Returns a play button.
//
function getPlayButton()
{
 // Create the button
 const button = document.createElement("button");
 button.id = 'SnapCodeRunnerPlayButton';
 button.style.fontSize = "18px";
 button.style.border = "none";
 button.style.background = "none";
 button.style.color = "lightgray";
 button.style.cursor = "pointer";
 button.style.transition = "color 0.3s";
 button.style.position = "absolute";
 button.style.top = "10px";
 button.style.right = "10px";

 // Add the icon
 const icon = document.createElement("i");
 icon.className = "fa-solid fa-play";
 button.appendChild(icon);

 // Hover effect
 button.addEventListener("mouseover", () => { button.style.color = "green"; });
 button.addEventListener("mouseout", () => { button.style.color = "lightgray"; });

 // Return
 return button;
}

//
// Returns a close button.
//
function getCloseButton()
{
 // Create the button
 const button = document.createElement("button");
 button.id = 'SnapCodeRunnerCloseButton';
 button.style.fontSize = "18px";
 button.style.border = "none";
 button.style.background = "none";
 button.style.color = "lightgray";
 button.style.cursor = "pointer";
 button.style.transition = "color 0.3s";
 button.style.position = "absolute";
 button.style.top = "7px";
 button.style.right = "6px";
 button.style.zIndex = '99999';

 // Add the icon
 const icon = document.createElement("i");
 icon.className = "fa-solid fa-xmark";
 button.appendChild(icon);

 // Hover effect
 button.addEventListener("mouseover", () => { button.style.color = "close"; });
 button.addEventListener("mouseout", () => { button.style.color = "lightgray"; });

 // Return
 return button;
}

//
// Removes existing SnapCode runner
//
function removeExistingSnapCodeRunner()
{
 // If SnapCodePrimer still set, remove
 const snapCodePrimer = document.getElementById('SnapCodePrimer');
 if (snapCodePrimer !== null)
 document.body.removeChild(snapCodePrimer);

 // Get old SnapCode runner (just return if not found)
 const oldSnapCodeRunner = document.getElementById('SnapCodeRunner');
 if (oldSnapCodeRunner === null)
 return;

 // If old runner was too small, restore original parent container height
 if (oldSnapCodeRunner.originalClientHeight < MIN_HEIGHT)
 oldSnapCodeRunner.parentNode.style.height = oldSnapCodeRunner.originalHeight;

 // Remove old runner from its parent container
 const container = oldSnapCodeRunner.parentNode;
 container.removeChild(oldSnapCodeRunner);

 // Remove close button
 const closeButton = document.getElementById('SnapCodeRunnerCloseButton');
 if (closeButton !== null)
 container.removeChild(closeButton);

 // Add play button back
 addPlayButtonToElementForId(container.id);
}

//
// Adds this: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
//
function addFontAwesome()
{
 if (window.isFontAwesome) return; window.isFontAwesome = true;
 const linkElement = document.createElement('link');
 linkElement.rel = 'stylesheet';
 linkElement.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css';
 document.head.appendChild(linkElement);

 // Create iframe to load SnapCode to make sure it's hot
 const hiddenIframe = document.createElement('iframe');
 hiddenIframe.id = 'SnapCodePrimer';
 hiddenIframe.src = SNAPCODE_URL + LZString.compressToEncodedURIComponent('IO.print("SnapCode is primed");');
 hiddenIframe.style.display = 'none';
 document.body.appendChild(hiddenIframe);
}

export default SnapCode;