[openstreetmap/openstreetmap-website] Switch to inline colourable markers (PR #5854)

[Anton Khorev]

@AntonKhorev commented on this pull request.



> +              <svg viewBox="0 0 25 40" class="img-fluid" data-type="from" draggable="true">
+                <use href="#pin-dot" color="<%= MARKER_COLORS[:green] %>" />
+              </svg>

Changes I had to make to keep drag events working (1/3):
```suggestion
              <span draggable="true" data-type="from">
                <svg viewBox="0 0 25 40" class="img-fluid" draggable="true">
                  <use href="#pin-dot" color="<%= MARKER_COLORS[:green] %>" />
                </svg>
              </span>
```

> +              <svg viewBox="0 0 25 40" class="img-fluid" data-type="to" draggable="true">
+                <use href="#pin-dot" color="<%= MARKER_COLORS[:red] %>" />
+              </svg>

Changes I had to make to keep drag events working (2/3):
```suggestion
              <span draggable="true" data-type="to">
                <svg viewBox="0 0 25 40" class="img-fluid" draggable="true">
                  <use href="#pin-dot" color="<%= MARKER_COLORS[:red] %>" />
                </svg>
              </span>
```

> -  $(".routing_marker_column img").on("dragstart", function (e) {
+  $(".routing_marker_column svg").on("dragstart", function (e) {
     const dt = e.originalEvent.dataTransfer;
     dt.effectAllowed = "move";
-    const dragData = { type: $(this).data("type") };
-    dt.setData("text", JSON.stringify(dragData));
+    const jqthis = $(this);
+    dt.setData("text", JSON.stringify(jqthis.data()));
     if (dt.setDragImage) {
-      const img = $("<img>").attr("src", $(e.originalEvent.target).attr("src"));
+      const img = jqthis.clone()
+        .toggleClass("img-fluid position-absolute bottom-100 end-100")
+        .attr({ width: "25", height: "40" })
+        .appendTo(document.body);
       dt.setDragImage(img.get(0), 12, 21);
+      setTimeout(() => img.remove(), 0);
     }
   });

Changes I had to make to keep drag events working (3/3):
```js
  $(".routing_marker_column > span").on("dragstart", function (e) {
    const dt = e.originalEvent.dataTransfer;
    dt.effectAllowed = "move";
    const jqthis = $(this);
    dt.setData("text", JSON.stringify(jqthis.data()));
    if (dt.setDragImage) {
      const img = jqthis.clone()
        .appendTo(document.body);
      img.find("svg")
        .toggleClass("img-fluid position-absolute bottom-100 end-100")
        .attr({ width: "25", height: "40" });
      dt.setDragImage(img.get(0), 12, 21);
      setTimeout(() => img.remove(), 0);
    }
  });
```

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/5854#pullrequestreview-3033107404
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/5854/review/3033107404 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20250718/adeb3c79/attachment-0001.htm>