w1cdn/spothole
1
0
Fork 0
mirror of https://git.ianrenton.com/ian/spothole.git synced 2025-10-27 08:49:27 +00:00
Code Issues 11 Packages Projects Releases Wiki Activity

Extend canvas when required #48

Browse Source
This commit is contained in:
Ian Renton
2025-10-21 16:51:04 +01:00
parent 001ec2c9b9
commit f5e50dc5b4
2 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
webassets/css/style.css
View File

@@ -157,9 +157,7 @@ div#bands-container {
margin: 0; margin: 0;
padding: 0; padding: 0;
overflow-x: auto; overflow-x: auto;
overflow-y: visible;
white-space: nowrap; white-space: nowrap;
display: flex;
overscroll-behavior-x: none; overscroll-behavior-x: none;
} }
@@ -169,6 +167,7 @@ div#bands-container {
#bands-table th { #bands-table th {
width: 20%; width: 20%;
max-height: 40px;
min-width: 12em; min-width: 12em;
padding: 0.5em; padding: 0.5em;
text-align: center; text-align: center;

7
webassets/js/bands.js
View File

@@ -59,6 +59,9 @@ function updateBands() {
} }
}); });
// Track if any columns end up taller than expected, so we can resize the container and avoid vertical scroll.
var maxHeightBand = 0;
// Build up table content for each band // Build up table content for each band
var table = $('<table id="bands-table">').append('<thead><tr></tr></thead><tbody><tr></tr></tbody>'); var table = $('<table id="bands-table">').append('<thead><tr></tr></thead><tbody><tr></tr></tbody>');
bandToSpots.forEach(function (spotList, bandName) { bandToSpots.forEach(function (spotList, bandName) {
@@ -113,6 +116,7 @@ function updateBands() {
// spots have gone off the end of the band markers and stretched their div, we need to resize the canvas to // spots have gone off the end of the band markers and stretched their div, we need to resize the canvas to
// match, otherwise we have nowhere to draw their connecting lines. // match, otherwise we have nowhere to draw their connecting lines.
var canvasHeight = Math.max(BAND_COLUMN_HEIGHT_PX, (lastSpotEmDownBand+1.6) * BAND_COLUMN_FONT_SIZE); var canvasHeight = Math.max(BAND_COLUMN_HEIGHT_PX, (lastSpotEmDownBand+1.6) * BAND_COLUMN_FONT_SIZE);
maxHeightBand = Math.max(maxHeightBand, canvasHeight);
// Draw horizontal or diagonal lines to join up the "real" frequency with where the spot div ended up // Draw horizontal or diagonal lines to join up the "real" frequency with where the spot div ended up
var bandLinesCanvas = $(`<canvas class='band-lines-canvas' width='${BAND_COLUMN_CANVAS_WIDTH_PX}px' height='${canvasHeight}px' style='height:${canvasHeight}px !important;'>`); var bandLinesCanvas = $(`<canvas class='band-lines-canvas' width='${BAND_COLUMN_CANVAS_WIDTH_PX}px' height='${canvasHeight}px' style='height:${canvasHeight}px !important;'>`);
@@ -146,6 +150,9 @@ function updateBands() {
// Update the DOM with the band HTML // Update the DOM with the band HTML
bandsContainer.html(table); bandsContainer.html(table);
// Increase the height of the bands container so we don't have any vertical scroll bars except the browser ones
bandsContainer.css("min-height", `${maxHeightBand + 42}px`);
// Desktop mouse wheel to scroll bands horizontally if used on the headers // Desktop mouse wheel to scroll bands horizontally if used on the headers
table.find('thead tr').on("wheel", () => { table.find('thead tr').on("wheel", () => {
bandsContainer.scrollLeft(bandsContainer.scrollLeft() + event.deltaY / 10.0); bandsContainer.scrollLeft(bandsContainer.scrollLeft() + event.deltaY / 10.0);