json-object-editor
Version:
JOE the Json Object Editor | Platform Edition
127 lines (116 loc) • 3.96 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>JOE — Schema Matrix</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/JsonObjectEditor/web-components/joe-matrix.css"/>
<style>
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;margin:0;padding:0;overflow:hidden}
#matrix-container{width:100vw;height:100vh;position:relative}
</style>
</head>
<body>
<div id="mcp-nav"></div>
<script src="/JsonObjectEditor/_www/mcp-nav.js"></script>
<div id="matrix-container">
<div class="matrix-controls">
<label>View Mode:</label>
<select id="view-mode">
<option value="schema-to-schema">Schema to Schema (3a)</option>
<option value="object-relationships" disabled>Object Relationships (3b) - Coming Soon</option>
<option value="aggregate-relationships" disabled>Aggregate Relationships (3c) - Coming Soon</option>
</select>
<label>Filter by App:</label>
<select id="app-filter">
<option value="">All</option>
</select>
<button id="reset-view">Reset View</button>
<button id="fit-to-screen">Fit to Screen</button>
</div>
<joe-matrix id="joe-matrix-main"></joe-matrix>
</div>
<script src="/JsonObjectEditor/js/plugins/c3/d3.v3.min.js"></script>
<script src="/JsonObjectEditor/web-components/joe-matrix.js"></script>
<script>
(function(){
// URL parameter helpers
function getUrlParam(name) {
var params = new URLSearchParams(window.location.search);
return params.get(name) || '';
}
function setUrlParam(name, value) {
var url = new URL(window.location);
if (value) {
url.searchParams.set(name, value);
} else {
url.searchParams.delete(name);
}
window.history.replaceState({}, '', url);
}
// View mode change handler
var viewMode = document.getElementById('view-mode');
var appFilter = document.getElementById('app-filter');
var resetBtn = document.getElementById('reset-view');
var fitBtn = document.getElementById('fit-to-screen');
var matrixEl = document.getElementById('joe-matrix-main');
// Read app parameter from URL on load
var initialApp = getUrlParam('app');
if (initialApp && appFilter) {
// Wait for options to be populated, then set the value
var checkInterval = setInterval(function() {
if (appFilter.options.length > 1) {
clearInterval(checkInterval);
// Check if the app exists in the options
var found = false;
for (var i = 0; i < appFilter.options.length; i++) {
if (appFilter.options[i].value === initialApp) {
appFilter.value = initialApp;
found = true;
break;
}
}
if (found && matrixEl && matrixEl.setAppFilter) {
matrixEl.setAppFilter(initialApp);
}
}
}, 100);
// Clear interval after 5 seconds to avoid infinite checking
setTimeout(function() { clearInterval(checkInterval); }, 5000);
}
if(viewMode){
viewMode.addEventListener('change', function(e){
if(matrixEl){
matrixEl.setAttribute('mode', e.target.value);
}
});
}
if(appFilter){
appFilter.addEventListener('change', function(e){
var selectedApp = e.target.value || '';
// Update URL parameter
setUrlParam('app', selectedApp);
// Update matrix filter
if(matrixEl && matrixEl.setAppFilter){
matrixEl.setAppFilter(selectedApp);
}
});
}
if(resetBtn){
resetBtn.addEventListener('click', function(){
if(matrixEl && matrixEl.resetView){
matrixEl.resetView();
}
});
}
if(fitBtn){
fitBtn.addEventListener('click', function(){
if(matrixEl && matrixEl.fitToScreen){
matrixEl.fitToScreen();
}
});
}
})();
</script>
</body>
</html>