Sindbad~EG File Manager

<!-- toolbar.php, defines the Graph Toolbar for Web MathXpert -->
<!-- This file is meant to be included in GraphDoc.php and GetProblem.php,
and it must also be included in SymbolProc.php to make the graph button work. -->

<style>
/* Flexbox layout for the form buttons */
#myForm {
    display: flex;
    flex-wrap: wrap;
    gap: 2px; /* Adjust gap as needed */
    max-width: 62px; /* Adjust to fit the combined width of two buttons plus gap */
}

.svg-button {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    flex: 1 1 30px; /* Ensure buttons take up equal space */
}

.svg-button.draw {
    flex: 1 1 100%; /* Ensure the Draw button spans the full width */
    width: 62px;
}

/* buttons that are not inside the form */
button:not(.svg-button) {
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
}

button:focus {
    outline: none;
}

/* Flexbox layout for non-form buttons */
.non-form-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 2px; /* Adjust gap as needed */
    max-width: 62px; /* Adjust to fit the combined width of two buttons plus gap */
}
</style>
<style>
/* Tooltips  */  
.tooltip {
	position: absolute;
	background-color: lightyellow;
	color: black;
	padding: 5px;
	border-radius: 3px;
	white-space: nowrap;
	z-index: 1000;
	display: none; /* Hide by default */ 
	font-size: 12px; /* Change the font size */
	font-family: Arial, sans-serif; 
}

.tooltip::before {
    content: '';
    position: absolute;
    top: -8px; /* Adjust based on the size of the triangle */
    left: 0px; /* Adjust based on desired position */
    border-width: 0 5px 10px 0px; /* Create a triangle pointing up */
    border-style: solid;
    border-color: transparent transparent lightyellow transparent; /* Only the bottom part is visible */
}

.hidden {
	display: none;
}
#toolbar-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}


.toolbar {
  display: flex;  /* inline-block;*/
  flex-direction: column;
  flex: 1; /* Make the toolbar grow to fill the available space */
  align-items: center;
  background-color: lightblue;  
  height: 100%;  /* this makes it extend to the bottom of the window */
}

  </style>

<svg width="0" height="0">
<defs>
  <marker id="arrowhead" markerWidth="6" markerHeight="6" refX="3" refY="3" orient="auto">
    <polygon points="0 0, 6 3, 0 6" fill="white" />
  </marker>
</defs>
</svg>

<div style="display:none;">
    <?php include 'ButtonDefinitions.svg'; ?>
</div>


<div class="toolbar" id="toolbar" >
	<form id="myForm" method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>">
		<input type="hidden" name="action" id="formAction" value="">
		<input type="hidden" name="selectedRectangleField" id="selectedRectangleField" value="">
		<input type="hidden" name="mouseFunctionField" id="mouseFunctionField" value="">
		<button type="submit" name="horizontalzoomout" value="horizontalzoomout"  id="horizontalzoomout" class="svg-button"><svg width="30" height="30"><use href="#hzoomout"></use></svg></button>
		<button type="submit" name="horizontalzoomin" value="horizontalzoomin" id="horizontalzoomin" class="svg-button"><svg width="30" height="30"><use href="#shadowODE2Input1ID"></use></svg></button>
		<button type="submit" name="verticalzoomout" value="verticalzoomout"id="verticalzoomout" class="svg-button"><svg width="30" height="30"><use href="#vzoomout"></use></svg></button>
		<button type="submit" name="verticalzoomin" value="verticalzoomin" id="verticalzoomin"  class="svg-button"><svg width="30" height="30"><use href="#vzoomin"></use></svg></button>
		<button type="submit" name="doublezoomin" value="doublezoomin" id="doublezoomin" class="svg-button"><svg width="30" height="30"><use href="#zoomin"></use></svg></button>
		<button type="submit" name="doublezoomout" value="doublezoomout" id="doublezoomout" class="svg-button"><svg width="30" height="30"><use href="#zoomout"></use></svg></button>
		<button type="submit" name="directionField" name="directionField" id="directionField" class="svg-button"> <svg width="60" height="30"><use href="#directionfield"></use></svg></button>
		<button type="submit" name="draw" id="draw" class="svg-button"> <svg width="60" height="30"><use href="#draw"></use></svg></button>
	</form>
	 <div class="non-form-buttons">
		<button id="select1Button" class="svg-button" onclick="turnOnSelectRectangle()"><svg width="30" height="30"><use href="#select1"></use></svg></button>
		<button id="select2Button" class="svg-button" onclick="turnOnSelectCenteredRectangle()"><svg width="30" height="30"><use href="#select2"></use></svg></button>
		<button id="pointSlopeButton" class="svg-button" onclick="turnOnPointSlope()"><svg width="30" height="30"><use href="#pointslope"></use></svg></button>
		<button id="dragButton" class="svg-button" onclick="turnOnMouseScroll()"><svg width="30" height="30"><use href="#drag"></use></svg></button>
		<button id="assumptionsButton"class="svg-button"  onclick="showAssumptions()"><svg width="62" height="20"><use href="#assumptions"></use></svg></button>
		<button id="singularitiesButton" class="svg-button" onclick="showSingularities()"><svg width="62" height="20"><use href="#singularities"></use></svg></button>
		<button id="jumpsButton" class="svg-button" onclick="showJumps()"><svg width="62" height="20"><use href="#jumps"></use></button>
		<button id="remarksButton" class="svg-button" onclick="displayAuthorCommentary(400)"><svg width="62" height="20"><use href="#remarksText"></use></button>
		<!--  400 is the maximum width of split SVG lines --> 
	</div>
</div>

<!-- Tooltip container -->
<div id="tooltip-container" class="tooltip"></div>


<script>
// showTooltip and hideTooltip are declared in a "global scope",
// outside any function, so they can be used later to apply to 
// dynamically created buttons in GraphDoc.php
const tooltipContainer = document.getElementById('tooltip-container'); // Ensure tooltipContainer is defined

function showTooltip(event) { 
console.log("in showTooltip with ", event.target.id);
const buttonId = event.target.id;
const tooltipId = `tooltip-${buttonId}`;
const svgElement = document.getElementById(tooltipId);
const tooltipText = svgElement.querySelector('text').textContent; 
tooltipContainer.textContent = tooltipText;
const rect = event.target.getBoundingClientRect();
tooltipContainer.style.left = `${rect.left + (rect.width - tooltipContainer.offsetWidth) / 2}px`; 
let possibletop = rect.bottom + 5;   // to put it below the button
/* let possibletop = rect.top - tooltipContainer.offsetHeight -30;   
	if (possibletop < 0) 
		possibletop = 30;
	to put it above the button 
	Whether above or below, you must ensure that it does not overlap the target, ...
	as that will result in flicker from unwanted mouseleave events  */

tooltipContainer.style.top = `${possibletop}px`;   

tooltipContainer.style.display = 'block'; 
}

function hideTooltip() {
	tooltipContainer.style.display = 'none'; 
	}

	document.addEventListener('DOMContentLoaded', function() {
	const tooltipButtons = document.querySelectorAll('.svg-button'); 
	
	tooltipButtons.forEach(button => {
		button.addEventListener('mouseenter', showTooltip);
		button.addEventListener('mouseleave', hideTooltip);
		});
    
   } 
	);
   </script>