Mercurial > hg > batmud > maputils

changeset 2570:8f923c830b19

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Generate tooltips in citymaps via Javascript instead of building them into div elements in mkcitymap.
author Matti Hamalainen <ccr@tnsp.org>
date Sat, 27 Jan 2024 18:43:39 +0200
parents 575e23079e62
children bd7f80872e99
files misc/misc.css src/citymap.js src/mkcitymap.c
diffstat 3 files changed, 81 insertions(+), 76 deletions(-) [+]
line wrap: on
line diff
--- a/misc/misc.css	Sat Jan 27 17:26:10 2024 +0200
+++ b/misc/misc.css	Sat Jan 27 18:43:39 2024 +0200
@@ -14,22 +14,7 @@
 }
 
 
-.holder {
-  display: block;
-  color: #000;
-}
-
-* html .tooltip {
-  border-right: 400px solid #fff;
-}
-
-* html .holder {
-  display: inline-block;
-  position: relative;
-  margin-right: -400px;
-}
-
-div.tooltip {
+#tooltip {
   position: absolute;
   display: none;
 
@@ -46,12 +31,19 @@
   z-index: 15;
 }
 
-div.tooltip h1 {
+#tooltip h1 {
   font-size: 1.1em;
   margin: 0;
   padding: 0;
 }
 
+#tooltip .names {
+  color: red;
+}
+
+#tooltip .freeform {
+}
+
 pre.map {
 }
 
--- a/src/citymap.js	Sat Jan 27 17:26:10 2024 +0200
+++ b/src/citymap.js	Sat Jan 27 18:43:39 2024 +0200
@@ -3,12 +3,11 @@
 // Programmed by Matti 'ccr' Hamalainen <ccr@tnsp.org>
 // (C) Copyright 2006-2024 Tecnic Software productions (TNSP)
 //
-var mapTipPrev = null;
-var mapTipItem = null;
-var mapTipXC = 0;
-var mapTipYC = 0;
+var mapTipData = null;
+var mapTipItem = null, mapTipTitle = null, mapTipNames = null, mapTipFreeform;
+var mapTipXC = 0, mapTipYC = 0;
 
-var mapElem = null, listElem = null;
+var mapElem = null, listElem = null, mapElemPrev = null;
 var mapDragEnable = true, mapDragGoing = false;
 var mapDragPos = { x: 0, y: 0, mx: 0, my: 0 };
 var mapCurrID;
@@ -106,11 +105,19 @@
 function mapTooltipShow(ev)
 {
   const eid = ev.target.dataset.id;
-  mapTipItem = document.getElementById("tt"+ eid);
+  mapTipData = document.getElementById("listloc"+ eid);
+  if (mapTipData != null)
+  {
+    console.log(mapTipData.dataset);
+    mapTipTitle.textContent = mapTipData.dataset.ttTitle;
+    mapTipNames.textContent = mapTipData.dataset.ttNames;
+    mapTipFreeform.textContent = mapTipData.dataset.ttFreeform;
+  }
 
   mapTipItem.style.left    = mapTipXC + "px";
   mapTipItem.style.top     = mapTipYC + "px";
   mapTipItem.style.display = "block";
+  mapTooltipUpdate(ev);
 }
 
 
@@ -134,16 +141,16 @@
 {
   const eid = ev.target.dataset.id;
 
-  if (mapTipPrev != null) mapSetActive(mapTipPrev, false);
+  if (mapElemPrev != null) mapSetActive(mapElemPrev, false);
   mapSetActive(eid, true);
-  mapTipPrev = eid;
+  mapElemPrev = eid;
 }
 
 
 function mapLocationHide(ev)
 {
-  if (mapTipPrev != null) mapSetActive(mapTipPrev, false);
-  mapTipPrev = null;
+  if (mapElemPrev != null) mapSetActive(mapElemPrev, false);
+  mapElemPrev = null;
   mapTooltipHide(ev);
 }
 
@@ -155,7 +162,6 @@
 
   mapTooltipHide(ev);
   mapTooltipShow(ev);
-  mapTooltipUpdate(ev);
 }
 
 
@@ -250,6 +256,20 @@
 
   mapElem.style.cursor = "grab";
 
+  // Create tooltip div
+  mapTipItem = document.createElement("div");
+  mapTipItem.id = "tooltip";
+  mapTipItem.style.display = "none";
+  mapTipTitle = document.createElement("h1");
+  mapTipNames = document.createElement("div");
+  mapTipNames.className = "names";
+  mapTipFreeform = document.createElement("div");
+  mapTipFreeform.className = "freeform";
+  mapTipItem.appendChild(mapTipTitle);
+  mapTipItem.appendChild(mapTipNames);
+  mapTipItem.appendChild(mapTipFreeform);
+  document.body.appendChild(mapTipItem);
+
   // Add event listeners to locations
   var elems = document.getElementsByClassName("loc");
   for (let i = 0; i < elems.length; i++)
--- a/src/mkcitymap.c	Sat Jan 27 17:26:10 2024 +0200
+++ b/src/mkcitymap.c	Sat Jan 27 18:43:39 2024 +0200
@@ -206,22 +206,55 @@
         if ((tmps = getExtraNameData(marker)) == NULL)
             return;
 
-        for (int i = 0; i < marker->nnames; i++)
+        fprintf(outFile,
+            "<a class=\"item %s%s lt%s lt%d\" id=\"listloc%d_%d\" href=\"#%d_%d\" "
+            "data-id=\"%d_%d\" data-info=\"%s\" data-tt-title=\"%s%s\" ",
+            "ltprimary",
+            marker->nnames > 1 ? " ltsubitems" : "",
+            getCityLocationType(marker),
+            marker->align,
+            marker->xc, marker->yc,
+            marker->xc, marker->yc,
+            marker->xc, marker->yc,
+            marker->freeform ? "true" : "false",
+            marker->names[0].name, tmps);
+
+        if (marker->nnames > 1)
+        {
+            fprintf(outFile, "data-tt-names=\"");
+            for (int i = 1; i < marker->nnames; i++)
+            {
+                fputse(marker->names[i].name, outFile);
+                fprintf(outFile, "%s",
+                    i + 1 < marker->nnames ? " ; " : "");
+            }
+            fprintf(outFile, "\" ");
+        }
+
+        if (marker->freeform)
+        {
+            fprintf(outFile, "data-tt-freeform=\"");
+            fputse(marker->freeform, outFile);
+            fprintf(outFile, "\"");
+        }
+
+        fprintf(outFile, ">");
+        fputse(marker->names[0].name, outFile);
+        fprintf(outFile, "</a>\n");
+
+        for (int i = 1; i < marker->nnames; i++)
         {
             fprintf(outFile,
-                "<a class=\"item %s%s lt%s lt%d\" id=\"listloc%d_%d\" data-id=\"%d_%d\" data-info=\"%s\" href=\"#%d_%d\">",
-                i == 0 ? "ltprimary" : "ltsecondary",
-                i == 0 && marker->nnames > 1 ? " ltsubitems" : "",
+                "  <a class=\"item %s lt%s lt%d\" href=\"#%d_%d\" "
+                "data-id=\"%d_%d\">",
+                "ltsecondary",
                 getCityLocationType(marker),
                 marker->align,
                 marker->xc, marker->yc,
-                marker->xc, marker->yc,
-                marker->freeform ? "true" : "false",
                 marker->xc, marker->yc);
 
             fputse(marker->names[i].name, outFile);
-
-            fprintf(outFile, "%s</a>\n", tmps);
+            fprintf(outFile, "</a>\n");
         }
 
         th_free(tmps);
@@ -229,46 +262,6 @@
 
     fprintf(outFile,
     "</div>\n"
-    );
-
-    for (int n = 0; n < locs->nlocations; n++)
-    {
-        const LocMarker *marker = locs->locations[n];
-        if (marker->flags & LOCF_INVIS)
-            continue;
-
-        if ((tmps = getExtraNameData(marker)) == NULL)
-            return;
-
-        fprintf(outFile,
-        "<div class=\"tooltip holder\" id=\"tt%d_%d\" data-id=\"%d_%d\">"
-        "<h1>%s%s</h1>",
-        marker->xc, marker->yc,
-        marker->xc, marker->yc,
-        marker->names[0].name,
-        tmps);
-
-        if (marker->nnames > 1)
-        {
-            for (int i = 1; i < marker->nnames; i++)
-            {
-                fprintf(outFile, "%s%s",
-                    marker->names[i].name,
-                    i + 1 < marker->nnames ? " ; " : "");
-            }
-        }
-
-        if (marker->freeform)
-        {
-            fprintf(outFile, "<br />%s", marker->freeform);
-        }
-
-        fprintf(outFile, "</div>\n");
-
-        th_free(tmps);
-    }
-
-    fprintf(outFile,
     "</body>\n"
     "</html>\n"
     );