boxespy/static/self.js

304 lines
8.3 KiB
JavaScript

function showThumbnail(img_link) {
const img = document.getElementById("sample-preview");
img.src = img_link;
img.style.height = "auto";
img.style.display = "block";
}
function showThumbnailEvt(evt) {
const url = evt.target.getAttribute("data-thumbnail");
showThumbnail(url);
}
function hideThumbnail() {
const img = document.getElementById("sample-preview");
img.style.display = "none";
}
function expandId(id) {
const e = document.getElementById(id);
const h = document.getElementById("h-" + id);
e.style.display = "block";
h.classList.add("open");
h.setAttribute("aria-expanded", "true");
}
function collapseId(id) {
const e = document.getElementById(id);
const h = document.getElementById("h-" + id);
e.style.display = "none";
h.classList.remove("open");
h.setAttribute("aria-expanded", "false");
}
function toggleId(id) {
const e = document.getElementById(id);
const h = document.getElementById("h-" + id);
if (e.style.display == null || e.style.display === "none") {
expandId(id);
} else {
collapseId(id);
}
}
function toggleEl(el) {
const id = el.getAttribute("data-id");
toggleId(id);
}
function toggleEvt(evt) {
const id = evt.target.getAttribute("data-id");
// https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#examples
if (evt instanceof MouseEvent) {
toggleId(id);
}
if (evt instanceof KeyboardEvent && (evt.key === "Enter" || evt.key === " ")) {
evt.preventDefault();
toggleId(id);
}
}
function initToggle(el, hide = false) {
// Add event handler.
el.addEventListener("click", toggleEvt);
el.addEventListener("keydown", toggleEvt);
// Hide.
if (hide) {
toggleEl(el);
}
}
function initThumbnail(el) {
// Add event handler.
el.addEventListener("mouseenter", showThumbnailEvt);
el.addEventListener("mouseleave", hideThumbnail);
}
function initPage(num_hide = null) {
const h = document.getElementsByClassName("toggle");
let i = 0;
for (let el of h) {
if (num_hide === null || i < num_hide) {
initToggle(el, true);
} else {
initToggle(el, false);
}
i++;
}
const t = document.getElementsByClassName("thumbnail");
for (let el of t) initThumbnail(el);
}
function GridfinityTrayLayout_GenerateLayout(x, y, nx, ny, countx, county) {
// x = width in mm
// y = height in mm
// nx # of gridfinity grids in X
// ny # of gridfinity grids in Y
// countx split x into this many
// county split y into this many
layout = '';
if (countx == 0)
countx = nx;
if (county == 0)
county = ny
stepx = x / countx;
stepy = y / county;
for (i = 0; i < countx; i++) {
line = ' |'.repeat(i) + ` ,> ${stepx}mm\n`;
layout += line;
}
for (i = 0; i < county; i++) {
layout += "+-".repeat(countx) + "+\n";
layout += "| ".repeat(countx) + `| ${stepy}mm\n`;
}
layout += "+-".repeat(countx) + "+\n";
return layout
}
function GridfinityTrayUpdateLayout(event) {
console.log("update");
if (window.layoutUpdated == true) {
// Don't do the update if the layout has been manually touched.
if (confirm("You have manually updated the Layout. Do you wish to regenerate it?")) {
window.layoutUpdated = false;
} else {
return;
}
}
console.log("updating");
nx = document.getElementById('nx').value;
ny = document.getElementById('ny').value;
countx = document.getElementById('countx').value;
county = document.getElementById('county').value;
margin = document.getElementById('margin').value;
x = nx*42 - margin
y = ny*42 - margin
layout_id = document.getElementById('layout');
layout_id.value = GridfinityTrayLayout_GenerateLayout(x, y, nx, ny, countx, county);
}
function setUpdated() {
console.log("this was updated");
window.layoutUpdated=true;
}
function GridfinityTrayLayoutInit() {
console.log("update init");
ids = ['nx', 'ny', 'countx', 'county', 'margin'];
window.layoutUpdated=false;
for (id_string of ids) {
id = document.getElementById(id_string);
id.addEventListener('input', GridfinityTrayUpdateLayout);
}
layout_id = document.getElementById('layout');
layout_id.addEventListener('change', setUpdated);
layout_id.addEventListener('input', setUpdated);
GridfinityTrayUpdateLayout();
layout_id = document.getElementById('layout');
layout_id.rows = 20;
layout_id.cols = 24;
}
function ParseSections(s) {
var sections = [];
for (var section of s.split(":")) {
var operands = section.split("/");
if (operands.length > 2) return sections;
if (operands.length == 2) {
for (var i=0; i<operands[1]; i++) {
sections.push(Number(operands[0])/Number(operands[1]));
}
continue;
}
operands = section.split("*");
if (operands.length > 2) return sections;
if (operands.length == 2) {
for (var i=0; i<operands[1]; i++) {
sections.push(Number(operands[0]));
}
continue;
}
sections.push(Number(section));
}
return sections;
}
function TrayLayout_GenerateLayout(sx, sy) {
sx = ParseSections(sx);
sy = ParseSections(sy);
nx = sx.length
ny = sy.length
layout = '';
if (nx <= 0)
nx = 1;
if (ny <= 0)
ny = 1;
for (i = 0; i < nx; i++) {
line = ' |'.repeat(i) + ` ,> ${sx[i].toFixed(2)}mm\n`;
layout += line;
}
for (i = 0; i < ny; i++) {
layout += "+-".repeat(nx) + "+\n";
layout += "| ".repeat(nx) + `| ${sy[i].toFixed(2)}mm\n`;
}
layout += "+-".repeat(nx) + "+\n";
return layout
}
function TrayUpdateLayout(event) {
if (window.layoutUpdated == true) {
// Don't do the update if the layout has been manually touched.
if (confirm("You have manually updated the Layout. Do you wish to regenerate it?")) {
window.layoutUpdated = false;
} else {
return;
}
}
sx = document.getElementById('sx').value;
sy = document.getElementById('sy').value;
layout_id = document.getElementById('layout');
layout_id.value = TrayLayout_GenerateLayout(sx, sy);
}
function TrayLayoutInit() {
ids = ['sx', 'sy'];
window.layoutUpdated=false;
for (id_string of ids) {
id = document.getElementById(id_string);
id.addEventListener('input', TrayUpdateLayout);
}
TrayUpdateLayout();
layout_id = document.getElementById('layout');
layout_id.addEventListener('change', setUpdated);
layout_id.addEventListener('input', setUpdated);
layout_id.rows = 20;
layout_id.cols = 24;
}
function addCallbacks() {
page_callbacks = {
"TrayLayout": TrayLayoutInit,
"GridfinityTrayLayout": GridfinityTrayLayoutInit,
};
loc = new URL(window.location.href);
pathname = loc.pathname;
page = pathname.substr(pathname.lastIndexOf('/')+1);
if (page in page_callbacks) {
callback = page_callbacks[page];
callback();
}
}
document.addEventListener('DOMContentLoaded', function() {
addCallbacks();
}, false);
function collapseAll() {
const h = document.getElementsByClassName("toggle");
for (let el of h) {
id = el.getAttribute("data-id")
collapseId(id);
}
}
function expandAll() {
const h = document.getElementsByClassName("toggle");
for (let el of h) {
id = el.getAttribute("data-id")
expandId(id);
}
}
function showAll(str) {
let matching_ids = document.querySelectorAll('[id^="search_id_"]')
for (let id of matching_ids) {
id.style.display = "inline-block";
}
}
function showOnly(str) {
str = str.toLowerCase();
let matching_ids = document.querySelectorAll('[id^="search_id_"]')
for (let id of matching_ids) {
name = id.id.replace("search_id_", "").toLowerCase();
if (name.includes(str) || id.textContent.toLowerCase().includes(str)) {
id.style.display = "inline-block";
} else {
id.style.display = "none";
}
}
}
function filterSearchItems() {
const search = document.getElementById("search")
if (search.value.length == 0) {
collapseAll();
showAll()
} else {
expandAll();
showOnly(search.value)
}
}