Sindbad~EG File Manager
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0">
<title>MathXpert Grapher</title>
<style>
body, html {
margin: 0;
padding: 0;
border: none;
}
text {
font-family: 'Times New Roman', 'STIX Two Math', 'Cambria Math', 'Latin Modern Math', 'TeX Gyre Termes Math';
}
svg text {
font-family: 'Times New Roman';
}
.container {
display: flex;
align-items: center;
position: relative;
top: 0;
left: 0;
}
#svgContainer {
position: absolute;
left: 60px;
top: 0px;
z-index: 1;
text-shadow: none;
}
#titleRect {
position: absolute;
cursor: move;
border: none;
background-color: transparent;
text-shadow: none;
}
#draggableTitle0 {
position: absolute;
cursor: move;
border: none;
background-color: transparent;
text-shadow: none;
padding: 5px;
color: black;
top: 10px;
left: 10px;
z-index: 2;
}
body {
background-color: none;
}
.toolbar {
display: flex;
flex: 0 0 60px;
flex-direction: column;
gap: 5px;
align-items: center;
}
.toolbar button {
height: 17px;
}
</style>
</head>
<body>
<div class="container" id="wholeWindow">
<div id="svgContainer">
<svg id="param2" class="param" width="027" height="016" style="display:block;position:absolute;left: 0; top: 0;" xmlns="http://www.w3.org/2000/svg">
<text x = "0" y="13" style="font-style:roman;font-size:12pt;fill:rgb(0,0,0);stroke:none;">
<tspan style="font-style:italic">y'</tspan>
0<tspan style="baseline-shift:sub;font-size:8pt;"></tspan></tspan></text></svg>
<svg id="param2" class="param" width="27" height="16" style="display:block;position:absolute;left: 0; top: 0;" xmlns="http://www.w3.org/2000/svg">
<text x="0" y="13" style="font-style:roman;font-size:12pt;fill:rgb(0,0,0);stroke:none;">
<tspan style="font-style:italic">y'</tspan>
<tspan style="baseline-shift:sub;font-size:8pt;">0</tspan>
</text>
</svg>
</svg>
<div id="draggableTitle0" style="position: absolute; cursor: move; border: none; background-color: transparent; padding: 5px; left: 10px; top: 10px;">
</div>
<div id="draggableTitle1" style="position: absolute; cursor: move; border: none; background-color: transparent; padding: 5px;"> </div>
<svg id="graphSVG" width="795" height="321" top="0px" xmlns="http://www.w3.org/2000/svg">
<svg class="titleRect" id="titleRect0" top="0" left="0" width="62" height="22" xmlns="http://www.w3.org/2000/svg">
<rect x="0.00" y="0.00" width="62.00" height="22.00" style="stroke:none;fill:rgb(255,235,190);" />
</svg>
<svg id="title0" class="title" width="76" height="35" style="position:absolute;left: 555px; top: 0px;" viewBox="0 0 76 35" xmlns="http://www.w3.org/2000/svg">
<text x="8" y="24" style="font-style:italic;font-size:12pt;fill:rgb(0,0,0);">y</text>
<text x="20" y="25" style="font-style:roman;font-size:12pt;fill:rgb(0,0,0);">=</text>
<text x="32" y="24" style="font-style:italic;font-size:12pt;fill:rgb(0,0,0);">x</text>
<text x="42" y="16" style="font-style:roman;font-size:8pt;fill:rgb(0,0,0)">3</text>
<text x="52" y="24" style="font-style:roman;font-size:12pt;fill:rgb(0,0,0);">-</text>
<text x="60" y="24" style="font-style:italic;font-size:12pt;fill:rgb(0,0,0);">x</text>
</svg>
</svg>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var title0 = document.getElementById('title0');
var draggableTitle0 = document.getElementById("draggableTitle0");
let left = window.getComputedStyle(title0).left;
let top = window.getComputedStyle(title0).top;
console.log(1, 'Initial computed left of title0:', left, 'Initial computed top of title0:', top);
console.log(2, 'Initial inline style.left of draggableTitle0:', draggableTitle0.style.left);
console.log(2, 'Initial inline style.top of draggableTitle0:', draggableTitle0.style.top);
const observer = new MutationObserver(mutations => {
mutations.forEach(mutation => {
console.log('Mutation observed:', mutation);
console.log('Updated inline styles - left:', draggableTitle0.style.left, 'top:', draggableTitle0.style.top);
});
});
observer.observe(draggableTitle0, { attributes: true, attributeFilter: ['style'] });
draggableTitle0.style.left = left;
draggableTitle0.style.top = top;
console.log(3, 'Updated inline style.left of draggableTitle0:', draggableTitle0.style.left);
console.log(3, 'Updated inline style.top of draggableTitle0:', draggableTitle0.style.top);
var updatedComputedStyles = window.getComputedStyle(draggableTitle0);
console.log(4, 'Updated computed styles - left:', updatedComputedStyles.left, 'top:', updatedComputedStyles.top);
//moveSvgElementToContainer('title0', 'draggableTitle0');
moveSvgElementToContainer('titleRect0', 'draggableTitle0');
updatedComputedStyles = window.getComputedStyle(draggableTitle0);
console.log(5, 'Updated computed styles - left:', updatedComputedStyles.left, 'top:', updatedComputedStyles.top);
});
function moveSvgElementToContainer(svgElementId, destinationContainerId) {
var svgElement = document.getElementById(svgElementId);
var destinationContainer = document.getElementById(destinationContainerId);
if (svgElement && destinationContainer) {
destinationContainer.style.position = 'absolute';
// destinationContainer.style.left = svgElement.style.left;
// destinationContainer.style.top = svgElement.style.top;
var svgRect = svgElement.getBoundingClientRect();
destinationContainer.style.width = svgRect.width + 'px';
destinationContainer.style.height = svgRect.height + 'px';
destinationContainer.appendChild(svgElement);
svgElement.style.left = '0px';
svgElement.style.top = '0px';
console.log("have moved and reset", svgElement);
} else {
if (svgElement) {
console.error('destination container not found');
} else {
console.error('SVG element not found');
console.error(svgElementId);
}
}
}
let selectionMade = false;
let selectionMode = "centered";
function submitFormWithAction(actionValue) {
const form = document.getElementById('myForm');
const actionInput = document.getElementById('formAction');
actionInput.value = actionValue;
form.submit();
}
</script>
</body>
</html>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists