[bot]: Update Outputs
This commit is contained in:
jkrauss
committed by
github-actions[bot]
github-actions[bot]
parent
c00f1ce352
commit
6a0f1050fe
579
html/Test_5-navigate.html
Normal file
579
html/Test_5-navigate.html
Normal file
@@ -0,0 +1,579 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Main page</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<script src="markdown-it.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="theSideNav" class="navbar">
|
||||
<!-- Search bar container -->
|
||||
<div id="search-container">
|
||||
<input type="text" id="search-bar" placeholder="Search outputs..." autocomplete="off">
|
||||
<ul id="autocomplete-list"></ul>
|
||||
</div>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> reports</span>
|
||||
<ul id='folder-test_5-navigate-reports' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_reports.html#erc' class='navbar-output'>erc</a></li>
|
||||
<li><a href='Test_5-navigate_reports.html#drc' class='navbar-output'>drc</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> schematic</span>
|
||||
<ul id='folder-test_5-navigate-schematic' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_schematic.html#pdf_schematic' class='navbar-output'>pdf_schematic</a></li>
|
||||
<li><a href='Test_5-navigate_schematic.html#txt_schematic_notes' class='navbar-output'>txt_schematic_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> mfg</span>
|
||||
<ul id='folder-test_5-navigate-mfg' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> assembly</span>
|
||||
<ul id='folder-test_5-navigate_mfg-assembly' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_bom' class='navbar-output'>csv_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom' class='navbar-output'>html_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom_interactive' class='navbar-output'>html_bom_interactive</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_position' class='navbar-output'>csv_position</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#pdf_assembly' class='navbar-output'>pdf_assembly</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_comp_count' class='navbar-output'>csv_comp_count</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#txt_assembly_notes' class='navbar-output'>txt_assembly_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> fab</span>
|
||||
<ul id='folder-test_5-navigate_mfg-fab' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#gbr_gerbers' class='navbar-output'>gbr_gerbers</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#drl_excellon' class='navbar-output'>drl_excellon</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#pdf_drill_map' class='navbar-output'>pdf_drill_map</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_odb' class='navbar-output'>zip_odb</a></li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> drill-tables</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-drill-tables' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_drill-tables.html#csv_drill_table' class='navbar-output'>csv_drill_table</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#pdf_fabrication' class='navbar-output'>pdf_fabrication</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_compress_fab' class='navbar-output'>zip_compress_fab</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#csv_impedance_table' class='navbar-output'>csv_impedance_table</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#txt_fabrication_notes' class='navbar-output'>txt_fabrication_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> jlcpcb</span>
|
||||
<ul id='folder-test_5-navigate_mfg-jlcpcb' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_jlcpcb-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb_gerbers.html#jlcpcb_gerbers' class='navbar-output'>jlcpcb_gerbers</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_fabpack' class='navbar-output'>jlcpcb_fabpack</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_bom' class='navbar-output'>jlcpcb_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_cpl' class='navbar-output'>jlcpcb_cpl</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> kiri</span>
|
||||
<ul id='folder-test_5-navigate-kiri' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_kiri.html#html_kiri' class='navbar-output'>html_kiri</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> renders</span>
|
||||
<ul id='folder-test_5-navigate-renders' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_top' class='navbar-output'>pcbdraw_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_bottom' class='navbar-output'>pcbdraw_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_top' class='navbar-output'>png_3d_viewer_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_bottom' class='navbar-output'>png_3d_viewer_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_top' class='navbar-output'>png_3d_viewer_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_bottom' class='navbar-output'>png_3d_viewer_angled_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_top' class='navbar-output'>blender_3d_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_bottom' class='navbar-output'>blender_3d_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_top' class='navbar-output'>blender_3d_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_bottom' class='navbar-output'>blender_3d_angled_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> models</span>
|
||||
<ul id='folder-test_5-navigate-models' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_models.html#step' class='navbar-output'>step</a></li>
|
||||
<li><a href='Test_5-navigate_models.html#glb' class='navbar-output'>glb</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> test</span>
|
||||
<ul id='folder-test_5-navigate-test' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> testpoints</span>
|
||||
<ul id='folder-test_5-navigate_test-testpoints' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints' class='navbar-output'>csv_testpoints</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_top' class='navbar-output'>csv_testpoints_top</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_bottom' class='navbar-output'>csv_testpoints_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panels</span>
|
||||
<ul id='folder-test_5-navigate-panels' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panel-800</span>
|
||||
<ul id='folder-test_5-navigate_panels-panel-800' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_panels_panel-800.html#panel_801' class='navbar-output'>panel_801</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="topmenu" class="topmenu">
|
||||
<div style="display: flex; align-items: center; flex: 1; min-width: 0; gap: 10px;">
|
||||
<span id="open-navbar" style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
|
||||
<span id="close-navbar" style="font-size:30px;cursor:pointer;display:none;" onclick="closeNav()">⨉</span>
|
||||
<button id="back-button" onclick="history.back()" style="font-size:30px;">↩</button>
|
||||
<button id="forward-button" onclick="history.forward()" style="font-size:30px;">↪</button>
|
||||
<button id="up-button" disabled style="font-size:44px; color: gray; cursor: not-allowed; position: relative; top: -3px;">⌅</button>
|
||||
<button id="home-button" onclick="location.href='Test_5-navigate.html'" style="font-size:25px; position: relative; top: -2px;">🏠︎</button>
|
||||
</div>
|
||||
<div style="text-align: center; flex: 1; min-width: 200px;">
|
||||
<a href="https://git.asymworks.com/jkrauss/Test_5" style="text-decoration: none; color: inherit;">
|
||||
<span style="font-size:30px;">A99-9000 (Assembly Name)</span>
|
||||
</a>
|
||||
|
||||
<div style="
|
||||
font-size:14px;
|
||||
color: var(--text-color-accent);
|
||||
margin-top: 5px;">
|
||||
Asymworks, LLC
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; flex: 1; justify-content: flex-end; min-width: 0; gap: 10px; padding-right: 10px;">
|
||||
|
||||
<div style="
|
||||
text-align: left;
|
||||
font-size:14px;
|
||||
margin-right: 10px;
|
||||
color: var(--text-color-accent);">
|
||||
<div style="margin-bottom: 5px;">Rev. NO_TAG+ (Unreleased)</div>
|
||||
<div>Variant: </div>
|
||||
</div>
|
||||
<img src="images/logo.png" alt="Logo" style="max-height: 40px; max-width: 74.0px;">
|
||||
|
||||
<label class="theme-switch" style="
|
||||
position: relative;
|
||||
margin-right: 10px; /* Move toggle slightly left */
|
||||
max-width: 100%; /* Prevent overflow */
|
||||
">
|
||||
<input type="checkbox" id="themeToggle" onchange="toggleTheme()">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div class="items-container">
|
||||
<div>
|
||||
<div class="category-box" onclick="location.href='Test_5-navigate_reports.html'">
|
||||
<p class="category-title">reports</p>
|
||||
</div>
|
||||
</div><div>
|
||||
<div class="category-box" onclick="location.href='Test_5-navigate_schematic.html'">
|
||||
<p class="category-title">schematic</p>
|
||||
</div>
|
||||
</div><div>
|
||||
<div class="category-box" onclick="location.href='Test_5-navigate_mfg.html'">
|
||||
<p class="category-title">mfg</p>
|
||||
</div>
|
||||
</div><div>
|
||||
<div class="category-box" onclick="location.href='Test_5-navigate_kiri.html'">
|
||||
<p class="category-title">kiri</p>
|
||||
</div>
|
||||
</div><div>
|
||||
<div class="category-box" onclick="location.href='Test_5-navigate_renders.html'">
|
||||
<p class="category-title">renders</p>
|
||||
</div>
|
||||
</div><div>
|
||||
<div class="category-box" onclick="location.href='Test_5-navigate_models.html'">
|
||||
<p class="category-title">models</p>
|
||||
</div>
|
||||
</div><div>
|
||||
<div class="category-box" onclick="location.href='Test_5-navigate_test.html'">
|
||||
<p class="category-title">test</p>
|
||||
</div>
|
||||
</div><div>
|
||||
<div class="category-box" onclick="location.href='Test_5-navigate_panels.html'">
|
||||
<p class="category-title">panels</p>
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
<script>
|
||||
|
||||
// Side Navigation functions ===================================================
|
||||
|
||||
function openNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "360px";
|
||||
navbar.style.paddingLeft = "20px";
|
||||
main.style.marginLeft = "360px";
|
||||
document.getElementById("open-navbar").style.display = "none";
|
||||
document.getElementById("close-navbar").style.display = "inline-block";
|
||||
}
|
||||
|
||||
function closeNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "0"; // Close the navbar
|
||||
navbar.style.paddingLeft = "0"; // Reset padding
|
||||
main.style.marginLeft = "0"; // Reset page content position
|
||||
document.getElementById("open-navbar").style.display = "inline-block";
|
||||
document.getElementById("close-navbar").style.display = "none";
|
||||
}
|
||||
|
||||
function toggleFolder(folderHeader) {
|
||||
const folder = folderHeader.parentElement;
|
||||
const folderContents = folderHeader.nextElementSibling;
|
||||
|
||||
if (folder.classList.contains("open")) {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
} else {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
}
|
||||
|
||||
// Save the updated state
|
||||
saveSideNavState();
|
||||
}
|
||||
|
||||
function saveSideNavState() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const isOpen = navbar.style.width !== "0px"; // Check if navbar is open
|
||||
|
||||
// Save the state of each folder
|
||||
const folderStates = Array.from(document.querySelectorAll(".folder")).map(folder => ({
|
||||
id: folder.querySelector("span").textContent.trim(), // Use folder name as identifier
|
||||
isOpen: folder.classList.contains("open") // Check if folder is open
|
||||
}));
|
||||
|
||||
// Save the navbar and folder states to localStorage
|
||||
localStorage.setItem("navbarState", JSON.stringify({ isOpen, folderStates }));
|
||||
}
|
||||
|
||||
function restorenavbarState() {
|
||||
const savedState = localStorage.getItem("navbarState");
|
||||
if (savedState) {
|
||||
const { isOpen, folderStates } = JSON.parse(savedState);
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
// Temporarily disable animations on page load so elements don't move
|
||||
navbar.style.transition = "none";
|
||||
main.style.transition = "none";
|
||||
const chevrons = document.querySelectorAll(".chevron");
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "none";
|
||||
});
|
||||
|
||||
// Restore side navigation state
|
||||
if (isOpen) {
|
||||
openNav()
|
||||
} else {
|
||||
closeNav()
|
||||
}
|
||||
|
||||
// Restore folder open/closed states
|
||||
folderStates.forEach(({ id, isOpen }) => {
|
||||
const folder = Array.from(document.querySelectorAll(".folder"))
|
||||
.find(folder => folder.querySelector("span").textContent.trim() === id);
|
||||
|
||||
if (folder) {
|
||||
const folderContents = folder.querySelector(".folder-contents");
|
||||
if (isOpen) {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
} else {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Re-enable animation
|
||||
setTimeout(() => {
|
||||
navbar.style.transition = "";
|
||||
main.style.transition = "";
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "";
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function saveSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const scrollPosition = navbar.scrollTop;
|
||||
localStorage.setItem("navbarScrollPosition", scrollPosition);
|
||||
}
|
||||
|
||||
function restoreSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const savedPosition = localStorage.getItem("navbarScrollPosition");
|
||||
if (savedPosition !== null) {
|
||||
navbar.scrollTop = parseInt(savedPosition, 10);
|
||||
}
|
||||
}
|
||||
|
||||
function adjustSidenavOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
adjustSidenavOffset();
|
||||
window.addEventListener("resize", adjustSidenavOffset);
|
||||
|
||||
/* This is the scrolling offset when we click on an output in the side navigation bar
|
||||
It should take into account the top menu height */
|
||||
function adjustOutputOffset() {
|
||||
const topMenu = document.getElementById("topmenu"); // Replace with your top menu's ID
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight; // Dynamically get the top menu height
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", adjustOutputOffset);
|
||||
window.addEventListener("resize", adjustOutputOffset);
|
||||
|
||||
// Prevent flickering on page navigation
|
||||
window.addEventListener("beforeunload", () => {
|
||||
saveSideNavState();
|
||||
saveSidenavScrollPosition();
|
||||
});
|
||||
|
||||
window.addEventListener("load", restoreSidenavScrollPosition);
|
||||
document.addEventListener("DOMContentLoaded", restorenavbarState);
|
||||
|
||||
function initializeSearchBar(searchContainerId, outputSelector) {
|
||||
const searchContainer = document.getElementById(searchContainerId);
|
||||
if (!searchContainer) return; // Exit if container is not found
|
||||
|
||||
const searchBar = searchContainer.querySelector('#search-bar');
|
||||
const autocompleteList = searchContainer.querySelector('#autocomplete-list');
|
||||
const outputLinks = document.querySelectorAll(outputSelector);
|
||||
|
||||
// Collect output names and their hrefs
|
||||
const outputs = Array.from(outputLinks).map(link => ({
|
||||
name: link.textContent.trim(),
|
||||
href: link.getAttribute("href"),
|
||||
}));
|
||||
|
||||
let highlightedIndex = -1; // Index of the currently highlighted item
|
||||
|
||||
function adjustAutocompleteWidth() {
|
||||
const searchBarWidth = searchBar.offsetWidth;
|
||||
autocompleteList.style.width = `${searchBarWidth}px`;
|
||||
}
|
||||
|
||||
function updateAutocomplete(query) {
|
||||
autocompleteList.innerHTML = ""; // Clear suggestions
|
||||
highlightedIndex = -1; // Reset highlighting
|
||||
|
||||
const matches = outputs.filter(output =>
|
||||
output.name.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
|
||||
matches.forEach(match => {
|
||||
const listItem = document.createElement("li");
|
||||
listItem.textContent = match.name;
|
||||
listItem.addEventListener("click", () => {
|
||||
window.location.href = match.href;
|
||||
});
|
||||
autocompleteList.appendChild(listItem);
|
||||
});
|
||||
|
||||
autocompleteList.style.display = matches.length ? "block" : "none";
|
||||
}
|
||||
|
||||
function highlightItem(index) {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
items.forEach((item, i) => {
|
||||
if (i === index) {
|
||||
item.classList.add("highlighted");
|
||||
item.scrollIntoView({ block: "nearest" });
|
||||
} else {
|
||||
item.classList.remove("highlighted");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listeners for search bar input and keydown
|
||||
searchBar.addEventListener("input", () => {
|
||||
const query = searchBar.value.trim();
|
||||
if (query) updateAutocomplete(query);
|
||||
else {
|
||||
autocompleteList.innerHTML = "";
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
searchBar.addEventListener("keydown", (event) => {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
if (!items.length) return;
|
||||
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex + 1) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex - 1 + items.length) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "Enter" && highlightedIndex >= 0) {
|
||||
event.preventDefault();
|
||||
items[highlightedIndex].click();
|
||||
}
|
||||
});
|
||||
|
||||
// Hide suggestions when clicking outside
|
||||
document.addEventListener("click", (event) => {
|
||||
if (!searchBar.contains(event.target) && !autocompleteList.contains(event.target)) {
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
// Adjust width on window resize
|
||||
adjustAutocompleteWidth();
|
||||
window.addEventListener("resize", adjustAutocompleteWidth);
|
||||
}
|
||||
|
||||
// Initialize search functionality
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
initializeSearchBar("search-container", ".navbar-output");
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const md = window.markdownit({
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true
|
||||
});
|
||||
|
||||
// Find all markdown containers and render them
|
||||
document.querySelectorAll('.markdown-content').forEach(container => {
|
||||
const rawMarkdown = container.innerHTML;
|
||||
container.style.display = 'block';
|
||||
container.innerHTML = md.render(rawMarkdown);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Theme toggle ================================================================
|
||||
|
||||
function toggleTheme() {
|
||||
const body = document.body;
|
||||
|
||||
// Check if the current theme is dark
|
||||
const isDark = body.classList.contains('dark-mode');
|
||||
|
||||
// Toggle between dark and light themes
|
||||
if (isDark) {
|
||||
body.classList.remove('dark-mode');
|
||||
body.classList.add('light-mode');
|
||||
} else {
|
||||
body.classList.remove('light-mode');
|
||||
body.classList.add('dark-mode');
|
||||
}
|
||||
|
||||
// Save the selected theme to localStorage
|
||||
localStorage.setItem('theme', isDark ? 'light' : 'dark');
|
||||
}
|
||||
|
||||
// Do not animate theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
const toggleSpan = themeToggle.nextElementSibling; // The <span> element
|
||||
|
||||
// Prevent animation on page load
|
||||
const savedTheme = localStorage.getItem('theme') || 'dark';
|
||||
document.body.classList.add(savedTheme === 'dark' ? 'dark-mode' : 'light-mode');
|
||||
themeToggle.checked = savedTheme === 'dark';
|
||||
|
||||
// Add the "animate" class on user interaction
|
||||
themeToggle.addEventListener('change', () => {
|
||||
toggleSpan.classList.add('animate');
|
||||
setTimeout(() => {
|
||||
toggleSpan.classList.remove('animate'); // Remove the animation class after completion
|
||||
}, 400); // Match the CSS transition duration (0.4s)
|
||||
});
|
||||
});
|
||||
|
||||
// Avoid flickering of theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const body = document.body;
|
||||
|
||||
// Temporarily disable transitions during page load
|
||||
body.classList.add('no-transition');
|
||||
|
||||
// Remove the no-transition class after the page is fully loaded
|
||||
setTimeout(() => {
|
||||
body.classList.remove('no-transition');
|
||||
}, 50); // Allow rendering to complete before enabling transitions
|
||||
});
|
||||
|
||||
function adjustMainBodyOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const mainBody = document.getElementById("main");
|
||||
|
||||
if (topMenu && mainBody) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
mainBody.style.marginTop = `${topMenuHeight}px`;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply the adjustment on page load and window resize
|
||||
window.addEventListener("DOMContentLoaded", adjustMainBodyOffset);
|
||||
window.addEventListener("resize", adjustMainBodyOffset);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
567
html/Test_5-navigate_kiri.html
Normal file
567
html/Test_5-navigate_kiri.html
Normal file
@@ -0,0 +1,567 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>/kiri</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<script src="markdown-it.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="theSideNav" class="navbar">
|
||||
<!-- Search bar container -->
|
||||
<div id="search-container">
|
||||
<input type="text" id="search-bar" placeholder="Search outputs..." autocomplete="off">
|
||||
<ul id="autocomplete-list"></ul>
|
||||
</div>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> reports</span>
|
||||
<ul id='folder-test_5-navigate-reports' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_reports.html#erc' class='navbar-output'>erc</a></li>
|
||||
<li><a href='Test_5-navigate_reports.html#drc' class='navbar-output'>drc</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> schematic</span>
|
||||
<ul id='folder-test_5-navigate-schematic' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_schematic.html#pdf_schematic' class='navbar-output'>pdf_schematic</a></li>
|
||||
<li><a href='Test_5-navigate_schematic.html#txt_schematic_notes' class='navbar-output'>txt_schematic_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> mfg</span>
|
||||
<ul id='folder-test_5-navigate-mfg' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> assembly</span>
|
||||
<ul id='folder-test_5-navigate_mfg-assembly' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_bom' class='navbar-output'>csv_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom' class='navbar-output'>html_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom_interactive' class='navbar-output'>html_bom_interactive</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_position' class='navbar-output'>csv_position</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#pdf_assembly' class='navbar-output'>pdf_assembly</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_comp_count' class='navbar-output'>csv_comp_count</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#txt_assembly_notes' class='navbar-output'>txt_assembly_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> fab</span>
|
||||
<ul id='folder-test_5-navigate_mfg-fab' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#gbr_gerbers' class='navbar-output'>gbr_gerbers</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#drl_excellon' class='navbar-output'>drl_excellon</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#pdf_drill_map' class='navbar-output'>pdf_drill_map</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_odb' class='navbar-output'>zip_odb</a></li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> drill-tables</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-drill-tables' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_drill-tables.html#csv_drill_table' class='navbar-output'>csv_drill_table</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#pdf_fabrication' class='navbar-output'>pdf_fabrication</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_compress_fab' class='navbar-output'>zip_compress_fab</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#csv_impedance_table' class='navbar-output'>csv_impedance_table</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#txt_fabrication_notes' class='navbar-output'>txt_fabrication_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> jlcpcb</span>
|
||||
<ul id='folder-test_5-navigate_mfg-jlcpcb' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_jlcpcb-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb_gerbers.html#jlcpcb_gerbers' class='navbar-output'>jlcpcb_gerbers</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_fabpack' class='navbar-output'>jlcpcb_fabpack</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_bom' class='navbar-output'>jlcpcb_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_cpl' class='navbar-output'>jlcpcb_cpl</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> kiri</span>
|
||||
<ul id='folder-test_5-navigate-kiri' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_kiri.html#html_kiri' class='navbar-output'>html_kiri</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> renders</span>
|
||||
<ul id='folder-test_5-navigate-renders' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_top' class='navbar-output'>pcbdraw_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_bottom' class='navbar-output'>pcbdraw_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_top' class='navbar-output'>png_3d_viewer_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_bottom' class='navbar-output'>png_3d_viewer_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_top' class='navbar-output'>png_3d_viewer_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_bottom' class='navbar-output'>png_3d_viewer_angled_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_top' class='navbar-output'>blender_3d_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_bottom' class='navbar-output'>blender_3d_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_top' class='navbar-output'>blender_3d_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_bottom' class='navbar-output'>blender_3d_angled_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> models</span>
|
||||
<ul id='folder-test_5-navigate-models' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_models.html#step' class='navbar-output'>step</a></li>
|
||||
<li><a href='Test_5-navigate_models.html#glb' class='navbar-output'>glb</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> test</span>
|
||||
<ul id='folder-test_5-navigate-test' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> testpoints</span>
|
||||
<ul id='folder-test_5-navigate_test-testpoints' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints' class='navbar-output'>csv_testpoints</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_top' class='navbar-output'>csv_testpoints_top</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_bottom' class='navbar-output'>csv_testpoints_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panels</span>
|
||||
<ul id='folder-test_5-navigate-panels' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panel-800</span>
|
||||
<ul id='folder-test_5-navigate_panels-panel-800' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_panels_panel-800.html#panel_801' class='navbar-output'>panel_801</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="topmenu" class="topmenu">
|
||||
<div style="display: flex; align-items: center; flex: 1; min-width: 0; gap: 10px;">
|
||||
<span id="open-navbar" style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
|
||||
<span id="close-navbar" style="font-size:30px;cursor:pointer;display:none;" onclick="closeNav()">⨉</span>
|
||||
<button id="back-button" onclick="history.back()" style="font-size:30px;">↩</button>
|
||||
<button id="forward-button" onclick="history.forward()" style="font-size:30px;">↪</button>
|
||||
<button id="up-button" onclick="location.href='Test_5-navigate.html'" style="font-size:44px; position: relative; top: -3px;">⌅</button>
|
||||
<button id="home-button" onclick="location.href='Test_5-navigate.html'" style="font-size:25px; position: relative; top: -2px;">🏠︎</button>
|
||||
|
||||
<span style="
|
||||
font-size:18px;
|
||||
color: var(--text-color-accent);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
">
|
||||
<a href="Test_5-navigate_kiri.html" style="text-decoration:none;color:inherit;">kiri</a>
|
||||
</span>
|
||||
</div>
|
||||
<div style="text-align: center; flex: 1; min-width: 200px;">
|
||||
<a href="https://git.asymworks.com/jkrauss/Test_5" style="text-decoration: none; color: inherit;">
|
||||
<span style="font-size:30px;">A99-9000 (Assembly Name)</span>
|
||||
</a>
|
||||
|
||||
<div style="
|
||||
font-size:14px;
|
||||
color: var(--text-color-accent);
|
||||
margin-top: 5px;">
|
||||
Asymworks, LLC
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; flex: 1; justify-content: flex-end; min-width: 0; gap: 10px; padding-right: 10px;">
|
||||
|
||||
<div style="
|
||||
text-align: left;
|
||||
font-size:14px;
|
||||
margin-right: 10px;
|
||||
color: var(--text-color-accent);">
|
||||
<div style="margin-bottom: 5px;">Rev. NO_TAG+ (Unreleased)</div>
|
||||
<div>Variant: </div>
|
||||
</div>
|
||||
<img src="images/logo.png" alt="Logo" style="max-height: 40px; max-width: 74.0px;">
|
||||
|
||||
<label class="theme-switch" style="
|
||||
position: relative;
|
||||
margin-right: 10px; /* Move toggle slightly left */
|
||||
max-width: 100%; /* Prevent overflow */
|
||||
">
|
||||
<input type="checkbox" id="themeToggle" onchange="toggleTheme()">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div class="output-virtual-box" id="html_kiri">
|
||||
<div class="output-comment">KiRI webpage</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../kiri/index.html'">
|
||||
<img src="images/icon.svg_64.png" alt="index.html" width="64" height="64">
|
||||
<p class="filename">index.html</p>
|
||||
<p class="output-name">html_kiri</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// Side Navigation functions ===================================================
|
||||
|
||||
function openNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "360px";
|
||||
navbar.style.paddingLeft = "20px";
|
||||
main.style.marginLeft = "360px";
|
||||
document.getElementById("open-navbar").style.display = "none";
|
||||
document.getElementById("close-navbar").style.display = "inline-block";
|
||||
}
|
||||
|
||||
function closeNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "0"; // Close the navbar
|
||||
navbar.style.paddingLeft = "0"; // Reset padding
|
||||
main.style.marginLeft = "0"; // Reset page content position
|
||||
document.getElementById("open-navbar").style.display = "inline-block";
|
||||
document.getElementById("close-navbar").style.display = "none";
|
||||
}
|
||||
|
||||
function toggleFolder(folderHeader) {
|
||||
const folder = folderHeader.parentElement;
|
||||
const folderContents = folderHeader.nextElementSibling;
|
||||
|
||||
if (folder.classList.contains("open")) {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
} else {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
}
|
||||
|
||||
// Save the updated state
|
||||
saveSideNavState();
|
||||
}
|
||||
|
||||
function saveSideNavState() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const isOpen = navbar.style.width !== "0px"; // Check if navbar is open
|
||||
|
||||
// Save the state of each folder
|
||||
const folderStates = Array.from(document.querySelectorAll(".folder")).map(folder => ({
|
||||
id: folder.querySelector("span").textContent.trim(), // Use folder name as identifier
|
||||
isOpen: folder.classList.contains("open") // Check if folder is open
|
||||
}));
|
||||
|
||||
// Save the navbar and folder states to localStorage
|
||||
localStorage.setItem("navbarState", JSON.stringify({ isOpen, folderStates }));
|
||||
}
|
||||
|
||||
function restorenavbarState() {
|
||||
const savedState = localStorage.getItem("navbarState");
|
||||
if (savedState) {
|
||||
const { isOpen, folderStates } = JSON.parse(savedState);
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
// Temporarily disable animations on page load so elements don't move
|
||||
navbar.style.transition = "none";
|
||||
main.style.transition = "none";
|
||||
const chevrons = document.querySelectorAll(".chevron");
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "none";
|
||||
});
|
||||
|
||||
// Restore side navigation state
|
||||
if (isOpen) {
|
||||
openNav()
|
||||
} else {
|
||||
closeNav()
|
||||
}
|
||||
|
||||
// Restore folder open/closed states
|
||||
folderStates.forEach(({ id, isOpen }) => {
|
||||
const folder = Array.from(document.querySelectorAll(".folder"))
|
||||
.find(folder => folder.querySelector("span").textContent.trim() === id);
|
||||
|
||||
if (folder) {
|
||||
const folderContents = folder.querySelector(".folder-contents");
|
||||
if (isOpen) {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
} else {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Re-enable animation
|
||||
setTimeout(() => {
|
||||
navbar.style.transition = "";
|
||||
main.style.transition = "";
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "";
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function saveSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const scrollPosition = navbar.scrollTop;
|
||||
localStorage.setItem("navbarScrollPosition", scrollPosition);
|
||||
}
|
||||
|
||||
function restoreSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const savedPosition = localStorage.getItem("navbarScrollPosition");
|
||||
if (savedPosition !== null) {
|
||||
navbar.scrollTop = parseInt(savedPosition, 10);
|
||||
}
|
||||
}
|
||||
|
||||
function adjustSidenavOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
adjustSidenavOffset();
|
||||
window.addEventListener("resize", adjustSidenavOffset);
|
||||
|
||||
/* This is the scrolling offset when we click on an output in the side navigation bar
|
||||
It should take into account the top menu height */
|
||||
function adjustOutputOffset() {
|
||||
const topMenu = document.getElementById("topmenu"); // Replace with your top menu's ID
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight; // Dynamically get the top menu height
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", adjustOutputOffset);
|
||||
window.addEventListener("resize", adjustOutputOffset);
|
||||
|
||||
// Prevent flickering on page navigation
|
||||
window.addEventListener("beforeunload", () => {
|
||||
saveSideNavState();
|
||||
saveSidenavScrollPosition();
|
||||
});
|
||||
|
||||
window.addEventListener("load", restoreSidenavScrollPosition);
|
||||
document.addEventListener("DOMContentLoaded", restorenavbarState);
|
||||
|
||||
function initializeSearchBar(searchContainerId, outputSelector) {
|
||||
const searchContainer = document.getElementById(searchContainerId);
|
||||
if (!searchContainer) return; // Exit if container is not found
|
||||
|
||||
const searchBar = searchContainer.querySelector('#search-bar');
|
||||
const autocompleteList = searchContainer.querySelector('#autocomplete-list');
|
||||
const outputLinks = document.querySelectorAll(outputSelector);
|
||||
|
||||
// Collect output names and their hrefs
|
||||
const outputs = Array.from(outputLinks).map(link => ({
|
||||
name: link.textContent.trim(),
|
||||
href: link.getAttribute("href"),
|
||||
}));
|
||||
|
||||
let highlightedIndex = -1; // Index of the currently highlighted item
|
||||
|
||||
function adjustAutocompleteWidth() {
|
||||
const searchBarWidth = searchBar.offsetWidth;
|
||||
autocompleteList.style.width = `${searchBarWidth}px`;
|
||||
}
|
||||
|
||||
function updateAutocomplete(query) {
|
||||
autocompleteList.innerHTML = ""; // Clear suggestions
|
||||
highlightedIndex = -1; // Reset highlighting
|
||||
|
||||
const matches = outputs.filter(output =>
|
||||
output.name.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
|
||||
matches.forEach(match => {
|
||||
const listItem = document.createElement("li");
|
||||
listItem.textContent = match.name;
|
||||
listItem.addEventListener("click", () => {
|
||||
window.location.href = match.href;
|
||||
});
|
||||
autocompleteList.appendChild(listItem);
|
||||
});
|
||||
|
||||
autocompleteList.style.display = matches.length ? "block" : "none";
|
||||
}
|
||||
|
||||
function highlightItem(index) {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
items.forEach((item, i) => {
|
||||
if (i === index) {
|
||||
item.classList.add("highlighted");
|
||||
item.scrollIntoView({ block: "nearest" });
|
||||
} else {
|
||||
item.classList.remove("highlighted");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listeners for search bar input and keydown
|
||||
searchBar.addEventListener("input", () => {
|
||||
const query = searchBar.value.trim();
|
||||
if (query) updateAutocomplete(query);
|
||||
else {
|
||||
autocompleteList.innerHTML = "";
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
searchBar.addEventListener("keydown", (event) => {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
if (!items.length) return;
|
||||
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex + 1) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex - 1 + items.length) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "Enter" && highlightedIndex >= 0) {
|
||||
event.preventDefault();
|
||||
items[highlightedIndex].click();
|
||||
}
|
||||
});
|
||||
|
||||
// Hide suggestions when clicking outside
|
||||
document.addEventListener("click", (event) => {
|
||||
if (!searchBar.contains(event.target) && !autocompleteList.contains(event.target)) {
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
// Adjust width on window resize
|
||||
adjustAutocompleteWidth();
|
||||
window.addEventListener("resize", adjustAutocompleteWidth);
|
||||
}
|
||||
|
||||
// Initialize search functionality
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
initializeSearchBar("search-container", ".navbar-output");
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const md = window.markdownit({
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true
|
||||
});
|
||||
|
||||
// Find all markdown containers and render them
|
||||
document.querySelectorAll('.markdown-content').forEach(container => {
|
||||
const rawMarkdown = container.innerHTML;
|
||||
container.style.display = 'block';
|
||||
container.innerHTML = md.render(rawMarkdown);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Theme toggle ================================================================
|
||||
|
||||
function toggleTheme() {
|
||||
const body = document.body;
|
||||
|
||||
// Check if the current theme is dark
|
||||
const isDark = body.classList.contains('dark-mode');
|
||||
|
||||
// Toggle between dark and light themes
|
||||
if (isDark) {
|
||||
body.classList.remove('dark-mode');
|
||||
body.classList.add('light-mode');
|
||||
} else {
|
||||
body.classList.remove('light-mode');
|
||||
body.classList.add('dark-mode');
|
||||
}
|
||||
|
||||
// Save the selected theme to localStorage
|
||||
localStorage.setItem('theme', isDark ? 'light' : 'dark');
|
||||
}
|
||||
|
||||
// Do not animate theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
const toggleSpan = themeToggle.nextElementSibling; // The <span> element
|
||||
|
||||
// Prevent animation on page load
|
||||
const savedTheme = localStorage.getItem('theme') || 'dark';
|
||||
document.body.classList.add(savedTheme === 'dark' ? 'dark-mode' : 'light-mode');
|
||||
themeToggle.checked = savedTheme === 'dark';
|
||||
|
||||
// Add the "animate" class on user interaction
|
||||
themeToggle.addEventListener('change', () => {
|
||||
toggleSpan.classList.add('animate');
|
||||
setTimeout(() => {
|
||||
toggleSpan.classList.remove('animate'); // Remove the animation class after completion
|
||||
}, 400); // Match the CSS transition duration (0.4s)
|
||||
});
|
||||
});
|
||||
|
||||
// Avoid flickering of theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const body = document.body;
|
||||
|
||||
// Temporarily disable transitions during page load
|
||||
body.classList.add('no-transition');
|
||||
|
||||
// Remove the no-transition class after the page is fully loaded
|
||||
setTimeout(() => {
|
||||
body.classList.remove('no-transition');
|
||||
}, 50); // Allow rendering to complete before enabling transitions
|
||||
});
|
||||
|
||||
function adjustMainBodyOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const mainBody = document.getElementById("main");
|
||||
|
||||
if (topMenu && mainBody) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
mainBody.style.marginTop = `${topMenuHeight}px`;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply the adjustment on page load and window resize
|
||||
window.addEventListener("DOMContentLoaded", adjustMainBodyOffset);
|
||||
window.addEventListener("resize", adjustMainBodyOffset);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
570
html/Test_5-navigate_mfg.html
Normal file
570
html/Test_5-navigate_mfg.html
Normal file
@@ -0,0 +1,570 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>/mfg</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<script src="markdown-it.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="theSideNav" class="navbar">
|
||||
<!-- Search bar container -->
|
||||
<div id="search-container">
|
||||
<input type="text" id="search-bar" placeholder="Search outputs..." autocomplete="off">
|
||||
<ul id="autocomplete-list"></ul>
|
||||
</div>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> reports</span>
|
||||
<ul id='folder-test_5-navigate-reports' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_reports.html#erc' class='navbar-output'>erc</a></li>
|
||||
<li><a href='Test_5-navigate_reports.html#drc' class='navbar-output'>drc</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> schematic</span>
|
||||
<ul id='folder-test_5-navigate-schematic' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_schematic.html#pdf_schematic' class='navbar-output'>pdf_schematic</a></li>
|
||||
<li><a href='Test_5-navigate_schematic.html#txt_schematic_notes' class='navbar-output'>txt_schematic_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> mfg</span>
|
||||
<ul id='folder-test_5-navigate-mfg' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> assembly</span>
|
||||
<ul id='folder-test_5-navigate_mfg-assembly' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_bom' class='navbar-output'>csv_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom' class='navbar-output'>html_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom_interactive' class='navbar-output'>html_bom_interactive</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_position' class='navbar-output'>csv_position</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#pdf_assembly' class='navbar-output'>pdf_assembly</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_comp_count' class='navbar-output'>csv_comp_count</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#txt_assembly_notes' class='navbar-output'>txt_assembly_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> fab</span>
|
||||
<ul id='folder-test_5-navigate_mfg-fab' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#gbr_gerbers' class='navbar-output'>gbr_gerbers</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#drl_excellon' class='navbar-output'>drl_excellon</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#pdf_drill_map' class='navbar-output'>pdf_drill_map</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_odb' class='navbar-output'>zip_odb</a></li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> drill-tables</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-drill-tables' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_drill-tables.html#csv_drill_table' class='navbar-output'>csv_drill_table</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#pdf_fabrication' class='navbar-output'>pdf_fabrication</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_compress_fab' class='navbar-output'>zip_compress_fab</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#csv_impedance_table' class='navbar-output'>csv_impedance_table</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#txt_fabrication_notes' class='navbar-output'>txt_fabrication_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> jlcpcb</span>
|
||||
<ul id='folder-test_5-navigate_mfg-jlcpcb' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_jlcpcb-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb_gerbers.html#jlcpcb_gerbers' class='navbar-output'>jlcpcb_gerbers</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_fabpack' class='navbar-output'>jlcpcb_fabpack</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_bom' class='navbar-output'>jlcpcb_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_cpl' class='navbar-output'>jlcpcb_cpl</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> kiri</span>
|
||||
<ul id='folder-test_5-navigate-kiri' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_kiri.html#html_kiri' class='navbar-output'>html_kiri</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> renders</span>
|
||||
<ul id='folder-test_5-navigate-renders' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_top' class='navbar-output'>pcbdraw_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_bottom' class='navbar-output'>pcbdraw_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_top' class='navbar-output'>png_3d_viewer_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_bottom' class='navbar-output'>png_3d_viewer_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_top' class='navbar-output'>png_3d_viewer_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_bottom' class='navbar-output'>png_3d_viewer_angled_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_top' class='navbar-output'>blender_3d_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_bottom' class='navbar-output'>blender_3d_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_top' class='navbar-output'>blender_3d_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_bottom' class='navbar-output'>blender_3d_angled_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> models</span>
|
||||
<ul id='folder-test_5-navigate-models' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_models.html#step' class='navbar-output'>step</a></li>
|
||||
<li><a href='Test_5-navigate_models.html#glb' class='navbar-output'>glb</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> test</span>
|
||||
<ul id='folder-test_5-navigate-test' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> testpoints</span>
|
||||
<ul id='folder-test_5-navigate_test-testpoints' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints' class='navbar-output'>csv_testpoints</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_top' class='navbar-output'>csv_testpoints_top</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_bottom' class='navbar-output'>csv_testpoints_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panels</span>
|
||||
<ul id='folder-test_5-navigate-panels' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panel-800</span>
|
||||
<ul id='folder-test_5-navigate_panels-panel-800' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_panels_panel-800.html#panel_801' class='navbar-output'>panel_801</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="topmenu" class="topmenu">
|
||||
<div style="display: flex; align-items: center; flex: 1; min-width: 0; gap: 10px;">
|
||||
<span id="open-navbar" style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
|
||||
<span id="close-navbar" style="font-size:30px;cursor:pointer;display:none;" onclick="closeNav()">⨉</span>
|
||||
<button id="back-button" onclick="history.back()" style="font-size:30px;">↩</button>
|
||||
<button id="forward-button" onclick="history.forward()" style="font-size:30px;">↪</button>
|
||||
<button id="up-button" onclick="location.href='Test_5-navigate.html'" style="font-size:44px; position: relative; top: -3px;">⌅</button>
|
||||
<button id="home-button" onclick="location.href='Test_5-navigate.html'" style="font-size:25px; position: relative; top: -2px;">🏠︎</button>
|
||||
|
||||
<span style="
|
||||
font-size:18px;
|
||||
color: var(--text-color-accent);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
">
|
||||
<a href="Test_5-navigate_mfg.html" style="text-decoration:none;color:inherit;">mfg</a>
|
||||
</span>
|
||||
</div>
|
||||
<div style="text-align: center; flex: 1; min-width: 200px;">
|
||||
<a href="https://git.asymworks.com/jkrauss/Test_5" style="text-decoration: none; color: inherit;">
|
||||
<span style="font-size:30px;">A99-9000 (Assembly Name)</span>
|
||||
</a>
|
||||
|
||||
<div style="
|
||||
font-size:14px;
|
||||
color: var(--text-color-accent);
|
||||
margin-top: 5px;">
|
||||
Asymworks, LLC
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; flex: 1; justify-content: flex-end; min-width: 0; gap: 10px; padding-right: 10px;">
|
||||
|
||||
<div style="
|
||||
text-align: left;
|
||||
font-size:14px;
|
||||
margin-right: 10px;
|
||||
color: var(--text-color-accent);">
|
||||
<div style="margin-bottom: 5px;">Rev. NO_TAG+ (Unreleased)</div>
|
||||
<div>Variant: </div>
|
||||
</div>
|
||||
<img src="images/logo.png" alt="Logo" style="max-height: 40px; max-width: 74.0px;">
|
||||
|
||||
<label class="theme-switch" style="
|
||||
position: relative;
|
||||
margin-right: 10px; /* Move toggle slightly left */
|
||||
max-width: 100%; /* Prevent overflow */
|
||||
">
|
||||
<input type="checkbox" id="themeToggle" onchange="toggleTheme()">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div class="items-container">
|
||||
<div>
|
||||
<div class="category-box" onclick="location.href='Test_5-navigate_mfg_assembly.html'">
|
||||
<p class="category-title">assembly</p>
|
||||
</div>
|
||||
</div><div>
|
||||
<div class="category-box" onclick="location.href='Test_5-navigate_mfg_fab.html'">
|
||||
<p class="category-title">fab</p>
|
||||
</div>
|
||||
</div><div>
|
||||
<div class="category-box" onclick="location.href='Test_5-navigate_mfg_jlcpcb.html'">
|
||||
<p class="category-title">jlcpcb</p>
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
<script>
|
||||
|
||||
// Side Navigation functions ===================================================
|
||||
|
||||
function openNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "360px";
|
||||
navbar.style.paddingLeft = "20px";
|
||||
main.style.marginLeft = "360px";
|
||||
document.getElementById("open-navbar").style.display = "none";
|
||||
document.getElementById("close-navbar").style.display = "inline-block";
|
||||
}
|
||||
|
||||
function closeNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "0"; // Close the navbar
|
||||
navbar.style.paddingLeft = "0"; // Reset padding
|
||||
main.style.marginLeft = "0"; // Reset page content position
|
||||
document.getElementById("open-navbar").style.display = "inline-block";
|
||||
document.getElementById("close-navbar").style.display = "none";
|
||||
}
|
||||
|
||||
function toggleFolder(folderHeader) {
|
||||
const folder = folderHeader.parentElement;
|
||||
const folderContents = folderHeader.nextElementSibling;
|
||||
|
||||
if (folder.classList.contains("open")) {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
} else {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
}
|
||||
|
||||
// Save the updated state
|
||||
saveSideNavState();
|
||||
}
|
||||
|
||||
function saveSideNavState() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const isOpen = navbar.style.width !== "0px"; // Check if navbar is open
|
||||
|
||||
// Save the state of each folder
|
||||
const folderStates = Array.from(document.querySelectorAll(".folder")).map(folder => ({
|
||||
id: folder.querySelector("span").textContent.trim(), // Use folder name as identifier
|
||||
isOpen: folder.classList.contains("open") // Check if folder is open
|
||||
}));
|
||||
|
||||
// Save the navbar and folder states to localStorage
|
||||
localStorage.setItem("navbarState", JSON.stringify({ isOpen, folderStates }));
|
||||
}
|
||||
|
||||
function restorenavbarState() {
|
||||
const savedState = localStorage.getItem("navbarState");
|
||||
if (savedState) {
|
||||
const { isOpen, folderStates } = JSON.parse(savedState);
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
// Temporarily disable animations on page load so elements don't move
|
||||
navbar.style.transition = "none";
|
||||
main.style.transition = "none";
|
||||
const chevrons = document.querySelectorAll(".chevron");
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "none";
|
||||
});
|
||||
|
||||
// Restore side navigation state
|
||||
if (isOpen) {
|
||||
openNav()
|
||||
} else {
|
||||
closeNav()
|
||||
}
|
||||
|
||||
// Restore folder open/closed states
|
||||
folderStates.forEach(({ id, isOpen }) => {
|
||||
const folder = Array.from(document.querySelectorAll(".folder"))
|
||||
.find(folder => folder.querySelector("span").textContent.trim() === id);
|
||||
|
||||
if (folder) {
|
||||
const folderContents = folder.querySelector(".folder-contents");
|
||||
if (isOpen) {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
} else {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Re-enable animation
|
||||
setTimeout(() => {
|
||||
navbar.style.transition = "";
|
||||
main.style.transition = "";
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "";
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function saveSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const scrollPosition = navbar.scrollTop;
|
||||
localStorage.setItem("navbarScrollPosition", scrollPosition);
|
||||
}
|
||||
|
||||
function restoreSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const savedPosition = localStorage.getItem("navbarScrollPosition");
|
||||
if (savedPosition !== null) {
|
||||
navbar.scrollTop = parseInt(savedPosition, 10);
|
||||
}
|
||||
}
|
||||
|
||||
function adjustSidenavOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
adjustSidenavOffset();
|
||||
window.addEventListener("resize", adjustSidenavOffset);
|
||||
|
||||
/* This is the scrolling offset when we click on an output in the side navigation bar
|
||||
It should take into account the top menu height */
|
||||
function adjustOutputOffset() {
|
||||
const topMenu = document.getElementById("topmenu"); // Replace with your top menu's ID
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight; // Dynamically get the top menu height
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", adjustOutputOffset);
|
||||
window.addEventListener("resize", adjustOutputOffset);
|
||||
|
||||
// Prevent flickering on page navigation
|
||||
window.addEventListener("beforeunload", () => {
|
||||
saveSideNavState();
|
||||
saveSidenavScrollPosition();
|
||||
});
|
||||
|
||||
window.addEventListener("load", restoreSidenavScrollPosition);
|
||||
document.addEventListener("DOMContentLoaded", restorenavbarState);
|
||||
|
||||
function initializeSearchBar(searchContainerId, outputSelector) {
|
||||
const searchContainer = document.getElementById(searchContainerId);
|
||||
if (!searchContainer) return; // Exit if container is not found
|
||||
|
||||
const searchBar = searchContainer.querySelector('#search-bar');
|
||||
const autocompleteList = searchContainer.querySelector('#autocomplete-list');
|
||||
const outputLinks = document.querySelectorAll(outputSelector);
|
||||
|
||||
// Collect output names and their hrefs
|
||||
const outputs = Array.from(outputLinks).map(link => ({
|
||||
name: link.textContent.trim(),
|
||||
href: link.getAttribute("href"),
|
||||
}));
|
||||
|
||||
let highlightedIndex = -1; // Index of the currently highlighted item
|
||||
|
||||
function adjustAutocompleteWidth() {
|
||||
const searchBarWidth = searchBar.offsetWidth;
|
||||
autocompleteList.style.width = `${searchBarWidth}px`;
|
||||
}
|
||||
|
||||
function updateAutocomplete(query) {
|
||||
autocompleteList.innerHTML = ""; // Clear suggestions
|
||||
highlightedIndex = -1; // Reset highlighting
|
||||
|
||||
const matches = outputs.filter(output =>
|
||||
output.name.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
|
||||
matches.forEach(match => {
|
||||
const listItem = document.createElement("li");
|
||||
listItem.textContent = match.name;
|
||||
listItem.addEventListener("click", () => {
|
||||
window.location.href = match.href;
|
||||
});
|
||||
autocompleteList.appendChild(listItem);
|
||||
});
|
||||
|
||||
autocompleteList.style.display = matches.length ? "block" : "none";
|
||||
}
|
||||
|
||||
function highlightItem(index) {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
items.forEach((item, i) => {
|
||||
if (i === index) {
|
||||
item.classList.add("highlighted");
|
||||
item.scrollIntoView({ block: "nearest" });
|
||||
} else {
|
||||
item.classList.remove("highlighted");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listeners for search bar input and keydown
|
||||
searchBar.addEventListener("input", () => {
|
||||
const query = searchBar.value.trim();
|
||||
if (query) updateAutocomplete(query);
|
||||
else {
|
||||
autocompleteList.innerHTML = "";
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
searchBar.addEventListener("keydown", (event) => {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
if (!items.length) return;
|
||||
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex + 1) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex - 1 + items.length) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "Enter" && highlightedIndex >= 0) {
|
||||
event.preventDefault();
|
||||
items[highlightedIndex].click();
|
||||
}
|
||||
});
|
||||
|
||||
// Hide suggestions when clicking outside
|
||||
document.addEventListener("click", (event) => {
|
||||
if (!searchBar.contains(event.target) && !autocompleteList.contains(event.target)) {
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
// Adjust width on window resize
|
||||
adjustAutocompleteWidth();
|
||||
window.addEventListener("resize", adjustAutocompleteWidth);
|
||||
}
|
||||
|
||||
// Initialize search functionality
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
initializeSearchBar("search-container", ".navbar-output");
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const md = window.markdownit({
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true
|
||||
});
|
||||
|
||||
// Find all markdown containers and render them
|
||||
document.querySelectorAll('.markdown-content').forEach(container => {
|
||||
const rawMarkdown = container.innerHTML;
|
||||
container.style.display = 'block';
|
||||
container.innerHTML = md.render(rawMarkdown);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Theme toggle ================================================================
|
||||
|
||||
function toggleTheme() {
|
||||
const body = document.body;
|
||||
|
||||
// Check if the current theme is dark
|
||||
const isDark = body.classList.contains('dark-mode');
|
||||
|
||||
// Toggle between dark and light themes
|
||||
if (isDark) {
|
||||
body.classList.remove('dark-mode');
|
||||
body.classList.add('light-mode');
|
||||
} else {
|
||||
body.classList.remove('light-mode');
|
||||
body.classList.add('dark-mode');
|
||||
}
|
||||
|
||||
// Save the selected theme to localStorage
|
||||
localStorage.setItem('theme', isDark ? 'light' : 'dark');
|
||||
}
|
||||
|
||||
// Do not animate theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
const toggleSpan = themeToggle.nextElementSibling; // The <span> element
|
||||
|
||||
// Prevent animation on page load
|
||||
const savedTheme = localStorage.getItem('theme') || 'dark';
|
||||
document.body.classList.add(savedTheme === 'dark' ? 'dark-mode' : 'light-mode');
|
||||
themeToggle.checked = savedTheme === 'dark';
|
||||
|
||||
// Add the "animate" class on user interaction
|
||||
themeToggle.addEventListener('change', () => {
|
||||
toggleSpan.classList.add('animate');
|
||||
setTimeout(() => {
|
||||
toggleSpan.classList.remove('animate'); // Remove the animation class after completion
|
||||
}, 400); // Match the CSS transition duration (0.4s)
|
||||
});
|
||||
});
|
||||
|
||||
// Avoid flickering of theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const body = document.body;
|
||||
|
||||
// Temporarily disable transitions during page load
|
||||
body.classList.add('no-transition');
|
||||
|
||||
// Remove the no-transition class after the page is fully loaded
|
||||
setTimeout(() => {
|
||||
body.classList.remove('no-transition');
|
||||
}, 50); // Allow rendering to complete before enabling transitions
|
||||
});
|
||||
|
||||
function adjustMainBodyOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const mainBody = document.getElementById("main");
|
||||
|
||||
if (topMenu && mainBody) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
mainBody.style.marginTop = `${topMenuHeight}px`;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply the adjustment on page load and window resize
|
||||
window.addEventListener("DOMContentLoaded", adjustMainBodyOffset);
|
||||
window.addEventListener("resize", adjustMainBodyOffset);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
633
html/Test_5-navigate_mfg_assembly.html
Normal file
633
html/Test_5-navigate_mfg_assembly.html
Normal file
@@ -0,0 +1,633 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>/mfg/assembly</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<script src="markdown-it.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="theSideNav" class="navbar">
|
||||
<!-- Search bar container -->
|
||||
<div id="search-container">
|
||||
<input type="text" id="search-bar" placeholder="Search outputs..." autocomplete="off">
|
||||
<ul id="autocomplete-list"></ul>
|
||||
</div>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> reports</span>
|
||||
<ul id='folder-test_5-navigate-reports' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_reports.html#erc' class='navbar-output'>erc</a></li>
|
||||
<li><a href='Test_5-navigate_reports.html#drc' class='navbar-output'>drc</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> schematic</span>
|
||||
<ul id='folder-test_5-navigate-schematic' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_schematic.html#pdf_schematic' class='navbar-output'>pdf_schematic</a></li>
|
||||
<li><a href='Test_5-navigate_schematic.html#txt_schematic_notes' class='navbar-output'>txt_schematic_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> mfg</span>
|
||||
<ul id='folder-test_5-navigate-mfg' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> assembly</span>
|
||||
<ul id='folder-test_5-navigate_mfg-assembly' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_bom' class='navbar-output'>csv_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom' class='navbar-output'>html_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom_interactive' class='navbar-output'>html_bom_interactive</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_position' class='navbar-output'>csv_position</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#pdf_assembly' class='navbar-output'>pdf_assembly</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_comp_count' class='navbar-output'>csv_comp_count</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#txt_assembly_notes' class='navbar-output'>txt_assembly_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> fab</span>
|
||||
<ul id='folder-test_5-navigate_mfg-fab' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#gbr_gerbers' class='navbar-output'>gbr_gerbers</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#drl_excellon' class='navbar-output'>drl_excellon</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#pdf_drill_map' class='navbar-output'>pdf_drill_map</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_odb' class='navbar-output'>zip_odb</a></li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> drill-tables</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-drill-tables' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_drill-tables.html#csv_drill_table' class='navbar-output'>csv_drill_table</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#pdf_fabrication' class='navbar-output'>pdf_fabrication</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_compress_fab' class='navbar-output'>zip_compress_fab</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#csv_impedance_table' class='navbar-output'>csv_impedance_table</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#txt_fabrication_notes' class='navbar-output'>txt_fabrication_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> jlcpcb</span>
|
||||
<ul id='folder-test_5-navigate_mfg-jlcpcb' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_jlcpcb-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb_gerbers.html#jlcpcb_gerbers' class='navbar-output'>jlcpcb_gerbers</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_fabpack' class='navbar-output'>jlcpcb_fabpack</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_bom' class='navbar-output'>jlcpcb_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_cpl' class='navbar-output'>jlcpcb_cpl</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> kiri</span>
|
||||
<ul id='folder-test_5-navigate-kiri' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_kiri.html#html_kiri' class='navbar-output'>html_kiri</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> renders</span>
|
||||
<ul id='folder-test_5-navigate-renders' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_top' class='navbar-output'>pcbdraw_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_bottom' class='navbar-output'>pcbdraw_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_top' class='navbar-output'>png_3d_viewer_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_bottom' class='navbar-output'>png_3d_viewer_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_top' class='navbar-output'>png_3d_viewer_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_bottom' class='navbar-output'>png_3d_viewer_angled_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_top' class='navbar-output'>blender_3d_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_bottom' class='navbar-output'>blender_3d_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_top' class='navbar-output'>blender_3d_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_bottom' class='navbar-output'>blender_3d_angled_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> models</span>
|
||||
<ul id='folder-test_5-navigate-models' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_models.html#step' class='navbar-output'>step</a></li>
|
||||
<li><a href='Test_5-navigate_models.html#glb' class='navbar-output'>glb</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> test</span>
|
||||
<ul id='folder-test_5-navigate-test' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> testpoints</span>
|
||||
<ul id='folder-test_5-navigate_test-testpoints' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints' class='navbar-output'>csv_testpoints</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_top' class='navbar-output'>csv_testpoints_top</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_bottom' class='navbar-output'>csv_testpoints_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panels</span>
|
||||
<ul id='folder-test_5-navigate-panels' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panel-800</span>
|
||||
<ul id='folder-test_5-navigate_panels-panel-800' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_panels_panel-800.html#panel_801' class='navbar-output'>panel_801</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="topmenu" class="topmenu">
|
||||
<div style="display: flex; align-items: center; flex: 1; min-width: 0; gap: 10px;">
|
||||
<span id="open-navbar" style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
|
||||
<span id="close-navbar" style="font-size:30px;cursor:pointer;display:none;" onclick="closeNav()">⨉</span>
|
||||
<button id="back-button" onclick="history.back()" style="font-size:30px;">↩</button>
|
||||
<button id="forward-button" onclick="history.forward()" style="font-size:30px;">↪</button>
|
||||
<button id="up-button" onclick="location.href='Test_5-navigate_mfg.html'" style="font-size:44px; position: relative; top: -3px;">⌅</button>
|
||||
<button id="home-button" onclick="location.href='Test_5-navigate.html'" style="font-size:25px; position: relative; top: -2px;">🏠︎</button>
|
||||
|
||||
<span style="
|
||||
font-size:18px;
|
||||
color: var(--text-color-accent);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
">
|
||||
<a href="Test_5-navigate_mfg.html" style="text-decoration:none;color:inherit;">mfg</a>/<wbr><a href="Test_5-navigate_mfg_assembly.html" style="text-decoration:none;color:inherit;">assembly</a>
|
||||
</span>
|
||||
</div>
|
||||
<div style="text-align: center; flex: 1; min-width: 200px;">
|
||||
<a href="https://git.asymworks.com/jkrauss/Test_5" style="text-decoration: none; color: inherit;">
|
||||
<span style="font-size:30px;">A99-9000 (Assembly Name)</span>
|
||||
</a>
|
||||
|
||||
<div style="
|
||||
font-size:14px;
|
||||
color: var(--text-color-accent);
|
||||
margin-top: 5px;">
|
||||
Asymworks, LLC
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; flex: 1; justify-content: flex-end; min-width: 0; gap: 10px; padding-right: 10px;">
|
||||
|
||||
<div style="
|
||||
text-align: left;
|
||||
font-size:14px;
|
||||
margin-right: 10px;
|
||||
color: var(--text-color-accent);">
|
||||
<div style="margin-bottom: 5px;">Rev. NO_TAG+ (Unreleased)</div>
|
||||
<div>Variant: </div>
|
||||
</div>
|
||||
<img src="images/logo.png" alt="Logo" style="max-height: 40px; max-width: 74.0px;">
|
||||
|
||||
<label class="theme-switch" style="
|
||||
position: relative;
|
||||
margin-right: 10px; /* Move toggle slightly left */
|
||||
max-width: 100%; /* Prevent overflow */
|
||||
">
|
||||
<input type="checkbox" id="themeToggle" onchange="toggleTheme()">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div class="output-virtual-box" id="csv_bom">
|
||||
<div class="output-comment">Bill of Materials in CSV format</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/assembly/Test_5-bom.csv'">
|
||||
<img src="images/file_csv_64.png" alt="Test_5-bom.csv" width="64" height="64">
|
||||
<p class="filename">Test_5-bom.csv</p>
|
||||
<p class="output-name">csv_bom</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="html_bom">
|
||||
<div class="output-comment">Bill of Materials in HTML format</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/assembly/Test_5-bom.html'">
|
||||
<img src="images/file_html_64.png" alt="Test_5-bom.html" width="64" height="64">
|
||||
<p class="filename">Test_5-bom.html</p>
|
||||
<p class="output-name">html_bom</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="html_bom_interactive">
|
||||
<div class="output-comment">Bill of Materials in HTML format</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/assembly/Test_5-ibom.html'">
|
||||
<img src="images/ibom_64.png" alt="Test_5-ibom.html" width="64" height="64">
|
||||
<p class="filename">Test_5-ibom.html</p>
|
||||
<p class="output-name">html_bom_interactive</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="csv_position">
|
||||
<div class="output-comment">Position file in CSV format</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/assembly/Test_5-CPL.csv'">
|
||||
<img src="images/file_csv_64.png" alt="Test_5-CPL.csv" width="64" height="64">
|
||||
<p class="filename">Test_5-CPL.csv</p>
|
||||
<p class="output-name">csv_position</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="pdf_assembly">
|
||||
<div class="output-comment">Assembly document in PDF format</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box wide" onclick="location.href='../mfg/assembly/Test_5-assembly.pdf'">
|
||||
<img src="images/cat_pdf_assembly_Test_5-assembly.png" alt="Test_5-assembly.pdf" width="512" height="362">
|
||||
<p class="filename">Test_5-assembly.pdf</p>
|
||||
<p class="output-name">pdf_assembly</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="csv_comp_count">
|
||||
<div class="output-comment">Component report (count) in CSV format</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/assembly/Test_5-components_count.csv'">
|
||||
<img src="images/file_csv_64.png" alt="Test_5-components_count.csv" width="64" height="64">
|
||||
<p class="filename">Test_5-components_count.csv</p>
|
||||
<p class="output-name">csv_comp_count</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="txt_assembly_notes">
|
||||
<div class="output-comment">Assembly notes in TXT format</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/assembly/Test_5-fabrication_notes.txt'">
|
||||
<img src="images/file_txt_64.png" alt="Test_5-fabrication_notes.txt" width="64" height="64">
|
||||
<p class="filename">Test_5-fabrication_notes.txt</p>
|
||||
<p class="output-name">txt_assembly_notes</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// Side Navigation functions ===================================================
|
||||
|
||||
function openNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "360px";
|
||||
navbar.style.paddingLeft = "20px";
|
||||
main.style.marginLeft = "360px";
|
||||
document.getElementById("open-navbar").style.display = "none";
|
||||
document.getElementById("close-navbar").style.display = "inline-block";
|
||||
}
|
||||
|
||||
function closeNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "0"; // Close the navbar
|
||||
navbar.style.paddingLeft = "0"; // Reset padding
|
||||
main.style.marginLeft = "0"; // Reset page content position
|
||||
document.getElementById("open-navbar").style.display = "inline-block";
|
||||
document.getElementById("close-navbar").style.display = "none";
|
||||
}
|
||||
|
||||
function toggleFolder(folderHeader) {
|
||||
const folder = folderHeader.parentElement;
|
||||
const folderContents = folderHeader.nextElementSibling;
|
||||
|
||||
if (folder.classList.contains("open")) {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
} else {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
}
|
||||
|
||||
// Save the updated state
|
||||
saveSideNavState();
|
||||
}
|
||||
|
||||
function saveSideNavState() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const isOpen = navbar.style.width !== "0px"; // Check if navbar is open
|
||||
|
||||
// Save the state of each folder
|
||||
const folderStates = Array.from(document.querySelectorAll(".folder")).map(folder => ({
|
||||
id: folder.querySelector("span").textContent.trim(), // Use folder name as identifier
|
||||
isOpen: folder.classList.contains("open") // Check if folder is open
|
||||
}));
|
||||
|
||||
// Save the navbar and folder states to localStorage
|
||||
localStorage.setItem("navbarState", JSON.stringify({ isOpen, folderStates }));
|
||||
}
|
||||
|
||||
function restorenavbarState() {
|
||||
const savedState = localStorage.getItem("navbarState");
|
||||
if (savedState) {
|
||||
const { isOpen, folderStates } = JSON.parse(savedState);
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
// Temporarily disable animations on page load so elements don't move
|
||||
navbar.style.transition = "none";
|
||||
main.style.transition = "none";
|
||||
const chevrons = document.querySelectorAll(".chevron");
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "none";
|
||||
});
|
||||
|
||||
// Restore side navigation state
|
||||
if (isOpen) {
|
||||
openNav()
|
||||
} else {
|
||||
closeNav()
|
||||
}
|
||||
|
||||
// Restore folder open/closed states
|
||||
folderStates.forEach(({ id, isOpen }) => {
|
||||
const folder = Array.from(document.querySelectorAll(".folder"))
|
||||
.find(folder => folder.querySelector("span").textContent.trim() === id);
|
||||
|
||||
if (folder) {
|
||||
const folderContents = folder.querySelector(".folder-contents");
|
||||
if (isOpen) {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
} else {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Re-enable animation
|
||||
setTimeout(() => {
|
||||
navbar.style.transition = "";
|
||||
main.style.transition = "";
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "";
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function saveSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const scrollPosition = navbar.scrollTop;
|
||||
localStorage.setItem("navbarScrollPosition", scrollPosition);
|
||||
}
|
||||
|
||||
function restoreSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const savedPosition = localStorage.getItem("navbarScrollPosition");
|
||||
if (savedPosition !== null) {
|
||||
navbar.scrollTop = parseInt(savedPosition, 10);
|
||||
}
|
||||
}
|
||||
|
||||
function adjustSidenavOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
adjustSidenavOffset();
|
||||
window.addEventListener("resize", adjustSidenavOffset);
|
||||
|
||||
/* This is the scrolling offset when we click on an output in the side navigation bar
|
||||
It should take into account the top menu height */
|
||||
function adjustOutputOffset() {
|
||||
const topMenu = document.getElementById("topmenu"); // Replace with your top menu's ID
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight; // Dynamically get the top menu height
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", adjustOutputOffset);
|
||||
window.addEventListener("resize", adjustOutputOffset);
|
||||
|
||||
// Prevent flickering on page navigation
|
||||
window.addEventListener("beforeunload", () => {
|
||||
saveSideNavState();
|
||||
saveSidenavScrollPosition();
|
||||
});
|
||||
|
||||
window.addEventListener("load", restoreSidenavScrollPosition);
|
||||
document.addEventListener("DOMContentLoaded", restorenavbarState);
|
||||
|
||||
function initializeSearchBar(searchContainerId, outputSelector) {
|
||||
const searchContainer = document.getElementById(searchContainerId);
|
||||
if (!searchContainer) return; // Exit if container is not found
|
||||
|
||||
const searchBar = searchContainer.querySelector('#search-bar');
|
||||
const autocompleteList = searchContainer.querySelector('#autocomplete-list');
|
||||
const outputLinks = document.querySelectorAll(outputSelector);
|
||||
|
||||
// Collect output names and their hrefs
|
||||
const outputs = Array.from(outputLinks).map(link => ({
|
||||
name: link.textContent.trim(),
|
||||
href: link.getAttribute("href"),
|
||||
}));
|
||||
|
||||
let highlightedIndex = -1; // Index of the currently highlighted item
|
||||
|
||||
function adjustAutocompleteWidth() {
|
||||
const searchBarWidth = searchBar.offsetWidth;
|
||||
autocompleteList.style.width = `${searchBarWidth}px`;
|
||||
}
|
||||
|
||||
function updateAutocomplete(query) {
|
||||
autocompleteList.innerHTML = ""; // Clear suggestions
|
||||
highlightedIndex = -1; // Reset highlighting
|
||||
|
||||
const matches = outputs.filter(output =>
|
||||
output.name.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
|
||||
matches.forEach(match => {
|
||||
const listItem = document.createElement("li");
|
||||
listItem.textContent = match.name;
|
||||
listItem.addEventListener("click", () => {
|
||||
window.location.href = match.href;
|
||||
});
|
||||
autocompleteList.appendChild(listItem);
|
||||
});
|
||||
|
||||
autocompleteList.style.display = matches.length ? "block" : "none";
|
||||
}
|
||||
|
||||
function highlightItem(index) {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
items.forEach((item, i) => {
|
||||
if (i === index) {
|
||||
item.classList.add("highlighted");
|
||||
item.scrollIntoView({ block: "nearest" });
|
||||
} else {
|
||||
item.classList.remove("highlighted");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listeners for search bar input and keydown
|
||||
searchBar.addEventListener("input", () => {
|
||||
const query = searchBar.value.trim();
|
||||
if (query) updateAutocomplete(query);
|
||||
else {
|
||||
autocompleteList.innerHTML = "";
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
searchBar.addEventListener("keydown", (event) => {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
if (!items.length) return;
|
||||
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex + 1) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex - 1 + items.length) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "Enter" && highlightedIndex >= 0) {
|
||||
event.preventDefault();
|
||||
items[highlightedIndex].click();
|
||||
}
|
||||
});
|
||||
|
||||
// Hide suggestions when clicking outside
|
||||
document.addEventListener("click", (event) => {
|
||||
if (!searchBar.contains(event.target) && !autocompleteList.contains(event.target)) {
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
// Adjust width on window resize
|
||||
adjustAutocompleteWidth();
|
||||
window.addEventListener("resize", adjustAutocompleteWidth);
|
||||
}
|
||||
|
||||
// Initialize search functionality
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
initializeSearchBar("search-container", ".navbar-output");
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const md = window.markdownit({
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true
|
||||
});
|
||||
|
||||
// Find all markdown containers and render them
|
||||
document.querySelectorAll('.markdown-content').forEach(container => {
|
||||
const rawMarkdown = container.innerHTML;
|
||||
container.style.display = 'block';
|
||||
container.innerHTML = md.render(rawMarkdown);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Theme toggle ================================================================
|
||||
|
||||
function toggleTheme() {
|
||||
const body = document.body;
|
||||
|
||||
// Check if the current theme is dark
|
||||
const isDark = body.classList.contains('dark-mode');
|
||||
|
||||
// Toggle between dark and light themes
|
||||
if (isDark) {
|
||||
body.classList.remove('dark-mode');
|
||||
body.classList.add('light-mode');
|
||||
} else {
|
||||
body.classList.remove('light-mode');
|
||||
body.classList.add('dark-mode');
|
||||
}
|
||||
|
||||
// Save the selected theme to localStorage
|
||||
localStorage.setItem('theme', isDark ? 'light' : 'dark');
|
||||
}
|
||||
|
||||
// Do not animate theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
const toggleSpan = themeToggle.nextElementSibling; // The <span> element
|
||||
|
||||
// Prevent animation on page load
|
||||
const savedTheme = localStorage.getItem('theme') || 'dark';
|
||||
document.body.classList.add(savedTheme === 'dark' ? 'dark-mode' : 'light-mode');
|
||||
themeToggle.checked = savedTheme === 'dark';
|
||||
|
||||
// Add the "animate" class on user interaction
|
||||
themeToggle.addEventListener('change', () => {
|
||||
toggleSpan.classList.add('animate');
|
||||
setTimeout(() => {
|
||||
toggleSpan.classList.remove('animate'); // Remove the animation class after completion
|
||||
}, 400); // Match the CSS transition duration (0.4s)
|
||||
});
|
||||
});
|
||||
|
||||
// Avoid flickering of theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const body = document.body;
|
||||
|
||||
// Temporarily disable transitions during page load
|
||||
body.classList.add('no-transition');
|
||||
|
||||
// Remove the no-transition class after the page is fully loaded
|
||||
setTimeout(() => {
|
||||
body.classList.remove('no-transition');
|
||||
}, 50); // Allow rendering to complete before enabling transitions
|
||||
});
|
||||
|
||||
function adjustMainBodyOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const mainBody = document.getElementById("main");
|
||||
|
||||
if (topMenu && mainBody) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
mainBody.style.marginTop = `${topMenuHeight}px`;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply the adjustment on page load and window resize
|
||||
window.addEventListener("DOMContentLoaded", adjustMainBodyOffset);
|
||||
window.addEventListener("resize", adjustMainBodyOffset);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
621
html/Test_5-navigate_mfg_fab.html
Normal file
621
html/Test_5-navigate_mfg_fab.html
Normal file
@@ -0,0 +1,621 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>/mfg/fab</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<script src="markdown-it.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="theSideNav" class="navbar">
|
||||
<!-- Search bar container -->
|
||||
<div id="search-container">
|
||||
<input type="text" id="search-bar" placeholder="Search outputs..." autocomplete="off">
|
||||
<ul id="autocomplete-list"></ul>
|
||||
</div>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> reports</span>
|
||||
<ul id='folder-test_5-navigate-reports' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_reports.html#erc' class='navbar-output'>erc</a></li>
|
||||
<li><a href='Test_5-navigate_reports.html#drc' class='navbar-output'>drc</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> schematic</span>
|
||||
<ul id='folder-test_5-navigate-schematic' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_schematic.html#pdf_schematic' class='navbar-output'>pdf_schematic</a></li>
|
||||
<li><a href='Test_5-navigate_schematic.html#txt_schematic_notes' class='navbar-output'>txt_schematic_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> mfg</span>
|
||||
<ul id='folder-test_5-navigate-mfg' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> assembly</span>
|
||||
<ul id='folder-test_5-navigate_mfg-assembly' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_bom' class='navbar-output'>csv_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom' class='navbar-output'>html_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom_interactive' class='navbar-output'>html_bom_interactive</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_position' class='navbar-output'>csv_position</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#pdf_assembly' class='navbar-output'>pdf_assembly</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_comp_count' class='navbar-output'>csv_comp_count</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#txt_assembly_notes' class='navbar-output'>txt_assembly_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> fab</span>
|
||||
<ul id='folder-test_5-navigate_mfg-fab' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#gbr_gerbers' class='navbar-output'>gbr_gerbers</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#drl_excellon' class='navbar-output'>drl_excellon</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#pdf_drill_map' class='navbar-output'>pdf_drill_map</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_odb' class='navbar-output'>zip_odb</a></li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> drill-tables</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-drill-tables' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_drill-tables.html#csv_drill_table' class='navbar-output'>csv_drill_table</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#pdf_fabrication' class='navbar-output'>pdf_fabrication</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_compress_fab' class='navbar-output'>zip_compress_fab</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#csv_impedance_table' class='navbar-output'>csv_impedance_table</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#txt_fabrication_notes' class='navbar-output'>txt_fabrication_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> jlcpcb</span>
|
||||
<ul id='folder-test_5-navigate_mfg-jlcpcb' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_jlcpcb-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb_gerbers.html#jlcpcb_gerbers' class='navbar-output'>jlcpcb_gerbers</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_fabpack' class='navbar-output'>jlcpcb_fabpack</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_bom' class='navbar-output'>jlcpcb_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_cpl' class='navbar-output'>jlcpcb_cpl</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> kiri</span>
|
||||
<ul id='folder-test_5-navigate-kiri' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_kiri.html#html_kiri' class='navbar-output'>html_kiri</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> renders</span>
|
||||
<ul id='folder-test_5-navigate-renders' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_top' class='navbar-output'>pcbdraw_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_bottom' class='navbar-output'>pcbdraw_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_top' class='navbar-output'>png_3d_viewer_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_bottom' class='navbar-output'>png_3d_viewer_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_top' class='navbar-output'>png_3d_viewer_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_bottom' class='navbar-output'>png_3d_viewer_angled_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_top' class='navbar-output'>blender_3d_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_bottom' class='navbar-output'>blender_3d_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_top' class='navbar-output'>blender_3d_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_bottom' class='navbar-output'>blender_3d_angled_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> models</span>
|
||||
<ul id='folder-test_5-navigate-models' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_models.html#step' class='navbar-output'>step</a></li>
|
||||
<li><a href='Test_5-navigate_models.html#glb' class='navbar-output'>glb</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> test</span>
|
||||
<ul id='folder-test_5-navigate-test' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> testpoints</span>
|
||||
<ul id='folder-test_5-navigate_test-testpoints' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints' class='navbar-output'>csv_testpoints</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_top' class='navbar-output'>csv_testpoints_top</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_bottom' class='navbar-output'>csv_testpoints_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panels</span>
|
||||
<ul id='folder-test_5-navigate-panels' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panel-800</span>
|
||||
<ul id='folder-test_5-navigate_panels-panel-800' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_panels_panel-800.html#panel_801' class='navbar-output'>panel_801</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="topmenu" class="topmenu">
|
||||
<div style="display: flex; align-items: center; flex: 1; min-width: 0; gap: 10px;">
|
||||
<span id="open-navbar" style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
|
||||
<span id="close-navbar" style="font-size:30px;cursor:pointer;display:none;" onclick="closeNav()">⨉</span>
|
||||
<button id="back-button" onclick="history.back()" style="font-size:30px;">↩</button>
|
||||
<button id="forward-button" onclick="history.forward()" style="font-size:30px;">↪</button>
|
||||
<button id="up-button" onclick="location.href='Test_5-navigate_mfg.html'" style="font-size:44px; position: relative; top: -3px;">⌅</button>
|
||||
<button id="home-button" onclick="location.href='Test_5-navigate.html'" style="font-size:25px; position: relative; top: -2px;">🏠︎</button>
|
||||
|
||||
<span style="
|
||||
font-size:18px;
|
||||
color: var(--text-color-accent);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
">
|
||||
<a href="Test_5-navigate_mfg.html" style="text-decoration:none;color:inherit;">mfg</a>/<wbr><a href="Test_5-navigate_mfg_fab.html" style="text-decoration:none;color:inherit;">fab</a>
|
||||
</span>
|
||||
</div>
|
||||
<div style="text-align: center; flex: 1; min-width: 200px;">
|
||||
<a href="https://git.asymworks.com/jkrauss/Test_5" style="text-decoration: none; color: inherit;">
|
||||
<span style="font-size:30px;">A99-9000 (Assembly Name)</span>
|
||||
</a>
|
||||
|
||||
<div style="
|
||||
font-size:14px;
|
||||
color: var(--text-color-accent);
|
||||
margin-top: 5px;">
|
||||
Asymworks, LLC
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; flex: 1; justify-content: flex-end; min-width: 0; gap: 10px; padding-right: 10px;">
|
||||
|
||||
<div style="
|
||||
text-align: left;
|
||||
font-size:14px;
|
||||
margin-right: 10px;
|
||||
color: var(--text-color-accent);">
|
||||
<div style="margin-bottom: 5px;">Rev. NO_TAG+ (Unreleased)</div>
|
||||
<div>Variant: </div>
|
||||
</div>
|
||||
<img src="images/logo.png" alt="Logo" style="max-height: 40px; max-width: 74.0px;">
|
||||
|
||||
<label class="theme-switch" style="
|
||||
position: relative;
|
||||
margin-right: 10px; /* Move toggle slightly left */
|
||||
max-width: 100%; /* Prevent overflow */
|
||||
">
|
||||
<input type="checkbox" id="themeToggle" onchange="toggleTheme()">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div class="items-container">
|
||||
<div>
|
||||
<div class="category-box" onclick="location.href='Test_5-navigate_mfg_fab_gerbers.html'">
|
||||
<p class="category-title">gerbers</p>
|
||||
</div>
|
||||
</div><div>
|
||||
<div class="category-box" onclick="location.href='Test_5-navigate_mfg_fab_drill-tables.html'">
|
||||
<p class="category-title">drill-tables</p>
|
||||
</div>
|
||||
</div></div>
|
||||
<div class="output-virtual-box" id="zip_odb">
|
||||
<div class="output-comment">ODB++ in ZIP format</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/fab/Test_5-odb.zip'">
|
||||
<img src="images/file_zip_64.png" alt="Test_5-odb.zip" width="64" height="64">
|
||||
<p class="filename">Test_5-odb.zip</p>
|
||||
<p class="output-name">zip_odb</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="pdf_fabrication">
|
||||
<div class="output-comment">Fabrication document in PDF format</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box wide" onclick="location.href='../mfg/fab/Test_5-fabrication.pdf'">
|
||||
<img src="images/cat_pdf_fabrication_Test_5-fabrication.png" alt="Test_5-fabrication.pdf" width="512" height="362">
|
||||
<p class="filename">Test_5-fabrication.pdf</p>
|
||||
<p class="output-name">pdf_fabrication</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="zip_compress_fab">
|
||||
<div class="output-comment">Generates a ZIP file with gerbers, drill and fabrication document</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/fab/Test_5-GERBERS.zip'">
|
||||
<img src="images/file_zip_64.png" alt="Test_5-GERBERS.zip" width="64" height="64">
|
||||
<p class="filename">Test_5-GERBERS.zip</p>
|
||||
<p class="output-name">zip_compress_fab</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="csv_impedance_table">
|
||||
<div class="output-comment">Impedance table in CSV format</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/fab/Test_5-impedance_table.csv'">
|
||||
<img src="images/file_csv_64.png" alt="Test_5-impedance_table.csv" width="64" height="64">
|
||||
<p class="filename">Test_5-impedance_table.csv</p>
|
||||
<p class="output-name">csv_impedance_table</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="txt_fabrication_notes">
|
||||
<div class="output-comment">Fabrication notes in TXT format</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/fab/Test_5-fabrication_notes.txt'">
|
||||
<img src="images/file_txt_64.png" alt="Test_5-fabrication_notes.txt" width="64" height="64">
|
||||
<p class="filename">Test_5-fabrication_notes.txt</p>
|
||||
<p class="output-name">txt_fabrication_notes</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// Side Navigation functions ===================================================
|
||||
|
||||
function openNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "360px";
|
||||
navbar.style.paddingLeft = "20px";
|
||||
main.style.marginLeft = "360px";
|
||||
document.getElementById("open-navbar").style.display = "none";
|
||||
document.getElementById("close-navbar").style.display = "inline-block";
|
||||
}
|
||||
|
||||
function closeNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "0"; // Close the navbar
|
||||
navbar.style.paddingLeft = "0"; // Reset padding
|
||||
main.style.marginLeft = "0"; // Reset page content position
|
||||
document.getElementById("open-navbar").style.display = "inline-block";
|
||||
document.getElementById("close-navbar").style.display = "none";
|
||||
}
|
||||
|
||||
function toggleFolder(folderHeader) {
|
||||
const folder = folderHeader.parentElement;
|
||||
const folderContents = folderHeader.nextElementSibling;
|
||||
|
||||
if (folder.classList.contains("open")) {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
} else {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
}
|
||||
|
||||
// Save the updated state
|
||||
saveSideNavState();
|
||||
}
|
||||
|
||||
function saveSideNavState() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const isOpen = navbar.style.width !== "0px"; // Check if navbar is open
|
||||
|
||||
// Save the state of each folder
|
||||
const folderStates = Array.from(document.querySelectorAll(".folder")).map(folder => ({
|
||||
id: folder.querySelector("span").textContent.trim(), // Use folder name as identifier
|
||||
isOpen: folder.classList.contains("open") // Check if folder is open
|
||||
}));
|
||||
|
||||
// Save the navbar and folder states to localStorage
|
||||
localStorage.setItem("navbarState", JSON.stringify({ isOpen, folderStates }));
|
||||
}
|
||||
|
||||
function restorenavbarState() {
|
||||
const savedState = localStorage.getItem("navbarState");
|
||||
if (savedState) {
|
||||
const { isOpen, folderStates } = JSON.parse(savedState);
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
// Temporarily disable animations on page load so elements don't move
|
||||
navbar.style.transition = "none";
|
||||
main.style.transition = "none";
|
||||
const chevrons = document.querySelectorAll(".chevron");
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "none";
|
||||
});
|
||||
|
||||
// Restore side navigation state
|
||||
if (isOpen) {
|
||||
openNav()
|
||||
} else {
|
||||
closeNav()
|
||||
}
|
||||
|
||||
// Restore folder open/closed states
|
||||
folderStates.forEach(({ id, isOpen }) => {
|
||||
const folder = Array.from(document.querySelectorAll(".folder"))
|
||||
.find(folder => folder.querySelector("span").textContent.trim() === id);
|
||||
|
||||
if (folder) {
|
||||
const folderContents = folder.querySelector(".folder-contents");
|
||||
if (isOpen) {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
} else {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Re-enable animation
|
||||
setTimeout(() => {
|
||||
navbar.style.transition = "";
|
||||
main.style.transition = "";
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "";
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function saveSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const scrollPosition = navbar.scrollTop;
|
||||
localStorage.setItem("navbarScrollPosition", scrollPosition);
|
||||
}
|
||||
|
||||
function restoreSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const savedPosition = localStorage.getItem("navbarScrollPosition");
|
||||
if (savedPosition !== null) {
|
||||
navbar.scrollTop = parseInt(savedPosition, 10);
|
||||
}
|
||||
}
|
||||
|
||||
function adjustSidenavOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
adjustSidenavOffset();
|
||||
window.addEventListener("resize", adjustSidenavOffset);
|
||||
|
||||
/* This is the scrolling offset when we click on an output in the side navigation bar
|
||||
It should take into account the top menu height */
|
||||
function adjustOutputOffset() {
|
||||
const topMenu = document.getElementById("topmenu"); // Replace with your top menu's ID
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight; // Dynamically get the top menu height
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", adjustOutputOffset);
|
||||
window.addEventListener("resize", adjustOutputOffset);
|
||||
|
||||
// Prevent flickering on page navigation
|
||||
window.addEventListener("beforeunload", () => {
|
||||
saveSideNavState();
|
||||
saveSidenavScrollPosition();
|
||||
});
|
||||
|
||||
window.addEventListener("load", restoreSidenavScrollPosition);
|
||||
document.addEventListener("DOMContentLoaded", restorenavbarState);
|
||||
|
||||
function initializeSearchBar(searchContainerId, outputSelector) {
|
||||
const searchContainer = document.getElementById(searchContainerId);
|
||||
if (!searchContainer) return; // Exit if container is not found
|
||||
|
||||
const searchBar = searchContainer.querySelector('#search-bar');
|
||||
const autocompleteList = searchContainer.querySelector('#autocomplete-list');
|
||||
const outputLinks = document.querySelectorAll(outputSelector);
|
||||
|
||||
// Collect output names and their hrefs
|
||||
const outputs = Array.from(outputLinks).map(link => ({
|
||||
name: link.textContent.trim(),
|
||||
href: link.getAttribute("href"),
|
||||
}));
|
||||
|
||||
let highlightedIndex = -1; // Index of the currently highlighted item
|
||||
|
||||
function adjustAutocompleteWidth() {
|
||||
const searchBarWidth = searchBar.offsetWidth;
|
||||
autocompleteList.style.width = `${searchBarWidth}px`;
|
||||
}
|
||||
|
||||
function updateAutocomplete(query) {
|
||||
autocompleteList.innerHTML = ""; // Clear suggestions
|
||||
highlightedIndex = -1; // Reset highlighting
|
||||
|
||||
const matches = outputs.filter(output =>
|
||||
output.name.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
|
||||
matches.forEach(match => {
|
||||
const listItem = document.createElement("li");
|
||||
listItem.textContent = match.name;
|
||||
listItem.addEventListener("click", () => {
|
||||
window.location.href = match.href;
|
||||
});
|
||||
autocompleteList.appendChild(listItem);
|
||||
});
|
||||
|
||||
autocompleteList.style.display = matches.length ? "block" : "none";
|
||||
}
|
||||
|
||||
function highlightItem(index) {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
items.forEach((item, i) => {
|
||||
if (i === index) {
|
||||
item.classList.add("highlighted");
|
||||
item.scrollIntoView({ block: "nearest" });
|
||||
} else {
|
||||
item.classList.remove("highlighted");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listeners for search bar input and keydown
|
||||
searchBar.addEventListener("input", () => {
|
||||
const query = searchBar.value.trim();
|
||||
if (query) updateAutocomplete(query);
|
||||
else {
|
||||
autocompleteList.innerHTML = "";
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
searchBar.addEventListener("keydown", (event) => {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
if (!items.length) return;
|
||||
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex + 1) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex - 1 + items.length) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "Enter" && highlightedIndex >= 0) {
|
||||
event.preventDefault();
|
||||
items[highlightedIndex].click();
|
||||
}
|
||||
});
|
||||
|
||||
// Hide suggestions when clicking outside
|
||||
document.addEventListener("click", (event) => {
|
||||
if (!searchBar.contains(event.target) && !autocompleteList.contains(event.target)) {
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
// Adjust width on window resize
|
||||
adjustAutocompleteWidth();
|
||||
window.addEventListener("resize", adjustAutocompleteWidth);
|
||||
}
|
||||
|
||||
// Initialize search functionality
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
initializeSearchBar("search-container", ".navbar-output");
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const md = window.markdownit({
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true
|
||||
});
|
||||
|
||||
// Find all markdown containers and render them
|
||||
document.querySelectorAll('.markdown-content').forEach(container => {
|
||||
const rawMarkdown = container.innerHTML;
|
||||
container.style.display = 'block';
|
||||
container.innerHTML = md.render(rawMarkdown);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Theme toggle ================================================================
|
||||
|
||||
function toggleTheme() {
|
||||
const body = document.body;
|
||||
|
||||
// Check if the current theme is dark
|
||||
const isDark = body.classList.contains('dark-mode');
|
||||
|
||||
// Toggle between dark and light themes
|
||||
if (isDark) {
|
||||
body.classList.remove('dark-mode');
|
||||
body.classList.add('light-mode');
|
||||
} else {
|
||||
body.classList.remove('light-mode');
|
||||
body.classList.add('dark-mode');
|
||||
}
|
||||
|
||||
// Save the selected theme to localStorage
|
||||
localStorage.setItem('theme', isDark ? 'light' : 'dark');
|
||||
}
|
||||
|
||||
// Do not animate theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
const toggleSpan = themeToggle.nextElementSibling; // The <span> element
|
||||
|
||||
// Prevent animation on page load
|
||||
const savedTheme = localStorage.getItem('theme') || 'dark';
|
||||
document.body.classList.add(savedTheme === 'dark' ? 'dark-mode' : 'light-mode');
|
||||
themeToggle.checked = savedTheme === 'dark';
|
||||
|
||||
// Add the "animate" class on user interaction
|
||||
themeToggle.addEventListener('change', () => {
|
||||
toggleSpan.classList.add('animate');
|
||||
setTimeout(() => {
|
||||
toggleSpan.classList.remove('animate'); // Remove the animation class after completion
|
||||
}, 400); // Match the CSS transition duration (0.4s)
|
||||
});
|
||||
});
|
||||
|
||||
// Avoid flickering of theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const body = document.body;
|
||||
|
||||
// Temporarily disable transitions during page load
|
||||
body.classList.add('no-transition');
|
||||
|
||||
// Remove the no-transition class after the page is fully loaded
|
||||
setTimeout(() => {
|
||||
body.classList.remove('no-transition');
|
||||
}, 50); // Allow rendering to complete before enabling transitions
|
||||
});
|
||||
|
||||
function adjustMainBodyOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const mainBody = document.getElementById("main");
|
||||
|
||||
if (topMenu && mainBody) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
mainBody.style.marginTop = `${topMenuHeight}px`;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply the adjustment on page load and window resize
|
||||
window.addEventListener("DOMContentLoaded", adjustMainBodyOffset);
|
||||
window.addEventListener("resize", adjustMainBodyOffset);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
573
html/Test_5-navigate_mfg_fab_drill-tables.html
Normal file
573
html/Test_5-navigate_mfg_fab_drill-tables.html
Normal file
@@ -0,0 +1,573 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>/mfg/fab/drill-tables</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<script src="markdown-it.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="theSideNav" class="navbar">
|
||||
<!-- Search bar container -->
|
||||
<div id="search-container">
|
||||
<input type="text" id="search-bar" placeholder="Search outputs..." autocomplete="off">
|
||||
<ul id="autocomplete-list"></ul>
|
||||
</div>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> reports</span>
|
||||
<ul id='folder-test_5-navigate-reports' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_reports.html#erc' class='navbar-output'>erc</a></li>
|
||||
<li><a href='Test_5-navigate_reports.html#drc' class='navbar-output'>drc</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> schematic</span>
|
||||
<ul id='folder-test_5-navigate-schematic' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_schematic.html#pdf_schematic' class='navbar-output'>pdf_schematic</a></li>
|
||||
<li><a href='Test_5-navigate_schematic.html#txt_schematic_notes' class='navbar-output'>txt_schematic_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> mfg</span>
|
||||
<ul id='folder-test_5-navigate-mfg' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> assembly</span>
|
||||
<ul id='folder-test_5-navigate_mfg-assembly' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_bom' class='navbar-output'>csv_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom' class='navbar-output'>html_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom_interactive' class='navbar-output'>html_bom_interactive</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_position' class='navbar-output'>csv_position</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#pdf_assembly' class='navbar-output'>pdf_assembly</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_comp_count' class='navbar-output'>csv_comp_count</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#txt_assembly_notes' class='navbar-output'>txt_assembly_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> fab</span>
|
||||
<ul id='folder-test_5-navigate_mfg-fab' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#gbr_gerbers' class='navbar-output'>gbr_gerbers</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#drl_excellon' class='navbar-output'>drl_excellon</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#pdf_drill_map' class='navbar-output'>pdf_drill_map</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_odb' class='navbar-output'>zip_odb</a></li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> drill-tables</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-drill-tables' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_drill-tables.html#csv_drill_table' class='navbar-output'>csv_drill_table</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#pdf_fabrication' class='navbar-output'>pdf_fabrication</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_compress_fab' class='navbar-output'>zip_compress_fab</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#csv_impedance_table' class='navbar-output'>csv_impedance_table</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#txt_fabrication_notes' class='navbar-output'>txt_fabrication_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> jlcpcb</span>
|
||||
<ul id='folder-test_5-navigate_mfg-jlcpcb' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_jlcpcb-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb_gerbers.html#jlcpcb_gerbers' class='navbar-output'>jlcpcb_gerbers</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_fabpack' class='navbar-output'>jlcpcb_fabpack</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_bom' class='navbar-output'>jlcpcb_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_cpl' class='navbar-output'>jlcpcb_cpl</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> kiri</span>
|
||||
<ul id='folder-test_5-navigate-kiri' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_kiri.html#html_kiri' class='navbar-output'>html_kiri</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> renders</span>
|
||||
<ul id='folder-test_5-navigate-renders' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_top' class='navbar-output'>pcbdraw_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_bottom' class='navbar-output'>pcbdraw_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_top' class='navbar-output'>png_3d_viewer_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_bottom' class='navbar-output'>png_3d_viewer_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_top' class='navbar-output'>png_3d_viewer_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_bottom' class='navbar-output'>png_3d_viewer_angled_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_top' class='navbar-output'>blender_3d_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_bottom' class='navbar-output'>blender_3d_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_top' class='navbar-output'>blender_3d_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_bottom' class='navbar-output'>blender_3d_angled_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> models</span>
|
||||
<ul id='folder-test_5-navigate-models' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_models.html#step' class='navbar-output'>step</a></li>
|
||||
<li><a href='Test_5-navigate_models.html#glb' class='navbar-output'>glb</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> test</span>
|
||||
<ul id='folder-test_5-navigate-test' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> testpoints</span>
|
||||
<ul id='folder-test_5-navigate_test-testpoints' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints' class='navbar-output'>csv_testpoints</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_top' class='navbar-output'>csv_testpoints_top</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_bottom' class='navbar-output'>csv_testpoints_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panels</span>
|
||||
<ul id='folder-test_5-navigate-panels' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panel-800</span>
|
||||
<ul id='folder-test_5-navigate_panels-panel-800' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_panels_panel-800.html#panel_801' class='navbar-output'>panel_801</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="topmenu" class="topmenu">
|
||||
<div style="display: flex; align-items: center; flex: 1; min-width: 0; gap: 10px;">
|
||||
<span id="open-navbar" style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
|
||||
<span id="close-navbar" style="font-size:30px;cursor:pointer;display:none;" onclick="closeNav()">⨉</span>
|
||||
<button id="back-button" onclick="history.back()" style="font-size:30px;">↩</button>
|
||||
<button id="forward-button" onclick="history.forward()" style="font-size:30px;">↪</button>
|
||||
<button id="up-button" onclick="location.href='Test_5-navigate_mfg_fab.html'" style="font-size:44px; position: relative; top: -3px;">⌅</button>
|
||||
<button id="home-button" onclick="location.href='Test_5-navigate.html'" style="font-size:25px; position: relative; top: -2px;">🏠︎</button>
|
||||
|
||||
<span style="
|
||||
font-size:18px;
|
||||
color: var(--text-color-accent);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
">
|
||||
<a href="Test_5-navigate_mfg.html" style="text-decoration:none;color:inherit;">mfg</a>/<wbr><a href="Test_5-navigate_mfg_fab.html" style="text-decoration:none;color:inherit;">fab</a>/<wbr><a href="Test_5-navigate_mfg_fab_drill-tables.html" style="text-decoration:none;color:inherit;">drill-tables</a>
|
||||
</span>
|
||||
</div>
|
||||
<div style="text-align: center; flex: 1; min-width: 200px;">
|
||||
<a href="https://git.asymworks.com/jkrauss/Test_5" style="text-decoration: none; color: inherit;">
|
||||
<span style="font-size:30px;">A99-9000 (Assembly Name)</span>
|
||||
</a>
|
||||
|
||||
<div style="
|
||||
font-size:14px;
|
||||
color: var(--text-color-accent);
|
||||
margin-top: 5px;">
|
||||
Asymworks, LLC
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; flex: 1; justify-content: flex-end; min-width: 0; gap: 10px; padding-right: 10px;">
|
||||
|
||||
<div style="
|
||||
text-align: left;
|
||||
font-size:14px;
|
||||
margin-right: 10px;
|
||||
color: var(--text-color-accent);">
|
||||
<div style="margin-bottom: 5px;">Rev. NO_TAG+ (Unreleased)</div>
|
||||
<div>Variant: </div>
|
||||
</div>
|
||||
<img src="images/logo.png" alt="Logo" style="max-height: 40px; max-width: 74.0px;">
|
||||
|
||||
<label class="theme-switch" style="
|
||||
position: relative;
|
||||
margin-right: 10px; /* Move toggle slightly left */
|
||||
max-width: 100%; /* Prevent overflow */
|
||||
">
|
||||
<input type="checkbox" id="themeToggle" onchange="toggleTheme()">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div class="output-virtual-box" id="csv_drill_table">
|
||||
<div class="output-comment">Drill Table in CSV format</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/fab/drill-tables/Test_5-(L1-L4)_drill_table.csv'">
|
||||
<img src="images/file_csv_64.png" alt="Test_5-(L1-L4)_drill_table.csv" width="64" height="64">
|
||||
<p class="filename">Test_5-(L1-L4)_drill_table.csv</p>
|
||||
<p class="output-name">csv_drill_table</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/fab/drill-tables/Test_5-(L1-L4)_NPTH_drill_table.csv'">
|
||||
<img src="images/file_csv_64.png" alt="Test_5-(L1-L4)_NPTH_drill_table.csv" width="64" height="64">
|
||||
<p class="filename">Test_5-(L1-L4)_NPTH_drill_table.csv</p>
|
||||
<p class="output-name">csv_drill_table</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// Side Navigation functions ===================================================
|
||||
|
||||
function openNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "360px";
|
||||
navbar.style.paddingLeft = "20px";
|
||||
main.style.marginLeft = "360px";
|
||||
document.getElementById("open-navbar").style.display = "none";
|
||||
document.getElementById("close-navbar").style.display = "inline-block";
|
||||
}
|
||||
|
||||
function closeNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "0"; // Close the navbar
|
||||
navbar.style.paddingLeft = "0"; // Reset padding
|
||||
main.style.marginLeft = "0"; // Reset page content position
|
||||
document.getElementById("open-navbar").style.display = "inline-block";
|
||||
document.getElementById("close-navbar").style.display = "none";
|
||||
}
|
||||
|
||||
function toggleFolder(folderHeader) {
|
||||
const folder = folderHeader.parentElement;
|
||||
const folderContents = folderHeader.nextElementSibling;
|
||||
|
||||
if (folder.classList.contains("open")) {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
} else {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
}
|
||||
|
||||
// Save the updated state
|
||||
saveSideNavState();
|
||||
}
|
||||
|
||||
function saveSideNavState() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const isOpen = navbar.style.width !== "0px"; // Check if navbar is open
|
||||
|
||||
// Save the state of each folder
|
||||
const folderStates = Array.from(document.querySelectorAll(".folder")).map(folder => ({
|
||||
id: folder.querySelector("span").textContent.trim(), // Use folder name as identifier
|
||||
isOpen: folder.classList.contains("open") // Check if folder is open
|
||||
}));
|
||||
|
||||
// Save the navbar and folder states to localStorage
|
||||
localStorage.setItem("navbarState", JSON.stringify({ isOpen, folderStates }));
|
||||
}
|
||||
|
||||
function restorenavbarState() {
|
||||
const savedState = localStorage.getItem("navbarState");
|
||||
if (savedState) {
|
||||
const { isOpen, folderStates } = JSON.parse(savedState);
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
// Temporarily disable animations on page load so elements don't move
|
||||
navbar.style.transition = "none";
|
||||
main.style.transition = "none";
|
||||
const chevrons = document.querySelectorAll(".chevron");
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "none";
|
||||
});
|
||||
|
||||
// Restore side navigation state
|
||||
if (isOpen) {
|
||||
openNav()
|
||||
} else {
|
||||
closeNav()
|
||||
}
|
||||
|
||||
// Restore folder open/closed states
|
||||
folderStates.forEach(({ id, isOpen }) => {
|
||||
const folder = Array.from(document.querySelectorAll(".folder"))
|
||||
.find(folder => folder.querySelector("span").textContent.trim() === id);
|
||||
|
||||
if (folder) {
|
||||
const folderContents = folder.querySelector(".folder-contents");
|
||||
if (isOpen) {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
} else {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Re-enable animation
|
||||
setTimeout(() => {
|
||||
navbar.style.transition = "";
|
||||
main.style.transition = "";
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "";
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function saveSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const scrollPosition = navbar.scrollTop;
|
||||
localStorage.setItem("navbarScrollPosition", scrollPosition);
|
||||
}
|
||||
|
||||
function restoreSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const savedPosition = localStorage.getItem("navbarScrollPosition");
|
||||
if (savedPosition !== null) {
|
||||
navbar.scrollTop = parseInt(savedPosition, 10);
|
||||
}
|
||||
}
|
||||
|
||||
function adjustSidenavOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
adjustSidenavOffset();
|
||||
window.addEventListener("resize", adjustSidenavOffset);
|
||||
|
||||
/* This is the scrolling offset when we click on an output in the side navigation bar
|
||||
It should take into account the top menu height */
|
||||
function adjustOutputOffset() {
|
||||
const topMenu = document.getElementById("topmenu"); // Replace with your top menu's ID
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight; // Dynamically get the top menu height
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", adjustOutputOffset);
|
||||
window.addEventListener("resize", adjustOutputOffset);
|
||||
|
||||
// Prevent flickering on page navigation
|
||||
window.addEventListener("beforeunload", () => {
|
||||
saveSideNavState();
|
||||
saveSidenavScrollPosition();
|
||||
});
|
||||
|
||||
window.addEventListener("load", restoreSidenavScrollPosition);
|
||||
document.addEventListener("DOMContentLoaded", restorenavbarState);
|
||||
|
||||
function initializeSearchBar(searchContainerId, outputSelector) {
|
||||
const searchContainer = document.getElementById(searchContainerId);
|
||||
if (!searchContainer) return; // Exit if container is not found
|
||||
|
||||
const searchBar = searchContainer.querySelector('#search-bar');
|
||||
const autocompleteList = searchContainer.querySelector('#autocomplete-list');
|
||||
const outputLinks = document.querySelectorAll(outputSelector);
|
||||
|
||||
// Collect output names and their hrefs
|
||||
const outputs = Array.from(outputLinks).map(link => ({
|
||||
name: link.textContent.trim(),
|
||||
href: link.getAttribute("href"),
|
||||
}));
|
||||
|
||||
let highlightedIndex = -1; // Index of the currently highlighted item
|
||||
|
||||
function adjustAutocompleteWidth() {
|
||||
const searchBarWidth = searchBar.offsetWidth;
|
||||
autocompleteList.style.width = `${searchBarWidth}px`;
|
||||
}
|
||||
|
||||
function updateAutocomplete(query) {
|
||||
autocompleteList.innerHTML = ""; // Clear suggestions
|
||||
highlightedIndex = -1; // Reset highlighting
|
||||
|
||||
const matches = outputs.filter(output =>
|
||||
output.name.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
|
||||
matches.forEach(match => {
|
||||
const listItem = document.createElement("li");
|
||||
listItem.textContent = match.name;
|
||||
listItem.addEventListener("click", () => {
|
||||
window.location.href = match.href;
|
||||
});
|
||||
autocompleteList.appendChild(listItem);
|
||||
});
|
||||
|
||||
autocompleteList.style.display = matches.length ? "block" : "none";
|
||||
}
|
||||
|
||||
function highlightItem(index) {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
items.forEach((item, i) => {
|
||||
if (i === index) {
|
||||
item.classList.add("highlighted");
|
||||
item.scrollIntoView({ block: "nearest" });
|
||||
} else {
|
||||
item.classList.remove("highlighted");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listeners for search bar input and keydown
|
||||
searchBar.addEventListener("input", () => {
|
||||
const query = searchBar.value.trim();
|
||||
if (query) updateAutocomplete(query);
|
||||
else {
|
||||
autocompleteList.innerHTML = "";
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
searchBar.addEventListener("keydown", (event) => {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
if (!items.length) return;
|
||||
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex + 1) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex - 1 + items.length) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "Enter" && highlightedIndex >= 0) {
|
||||
event.preventDefault();
|
||||
items[highlightedIndex].click();
|
||||
}
|
||||
});
|
||||
|
||||
// Hide suggestions when clicking outside
|
||||
document.addEventListener("click", (event) => {
|
||||
if (!searchBar.contains(event.target) && !autocompleteList.contains(event.target)) {
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
// Adjust width on window resize
|
||||
adjustAutocompleteWidth();
|
||||
window.addEventListener("resize", adjustAutocompleteWidth);
|
||||
}
|
||||
|
||||
// Initialize search functionality
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
initializeSearchBar("search-container", ".navbar-output");
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const md = window.markdownit({
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true
|
||||
});
|
||||
|
||||
// Find all markdown containers and render them
|
||||
document.querySelectorAll('.markdown-content').forEach(container => {
|
||||
const rawMarkdown = container.innerHTML;
|
||||
container.style.display = 'block';
|
||||
container.innerHTML = md.render(rawMarkdown);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Theme toggle ================================================================
|
||||
|
||||
function toggleTheme() {
|
||||
const body = document.body;
|
||||
|
||||
// Check if the current theme is dark
|
||||
const isDark = body.classList.contains('dark-mode');
|
||||
|
||||
// Toggle between dark and light themes
|
||||
if (isDark) {
|
||||
body.classList.remove('dark-mode');
|
||||
body.classList.add('light-mode');
|
||||
} else {
|
||||
body.classList.remove('light-mode');
|
||||
body.classList.add('dark-mode');
|
||||
}
|
||||
|
||||
// Save the selected theme to localStorage
|
||||
localStorage.setItem('theme', isDark ? 'light' : 'dark');
|
||||
}
|
||||
|
||||
// Do not animate theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
const toggleSpan = themeToggle.nextElementSibling; // The <span> element
|
||||
|
||||
// Prevent animation on page load
|
||||
const savedTheme = localStorage.getItem('theme') || 'dark';
|
||||
document.body.classList.add(savedTheme === 'dark' ? 'dark-mode' : 'light-mode');
|
||||
themeToggle.checked = savedTheme === 'dark';
|
||||
|
||||
// Add the "animate" class on user interaction
|
||||
themeToggle.addEventListener('change', () => {
|
||||
toggleSpan.classList.add('animate');
|
||||
setTimeout(() => {
|
||||
toggleSpan.classList.remove('animate'); // Remove the animation class after completion
|
||||
}, 400); // Match the CSS transition duration (0.4s)
|
||||
});
|
||||
});
|
||||
|
||||
// Avoid flickering of theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const body = document.body;
|
||||
|
||||
// Temporarily disable transitions during page load
|
||||
body.classList.add('no-transition');
|
||||
|
||||
// Remove the no-transition class after the page is fully loaded
|
||||
setTimeout(() => {
|
||||
body.classList.remove('no-transition');
|
||||
}, 50); // Allow rendering to complete before enabling transitions
|
||||
});
|
||||
|
||||
function adjustMainBodyOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const mainBody = document.getElementById("main");
|
||||
|
||||
if (topMenu && mainBody) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
mainBody.style.marginTop = `${topMenuHeight}px`;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply the adjustment on page load and window resize
|
||||
window.addEventListener("DOMContentLoaded", adjustMainBodyOffset);
|
||||
window.addEventListener("resize", adjustMainBodyOffset);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
661
html/Test_5-navigate_mfg_fab_gerbers.html
Normal file
661
html/Test_5-navigate_mfg_fab_gerbers.html
Normal file
@@ -0,0 +1,661 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>/mfg/fab/gerbers</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<script src="markdown-it.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="theSideNav" class="navbar">
|
||||
<!-- Search bar container -->
|
||||
<div id="search-container">
|
||||
<input type="text" id="search-bar" placeholder="Search outputs..." autocomplete="off">
|
||||
<ul id="autocomplete-list"></ul>
|
||||
</div>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> reports</span>
|
||||
<ul id='folder-test_5-navigate-reports' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_reports.html#erc' class='navbar-output'>erc</a></li>
|
||||
<li><a href='Test_5-navigate_reports.html#drc' class='navbar-output'>drc</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> schematic</span>
|
||||
<ul id='folder-test_5-navigate-schematic' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_schematic.html#pdf_schematic' class='navbar-output'>pdf_schematic</a></li>
|
||||
<li><a href='Test_5-navigate_schematic.html#txt_schematic_notes' class='navbar-output'>txt_schematic_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> mfg</span>
|
||||
<ul id='folder-test_5-navigate-mfg' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> assembly</span>
|
||||
<ul id='folder-test_5-navigate_mfg-assembly' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_bom' class='navbar-output'>csv_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom' class='navbar-output'>html_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom_interactive' class='navbar-output'>html_bom_interactive</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_position' class='navbar-output'>csv_position</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#pdf_assembly' class='navbar-output'>pdf_assembly</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_comp_count' class='navbar-output'>csv_comp_count</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#txt_assembly_notes' class='navbar-output'>txt_assembly_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> fab</span>
|
||||
<ul id='folder-test_5-navigate_mfg-fab' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#gbr_gerbers' class='navbar-output'>gbr_gerbers</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#drl_excellon' class='navbar-output'>drl_excellon</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#pdf_drill_map' class='navbar-output'>pdf_drill_map</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_odb' class='navbar-output'>zip_odb</a></li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> drill-tables</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-drill-tables' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_drill-tables.html#csv_drill_table' class='navbar-output'>csv_drill_table</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#pdf_fabrication' class='navbar-output'>pdf_fabrication</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_compress_fab' class='navbar-output'>zip_compress_fab</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#csv_impedance_table' class='navbar-output'>csv_impedance_table</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#txt_fabrication_notes' class='navbar-output'>txt_fabrication_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> jlcpcb</span>
|
||||
<ul id='folder-test_5-navigate_mfg-jlcpcb' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_jlcpcb-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb_gerbers.html#jlcpcb_gerbers' class='navbar-output'>jlcpcb_gerbers</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_fabpack' class='navbar-output'>jlcpcb_fabpack</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_bom' class='navbar-output'>jlcpcb_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_cpl' class='navbar-output'>jlcpcb_cpl</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> kiri</span>
|
||||
<ul id='folder-test_5-navigate-kiri' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_kiri.html#html_kiri' class='navbar-output'>html_kiri</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> renders</span>
|
||||
<ul id='folder-test_5-navigate-renders' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_top' class='navbar-output'>pcbdraw_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_bottom' class='navbar-output'>pcbdraw_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_top' class='navbar-output'>png_3d_viewer_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_bottom' class='navbar-output'>png_3d_viewer_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_top' class='navbar-output'>png_3d_viewer_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_bottom' class='navbar-output'>png_3d_viewer_angled_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_top' class='navbar-output'>blender_3d_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_bottom' class='navbar-output'>blender_3d_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_top' class='navbar-output'>blender_3d_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_bottom' class='navbar-output'>blender_3d_angled_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> models</span>
|
||||
<ul id='folder-test_5-navigate-models' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_models.html#step' class='navbar-output'>step</a></li>
|
||||
<li><a href='Test_5-navigate_models.html#glb' class='navbar-output'>glb</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> test</span>
|
||||
<ul id='folder-test_5-navigate-test' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> testpoints</span>
|
||||
<ul id='folder-test_5-navigate_test-testpoints' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints' class='navbar-output'>csv_testpoints</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_top' class='navbar-output'>csv_testpoints_top</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_bottom' class='navbar-output'>csv_testpoints_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panels</span>
|
||||
<ul id='folder-test_5-navigate-panels' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panel-800</span>
|
||||
<ul id='folder-test_5-navigate_panels-panel-800' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_panels_panel-800.html#panel_801' class='navbar-output'>panel_801</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="topmenu" class="topmenu">
|
||||
<div style="display: flex; align-items: center; flex: 1; min-width: 0; gap: 10px;">
|
||||
<span id="open-navbar" style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
|
||||
<span id="close-navbar" style="font-size:30px;cursor:pointer;display:none;" onclick="closeNav()">⨉</span>
|
||||
<button id="back-button" onclick="history.back()" style="font-size:30px;">↩</button>
|
||||
<button id="forward-button" onclick="history.forward()" style="font-size:30px;">↪</button>
|
||||
<button id="up-button" onclick="location.href='Test_5-navigate_mfg_fab.html'" style="font-size:44px; position: relative; top: -3px;">⌅</button>
|
||||
<button id="home-button" onclick="location.href='Test_5-navigate.html'" style="font-size:25px; position: relative; top: -2px;">🏠︎</button>
|
||||
|
||||
<span style="
|
||||
font-size:18px;
|
||||
color: var(--text-color-accent);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
">
|
||||
<a href="Test_5-navigate_mfg.html" style="text-decoration:none;color:inherit;">mfg</a>/<wbr><a href="Test_5-navigate_mfg_fab.html" style="text-decoration:none;color:inherit;">fab</a>/<wbr><a href="Test_5-navigate_mfg_fab_gerbers.html" style="text-decoration:none;color:inherit;">gerbers</a>
|
||||
</span>
|
||||
</div>
|
||||
<div style="text-align: center; flex: 1; min-width: 200px;">
|
||||
<a href="https://git.asymworks.com/jkrauss/Test_5" style="text-decoration: none; color: inherit;">
|
||||
<span style="font-size:30px;">A99-9000 (Assembly Name)</span>
|
||||
</a>
|
||||
|
||||
<div style="
|
||||
font-size:14px;
|
||||
color: var(--text-color-accent);
|
||||
margin-top: 5px;">
|
||||
Asymworks, LLC
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; flex: 1; justify-content: flex-end; min-width: 0; gap: 10px; padding-right: 10px;">
|
||||
|
||||
<div style="
|
||||
text-align: left;
|
||||
font-size:14px;
|
||||
margin-right: 10px;
|
||||
color: var(--text-color-accent);">
|
||||
<div style="margin-bottom: 5px;">Rev. NO_TAG+ (Unreleased)</div>
|
||||
<div>Variant: </div>
|
||||
</div>
|
||||
<img src="images/logo.png" alt="Logo" style="max-height: 40px; max-width: 74.0px;">
|
||||
|
||||
<label class="theme-switch" style="
|
||||
position: relative;
|
||||
margin-right: 10px; /* Move toggle slightly left */
|
||||
max-width: 100%; /* Prevent overflow */
|
||||
">
|
||||
<input type="checkbox" id="themeToggle" onchange="toggleTheme()">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div class="output-virtual-box" id="gbr_gerbers">
|
||||
<div class="output-comment">Gerbers in GBR format</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/fab/gerbers/Test_5-F_Cu.gbr'">
|
||||
<img src="images/file_gbr_64.png" alt="Test_5-F_Cu.gbr" width="64" height="64">
|
||||
<p class="filename">Test_5-F_Cu.gbr</p>
|
||||
<p class="output-name">gbr_gerbers</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/fab/gerbers/Test_5-In1_Cu.gbr'">
|
||||
<img src="images/file_gbr_64.png" alt="Test_5-In1_Cu.gbr" width="64" height="64">
|
||||
<p class="filename">Test_5-In1_Cu.gbr</p>
|
||||
<p class="output-name">gbr_gerbers</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/fab/gerbers/Test_5-In2_Cu.gbr'">
|
||||
<img src="images/file_gbr_64.png" alt="Test_5-In2_Cu.gbr" width="64" height="64">
|
||||
<p class="filename">Test_5-In2_Cu.gbr</p>
|
||||
<p class="output-name">gbr_gerbers</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/fab/gerbers/Test_5-B_Cu.gbr'">
|
||||
<img src="images/file_gbr_64.png" alt="Test_5-B_Cu.gbr" width="64" height="64">
|
||||
<p class="filename">Test_5-B_Cu.gbr</p>
|
||||
<p class="output-name">gbr_gerbers</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/fab/gerbers/Test_5-Edge_Cuts.gbr'">
|
||||
<img src="images/file_gbr_64.png" alt="Test_5-Edge_Cuts.gbr" width="64" height="64">
|
||||
<p class="filename">Test_5-Edge_Cuts.gbr</p>
|
||||
<p class="output-name">gbr_gerbers</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/fab/gerbers/Test_5-F_Silkscreen.gbr'">
|
||||
<img src="images/file_gbr_64.png" alt="Test_5-F_Silkscreen.gbr" width="64" height="64">
|
||||
<p class="filename">Test_5-F_Silkscreen.gbr</p>
|
||||
<p class="output-name">gbr_gerbers</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/fab/gerbers/Test_5-F_Mask.gbr'">
|
||||
<img src="images/file_gbr_64.png" alt="Test_5-F_Mask.gbr" width="64" height="64">
|
||||
<p class="filename">Test_5-F_Mask.gbr</p>
|
||||
<p class="output-name">gbr_gerbers</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/fab/gerbers/Test_5-F_Paste.gbr'">
|
||||
<img src="images/file_gbr_64.png" alt="Test_5-F_Paste.gbr" width="64" height="64">
|
||||
<p class="filename">Test_5-F_Paste.gbr</p>
|
||||
<p class="output-name">gbr_gerbers</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/fab/gerbers/Test_5-B_Silkscreen.gbr'">
|
||||
<img src="images/file_gbr_64.png" alt="Test_5-B_Silkscreen.gbr" width="64" height="64">
|
||||
<p class="filename">Test_5-B_Silkscreen.gbr</p>
|
||||
<p class="output-name">gbr_gerbers</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/fab/gerbers/Test_5-B_Mask.gbr'">
|
||||
<img src="images/file_gbr_64.png" alt="Test_5-B_Mask.gbr" width="64" height="64">
|
||||
<p class="filename">Test_5-B_Mask.gbr</p>
|
||||
<p class="output-name">gbr_gerbers</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/fab/gerbers/Test_5-B_Paste.gbr'">
|
||||
<img src="images/file_gbr_64.png" alt="Test_5-B_Paste.gbr" width="64" height="64">
|
||||
<p class="filename">Test_5-B_Paste.gbr</p>
|
||||
<p class="output-name">gbr_gerbers</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="drl_excellon">
|
||||
<div class="output-comment">Drill in Excellon format</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/fab/gerbers/Test_5--pth.drl'">
|
||||
<img src="images/file_drl_64.png" alt="Test_5--pth.drl" width="64" height="64">
|
||||
<p class="filename">Test_5--pth.drl</p>
|
||||
<p class="output-name">drl_excellon</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/fab/gerbers/Test_5--npth.drl'">
|
||||
<img src="images/file_drl_64.png" alt="Test_5--npth.drl" width="64" height="64">
|
||||
<p class="filename">Test_5--npth.drl</p>
|
||||
<p class="output-name">drl_excellon</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="pdf_drill_map">
|
||||
<div class="output-comment">Drill Map in PDF format</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box wide" onclick="location.href='../mfg/fab/gerbers/Test_5--pth_map.pdf'">
|
||||
<img src="images/cat_pdf_drill_map_Test_5--pth_map.png" alt="Test_5--pth_map.pdf" width="512" height="362">
|
||||
<p class="filename">Test_5--pth_map.pdf</p>
|
||||
<p class="output-name">pdf_drill_map</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box wide" onclick="location.href='../mfg/fab/gerbers/Test_5--npth_map.pdf'">
|
||||
<img src="images/cat_pdf_drill_map_Test_5--npth_map.png" alt="Test_5--npth_map.pdf" width="512" height="362">
|
||||
<p class="filename">Test_5--npth_map.pdf</p>
|
||||
<p class="output-name">pdf_drill_map</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// Side Navigation functions ===================================================
|
||||
|
||||
function openNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "360px";
|
||||
navbar.style.paddingLeft = "20px";
|
||||
main.style.marginLeft = "360px";
|
||||
document.getElementById("open-navbar").style.display = "none";
|
||||
document.getElementById("close-navbar").style.display = "inline-block";
|
||||
}
|
||||
|
||||
function closeNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "0"; // Close the navbar
|
||||
navbar.style.paddingLeft = "0"; // Reset padding
|
||||
main.style.marginLeft = "0"; // Reset page content position
|
||||
document.getElementById("open-navbar").style.display = "inline-block";
|
||||
document.getElementById("close-navbar").style.display = "none";
|
||||
}
|
||||
|
||||
function toggleFolder(folderHeader) {
|
||||
const folder = folderHeader.parentElement;
|
||||
const folderContents = folderHeader.nextElementSibling;
|
||||
|
||||
if (folder.classList.contains("open")) {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
} else {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
}
|
||||
|
||||
// Save the updated state
|
||||
saveSideNavState();
|
||||
}
|
||||
|
||||
function saveSideNavState() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const isOpen = navbar.style.width !== "0px"; // Check if navbar is open
|
||||
|
||||
// Save the state of each folder
|
||||
const folderStates = Array.from(document.querySelectorAll(".folder")).map(folder => ({
|
||||
id: folder.querySelector("span").textContent.trim(), // Use folder name as identifier
|
||||
isOpen: folder.classList.contains("open") // Check if folder is open
|
||||
}));
|
||||
|
||||
// Save the navbar and folder states to localStorage
|
||||
localStorage.setItem("navbarState", JSON.stringify({ isOpen, folderStates }));
|
||||
}
|
||||
|
||||
function restorenavbarState() {
|
||||
const savedState = localStorage.getItem("navbarState");
|
||||
if (savedState) {
|
||||
const { isOpen, folderStates } = JSON.parse(savedState);
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
// Temporarily disable animations on page load so elements don't move
|
||||
navbar.style.transition = "none";
|
||||
main.style.transition = "none";
|
||||
const chevrons = document.querySelectorAll(".chevron");
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "none";
|
||||
});
|
||||
|
||||
// Restore side navigation state
|
||||
if (isOpen) {
|
||||
openNav()
|
||||
} else {
|
||||
closeNav()
|
||||
}
|
||||
|
||||
// Restore folder open/closed states
|
||||
folderStates.forEach(({ id, isOpen }) => {
|
||||
const folder = Array.from(document.querySelectorAll(".folder"))
|
||||
.find(folder => folder.querySelector("span").textContent.trim() === id);
|
||||
|
||||
if (folder) {
|
||||
const folderContents = folder.querySelector(".folder-contents");
|
||||
if (isOpen) {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
} else {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Re-enable animation
|
||||
setTimeout(() => {
|
||||
navbar.style.transition = "";
|
||||
main.style.transition = "";
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "";
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function saveSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const scrollPosition = navbar.scrollTop;
|
||||
localStorage.setItem("navbarScrollPosition", scrollPosition);
|
||||
}
|
||||
|
||||
function restoreSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const savedPosition = localStorage.getItem("navbarScrollPosition");
|
||||
if (savedPosition !== null) {
|
||||
navbar.scrollTop = parseInt(savedPosition, 10);
|
||||
}
|
||||
}
|
||||
|
||||
function adjustSidenavOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
adjustSidenavOffset();
|
||||
window.addEventListener("resize", adjustSidenavOffset);
|
||||
|
||||
/* This is the scrolling offset when we click on an output in the side navigation bar
|
||||
It should take into account the top menu height */
|
||||
function adjustOutputOffset() {
|
||||
const topMenu = document.getElementById("topmenu"); // Replace with your top menu's ID
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight; // Dynamically get the top menu height
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", adjustOutputOffset);
|
||||
window.addEventListener("resize", adjustOutputOffset);
|
||||
|
||||
// Prevent flickering on page navigation
|
||||
window.addEventListener("beforeunload", () => {
|
||||
saveSideNavState();
|
||||
saveSidenavScrollPosition();
|
||||
});
|
||||
|
||||
window.addEventListener("load", restoreSidenavScrollPosition);
|
||||
document.addEventListener("DOMContentLoaded", restorenavbarState);
|
||||
|
||||
function initializeSearchBar(searchContainerId, outputSelector) {
|
||||
const searchContainer = document.getElementById(searchContainerId);
|
||||
if (!searchContainer) return; // Exit if container is not found
|
||||
|
||||
const searchBar = searchContainer.querySelector('#search-bar');
|
||||
const autocompleteList = searchContainer.querySelector('#autocomplete-list');
|
||||
const outputLinks = document.querySelectorAll(outputSelector);
|
||||
|
||||
// Collect output names and their hrefs
|
||||
const outputs = Array.from(outputLinks).map(link => ({
|
||||
name: link.textContent.trim(),
|
||||
href: link.getAttribute("href"),
|
||||
}));
|
||||
|
||||
let highlightedIndex = -1; // Index of the currently highlighted item
|
||||
|
||||
function adjustAutocompleteWidth() {
|
||||
const searchBarWidth = searchBar.offsetWidth;
|
||||
autocompleteList.style.width = `${searchBarWidth}px`;
|
||||
}
|
||||
|
||||
function updateAutocomplete(query) {
|
||||
autocompleteList.innerHTML = ""; // Clear suggestions
|
||||
highlightedIndex = -1; // Reset highlighting
|
||||
|
||||
const matches = outputs.filter(output =>
|
||||
output.name.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
|
||||
matches.forEach(match => {
|
||||
const listItem = document.createElement("li");
|
||||
listItem.textContent = match.name;
|
||||
listItem.addEventListener("click", () => {
|
||||
window.location.href = match.href;
|
||||
});
|
||||
autocompleteList.appendChild(listItem);
|
||||
});
|
||||
|
||||
autocompleteList.style.display = matches.length ? "block" : "none";
|
||||
}
|
||||
|
||||
function highlightItem(index) {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
items.forEach((item, i) => {
|
||||
if (i === index) {
|
||||
item.classList.add("highlighted");
|
||||
item.scrollIntoView({ block: "nearest" });
|
||||
} else {
|
||||
item.classList.remove("highlighted");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listeners for search bar input and keydown
|
||||
searchBar.addEventListener("input", () => {
|
||||
const query = searchBar.value.trim();
|
||||
if (query) updateAutocomplete(query);
|
||||
else {
|
||||
autocompleteList.innerHTML = "";
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
searchBar.addEventListener("keydown", (event) => {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
if (!items.length) return;
|
||||
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex + 1) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex - 1 + items.length) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "Enter" && highlightedIndex >= 0) {
|
||||
event.preventDefault();
|
||||
items[highlightedIndex].click();
|
||||
}
|
||||
});
|
||||
|
||||
// Hide suggestions when clicking outside
|
||||
document.addEventListener("click", (event) => {
|
||||
if (!searchBar.contains(event.target) && !autocompleteList.contains(event.target)) {
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
// Adjust width on window resize
|
||||
adjustAutocompleteWidth();
|
||||
window.addEventListener("resize", adjustAutocompleteWidth);
|
||||
}
|
||||
|
||||
// Initialize search functionality
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
initializeSearchBar("search-container", ".navbar-output");
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const md = window.markdownit({
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true
|
||||
});
|
||||
|
||||
// Find all markdown containers and render them
|
||||
document.querySelectorAll('.markdown-content').forEach(container => {
|
||||
const rawMarkdown = container.innerHTML;
|
||||
container.style.display = 'block';
|
||||
container.innerHTML = md.render(rawMarkdown);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Theme toggle ================================================================
|
||||
|
||||
function toggleTheme() {
|
||||
const body = document.body;
|
||||
|
||||
// Check if the current theme is dark
|
||||
const isDark = body.classList.contains('dark-mode');
|
||||
|
||||
// Toggle between dark and light themes
|
||||
if (isDark) {
|
||||
body.classList.remove('dark-mode');
|
||||
body.classList.add('light-mode');
|
||||
} else {
|
||||
body.classList.remove('light-mode');
|
||||
body.classList.add('dark-mode');
|
||||
}
|
||||
|
||||
// Save the selected theme to localStorage
|
||||
localStorage.setItem('theme', isDark ? 'light' : 'dark');
|
||||
}
|
||||
|
||||
// Do not animate theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
const toggleSpan = themeToggle.nextElementSibling; // The <span> element
|
||||
|
||||
// Prevent animation on page load
|
||||
const savedTheme = localStorage.getItem('theme') || 'dark';
|
||||
document.body.classList.add(savedTheme === 'dark' ? 'dark-mode' : 'light-mode');
|
||||
themeToggle.checked = savedTheme === 'dark';
|
||||
|
||||
// Add the "animate" class on user interaction
|
||||
themeToggle.addEventListener('change', () => {
|
||||
toggleSpan.classList.add('animate');
|
||||
setTimeout(() => {
|
||||
toggleSpan.classList.remove('animate'); // Remove the animation class after completion
|
||||
}, 400); // Match the CSS transition duration (0.4s)
|
||||
});
|
||||
});
|
||||
|
||||
// Avoid flickering of theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const body = document.body;
|
||||
|
||||
// Temporarily disable transitions during page load
|
||||
body.classList.add('no-transition');
|
||||
|
||||
// Remove the no-transition class after the page is fully loaded
|
||||
setTimeout(() => {
|
||||
body.classList.remove('no-transition');
|
||||
}, 50); // Allow rendering to complete before enabling transitions
|
||||
});
|
||||
|
||||
function adjustMainBodyOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const mainBody = document.getElementById("main");
|
||||
|
||||
if (topMenu && mainBody) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
mainBody.style.marginTop = `${topMenuHeight}px`;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply the adjustment on page load and window resize
|
||||
window.addEventListener("DOMContentLoaded", adjustMainBodyOffset);
|
||||
window.addEventListener("resize", adjustMainBodyOffset);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
595
html/Test_5-navigate_mfg_jlcpcb.html
Normal file
595
html/Test_5-navigate_mfg_jlcpcb.html
Normal file
@@ -0,0 +1,595 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>/mfg/jlcpcb</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<script src="markdown-it.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="theSideNav" class="navbar">
|
||||
<!-- Search bar container -->
|
||||
<div id="search-container">
|
||||
<input type="text" id="search-bar" placeholder="Search outputs..." autocomplete="off">
|
||||
<ul id="autocomplete-list"></ul>
|
||||
</div>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> reports</span>
|
||||
<ul id='folder-test_5-navigate-reports' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_reports.html#erc' class='navbar-output'>erc</a></li>
|
||||
<li><a href='Test_5-navigate_reports.html#drc' class='navbar-output'>drc</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> schematic</span>
|
||||
<ul id='folder-test_5-navigate-schematic' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_schematic.html#pdf_schematic' class='navbar-output'>pdf_schematic</a></li>
|
||||
<li><a href='Test_5-navigate_schematic.html#txt_schematic_notes' class='navbar-output'>txt_schematic_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> mfg</span>
|
||||
<ul id='folder-test_5-navigate-mfg' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> assembly</span>
|
||||
<ul id='folder-test_5-navigate_mfg-assembly' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_bom' class='navbar-output'>csv_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom' class='navbar-output'>html_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom_interactive' class='navbar-output'>html_bom_interactive</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_position' class='navbar-output'>csv_position</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#pdf_assembly' class='navbar-output'>pdf_assembly</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_comp_count' class='navbar-output'>csv_comp_count</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#txt_assembly_notes' class='navbar-output'>txt_assembly_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> fab</span>
|
||||
<ul id='folder-test_5-navigate_mfg-fab' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#gbr_gerbers' class='navbar-output'>gbr_gerbers</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#drl_excellon' class='navbar-output'>drl_excellon</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#pdf_drill_map' class='navbar-output'>pdf_drill_map</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_odb' class='navbar-output'>zip_odb</a></li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> drill-tables</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-drill-tables' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_drill-tables.html#csv_drill_table' class='navbar-output'>csv_drill_table</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#pdf_fabrication' class='navbar-output'>pdf_fabrication</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_compress_fab' class='navbar-output'>zip_compress_fab</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#csv_impedance_table' class='navbar-output'>csv_impedance_table</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#txt_fabrication_notes' class='navbar-output'>txt_fabrication_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> jlcpcb</span>
|
||||
<ul id='folder-test_5-navigate_mfg-jlcpcb' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_jlcpcb-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb_gerbers.html#jlcpcb_gerbers' class='navbar-output'>jlcpcb_gerbers</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_fabpack' class='navbar-output'>jlcpcb_fabpack</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_bom' class='navbar-output'>jlcpcb_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_cpl' class='navbar-output'>jlcpcb_cpl</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> kiri</span>
|
||||
<ul id='folder-test_5-navigate-kiri' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_kiri.html#html_kiri' class='navbar-output'>html_kiri</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> renders</span>
|
||||
<ul id='folder-test_5-navigate-renders' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_top' class='navbar-output'>pcbdraw_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_bottom' class='navbar-output'>pcbdraw_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_top' class='navbar-output'>png_3d_viewer_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_bottom' class='navbar-output'>png_3d_viewer_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_top' class='navbar-output'>png_3d_viewer_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_bottom' class='navbar-output'>png_3d_viewer_angled_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_top' class='navbar-output'>blender_3d_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_bottom' class='navbar-output'>blender_3d_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_top' class='navbar-output'>blender_3d_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_bottom' class='navbar-output'>blender_3d_angled_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> models</span>
|
||||
<ul id='folder-test_5-navigate-models' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_models.html#step' class='navbar-output'>step</a></li>
|
||||
<li><a href='Test_5-navigate_models.html#glb' class='navbar-output'>glb</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> test</span>
|
||||
<ul id='folder-test_5-navigate-test' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> testpoints</span>
|
||||
<ul id='folder-test_5-navigate_test-testpoints' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints' class='navbar-output'>csv_testpoints</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_top' class='navbar-output'>csv_testpoints_top</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_bottom' class='navbar-output'>csv_testpoints_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panels</span>
|
||||
<ul id='folder-test_5-navigate-panels' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panel-800</span>
|
||||
<ul id='folder-test_5-navigate_panels-panel-800' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_panels_panel-800.html#panel_801' class='navbar-output'>panel_801</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="topmenu" class="topmenu">
|
||||
<div style="display: flex; align-items: center; flex: 1; min-width: 0; gap: 10px;">
|
||||
<span id="open-navbar" style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
|
||||
<span id="close-navbar" style="font-size:30px;cursor:pointer;display:none;" onclick="closeNav()">⨉</span>
|
||||
<button id="back-button" onclick="history.back()" style="font-size:30px;">↩</button>
|
||||
<button id="forward-button" onclick="history.forward()" style="font-size:30px;">↪</button>
|
||||
<button id="up-button" onclick="location.href='Test_5-navigate_mfg.html'" style="font-size:44px; position: relative; top: -3px;">⌅</button>
|
||||
<button id="home-button" onclick="location.href='Test_5-navigate.html'" style="font-size:25px; position: relative; top: -2px;">🏠︎</button>
|
||||
|
||||
<span style="
|
||||
font-size:18px;
|
||||
color: var(--text-color-accent);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
">
|
||||
<a href="Test_5-navigate_mfg.html" style="text-decoration:none;color:inherit;">mfg</a>/<wbr><a href="Test_5-navigate_mfg_jlcpcb.html" style="text-decoration:none;color:inherit;">jlcpcb</a>
|
||||
</span>
|
||||
</div>
|
||||
<div style="text-align: center; flex: 1; min-width: 200px;">
|
||||
<a href="https://git.asymworks.com/jkrauss/Test_5" style="text-decoration: none; color: inherit;">
|
||||
<span style="font-size:30px;">A99-9000 (Assembly Name)</span>
|
||||
</a>
|
||||
|
||||
<div style="
|
||||
font-size:14px;
|
||||
color: var(--text-color-accent);
|
||||
margin-top: 5px;">
|
||||
Asymworks, LLC
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; flex: 1; justify-content: flex-end; min-width: 0; gap: 10px; padding-right: 10px;">
|
||||
|
||||
<div style="
|
||||
text-align: left;
|
||||
font-size:14px;
|
||||
margin-right: 10px;
|
||||
color: var(--text-color-accent);">
|
||||
<div style="margin-bottom: 5px;">Rev. NO_TAG+ (Unreleased)</div>
|
||||
<div>Variant: </div>
|
||||
</div>
|
||||
<img src="images/logo.png" alt="Logo" style="max-height: 40px; max-width: 74.0px;">
|
||||
|
||||
<label class="theme-switch" style="
|
||||
position: relative;
|
||||
margin-right: 10px; /* Move toggle slightly left */
|
||||
max-width: 100%; /* Prevent overflow */
|
||||
">
|
||||
<input type="checkbox" id="themeToggle" onchange="toggleTheme()">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div class="items-container">
|
||||
<div>
|
||||
<div class="category-box" onclick="location.href='Test_5-navigate_mfg_jlcpcb_gerbers.html'">
|
||||
<p class="category-title">gerbers</p>
|
||||
</div>
|
||||
</div></div>
|
||||
<div class="output-virtual-box" id="jlcpcb_fabpack">
|
||||
<div class="output-comment">Zipped Fabpack for JLCPCB</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/jlcpcb/Test_5-Fabpack.zip'">
|
||||
<img src="images/file_zip_64.png" alt="Test_5-Fabpack.zip" width="64" height="64">
|
||||
<p class="filename">Test_5-Fabpack.zip</p>
|
||||
<p class="output-name">jlcpcb_fabpack</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="jlcpcb_bom">
|
||||
<div class="output-comment">Bill of Materials for JLCPCB</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/jlcpcb/Test_5-bom.csv'">
|
||||
<img src="images/file_csv_64.png" alt="Test_5-bom.csv" width="64" height="64">
|
||||
<p class="filename">Test_5-bom.csv</p>
|
||||
<p class="output-name">jlcpcb_bom</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="jlcpcb_cpl">
|
||||
<div class="output-comment">Component Placement File for JLCPCB</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/jlcpcb/Test_5-cpl.csv'">
|
||||
<img src="images/file_csv_64.png" alt="Test_5-cpl.csv" width="64" height="64">
|
||||
<p class="filename">Test_5-cpl.csv</p>
|
||||
<p class="output-name">jlcpcb_cpl</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// Side Navigation functions ===================================================
|
||||
|
||||
function openNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "360px";
|
||||
navbar.style.paddingLeft = "20px";
|
||||
main.style.marginLeft = "360px";
|
||||
document.getElementById("open-navbar").style.display = "none";
|
||||
document.getElementById("close-navbar").style.display = "inline-block";
|
||||
}
|
||||
|
||||
function closeNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "0"; // Close the navbar
|
||||
navbar.style.paddingLeft = "0"; // Reset padding
|
||||
main.style.marginLeft = "0"; // Reset page content position
|
||||
document.getElementById("open-navbar").style.display = "inline-block";
|
||||
document.getElementById("close-navbar").style.display = "none";
|
||||
}
|
||||
|
||||
function toggleFolder(folderHeader) {
|
||||
const folder = folderHeader.parentElement;
|
||||
const folderContents = folderHeader.nextElementSibling;
|
||||
|
||||
if (folder.classList.contains("open")) {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
} else {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
}
|
||||
|
||||
// Save the updated state
|
||||
saveSideNavState();
|
||||
}
|
||||
|
||||
function saveSideNavState() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const isOpen = navbar.style.width !== "0px"; // Check if navbar is open
|
||||
|
||||
// Save the state of each folder
|
||||
const folderStates = Array.from(document.querySelectorAll(".folder")).map(folder => ({
|
||||
id: folder.querySelector("span").textContent.trim(), // Use folder name as identifier
|
||||
isOpen: folder.classList.contains("open") // Check if folder is open
|
||||
}));
|
||||
|
||||
// Save the navbar and folder states to localStorage
|
||||
localStorage.setItem("navbarState", JSON.stringify({ isOpen, folderStates }));
|
||||
}
|
||||
|
||||
function restorenavbarState() {
|
||||
const savedState = localStorage.getItem("navbarState");
|
||||
if (savedState) {
|
||||
const { isOpen, folderStates } = JSON.parse(savedState);
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
// Temporarily disable animations on page load so elements don't move
|
||||
navbar.style.transition = "none";
|
||||
main.style.transition = "none";
|
||||
const chevrons = document.querySelectorAll(".chevron");
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "none";
|
||||
});
|
||||
|
||||
// Restore side navigation state
|
||||
if (isOpen) {
|
||||
openNav()
|
||||
} else {
|
||||
closeNav()
|
||||
}
|
||||
|
||||
// Restore folder open/closed states
|
||||
folderStates.forEach(({ id, isOpen }) => {
|
||||
const folder = Array.from(document.querySelectorAll(".folder"))
|
||||
.find(folder => folder.querySelector("span").textContent.trim() === id);
|
||||
|
||||
if (folder) {
|
||||
const folderContents = folder.querySelector(".folder-contents");
|
||||
if (isOpen) {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
} else {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Re-enable animation
|
||||
setTimeout(() => {
|
||||
navbar.style.transition = "";
|
||||
main.style.transition = "";
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "";
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function saveSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const scrollPosition = navbar.scrollTop;
|
||||
localStorage.setItem("navbarScrollPosition", scrollPosition);
|
||||
}
|
||||
|
||||
function restoreSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const savedPosition = localStorage.getItem("navbarScrollPosition");
|
||||
if (savedPosition !== null) {
|
||||
navbar.scrollTop = parseInt(savedPosition, 10);
|
||||
}
|
||||
}
|
||||
|
||||
function adjustSidenavOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
adjustSidenavOffset();
|
||||
window.addEventListener("resize", adjustSidenavOffset);
|
||||
|
||||
/* This is the scrolling offset when we click on an output in the side navigation bar
|
||||
It should take into account the top menu height */
|
||||
function adjustOutputOffset() {
|
||||
const topMenu = document.getElementById("topmenu"); // Replace with your top menu's ID
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight; // Dynamically get the top menu height
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", adjustOutputOffset);
|
||||
window.addEventListener("resize", adjustOutputOffset);
|
||||
|
||||
// Prevent flickering on page navigation
|
||||
window.addEventListener("beforeunload", () => {
|
||||
saveSideNavState();
|
||||
saveSidenavScrollPosition();
|
||||
});
|
||||
|
||||
window.addEventListener("load", restoreSidenavScrollPosition);
|
||||
document.addEventListener("DOMContentLoaded", restorenavbarState);
|
||||
|
||||
function initializeSearchBar(searchContainerId, outputSelector) {
|
||||
const searchContainer = document.getElementById(searchContainerId);
|
||||
if (!searchContainer) return; // Exit if container is not found
|
||||
|
||||
const searchBar = searchContainer.querySelector('#search-bar');
|
||||
const autocompleteList = searchContainer.querySelector('#autocomplete-list');
|
||||
const outputLinks = document.querySelectorAll(outputSelector);
|
||||
|
||||
// Collect output names and their hrefs
|
||||
const outputs = Array.from(outputLinks).map(link => ({
|
||||
name: link.textContent.trim(),
|
||||
href: link.getAttribute("href"),
|
||||
}));
|
||||
|
||||
let highlightedIndex = -1; // Index of the currently highlighted item
|
||||
|
||||
function adjustAutocompleteWidth() {
|
||||
const searchBarWidth = searchBar.offsetWidth;
|
||||
autocompleteList.style.width = `${searchBarWidth}px`;
|
||||
}
|
||||
|
||||
function updateAutocomplete(query) {
|
||||
autocompleteList.innerHTML = ""; // Clear suggestions
|
||||
highlightedIndex = -1; // Reset highlighting
|
||||
|
||||
const matches = outputs.filter(output =>
|
||||
output.name.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
|
||||
matches.forEach(match => {
|
||||
const listItem = document.createElement("li");
|
||||
listItem.textContent = match.name;
|
||||
listItem.addEventListener("click", () => {
|
||||
window.location.href = match.href;
|
||||
});
|
||||
autocompleteList.appendChild(listItem);
|
||||
});
|
||||
|
||||
autocompleteList.style.display = matches.length ? "block" : "none";
|
||||
}
|
||||
|
||||
function highlightItem(index) {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
items.forEach((item, i) => {
|
||||
if (i === index) {
|
||||
item.classList.add("highlighted");
|
||||
item.scrollIntoView({ block: "nearest" });
|
||||
} else {
|
||||
item.classList.remove("highlighted");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listeners for search bar input and keydown
|
||||
searchBar.addEventListener("input", () => {
|
||||
const query = searchBar.value.trim();
|
||||
if (query) updateAutocomplete(query);
|
||||
else {
|
||||
autocompleteList.innerHTML = "";
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
searchBar.addEventListener("keydown", (event) => {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
if (!items.length) return;
|
||||
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex + 1) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex - 1 + items.length) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "Enter" && highlightedIndex >= 0) {
|
||||
event.preventDefault();
|
||||
items[highlightedIndex].click();
|
||||
}
|
||||
});
|
||||
|
||||
// Hide suggestions when clicking outside
|
||||
document.addEventListener("click", (event) => {
|
||||
if (!searchBar.contains(event.target) && !autocompleteList.contains(event.target)) {
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
// Adjust width on window resize
|
||||
adjustAutocompleteWidth();
|
||||
window.addEventListener("resize", adjustAutocompleteWidth);
|
||||
}
|
||||
|
||||
// Initialize search functionality
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
initializeSearchBar("search-container", ".navbar-output");
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const md = window.markdownit({
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true
|
||||
});
|
||||
|
||||
// Find all markdown containers and render them
|
||||
document.querySelectorAll('.markdown-content').forEach(container => {
|
||||
const rawMarkdown = container.innerHTML;
|
||||
container.style.display = 'block';
|
||||
container.innerHTML = md.render(rawMarkdown);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Theme toggle ================================================================
|
||||
|
||||
function toggleTheme() {
|
||||
const body = document.body;
|
||||
|
||||
// Check if the current theme is dark
|
||||
const isDark = body.classList.contains('dark-mode');
|
||||
|
||||
// Toggle between dark and light themes
|
||||
if (isDark) {
|
||||
body.classList.remove('dark-mode');
|
||||
body.classList.add('light-mode');
|
||||
} else {
|
||||
body.classList.remove('light-mode');
|
||||
body.classList.add('dark-mode');
|
||||
}
|
||||
|
||||
// Save the selected theme to localStorage
|
||||
localStorage.setItem('theme', isDark ? 'light' : 'dark');
|
||||
}
|
||||
|
||||
// Do not animate theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
const toggleSpan = themeToggle.nextElementSibling; // The <span> element
|
||||
|
||||
// Prevent animation on page load
|
||||
const savedTheme = localStorage.getItem('theme') || 'dark';
|
||||
document.body.classList.add(savedTheme === 'dark' ? 'dark-mode' : 'light-mode');
|
||||
themeToggle.checked = savedTheme === 'dark';
|
||||
|
||||
// Add the "animate" class on user interaction
|
||||
themeToggle.addEventListener('change', () => {
|
||||
toggleSpan.classList.add('animate');
|
||||
setTimeout(() => {
|
||||
toggleSpan.classList.remove('animate'); // Remove the animation class after completion
|
||||
}, 400); // Match the CSS transition duration (0.4s)
|
||||
});
|
||||
});
|
||||
|
||||
// Avoid flickering of theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const body = document.body;
|
||||
|
||||
// Temporarily disable transitions during page load
|
||||
body.classList.add('no-transition');
|
||||
|
||||
// Remove the no-transition class after the page is fully loaded
|
||||
setTimeout(() => {
|
||||
body.classList.remove('no-transition');
|
||||
}, 50); // Allow rendering to complete before enabling transitions
|
||||
});
|
||||
|
||||
function adjustMainBodyOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const mainBody = document.getElementById("main");
|
||||
|
||||
if (topMenu && mainBody) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
mainBody.style.marginTop = `${topMenuHeight}px`;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply the adjustment on page load and window resize
|
||||
window.addEventListener("DOMContentLoaded", adjustMainBodyOffset);
|
||||
window.addEventListener("resize", adjustMainBodyOffset);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
627
html/Test_5-navigate_mfg_jlcpcb_gerbers.html
Normal file
627
html/Test_5-navigate_mfg_jlcpcb_gerbers.html
Normal file
@@ -0,0 +1,627 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>/mfg/jlcpcb/gerbers</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<script src="markdown-it.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="theSideNav" class="navbar">
|
||||
<!-- Search bar container -->
|
||||
<div id="search-container">
|
||||
<input type="text" id="search-bar" placeholder="Search outputs..." autocomplete="off">
|
||||
<ul id="autocomplete-list"></ul>
|
||||
</div>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> reports</span>
|
||||
<ul id='folder-test_5-navigate-reports' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_reports.html#erc' class='navbar-output'>erc</a></li>
|
||||
<li><a href='Test_5-navigate_reports.html#drc' class='navbar-output'>drc</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> schematic</span>
|
||||
<ul id='folder-test_5-navigate-schematic' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_schematic.html#pdf_schematic' class='navbar-output'>pdf_schematic</a></li>
|
||||
<li><a href='Test_5-navigate_schematic.html#txt_schematic_notes' class='navbar-output'>txt_schematic_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> mfg</span>
|
||||
<ul id='folder-test_5-navigate-mfg' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> assembly</span>
|
||||
<ul id='folder-test_5-navigate_mfg-assembly' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_bom' class='navbar-output'>csv_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom' class='navbar-output'>html_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom_interactive' class='navbar-output'>html_bom_interactive</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_position' class='navbar-output'>csv_position</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#pdf_assembly' class='navbar-output'>pdf_assembly</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_comp_count' class='navbar-output'>csv_comp_count</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#txt_assembly_notes' class='navbar-output'>txt_assembly_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> fab</span>
|
||||
<ul id='folder-test_5-navigate_mfg-fab' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#gbr_gerbers' class='navbar-output'>gbr_gerbers</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#drl_excellon' class='navbar-output'>drl_excellon</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#pdf_drill_map' class='navbar-output'>pdf_drill_map</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_odb' class='navbar-output'>zip_odb</a></li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> drill-tables</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-drill-tables' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_drill-tables.html#csv_drill_table' class='navbar-output'>csv_drill_table</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#pdf_fabrication' class='navbar-output'>pdf_fabrication</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_compress_fab' class='navbar-output'>zip_compress_fab</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#csv_impedance_table' class='navbar-output'>csv_impedance_table</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#txt_fabrication_notes' class='navbar-output'>txt_fabrication_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> jlcpcb</span>
|
||||
<ul id='folder-test_5-navigate_mfg-jlcpcb' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_jlcpcb-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb_gerbers.html#jlcpcb_gerbers' class='navbar-output'>jlcpcb_gerbers</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_fabpack' class='navbar-output'>jlcpcb_fabpack</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_bom' class='navbar-output'>jlcpcb_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_cpl' class='navbar-output'>jlcpcb_cpl</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> kiri</span>
|
||||
<ul id='folder-test_5-navigate-kiri' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_kiri.html#html_kiri' class='navbar-output'>html_kiri</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> renders</span>
|
||||
<ul id='folder-test_5-navigate-renders' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_top' class='navbar-output'>pcbdraw_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_bottom' class='navbar-output'>pcbdraw_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_top' class='navbar-output'>png_3d_viewer_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_bottom' class='navbar-output'>png_3d_viewer_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_top' class='navbar-output'>png_3d_viewer_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_bottom' class='navbar-output'>png_3d_viewer_angled_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_top' class='navbar-output'>blender_3d_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_bottom' class='navbar-output'>blender_3d_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_top' class='navbar-output'>blender_3d_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_bottom' class='navbar-output'>blender_3d_angled_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> models</span>
|
||||
<ul id='folder-test_5-navigate-models' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_models.html#step' class='navbar-output'>step</a></li>
|
||||
<li><a href='Test_5-navigate_models.html#glb' class='navbar-output'>glb</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> test</span>
|
||||
<ul id='folder-test_5-navigate-test' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> testpoints</span>
|
||||
<ul id='folder-test_5-navigate_test-testpoints' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints' class='navbar-output'>csv_testpoints</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_top' class='navbar-output'>csv_testpoints_top</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_bottom' class='navbar-output'>csv_testpoints_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panels</span>
|
||||
<ul id='folder-test_5-navigate-panels' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panel-800</span>
|
||||
<ul id='folder-test_5-navigate_panels-panel-800' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_panels_panel-800.html#panel_801' class='navbar-output'>panel_801</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="topmenu" class="topmenu">
|
||||
<div style="display: flex; align-items: center; flex: 1; min-width: 0; gap: 10px;">
|
||||
<span id="open-navbar" style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
|
||||
<span id="close-navbar" style="font-size:30px;cursor:pointer;display:none;" onclick="closeNav()">⨉</span>
|
||||
<button id="back-button" onclick="history.back()" style="font-size:30px;">↩</button>
|
||||
<button id="forward-button" onclick="history.forward()" style="font-size:30px;">↪</button>
|
||||
<button id="up-button" onclick="location.href='Test_5-navigate_mfg_jlcpcb.html'" style="font-size:44px; position: relative; top: -3px;">⌅</button>
|
||||
<button id="home-button" onclick="location.href='Test_5-navigate.html'" style="font-size:25px; position: relative; top: -2px;">🏠︎</button>
|
||||
|
||||
<span style="
|
||||
font-size:18px;
|
||||
color: var(--text-color-accent);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
">
|
||||
<a href="Test_5-navigate_mfg.html" style="text-decoration:none;color:inherit;">mfg</a>/<wbr><a href="Test_5-navigate_mfg_jlcpcb.html" style="text-decoration:none;color:inherit;">jlcpcb</a>/<wbr><a href="Test_5-navigate_mfg_jlcpcb_gerbers.html" style="text-decoration:none;color:inherit;">gerbers</a>
|
||||
</span>
|
||||
</div>
|
||||
<div style="text-align: center; flex: 1; min-width: 200px;">
|
||||
<a href="https://git.asymworks.com/jkrauss/Test_5" style="text-decoration: none; color: inherit;">
|
||||
<span style="font-size:30px;">A99-9000 (Assembly Name)</span>
|
||||
</a>
|
||||
|
||||
<div style="
|
||||
font-size:14px;
|
||||
color: var(--text-color-accent);
|
||||
margin-top: 5px;">
|
||||
Asymworks, LLC
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; flex: 1; justify-content: flex-end; min-width: 0; gap: 10px; padding-right: 10px;">
|
||||
|
||||
<div style="
|
||||
text-align: left;
|
||||
font-size:14px;
|
||||
margin-right: 10px;
|
||||
color: var(--text-color-accent);">
|
||||
<div style="margin-bottom: 5px;">Rev. NO_TAG+ (Unreleased)</div>
|
||||
<div>Variant: </div>
|
||||
</div>
|
||||
<img src="images/logo.png" alt="Logo" style="max-height: 40px; max-width: 74.0px;">
|
||||
|
||||
<label class="theme-switch" style="
|
||||
position: relative;
|
||||
margin-right: 10px; /* Move toggle slightly left */
|
||||
max-width: 100%; /* Prevent overflow */
|
||||
">
|
||||
<input type="checkbox" id="themeToggle" onchange="toggleTheme()">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div class="output-virtual-box" id="jlcpcb_gerbers">
|
||||
<div class="output-comment">Gerbers in GBR format for JLCPCB</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/jlcpcb/gerbers/Test_5-F_Cu.gtl'">
|
||||
<img src="images/file_gbr_64.png" alt="Test_5-F_Cu.gtl" width="64" height="64">
|
||||
<p class="filename">Test_5-F_Cu.gtl</p>
|
||||
<p class="output-name">jlcpcb_gerbers</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/jlcpcb/gerbers/Test_5-In1_Cu.g1'">
|
||||
<img src="images/file_gbr_64.png" alt="Test_5-In1_Cu.g1" width="64" height="64">
|
||||
<p class="filename">Test_5-In1_Cu.g1</p>
|
||||
<p class="output-name">jlcpcb_gerbers</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/jlcpcb/gerbers/Test_5-In2_Cu.g2'">
|
||||
<img src="images/file_gbr_64.png" alt="Test_5-In2_Cu.g2" width="64" height="64">
|
||||
<p class="filename">Test_5-In2_Cu.g2</p>
|
||||
<p class="output-name">jlcpcb_gerbers</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/jlcpcb/gerbers/Test_5-B_Cu.gbl'">
|
||||
<img src="images/file_gbr_64.png" alt="Test_5-B_Cu.gbl" width="64" height="64">
|
||||
<p class="filename">Test_5-B_Cu.gbl</p>
|
||||
<p class="output-name">jlcpcb_gerbers</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/jlcpcb/gerbers/Test_5-Edge_Cuts.gm1'">
|
||||
<img src="images/file_gbr_64.png" alt="Test_5-Edge_Cuts.gm1" width="64" height="64">
|
||||
<p class="filename">Test_5-Edge_Cuts.gm1</p>
|
||||
<p class="output-name">jlcpcb_gerbers</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/jlcpcb/gerbers/Test_5-F_Silkscreen.gto'">
|
||||
<img src="images/file_gbr_64.png" alt="Test_5-F_Silkscreen.gto" width="64" height="64">
|
||||
<p class="filename">Test_5-F_Silkscreen.gto</p>
|
||||
<p class="output-name">jlcpcb_gerbers</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/jlcpcb/gerbers/Test_5-F_Mask.gts'">
|
||||
<img src="images/file_gbr_64.png" alt="Test_5-F_Mask.gts" width="64" height="64">
|
||||
<p class="filename">Test_5-F_Mask.gts</p>
|
||||
<p class="output-name">jlcpcb_gerbers</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/jlcpcb/gerbers/Test_5-F_Paste.gtp'">
|
||||
<img src="images/file_gbr_64.png" alt="Test_5-F_Paste.gtp" width="64" height="64">
|
||||
<p class="filename">Test_5-F_Paste.gtp</p>
|
||||
<p class="output-name">jlcpcb_gerbers</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/jlcpcb/gerbers/Test_5-B_Silkscreen.gbo'">
|
||||
<img src="images/file_gbr_64.png" alt="Test_5-B_Silkscreen.gbo" width="64" height="64">
|
||||
<p class="filename">Test_5-B_Silkscreen.gbo</p>
|
||||
<p class="output-name">jlcpcb_gerbers</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/jlcpcb/gerbers/Test_5-B_Mask.gbs'">
|
||||
<img src="images/file_gbr_64.png" alt="Test_5-B_Mask.gbs" width="64" height="64">
|
||||
<p class="filename">Test_5-B_Mask.gbs</p>
|
||||
<p class="output-name">jlcpcb_gerbers</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box " onclick="location.href='../mfg/jlcpcb/gerbers/Test_5-B_Paste.gbp'">
|
||||
<img src="images/unknown_64.png" alt="Test_5-B_Paste.gbp" width="64" height="64">
|
||||
<p class="filename">Test_5-B_Paste.gbp</p>
|
||||
<p class="output-name">jlcpcb_gerbers</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// Side Navigation functions ===================================================
|
||||
|
||||
function openNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "360px";
|
||||
navbar.style.paddingLeft = "20px";
|
||||
main.style.marginLeft = "360px";
|
||||
document.getElementById("open-navbar").style.display = "none";
|
||||
document.getElementById("close-navbar").style.display = "inline-block";
|
||||
}
|
||||
|
||||
function closeNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "0"; // Close the navbar
|
||||
navbar.style.paddingLeft = "0"; // Reset padding
|
||||
main.style.marginLeft = "0"; // Reset page content position
|
||||
document.getElementById("open-navbar").style.display = "inline-block";
|
||||
document.getElementById("close-navbar").style.display = "none";
|
||||
}
|
||||
|
||||
function toggleFolder(folderHeader) {
|
||||
const folder = folderHeader.parentElement;
|
||||
const folderContents = folderHeader.nextElementSibling;
|
||||
|
||||
if (folder.classList.contains("open")) {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
} else {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
}
|
||||
|
||||
// Save the updated state
|
||||
saveSideNavState();
|
||||
}
|
||||
|
||||
function saveSideNavState() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const isOpen = navbar.style.width !== "0px"; // Check if navbar is open
|
||||
|
||||
// Save the state of each folder
|
||||
const folderStates = Array.from(document.querySelectorAll(".folder")).map(folder => ({
|
||||
id: folder.querySelector("span").textContent.trim(), // Use folder name as identifier
|
||||
isOpen: folder.classList.contains("open") // Check if folder is open
|
||||
}));
|
||||
|
||||
// Save the navbar and folder states to localStorage
|
||||
localStorage.setItem("navbarState", JSON.stringify({ isOpen, folderStates }));
|
||||
}
|
||||
|
||||
function restorenavbarState() {
|
||||
const savedState = localStorage.getItem("navbarState");
|
||||
if (savedState) {
|
||||
const { isOpen, folderStates } = JSON.parse(savedState);
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
// Temporarily disable animations on page load so elements don't move
|
||||
navbar.style.transition = "none";
|
||||
main.style.transition = "none";
|
||||
const chevrons = document.querySelectorAll(".chevron");
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "none";
|
||||
});
|
||||
|
||||
// Restore side navigation state
|
||||
if (isOpen) {
|
||||
openNav()
|
||||
} else {
|
||||
closeNav()
|
||||
}
|
||||
|
||||
// Restore folder open/closed states
|
||||
folderStates.forEach(({ id, isOpen }) => {
|
||||
const folder = Array.from(document.querySelectorAll(".folder"))
|
||||
.find(folder => folder.querySelector("span").textContent.trim() === id);
|
||||
|
||||
if (folder) {
|
||||
const folderContents = folder.querySelector(".folder-contents");
|
||||
if (isOpen) {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
} else {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Re-enable animation
|
||||
setTimeout(() => {
|
||||
navbar.style.transition = "";
|
||||
main.style.transition = "";
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "";
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function saveSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const scrollPosition = navbar.scrollTop;
|
||||
localStorage.setItem("navbarScrollPosition", scrollPosition);
|
||||
}
|
||||
|
||||
function restoreSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const savedPosition = localStorage.getItem("navbarScrollPosition");
|
||||
if (savedPosition !== null) {
|
||||
navbar.scrollTop = parseInt(savedPosition, 10);
|
||||
}
|
||||
}
|
||||
|
||||
function adjustSidenavOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
adjustSidenavOffset();
|
||||
window.addEventListener("resize", adjustSidenavOffset);
|
||||
|
||||
/* This is the scrolling offset when we click on an output in the side navigation bar
|
||||
It should take into account the top menu height */
|
||||
function adjustOutputOffset() {
|
||||
const topMenu = document.getElementById("topmenu"); // Replace with your top menu's ID
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight; // Dynamically get the top menu height
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", adjustOutputOffset);
|
||||
window.addEventListener("resize", adjustOutputOffset);
|
||||
|
||||
// Prevent flickering on page navigation
|
||||
window.addEventListener("beforeunload", () => {
|
||||
saveSideNavState();
|
||||
saveSidenavScrollPosition();
|
||||
});
|
||||
|
||||
window.addEventListener("load", restoreSidenavScrollPosition);
|
||||
document.addEventListener("DOMContentLoaded", restorenavbarState);
|
||||
|
||||
function initializeSearchBar(searchContainerId, outputSelector) {
|
||||
const searchContainer = document.getElementById(searchContainerId);
|
||||
if (!searchContainer) return; // Exit if container is not found
|
||||
|
||||
const searchBar = searchContainer.querySelector('#search-bar');
|
||||
const autocompleteList = searchContainer.querySelector('#autocomplete-list');
|
||||
const outputLinks = document.querySelectorAll(outputSelector);
|
||||
|
||||
// Collect output names and their hrefs
|
||||
const outputs = Array.from(outputLinks).map(link => ({
|
||||
name: link.textContent.trim(),
|
||||
href: link.getAttribute("href"),
|
||||
}));
|
||||
|
||||
let highlightedIndex = -1; // Index of the currently highlighted item
|
||||
|
||||
function adjustAutocompleteWidth() {
|
||||
const searchBarWidth = searchBar.offsetWidth;
|
||||
autocompleteList.style.width = `${searchBarWidth}px`;
|
||||
}
|
||||
|
||||
function updateAutocomplete(query) {
|
||||
autocompleteList.innerHTML = ""; // Clear suggestions
|
||||
highlightedIndex = -1; // Reset highlighting
|
||||
|
||||
const matches = outputs.filter(output =>
|
||||
output.name.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
|
||||
matches.forEach(match => {
|
||||
const listItem = document.createElement("li");
|
||||
listItem.textContent = match.name;
|
||||
listItem.addEventListener("click", () => {
|
||||
window.location.href = match.href;
|
||||
});
|
||||
autocompleteList.appendChild(listItem);
|
||||
});
|
||||
|
||||
autocompleteList.style.display = matches.length ? "block" : "none";
|
||||
}
|
||||
|
||||
function highlightItem(index) {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
items.forEach((item, i) => {
|
||||
if (i === index) {
|
||||
item.classList.add("highlighted");
|
||||
item.scrollIntoView({ block: "nearest" });
|
||||
} else {
|
||||
item.classList.remove("highlighted");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listeners for search bar input and keydown
|
||||
searchBar.addEventListener("input", () => {
|
||||
const query = searchBar.value.trim();
|
||||
if (query) updateAutocomplete(query);
|
||||
else {
|
||||
autocompleteList.innerHTML = "";
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
searchBar.addEventListener("keydown", (event) => {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
if (!items.length) return;
|
||||
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex + 1) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex - 1 + items.length) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "Enter" && highlightedIndex >= 0) {
|
||||
event.preventDefault();
|
||||
items[highlightedIndex].click();
|
||||
}
|
||||
});
|
||||
|
||||
// Hide suggestions when clicking outside
|
||||
document.addEventListener("click", (event) => {
|
||||
if (!searchBar.contains(event.target) && !autocompleteList.contains(event.target)) {
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
// Adjust width on window resize
|
||||
adjustAutocompleteWidth();
|
||||
window.addEventListener("resize", adjustAutocompleteWidth);
|
||||
}
|
||||
|
||||
// Initialize search functionality
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
initializeSearchBar("search-container", ".navbar-output");
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const md = window.markdownit({
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true
|
||||
});
|
||||
|
||||
// Find all markdown containers and render them
|
||||
document.querySelectorAll('.markdown-content').forEach(container => {
|
||||
const rawMarkdown = container.innerHTML;
|
||||
container.style.display = 'block';
|
||||
container.innerHTML = md.render(rawMarkdown);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Theme toggle ================================================================
|
||||
|
||||
function toggleTheme() {
|
||||
const body = document.body;
|
||||
|
||||
// Check if the current theme is dark
|
||||
const isDark = body.classList.contains('dark-mode');
|
||||
|
||||
// Toggle between dark and light themes
|
||||
if (isDark) {
|
||||
body.classList.remove('dark-mode');
|
||||
body.classList.add('light-mode');
|
||||
} else {
|
||||
body.classList.remove('light-mode');
|
||||
body.classList.add('dark-mode');
|
||||
}
|
||||
|
||||
// Save the selected theme to localStorage
|
||||
localStorage.setItem('theme', isDark ? 'light' : 'dark');
|
||||
}
|
||||
|
||||
// Do not animate theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
const toggleSpan = themeToggle.nextElementSibling; // The <span> element
|
||||
|
||||
// Prevent animation on page load
|
||||
const savedTheme = localStorage.getItem('theme') || 'dark';
|
||||
document.body.classList.add(savedTheme === 'dark' ? 'dark-mode' : 'light-mode');
|
||||
themeToggle.checked = savedTheme === 'dark';
|
||||
|
||||
// Add the "animate" class on user interaction
|
||||
themeToggle.addEventListener('change', () => {
|
||||
toggleSpan.classList.add('animate');
|
||||
setTimeout(() => {
|
||||
toggleSpan.classList.remove('animate'); // Remove the animation class after completion
|
||||
}, 400); // Match the CSS transition duration (0.4s)
|
||||
});
|
||||
});
|
||||
|
||||
// Avoid flickering of theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const body = document.body;
|
||||
|
||||
// Temporarily disable transitions during page load
|
||||
body.classList.add('no-transition');
|
||||
|
||||
// Remove the no-transition class after the page is fully loaded
|
||||
setTimeout(() => {
|
||||
body.classList.remove('no-transition');
|
||||
}, 50); // Allow rendering to complete before enabling transitions
|
||||
});
|
||||
|
||||
function adjustMainBodyOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const mainBody = document.getElementById("main");
|
||||
|
||||
if (topMenu && mainBody) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
mainBody.style.marginTop = `${topMenuHeight}px`;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply the adjustment on page load and window resize
|
||||
window.addEventListener("DOMContentLoaded", adjustMainBodyOffset);
|
||||
window.addEventListener("resize", adjustMainBodyOffset);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
578
html/Test_5-navigate_models.html
Normal file
578
html/Test_5-navigate_models.html
Normal file
@@ -0,0 +1,578 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>/models</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<script src="markdown-it.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="theSideNav" class="navbar">
|
||||
<!-- Search bar container -->
|
||||
<div id="search-container">
|
||||
<input type="text" id="search-bar" placeholder="Search outputs..." autocomplete="off">
|
||||
<ul id="autocomplete-list"></ul>
|
||||
</div>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> reports</span>
|
||||
<ul id='folder-test_5-navigate-reports' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_reports.html#erc' class='navbar-output'>erc</a></li>
|
||||
<li><a href='Test_5-navigate_reports.html#drc' class='navbar-output'>drc</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> schematic</span>
|
||||
<ul id='folder-test_5-navigate-schematic' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_schematic.html#pdf_schematic' class='navbar-output'>pdf_schematic</a></li>
|
||||
<li><a href='Test_5-navigate_schematic.html#txt_schematic_notes' class='navbar-output'>txt_schematic_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> mfg</span>
|
||||
<ul id='folder-test_5-navigate-mfg' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> assembly</span>
|
||||
<ul id='folder-test_5-navigate_mfg-assembly' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_bom' class='navbar-output'>csv_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom' class='navbar-output'>html_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom_interactive' class='navbar-output'>html_bom_interactive</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_position' class='navbar-output'>csv_position</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#pdf_assembly' class='navbar-output'>pdf_assembly</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_comp_count' class='navbar-output'>csv_comp_count</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#txt_assembly_notes' class='navbar-output'>txt_assembly_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> fab</span>
|
||||
<ul id='folder-test_5-navigate_mfg-fab' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#gbr_gerbers' class='navbar-output'>gbr_gerbers</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#drl_excellon' class='navbar-output'>drl_excellon</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#pdf_drill_map' class='navbar-output'>pdf_drill_map</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_odb' class='navbar-output'>zip_odb</a></li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> drill-tables</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-drill-tables' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_drill-tables.html#csv_drill_table' class='navbar-output'>csv_drill_table</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#pdf_fabrication' class='navbar-output'>pdf_fabrication</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_compress_fab' class='navbar-output'>zip_compress_fab</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#csv_impedance_table' class='navbar-output'>csv_impedance_table</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#txt_fabrication_notes' class='navbar-output'>txt_fabrication_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> jlcpcb</span>
|
||||
<ul id='folder-test_5-navigate_mfg-jlcpcb' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_jlcpcb-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb_gerbers.html#jlcpcb_gerbers' class='navbar-output'>jlcpcb_gerbers</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_fabpack' class='navbar-output'>jlcpcb_fabpack</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_bom' class='navbar-output'>jlcpcb_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_cpl' class='navbar-output'>jlcpcb_cpl</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> kiri</span>
|
||||
<ul id='folder-test_5-navigate-kiri' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_kiri.html#html_kiri' class='navbar-output'>html_kiri</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> renders</span>
|
||||
<ul id='folder-test_5-navigate-renders' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_top' class='navbar-output'>pcbdraw_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_bottom' class='navbar-output'>pcbdraw_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_top' class='navbar-output'>png_3d_viewer_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_bottom' class='navbar-output'>png_3d_viewer_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_top' class='navbar-output'>png_3d_viewer_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_bottom' class='navbar-output'>png_3d_viewer_angled_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_top' class='navbar-output'>blender_3d_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_bottom' class='navbar-output'>blender_3d_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_top' class='navbar-output'>blender_3d_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_bottom' class='navbar-output'>blender_3d_angled_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> models</span>
|
||||
<ul id='folder-test_5-navigate-models' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_models.html#step' class='navbar-output'>step</a></li>
|
||||
<li><a href='Test_5-navigate_models.html#glb' class='navbar-output'>glb</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> test</span>
|
||||
<ul id='folder-test_5-navigate-test' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> testpoints</span>
|
||||
<ul id='folder-test_5-navigate_test-testpoints' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints' class='navbar-output'>csv_testpoints</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_top' class='navbar-output'>csv_testpoints_top</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_bottom' class='navbar-output'>csv_testpoints_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panels</span>
|
||||
<ul id='folder-test_5-navigate-panels' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panel-800</span>
|
||||
<ul id='folder-test_5-navigate_panels-panel-800' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_panels_panel-800.html#panel_801' class='navbar-output'>panel_801</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="topmenu" class="topmenu">
|
||||
<div style="display: flex; align-items: center; flex: 1; min-width: 0; gap: 10px;">
|
||||
<span id="open-navbar" style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
|
||||
<span id="close-navbar" style="font-size:30px;cursor:pointer;display:none;" onclick="closeNav()">⨉</span>
|
||||
<button id="back-button" onclick="history.back()" style="font-size:30px;">↩</button>
|
||||
<button id="forward-button" onclick="history.forward()" style="font-size:30px;">↪</button>
|
||||
<button id="up-button" onclick="location.href='Test_5-navigate.html'" style="font-size:44px; position: relative; top: -3px;">⌅</button>
|
||||
<button id="home-button" onclick="location.href='Test_5-navigate.html'" style="font-size:25px; position: relative; top: -2px;">🏠︎</button>
|
||||
|
||||
<span style="
|
||||
font-size:18px;
|
||||
color: var(--text-color-accent);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
">
|
||||
<a href="Test_5-navigate_models.html" style="text-decoration:none;color:inherit;">models</a>
|
||||
</span>
|
||||
</div>
|
||||
<div style="text-align: center; flex: 1; min-width: 200px;">
|
||||
<a href="https://git.asymworks.com/jkrauss/Test_5" style="text-decoration: none; color: inherit;">
|
||||
<span style="font-size:30px;">A99-9000 (Assembly Name)</span>
|
||||
</a>
|
||||
|
||||
<div style="
|
||||
font-size:14px;
|
||||
color: var(--text-color-accent);
|
||||
margin-top: 5px;">
|
||||
Asymworks, LLC
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; flex: 1; justify-content: flex-end; min-width: 0; gap: 10px; padding-right: 10px;">
|
||||
|
||||
<div style="
|
||||
text-align: left;
|
||||
font-size:14px;
|
||||
margin-right: 10px;
|
||||
color: var(--text-color-accent);">
|
||||
<div style="margin-bottom: 5px;">Rev. NO_TAG+ (Unreleased)</div>
|
||||
<div>Variant: </div>
|
||||
</div>
|
||||
<img src="images/logo.png" alt="Logo" style="max-height: 40px; max-width: 74.0px;">
|
||||
|
||||
<label class="theme-switch" style="
|
||||
position: relative;
|
||||
margin-right: 10px; /* Move toggle slightly left */
|
||||
max-width: 100%; /* Prevent overflow */
|
||||
">
|
||||
<input type="checkbox" id="themeToggle" onchange="toggleTheme()">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div class="output-virtual-box" id="step">
|
||||
<div class="output-comment">PCB 3D model in STEP format</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../models/Test_5-step.step'">
|
||||
<img src="images/file_stp_64.png" alt="Test_5-step.step" width="64" height="64">
|
||||
<p class="filename">Test_5-step.step</p>
|
||||
<p class="output-name">step</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="glb">
|
||||
<div class="output-comment">PCB 3D model in GLB/gITF format</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../models/Test_5-glb.glb'">
|
||||
<img src="images/file_glb_64.png" alt="Test_5-glb.glb" width="64" height="64">
|
||||
<p class="filename">Test_5-glb.glb</p>
|
||||
<p class="output-name">glb</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// Side Navigation functions ===================================================
|
||||
|
||||
function openNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "360px";
|
||||
navbar.style.paddingLeft = "20px";
|
||||
main.style.marginLeft = "360px";
|
||||
document.getElementById("open-navbar").style.display = "none";
|
||||
document.getElementById("close-navbar").style.display = "inline-block";
|
||||
}
|
||||
|
||||
function closeNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "0"; // Close the navbar
|
||||
navbar.style.paddingLeft = "0"; // Reset padding
|
||||
main.style.marginLeft = "0"; // Reset page content position
|
||||
document.getElementById("open-navbar").style.display = "inline-block";
|
||||
document.getElementById("close-navbar").style.display = "none";
|
||||
}
|
||||
|
||||
function toggleFolder(folderHeader) {
|
||||
const folder = folderHeader.parentElement;
|
||||
const folderContents = folderHeader.nextElementSibling;
|
||||
|
||||
if (folder.classList.contains("open")) {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
} else {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
}
|
||||
|
||||
// Save the updated state
|
||||
saveSideNavState();
|
||||
}
|
||||
|
||||
function saveSideNavState() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const isOpen = navbar.style.width !== "0px"; // Check if navbar is open
|
||||
|
||||
// Save the state of each folder
|
||||
const folderStates = Array.from(document.querySelectorAll(".folder")).map(folder => ({
|
||||
id: folder.querySelector("span").textContent.trim(), // Use folder name as identifier
|
||||
isOpen: folder.classList.contains("open") // Check if folder is open
|
||||
}));
|
||||
|
||||
// Save the navbar and folder states to localStorage
|
||||
localStorage.setItem("navbarState", JSON.stringify({ isOpen, folderStates }));
|
||||
}
|
||||
|
||||
function restorenavbarState() {
|
||||
const savedState = localStorage.getItem("navbarState");
|
||||
if (savedState) {
|
||||
const { isOpen, folderStates } = JSON.parse(savedState);
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
// Temporarily disable animations on page load so elements don't move
|
||||
navbar.style.transition = "none";
|
||||
main.style.transition = "none";
|
||||
const chevrons = document.querySelectorAll(".chevron");
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "none";
|
||||
});
|
||||
|
||||
// Restore side navigation state
|
||||
if (isOpen) {
|
||||
openNav()
|
||||
} else {
|
||||
closeNav()
|
||||
}
|
||||
|
||||
// Restore folder open/closed states
|
||||
folderStates.forEach(({ id, isOpen }) => {
|
||||
const folder = Array.from(document.querySelectorAll(".folder"))
|
||||
.find(folder => folder.querySelector("span").textContent.trim() === id);
|
||||
|
||||
if (folder) {
|
||||
const folderContents = folder.querySelector(".folder-contents");
|
||||
if (isOpen) {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
} else {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Re-enable animation
|
||||
setTimeout(() => {
|
||||
navbar.style.transition = "";
|
||||
main.style.transition = "";
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "";
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function saveSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const scrollPosition = navbar.scrollTop;
|
||||
localStorage.setItem("navbarScrollPosition", scrollPosition);
|
||||
}
|
||||
|
||||
function restoreSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const savedPosition = localStorage.getItem("navbarScrollPosition");
|
||||
if (savedPosition !== null) {
|
||||
navbar.scrollTop = parseInt(savedPosition, 10);
|
||||
}
|
||||
}
|
||||
|
||||
function adjustSidenavOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
adjustSidenavOffset();
|
||||
window.addEventListener("resize", adjustSidenavOffset);
|
||||
|
||||
/* This is the scrolling offset when we click on an output in the side navigation bar
|
||||
It should take into account the top menu height */
|
||||
function adjustOutputOffset() {
|
||||
const topMenu = document.getElementById("topmenu"); // Replace with your top menu's ID
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight; // Dynamically get the top menu height
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", adjustOutputOffset);
|
||||
window.addEventListener("resize", adjustOutputOffset);
|
||||
|
||||
// Prevent flickering on page navigation
|
||||
window.addEventListener("beforeunload", () => {
|
||||
saveSideNavState();
|
||||
saveSidenavScrollPosition();
|
||||
});
|
||||
|
||||
window.addEventListener("load", restoreSidenavScrollPosition);
|
||||
document.addEventListener("DOMContentLoaded", restorenavbarState);
|
||||
|
||||
function initializeSearchBar(searchContainerId, outputSelector) {
|
||||
const searchContainer = document.getElementById(searchContainerId);
|
||||
if (!searchContainer) return; // Exit if container is not found
|
||||
|
||||
const searchBar = searchContainer.querySelector('#search-bar');
|
||||
const autocompleteList = searchContainer.querySelector('#autocomplete-list');
|
||||
const outputLinks = document.querySelectorAll(outputSelector);
|
||||
|
||||
// Collect output names and their hrefs
|
||||
const outputs = Array.from(outputLinks).map(link => ({
|
||||
name: link.textContent.trim(),
|
||||
href: link.getAttribute("href"),
|
||||
}));
|
||||
|
||||
let highlightedIndex = -1; // Index of the currently highlighted item
|
||||
|
||||
function adjustAutocompleteWidth() {
|
||||
const searchBarWidth = searchBar.offsetWidth;
|
||||
autocompleteList.style.width = `${searchBarWidth}px`;
|
||||
}
|
||||
|
||||
function updateAutocomplete(query) {
|
||||
autocompleteList.innerHTML = ""; // Clear suggestions
|
||||
highlightedIndex = -1; // Reset highlighting
|
||||
|
||||
const matches = outputs.filter(output =>
|
||||
output.name.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
|
||||
matches.forEach(match => {
|
||||
const listItem = document.createElement("li");
|
||||
listItem.textContent = match.name;
|
||||
listItem.addEventListener("click", () => {
|
||||
window.location.href = match.href;
|
||||
});
|
||||
autocompleteList.appendChild(listItem);
|
||||
});
|
||||
|
||||
autocompleteList.style.display = matches.length ? "block" : "none";
|
||||
}
|
||||
|
||||
function highlightItem(index) {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
items.forEach((item, i) => {
|
||||
if (i === index) {
|
||||
item.classList.add("highlighted");
|
||||
item.scrollIntoView({ block: "nearest" });
|
||||
} else {
|
||||
item.classList.remove("highlighted");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listeners for search bar input and keydown
|
||||
searchBar.addEventListener("input", () => {
|
||||
const query = searchBar.value.trim();
|
||||
if (query) updateAutocomplete(query);
|
||||
else {
|
||||
autocompleteList.innerHTML = "";
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
searchBar.addEventListener("keydown", (event) => {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
if (!items.length) return;
|
||||
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex + 1) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex - 1 + items.length) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "Enter" && highlightedIndex >= 0) {
|
||||
event.preventDefault();
|
||||
items[highlightedIndex].click();
|
||||
}
|
||||
});
|
||||
|
||||
// Hide suggestions when clicking outside
|
||||
document.addEventListener("click", (event) => {
|
||||
if (!searchBar.contains(event.target) && !autocompleteList.contains(event.target)) {
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
// Adjust width on window resize
|
||||
adjustAutocompleteWidth();
|
||||
window.addEventListener("resize", adjustAutocompleteWidth);
|
||||
}
|
||||
|
||||
// Initialize search functionality
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
initializeSearchBar("search-container", ".navbar-output");
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const md = window.markdownit({
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true
|
||||
});
|
||||
|
||||
// Find all markdown containers and render them
|
||||
document.querySelectorAll('.markdown-content').forEach(container => {
|
||||
const rawMarkdown = container.innerHTML;
|
||||
container.style.display = 'block';
|
||||
container.innerHTML = md.render(rawMarkdown);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Theme toggle ================================================================
|
||||
|
||||
function toggleTheme() {
|
||||
const body = document.body;
|
||||
|
||||
// Check if the current theme is dark
|
||||
const isDark = body.classList.contains('dark-mode');
|
||||
|
||||
// Toggle between dark and light themes
|
||||
if (isDark) {
|
||||
body.classList.remove('dark-mode');
|
||||
body.classList.add('light-mode');
|
||||
} else {
|
||||
body.classList.remove('light-mode');
|
||||
body.classList.add('dark-mode');
|
||||
}
|
||||
|
||||
// Save the selected theme to localStorage
|
||||
localStorage.setItem('theme', isDark ? 'light' : 'dark');
|
||||
}
|
||||
|
||||
// Do not animate theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
const toggleSpan = themeToggle.nextElementSibling; // The <span> element
|
||||
|
||||
// Prevent animation on page load
|
||||
const savedTheme = localStorage.getItem('theme') || 'dark';
|
||||
document.body.classList.add(savedTheme === 'dark' ? 'dark-mode' : 'light-mode');
|
||||
themeToggle.checked = savedTheme === 'dark';
|
||||
|
||||
// Add the "animate" class on user interaction
|
||||
themeToggle.addEventListener('change', () => {
|
||||
toggleSpan.classList.add('animate');
|
||||
setTimeout(() => {
|
||||
toggleSpan.classList.remove('animate'); // Remove the animation class after completion
|
||||
}, 400); // Match the CSS transition duration (0.4s)
|
||||
});
|
||||
});
|
||||
|
||||
// Avoid flickering of theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const body = document.body;
|
||||
|
||||
// Temporarily disable transitions during page load
|
||||
body.classList.add('no-transition');
|
||||
|
||||
// Remove the no-transition class after the page is fully loaded
|
||||
setTimeout(() => {
|
||||
body.classList.remove('no-transition');
|
||||
}, 50); // Allow rendering to complete before enabling transitions
|
||||
});
|
||||
|
||||
function adjustMainBodyOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const mainBody = document.getElementById("main");
|
||||
|
||||
if (topMenu && mainBody) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
mainBody.style.marginTop = `${topMenuHeight}px`;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply the adjustment on page load and window resize
|
||||
window.addEventListener("DOMContentLoaded", adjustMainBodyOffset);
|
||||
window.addEventListener("resize", adjustMainBodyOffset);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
562
html/Test_5-navigate_panels.html
Normal file
562
html/Test_5-navigate_panels.html
Normal file
@@ -0,0 +1,562 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>/panels</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<script src="markdown-it.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="theSideNav" class="navbar">
|
||||
<!-- Search bar container -->
|
||||
<div id="search-container">
|
||||
<input type="text" id="search-bar" placeholder="Search outputs..." autocomplete="off">
|
||||
<ul id="autocomplete-list"></ul>
|
||||
</div>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> reports</span>
|
||||
<ul id='folder-test_5-navigate-reports' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_reports.html#erc' class='navbar-output'>erc</a></li>
|
||||
<li><a href='Test_5-navigate_reports.html#drc' class='navbar-output'>drc</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> schematic</span>
|
||||
<ul id='folder-test_5-navigate-schematic' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_schematic.html#pdf_schematic' class='navbar-output'>pdf_schematic</a></li>
|
||||
<li><a href='Test_5-navigate_schematic.html#txt_schematic_notes' class='navbar-output'>txt_schematic_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> mfg</span>
|
||||
<ul id='folder-test_5-navigate-mfg' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> assembly</span>
|
||||
<ul id='folder-test_5-navigate_mfg-assembly' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_bom' class='navbar-output'>csv_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom' class='navbar-output'>html_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom_interactive' class='navbar-output'>html_bom_interactive</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_position' class='navbar-output'>csv_position</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#pdf_assembly' class='navbar-output'>pdf_assembly</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_comp_count' class='navbar-output'>csv_comp_count</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#txt_assembly_notes' class='navbar-output'>txt_assembly_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> fab</span>
|
||||
<ul id='folder-test_5-navigate_mfg-fab' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#gbr_gerbers' class='navbar-output'>gbr_gerbers</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#drl_excellon' class='navbar-output'>drl_excellon</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#pdf_drill_map' class='navbar-output'>pdf_drill_map</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_odb' class='navbar-output'>zip_odb</a></li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> drill-tables</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-drill-tables' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_drill-tables.html#csv_drill_table' class='navbar-output'>csv_drill_table</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#pdf_fabrication' class='navbar-output'>pdf_fabrication</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_compress_fab' class='navbar-output'>zip_compress_fab</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#csv_impedance_table' class='navbar-output'>csv_impedance_table</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#txt_fabrication_notes' class='navbar-output'>txt_fabrication_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> jlcpcb</span>
|
||||
<ul id='folder-test_5-navigate_mfg-jlcpcb' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_jlcpcb-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb_gerbers.html#jlcpcb_gerbers' class='navbar-output'>jlcpcb_gerbers</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_fabpack' class='navbar-output'>jlcpcb_fabpack</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_bom' class='navbar-output'>jlcpcb_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_cpl' class='navbar-output'>jlcpcb_cpl</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> kiri</span>
|
||||
<ul id='folder-test_5-navigate-kiri' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_kiri.html#html_kiri' class='navbar-output'>html_kiri</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> renders</span>
|
||||
<ul id='folder-test_5-navigate-renders' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_top' class='navbar-output'>pcbdraw_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_bottom' class='navbar-output'>pcbdraw_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_top' class='navbar-output'>png_3d_viewer_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_bottom' class='navbar-output'>png_3d_viewer_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_top' class='navbar-output'>png_3d_viewer_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_bottom' class='navbar-output'>png_3d_viewer_angled_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_top' class='navbar-output'>blender_3d_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_bottom' class='navbar-output'>blender_3d_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_top' class='navbar-output'>blender_3d_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_bottom' class='navbar-output'>blender_3d_angled_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> models</span>
|
||||
<ul id='folder-test_5-navigate-models' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_models.html#step' class='navbar-output'>step</a></li>
|
||||
<li><a href='Test_5-navigate_models.html#glb' class='navbar-output'>glb</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> test</span>
|
||||
<ul id='folder-test_5-navigate-test' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> testpoints</span>
|
||||
<ul id='folder-test_5-navigate_test-testpoints' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints' class='navbar-output'>csv_testpoints</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_top' class='navbar-output'>csv_testpoints_top</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_bottom' class='navbar-output'>csv_testpoints_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panels</span>
|
||||
<ul id='folder-test_5-navigate-panels' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panel-800</span>
|
||||
<ul id='folder-test_5-navigate_panels-panel-800' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_panels_panel-800.html#panel_801' class='navbar-output'>panel_801</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="topmenu" class="topmenu">
|
||||
<div style="display: flex; align-items: center; flex: 1; min-width: 0; gap: 10px;">
|
||||
<span id="open-navbar" style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
|
||||
<span id="close-navbar" style="font-size:30px;cursor:pointer;display:none;" onclick="closeNav()">⨉</span>
|
||||
<button id="back-button" onclick="history.back()" style="font-size:30px;">↩</button>
|
||||
<button id="forward-button" onclick="history.forward()" style="font-size:30px;">↪</button>
|
||||
<button id="up-button" onclick="location.href='Test_5-navigate.html'" style="font-size:44px; position: relative; top: -3px;">⌅</button>
|
||||
<button id="home-button" onclick="location.href='Test_5-navigate.html'" style="font-size:25px; position: relative; top: -2px;">🏠︎</button>
|
||||
|
||||
<span style="
|
||||
font-size:18px;
|
||||
color: var(--text-color-accent);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
">
|
||||
<a href="Test_5-navigate_panels.html" style="text-decoration:none;color:inherit;">panels</a>
|
||||
</span>
|
||||
</div>
|
||||
<div style="text-align: center; flex: 1; min-width: 200px;">
|
||||
<a href="https://git.asymworks.com/jkrauss/Test_5" style="text-decoration: none; color: inherit;">
|
||||
<span style="font-size:30px;">A99-9000 (Assembly Name)</span>
|
||||
</a>
|
||||
|
||||
<div style="
|
||||
font-size:14px;
|
||||
color: var(--text-color-accent);
|
||||
margin-top: 5px;">
|
||||
Asymworks, LLC
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; flex: 1; justify-content: flex-end; min-width: 0; gap: 10px; padding-right: 10px;">
|
||||
|
||||
<div style="
|
||||
text-align: left;
|
||||
font-size:14px;
|
||||
margin-right: 10px;
|
||||
color: var(--text-color-accent);">
|
||||
<div style="margin-bottom: 5px;">Rev. NO_TAG+ (Unreleased)</div>
|
||||
<div>Variant: </div>
|
||||
</div>
|
||||
<img src="images/logo.png" alt="Logo" style="max-height: 40px; max-width: 74.0px;">
|
||||
|
||||
<label class="theme-switch" style="
|
||||
position: relative;
|
||||
margin-right: 10px; /* Move toggle slightly left */
|
||||
max-width: 100%; /* Prevent overflow */
|
||||
">
|
||||
<input type="checkbox" id="themeToggle" onchange="toggleTheme()">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div class="items-container">
|
||||
<div>
|
||||
<div class="category-box" onclick="location.href='Test_5-navigate_panels_panel-800.html'">
|
||||
<p class="category-title">panel-800</p>
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
<script>
|
||||
|
||||
// Side Navigation functions ===================================================
|
||||
|
||||
function openNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "360px";
|
||||
navbar.style.paddingLeft = "20px";
|
||||
main.style.marginLeft = "360px";
|
||||
document.getElementById("open-navbar").style.display = "none";
|
||||
document.getElementById("close-navbar").style.display = "inline-block";
|
||||
}
|
||||
|
||||
function closeNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "0"; // Close the navbar
|
||||
navbar.style.paddingLeft = "0"; // Reset padding
|
||||
main.style.marginLeft = "0"; // Reset page content position
|
||||
document.getElementById("open-navbar").style.display = "inline-block";
|
||||
document.getElementById("close-navbar").style.display = "none";
|
||||
}
|
||||
|
||||
function toggleFolder(folderHeader) {
|
||||
const folder = folderHeader.parentElement;
|
||||
const folderContents = folderHeader.nextElementSibling;
|
||||
|
||||
if (folder.classList.contains("open")) {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
} else {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
}
|
||||
|
||||
// Save the updated state
|
||||
saveSideNavState();
|
||||
}
|
||||
|
||||
function saveSideNavState() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const isOpen = navbar.style.width !== "0px"; // Check if navbar is open
|
||||
|
||||
// Save the state of each folder
|
||||
const folderStates = Array.from(document.querySelectorAll(".folder")).map(folder => ({
|
||||
id: folder.querySelector("span").textContent.trim(), // Use folder name as identifier
|
||||
isOpen: folder.classList.contains("open") // Check if folder is open
|
||||
}));
|
||||
|
||||
// Save the navbar and folder states to localStorage
|
||||
localStorage.setItem("navbarState", JSON.stringify({ isOpen, folderStates }));
|
||||
}
|
||||
|
||||
function restorenavbarState() {
|
||||
const savedState = localStorage.getItem("navbarState");
|
||||
if (savedState) {
|
||||
const { isOpen, folderStates } = JSON.parse(savedState);
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
// Temporarily disable animations on page load so elements don't move
|
||||
navbar.style.transition = "none";
|
||||
main.style.transition = "none";
|
||||
const chevrons = document.querySelectorAll(".chevron");
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "none";
|
||||
});
|
||||
|
||||
// Restore side navigation state
|
||||
if (isOpen) {
|
||||
openNav()
|
||||
} else {
|
||||
closeNav()
|
||||
}
|
||||
|
||||
// Restore folder open/closed states
|
||||
folderStates.forEach(({ id, isOpen }) => {
|
||||
const folder = Array.from(document.querySelectorAll(".folder"))
|
||||
.find(folder => folder.querySelector("span").textContent.trim() === id);
|
||||
|
||||
if (folder) {
|
||||
const folderContents = folder.querySelector(".folder-contents");
|
||||
if (isOpen) {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
} else {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Re-enable animation
|
||||
setTimeout(() => {
|
||||
navbar.style.transition = "";
|
||||
main.style.transition = "";
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "";
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function saveSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const scrollPosition = navbar.scrollTop;
|
||||
localStorage.setItem("navbarScrollPosition", scrollPosition);
|
||||
}
|
||||
|
||||
function restoreSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const savedPosition = localStorage.getItem("navbarScrollPosition");
|
||||
if (savedPosition !== null) {
|
||||
navbar.scrollTop = parseInt(savedPosition, 10);
|
||||
}
|
||||
}
|
||||
|
||||
function adjustSidenavOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
adjustSidenavOffset();
|
||||
window.addEventListener("resize", adjustSidenavOffset);
|
||||
|
||||
/* This is the scrolling offset when we click on an output in the side navigation bar
|
||||
It should take into account the top menu height */
|
||||
function adjustOutputOffset() {
|
||||
const topMenu = document.getElementById("topmenu"); // Replace with your top menu's ID
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight; // Dynamically get the top menu height
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", adjustOutputOffset);
|
||||
window.addEventListener("resize", adjustOutputOffset);
|
||||
|
||||
// Prevent flickering on page navigation
|
||||
window.addEventListener("beforeunload", () => {
|
||||
saveSideNavState();
|
||||
saveSidenavScrollPosition();
|
||||
});
|
||||
|
||||
window.addEventListener("load", restoreSidenavScrollPosition);
|
||||
document.addEventListener("DOMContentLoaded", restorenavbarState);
|
||||
|
||||
function initializeSearchBar(searchContainerId, outputSelector) {
|
||||
const searchContainer = document.getElementById(searchContainerId);
|
||||
if (!searchContainer) return; // Exit if container is not found
|
||||
|
||||
const searchBar = searchContainer.querySelector('#search-bar');
|
||||
const autocompleteList = searchContainer.querySelector('#autocomplete-list');
|
||||
const outputLinks = document.querySelectorAll(outputSelector);
|
||||
|
||||
// Collect output names and their hrefs
|
||||
const outputs = Array.from(outputLinks).map(link => ({
|
||||
name: link.textContent.trim(),
|
||||
href: link.getAttribute("href"),
|
||||
}));
|
||||
|
||||
let highlightedIndex = -1; // Index of the currently highlighted item
|
||||
|
||||
function adjustAutocompleteWidth() {
|
||||
const searchBarWidth = searchBar.offsetWidth;
|
||||
autocompleteList.style.width = `${searchBarWidth}px`;
|
||||
}
|
||||
|
||||
function updateAutocomplete(query) {
|
||||
autocompleteList.innerHTML = ""; // Clear suggestions
|
||||
highlightedIndex = -1; // Reset highlighting
|
||||
|
||||
const matches = outputs.filter(output =>
|
||||
output.name.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
|
||||
matches.forEach(match => {
|
||||
const listItem = document.createElement("li");
|
||||
listItem.textContent = match.name;
|
||||
listItem.addEventListener("click", () => {
|
||||
window.location.href = match.href;
|
||||
});
|
||||
autocompleteList.appendChild(listItem);
|
||||
});
|
||||
|
||||
autocompleteList.style.display = matches.length ? "block" : "none";
|
||||
}
|
||||
|
||||
function highlightItem(index) {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
items.forEach((item, i) => {
|
||||
if (i === index) {
|
||||
item.classList.add("highlighted");
|
||||
item.scrollIntoView({ block: "nearest" });
|
||||
} else {
|
||||
item.classList.remove("highlighted");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listeners for search bar input and keydown
|
||||
searchBar.addEventListener("input", () => {
|
||||
const query = searchBar.value.trim();
|
||||
if (query) updateAutocomplete(query);
|
||||
else {
|
||||
autocompleteList.innerHTML = "";
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
searchBar.addEventListener("keydown", (event) => {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
if (!items.length) return;
|
||||
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex + 1) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex - 1 + items.length) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "Enter" && highlightedIndex >= 0) {
|
||||
event.preventDefault();
|
||||
items[highlightedIndex].click();
|
||||
}
|
||||
});
|
||||
|
||||
// Hide suggestions when clicking outside
|
||||
document.addEventListener("click", (event) => {
|
||||
if (!searchBar.contains(event.target) && !autocompleteList.contains(event.target)) {
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
// Adjust width on window resize
|
||||
adjustAutocompleteWidth();
|
||||
window.addEventListener("resize", adjustAutocompleteWidth);
|
||||
}
|
||||
|
||||
// Initialize search functionality
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
initializeSearchBar("search-container", ".navbar-output");
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const md = window.markdownit({
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true
|
||||
});
|
||||
|
||||
// Find all markdown containers and render them
|
||||
document.querySelectorAll('.markdown-content').forEach(container => {
|
||||
const rawMarkdown = container.innerHTML;
|
||||
container.style.display = 'block';
|
||||
container.innerHTML = md.render(rawMarkdown);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Theme toggle ================================================================
|
||||
|
||||
function toggleTheme() {
|
||||
const body = document.body;
|
||||
|
||||
// Check if the current theme is dark
|
||||
const isDark = body.classList.contains('dark-mode');
|
||||
|
||||
// Toggle between dark and light themes
|
||||
if (isDark) {
|
||||
body.classList.remove('dark-mode');
|
||||
body.classList.add('light-mode');
|
||||
} else {
|
||||
body.classList.remove('light-mode');
|
||||
body.classList.add('dark-mode');
|
||||
}
|
||||
|
||||
// Save the selected theme to localStorage
|
||||
localStorage.setItem('theme', isDark ? 'light' : 'dark');
|
||||
}
|
||||
|
||||
// Do not animate theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
const toggleSpan = themeToggle.nextElementSibling; // The <span> element
|
||||
|
||||
// Prevent animation on page load
|
||||
const savedTheme = localStorage.getItem('theme') || 'dark';
|
||||
document.body.classList.add(savedTheme === 'dark' ? 'dark-mode' : 'light-mode');
|
||||
themeToggle.checked = savedTheme === 'dark';
|
||||
|
||||
// Add the "animate" class on user interaction
|
||||
themeToggle.addEventListener('change', () => {
|
||||
toggleSpan.classList.add('animate');
|
||||
setTimeout(() => {
|
||||
toggleSpan.classList.remove('animate'); // Remove the animation class after completion
|
||||
}, 400); // Match the CSS transition duration (0.4s)
|
||||
});
|
||||
});
|
||||
|
||||
// Avoid flickering of theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const body = document.body;
|
||||
|
||||
// Temporarily disable transitions during page load
|
||||
body.classList.add('no-transition');
|
||||
|
||||
// Remove the no-transition class after the page is fully loaded
|
||||
setTimeout(() => {
|
||||
body.classList.remove('no-transition');
|
||||
}, 50); // Allow rendering to complete before enabling transitions
|
||||
});
|
||||
|
||||
function adjustMainBodyOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const mainBody = document.getElementById("main");
|
||||
|
||||
if (topMenu && mainBody) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
mainBody.style.marginTop = `${topMenuHeight}px`;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply the adjustment on page load and window resize
|
||||
window.addEventListener("DOMContentLoaded", adjustMainBodyOffset);
|
||||
window.addEventListener("resize", adjustMainBodyOffset);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
573
html/Test_5-navigate_panels_panel-800.html
Normal file
573
html/Test_5-navigate_panels_panel-800.html
Normal file
@@ -0,0 +1,573 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>/panels/panel-800</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<script src="markdown-it.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="theSideNav" class="navbar">
|
||||
<!-- Search bar container -->
|
||||
<div id="search-container">
|
||||
<input type="text" id="search-bar" placeholder="Search outputs..." autocomplete="off">
|
||||
<ul id="autocomplete-list"></ul>
|
||||
</div>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> reports</span>
|
||||
<ul id='folder-test_5-navigate-reports' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_reports.html#erc' class='navbar-output'>erc</a></li>
|
||||
<li><a href='Test_5-navigate_reports.html#drc' class='navbar-output'>drc</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> schematic</span>
|
||||
<ul id='folder-test_5-navigate-schematic' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_schematic.html#pdf_schematic' class='navbar-output'>pdf_schematic</a></li>
|
||||
<li><a href='Test_5-navigate_schematic.html#txt_schematic_notes' class='navbar-output'>txt_schematic_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> mfg</span>
|
||||
<ul id='folder-test_5-navigate-mfg' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> assembly</span>
|
||||
<ul id='folder-test_5-navigate_mfg-assembly' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_bom' class='navbar-output'>csv_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom' class='navbar-output'>html_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom_interactive' class='navbar-output'>html_bom_interactive</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_position' class='navbar-output'>csv_position</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#pdf_assembly' class='navbar-output'>pdf_assembly</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_comp_count' class='navbar-output'>csv_comp_count</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#txt_assembly_notes' class='navbar-output'>txt_assembly_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> fab</span>
|
||||
<ul id='folder-test_5-navigate_mfg-fab' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#gbr_gerbers' class='navbar-output'>gbr_gerbers</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#drl_excellon' class='navbar-output'>drl_excellon</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#pdf_drill_map' class='navbar-output'>pdf_drill_map</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_odb' class='navbar-output'>zip_odb</a></li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> drill-tables</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-drill-tables' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_drill-tables.html#csv_drill_table' class='navbar-output'>csv_drill_table</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#pdf_fabrication' class='navbar-output'>pdf_fabrication</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_compress_fab' class='navbar-output'>zip_compress_fab</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#csv_impedance_table' class='navbar-output'>csv_impedance_table</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#txt_fabrication_notes' class='navbar-output'>txt_fabrication_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> jlcpcb</span>
|
||||
<ul id='folder-test_5-navigate_mfg-jlcpcb' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_jlcpcb-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb_gerbers.html#jlcpcb_gerbers' class='navbar-output'>jlcpcb_gerbers</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_fabpack' class='navbar-output'>jlcpcb_fabpack</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_bom' class='navbar-output'>jlcpcb_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_cpl' class='navbar-output'>jlcpcb_cpl</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> kiri</span>
|
||||
<ul id='folder-test_5-navigate-kiri' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_kiri.html#html_kiri' class='navbar-output'>html_kiri</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> renders</span>
|
||||
<ul id='folder-test_5-navigate-renders' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_top' class='navbar-output'>pcbdraw_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_bottom' class='navbar-output'>pcbdraw_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_top' class='navbar-output'>png_3d_viewer_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_bottom' class='navbar-output'>png_3d_viewer_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_top' class='navbar-output'>png_3d_viewer_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_bottom' class='navbar-output'>png_3d_viewer_angled_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_top' class='navbar-output'>blender_3d_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_bottom' class='navbar-output'>blender_3d_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_top' class='navbar-output'>blender_3d_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_bottom' class='navbar-output'>blender_3d_angled_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> models</span>
|
||||
<ul id='folder-test_5-navigate-models' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_models.html#step' class='navbar-output'>step</a></li>
|
||||
<li><a href='Test_5-navigate_models.html#glb' class='navbar-output'>glb</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> test</span>
|
||||
<ul id='folder-test_5-navigate-test' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> testpoints</span>
|
||||
<ul id='folder-test_5-navigate_test-testpoints' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints' class='navbar-output'>csv_testpoints</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_top' class='navbar-output'>csv_testpoints_top</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_bottom' class='navbar-output'>csv_testpoints_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panels</span>
|
||||
<ul id='folder-test_5-navigate-panels' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panel-800</span>
|
||||
<ul id='folder-test_5-navigate_panels-panel-800' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_panels_panel-800.html#panel_801' class='navbar-output'>panel_801</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="topmenu" class="topmenu">
|
||||
<div style="display: flex; align-items: center; flex: 1; min-width: 0; gap: 10px;">
|
||||
<span id="open-navbar" style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
|
||||
<span id="close-navbar" style="font-size:30px;cursor:pointer;display:none;" onclick="closeNav()">⨉</span>
|
||||
<button id="back-button" onclick="history.back()" style="font-size:30px;">↩</button>
|
||||
<button id="forward-button" onclick="history.forward()" style="font-size:30px;">↪</button>
|
||||
<button id="up-button" onclick="location.href='Test_5-navigate_panels.html'" style="font-size:44px; position: relative; top: -3px;">⌅</button>
|
||||
<button id="home-button" onclick="location.href='Test_5-navigate.html'" style="font-size:25px; position: relative; top: -2px;">🏠︎</button>
|
||||
|
||||
<span style="
|
||||
font-size:18px;
|
||||
color: var(--text-color-accent);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
">
|
||||
<a href="Test_5-navigate_panels.html" style="text-decoration:none;color:inherit;">panels</a>/<wbr><a href="Test_5-navigate_panels_panel-800.html" style="text-decoration:none;color:inherit;">panel-800</a>
|
||||
</span>
|
||||
</div>
|
||||
<div style="text-align: center; flex: 1; min-width: 200px;">
|
||||
<a href="https://git.asymworks.com/jkrauss/Test_5" style="text-decoration: none; color: inherit;">
|
||||
<span style="font-size:30px;">A99-9000 (Assembly Name)</span>
|
||||
</a>
|
||||
|
||||
<div style="
|
||||
font-size:14px;
|
||||
color: var(--text-color-accent);
|
||||
margin-top: 5px;">
|
||||
Asymworks, LLC
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; flex: 1; justify-content: flex-end; min-width: 0; gap: 10px; padding-right: 10px;">
|
||||
|
||||
<div style="
|
||||
text-align: left;
|
||||
font-size:14px;
|
||||
margin-right: 10px;
|
||||
color: var(--text-color-accent);">
|
||||
<div style="margin-bottom: 5px;">Rev. NO_TAG+ (Unreleased)</div>
|
||||
<div>Variant: </div>
|
||||
</div>
|
||||
<img src="images/logo.png" alt="Logo" style="max-height: 40px; max-width: 74.0px;">
|
||||
|
||||
<label class="theme-switch" style="
|
||||
position: relative;
|
||||
margin-right: 10px; /* Move toggle slightly left */
|
||||
max-width: 100%; /* Prevent overflow */
|
||||
">
|
||||
<input type="checkbox" id="themeToggle" onchange="toggleTheme()">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div class="output-virtual-box" id="panel_801">
|
||||
<div class="output-comment">@COMMENT@</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../panels/panel-800/Test_5-panel_801.kicad_pcb'">
|
||||
<img src="images/pcbnew_64.png" alt="Test_5-panel_801.kicad_pcb" width="64" height="64">
|
||||
<p class="filename">Test_5-panel_801.kicad_pcb</p>
|
||||
<p class="output-name">panel_801</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box wide" onclick="location.href='../panels/panel-800/Test_5-panel_801.png'">
|
||||
<img src="images/cat_panel_801_Test_5-panel_801.png" alt="Test_5-panel_801.png" width="512" height="317">
|
||||
<p class="filename">Test_5-panel_801.png</p>
|
||||
<p class="output-name">panel_801</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// Side Navigation functions ===================================================
|
||||
|
||||
function openNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "360px";
|
||||
navbar.style.paddingLeft = "20px";
|
||||
main.style.marginLeft = "360px";
|
||||
document.getElementById("open-navbar").style.display = "none";
|
||||
document.getElementById("close-navbar").style.display = "inline-block";
|
||||
}
|
||||
|
||||
function closeNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "0"; // Close the navbar
|
||||
navbar.style.paddingLeft = "0"; // Reset padding
|
||||
main.style.marginLeft = "0"; // Reset page content position
|
||||
document.getElementById("open-navbar").style.display = "inline-block";
|
||||
document.getElementById("close-navbar").style.display = "none";
|
||||
}
|
||||
|
||||
function toggleFolder(folderHeader) {
|
||||
const folder = folderHeader.parentElement;
|
||||
const folderContents = folderHeader.nextElementSibling;
|
||||
|
||||
if (folder.classList.contains("open")) {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
} else {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
}
|
||||
|
||||
// Save the updated state
|
||||
saveSideNavState();
|
||||
}
|
||||
|
||||
function saveSideNavState() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const isOpen = navbar.style.width !== "0px"; // Check if navbar is open
|
||||
|
||||
// Save the state of each folder
|
||||
const folderStates = Array.from(document.querySelectorAll(".folder")).map(folder => ({
|
||||
id: folder.querySelector("span").textContent.trim(), // Use folder name as identifier
|
||||
isOpen: folder.classList.contains("open") // Check if folder is open
|
||||
}));
|
||||
|
||||
// Save the navbar and folder states to localStorage
|
||||
localStorage.setItem("navbarState", JSON.stringify({ isOpen, folderStates }));
|
||||
}
|
||||
|
||||
function restorenavbarState() {
|
||||
const savedState = localStorage.getItem("navbarState");
|
||||
if (savedState) {
|
||||
const { isOpen, folderStates } = JSON.parse(savedState);
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
// Temporarily disable animations on page load so elements don't move
|
||||
navbar.style.transition = "none";
|
||||
main.style.transition = "none";
|
||||
const chevrons = document.querySelectorAll(".chevron");
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "none";
|
||||
});
|
||||
|
||||
// Restore side navigation state
|
||||
if (isOpen) {
|
||||
openNav()
|
||||
} else {
|
||||
closeNav()
|
||||
}
|
||||
|
||||
// Restore folder open/closed states
|
||||
folderStates.forEach(({ id, isOpen }) => {
|
||||
const folder = Array.from(document.querySelectorAll(".folder"))
|
||||
.find(folder => folder.querySelector("span").textContent.trim() === id);
|
||||
|
||||
if (folder) {
|
||||
const folderContents = folder.querySelector(".folder-contents");
|
||||
if (isOpen) {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
} else {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Re-enable animation
|
||||
setTimeout(() => {
|
||||
navbar.style.transition = "";
|
||||
main.style.transition = "";
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "";
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function saveSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const scrollPosition = navbar.scrollTop;
|
||||
localStorage.setItem("navbarScrollPosition", scrollPosition);
|
||||
}
|
||||
|
||||
function restoreSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const savedPosition = localStorage.getItem("navbarScrollPosition");
|
||||
if (savedPosition !== null) {
|
||||
navbar.scrollTop = parseInt(savedPosition, 10);
|
||||
}
|
||||
}
|
||||
|
||||
function adjustSidenavOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
adjustSidenavOffset();
|
||||
window.addEventListener("resize", adjustSidenavOffset);
|
||||
|
||||
/* This is the scrolling offset when we click on an output in the side navigation bar
|
||||
It should take into account the top menu height */
|
||||
function adjustOutputOffset() {
|
||||
const topMenu = document.getElementById("topmenu"); // Replace with your top menu's ID
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight; // Dynamically get the top menu height
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", adjustOutputOffset);
|
||||
window.addEventListener("resize", adjustOutputOffset);
|
||||
|
||||
// Prevent flickering on page navigation
|
||||
window.addEventListener("beforeunload", () => {
|
||||
saveSideNavState();
|
||||
saveSidenavScrollPosition();
|
||||
});
|
||||
|
||||
window.addEventListener("load", restoreSidenavScrollPosition);
|
||||
document.addEventListener("DOMContentLoaded", restorenavbarState);
|
||||
|
||||
function initializeSearchBar(searchContainerId, outputSelector) {
|
||||
const searchContainer = document.getElementById(searchContainerId);
|
||||
if (!searchContainer) return; // Exit if container is not found
|
||||
|
||||
const searchBar = searchContainer.querySelector('#search-bar');
|
||||
const autocompleteList = searchContainer.querySelector('#autocomplete-list');
|
||||
const outputLinks = document.querySelectorAll(outputSelector);
|
||||
|
||||
// Collect output names and their hrefs
|
||||
const outputs = Array.from(outputLinks).map(link => ({
|
||||
name: link.textContent.trim(),
|
||||
href: link.getAttribute("href"),
|
||||
}));
|
||||
|
||||
let highlightedIndex = -1; // Index of the currently highlighted item
|
||||
|
||||
function adjustAutocompleteWidth() {
|
||||
const searchBarWidth = searchBar.offsetWidth;
|
||||
autocompleteList.style.width = `${searchBarWidth}px`;
|
||||
}
|
||||
|
||||
function updateAutocomplete(query) {
|
||||
autocompleteList.innerHTML = ""; // Clear suggestions
|
||||
highlightedIndex = -1; // Reset highlighting
|
||||
|
||||
const matches = outputs.filter(output =>
|
||||
output.name.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
|
||||
matches.forEach(match => {
|
||||
const listItem = document.createElement("li");
|
||||
listItem.textContent = match.name;
|
||||
listItem.addEventListener("click", () => {
|
||||
window.location.href = match.href;
|
||||
});
|
||||
autocompleteList.appendChild(listItem);
|
||||
});
|
||||
|
||||
autocompleteList.style.display = matches.length ? "block" : "none";
|
||||
}
|
||||
|
||||
function highlightItem(index) {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
items.forEach((item, i) => {
|
||||
if (i === index) {
|
||||
item.classList.add("highlighted");
|
||||
item.scrollIntoView({ block: "nearest" });
|
||||
} else {
|
||||
item.classList.remove("highlighted");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listeners for search bar input and keydown
|
||||
searchBar.addEventListener("input", () => {
|
||||
const query = searchBar.value.trim();
|
||||
if (query) updateAutocomplete(query);
|
||||
else {
|
||||
autocompleteList.innerHTML = "";
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
searchBar.addEventListener("keydown", (event) => {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
if (!items.length) return;
|
||||
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex + 1) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex - 1 + items.length) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "Enter" && highlightedIndex >= 0) {
|
||||
event.preventDefault();
|
||||
items[highlightedIndex].click();
|
||||
}
|
||||
});
|
||||
|
||||
// Hide suggestions when clicking outside
|
||||
document.addEventListener("click", (event) => {
|
||||
if (!searchBar.contains(event.target) && !autocompleteList.contains(event.target)) {
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
// Adjust width on window resize
|
||||
adjustAutocompleteWidth();
|
||||
window.addEventListener("resize", adjustAutocompleteWidth);
|
||||
}
|
||||
|
||||
// Initialize search functionality
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
initializeSearchBar("search-container", ".navbar-output");
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const md = window.markdownit({
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true
|
||||
});
|
||||
|
||||
// Find all markdown containers and render them
|
||||
document.querySelectorAll('.markdown-content').forEach(container => {
|
||||
const rawMarkdown = container.innerHTML;
|
||||
container.style.display = 'block';
|
||||
container.innerHTML = md.render(rawMarkdown);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Theme toggle ================================================================
|
||||
|
||||
function toggleTheme() {
|
||||
const body = document.body;
|
||||
|
||||
// Check if the current theme is dark
|
||||
const isDark = body.classList.contains('dark-mode');
|
||||
|
||||
// Toggle between dark and light themes
|
||||
if (isDark) {
|
||||
body.classList.remove('dark-mode');
|
||||
body.classList.add('light-mode');
|
||||
} else {
|
||||
body.classList.remove('light-mode');
|
||||
body.classList.add('dark-mode');
|
||||
}
|
||||
|
||||
// Save the selected theme to localStorage
|
||||
localStorage.setItem('theme', isDark ? 'light' : 'dark');
|
||||
}
|
||||
|
||||
// Do not animate theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
const toggleSpan = themeToggle.nextElementSibling; // The <span> element
|
||||
|
||||
// Prevent animation on page load
|
||||
const savedTheme = localStorage.getItem('theme') || 'dark';
|
||||
document.body.classList.add(savedTheme === 'dark' ? 'dark-mode' : 'light-mode');
|
||||
themeToggle.checked = savedTheme === 'dark';
|
||||
|
||||
// Add the "animate" class on user interaction
|
||||
themeToggle.addEventListener('change', () => {
|
||||
toggleSpan.classList.add('animate');
|
||||
setTimeout(() => {
|
||||
toggleSpan.classList.remove('animate'); // Remove the animation class after completion
|
||||
}, 400); // Match the CSS transition duration (0.4s)
|
||||
});
|
||||
});
|
||||
|
||||
// Avoid flickering of theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const body = document.body;
|
||||
|
||||
// Temporarily disable transitions during page load
|
||||
body.classList.add('no-transition');
|
||||
|
||||
// Remove the no-transition class after the page is fully loaded
|
||||
setTimeout(() => {
|
||||
body.classList.remove('no-transition');
|
||||
}, 50); // Allow rendering to complete before enabling transitions
|
||||
});
|
||||
|
||||
function adjustMainBodyOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const mainBody = document.getElementById("main");
|
||||
|
||||
if (topMenu && mainBody) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
mainBody.style.marginTop = `${topMenuHeight}px`;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply the adjustment on page load and window resize
|
||||
window.addEventListener("DOMContentLoaded", adjustMainBodyOffset);
|
||||
window.addEventListener("resize", adjustMainBodyOffset);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
690
html/Test_5-navigate_renders.html
Normal file
690
html/Test_5-navigate_renders.html
Normal file
@@ -0,0 +1,690 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>/renders</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<script src="markdown-it.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="theSideNav" class="navbar">
|
||||
<!-- Search bar container -->
|
||||
<div id="search-container">
|
||||
<input type="text" id="search-bar" placeholder="Search outputs..." autocomplete="off">
|
||||
<ul id="autocomplete-list"></ul>
|
||||
</div>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> reports</span>
|
||||
<ul id='folder-test_5-navigate-reports' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_reports.html#erc' class='navbar-output'>erc</a></li>
|
||||
<li><a href='Test_5-navigate_reports.html#drc' class='navbar-output'>drc</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> schematic</span>
|
||||
<ul id='folder-test_5-navigate-schematic' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_schematic.html#pdf_schematic' class='navbar-output'>pdf_schematic</a></li>
|
||||
<li><a href='Test_5-navigate_schematic.html#txt_schematic_notes' class='navbar-output'>txt_schematic_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> mfg</span>
|
||||
<ul id='folder-test_5-navigate-mfg' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> assembly</span>
|
||||
<ul id='folder-test_5-navigate_mfg-assembly' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_bom' class='navbar-output'>csv_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom' class='navbar-output'>html_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom_interactive' class='navbar-output'>html_bom_interactive</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_position' class='navbar-output'>csv_position</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#pdf_assembly' class='navbar-output'>pdf_assembly</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_comp_count' class='navbar-output'>csv_comp_count</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#txt_assembly_notes' class='navbar-output'>txt_assembly_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> fab</span>
|
||||
<ul id='folder-test_5-navigate_mfg-fab' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#gbr_gerbers' class='navbar-output'>gbr_gerbers</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#drl_excellon' class='navbar-output'>drl_excellon</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#pdf_drill_map' class='navbar-output'>pdf_drill_map</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_odb' class='navbar-output'>zip_odb</a></li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> drill-tables</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-drill-tables' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_drill-tables.html#csv_drill_table' class='navbar-output'>csv_drill_table</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#pdf_fabrication' class='navbar-output'>pdf_fabrication</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_compress_fab' class='navbar-output'>zip_compress_fab</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#csv_impedance_table' class='navbar-output'>csv_impedance_table</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#txt_fabrication_notes' class='navbar-output'>txt_fabrication_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> jlcpcb</span>
|
||||
<ul id='folder-test_5-navigate_mfg-jlcpcb' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_jlcpcb-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb_gerbers.html#jlcpcb_gerbers' class='navbar-output'>jlcpcb_gerbers</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_fabpack' class='navbar-output'>jlcpcb_fabpack</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_bom' class='navbar-output'>jlcpcb_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_cpl' class='navbar-output'>jlcpcb_cpl</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> kiri</span>
|
||||
<ul id='folder-test_5-navigate-kiri' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_kiri.html#html_kiri' class='navbar-output'>html_kiri</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> renders</span>
|
||||
<ul id='folder-test_5-navigate-renders' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_top' class='navbar-output'>pcbdraw_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_bottom' class='navbar-output'>pcbdraw_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_top' class='navbar-output'>png_3d_viewer_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_bottom' class='navbar-output'>png_3d_viewer_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_top' class='navbar-output'>png_3d_viewer_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_bottom' class='navbar-output'>png_3d_viewer_angled_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_top' class='navbar-output'>blender_3d_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_bottom' class='navbar-output'>blender_3d_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_top' class='navbar-output'>blender_3d_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_bottom' class='navbar-output'>blender_3d_angled_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> models</span>
|
||||
<ul id='folder-test_5-navigate-models' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_models.html#step' class='navbar-output'>step</a></li>
|
||||
<li><a href='Test_5-navigate_models.html#glb' class='navbar-output'>glb</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> test</span>
|
||||
<ul id='folder-test_5-navigate-test' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> testpoints</span>
|
||||
<ul id='folder-test_5-navigate_test-testpoints' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints' class='navbar-output'>csv_testpoints</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_top' class='navbar-output'>csv_testpoints_top</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_bottom' class='navbar-output'>csv_testpoints_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panels</span>
|
||||
<ul id='folder-test_5-navigate-panels' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panel-800</span>
|
||||
<ul id='folder-test_5-navigate_panels-panel-800' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_panels_panel-800.html#panel_801' class='navbar-output'>panel_801</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="topmenu" class="topmenu">
|
||||
<div style="display: flex; align-items: center; flex: 1; min-width: 0; gap: 10px;">
|
||||
<span id="open-navbar" style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
|
||||
<span id="close-navbar" style="font-size:30px;cursor:pointer;display:none;" onclick="closeNav()">⨉</span>
|
||||
<button id="back-button" onclick="history.back()" style="font-size:30px;">↩</button>
|
||||
<button id="forward-button" onclick="history.forward()" style="font-size:30px;">↪</button>
|
||||
<button id="up-button" onclick="location.href='Test_5-navigate.html'" style="font-size:44px; position: relative; top: -3px;">⌅</button>
|
||||
<button id="home-button" onclick="location.href='Test_5-navigate.html'" style="font-size:25px; position: relative; top: -2px;">🏠︎</button>
|
||||
|
||||
<span style="
|
||||
font-size:18px;
|
||||
color: var(--text-color-accent);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
">
|
||||
<a href="Test_5-navigate_renders.html" style="text-decoration:none;color:inherit;">renders</a>
|
||||
</span>
|
||||
</div>
|
||||
<div style="text-align: center; flex: 1; min-width: 200px;">
|
||||
<a href="https://git.asymworks.com/jkrauss/Test_5" style="text-decoration: none; color: inherit;">
|
||||
<span style="font-size:30px;">A99-9000 (Assembly Name)</span>
|
||||
</a>
|
||||
|
||||
<div style="
|
||||
font-size:14px;
|
||||
color: var(--text-color-accent);
|
||||
margin-top: 5px;">
|
||||
Asymworks, LLC
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; flex: 1; justify-content: flex-end; min-width: 0; gap: 10px; padding-right: 10px;">
|
||||
|
||||
<div style="
|
||||
text-align: left;
|
||||
font-size:14px;
|
||||
margin-right: 10px;
|
||||
color: var(--text-color-accent);">
|
||||
<div style="margin-bottom: 5px;">Rev. NO_TAG+ (Unreleased)</div>
|
||||
<div>Variant: </div>
|
||||
</div>
|
||||
<img src="images/logo.png" alt="Logo" style="max-height: 40px; max-width: 74.0px;">
|
||||
|
||||
<label class="theme-switch" style="
|
||||
position: relative;
|
||||
margin-right: 10px; /* Move toggle slightly left */
|
||||
max-width: 100%; /* Prevent overflow */
|
||||
">
|
||||
<input type="checkbox" id="themeToggle" onchange="toggleTheme()">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div class="output-virtual-box" id="pcbdraw_top">
|
||||
<div class="output-comment">PCB 2D Render (Top)</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box wide" onclick="location.href='../renders/Test_5-pcbdraw_top.svg'">
|
||||
<img src="images/cat_pcbdraw_top_Test_5-pcbdraw_top.png" alt="Test_5-pcbdraw_top.svg" width="512" height="307">
|
||||
<p class="filename">Test_5-pcbdraw_top.svg</p>
|
||||
<p class="output-name">pcbdraw_top</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="pcbdraw_bottom">
|
||||
<div class="output-comment">PCB 2D Render (Bottom)</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box wide" onclick="location.href='../renders/Test_5-pcbdraw_bottom.svg'">
|
||||
<img src="images/cat_pcbdraw_bottom_Test_5-pcbdraw_bottom.png" alt="Test_5-pcbdraw_bottom.svg" width="512" height="307">
|
||||
<p class="filename">Test_5-pcbdraw_bottom.svg</p>
|
||||
<p class="output-name">pcbdraw_bottom</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="png_3d_viewer_top">
|
||||
<div class="output-comment">Top 3D viewer PCB render in PNG format</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box wide" onclick="location.href='../renders/Test_5-top.png'">
|
||||
<img src="images/cat_png_3d_viewer_top_Test_5-top.png" alt="Test_5-top.png" width="512" height="306">
|
||||
<p class="filename">Test_5-top.png</p>
|
||||
<p class="output-name">png_3d_viewer_top</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="png_3d_viewer_bottom">
|
||||
<div class="output-comment">Bottom 3D viewer PCB render in PNG format</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box wide" onclick="location.href='../renders/Test_5-bottom.png'">
|
||||
<img src="images/cat_png_3d_viewer_bottom_Test_5-bottom.png" alt="Test_5-bottom.png" width="512" height="306">
|
||||
<p class="filename">Test_5-bottom.png</p>
|
||||
<p class="output-name">png_3d_viewer_bottom</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="png_3d_viewer_angled_top">
|
||||
<div class="output-comment">Top (angled) 3D viewer PCB render in PNG format</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box wide" onclick="location.href='../renders/Test_5-angled_top.png'">
|
||||
<img src="images/cat_png_3d_viewer_angled_top_Test_5-angled_top.png" alt="Test_5-angled_top.png" width="512" height="323">
|
||||
<p class="filename">Test_5-angled_top.png</p>
|
||||
<p class="output-name">png_3d_viewer_angled_top</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="png_3d_viewer_angled_bottom">
|
||||
<div class="output-comment">Bottom (angled) 3D viewer PCB render in PNG format</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box wide" onclick="location.href='../renders/Test_5-angled_bottom.png'">
|
||||
<img src="images/cat_png_3d_viewer_angled_bottom_Test_5-angled_bottom.png" alt="Test_5-angled_bottom.png" width="512" height="310">
|
||||
<p class="filename">Test_5-angled_bottom.png</p>
|
||||
<p class="output-name">png_3d_viewer_angled_bottom</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="blender_3d_top">
|
||||
<div class="output-comment">High Quality 3D Render (Top)</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../renders/Test_5-blender_exportblender_3d_top.pcb3d'">
|
||||
<img src="images/file_pcb3d_64.png" alt="Test_5-blender_exportblender_3d_top.pcb3d" width="64" height="64">
|
||||
<p class="filename">Test_5-blender_exportblender_3d_top.pcb3d</p>
|
||||
<p class="output-name">blender_3d_top</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box wide" onclick="location.href='../renders/Test_5-blender_3d_top.png'">
|
||||
<img src="images/cat_blender_3d_top_Test_5-blender_3d_top.png" alt="Test_5-blender_3d_top.png" width="512" height="306">
|
||||
<p class="filename">Test_5-blender_3d_top.png</p>
|
||||
<p class="output-name">blender_3d_top</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="blender_3d_bottom">
|
||||
<div class="output-comment">High Quality 3D Render (Bottom)</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../renders/Test_5-blender_exportblender_3d_bottom.pcb3d'">
|
||||
<img src="images/file_pcb3d_64.png" alt="Test_5-blender_exportblender_3d_bottom.pcb3d" width="64" height="64">
|
||||
<p class="filename">Test_5-blender_exportblender_3d_bottom.pcb3d</p>
|
||||
<p class="output-name">blender_3d_bottom</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box wide" onclick="location.href='../renders/Test_5-blender_3d_bottom.png'">
|
||||
<img src="images/cat_blender_3d_bottom_Test_5-blender_3d_bottom.png" alt="Test_5-blender_3d_bottom.png" width="512" height="302">
|
||||
<p class="filename">Test_5-blender_3d_bottom.png</p>
|
||||
<p class="output-name">blender_3d_bottom</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="blender_3d_angled_top">
|
||||
<div class="output-comment">High Quality 3D Render (Angled Top)</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../renders/Test_5-blender_exportblender_3d_angled_top.pcb3d'">
|
||||
<img src="images/file_pcb3d_64.png" alt="Test_5-blender_exportblender_3d_angled_top.pcb3d" width="64" height="64">
|
||||
<p class="filename">Test_5-blender_exportblender_3d_angled_top.pcb3d</p>
|
||||
<p class="output-name">blender_3d_angled_top</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box wide" onclick="location.href='../renders/Test_5-blender_3d_angled_top.png'">
|
||||
<img src="images/cat_blender_3d_angled_top_Test_5-blender_3d_angled_top.png" alt="Test_5-blender_3d_angled_top.png" width="512" height="309">
|
||||
<p class="filename">Test_5-blender_3d_angled_top.png</p>
|
||||
<p class="output-name">blender_3d_angled_top</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="blender_3d_angled_bottom">
|
||||
<div class="output-comment">High Quality 3D Render (Angled Bottom)</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../renders/Test_5-blender_exportblender_3d_angled_bottom.pcb3d'">
|
||||
<img src="images/file_pcb3d_64.png" alt="Test_5-blender_exportblender_3d_angled_bottom.pcb3d" width="64" height="64">
|
||||
<p class="filename">Test_5-blender_exportblender_3d_angled_bottom.pcb3d</p>
|
||||
<p class="output-name">blender_3d_angled_bottom</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box wide" onclick="location.href='../renders/Test_5-blender_3d_angled_bottom.png'">
|
||||
<img src="images/cat_blender_3d_angled_bottom_Test_5-blender_3d_angled_bottom.png" alt="Test_5-blender_3d_angled_bottom.png" width="512" height="290">
|
||||
<p class="filename">Test_5-blender_3d_angled_bottom.png</p>
|
||||
<p class="output-name">blender_3d_angled_bottom</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// Side Navigation functions ===================================================
|
||||
|
||||
function openNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "360px";
|
||||
navbar.style.paddingLeft = "20px";
|
||||
main.style.marginLeft = "360px";
|
||||
document.getElementById("open-navbar").style.display = "none";
|
||||
document.getElementById("close-navbar").style.display = "inline-block";
|
||||
}
|
||||
|
||||
function closeNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "0"; // Close the navbar
|
||||
navbar.style.paddingLeft = "0"; // Reset padding
|
||||
main.style.marginLeft = "0"; // Reset page content position
|
||||
document.getElementById("open-navbar").style.display = "inline-block";
|
||||
document.getElementById("close-navbar").style.display = "none";
|
||||
}
|
||||
|
||||
function toggleFolder(folderHeader) {
|
||||
const folder = folderHeader.parentElement;
|
||||
const folderContents = folderHeader.nextElementSibling;
|
||||
|
||||
if (folder.classList.contains("open")) {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
} else {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
}
|
||||
|
||||
// Save the updated state
|
||||
saveSideNavState();
|
||||
}
|
||||
|
||||
function saveSideNavState() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const isOpen = navbar.style.width !== "0px"; // Check if navbar is open
|
||||
|
||||
// Save the state of each folder
|
||||
const folderStates = Array.from(document.querySelectorAll(".folder")).map(folder => ({
|
||||
id: folder.querySelector("span").textContent.trim(), // Use folder name as identifier
|
||||
isOpen: folder.classList.contains("open") // Check if folder is open
|
||||
}));
|
||||
|
||||
// Save the navbar and folder states to localStorage
|
||||
localStorage.setItem("navbarState", JSON.stringify({ isOpen, folderStates }));
|
||||
}
|
||||
|
||||
function restorenavbarState() {
|
||||
const savedState = localStorage.getItem("navbarState");
|
||||
if (savedState) {
|
||||
const { isOpen, folderStates } = JSON.parse(savedState);
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
// Temporarily disable animations on page load so elements don't move
|
||||
navbar.style.transition = "none";
|
||||
main.style.transition = "none";
|
||||
const chevrons = document.querySelectorAll(".chevron");
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "none";
|
||||
});
|
||||
|
||||
// Restore side navigation state
|
||||
if (isOpen) {
|
||||
openNav()
|
||||
} else {
|
||||
closeNav()
|
||||
}
|
||||
|
||||
// Restore folder open/closed states
|
||||
folderStates.forEach(({ id, isOpen }) => {
|
||||
const folder = Array.from(document.querySelectorAll(".folder"))
|
||||
.find(folder => folder.querySelector("span").textContent.trim() === id);
|
||||
|
||||
if (folder) {
|
||||
const folderContents = folder.querySelector(".folder-contents");
|
||||
if (isOpen) {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
} else {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Re-enable animation
|
||||
setTimeout(() => {
|
||||
navbar.style.transition = "";
|
||||
main.style.transition = "";
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "";
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function saveSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const scrollPosition = navbar.scrollTop;
|
||||
localStorage.setItem("navbarScrollPosition", scrollPosition);
|
||||
}
|
||||
|
||||
function restoreSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const savedPosition = localStorage.getItem("navbarScrollPosition");
|
||||
if (savedPosition !== null) {
|
||||
navbar.scrollTop = parseInt(savedPosition, 10);
|
||||
}
|
||||
}
|
||||
|
||||
function adjustSidenavOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
adjustSidenavOffset();
|
||||
window.addEventListener("resize", adjustSidenavOffset);
|
||||
|
||||
/* This is the scrolling offset when we click on an output in the side navigation bar
|
||||
It should take into account the top menu height */
|
||||
function adjustOutputOffset() {
|
||||
const topMenu = document.getElementById("topmenu"); // Replace with your top menu's ID
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight; // Dynamically get the top menu height
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", adjustOutputOffset);
|
||||
window.addEventListener("resize", adjustOutputOffset);
|
||||
|
||||
// Prevent flickering on page navigation
|
||||
window.addEventListener("beforeunload", () => {
|
||||
saveSideNavState();
|
||||
saveSidenavScrollPosition();
|
||||
});
|
||||
|
||||
window.addEventListener("load", restoreSidenavScrollPosition);
|
||||
document.addEventListener("DOMContentLoaded", restorenavbarState);
|
||||
|
||||
function initializeSearchBar(searchContainerId, outputSelector) {
|
||||
const searchContainer = document.getElementById(searchContainerId);
|
||||
if (!searchContainer) return; // Exit if container is not found
|
||||
|
||||
const searchBar = searchContainer.querySelector('#search-bar');
|
||||
const autocompleteList = searchContainer.querySelector('#autocomplete-list');
|
||||
const outputLinks = document.querySelectorAll(outputSelector);
|
||||
|
||||
// Collect output names and their hrefs
|
||||
const outputs = Array.from(outputLinks).map(link => ({
|
||||
name: link.textContent.trim(),
|
||||
href: link.getAttribute("href"),
|
||||
}));
|
||||
|
||||
let highlightedIndex = -1; // Index of the currently highlighted item
|
||||
|
||||
function adjustAutocompleteWidth() {
|
||||
const searchBarWidth = searchBar.offsetWidth;
|
||||
autocompleteList.style.width = `${searchBarWidth}px`;
|
||||
}
|
||||
|
||||
function updateAutocomplete(query) {
|
||||
autocompleteList.innerHTML = ""; // Clear suggestions
|
||||
highlightedIndex = -1; // Reset highlighting
|
||||
|
||||
const matches = outputs.filter(output =>
|
||||
output.name.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
|
||||
matches.forEach(match => {
|
||||
const listItem = document.createElement("li");
|
||||
listItem.textContent = match.name;
|
||||
listItem.addEventListener("click", () => {
|
||||
window.location.href = match.href;
|
||||
});
|
||||
autocompleteList.appendChild(listItem);
|
||||
});
|
||||
|
||||
autocompleteList.style.display = matches.length ? "block" : "none";
|
||||
}
|
||||
|
||||
function highlightItem(index) {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
items.forEach((item, i) => {
|
||||
if (i === index) {
|
||||
item.classList.add("highlighted");
|
||||
item.scrollIntoView({ block: "nearest" });
|
||||
} else {
|
||||
item.classList.remove("highlighted");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listeners for search bar input and keydown
|
||||
searchBar.addEventListener("input", () => {
|
||||
const query = searchBar.value.trim();
|
||||
if (query) updateAutocomplete(query);
|
||||
else {
|
||||
autocompleteList.innerHTML = "";
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
searchBar.addEventListener("keydown", (event) => {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
if (!items.length) return;
|
||||
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex + 1) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex - 1 + items.length) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "Enter" && highlightedIndex >= 0) {
|
||||
event.preventDefault();
|
||||
items[highlightedIndex].click();
|
||||
}
|
||||
});
|
||||
|
||||
// Hide suggestions when clicking outside
|
||||
document.addEventListener("click", (event) => {
|
||||
if (!searchBar.contains(event.target) && !autocompleteList.contains(event.target)) {
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
// Adjust width on window resize
|
||||
adjustAutocompleteWidth();
|
||||
window.addEventListener("resize", adjustAutocompleteWidth);
|
||||
}
|
||||
|
||||
// Initialize search functionality
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
initializeSearchBar("search-container", ".navbar-output");
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const md = window.markdownit({
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true
|
||||
});
|
||||
|
||||
// Find all markdown containers and render them
|
||||
document.querySelectorAll('.markdown-content').forEach(container => {
|
||||
const rawMarkdown = container.innerHTML;
|
||||
container.style.display = 'block';
|
||||
container.innerHTML = md.render(rawMarkdown);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Theme toggle ================================================================
|
||||
|
||||
function toggleTheme() {
|
||||
const body = document.body;
|
||||
|
||||
// Check if the current theme is dark
|
||||
const isDark = body.classList.contains('dark-mode');
|
||||
|
||||
// Toggle between dark and light themes
|
||||
if (isDark) {
|
||||
body.classList.remove('dark-mode');
|
||||
body.classList.add('light-mode');
|
||||
} else {
|
||||
body.classList.remove('light-mode');
|
||||
body.classList.add('dark-mode');
|
||||
}
|
||||
|
||||
// Save the selected theme to localStorage
|
||||
localStorage.setItem('theme', isDark ? 'light' : 'dark');
|
||||
}
|
||||
|
||||
// Do not animate theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
const toggleSpan = themeToggle.nextElementSibling; // The <span> element
|
||||
|
||||
// Prevent animation on page load
|
||||
const savedTheme = localStorage.getItem('theme') || 'dark';
|
||||
document.body.classList.add(savedTheme === 'dark' ? 'dark-mode' : 'light-mode');
|
||||
themeToggle.checked = savedTheme === 'dark';
|
||||
|
||||
// Add the "animate" class on user interaction
|
||||
themeToggle.addEventListener('change', () => {
|
||||
toggleSpan.classList.add('animate');
|
||||
setTimeout(() => {
|
||||
toggleSpan.classList.remove('animate'); // Remove the animation class after completion
|
||||
}, 400); // Match the CSS transition duration (0.4s)
|
||||
});
|
||||
});
|
||||
|
||||
// Avoid flickering of theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const body = document.body;
|
||||
|
||||
// Temporarily disable transitions during page load
|
||||
body.classList.add('no-transition');
|
||||
|
||||
// Remove the no-transition class after the page is fully loaded
|
||||
setTimeout(() => {
|
||||
body.classList.remove('no-transition');
|
||||
}, 50); // Allow rendering to complete before enabling transitions
|
||||
});
|
||||
|
||||
function adjustMainBodyOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const mainBody = document.getElementById("main");
|
||||
|
||||
if (topMenu && mainBody) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
mainBody.style.marginTop = `${topMenuHeight}px`;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply the adjustment on page load and window resize
|
||||
window.addEventListener("DOMContentLoaded", adjustMainBodyOffset);
|
||||
window.addEventListener("resize", adjustMainBodyOffset);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
590
html/Test_5-navigate_reports.html
Normal file
590
html/Test_5-navigate_reports.html
Normal file
@@ -0,0 +1,590 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>/reports</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<script src="markdown-it.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="theSideNav" class="navbar">
|
||||
<!-- Search bar container -->
|
||||
<div id="search-container">
|
||||
<input type="text" id="search-bar" placeholder="Search outputs..." autocomplete="off">
|
||||
<ul id="autocomplete-list"></ul>
|
||||
</div>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> reports</span>
|
||||
<ul id='folder-test_5-navigate-reports' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_reports.html#erc' class='navbar-output'>erc</a></li>
|
||||
<li><a href='Test_5-navigate_reports.html#drc' class='navbar-output'>drc</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> schematic</span>
|
||||
<ul id='folder-test_5-navigate-schematic' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_schematic.html#pdf_schematic' class='navbar-output'>pdf_schematic</a></li>
|
||||
<li><a href='Test_5-navigate_schematic.html#txt_schematic_notes' class='navbar-output'>txt_schematic_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> mfg</span>
|
||||
<ul id='folder-test_5-navigate-mfg' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> assembly</span>
|
||||
<ul id='folder-test_5-navigate_mfg-assembly' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_bom' class='navbar-output'>csv_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom' class='navbar-output'>html_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom_interactive' class='navbar-output'>html_bom_interactive</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_position' class='navbar-output'>csv_position</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#pdf_assembly' class='navbar-output'>pdf_assembly</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_comp_count' class='navbar-output'>csv_comp_count</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#txt_assembly_notes' class='navbar-output'>txt_assembly_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> fab</span>
|
||||
<ul id='folder-test_5-navigate_mfg-fab' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#gbr_gerbers' class='navbar-output'>gbr_gerbers</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#drl_excellon' class='navbar-output'>drl_excellon</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#pdf_drill_map' class='navbar-output'>pdf_drill_map</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_odb' class='navbar-output'>zip_odb</a></li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> drill-tables</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-drill-tables' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_drill-tables.html#csv_drill_table' class='navbar-output'>csv_drill_table</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#pdf_fabrication' class='navbar-output'>pdf_fabrication</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_compress_fab' class='navbar-output'>zip_compress_fab</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#csv_impedance_table' class='navbar-output'>csv_impedance_table</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#txt_fabrication_notes' class='navbar-output'>txt_fabrication_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> jlcpcb</span>
|
||||
<ul id='folder-test_5-navigate_mfg-jlcpcb' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_jlcpcb-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb_gerbers.html#jlcpcb_gerbers' class='navbar-output'>jlcpcb_gerbers</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_fabpack' class='navbar-output'>jlcpcb_fabpack</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_bom' class='navbar-output'>jlcpcb_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_cpl' class='navbar-output'>jlcpcb_cpl</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> kiri</span>
|
||||
<ul id='folder-test_5-navigate-kiri' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_kiri.html#html_kiri' class='navbar-output'>html_kiri</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> renders</span>
|
||||
<ul id='folder-test_5-navigate-renders' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_top' class='navbar-output'>pcbdraw_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_bottom' class='navbar-output'>pcbdraw_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_top' class='navbar-output'>png_3d_viewer_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_bottom' class='navbar-output'>png_3d_viewer_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_top' class='navbar-output'>png_3d_viewer_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_bottom' class='navbar-output'>png_3d_viewer_angled_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_top' class='navbar-output'>blender_3d_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_bottom' class='navbar-output'>blender_3d_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_top' class='navbar-output'>blender_3d_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_bottom' class='navbar-output'>blender_3d_angled_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> models</span>
|
||||
<ul id='folder-test_5-navigate-models' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_models.html#step' class='navbar-output'>step</a></li>
|
||||
<li><a href='Test_5-navigate_models.html#glb' class='navbar-output'>glb</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> test</span>
|
||||
<ul id='folder-test_5-navigate-test' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> testpoints</span>
|
||||
<ul id='folder-test_5-navigate_test-testpoints' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints' class='navbar-output'>csv_testpoints</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_top' class='navbar-output'>csv_testpoints_top</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_bottom' class='navbar-output'>csv_testpoints_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panels</span>
|
||||
<ul id='folder-test_5-navigate-panels' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panel-800</span>
|
||||
<ul id='folder-test_5-navigate_panels-panel-800' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_panels_panel-800.html#panel_801' class='navbar-output'>panel_801</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="topmenu" class="topmenu">
|
||||
<div style="display: flex; align-items: center; flex: 1; min-width: 0; gap: 10px;">
|
||||
<span id="open-navbar" style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
|
||||
<span id="close-navbar" style="font-size:30px;cursor:pointer;display:none;" onclick="closeNav()">⨉</span>
|
||||
<button id="back-button" onclick="history.back()" style="font-size:30px;">↩</button>
|
||||
<button id="forward-button" onclick="history.forward()" style="font-size:30px;">↪</button>
|
||||
<button id="up-button" onclick="location.href='Test_5-navigate.html'" style="font-size:44px; position: relative; top: -3px;">⌅</button>
|
||||
<button id="home-button" onclick="location.href='Test_5-navigate.html'" style="font-size:25px; position: relative; top: -2px;">🏠︎</button>
|
||||
|
||||
<span style="
|
||||
font-size:18px;
|
||||
color: var(--text-color-accent);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
">
|
||||
<a href="Test_5-navigate_reports.html" style="text-decoration:none;color:inherit;">reports</a>
|
||||
</span>
|
||||
</div>
|
||||
<div style="text-align: center; flex: 1; min-width: 200px;">
|
||||
<a href="https://git.asymworks.com/jkrauss/Test_5" style="text-decoration: none; color: inherit;">
|
||||
<span style="font-size:30px;">A99-9000 (Assembly Name)</span>
|
||||
</a>
|
||||
|
||||
<div style="
|
||||
font-size:14px;
|
||||
color: var(--text-color-accent);
|
||||
margin-top: 5px;">
|
||||
Asymworks, LLC
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; flex: 1; justify-content: flex-end; min-width: 0; gap: 10px; padding-right: 10px;">
|
||||
|
||||
<div style="
|
||||
text-align: left;
|
||||
font-size:14px;
|
||||
margin-right: 10px;
|
||||
color: var(--text-color-accent);">
|
||||
<div style="margin-bottom: 5px;">Rev. NO_TAG+ (Unreleased)</div>
|
||||
<div>Variant: </div>
|
||||
</div>
|
||||
<img src="images/logo.png" alt="Logo" style="max-height: 40px; max-width: 74.0px;">
|
||||
|
||||
<label class="theme-switch" style="
|
||||
position: relative;
|
||||
margin-right: 10px; /* Move toggle slightly left */
|
||||
max-width: 100%; /* Prevent overflow */
|
||||
">
|
||||
<input type="checkbox" id="themeToggle" onchange="toggleTheme()">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div class="output-virtual-box" id="erc">
|
||||
<div class="output-comment">erc</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../reports/report_Test_5-erc.html'">
|
||||
<img src="images/erc.svg_64.png" alt="report_Test_5-erc.html" width="64" height="64">
|
||||
<p class="filename">report_Test_5-erc.html</p>
|
||||
<p class="output-name">erc</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box " onclick="location.href='../reports/report_Test_5-erc.rpt'">
|
||||
<img src="images/erc.svg_64.png" alt="report_Test_5-erc.rpt" width="64" height="64">
|
||||
<p class="filename">report_Test_5-erc.rpt</p>
|
||||
<p class="output-name">erc</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="drc">
|
||||
<div class="output-comment">drc</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../reports/report_Test_5-drc.html'">
|
||||
<img src="images/drc.svg_64.png" alt="report_Test_5-drc.html" width="64" height="64">
|
||||
<p class="filename">report_Test_5-drc.html</p>
|
||||
<p class="output-name">drc</p>
|
||||
</div>
|
||||
|
||||
<div class="output-box " onclick="location.href='../reports/report_Test_5-drc.rpt'">
|
||||
<img src="images/drc.svg_64.png" alt="report_Test_5-drc.rpt" width="64" height="64">
|
||||
<p class="filename">report_Test_5-drc.rpt</p>
|
||||
<p class="output-name">drc</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// Side Navigation functions ===================================================
|
||||
|
||||
function openNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "360px";
|
||||
navbar.style.paddingLeft = "20px";
|
||||
main.style.marginLeft = "360px";
|
||||
document.getElementById("open-navbar").style.display = "none";
|
||||
document.getElementById("close-navbar").style.display = "inline-block";
|
||||
}
|
||||
|
||||
function closeNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "0"; // Close the navbar
|
||||
navbar.style.paddingLeft = "0"; // Reset padding
|
||||
main.style.marginLeft = "0"; // Reset page content position
|
||||
document.getElementById("open-navbar").style.display = "inline-block";
|
||||
document.getElementById("close-navbar").style.display = "none";
|
||||
}
|
||||
|
||||
function toggleFolder(folderHeader) {
|
||||
const folder = folderHeader.parentElement;
|
||||
const folderContents = folderHeader.nextElementSibling;
|
||||
|
||||
if (folder.classList.contains("open")) {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
} else {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
}
|
||||
|
||||
// Save the updated state
|
||||
saveSideNavState();
|
||||
}
|
||||
|
||||
function saveSideNavState() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const isOpen = navbar.style.width !== "0px"; // Check if navbar is open
|
||||
|
||||
// Save the state of each folder
|
||||
const folderStates = Array.from(document.querySelectorAll(".folder")).map(folder => ({
|
||||
id: folder.querySelector("span").textContent.trim(), // Use folder name as identifier
|
||||
isOpen: folder.classList.contains("open") // Check if folder is open
|
||||
}));
|
||||
|
||||
// Save the navbar and folder states to localStorage
|
||||
localStorage.setItem("navbarState", JSON.stringify({ isOpen, folderStates }));
|
||||
}
|
||||
|
||||
function restorenavbarState() {
|
||||
const savedState = localStorage.getItem("navbarState");
|
||||
if (savedState) {
|
||||
const { isOpen, folderStates } = JSON.parse(savedState);
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
// Temporarily disable animations on page load so elements don't move
|
||||
navbar.style.transition = "none";
|
||||
main.style.transition = "none";
|
||||
const chevrons = document.querySelectorAll(".chevron");
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "none";
|
||||
});
|
||||
|
||||
// Restore side navigation state
|
||||
if (isOpen) {
|
||||
openNav()
|
||||
} else {
|
||||
closeNav()
|
||||
}
|
||||
|
||||
// Restore folder open/closed states
|
||||
folderStates.forEach(({ id, isOpen }) => {
|
||||
const folder = Array.from(document.querySelectorAll(".folder"))
|
||||
.find(folder => folder.querySelector("span").textContent.trim() === id);
|
||||
|
||||
if (folder) {
|
||||
const folderContents = folder.querySelector(".folder-contents");
|
||||
if (isOpen) {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
} else {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Re-enable animation
|
||||
setTimeout(() => {
|
||||
navbar.style.transition = "";
|
||||
main.style.transition = "";
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "";
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function saveSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const scrollPosition = navbar.scrollTop;
|
||||
localStorage.setItem("navbarScrollPosition", scrollPosition);
|
||||
}
|
||||
|
||||
function restoreSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const savedPosition = localStorage.getItem("navbarScrollPosition");
|
||||
if (savedPosition !== null) {
|
||||
navbar.scrollTop = parseInt(savedPosition, 10);
|
||||
}
|
||||
}
|
||||
|
||||
function adjustSidenavOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
adjustSidenavOffset();
|
||||
window.addEventListener("resize", adjustSidenavOffset);
|
||||
|
||||
/* This is the scrolling offset when we click on an output in the side navigation bar
|
||||
It should take into account the top menu height */
|
||||
function adjustOutputOffset() {
|
||||
const topMenu = document.getElementById("topmenu"); // Replace with your top menu's ID
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight; // Dynamically get the top menu height
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", adjustOutputOffset);
|
||||
window.addEventListener("resize", adjustOutputOffset);
|
||||
|
||||
// Prevent flickering on page navigation
|
||||
window.addEventListener("beforeunload", () => {
|
||||
saveSideNavState();
|
||||
saveSidenavScrollPosition();
|
||||
});
|
||||
|
||||
window.addEventListener("load", restoreSidenavScrollPosition);
|
||||
document.addEventListener("DOMContentLoaded", restorenavbarState);
|
||||
|
||||
function initializeSearchBar(searchContainerId, outputSelector) {
|
||||
const searchContainer = document.getElementById(searchContainerId);
|
||||
if (!searchContainer) return; // Exit if container is not found
|
||||
|
||||
const searchBar = searchContainer.querySelector('#search-bar');
|
||||
const autocompleteList = searchContainer.querySelector('#autocomplete-list');
|
||||
const outputLinks = document.querySelectorAll(outputSelector);
|
||||
|
||||
// Collect output names and their hrefs
|
||||
const outputs = Array.from(outputLinks).map(link => ({
|
||||
name: link.textContent.trim(),
|
||||
href: link.getAttribute("href"),
|
||||
}));
|
||||
|
||||
let highlightedIndex = -1; // Index of the currently highlighted item
|
||||
|
||||
function adjustAutocompleteWidth() {
|
||||
const searchBarWidth = searchBar.offsetWidth;
|
||||
autocompleteList.style.width = `${searchBarWidth}px`;
|
||||
}
|
||||
|
||||
function updateAutocomplete(query) {
|
||||
autocompleteList.innerHTML = ""; // Clear suggestions
|
||||
highlightedIndex = -1; // Reset highlighting
|
||||
|
||||
const matches = outputs.filter(output =>
|
||||
output.name.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
|
||||
matches.forEach(match => {
|
||||
const listItem = document.createElement("li");
|
||||
listItem.textContent = match.name;
|
||||
listItem.addEventListener("click", () => {
|
||||
window.location.href = match.href;
|
||||
});
|
||||
autocompleteList.appendChild(listItem);
|
||||
});
|
||||
|
||||
autocompleteList.style.display = matches.length ? "block" : "none";
|
||||
}
|
||||
|
||||
function highlightItem(index) {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
items.forEach((item, i) => {
|
||||
if (i === index) {
|
||||
item.classList.add("highlighted");
|
||||
item.scrollIntoView({ block: "nearest" });
|
||||
} else {
|
||||
item.classList.remove("highlighted");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listeners for search bar input and keydown
|
||||
searchBar.addEventListener("input", () => {
|
||||
const query = searchBar.value.trim();
|
||||
if (query) updateAutocomplete(query);
|
||||
else {
|
||||
autocompleteList.innerHTML = "";
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
searchBar.addEventListener("keydown", (event) => {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
if (!items.length) return;
|
||||
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex + 1) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex - 1 + items.length) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "Enter" && highlightedIndex >= 0) {
|
||||
event.preventDefault();
|
||||
items[highlightedIndex].click();
|
||||
}
|
||||
});
|
||||
|
||||
// Hide suggestions when clicking outside
|
||||
document.addEventListener("click", (event) => {
|
||||
if (!searchBar.contains(event.target) && !autocompleteList.contains(event.target)) {
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
// Adjust width on window resize
|
||||
adjustAutocompleteWidth();
|
||||
window.addEventListener("resize", adjustAutocompleteWidth);
|
||||
}
|
||||
|
||||
// Initialize search functionality
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
initializeSearchBar("search-container", ".navbar-output");
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const md = window.markdownit({
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true
|
||||
});
|
||||
|
||||
// Find all markdown containers and render them
|
||||
document.querySelectorAll('.markdown-content').forEach(container => {
|
||||
const rawMarkdown = container.innerHTML;
|
||||
container.style.display = 'block';
|
||||
container.innerHTML = md.render(rawMarkdown);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Theme toggle ================================================================
|
||||
|
||||
function toggleTheme() {
|
||||
const body = document.body;
|
||||
|
||||
// Check if the current theme is dark
|
||||
const isDark = body.classList.contains('dark-mode');
|
||||
|
||||
// Toggle between dark and light themes
|
||||
if (isDark) {
|
||||
body.classList.remove('dark-mode');
|
||||
body.classList.add('light-mode');
|
||||
} else {
|
||||
body.classList.remove('light-mode');
|
||||
body.classList.add('dark-mode');
|
||||
}
|
||||
|
||||
// Save the selected theme to localStorage
|
||||
localStorage.setItem('theme', isDark ? 'light' : 'dark');
|
||||
}
|
||||
|
||||
// Do not animate theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
const toggleSpan = themeToggle.nextElementSibling; // The <span> element
|
||||
|
||||
// Prevent animation on page load
|
||||
const savedTheme = localStorage.getItem('theme') || 'dark';
|
||||
document.body.classList.add(savedTheme === 'dark' ? 'dark-mode' : 'light-mode');
|
||||
themeToggle.checked = savedTheme === 'dark';
|
||||
|
||||
// Add the "animate" class on user interaction
|
||||
themeToggle.addEventListener('change', () => {
|
||||
toggleSpan.classList.add('animate');
|
||||
setTimeout(() => {
|
||||
toggleSpan.classList.remove('animate'); // Remove the animation class after completion
|
||||
}, 400); // Match the CSS transition duration (0.4s)
|
||||
});
|
||||
});
|
||||
|
||||
// Avoid flickering of theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const body = document.body;
|
||||
|
||||
// Temporarily disable transitions during page load
|
||||
body.classList.add('no-transition');
|
||||
|
||||
// Remove the no-transition class after the page is fully loaded
|
||||
setTimeout(() => {
|
||||
body.classList.remove('no-transition');
|
||||
}, 50); // Allow rendering to complete before enabling transitions
|
||||
});
|
||||
|
||||
function adjustMainBodyOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const mainBody = document.getElementById("main");
|
||||
|
||||
if (topMenu && mainBody) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
mainBody.style.marginTop = `${topMenuHeight}px`;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply the adjustment on page load and window resize
|
||||
window.addEventListener("DOMContentLoaded", adjustMainBodyOffset);
|
||||
window.addEventListener("resize", adjustMainBodyOffset);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
578
html/Test_5-navigate_schematic.html
Normal file
578
html/Test_5-navigate_schematic.html
Normal file
@@ -0,0 +1,578 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>/schematic</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<script src="markdown-it.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="theSideNav" class="navbar">
|
||||
<!-- Search bar container -->
|
||||
<div id="search-container">
|
||||
<input type="text" id="search-bar" placeholder="Search outputs..." autocomplete="off">
|
||||
<ul id="autocomplete-list"></ul>
|
||||
</div>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> reports</span>
|
||||
<ul id='folder-test_5-navigate-reports' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_reports.html#erc' class='navbar-output'>erc</a></li>
|
||||
<li><a href='Test_5-navigate_reports.html#drc' class='navbar-output'>drc</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> schematic</span>
|
||||
<ul id='folder-test_5-navigate-schematic' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_schematic.html#pdf_schematic' class='navbar-output'>pdf_schematic</a></li>
|
||||
<li><a href='Test_5-navigate_schematic.html#txt_schematic_notes' class='navbar-output'>txt_schematic_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> mfg</span>
|
||||
<ul id='folder-test_5-navigate-mfg' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> assembly</span>
|
||||
<ul id='folder-test_5-navigate_mfg-assembly' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_bom' class='navbar-output'>csv_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom' class='navbar-output'>html_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom_interactive' class='navbar-output'>html_bom_interactive</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_position' class='navbar-output'>csv_position</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#pdf_assembly' class='navbar-output'>pdf_assembly</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_comp_count' class='navbar-output'>csv_comp_count</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#txt_assembly_notes' class='navbar-output'>txt_assembly_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> fab</span>
|
||||
<ul id='folder-test_5-navigate_mfg-fab' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#gbr_gerbers' class='navbar-output'>gbr_gerbers</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#drl_excellon' class='navbar-output'>drl_excellon</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#pdf_drill_map' class='navbar-output'>pdf_drill_map</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_odb' class='navbar-output'>zip_odb</a></li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> drill-tables</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-drill-tables' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_drill-tables.html#csv_drill_table' class='navbar-output'>csv_drill_table</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#pdf_fabrication' class='navbar-output'>pdf_fabrication</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_compress_fab' class='navbar-output'>zip_compress_fab</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#csv_impedance_table' class='navbar-output'>csv_impedance_table</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#txt_fabrication_notes' class='navbar-output'>txt_fabrication_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> jlcpcb</span>
|
||||
<ul id='folder-test_5-navigate_mfg-jlcpcb' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_jlcpcb-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb_gerbers.html#jlcpcb_gerbers' class='navbar-output'>jlcpcb_gerbers</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_fabpack' class='navbar-output'>jlcpcb_fabpack</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_bom' class='navbar-output'>jlcpcb_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_cpl' class='navbar-output'>jlcpcb_cpl</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> kiri</span>
|
||||
<ul id='folder-test_5-navigate-kiri' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_kiri.html#html_kiri' class='navbar-output'>html_kiri</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> renders</span>
|
||||
<ul id='folder-test_5-navigate-renders' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_top' class='navbar-output'>pcbdraw_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_bottom' class='navbar-output'>pcbdraw_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_top' class='navbar-output'>png_3d_viewer_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_bottom' class='navbar-output'>png_3d_viewer_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_top' class='navbar-output'>png_3d_viewer_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_bottom' class='navbar-output'>png_3d_viewer_angled_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_top' class='navbar-output'>blender_3d_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_bottom' class='navbar-output'>blender_3d_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_top' class='navbar-output'>blender_3d_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_bottom' class='navbar-output'>blender_3d_angled_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> models</span>
|
||||
<ul id='folder-test_5-navigate-models' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_models.html#step' class='navbar-output'>step</a></li>
|
||||
<li><a href='Test_5-navigate_models.html#glb' class='navbar-output'>glb</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> test</span>
|
||||
<ul id='folder-test_5-navigate-test' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> testpoints</span>
|
||||
<ul id='folder-test_5-navigate_test-testpoints' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints' class='navbar-output'>csv_testpoints</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_top' class='navbar-output'>csv_testpoints_top</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_bottom' class='navbar-output'>csv_testpoints_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panels</span>
|
||||
<ul id='folder-test_5-navigate-panels' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panel-800</span>
|
||||
<ul id='folder-test_5-navigate_panels-panel-800' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_panels_panel-800.html#panel_801' class='navbar-output'>panel_801</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="topmenu" class="topmenu">
|
||||
<div style="display: flex; align-items: center; flex: 1; min-width: 0; gap: 10px;">
|
||||
<span id="open-navbar" style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
|
||||
<span id="close-navbar" style="font-size:30px;cursor:pointer;display:none;" onclick="closeNav()">⨉</span>
|
||||
<button id="back-button" onclick="history.back()" style="font-size:30px;">↩</button>
|
||||
<button id="forward-button" onclick="history.forward()" style="font-size:30px;">↪</button>
|
||||
<button id="up-button" onclick="location.href='Test_5-navigate.html'" style="font-size:44px; position: relative; top: -3px;">⌅</button>
|
||||
<button id="home-button" onclick="location.href='Test_5-navigate.html'" style="font-size:25px; position: relative; top: -2px;">🏠︎</button>
|
||||
|
||||
<span style="
|
||||
font-size:18px;
|
||||
color: var(--text-color-accent);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
">
|
||||
<a href="Test_5-navigate_schematic.html" style="text-decoration:none;color:inherit;">schematic</a>
|
||||
</span>
|
||||
</div>
|
||||
<div style="text-align: center; flex: 1; min-width: 200px;">
|
||||
<a href="https://git.asymworks.com/jkrauss/Test_5" style="text-decoration: none; color: inherit;">
|
||||
<span style="font-size:30px;">A99-9000 (Assembly Name)</span>
|
||||
</a>
|
||||
|
||||
<div style="
|
||||
font-size:14px;
|
||||
color: var(--text-color-accent);
|
||||
margin-top: 5px;">
|
||||
Asymworks, LLC
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; flex: 1; justify-content: flex-end; min-width: 0; gap: 10px; padding-right: 10px;">
|
||||
|
||||
<div style="
|
||||
text-align: left;
|
||||
font-size:14px;
|
||||
margin-right: 10px;
|
||||
color: var(--text-color-accent);">
|
||||
<div style="margin-bottom: 5px;">Rev. NO_TAG+ (Unreleased)</div>
|
||||
<div>Variant: </div>
|
||||
</div>
|
||||
<img src="images/logo.png" alt="Logo" style="max-height: 40px; max-width: 74.0px;">
|
||||
|
||||
<label class="theme-switch" style="
|
||||
position: relative;
|
||||
margin-right: 10px; /* Move toggle slightly left */
|
||||
max-width: 100%; /* Prevent overflow */
|
||||
">
|
||||
<input type="checkbox" id="themeToggle" onchange="toggleTheme()">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div class="output-virtual-box" id="pdf_schematic">
|
||||
<div class="output-comment">Schematic in PDF format</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box wide" onclick="location.href='../schematic/Test_5-schematic.pdf'">
|
||||
<img src="images/cat_pdf_schematic_Test_5-schematic.png" alt="Test_5-schematic.pdf" width="512" height="362">
|
||||
<p class="filename">Test_5-schematic.pdf</p>
|
||||
<p class="output-name">pdf_schematic</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="txt_schematic_notes">
|
||||
<div class="output-comment">Schematic notes in TXT format</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../schematic/Test_5-schematic_notes.txt'">
|
||||
<img src="images/file_txt_64.png" alt="Test_5-schematic_notes.txt" width="64" height="64">
|
||||
<p class="filename">Test_5-schematic_notes.txt</p>
|
||||
<p class="output-name">txt_schematic_notes</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// Side Navigation functions ===================================================
|
||||
|
||||
function openNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "360px";
|
||||
navbar.style.paddingLeft = "20px";
|
||||
main.style.marginLeft = "360px";
|
||||
document.getElementById("open-navbar").style.display = "none";
|
||||
document.getElementById("close-navbar").style.display = "inline-block";
|
||||
}
|
||||
|
||||
function closeNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "0"; // Close the navbar
|
||||
navbar.style.paddingLeft = "0"; // Reset padding
|
||||
main.style.marginLeft = "0"; // Reset page content position
|
||||
document.getElementById("open-navbar").style.display = "inline-block";
|
||||
document.getElementById("close-navbar").style.display = "none";
|
||||
}
|
||||
|
||||
function toggleFolder(folderHeader) {
|
||||
const folder = folderHeader.parentElement;
|
||||
const folderContents = folderHeader.nextElementSibling;
|
||||
|
||||
if (folder.classList.contains("open")) {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
} else {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
}
|
||||
|
||||
// Save the updated state
|
||||
saveSideNavState();
|
||||
}
|
||||
|
||||
function saveSideNavState() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const isOpen = navbar.style.width !== "0px"; // Check if navbar is open
|
||||
|
||||
// Save the state of each folder
|
||||
const folderStates = Array.from(document.querySelectorAll(".folder")).map(folder => ({
|
||||
id: folder.querySelector("span").textContent.trim(), // Use folder name as identifier
|
||||
isOpen: folder.classList.contains("open") // Check if folder is open
|
||||
}));
|
||||
|
||||
// Save the navbar and folder states to localStorage
|
||||
localStorage.setItem("navbarState", JSON.stringify({ isOpen, folderStates }));
|
||||
}
|
||||
|
||||
function restorenavbarState() {
|
||||
const savedState = localStorage.getItem("navbarState");
|
||||
if (savedState) {
|
||||
const { isOpen, folderStates } = JSON.parse(savedState);
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
// Temporarily disable animations on page load so elements don't move
|
||||
navbar.style.transition = "none";
|
||||
main.style.transition = "none";
|
||||
const chevrons = document.querySelectorAll(".chevron");
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "none";
|
||||
});
|
||||
|
||||
// Restore side navigation state
|
||||
if (isOpen) {
|
||||
openNav()
|
||||
} else {
|
||||
closeNav()
|
||||
}
|
||||
|
||||
// Restore folder open/closed states
|
||||
folderStates.forEach(({ id, isOpen }) => {
|
||||
const folder = Array.from(document.querySelectorAll(".folder"))
|
||||
.find(folder => folder.querySelector("span").textContent.trim() === id);
|
||||
|
||||
if (folder) {
|
||||
const folderContents = folder.querySelector(".folder-contents");
|
||||
if (isOpen) {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
} else {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Re-enable animation
|
||||
setTimeout(() => {
|
||||
navbar.style.transition = "";
|
||||
main.style.transition = "";
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "";
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function saveSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const scrollPosition = navbar.scrollTop;
|
||||
localStorage.setItem("navbarScrollPosition", scrollPosition);
|
||||
}
|
||||
|
||||
function restoreSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const savedPosition = localStorage.getItem("navbarScrollPosition");
|
||||
if (savedPosition !== null) {
|
||||
navbar.scrollTop = parseInt(savedPosition, 10);
|
||||
}
|
||||
}
|
||||
|
||||
function adjustSidenavOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
adjustSidenavOffset();
|
||||
window.addEventListener("resize", adjustSidenavOffset);
|
||||
|
||||
/* This is the scrolling offset when we click on an output in the side navigation bar
|
||||
It should take into account the top menu height */
|
||||
function adjustOutputOffset() {
|
||||
const topMenu = document.getElementById("topmenu"); // Replace with your top menu's ID
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight; // Dynamically get the top menu height
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", adjustOutputOffset);
|
||||
window.addEventListener("resize", adjustOutputOffset);
|
||||
|
||||
// Prevent flickering on page navigation
|
||||
window.addEventListener("beforeunload", () => {
|
||||
saveSideNavState();
|
||||
saveSidenavScrollPosition();
|
||||
});
|
||||
|
||||
window.addEventListener("load", restoreSidenavScrollPosition);
|
||||
document.addEventListener("DOMContentLoaded", restorenavbarState);
|
||||
|
||||
function initializeSearchBar(searchContainerId, outputSelector) {
|
||||
const searchContainer = document.getElementById(searchContainerId);
|
||||
if (!searchContainer) return; // Exit if container is not found
|
||||
|
||||
const searchBar = searchContainer.querySelector('#search-bar');
|
||||
const autocompleteList = searchContainer.querySelector('#autocomplete-list');
|
||||
const outputLinks = document.querySelectorAll(outputSelector);
|
||||
|
||||
// Collect output names and their hrefs
|
||||
const outputs = Array.from(outputLinks).map(link => ({
|
||||
name: link.textContent.trim(),
|
||||
href: link.getAttribute("href"),
|
||||
}));
|
||||
|
||||
let highlightedIndex = -1; // Index of the currently highlighted item
|
||||
|
||||
function adjustAutocompleteWidth() {
|
||||
const searchBarWidth = searchBar.offsetWidth;
|
||||
autocompleteList.style.width = `${searchBarWidth}px`;
|
||||
}
|
||||
|
||||
function updateAutocomplete(query) {
|
||||
autocompleteList.innerHTML = ""; // Clear suggestions
|
||||
highlightedIndex = -1; // Reset highlighting
|
||||
|
||||
const matches = outputs.filter(output =>
|
||||
output.name.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
|
||||
matches.forEach(match => {
|
||||
const listItem = document.createElement("li");
|
||||
listItem.textContent = match.name;
|
||||
listItem.addEventListener("click", () => {
|
||||
window.location.href = match.href;
|
||||
});
|
||||
autocompleteList.appendChild(listItem);
|
||||
});
|
||||
|
||||
autocompleteList.style.display = matches.length ? "block" : "none";
|
||||
}
|
||||
|
||||
function highlightItem(index) {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
items.forEach((item, i) => {
|
||||
if (i === index) {
|
||||
item.classList.add("highlighted");
|
||||
item.scrollIntoView({ block: "nearest" });
|
||||
} else {
|
||||
item.classList.remove("highlighted");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listeners for search bar input and keydown
|
||||
searchBar.addEventListener("input", () => {
|
||||
const query = searchBar.value.trim();
|
||||
if (query) updateAutocomplete(query);
|
||||
else {
|
||||
autocompleteList.innerHTML = "";
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
searchBar.addEventListener("keydown", (event) => {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
if (!items.length) return;
|
||||
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex + 1) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex - 1 + items.length) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "Enter" && highlightedIndex >= 0) {
|
||||
event.preventDefault();
|
||||
items[highlightedIndex].click();
|
||||
}
|
||||
});
|
||||
|
||||
// Hide suggestions when clicking outside
|
||||
document.addEventListener("click", (event) => {
|
||||
if (!searchBar.contains(event.target) && !autocompleteList.contains(event.target)) {
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
// Adjust width on window resize
|
||||
adjustAutocompleteWidth();
|
||||
window.addEventListener("resize", adjustAutocompleteWidth);
|
||||
}
|
||||
|
||||
// Initialize search functionality
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
initializeSearchBar("search-container", ".navbar-output");
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const md = window.markdownit({
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true
|
||||
});
|
||||
|
||||
// Find all markdown containers and render them
|
||||
document.querySelectorAll('.markdown-content').forEach(container => {
|
||||
const rawMarkdown = container.innerHTML;
|
||||
container.style.display = 'block';
|
||||
container.innerHTML = md.render(rawMarkdown);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Theme toggle ================================================================
|
||||
|
||||
function toggleTheme() {
|
||||
const body = document.body;
|
||||
|
||||
// Check if the current theme is dark
|
||||
const isDark = body.classList.contains('dark-mode');
|
||||
|
||||
// Toggle between dark and light themes
|
||||
if (isDark) {
|
||||
body.classList.remove('dark-mode');
|
||||
body.classList.add('light-mode');
|
||||
} else {
|
||||
body.classList.remove('light-mode');
|
||||
body.classList.add('dark-mode');
|
||||
}
|
||||
|
||||
// Save the selected theme to localStorage
|
||||
localStorage.setItem('theme', isDark ? 'light' : 'dark');
|
||||
}
|
||||
|
||||
// Do not animate theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
const toggleSpan = themeToggle.nextElementSibling; // The <span> element
|
||||
|
||||
// Prevent animation on page load
|
||||
const savedTheme = localStorage.getItem('theme') || 'dark';
|
||||
document.body.classList.add(savedTheme === 'dark' ? 'dark-mode' : 'light-mode');
|
||||
themeToggle.checked = savedTheme === 'dark';
|
||||
|
||||
// Add the "animate" class on user interaction
|
||||
themeToggle.addEventListener('change', () => {
|
||||
toggleSpan.classList.add('animate');
|
||||
setTimeout(() => {
|
||||
toggleSpan.classList.remove('animate'); // Remove the animation class after completion
|
||||
}, 400); // Match the CSS transition duration (0.4s)
|
||||
});
|
||||
});
|
||||
|
||||
// Avoid flickering of theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const body = document.body;
|
||||
|
||||
// Temporarily disable transitions during page load
|
||||
body.classList.add('no-transition');
|
||||
|
||||
// Remove the no-transition class after the page is fully loaded
|
||||
setTimeout(() => {
|
||||
body.classList.remove('no-transition');
|
||||
}, 50); // Allow rendering to complete before enabling transitions
|
||||
});
|
||||
|
||||
function adjustMainBodyOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const mainBody = document.getElementById("main");
|
||||
|
||||
if (topMenu && mainBody) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
mainBody.style.marginTop = `${topMenuHeight}px`;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply the adjustment on page load and window resize
|
||||
window.addEventListener("DOMContentLoaded", adjustMainBodyOffset);
|
||||
window.addEventListener("resize", adjustMainBodyOffset);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
562
html/Test_5-navigate_test.html
Normal file
562
html/Test_5-navigate_test.html
Normal file
@@ -0,0 +1,562 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>/test</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<script src="markdown-it.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="theSideNav" class="navbar">
|
||||
<!-- Search bar container -->
|
||||
<div id="search-container">
|
||||
<input type="text" id="search-bar" placeholder="Search outputs..." autocomplete="off">
|
||||
<ul id="autocomplete-list"></ul>
|
||||
</div>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> reports</span>
|
||||
<ul id='folder-test_5-navigate-reports' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_reports.html#erc' class='navbar-output'>erc</a></li>
|
||||
<li><a href='Test_5-navigate_reports.html#drc' class='navbar-output'>drc</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> schematic</span>
|
||||
<ul id='folder-test_5-navigate-schematic' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_schematic.html#pdf_schematic' class='navbar-output'>pdf_schematic</a></li>
|
||||
<li><a href='Test_5-navigate_schematic.html#txt_schematic_notes' class='navbar-output'>txt_schematic_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> mfg</span>
|
||||
<ul id='folder-test_5-navigate-mfg' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> assembly</span>
|
||||
<ul id='folder-test_5-navigate_mfg-assembly' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_bom' class='navbar-output'>csv_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom' class='navbar-output'>html_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom_interactive' class='navbar-output'>html_bom_interactive</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_position' class='navbar-output'>csv_position</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#pdf_assembly' class='navbar-output'>pdf_assembly</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_comp_count' class='navbar-output'>csv_comp_count</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#txt_assembly_notes' class='navbar-output'>txt_assembly_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> fab</span>
|
||||
<ul id='folder-test_5-navigate_mfg-fab' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#gbr_gerbers' class='navbar-output'>gbr_gerbers</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#drl_excellon' class='navbar-output'>drl_excellon</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#pdf_drill_map' class='navbar-output'>pdf_drill_map</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_odb' class='navbar-output'>zip_odb</a></li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> drill-tables</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-drill-tables' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_drill-tables.html#csv_drill_table' class='navbar-output'>csv_drill_table</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#pdf_fabrication' class='navbar-output'>pdf_fabrication</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_compress_fab' class='navbar-output'>zip_compress_fab</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#csv_impedance_table' class='navbar-output'>csv_impedance_table</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#txt_fabrication_notes' class='navbar-output'>txt_fabrication_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> jlcpcb</span>
|
||||
<ul id='folder-test_5-navigate_mfg-jlcpcb' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_jlcpcb-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb_gerbers.html#jlcpcb_gerbers' class='navbar-output'>jlcpcb_gerbers</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_fabpack' class='navbar-output'>jlcpcb_fabpack</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_bom' class='navbar-output'>jlcpcb_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_cpl' class='navbar-output'>jlcpcb_cpl</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> kiri</span>
|
||||
<ul id='folder-test_5-navigate-kiri' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_kiri.html#html_kiri' class='navbar-output'>html_kiri</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> renders</span>
|
||||
<ul id='folder-test_5-navigate-renders' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_top' class='navbar-output'>pcbdraw_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_bottom' class='navbar-output'>pcbdraw_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_top' class='navbar-output'>png_3d_viewer_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_bottom' class='navbar-output'>png_3d_viewer_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_top' class='navbar-output'>png_3d_viewer_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_bottom' class='navbar-output'>png_3d_viewer_angled_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_top' class='navbar-output'>blender_3d_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_bottom' class='navbar-output'>blender_3d_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_top' class='navbar-output'>blender_3d_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_bottom' class='navbar-output'>blender_3d_angled_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> models</span>
|
||||
<ul id='folder-test_5-navigate-models' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_models.html#step' class='navbar-output'>step</a></li>
|
||||
<li><a href='Test_5-navigate_models.html#glb' class='navbar-output'>glb</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> test</span>
|
||||
<ul id='folder-test_5-navigate-test' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> testpoints</span>
|
||||
<ul id='folder-test_5-navigate_test-testpoints' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints' class='navbar-output'>csv_testpoints</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_top' class='navbar-output'>csv_testpoints_top</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_bottom' class='navbar-output'>csv_testpoints_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panels</span>
|
||||
<ul id='folder-test_5-navigate-panels' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panel-800</span>
|
||||
<ul id='folder-test_5-navigate_panels-panel-800' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_panels_panel-800.html#panel_801' class='navbar-output'>panel_801</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="topmenu" class="topmenu">
|
||||
<div style="display: flex; align-items: center; flex: 1; min-width: 0; gap: 10px;">
|
||||
<span id="open-navbar" style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
|
||||
<span id="close-navbar" style="font-size:30px;cursor:pointer;display:none;" onclick="closeNav()">⨉</span>
|
||||
<button id="back-button" onclick="history.back()" style="font-size:30px;">↩</button>
|
||||
<button id="forward-button" onclick="history.forward()" style="font-size:30px;">↪</button>
|
||||
<button id="up-button" onclick="location.href='Test_5-navigate.html'" style="font-size:44px; position: relative; top: -3px;">⌅</button>
|
||||
<button id="home-button" onclick="location.href='Test_5-navigate.html'" style="font-size:25px; position: relative; top: -2px;">🏠︎</button>
|
||||
|
||||
<span style="
|
||||
font-size:18px;
|
||||
color: var(--text-color-accent);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
">
|
||||
<a href="Test_5-navigate_test.html" style="text-decoration:none;color:inherit;">test</a>
|
||||
</span>
|
||||
</div>
|
||||
<div style="text-align: center; flex: 1; min-width: 200px;">
|
||||
<a href="https://git.asymworks.com/jkrauss/Test_5" style="text-decoration: none; color: inherit;">
|
||||
<span style="font-size:30px;">A99-9000 (Assembly Name)</span>
|
||||
</a>
|
||||
|
||||
<div style="
|
||||
font-size:14px;
|
||||
color: var(--text-color-accent);
|
||||
margin-top: 5px;">
|
||||
Asymworks, LLC
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; flex: 1; justify-content: flex-end; min-width: 0; gap: 10px; padding-right: 10px;">
|
||||
|
||||
<div style="
|
||||
text-align: left;
|
||||
font-size:14px;
|
||||
margin-right: 10px;
|
||||
color: var(--text-color-accent);">
|
||||
<div style="margin-bottom: 5px;">Rev. NO_TAG+ (Unreleased)</div>
|
||||
<div>Variant: </div>
|
||||
</div>
|
||||
<img src="images/logo.png" alt="Logo" style="max-height: 40px; max-width: 74.0px;">
|
||||
|
||||
<label class="theme-switch" style="
|
||||
position: relative;
|
||||
margin-right: 10px; /* Move toggle slightly left */
|
||||
max-width: 100%; /* Prevent overflow */
|
||||
">
|
||||
<input type="checkbox" id="themeToggle" onchange="toggleTheme()">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div class="items-container">
|
||||
<div>
|
||||
<div class="category-box" onclick="location.href='Test_5-navigate_test_testpoints.html'">
|
||||
<p class="category-title">testpoints</p>
|
||||
</div>
|
||||
</div></div>
|
||||
|
||||
<script>
|
||||
|
||||
// Side Navigation functions ===================================================
|
||||
|
||||
function openNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "360px";
|
||||
navbar.style.paddingLeft = "20px";
|
||||
main.style.marginLeft = "360px";
|
||||
document.getElementById("open-navbar").style.display = "none";
|
||||
document.getElementById("close-navbar").style.display = "inline-block";
|
||||
}
|
||||
|
||||
function closeNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "0"; // Close the navbar
|
||||
navbar.style.paddingLeft = "0"; // Reset padding
|
||||
main.style.marginLeft = "0"; // Reset page content position
|
||||
document.getElementById("open-navbar").style.display = "inline-block";
|
||||
document.getElementById("close-navbar").style.display = "none";
|
||||
}
|
||||
|
||||
function toggleFolder(folderHeader) {
|
||||
const folder = folderHeader.parentElement;
|
||||
const folderContents = folderHeader.nextElementSibling;
|
||||
|
||||
if (folder.classList.contains("open")) {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
} else {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
}
|
||||
|
||||
// Save the updated state
|
||||
saveSideNavState();
|
||||
}
|
||||
|
||||
function saveSideNavState() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const isOpen = navbar.style.width !== "0px"; // Check if navbar is open
|
||||
|
||||
// Save the state of each folder
|
||||
const folderStates = Array.from(document.querySelectorAll(".folder")).map(folder => ({
|
||||
id: folder.querySelector("span").textContent.trim(), // Use folder name as identifier
|
||||
isOpen: folder.classList.contains("open") // Check if folder is open
|
||||
}));
|
||||
|
||||
// Save the navbar and folder states to localStorage
|
||||
localStorage.setItem("navbarState", JSON.stringify({ isOpen, folderStates }));
|
||||
}
|
||||
|
||||
function restorenavbarState() {
|
||||
const savedState = localStorage.getItem("navbarState");
|
||||
if (savedState) {
|
||||
const { isOpen, folderStates } = JSON.parse(savedState);
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
// Temporarily disable animations on page load so elements don't move
|
||||
navbar.style.transition = "none";
|
||||
main.style.transition = "none";
|
||||
const chevrons = document.querySelectorAll(".chevron");
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "none";
|
||||
});
|
||||
|
||||
// Restore side navigation state
|
||||
if (isOpen) {
|
||||
openNav()
|
||||
} else {
|
||||
closeNav()
|
||||
}
|
||||
|
||||
// Restore folder open/closed states
|
||||
folderStates.forEach(({ id, isOpen }) => {
|
||||
const folder = Array.from(document.querySelectorAll(".folder"))
|
||||
.find(folder => folder.querySelector("span").textContent.trim() === id);
|
||||
|
||||
if (folder) {
|
||||
const folderContents = folder.querySelector(".folder-contents");
|
||||
if (isOpen) {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
} else {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Re-enable animation
|
||||
setTimeout(() => {
|
||||
navbar.style.transition = "";
|
||||
main.style.transition = "";
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "";
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function saveSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const scrollPosition = navbar.scrollTop;
|
||||
localStorage.setItem("navbarScrollPosition", scrollPosition);
|
||||
}
|
||||
|
||||
function restoreSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const savedPosition = localStorage.getItem("navbarScrollPosition");
|
||||
if (savedPosition !== null) {
|
||||
navbar.scrollTop = parseInt(savedPosition, 10);
|
||||
}
|
||||
}
|
||||
|
||||
function adjustSidenavOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
adjustSidenavOffset();
|
||||
window.addEventListener("resize", adjustSidenavOffset);
|
||||
|
||||
/* This is the scrolling offset when we click on an output in the side navigation bar
|
||||
It should take into account the top menu height */
|
||||
function adjustOutputOffset() {
|
||||
const topMenu = document.getElementById("topmenu"); // Replace with your top menu's ID
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight; // Dynamically get the top menu height
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", adjustOutputOffset);
|
||||
window.addEventListener("resize", adjustOutputOffset);
|
||||
|
||||
// Prevent flickering on page navigation
|
||||
window.addEventListener("beforeunload", () => {
|
||||
saveSideNavState();
|
||||
saveSidenavScrollPosition();
|
||||
});
|
||||
|
||||
window.addEventListener("load", restoreSidenavScrollPosition);
|
||||
document.addEventListener("DOMContentLoaded", restorenavbarState);
|
||||
|
||||
function initializeSearchBar(searchContainerId, outputSelector) {
|
||||
const searchContainer = document.getElementById(searchContainerId);
|
||||
if (!searchContainer) return; // Exit if container is not found
|
||||
|
||||
const searchBar = searchContainer.querySelector('#search-bar');
|
||||
const autocompleteList = searchContainer.querySelector('#autocomplete-list');
|
||||
const outputLinks = document.querySelectorAll(outputSelector);
|
||||
|
||||
// Collect output names and their hrefs
|
||||
const outputs = Array.from(outputLinks).map(link => ({
|
||||
name: link.textContent.trim(),
|
||||
href: link.getAttribute("href"),
|
||||
}));
|
||||
|
||||
let highlightedIndex = -1; // Index of the currently highlighted item
|
||||
|
||||
function adjustAutocompleteWidth() {
|
||||
const searchBarWidth = searchBar.offsetWidth;
|
||||
autocompleteList.style.width = `${searchBarWidth}px`;
|
||||
}
|
||||
|
||||
function updateAutocomplete(query) {
|
||||
autocompleteList.innerHTML = ""; // Clear suggestions
|
||||
highlightedIndex = -1; // Reset highlighting
|
||||
|
||||
const matches = outputs.filter(output =>
|
||||
output.name.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
|
||||
matches.forEach(match => {
|
||||
const listItem = document.createElement("li");
|
||||
listItem.textContent = match.name;
|
||||
listItem.addEventListener("click", () => {
|
||||
window.location.href = match.href;
|
||||
});
|
||||
autocompleteList.appendChild(listItem);
|
||||
});
|
||||
|
||||
autocompleteList.style.display = matches.length ? "block" : "none";
|
||||
}
|
||||
|
||||
function highlightItem(index) {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
items.forEach((item, i) => {
|
||||
if (i === index) {
|
||||
item.classList.add("highlighted");
|
||||
item.scrollIntoView({ block: "nearest" });
|
||||
} else {
|
||||
item.classList.remove("highlighted");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listeners for search bar input and keydown
|
||||
searchBar.addEventListener("input", () => {
|
||||
const query = searchBar.value.trim();
|
||||
if (query) updateAutocomplete(query);
|
||||
else {
|
||||
autocompleteList.innerHTML = "";
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
searchBar.addEventListener("keydown", (event) => {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
if (!items.length) return;
|
||||
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex + 1) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex - 1 + items.length) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "Enter" && highlightedIndex >= 0) {
|
||||
event.preventDefault();
|
||||
items[highlightedIndex].click();
|
||||
}
|
||||
});
|
||||
|
||||
// Hide suggestions when clicking outside
|
||||
document.addEventListener("click", (event) => {
|
||||
if (!searchBar.contains(event.target) && !autocompleteList.contains(event.target)) {
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
// Adjust width on window resize
|
||||
adjustAutocompleteWidth();
|
||||
window.addEventListener("resize", adjustAutocompleteWidth);
|
||||
}
|
||||
|
||||
// Initialize search functionality
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
initializeSearchBar("search-container", ".navbar-output");
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const md = window.markdownit({
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true
|
||||
});
|
||||
|
||||
// Find all markdown containers and render them
|
||||
document.querySelectorAll('.markdown-content').forEach(container => {
|
||||
const rawMarkdown = container.innerHTML;
|
||||
container.style.display = 'block';
|
||||
container.innerHTML = md.render(rawMarkdown);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Theme toggle ================================================================
|
||||
|
||||
function toggleTheme() {
|
||||
const body = document.body;
|
||||
|
||||
// Check if the current theme is dark
|
||||
const isDark = body.classList.contains('dark-mode');
|
||||
|
||||
// Toggle between dark and light themes
|
||||
if (isDark) {
|
||||
body.classList.remove('dark-mode');
|
||||
body.classList.add('light-mode');
|
||||
} else {
|
||||
body.classList.remove('light-mode');
|
||||
body.classList.add('dark-mode');
|
||||
}
|
||||
|
||||
// Save the selected theme to localStorage
|
||||
localStorage.setItem('theme', isDark ? 'light' : 'dark');
|
||||
}
|
||||
|
||||
// Do not animate theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
const toggleSpan = themeToggle.nextElementSibling; // The <span> element
|
||||
|
||||
// Prevent animation on page load
|
||||
const savedTheme = localStorage.getItem('theme') || 'dark';
|
||||
document.body.classList.add(savedTheme === 'dark' ? 'dark-mode' : 'light-mode');
|
||||
themeToggle.checked = savedTheme === 'dark';
|
||||
|
||||
// Add the "animate" class on user interaction
|
||||
themeToggle.addEventListener('change', () => {
|
||||
toggleSpan.classList.add('animate');
|
||||
setTimeout(() => {
|
||||
toggleSpan.classList.remove('animate'); // Remove the animation class after completion
|
||||
}, 400); // Match the CSS transition duration (0.4s)
|
||||
});
|
||||
});
|
||||
|
||||
// Avoid flickering of theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const body = document.body;
|
||||
|
||||
// Temporarily disable transitions during page load
|
||||
body.classList.add('no-transition');
|
||||
|
||||
// Remove the no-transition class after the page is fully loaded
|
||||
setTimeout(() => {
|
||||
body.classList.remove('no-transition');
|
||||
}, 50); // Allow rendering to complete before enabling transitions
|
||||
});
|
||||
|
||||
function adjustMainBodyOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const mainBody = document.getElementById("main");
|
||||
|
||||
if (topMenu && mainBody) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
mainBody.style.marginTop = `${topMenuHeight}px`;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply the adjustment on page load and window resize
|
||||
window.addEventListener("DOMContentLoaded", adjustMainBodyOffset);
|
||||
window.addEventListener("resize", adjustMainBodyOffset);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
589
html/Test_5-navigate_test_testpoints.html
Normal file
589
html/Test_5-navigate_test_testpoints.html
Normal file
@@ -0,0 +1,589 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>/test/testpoints</title>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<link rel="icon" href="favicon.ico">
|
||||
<script src="markdown-it.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="theSideNav" class="navbar">
|
||||
<!-- Search bar container -->
|
||||
<div id="search-container">
|
||||
<input type="text" id="search-bar" placeholder="Search outputs..." autocomplete="off">
|
||||
<ul id="autocomplete-list"></ul>
|
||||
</div>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> reports</span>
|
||||
<ul id='folder-test_5-navigate-reports' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_reports.html#erc' class='navbar-output'>erc</a></li>
|
||||
<li><a href='Test_5-navigate_reports.html#drc' class='navbar-output'>drc</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> schematic</span>
|
||||
<ul id='folder-test_5-navigate-schematic' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_schematic.html#pdf_schematic' class='navbar-output'>pdf_schematic</a></li>
|
||||
<li><a href='Test_5-navigate_schematic.html#txt_schematic_notes' class='navbar-output'>txt_schematic_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> mfg</span>
|
||||
<ul id='folder-test_5-navigate-mfg' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> assembly</span>
|
||||
<ul id='folder-test_5-navigate_mfg-assembly' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_bom' class='navbar-output'>csv_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom' class='navbar-output'>html_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#html_bom_interactive' class='navbar-output'>html_bom_interactive</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_position' class='navbar-output'>csv_position</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#pdf_assembly' class='navbar-output'>pdf_assembly</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#csv_comp_count' class='navbar-output'>csv_comp_count</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_assembly.html#txt_assembly_notes' class='navbar-output'>txt_assembly_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> fab</span>
|
||||
<ul id='folder-test_5-navigate_mfg-fab' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#gbr_gerbers' class='navbar-output'>gbr_gerbers</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#drl_excellon' class='navbar-output'>drl_excellon</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab_gerbers.html#pdf_drill_map' class='navbar-output'>pdf_drill_map</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_odb' class='navbar-output'>zip_odb</a></li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> drill-tables</span>
|
||||
<ul id='folder-test_5-navigate_mfg_fab-drill-tables' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_fab_drill-tables.html#csv_drill_table' class='navbar-output'>csv_drill_table</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#pdf_fabrication' class='navbar-output'>pdf_fabrication</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#zip_compress_fab' class='navbar-output'>zip_compress_fab</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#csv_impedance_table' class='navbar-output'>csv_impedance_table</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_fab.html#txt_fabrication_notes' class='navbar-output'>txt_fabrication_notes</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> jlcpcb</span>
|
||||
<ul id='folder-test_5-navigate_mfg-jlcpcb' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> gerbers</span>
|
||||
<ul id='folder-test_5-navigate_mfg_jlcpcb-gerbers' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb_gerbers.html#jlcpcb_gerbers' class='navbar-output'>jlcpcb_gerbers</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_fabpack' class='navbar-output'>jlcpcb_fabpack</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_bom' class='navbar-output'>jlcpcb_bom</a></li>
|
||||
<li><a href='Test_5-navigate_mfg_jlcpcb.html#jlcpcb_cpl' class='navbar-output'>jlcpcb_cpl</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> kiri</span>
|
||||
<ul id='folder-test_5-navigate-kiri' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_kiri.html#html_kiri' class='navbar-output'>html_kiri</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> renders</span>
|
||||
<ul id='folder-test_5-navigate-renders' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_top' class='navbar-output'>pcbdraw_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#pcbdraw_bottom' class='navbar-output'>pcbdraw_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_top' class='navbar-output'>png_3d_viewer_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_bottom' class='navbar-output'>png_3d_viewer_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_top' class='navbar-output'>png_3d_viewer_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#png_3d_viewer_angled_bottom' class='navbar-output'>png_3d_viewer_angled_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_top' class='navbar-output'>blender_3d_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_bottom' class='navbar-output'>blender_3d_bottom</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_top' class='navbar-output'>blender_3d_angled_top</a></li>
|
||||
<li><a href='Test_5-navigate_renders.html#blender_3d_angled_bottom' class='navbar-output'>blender_3d_angled_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> models</span>
|
||||
<ul id='folder-test_5-navigate-models' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_models.html#step' class='navbar-output'>step</a></li>
|
||||
<li><a href='Test_5-navigate_models.html#glb' class='navbar-output'>glb</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> test</span>
|
||||
<ul id='folder-test_5-navigate-test' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> testpoints</span>
|
||||
<ul id='folder-test_5-navigate_test-testpoints' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints' class='navbar-output'>csv_testpoints</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_top' class='navbar-output'>csv_testpoints_top</a></li>
|
||||
<li><a href='Test_5-navigate_test_testpoints.html#csv_testpoints_bottom' class='navbar-output'>csv_testpoints_bottom</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panels</span>
|
||||
<ul id='folder-test_5-navigate-panels' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li class='folder'><span onclick='toggleFolder(this)'><span class='chevron'></span> panel-800</span>
|
||||
<ul id='folder-test_5-navigate_panels-panel-800' class='folder-contents' style='display:none;'>
|
||||
<ul class='navbar-category'>
|
||||
<li><a href='Test_5-navigate_panels_panel-800.html#panel_801' class='navbar-output'>panel_801</a></li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="topmenu" class="topmenu">
|
||||
<div style="display: flex; align-items: center; flex: 1; min-width: 0; gap: 10px;">
|
||||
<span id="open-navbar" style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
|
||||
<span id="close-navbar" style="font-size:30px;cursor:pointer;display:none;" onclick="closeNav()">⨉</span>
|
||||
<button id="back-button" onclick="history.back()" style="font-size:30px;">↩</button>
|
||||
<button id="forward-button" onclick="history.forward()" style="font-size:30px;">↪</button>
|
||||
<button id="up-button" onclick="location.href='Test_5-navigate_test.html'" style="font-size:44px; position: relative; top: -3px;">⌅</button>
|
||||
<button id="home-button" onclick="location.href='Test_5-navigate.html'" style="font-size:25px; position: relative; top: -2px;">🏠︎</button>
|
||||
|
||||
<span style="
|
||||
font-size:18px;
|
||||
color: var(--text-color-accent);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
">
|
||||
<a href="Test_5-navigate_test.html" style="text-decoration:none;color:inherit;">test</a>/<wbr><a href="Test_5-navigate_test_testpoints.html" style="text-decoration:none;color:inherit;">testpoints</a>
|
||||
</span>
|
||||
</div>
|
||||
<div style="text-align: center; flex: 1; min-width: 200px;">
|
||||
<a href="https://git.asymworks.com/jkrauss/Test_5" style="text-decoration: none; color: inherit;">
|
||||
<span style="font-size:30px;">A99-9000 (Assembly Name)</span>
|
||||
</a>
|
||||
|
||||
<div style="
|
||||
font-size:14px;
|
||||
color: var(--text-color-accent);
|
||||
margin-top: 5px;">
|
||||
Asymworks, LLC
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; flex: 1; justify-content: flex-end; min-width: 0; gap: 10px; padding-right: 10px;">
|
||||
|
||||
<div style="
|
||||
text-align: left;
|
||||
font-size:14px;
|
||||
margin-right: 10px;
|
||||
color: var(--text-color-accent);">
|
||||
<div style="margin-bottom: 5px;">Rev. NO_TAG+ (Unreleased)</div>
|
||||
<div>Variant: </div>
|
||||
</div>
|
||||
<img src="images/logo.png" alt="Logo" style="max-height: 40px; max-width: 74.0px;">
|
||||
|
||||
<label class="theme-switch" style="
|
||||
position: relative;
|
||||
margin-right: 10px; /* Move toggle slightly left */
|
||||
max-width: 100%; /* Prevent overflow */
|
||||
">
|
||||
<input type="checkbox" id="themeToggle" onchange="toggleTheme()">
|
||||
<span></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<div class="output-virtual-box" id="csv_testpoints">
|
||||
<div class="output-comment">Testpoint report in CSV format</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../test/testpoints/Test_5-testpoints.csv'">
|
||||
<img src="images/file_csv_64.png" alt="Test_5-testpoints.csv" width="64" height="64">
|
||||
<p class="filename">Test_5-testpoints.csv</p>
|
||||
<p class="output-name">csv_testpoints</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="csv_testpoints_top">
|
||||
<div class="output-comment">Top testpoint report in CSV format</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../test/testpoints/Test_5-testpoints-top.csv'">
|
||||
<img src="images/file_csv_64.png" alt="Test_5-testpoints-top.csv" width="64" height="64">
|
||||
<p class="filename">Test_5-testpoints-top.csv</p>
|
||||
<p class="output-name">csv_testpoints_top</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="output-virtual-box" id="csv_testpoints_bottom">
|
||||
<div class="output-comment">Bottom testpoint report in CSV format</div>
|
||||
<div class="items-container">
|
||||
|
||||
<div class="output-box " onclick="location.href='../test/testpoints/Test_5-testpoints-bottom.csv'">
|
||||
<img src="images/file_csv_64.png" alt="Test_5-testpoints-bottom.csv" width="64" height="64">
|
||||
<p class="filename">Test_5-testpoints-bottom.csv</p>
|
||||
<p class="output-name">csv_testpoints_bottom</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
// Side Navigation functions ===================================================
|
||||
|
||||
function openNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "360px";
|
||||
navbar.style.paddingLeft = "20px";
|
||||
main.style.marginLeft = "360px";
|
||||
document.getElementById("open-navbar").style.display = "none";
|
||||
document.getElementById("close-navbar").style.display = "inline-block";
|
||||
}
|
||||
|
||||
function closeNav() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
navbar.style.width = "0"; // Close the navbar
|
||||
navbar.style.paddingLeft = "0"; // Reset padding
|
||||
main.style.marginLeft = "0"; // Reset page content position
|
||||
document.getElementById("open-navbar").style.display = "inline-block";
|
||||
document.getElementById("close-navbar").style.display = "none";
|
||||
}
|
||||
|
||||
function toggleFolder(folderHeader) {
|
||||
const folder = folderHeader.parentElement;
|
||||
const folderContents = folderHeader.nextElementSibling;
|
||||
|
||||
if (folder.classList.contains("open")) {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
} else {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
}
|
||||
|
||||
// Save the updated state
|
||||
saveSideNavState();
|
||||
}
|
||||
|
||||
function saveSideNavState() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const isOpen = navbar.style.width !== "0px"; // Check if navbar is open
|
||||
|
||||
// Save the state of each folder
|
||||
const folderStates = Array.from(document.querySelectorAll(".folder")).map(folder => ({
|
||||
id: folder.querySelector("span").textContent.trim(), // Use folder name as identifier
|
||||
isOpen: folder.classList.contains("open") // Check if folder is open
|
||||
}));
|
||||
|
||||
// Save the navbar and folder states to localStorage
|
||||
localStorage.setItem("navbarState", JSON.stringify({ isOpen, folderStates }));
|
||||
}
|
||||
|
||||
function restorenavbarState() {
|
||||
const savedState = localStorage.getItem("navbarState");
|
||||
if (savedState) {
|
||||
const { isOpen, folderStates } = JSON.parse(savedState);
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
// Temporarily disable animations on page load so elements don't move
|
||||
navbar.style.transition = "none";
|
||||
main.style.transition = "none";
|
||||
const chevrons = document.querySelectorAll(".chevron");
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "none";
|
||||
});
|
||||
|
||||
// Restore side navigation state
|
||||
if (isOpen) {
|
||||
openNav()
|
||||
} else {
|
||||
closeNav()
|
||||
}
|
||||
|
||||
// Restore folder open/closed states
|
||||
folderStates.forEach(({ id, isOpen }) => {
|
||||
const folder = Array.from(document.querySelectorAll(".folder"))
|
||||
.find(folder => folder.querySelector("span").textContent.trim() === id);
|
||||
|
||||
if (folder) {
|
||||
const folderContents = folder.querySelector(".folder-contents");
|
||||
if (isOpen) {
|
||||
folder.classList.add("open");
|
||||
folderContents.style.display = "block";
|
||||
} else {
|
||||
folder.classList.remove("open");
|
||||
folderContents.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Re-enable animation
|
||||
setTimeout(() => {
|
||||
navbar.style.transition = "";
|
||||
main.style.transition = "";
|
||||
chevrons.forEach(chevron => {
|
||||
chevron.style.transition = "";
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
|
||||
function saveSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const scrollPosition = navbar.scrollTop;
|
||||
localStorage.setItem("navbarScrollPosition", scrollPosition);
|
||||
}
|
||||
|
||||
function restoreSidenavScrollPosition() {
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
const savedPosition = localStorage.getItem("navbarScrollPosition");
|
||||
if (savedPosition !== null) {
|
||||
navbar.scrollTop = parseInt(savedPosition, 10);
|
||||
}
|
||||
}
|
||||
|
||||
function adjustSidenavOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const navbar = document.getElementById("theSideNav");
|
||||
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
adjustSidenavOffset();
|
||||
window.addEventListener("resize", adjustSidenavOffset);
|
||||
|
||||
/* This is the scrolling offset when we click on an output in the side navigation bar
|
||||
It should take into account the top menu height */
|
||||
function adjustOutputOffset() {
|
||||
const topMenu = document.getElementById("topmenu"); // Replace with your top menu's ID
|
||||
if (topMenu) {
|
||||
const topMenuHeight = topMenu.offsetHeight; // Dynamically get the top menu height
|
||||
document.documentElement.style.setProperty('--top-menu-height', `${topMenuHeight}px`);
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("DOMContentLoaded", adjustOutputOffset);
|
||||
window.addEventListener("resize", adjustOutputOffset);
|
||||
|
||||
// Prevent flickering on page navigation
|
||||
window.addEventListener("beforeunload", () => {
|
||||
saveSideNavState();
|
||||
saveSidenavScrollPosition();
|
||||
});
|
||||
|
||||
window.addEventListener("load", restoreSidenavScrollPosition);
|
||||
document.addEventListener("DOMContentLoaded", restorenavbarState);
|
||||
|
||||
function initializeSearchBar(searchContainerId, outputSelector) {
|
||||
const searchContainer = document.getElementById(searchContainerId);
|
||||
if (!searchContainer) return; // Exit if container is not found
|
||||
|
||||
const searchBar = searchContainer.querySelector('#search-bar');
|
||||
const autocompleteList = searchContainer.querySelector('#autocomplete-list');
|
||||
const outputLinks = document.querySelectorAll(outputSelector);
|
||||
|
||||
// Collect output names and their hrefs
|
||||
const outputs = Array.from(outputLinks).map(link => ({
|
||||
name: link.textContent.trim(),
|
||||
href: link.getAttribute("href"),
|
||||
}));
|
||||
|
||||
let highlightedIndex = -1; // Index of the currently highlighted item
|
||||
|
||||
function adjustAutocompleteWidth() {
|
||||
const searchBarWidth = searchBar.offsetWidth;
|
||||
autocompleteList.style.width = `${searchBarWidth}px`;
|
||||
}
|
||||
|
||||
function updateAutocomplete(query) {
|
||||
autocompleteList.innerHTML = ""; // Clear suggestions
|
||||
highlightedIndex = -1; // Reset highlighting
|
||||
|
||||
const matches = outputs.filter(output =>
|
||||
output.name.toLowerCase().includes(query.toLowerCase())
|
||||
);
|
||||
|
||||
matches.forEach(match => {
|
||||
const listItem = document.createElement("li");
|
||||
listItem.textContent = match.name;
|
||||
listItem.addEventListener("click", () => {
|
||||
window.location.href = match.href;
|
||||
});
|
||||
autocompleteList.appendChild(listItem);
|
||||
});
|
||||
|
||||
autocompleteList.style.display = matches.length ? "block" : "none";
|
||||
}
|
||||
|
||||
function highlightItem(index) {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
items.forEach((item, i) => {
|
||||
if (i === index) {
|
||||
item.classList.add("highlighted");
|
||||
item.scrollIntoView({ block: "nearest" });
|
||||
} else {
|
||||
item.classList.remove("highlighted");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Add event listeners for search bar input and keydown
|
||||
searchBar.addEventListener("input", () => {
|
||||
const query = searchBar.value.trim();
|
||||
if (query) updateAutocomplete(query);
|
||||
else {
|
||||
autocompleteList.innerHTML = "";
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
searchBar.addEventListener("keydown", (event) => {
|
||||
const items = autocompleteList.querySelectorAll("li");
|
||||
if (!items.length) return;
|
||||
|
||||
if (event.key === "ArrowDown") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex + 1) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "ArrowUp") {
|
||||
event.preventDefault();
|
||||
highlightedIndex = (highlightedIndex - 1 + items.length) % items.length;
|
||||
highlightItem(highlightedIndex);
|
||||
} else if (event.key === "Enter" && highlightedIndex >= 0) {
|
||||
event.preventDefault();
|
||||
items[highlightedIndex].click();
|
||||
}
|
||||
});
|
||||
|
||||
// Hide suggestions when clicking outside
|
||||
document.addEventListener("click", (event) => {
|
||||
if (!searchBar.contains(event.target) && !autocompleteList.contains(event.target)) {
|
||||
autocompleteList.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
// Adjust width on window resize
|
||||
adjustAutocompleteWidth();
|
||||
window.addEventListener("resize", adjustAutocompleteWidth);
|
||||
}
|
||||
|
||||
// Initialize search functionality
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
initializeSearchBar("search-container", ".navbar-output");
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const md = window.markdownit({
|
||||
html: true,
|
||||
linkify: true,
|
||||
typographer: true
|
||||
});
|
||||
|
||||
// Find all markdown containers and render them
|
||||
document.querySelectorAll('.markdown-content').forEach(container => {
|
||||
const rawMarkdown = container.innerHTML;
|
||||
container.style.display = 'block';
|
||||
container.innerHTML = md.render(rawMarkdown);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// Theme toggle ================================================================
|
||||
|
||||
function toggleTheme() {
|
||||
const body = document.body;
|
||||
|
||||
// Check if the current theme is dark
|
||||
const isDark = body.classList.contains('dark-mode');
|
||||
|
||||
// Toggle between dark and light themes
|
||||
if (isDark) {
|
||||
body.classList.remove('dark-mode');
|
||||
body.classList.add('light-mode');
|
||||
} else {
|
||||
body.classList.remove('light-mode');
|
||||
body.classList.add('dark-mode');
|
||||
}
|
||||
|
||||
// Save the selected theme to localStorage
|
||||
localStorage.setItem('theme', isDark ? 'light' : 'dark');
|
||||
}
|
||||
|
||||
// Do not animate theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const themeToggle = document.getElementById('themeToggle');
|
||||
const toggleSpan = themeToggle.nextElementSibling; // The <span> element
|
||||
|
||||
// Prevent animation on page load
|
||||
const savedTheme = localStorage.getItem('theme') || 'dark';
|
||||
document.body.classList.add(savedTheme === 'dark' ? 'dark-mode' : 'light-mode');
|
||||
themeToggle.checked = savedTheme === 'dark';
|
||||
|
||||
// Add the "animate" class on user interaction
|
||||
themeToggle.addEventListener('change', () => {
|
||||
toggleSpan.classList.add('animate');
|
||||
setTimeout(() => {
|
||||
toggleSpan.classList.remove('animate'); // Remove the animation class after completion
|
||||
}, 400); // Match the CSS transition duration (0.4s)
|
||||
});
|
||||
});
|
||||
|
||||
// Avoid flickering of theme toggle on page load
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
const body = document.body;
|
||||
|
||||
// Temporarily disable transitions during page load
|
||||
body.classList.add('no-transition');
|
||||
|
||||
// Remove the no-transition class after the page is fully loaded
|
||||
setTimeout(() => {
|
||||
body.classList.remove('no-transition');
|
||||
}, 50); // Allow rendering to complete before enabling transitions
|
||||
});
|
||||
|
||||
function adjustMainBodyOffset() {
|
||||
const topMenu = document.getElementById("topmenu");
|
||||
const mainBody = document.getElementById("main");
|
||||
|
||||
if (topMenu && mainBody) {
|
||||
const topMenuHeight = topMenu.offsetHeight;
|
||||
mainBody.style.marginTop = `${topMenuHeight}px`;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply the adjustment on page load and window resize
|
||||
window.addEventListener("DOMContentLoaded", adjustMainBodyOffset);
|
||||
window.addEventListener("resize", adjustMainBodyOffset);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
BIN
html/favicon.ico
Normal file
BIN
html/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
html/images/back_64.png
Normal file
BIN
html/images/back_64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
BIN
html/images/cat_blender_3d_bottom_Test_5-blender_3d_bottom.png
Normal file
BIN
html/images/cat_blender_3d_bottom_Test_5-blender_3d_bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 196 KiB |
BIN
html/images/cat_blender_3d_top_Test_5-blender_3d_top.png
Normal file
BIN
html/images/cat_blender_3d_top_Test_5-blender_3d_top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
BIN
html/images/cat_panel_801_Test_5-panel_801.png
Normal file
BIN
html/images/cat_panel_801_Test_5-panel_801.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
html/images/cat_pcbdraw_bottom_Test_5-pcbdraw_bottom.png
Normal file
BIN
html/images/cat_pcbdraw_bottom_Test_5-pcbdraw_bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
html/images/cat_pcbdraw_top_Test_5-pcbdraw_top.png
Normal file
BIN
html/images/cat_pcbdraw_top_Test_5-pcbdraw_top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
html/images/cat_pdf_assembly_Test_5-assembly.png
Normal file
BIN
html/images/cat_pdf_assembly_Test_5-assembly.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
html/images/cat_pdf_drill_map_Test_5--npth_map.png
Normal file
BIN
html/images/cat_pdf_drill_map_Test_5--npth_map.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
html/images/cat_pdf_drill_map_Test_5--pth_map.png
Normal file
BIN
html/images/cat_pdf_drill_map_Test_5--pth_map.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
html/images/cat_pdf_fabrication_Test_5-fabrication.png
Normal file
BIN
html/images/cat_pdf_fabrication_Test_5-fabrication.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
BIN
html/images/cat_pdf_schematic_Test_5-schematic.png
Normal file
BIN
html/images/cat_pdf_schematic_Test_5-schematic.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 90 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
BIN
html/images/cat_png_3d_viewer_angled_top_Test_5-angled_top.png
Normal file
BIN
html/images/cat_png_3d_viewer_angled_top_Test_5-angled_top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 141 KiB |
BIN
html/images/cat_png_3d_viewer_bottom_Test_5-bottom.png
Normal file
BIN
html/images/cat_png_3d_viewer_bottom_Test_5-bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
BIN
html/images/cat_png_3d_viewer_top_Test_5-top.png
Normal file
BIN
html/images/cat_png_3d_viewer_top_Test_5-top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
BIN
html/images/drc.svg_64.png
Normal file
BIN
html/images/drc.svg_64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
html/images/erc.svg_64.png
Normal file
BIN
html/images/erc.svg_64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
html/images/file_csv_64.png
Normal file
BIN
html/images/file_csv_64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
html/images/file_drl_64.png
Normal file
BIN
html/images/file_drl_64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
html/images/file_gbr_64.png
Normal file
BIN
html/images/file_gbr_64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
html/images/file_glb_64.png
Normal file
BIN
html/images/file_glb_64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
html/images/file_html_64.png
Normal file
BIN
html/images/file_html_64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
html/images/file_pcb3d_64.png
Normal file
BIN
html/images/file_pcb3d_64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
html/images/file_pdf_64.png
Normal file
BIN
html/images/file_pdf_64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
html/images/file_png_64.png
Normal file
BIN
html/images/file_png_64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
html/images/file_stp_64.png
Normal file
BIN
html/images/file_stp_64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
html/images/file_svg_64.png
Normal file
BIN
html/images/file_svg_64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
html/images/file_txt_64.png
Normal file
BIN
html/images/file_txt_64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
html/images/file_zip_64.png
Normal file
BIN
html/images/file_zip_64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
html/images/home_64.png
Normal file
BIN
html/images/home_64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
BIN
html/images/ibom_64.png
Normal file
BIN
html/images/ibom_64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
BIN
html/images/icon.svg_64.png
Normal file
BIN
html/images/icon.svg_64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
html/images/logo.png
Normal file
BIN
html/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
BIN
html/images/pcbnew_64.png
Normal file
BIN
html/images/pcbnew_64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
html/images/unknown_64.png
Normal file
BIN
html/images/unknown_64.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
2
html/markdown-it.min.js
vendored
Normal file
2
html/markdown-it.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
981
html/styles.css
Normal file
981
html/styles.css
Normal file
@@ -0,0 +1,981 @@
|
||||
|
||||
|
||||
/* Colors =================================================================== */
|
||||
|
||||
:root {
|
||||
--light-bg-color: #ffffff;
|
||||
--dark-bg-color: #1e1e2f;
|
||||
--light-bg-color-banner: #dfdfdf;
|
||||
--dark-bg-color-banner: #27293d;
|
||||
--light-text-color: #444444;
|
||||
--dark-text-color: #e5e5e5;
|
||||
--light-hover-color: #902ec9;
|
||||
--light-hover-color-act: #652f85;
|
||||
--dark-hover-color: #ffa500;
|
||||
--dark-hover-color-act: #cc8400;
|
||||
--dark-text-color-accent: #a3a3c2;
|
||||
--light-text-color-accent: #444444;
|
||||
--light-banner-hover: #b0b0b0;
|
||||
--dark-banner-hover: #383b4b;
|
||||
--text-color-accent: #a3a3c2;
|
||||
}
|
||||
|
||||
/* Main body ================================================================ */
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color: var(--dark-bg-color);
|
||||
color: var(--dark-text-color);
|
||||
transition:
|
||||
background-color 0.4s ease,
|
||||
color 0.4s ease,
|
||||
transition: scrollbar-color 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
body.dark-mode {
|
||||
--text-color-accent: var(--dark-text-color-accent);
|
||||
background-color: var(--dark-bg-color);
|
||||
color: var(--dark-text-color);
|
||||
}
|
||||
|
||||
body.light-mode {
|
||||
--text-color-accent: var(--light-text-color-accent);
|
||||
background-color: var(--light-bg-color);
|
||||
color: var(--light-text-color);
|
||||
}
|
||||
|
||||
/* Top Menu ================================================================= */
|
||||
|
||||
/* Layout is as follows */
|
||||
/* [X/☰] [↩] [↪] <Category Path> <Title> (Logo) [☾/☀] [🏠︎] */
|
||||
|
||||
#topmenu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
background-color: var(--dark-bg-color-banner);
|
||||
padding: 10px 0;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
transition: background-color 0.2s ease, color 0.2s ease;
|
||||
}
|
||||
|
||||
body.light-mode #topmenu {
|
||||
background-color: var(--light-bg-color-banner);
|
||||
}
|
||||
|
||||
body.dark-mode #topmenu {
|
||||
background-color: var(--dark-bg-color-banner);
|
||||
}
|
||||
|
||||
/* Buttons ================================================================== */
|
||||
|
||||
/* button corresponds to the navigation buttons (forward, backward, home) */
|
||||
|
||||
button, #open-navbar, #close-navbar {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--dark-text-color);
|
||||
cursor: pointer;
|
||||
transition: color 0.3s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
body.light-mode #topmenu button,
|
||||
body.light-mode #topmenu #open-navbar,
|
||||
body.light-mode #topmenu #close-navbar {
|
||||
color: var(--light-text-color);
|
||||
}
|
||||
|
||||
body.dark-mode #topmenu button,
|
||||
body.dark-mode #topmenu #open-navbar,
|
||||
body.dark-mode #topmenu #close-navbar {
|
||||
color: var(--dark-text-color);
|
||||
}
|
||||
|
||||
button {
|
||||
font-size: 20px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
#open-navbar, #close-navbar {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
/* Hover effects */
|
||||
|
||||
button:hover, #open-navbar:hover, #close-navbar:hover {
|
||||
color: var(--dark-hover-color);
|
||||
}
|
||||
|
||||
body.dark-mode #topmenu button:hover,
|
||||
body.dark-mode #topmenu #open-navbar:hover,
|
||||
body.dark-mode #topmenu #close-navbar:hover {
|
||||
color: var(--dark-hover-color);
|
||||
}
|
||||
|
||||
body.light-mode #topmenu button:hover,
|
||||
body.light-mode #topmenu #open-navbar:hover,
|
||||
body.light-mode #topmenu #close-navbar:hover {
|
||||
color: var(--light-hover-color);
|
||||
}
|
||||
|
||||
/* Active effects */
|
||||
|
||||
button:active, #open-navbar:active, #close-navbar:active {
|
||||
color: var(--dark-hover-color-act);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
body.dark-mode #topmenu button:active,
|
||||
body.dark-mode #topmenu #open-navbar:active,
|
||||
body.dark-mode #topmenu #close-navbar:active {
|
||||
color: var(--dark-hover-color-act);
|
||||
}
|
||||
|
||||
body.light-mode #topmenu button:active,
|
||||
body.light-mode #topmenu #open-navbar:active,
|
||||
body.light-mode #topmenu #close-navbar:active {
|
||||
color: var(--light-hover-color-act);
|
||||
}
|
||||
|
||||
/* Sidebar Navigation ======================================================= */
|
||||
|
||||
.navbar {
|
||||
position: fixed;
|
||||
width: 0; /* Initially collapsed */
|
||||
height: calc(100% - var(--top-menu-height, 60px));
|
||||
top: var(--top-menu-height, 60px);
|
||||
left: 0;
|
||||
background-color: #27293d;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
transition:
|
||||
width 0.5s ease,
|
||||
padding-left 0.5s ease,
|
||||
scrollbar-color 0.2s ease-in-out,
|
||||
background-color 0.2s ease-in-out;
|
||||
box-sizing: border-box;
|
||||
padding-top: 0;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
|
||||
body.dark-mode .navbar {
|
||||
background-color: var(--dark-bg-color-banner);
|
||||
}
|
||||
|
||||
body.light-mode .navbar {
|
||||
background-color: var(--light-bg-color-banner);
|
||||
}
|
||||
|
||||
.navbar > ul:first-child {
|
||||
margin-top: 20px; /* Padding between top menu and first element of navbar */
|
||||
}
|
||||
|
||||
/* Side Navigation Outputs -------------------------------------------------- */
|
||||
|
||||
.navbar-output {
|
||||
padding: 8px 30px;
|
||||
text-decoration: none;
|
||||
font-size: 16px;
|
||||
color: var(--dark-text-color);
|
||||
display: block;
|
||||
transition: color 0.3s ease;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
body.light-mode .navbar-output {
|
||||
color: var(--light-text-color);
|
||||
}
|
||||
|
||||
body.dark-mode .navbar-output {
|
||||
color: var(--dark-text-color);
|
||||
}
|
||||
|
||||
/* Hover effects */
|
||||
|
||||
.navbar-output:hover {
|
||||
color: var(--dark-hover-color);
|
||||
background-color: var(--dark-banner-hover);
|
||||
}
|
||||
|
||||
body.dark-mode .navbar-output:hover {
|
||||
color: var(--dark-hover-color);
|
||||
background-color: var(--dark-banner-hover);
|
||||
}
|
||||
|
||||
body.light-mode .navbar-output:hover {
|
||||
color: var(--light-hover-color);
|
||||
background-color: var(--light-banner-hover);
|
||||
}
|
||||
|
||||
/* Active effects */
|
||||
|
||||
.navbar-output:active {
|
||||
color: var(--dark-hover-color-act);
|
||||
}
|
||||
|
||||
body.dark-mode .navbar-output:active {
|
||||
color: var(--dark-hover-color-act);
|
||||
}
|
||||
|
||||
body.light-mode .navbar-output:active {
|
||||
color: var(--light-hover-color-act);
|
||||
}
|
||||
|
||||
/* Side Navigation Categories ----------------------------------------------- */
|
||||
|
||||
.navbar-category {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
user-select: none; /* Prevent text selection */
|
||||
}
|
||||
|
||||
.navbar-category .folder > span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
color: var(--dark-text-color-accent);
|
||||
padding: 10px 20px;
|
||||
margin-bottom: 0px;
|
||||
width: 100%;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.navbar-category .folder-contents {
|
||||
list-style: none;
|
||||
margin-left: 20px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body.dark-mode .navbar-category .folder > span {
|
||||
color: var(--dark-text-color-accent);
|
||||
}
|
||||
|
||||
body.light-mode .navbar-category .folder > span {
|
||||
color: var(--light-text-color);
|
||||
}
|
||||
|
||||
/* Hover effects */
|
||||
|
||||
.navbar-category .folder > span:hover {
|
||||
background-color: var(--dark-banner-hover);
|
||||
color: var(--dark-hover-color);
|
||||
}
|
||||
|
||||
body.dark-mode .navbar-category .folder > span:hover {
|
||||
color: var(--dark-hover-color);
|
||||
background-color: var(--dark-banner-hover);
|
||||
}
|
||||
|
||||
body.light-mode .navbar-category .folder > span:hover {
|
||||
color: var(--light-hover-color);
|
||||
background-color: var(--light-banner-hover);
|
||||
}
|
||||
|
||||
/* Active effects */
|
||||
|
||||
.navbar-category .folder > span:active {
|
||||
color: var(--dark-hover-color);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
body.dark-mode .navbar-category .folder > span:active {
|
||||
color: var(--dark-hover-color-act);
|
||||
}
|
||||
|
||||
body.light-mode .navbar-category .folder > span:active {
|
||||
color: var(--light-hover-color-act);
|
||||
}
|
||||
|
||||
/* Chevron (arrow) styling -------------------------------------------------- */
|
||||
|
||||
.chevron {
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border: 8px solid transparent;
|
||||
border-left-color: #606077;
|
||||
margin-right: 8px;
|
||||
transform-origin: 25% 50%;
|
||||
transition: transform 0.3s ease, border-left-color 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
body.dark-mode .chevron {
|
||||
border-left-color: #606077;
|
||||
}
|
||||
|
||||
body.light-mode .chevron {
|
||||
border-left-color: #909090;
|
||||
}
|
||||
|
||||
/* We change styles for when the chevron is pointing down */
|
||||
|
||||
.folder.open > span .chevron {
|
||||
border-left-color: var(--dark-text-color-accent);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
body.dark-mode .folder.open > span .chevron {
|
||||
border-left-color: var(--dark-text-color-accent);
|
||||
}
|
||||
|
||||
body.light-mode .folder.open > span .chevron {
|
||||
border-left-color: var(--light-text-color-accent);
|
||||
}
|
||||
|
||||
/* Hover effects */
|
||||
|
||||
body.dark-mode .folder > span:hover .chevron {
|
||||
border-left-color: var(--dark-hover-color)
|
||||
}
|
||||
|
||||
body.light-mode .folder > span:hover .chevron {
|
||||
border-left-color: var(--light-hover-color)
|
||||
}
|
||||
|
||||
/* Active effects */
|
||||
|
||||
body.dark-mode .folder > span:active .chevron {
|
||||
border-left-color: var(--dark-hover-color-act)
|
||||
}
|
||||
|
||||
|
||||
body.light-mode .folder > span:active .chevron {
|
||||
border-left-color: var(--light-hover-color-act)
|
||||
}
|
||||
|
||||
/* Main content ============================================================= */
|
||||
|
||||
#main {
|
||||
transition: margin-left 0.5s;
|
||||
padding: 16px;
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
/* Comment field of output is used as a title for each output */
|
||||
|
||||
.output-comment {
|
||||
font-size: 1.4em;
|
||||
font-weight: 500;
|
||||
color: var(--dark-text-color);
|
||||
margin: 20px 0 10px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body.light-mode .output-comment {
|
||||
color: var(--light-text-color);
|
||||
}
|
||||
|
||||
body.dark-mode .output-comment {
|
||||
color: var(--dark-text-color);
|
||||
}
|
||||
|
||||
/* Kibot version ------------------------------------------------------------ */
|
||||
|
||||
.generator {
|
||||
text-align: right;
|
||||
font-size: 0.6em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.generator a {
|
||||
text-decoration: none; /* Removes the underline */
|
||||
}
|
||||
|
||||
/* Dark Mode: Regular Text */
|
||||
body.dark-mode .generator {
|
||||
color: var(--dark-text-color-accent);
|
||||
}
|
||||
|
||||
/* Dark Mode: Hyperlinks */
|
||||
body.dark-mode .generator a {
|
||||
color: var(--dark-hover-color); /* Hyperlink */
|
||||
}
|
||||
|
||||
/* Light Mode: Regular Text */
|
||||
body.light-mode .generator {
|
||||
color: var(--light-text-color-accent);
|
||||
}
|
||||
|
||||
/* Light Mode: Hyperlinks */
|
||||
body.light-mode .generator a {
|
||||
color: var(--light-hover-color); /* Hyperlink */
|
||||
}
|
||||
|
||||
/* Category boxes (folder) -------------------------------------------------- */
|
||||
|
||||
.category-box {
|
||||
z-index: 1000;
|
||||
background-color: var(--dark-bg-color-banner);
|
||||
border: 1px solid var(--dark-bg-color-banner);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 400px;
|
||||
height: 140;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
body.light-mode .category-box {
|
||||
color: var(--light-text-color);
|
||||
background-color: var(--light-bg-color-banner);
|
||||
border: var(--light-bg-color-banner);
|
||||
}
|
||||
|
||||
|
||||
body.dark-mode .category-box {
|
||||
color: var(--dark-text-color);
|
||||
background-color: var(--dark-bg-color-banner);
|
||||
border: var(--dark-bg-color-banner);
|
||||
}
|
||||
|
||||
.category-box img {
|
||||
margin-top: 10px;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.category-title {
|
||||
font-size: 1.4em;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
color: #e5e5e5;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
body.light-mode .category-title {
|
||||
color: var(--light-text-color);
|
||||
}
|
||||
|
||||
body.dark-mode .category-title {
|
||||
color: var(--dark-text-color);
|
||||
}
|
||||
|
||||
/* Hover effects */
|
||||
|
||||
.category-box:hover {
|
||||
background-color: var(--dark-banner-hover);
|
||||
transform: scale(1.05); /* Slight zoom effect */
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
body.light-mode .category-box:hover {
|
||||
background-color: var(--light-banner-hover);
|
||||
}
|
||||
|
||||
body.dark-mode .category-box:hover {
|
||||
background-color: var(--dark-banner-hover);
|
||||
}
|
||||
|
||||
/* Output boxes (files) ----------------------------------------------------- */
|
||||
|
||||
.output-box {
|
||||
z-index: 999;
|
||||
background-color: var(--dark-bg-color-banner);
|
||||
border: 1px solid var(--dark-bg-color-banner);
|
||||
border-radius: 8px;
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 300px;
|
||||
height: 140px;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
/* Offset the scroll position */
|
||||
.output-virtual-box {
|
||||
position: relative;
|
||||
padding-top: var(--top-menu-height, 80px);
|
||||
margin-top: calc(-1 * var(--top-menu-height, 80px));
|
||||
pointer-events: none; /* Make it non-interactive */
|
||||
}
|
||||
|
||||
.output-virtual-box > * {
|
||||
pointer-events: auto; /* Allow its children to remain interactive */
|
||||
}
|
||||
|
||||
/* Some files (e.g. PDF, PNG) have wider output boxes */
|
||||
|
||||
.output-box.wide {
|
||||
width: 400px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.output-box img {
|
||||
margin-top: 10px;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
/* The output boxes are centered and wrap around */
|
||||
|
||||
.items-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
body.light-mode .output-box {
|
||||
color: var(--light-text-color);
|
||||
background-color: var(--light-bg-color-banner);
|
||||
border: var(--light-bg-color-banner);
|
||||
}
|
||||
|
||||
body.dark-mode .output-box {
|
||||
color: var(--dark-text-color);
|
||||
background-color: var(--dark-bg-color-banner);
|
||||
border: var(--dark-bg-color-banner);
|
||||
}
|
||||
|
||||
/* Hover effects */
|
||||
|
||||
.output-box:hover {
|
||||
background-color: var(--dark-banner-hover);
|
||||
transform: scale(1.05);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
body.light-mode .output-box:hover {
|
||||
background-color: var(--light-banner-hover);
|
||||
}
|
||||
|
||||
body.dark-mode .output-box:hover {
|
||||
background-color: var(--dark-banner-hover);
|
||||
}
|
||||
|
||||
/* Name of the output below the icon */
|
||||
|
||||
.output-box .output-name {
|
||||
color: #8997c6;
|
||||
font-size: 14px;
|
||||
margin-top: 0px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
body.light-mode .output-box .output-name {
|
||||
color: var(--light-text-color-accent);
|
||||
}
|
||||
|
||||
body.dark-mode .output-box .output-name {
|
||||
color: #8997c6;
|
||||
}
|
||||
|
||||
/* Filename below the icon */
|
||||
|
||||
.output-box .filename {
|
||||
text-decoration: none;
|
||||
color: var(--dark-text-color);
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
margin-bottom: 7px;
|
||||
}
|
||||
|
||||
body.light-mode .output-box .filename {
|
||||
color: var(--light-text-color);
|
||||
}
|
||||
|
||||
body.dark-mode .output-box .filename {
|
||||
color: var(--dark-text-color);
|
||||
}
|
||||
|
||||
/* Theme Toggle Switch ====================================================== */
|
||||
|
||||
.theme-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 25px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/* Hide the default checkbox button */
|
||||
|
||||
.theme-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.theme-switch span {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
background-color: var(--light-banner-hover);
|
||||
border-radius: 25px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
.theme-switch span::before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
left: 4px;
|
||||
bottom: 3px;
|
||||
background-color: var(--light-bg-color);
|
||||
border-radius: 50%;
|
||||
transition: none; /* Disable animation by default */
|
||||
}
|
||||
|
||||
.theme-switch span.animate::before {
|
||||
transition: transform 0.4s ease, background-color 0.4s ease;
|
||||
}
|
||||
|
||||
.theme-switch input:checked + span {
|
||||
background-color: var(--dark-bg-color);
|
||||
}
|
||||
|
||||
.theme-switch input:checked + span::before {
|
||||
transform: translateX(25px);
|
||||
background-color: var(--dark-text-color);
|
||||
}
|
||||
|
||||
/* Scrollbar ================================================================ */
|
||||
|
||||
body, html {
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: auto;
|
||||
}
|
||||
|
||||
body.dark-mode .navbar {
|
||||
scrollbar-color: var(--dark-banner-hover) var(--dark-bg-color);
|
||||
}
|
||||
|
||||
body.light-mode .navbar {
|
||||
scrollbar-color: var(--light-banner-hover) var(--light-bg-color);
|
||||
}
|
||||
|
||||
/* WebKit Scrollbar Styles */
|
||||
body::-webkit-scrollbar, .navbar::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-thumb, .navbar::-webkit-scrollbar-thumb {
|
||||
border-radius: 6px;
|
||||
background: var(--dark-banner-hover);
|
||||
border: 2px solid var(--dark-bg-color);
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-track, .navbar::-webkit-scrollbar-track {
|
||||
border-radius: 6px;
|
||||
background: var(--dark-bg-color);
|
||||
}
|
||||
|
||||
body.dark-mode::-webkit-scrollbar-thumb:hover, .navbar.dark-mode::-webkit-scrollbar-thumb:hover {
|
||||
background: #44475a !important;
|
||||
}
|
||||
|
||||
body.light-mode::-webkit-scrollbar-thumb, .navbar.light-mode::-webkit-scrollbar-thumb {
|
||||
background: var(--light-banner-hover);
|
||||
border: 2px solid var(--light-bg-color);
|
||||
}
|
||||
|
||||
body.light-mode::-webkit-scrollbar-track, .navbar.light-mode::-webkit-scrollbar-track {
|
||||
background: var(--light-bg-color);
|
||||
}
|
||||
|
||||
body.light-mode::-webkit-scrollbar-thumb:hover, .navbar.light-mode::-webkit-scrollbar-thumb:hover {
|
||||
background: #909090 !important;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-corner, .navbar::-webkit-scrollbar-corner {
|
||||
background: var(--dark-bg-color);
|
||||
}
|
||||
|
||||
/* Markdown ================================================================= */
|
||||
|
||||
.markdown-content {
|
||||
font-family: Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
max-width: calc(100% - 180px);
|
||||
white-space: pre-wrap; /* Handle preformatted text */
|
||||
transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
|
||||
}
|
||||
|
||||
body.light-mode .markdown-content {
|
||||
background-color: #f9f9f9;
|
||||
border: 1px solid #ddd;
|
||||
color: #444444;
|
||||
transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
|
||||
}
|
||||
|
||||
body.dark-mode .markdown-content {
|
||||
background-color: #1e1e2f;
|
||||
border: 1px solid #44475a;
|
||||
color: #e5e5e5;
|
||||
transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.markdown-content table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 20px;
|
||||
transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
|
||||
}
|
||||
|
||||
body.light-mode .markdown-content table th,
|
||||
body.light-mode .markdown-content table td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
background-color: #ffffff;
|
||||
color: #444444;
|
||||
transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
|
||||
}
|
||||
|
||||
body.dark-mode .markdown-content table th,
|
||||
body.dark-mode .markdown-content table td {
|
||||
border: 1px solid #44475a;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
background-color: #27293d;
|
||||
color: #e5e5e5;
|
||||
transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
|
||||
}
|
||||
|
||||
/* Code Blocks */
|
||||
.markdown-content pre {
|
||||
background-color: var(--dark-bg-color-banner);
|
||||
color: var(--dark-text-color); /* Matches dark theme text */
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
overflow-x: auto;
|
||||
transition: background-color 0.4s ease, color 0.4s ease;
|
||||
}
|
||||
|
||||
body.light-mode .markdown-content pre {
|
||||
background-color: var(--light-bg-color-banner);
|
||||
color: var(--light-text-color);
|
||||
transition: background-color 0.4s ease, color 0.4s ease;
|
||||
}
|
||||
|
||||
body.dark-mode .markdown-content pre {
|
||||
background-color: var(--dark-bg-color-banner);
|
||||
color: var(--dark-text-color);
|
||||
transition: background-color 0.4s ease, color 0.4s ease;
|
||||
}
|
||||
|
||||
/* Inline Code */
|
||||
.markdown-content code {
|
||||
background-color: var(--light-bg-color-banner);
|
||||
padding: 2px 5px;
|
||||
border-radius: 3px;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
transition: background-color 0.4s ease, color 0.4s ease;
|
||||
}
|
||||
|
||||
body.light-mode .markdown-content code {
|
||||
background-color: var(--light-bg-color-banner);
|
||||
color: var(--light-text-color);
|
||||
transition: background-color 0.4s ease, color 0.4s ease;
|
||||
}
|
||||
|
||||
body.dark-mode .markdown-content code {
|
||||
background-color: var(--dark-bg-color-banner);
|
||||
color: var(--dark-text-color);
|
||||
transition: background-color 0.4s ease, color 0.4s ease;
|
||||
}
|
||||
|
||||
/* Links */
|
||||
body.light-mode .markdown-content a {
|
||||
color: var(--light-hover-color);
|
||||
text-decoration: none;
|
||||
transition: color 0.4s ease;
|
||||
}
|
||||
|
||||
body.dark-mode .markdown-content a {
|
||||
color: var(--dark-hover-color);
|
||||
text-decoration: none;
|
||||
transition: color 0.4s ease;
|
||||
}
|
||||
|
||||
.markdown-content a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Images */
|
||||
.markdown-content img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 10px auto;
|
||||
transition: opacity 0.4s ease;
|
||||
}
|
||||
|
||||
.markdown-content pre::-webkit-scrollbar {
|
||||
height: 12px; /* Horizontal scrollbar height */
|
||||
}
|
||||
|
||||
.markdown-content pre::-webkit-scrollbar-thumb {
|
||||
background: var(--dark-banner-hover); /* Match other scrollbar thumb color */
|
||||
border-radius: 6px; /* Round edges */
|
||||
border: 2px solid var(--dark-bg-color); /* Outer border matches background */
|
||||
}
|
||||
|
||||
.markdown-content pre::-webkit-scrollbar-track {
|
||||
background: var(--dark-bg-color); /* Match the background color */
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
body.light-mode .markdown-content pre::-webkit-scrollbar-thumb {
|
||||
background: var(--light-banner-hover); /* Light mode thumb color */
|
||||
border: 2px solid var(--light-bg-color); /* Light mode border */
|
||||
}
|
||||
|
||||
body.light-mode .markdown-content pre::-webkit-scrollbar-track {
|
||||
background: var(--light-bg-color); /* Light mode track background */
|
||||
}
|
||||
|
||||
|
||||
/* Search bar =============================================================== */
|
||||
|
||||
#search-container,
|
||||
#search-bar,
|
||||
#autocomplete-list,
|
||||
#autocomplete-list li {
|
||||
transition: background-color 0.3s, color 0.3s, border-color 0.3s;
|
||||
}
|
||||
|
||||
#search-container {
|
||||
padding: 10px;
|
||||
background-color: transparent;
|
||||
margin-top: 10px;
|
||||
top: 0;
|
||||
z-index: 1001;
|
||||
width: calc(100% - 10px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#search-bar {
|
||||
width: 100%; /* Match the width of the container */
|
||||
padding: 8px;
|
||||
border: 1px solid var(--light-text-color-accent);
|
||||
border-radius: 4px;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
color: var(--light-text-color);
|
||||
box-sizing: border-box; /* Ensure padding is included in width */
|
||||
}
|
||||
|
||||
#search-bar::placeholder {
|
||||
color: var(--light-text-color-accent);
|
||||
}
|
||||
|
||||
#autocomplete-list {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 5px 0 0;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
background-color: var(--light-bg-color-banner);
|
||||
border: 1px solid var(--light-text-color-accent);
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
z-index: 1001;
|
||||
width: auto; /* Width will be dynamically calculated */
|
||||
box-sizing: border-box;
|
||||
display: none; /* Hidden by default */
|
||||
}
|
||||
|
||||
#autocomplete-list li {
|
||||
padding: 8px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
color: var(--light-text-color);
|
||||
}
|
||||
|
||||
#autocomplete-list li:hover {
|
||||
background-color: var(--light-banner-hover);
|
||||
color: var(--light-hover-color);
|
||||
}
|
||||
|
||||
.dark-mode #search-bar {
|
||||
color: var(--dark-text-color);
|
||||
border-color: var(--dark-text-color-accent);
|
||||
}
|
||||
|
||||
.dark-mode #search-bar::placeholder {
|
||||
color: var(--dark-text-color-accent);
|
||||
}
|
||||
|
||||
.dark-mode #autocomplete-list {
|
||||
background-color: var(--dark-bg-color-banner);
|
||||
border-color: var(--dark-text-color-accent);
|
||||
}
|
||||
|
||||
.dark-mode #autocomplete-list li {
|
||||
color: var(--dark-text-color);
|
||||
}
|
||||
|
||||
.dark-mode #autocomplete-list li:hover {
|
||||
background-color: var(--dark-banner-hover);
|
||||
color: var(--dark-hover-color);
|
||||
}
|
||||
|
||||
.highlighted {
|
||||
background-color: var(--light-banner-hover); /* Same as hover background */
|
||||
color: var(--light-hover-color); /* Same as hover text color */
|
||||
}
|
||||
|
||||
body.dark-mode .highlighted {
|
||||
background-color: var(--dark-banner-hover); /* Same as hover background */
|
||||
color: var(--dark-hover-color); /* Same as hover text color */
|
||||
}
|
||||
|
||||
/* New classes to remove transitions on page load =========================== */
|
||||
|
||||
body.no-transition,
|
||||
.no-transition .output-box,
|
||||
body.no-transition .theme-switch span,
|
||||
body.no-transition button,
|
||||
body.no-transition #close-navbar,
|
||||
body.no-transition #home-button,
|
||||
body.no-transition #back-button,
|
||||
body.no-transition #forward-button,
|
||||
body.no-transition #topmenu,
|
||||
body.no-transition .navbar-category .folder > span,
|
||||
body.no-transition .navbar-output,
|
||||
body.no-transition .category-box,
|
||||
#search-bar {
|
||||
transition: none !important; /* Disable transition during page load */
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user