Additional refactoring

xavierguihot · Dec 10, 2023 · 34dde3f · 34dde3f
1 parent 511c611
commit 34dde3f
Show file tree

Hide file tree

Showing 8 changed files with 83 additions and 57 deletions.
diff --git a/index.html b/index.html
@@ -20,10 +20,12 @@
 <script type="text/javascript" src="src/utils/banner.js"></script>
 <script type="text/javascript" src="src/utils/tooltip.js"></script>
 <script type="text/javascript" src="src/utils/selectable-button.js"></script>
+<script type="text/javascript" src="src/utils/google-drive-photo.js"></script>
 <script type="text/javascript" src="src/utils/icons-on-map.js"></script>
 <script type="text/javascript" src="src/utils/osm-map.js"></script>
 <script type="text/javascript" src="src/utils/hike-traces.js"></script>
 <script type="text/javascript" src="src/utils/scalebar.js"></script>
+<script type="text/javascript" src="src/utils/css-id.js"></script>
 <script type="text/javascript" src="src/menu.js"></script>
 <script type="text/javascript" src="src/map.js"></script>
 <script type="text/javascript" src="src/photos.js"></script>

diff --git a/src/map.js b/src/map.js
@@ -1,18 +1,16 @@
 
-var constants = {
-  initialScale: 1 / (2 * Math.PI),
-  initialCenter: [3.25, 46.5],
-  initialZoom: 24000,
-  maxZoom: 16000000,
-  photoIconsMinZoom: 300000,
-  wishList5kmMarkersMinZoom: 700000
-}
-
-var mapPageState;
-
 function drawMapAndTraces(svg, width, height) {
 
-  mapPageState = {
+  var constants = {
+    initialScale: 1 / (2 * Math.PI),
+    initialCenter: [3.25, 46.5],
+    initialZoom: 24000,
+    maxZoom: 16000000,
+    photoIconsMinZoom: 300000,
+    wishList5kmMarkersMinZoom: 700000
+  }
+
+  var mapPageState = {
     displayWishList: false,
     displayPhotoIcons: true,
     previousTransform: undefined,
@@ -113,12 +111,11 @@ function drawMapAndTraces(svg, width, height) {
       .attr("width", photoDimensions.width)
       .attr("height", photoDimensions.height)
       .style("cursor", "pointer")
-      //.attr("xlink:href", `https://drive.google.com/uc?id=${photo.googleDriveId}&export=view`)
       .attr("xlink:href", _ => {
         if (photo.cameraMaker == "Panasonic") {
-          return `https://drive.google.com/thumbnail?id=${photo.googleDriveId}&export=download&sz=w${photoDimensions.width}`;
+          return thumbnailForWidth(photo.googleDriveId, photoDimensions.width);
         } else {
-          return `https://drive.google.com/thumbnail?id=${photo.googleDriveId}&export=download&sz=h${photoDimensions.height}`;
+          return thumbnailForHeight(photo.googleDriveId, photoDimensions.height);
         }
       })
       .on("click", _ => mapContainer.select(".photo-on-map-holder").remove());
@@ -131,7 +128,7 @@ function drawMapAndTraces(svg, width, height) {
       .attr("width", photoDimensions.width)
       .attr("height", photoDimensions.height)
       .style("cursor", "pointer")
-      .attr("xlink:href", `https://drive.google.com/uc?id=${photo.googleDriveId}&export=view`)
+      .attr("xlink:href", fullPhoto(photo.googleDriveId))
       .on("click", _ => mapContainer.select(".photo-on-map-holder").remove());
   }
 
@@ -203,7 +200,7 @@ function drawMapAndTraces(svg, width, height) {
 
     updateMapTilesForZoom(raster, width, height, transform);
 
-    drawScaleBar(mapContainer, transform.k, transform.x, transform.y, width, height);
+    drawScaleBar(mapContainer, transform.k, transform.x, transform.y, width, height, constants.initialScale);
   }
 
   function transformPhotoIconsForZoomAndPosition(transform) {

diff --git a/src/multi-day-hikes.js b/src/multi-day-hikes.js
@@ -1,16 +1,22 @@
 
 function drawMultiDayHikes(svg, width, height) {
 
+  var constants = {
+    topMargin: 30,
+    bottomMargin: 50,
+    leftMargin: 50,
+    rightMargin: 40,
+    spaceBetweenHikes: 25,
+    initialScale: 1 / (2 * Math.PI),
+    maxZoom: 16000000,
+    photoIconsMinZoom: 100000
+  }
+
   // Adapt a dimension to the width of the screen:
   function scaleToWidth(value) {
     return value * width / 1745;
   }
 
-  var topMargin = 30;
-  var bottomMargin = 50;
-  var leftMargin = 50;
-  var rightMargin = 40;
-  var spaceBetweenHikes = 25;
   var multiDayHikeHeight = scaleToWidth(400);
   var mapWidth = multiDayHikeHeight;
   var mapHeight = multiDayHikeHeight;
@@ -19,20 +25,27 @@ function drawMultiDayHikes(svg, width, height) {
     svg
       .append("g")
       .attr("class", "multi-day-hikes-container")
-      .attr("transform", `translate(${leftMargin}, ${topMargin})`);
+      .attr("transform", `translate(${constants.leftMargin}, ${constants.topMargin})`);
 
   data.multiDayHikes.forEach((multiDayHike, i) => drawMultiDayHike(multiDayHike, i));
 
   // Adjust the vertical position of each multi day hike on the page based on previous multi day hikes' heights:
   data.multiDayHikes.forEach((multiDayHike, i) => {
     var previousHikesIndexes = Array.from({ length: i }, (v, k) => k + 1);
     var previousHikesHeightSum =
-      d3.sum(previousHikesIndexes, j => multiDayHikesContainer.select(`#multi-day-hike-${j} .multi-day-hike-rectangle`).node().getBoundingClientRect().height);
-    var hikeY = previousHikesHeightSum + previousHikesIndexes.length * spaceBetweenHikes;
+      d3.sum(
+        previousHikesIndexes,
+        j => multiDayHikesContainer.select(`#multi-day-hike-${j} .multi-day-hike-rectangle`).node().getBoundingClientRect().height
+      );
+    var hikeY = previousHikesHeightSum + previousHikesIndexes.length * constants.spaceBetweenHikes;
     multiDayHikesContainer.select(`#multi-day-hike-${i}`).attr("transform", `translate(0, ${hikeY})`)
   });
 
-  d3.select("svg").attr("height", multiDayHikesContainer.node().getBoundingClientRect().height + topMargin + bottomMargin);
+  d3.select("svg")
+    .attr(
+      "height",
+      multiDayHikesContainer.node().getBoundingClientRect().height + constants.topMargin + constants.bottomMargin
+    );
 
   periodicDisplayOfPhotosAtScrollLevel();
 
@@ -48,7 +61,7 @@ function drawMultiDayHikes(svg, width, height) {
       .style("stroke", "grey")
       .attr("x", 0)
       .attr("y", 0)
-      .attr("width", width - leftMargin - rightMargin)
+      .attr("width", width - constants.leftMargin - constants.rightMargin)
       .attr("height", multiDayHikeHeight);
 
     var texts =
@@ -127,7 +140,8 @@ function drawMultiDayHikes(svg, width, height) {
 
     // Description:
     if (multiDayHike.descriptionFR) {
-      var textContainerWidth = width - rightMargin - leftMargin - mapWidth - titleAndStatsWidth - photoWidth - 10;
+      var textContainerWidth =
+        width - constants.rightMargin - constants.leftMargin - mapWidth - titleAndStatsWidth - photoWidth - 10;
       multiDayHikeContainer
         .append("foreignObject")
         .attr("class", "description")
@@ -150,7 +164,7 @@ function drawMultiDayHikes(svg, width, height) {
     if (multiDayHike.hasGpxFile) {
       multiDayHikeContainer
         .append("svg:image")
-        .attr("x", width - rightMargin - leftMargin - scaleToWidth(20))
+        .attr("x", width - constants.rightMargin - constants.leftMargin - scaleToWidth(20))
         .attr("y", scaleToWidth(10))
         .attr("width", scaleToWidth(18))
         .attr("height", scaleToWidth(18))
@@ -184,17 +198,15 @@ function drawMultiDayHikes(svg, width, height) {
       multiDayHikeContainer
         .append("g")
         .attr("class", "multi-day-hike-map-container")
-        .attr("transform", `translate(${width - rightMargin - mapWidth - leftMargin}, 0)`)
+        .attr("transform", `translate(${width - constants.rightMargin - mapWidth - constants.leftMargin}, 0)`)
         .attr("clip-path", "url(#clip-path)");
     var raster = mapContainer.append("g");
 
-    var initialScale = 1 / (2 * Math.PI);
-
-    var projection = d3.geoMercator().scale(initialScale).translate([0, 0]);
+    var projection = d3.geoMercator().scale(constants.initialScale).translate([0, 0]);
 
     var path = d3.geoPath().projection(projection);
 
-    var zoom = d3.zoom().scaleExtent([1 << 11, 16000000]).on("zoom", zoomed);
+    var zoom = d3.zoom().scaleExtent([1 << 11, constants.maxZoom]).on("zoom", zoomed);
     var initialZoom = 50000;
     var maxDimensionInKm = d3.max([multiDayHike.coordinates.widthInKm, multiDayHike.coordinates.heightInKm]);
     if (maxDimensionInKm <= 12) {
@@ -219,12 +231,7 @@ function drawMultiDayHikes(svg, width, height) {
     var center = projection([multiDayHike.coordinates.centerLongitude, multiDayHike.coordinates.centerLatitude]);
 
     function drawHikes(hikeToSlices) {
-      drawHikeGpxTraces(
-        mapContainer,
-        hikes,
-        projection,
-        d => d.tenMeterSlices
-      );
+      drawHikeGpxTraces(mapContainer, hikes, projection, d => d.tenMeterSlices);
     }
 
     drawHikes(hikes);
@@ -257,7 +264,6 @@ function drawMultiDayHikes(svg, width, height) {
         });
 
     function drawLocations(activate) {
-
       drawIconsOnMap(
         mapContainer,
         projection,
@@ -292,7 +298,7 @@ function drawMultiDayHikes(svg, width, height) {
 
       drawHikes(hikes);
 
-      drawLocations(transform.k >= 100000);
+      drawLocations(transform.k >= constants.photoIconsMinZoom);
 
       resizeHikeGpxTracesForZoom(mapContainer, transform);
 
@@ -307,7 +313,7 @@ function drawMultiDayHikes(svg, width, height) {
 
       updateMapTilesForZoom(raster, mapWidth, mapHeight, transform);
 
-      drawScaleBar(mapContainer, transform.k, transform.x, transform.y, mapWidth, mapHeight);
+      drawScaleBar(mapContainer, transform.k, transform.x, transform.y, mapWidth, mapHeight, constants.initialScale);
     }
   }
 
@@ -321,8 +327,7 @@ function drawMultiDayHikes(svg, width, height) {
       })
       .forEach(d => {
         var googleDriveId = d3.select(d).attr("googleDriveId");
-        var href = `https://drive.google.com/thumbnail?id=${googleDriveId}&export=download&sz=h800`;
-        d3.select(d).attr("xlink:href", href);
+        d3.select(d).attr("xlink:href", thumbnailForHeight(googleDriveId, 800));
       });
   }
 
@@ -445,10 +450,6 @@ function drawMultiDayHikes(svg, width, height) {
         clearTooltip();
       });
   }
-
-  function cssAcceptedId(str) {
-    return str.replaceAll(":", "-");
-  }
 }
 
 function cleanMultiDayHikesPage(svg) {

diff --git a/src/photos.js b/src/photos.js
@@ -77,7 +77,7 @@ function drawPhotos(svg, width, height) {
     photosContainer
       .selectAll(".photo-miniature-thumbnail")
       .filter(photo => photo.pageY > viewingYPosition - (height / 2) && photo.pageY < viewingYPosition + height )
-      .attr("xlink:href", photo => `https://drive.google.com/thumbnail?id=${photo.googleDriveId}&export=download&sz=w${photo.miniatureWidth}`);
+      .attr("xlink:href", photo => thumbnailForWidth(photo.googleDriveId, photo.miniatureWidth));
   }
 
   function periodicDisplayOfMiniaturesAtScrollLevel() {
@@ -192,7 +192,7 @@ function drawPhotos(svg, width, height) {
           .attr("height", photoDimensions.height)
           .attr("opacity", opacity)
           .attr("scrollPosition", photoToDisplay.pageY)
-          .attr("xlink:href", `https://drive.google.com/uc?id=${photoToDisplay.googleDriveId}&export=view`);
+          .attr("xlink:href", fullPhoto(photoToDisplay.googleDriveId));
       }
     }
 
@@ -212,7 +212,7 @@ function drawPhotos(svg, width, height) {
         .attr("y", (height - photoDimensions.height) / 2)
         .attr("width", photoDimensions.width)
         .attr("height", photoDimensions.height)
-        .attr("xlink:href", `https://drive.google.com/thumbnail?id=${photo.googleDriveId}&export=download&sz=w${photo.miniatureWidth}`);
+        .attr("xlink:href", thumbnailForWidth(photo.googleDriveId, photo.miniatureWidth));
 
       // If we've never seen this photo in high res before, we download it:
       if (photoContainer.selectAll(`#photo-${photo.googleDriveId}`).empty()) {
@@ -235,7 +235,7 @@ function drawPhotos(svg, width, height) {
 
       photoViewContainer
         .select(".download-button")
-        .on("click", _ => downloadPhoto(`https://drive.google.com/uc?id=${photo.googleDriveId}&export=download`, photo.name));
+        .on("click", _ => downloadPhoto(fullPhotoForDownload(photo.googleDriveId), photo.name));
     }
 
     displayPhoto(photo);
@@ -326,7 +326,7 @@ function drawPhotos(svg, width, height) {
       .attr("xlink:href", "img/download.png")
       .on("mouseover", (event, d) => drawTooltip("Download photo", photoViewContainer, event, 97, 43))
       .on("mouseout", _ => clearTooltip())
-      .on("click", _ => downloadPhoto(`https://drive.google.com/uc?id=${photo.googleDriveId}&export=download`, photo.name));
+      .on("click", _ => downloadPhoto(fullPhotoForDownload(photo.googleDriveId), photo.name));
   }
 }
 

diff --git a/src/utils/css-id.js b/src/utils/css-id.js
@@ -0,0 +1,4 @@
+
+function cssAcceptedId(str) {
+  return str.replaceAll(":", "-");
+}
diff --git a/src/utils/google-drive-photo.js b/src/utils/google-drive-photo.js
@@ -0,0 +1,22 @@
+
+var googleDriveBaseUri = "https://drive.google.com"
+
+var fullPhotoBaseUri = `${googleDriveBaseUri}/uc`
+
+function fullPhoto(googleDriveId) {
+  return `${fullPhotoBaseUri}?id=${googleDriveId}&export=view`;
+}
+
+function fullPhotoForDownload(googleDriveId) {
+  return `${fullPhotoBaseUri}?id=${googleDriveId}&export=download`;
+}
+
+var thumbnailBaseUri = `${googleDriveBaseUri}/thumbnail`
+
+function thumbnailForWidth(googleDriveId, width) {
+  return `${thumbnailBaseUri}?id=${googleDriveId}&export=download&sz=w${width}`;
+}
+
+function thumbnailForHeight(googleDriveId, height) {
+  return `${thumbnailBaseUri}?id=${googleDriveId}&export=download&sz=h${height}`;
+}
diff --git a/src/utils/hike-traces.js b/src/utils/hike-traces.js
@@ -14,7 +14,7 @@ function drawHikeGpxTraces(mapContainer, hikes, projection, hikeToSlices) {
         enter
           .append("path")
           .attr("class", "hike-line")
-          .attr("id", hike => `hike-trace-${hike.name}`)
+          .attr("id", hike => `hike-trace-${cssAcceptedId(hike.name)}`)
           .attr("d", hike => traceLine(hikeToSlices(hike)))
           .style("stroke", hike => hike.isWish ? "#f50ce5" : "black")
           .style("fill", "transparent")

diff --git a/src/utils/scalebar.js b/src/utils/scalebar.js
@@ -1,5 +1,5 @@
 
-function drawScaleBar(mapContainer, zoomLevel, x, y, mapContainerWidth, mapContainerHeight) {
+function drawScaleBar(mapContainer, zoomLevel, x, y, mapContainerWidth, mapContainerHeight, initialScale) {
 
   mapContainer.selectAll("g.scale-bar").remove();
 
@@ -9,7 +9,7 @@ function drawScaleBar(mapContainer, zoomLevel, x, y, mapContainerWidth, mapConta
     .call(
       d3.geoScaleBar()
         .zoomClamp(false)
-        .projection(d3.geoMercator().translate([x, y]).scale(constants.initialScale * zoomLevel))
+        .projection(d3.geoMercator().translate([x, y]).scale(initialScale * zoomLevel))
         .size([mapContainerWidth, mapContainerHeight])
         .left(.02)
         .top(.96)