@quartal/bridge-client
Version:
Universal client library for embedding applications with URL-configurable transport support (iframe, postMessage) and framework adapters for Angular and Vue
263 lines (227 loc) • 8.63 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transport Configuration Demo</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.config-section {
margin: 20px 0;
padding: 15px;
border: 1px solid #ddd;
border-radius: 5px;
}
.iframe-container {
width: 100%;
height: 600px;
border: 1px solid #ccc;
margin: 10px 0;
}
.controls {
margin: 10px 0;
}
.controls label {
display: inline-block;
width: 120px;
margin: 5px 0;
}
.controls input, .controls select {
width: 200px;
padding: 5px;
}
button {
background: #007acc;
color: white;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
margin: 5px;
}
button:hover {
background: #005a99;
}
.url-display {
background: #f5f5f5;
padding: 10px;
border-radius: 3px;
font-family: monospace;
word-break: break-all;
margin: 10px 0;
}
.popup-controls {
background: #fff3cd;
padding: 15px;
border-radius: 5px;
margin: 10px 0;
}
</style>
</head>
<body>
<h1>Quartal Bridge Client - Transport Configuration Demo</h1>
<div class="config-section">
<h2>Configuration</h2>
<div class="controls">
<label>Base URL:</label>
<input type="text" id="baseUrl" value="https://quartal.com/accounting-embed" />
</div>
<div class="controls">
<label>Transport:</label>
<select id="transport">
<option value="iframe">Iframe (default)</option>
<option value="postmessage">PostMessage</option>
</select>
</div>
<div class="controls">
<label>Debug:</label>
<input type="checkbox" id="debug" />
</div>
<div class="controls">
<label>Trace:</label>
<input type="checkbox" id="trace" />
</div>
<div class="controls">
<label>Target Origin:</label>
<input type="text" id="targetOrigin" value="*" placeholder="* or https://domain.com" />
</div>
<div class="controls">
<label>Channel:</label>
<input type="text" id="channel" value="quartal-bridge" />
</div>
<div class="controls">
<label>Timeout (ms):</label>
<input type="number" id="timeout" value="10000" />
</div>
<div class="controls">
<label>App Prefix:</label>
<input type="text" id="appPrefix" value="" placeholder="Optional" />
</div>
<button onclick="updateIframe()">Update Iframe</button>
<button onclick="openPopup()">Open Popup</button>
<button onclick="resetDefaults()">Reset to Defaults</button>
</div>
<div class="config-section">
<h3>Generated URL:</h3>
<div class="url-display" id="generatedUrl"></div>
</div>
<div class="config-section">
<h2>Iframe Embedding</h2>
<iframe id="quartalIframe" class="iframe-container" src="" title="Quartal Embedded App"></iframe>
</div>
<div class="popup-controls">
<h3>Popup Window Controls</h3>
<p><strong>Note:</strong> Popup functionality requires a real Quartal application URL. The demo uses placeholder URLs.</p>
<button onclick="closePopup()">Close Popup</button>
<span id="popupStatus">No popup open</span>
</div>
<script>
let currentPopup = null;
function buildUrl() {
const baseUrl = document.getElementById('baseUrl').value;
const transport = document.getElementById('transport').value;
const debug = document.getElementById('debug').checked;
const trace = document.getElementById('trace').checked;
const targetOrigin = document.getElementById('targetOrigin').value;
const channel = document.getElementById('channel').value;
const timeout = document.getElementById('timeout').value;
const appPrefix = document.getElementById('appPrefix').value;
const params = new URLSearchParams();
if (transport !== 'iframe') {
params.set('transport', transport);
}
if (debug) {
params.set('debug', 'true');
}
if (trace) {
params.set('trace', 'true');
}
if (transport === 'postmessage' && targetOrigin && targetOrigin !== '*') {
params.set('targetOrigin', targetOrigin);
}
if (channel && channel !== 'quartal-bridge') {
params.set('channel', channel);
}
if (timeout && timeout !== '10000') {
params.set('timeout', timeout);
}
if (appPrefix) {
params.set('appPrefix', appPrefix);
}
const queryString = params.toString();
return queryString ? `${baseUrl}?${queryString}` : baseUrl;
}
function updateDisplay() {
const url = buildUrl();
document.getElementById('generatedUrl').textContent = url;
}
function updateIframe() {
const url = buildUrl();
document.getElementById('quartalIframe').src = url;
updateDisplay();
}
function openPopup() {
if (currentPopup) {
currentPopup.close();
}
const url = buildUrl();
currentPopup = window.open(
url,
'quartalDemo',
'width=1200,height=800,scrollbars=yes,resizable=yes'
);
if (currentPopup) {
document.getElementById('popupStatus').textContent = 'Popup opened';
// Check if popup is closed
const checkClosed = setInterval(() => {
if (currentPopup.closed) {
document.getElementById('popupStatus').textContent = 'Popup closed';
currentPopup = null;
clearInterval(checkClosed);
}
}, 1000);
} else {
document.getElementById('popupStatus').textContent = 'Popup blocked';
}
}
function closePopup() {
if (currentPopup) {
currentPopup.close();
currentPopup = null;
document.getElementById('popupStatus').textContent = 'Popup closed';
}
}
function resetDefaults() {
document.getElementById('baseUrl').value = 'https://quartal.com/accounting-embed';
document.getElementById('transport').value = 'iframe';
document.getElementById('debug').checked = false;
document.getElementById('trace').checked = false;
document.getElementById('targetOrigin').value = '*';
document.getElementById('channel').value = 'quartal-bridge';
document.getElementById('timeout').value = '10000';
document.getElementById('appPrefix').value = '';
updateDisplay();
}
// Update display when any input changes
document.addEventListener('DOMContentLoaded', function() {
const inputs = document.querySelectorAll('input, select');
inputs.forEach(input => {
input.addEventListener('change', updateDisplay);
input.addEventListener('input', updateDisplay);
});
updateDisplay();
});
// Clean up popup on page unload
window.addEventListener('beforeunload', function() {
if (currentPopup) {
currentPopup.close();
}
});
</script>
</body>
</html>