From aa95f24a0fd8b1c67355aabd319a23d2e5e5bb3e Mon Sep 17 00:00:00 2001
From: Anita Lipsky <anita@purplebugs.com>
Date: Wed, 6 Nov 2024 10:41:23 +0100
Subject: [PATCH] style: Webpage box link in marker

---
 src/alpaca-map-marker.js | 37 ++++++++++++++++++++++++++++++++++++-
 src/alpaca-map.js        |  4 ++++
 src/styles-map-marker.js |  1 +
 3 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/src/alpaca-map-marker.js b/src/alpaca-map-marker.js
index f89e2a0..7d6d8fe 100644
--- a/src/alpaca-map-marker.js
+++ b/src/alpaca-map-marker.js
@@ -9,6 +9,8 @@ export default class AlpacaMapMarker extends LitElement {
     count: { type: Number },
     city: { type: String },
     address: { type: String },
+    url_full: { type: String },
+    url_pretty: { type: String },
     directions: { type: String },
     highlight: {
       type: String,
@@ -30,6 +32,8 @@ export default class AlpacaMapMarker extends LitElement {
     this.count;
     this.city;
     this.address;
+    this.url_full;
+    this.url_pretty;
     this.directions;
     this.highlight = false;
   }
@@ -62,6 +66,37 @@ export default class AlpacaMapMarker extends LitElement {
     return html`${nothing}`;
   }
 
+  renderLinkToWebPage() {
+    if (this.url_full === null || this.url_full === undefined) {
+      return html`${nothing}`;
+    }
+
+    if (this.url_pretty === null || this.url_pretty === undefined) {
+      return html`${nothing}`;
+    }
+
+    return html`
+      <a
+        href="${this.url_full}"
+        target="_blank"
+        rel="noreferrer"
+        title="${this.url_pretty}"
+        onclick="event.stopPropagation()"
+      >
+        <div class="farm-marker-link">
+          <address class="webpage">
+            <alpaca-map-icon icon="car" class="icon"></alpaca-map-icon
+            ><span class="text">Webpage</span
+            ><alpaca-map-icon
+              icon="arrowUpRightFromSquare"
+              class="icon link-arrow"
+            ></alpaca-map-icon>
+          </address>
+        </div>
+      </a>
+    `;
+  }
+
   createRenderRoot() {
     // Turns off shadow DOM.
     // Since AlpacaMapMarker is not used externally, only by AlpacaMap then we want to inherit all styling, so turn off shadow DOM.
@@ -91,7 +126,7 @@ export default class AlpacaMapMarker extends LitElement {
           <address>${this.address}</address>
         </div>
 
-        ${this.renderLinkToFarmPage()}
+        ${this.renderLinkToFarmPage()} ${this.renderLinkToWebPage()}
 
         <a
           href="${this.directions}"
diff --git a/src/alpaca-map.js b/src/alpaca-map.js
index 91f9200..0734eaa 100644
--- a/src/alpaca-map.js
+++ b/src/alpaca-map.js
@@ -319,6 +319,10 @@ export default class AlpacaMap extends LitElement {
         "address",
         farm?.location?.google?.formatted_address
       );
+
+      content.setAttribute("url_full", farm?.url?.full);
+      content.setAttribute("url_pretty", farm?.url?.pretty);
+
       content.setAttribute(
         "directions",
         farm?.location?.google?.directions_url_href
diff --git a/src/styles-map-marker.js b/src/styles-map-marker.js
index 3a13e30..0226e38 100644
--- a/src/styles-map-marker.js
+++ b/src/styles-map-marker.js
@@ -83,6 +83,7 @@ export default css`
 
     .city address,
     .farm-info,
+    .webpage,
     .directions {
       display: flex;
       flex-basis: auto;