From a8686a08c0b8434fd7cf55fbfbd1ebd461ce8b63 Mon Sep 17 00:00:00 2001
From: Pyro Nicampt <81565698+PyroNicampt@users.noreply.github.com>
Date: Tue, 28 Jan 2025 04:12:58 -0600
Subject: [PATCH] Clean up styling and function of zoom buttons
---
index.html | 11 +++++------
index.js | 44 ++++++++++++++++++++------------------------
style.css | 37 +++++++++++++++----------------------
3 files changed, 40 insertions(+), 52 deletions(-)
diff --git a/index.html b/index.html
index 91fda02..09ff847 100644
--- a/index.html
+++ b/index.html
@@ -220,12 +220,11 @@
-
-
-
-
-
+
+
+
+
Map v0.5 alpha
@@ -269,7 +268,7 @@
DV Wiki
diff --git a/index.js b/index.js
index 491e8a4..02b45f5 100644
--- a/index.js
+++ b/index.js
@@ -11,7 +11,8 @@ const bezierGradeResolution = 80;
const bezierLengthResolution = 80;
const bezierCurvatureResolution = 80;
const padding = 500;
-const zoomFactor = 1.5;
+const scrollZoomFactor = 1.25;
+const buttonZoomFactor = 1.5;
const trackWidth = {
base: 110,
min: 3,
@@ -91,7 +92,7 @@ let MapMatrix = {};
document.addEventListener('DOMContentLoaded', async () => {
await loadTrackData('trackdata_dv.json');
await loadPoiData('poi_dv.json');
- mapScrollSetup();
+ mapNavigationSetup();
});
async function loadTrackData(file){
@@ -129,7 +130,7 @@ async function loadPoiData(file){
}
/** Handling for the map scrolling and zooming */
-function mapScrollSetup(){
+function mapNavigationSetup(){
const touchCache = [];
let touchCount = 0;
let pinchDistance = null;
@@ -160,7 +161,6 @@ function mapScrollSetup(){
}else if(touchCount == 2){
getTouchAverage();
zoomAtPosition(touchCenter_x, touchCenter_y, (previousScale * getTouchDistance()/pinchDistance)/mapNav.scale);
-
}
touchCache[e.pointerId].x = e.clientX;
touchCache[e.pointerId].y = e.clientY;
@@ -174,7 +174,19 @@ function mapScrollSetup(){
}
}
const scrollHandler = e => {
- if(e.deltaY != 0) zoomAtPosition(e.clientX, e.clientY, e.deltaY > 0 ? 1/zoomFactor : zoomFactor);
+ if(e.deltaY != 0) zoomAtPosition(e.clientX, e.clientY, e.deltaY > 0 ? 1/scrollZoomFactor : scrollZoomFactor);
+ }
+ const navButtonInput = navType => {
+ const centerX = map_container.offsetWidth / 2;
+ const centerY = map_container.offsetHeight / 2;
+ switch(navType){
+ case 'zoomIn':
+ zoomAtPosition(centerX, centerY, buttonZoomFactor);
+ break;
+ case 'zoomOut':
+ zoomAtPosition(centerX, centerY, 1/buttonZoomFactor);
+ break;
+ }
}
const navUpdate = ts => {
if(ts){
@@ -230,28 +242,14 @@ function mapScrollSetup(){
mapNav.scale *= scaleFactor;
}
- window.zoomAtPosition = zoomAtPosition;
-
map_container.addEventListener('pointerdown', touchDownHandler);
map_container.addEventListener('wheel', scrollHandler);
+
+ document.getElementById('navZoomIn').addEventListener('click', e => {navButtonInput('zoomIn');});
+ document.getElementById('navZoomOut').addEventListener('click', e => {navButtonInput('zoomOut');});
navUpdate();
}
-document.getElementById('zoom-in').addEventListener('click', () => {
- const centerX = map_container.offsetWidth / 2;
- const centerY = map_container.offsetHeight / 2;
- zoomAtPosition(centerX, centerY, zoomFactor); // Use zoomFactor from config.js
- updateMapview();
-});
-
-document.getElementById('zoom-out').addEventListener('click', () => {
- const centerX = map_container.offsetWidth / 2;
- const centerY = map_container.offsetHeight / 2;
- zoomAtPosition(centerX, centerY, 1 / zoomFactor); // Use zoomFactor from config.js
- updateMapview();
-});
-
-
/** Readjust map view to focus on position */
function updateMapview(){
if(mapNav == null) return;
@@ -280,8 +278,6 @@ function updateMapview(){
}
}
-
-
function forceRedraw(){
redrawTriggerElement.style.backgroundColor = Color.random().hex;
}
diff --git a/style.css b/style.css
index bc4d395..c8d4dc0 100644
--- a/style.css
+++ b/style.css
@@ -66,8 +66,6 @@ a:visited{
}
#legendButton{
- cursor: pointer;
- user-select: none;
padding: 8px;
height: var(--legendButtonSize);
width: var(--legendButtonSize);
@@ -116,6 +114,7 @@ a:visited{
}
#stats{
+ pointer-events: none;
position: fixed;
width: fit-content;
right: 10px;
@@ -166,27 +165,21 @@ a:visited{
font-variation-settings: "wght" 700;
}
-#zoom-buttons {
- position: absolute;
- bottom: 80px; /* Position 10px from the bottom */
- right: 10px; /* Position 10px from the right */
- z-index: 1000; /* Ensure it's above the map */
+button{
+ cursor: pointer;
+ user-select: none;
+}
+
+#navigationControls {
+ margin-left: auto;
+ width: fit-content;
display: flex;
flex-direction: column;
gap: 5px;
-}
-
-#zoom-buttons button {
- background-color: #ffffff;
- border: 1px solid #cccccc;
- border-radius: 5px;
- padding: 10px 35px;
- font-size: 40px;
- font-weight: bold;
- cursor: pointer;
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-}
-
-#zoom-buttons button:hover {
- background-color: #f0f0f0;
+ >*{
+ font-size: 24px;
+ font-weight: bold;
+ width: var(--legendButtonSize);
+ height: var(--legendButtonSize);
+ }
}
\ No newline at end of file