mstoeck3/fscalc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updates to UX and NTFS

Browse Source
This commit is contained in:
overcuriousity
2025-10-21 22:27:08 +02:00
parent 8cf8900784
commit 8fdb737ea8
9 changed files with 659 additions and 413 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
webroot/js/utils.js
View File

@@ -1,3 +1,18 @@
// Format a result with multiple representations (e.g., bytes, sectors, etc.)
// values: { bytes: number, sectors?: number, other?: string }
export function formatMultiValue(values) {
const parts = [];
if (typeof values.bytes === 'number') {
parts.push(formatHex(values.bytes) + ' Bytes');
}
if (typeof values.sectors === 'number') {
parts.push(formatHex(values.sectors) + ' Sektoren');
}
if (values.other) {
parts.push(values.other);
}
return parts.join(' // ');
}
// Shared utility functions for the filesystem calculator
export function parseHex(value) {
@@ -43,11 +58,14 @@ export function checkDependencies(deps) {
export function updateResultItem(elementId, value, available, calculation = '') {
const element = document.getElementById(elementId);
if (!element) return;
const resultItem = element.closest('.result-item');
if (available) {
element.innerHTML = formatHex(value);
// If value is an object with bytes/sectors/other, use formatMultiValue
if (value && typeof value === 'object' && (value.bytes !== undefined || value.sectors !== undefined || value.other !== undefined)) {
element.innerHTML = formatMultiValue(value);
} else {
element.innerHTML = formatHex(value);
}
resultItem.classList.remove('unavailable');
resultItem.classList.add('available');
if (calculation) {
@@ -64,13 +82,15 @@ export function updateResultItem(elementId, value, available, calculation = '')
export function copyToClipboard(elementId) {
const element = document.getElementById(elementId);
if (!element) return;
const text = element.textContent.trim();
let text = element.textContent.trim();
if (text === '-' || text.includes('Fehler')) {
return;
}
// Only copy the first hex value (e.g., 0x1004200)
const match = text.match(/0x[0-9a-fA-F]+/);
if (match) {
text = match[0];
}
navigator.clipboard.writeText(text).then(() => {
const btn = element.parentElement.querySelector('.copy-btn');
if (btn) {
@@ -99,20 +119,20 @@ export function createTooltip() {
}
}
export function showTooltipAt(x, y, text) {
export function showTooltipAt(pageX, pageY, text) {
createTooltip();
tooltip.innerHTML = text;
tooltip.style.display = 'block';
const tooltipRect = tooltip.getBoundingClientRect();
let left = x + 12; // offset from mouse pointer
let top = y + 12;
let left = pageX + 12; // offset from mouse pointer
let top = pageY + 12;
if (left + tooltipRect.width > window.innerWidth - 10) {
left = window.innerWidth - tooltipRect.width - 10;
}
if (top + tooltipRect.height > window.innerHeight - 10) {
top = y - tooltipRect.height - 12;
if (top + tooltipRect.height > window.innerHeight + window.scrollY - 10) {
top = pageY - tooltipRect.height - 12;
}
if (left < 10) left = 10;
if (top < 10) top = 10;
@@ -129,19 +149,40 @@ export function hideTooltip() {
// Setup tooltip event listeners
export function setupTooltips() {
document.addEventListener('mousemove', function (e) {
document.addEventListener('mouseover', function (e) {
if (e.target.classList.contains('result-label')) {
const formula = e.target.getAttribute('data-formula');
if (formula) {
showTooltipAt(e.clientX, e.clientY, `Formel: ${formula}`);
showTooltipAt(e.pageX, e.pageY, `Formel: ${formula}`);
e.target.addEventListener('mousemove', mouseMoveHandler);
}
} else if (e.target.classList.contains('result-value')) {
const formula = e.target.getAttribute('data-result-formula');
if (formula && formula !== '') {
showTooltipAt(e.clientX, e.clientY, `Berechnung: ${formula}`);
showTooltipAt(e.pageX, e.pageY, `Berechnung: ${formula}`);
e.target.addEventListener('mousemove', mouseMoveHandler);
}
} else {
}
});
function mouseMoveHandler(e) {
if (e.target.classList.contains('result-label')) {
const formula = e.target.getAttribute('data-formula');
if (formula) {
showTooltipAt(e.pageX, e.pageY, `Formel: ${formula}`);
}
} else if (e.target.classList.contains('result-value')) {
const formula = e.target.getAttribute('data-result-formula');
if (formula && formula !== '') {
showTooltipAt(e.pageX, e.pageY, `Berechnung: ${formula}`);
}
}
}
document.addEventListener('mouseout', function (e) {
if (e.target.classList.contains('result-label') || e.target.classList.contains('result-value')) {
hideTooltip();
e.target.removeEventListener('mousemove', mouseMoveHandler);
}
});