feat: Attribute linkToFarmPage shows link to alpaca.life farm page (#48)

purplebugs · Nov 5, 2024 · 3504c94 · 3504c94
1 parent 6594d13
commit 3504c94
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -35,6 +35,17 @@ Web component created using [lit](https://lit.dev/)
    <alpaca-map apiKey="GOOGLE-API-KEY" dataSource="https://www.replace-me.com/api/cool-api"></alpaca-map>
 ```
 
+1. Optional. To override map markers linking to the farm page, set the value of `linkToFarmPage`
+
+- `true`- shows link on map marker to www.alpaca.life farm info page
+- `false`- does not show link
+
+eg
+
+```
+   <alpaca-map apiKey="GOOGLE-API-KEY" linkToFarmPage=false></alpaca-map>
+```
+
 ## For developers 🤖
 
 ### Install app 🪴

diff --git a/src/alpaca-map-icon.js b/src/alpaca-map-icon.js
@@ -63,6 +63,12 @@ export default class AlpacaMapIcon extends LitElement {
     return html`<svg class="icon" viewBox="0 0 640 512">${path}</svg>`;
   }
 
+  _iconCircleInfo() {
+    const path = svg`<path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/>`;
+
+    return html`<svg class="icon" viewBox="0 0 640 512">${path}</svg>`;
+  }
+
   _iconHandshake() {
     const path = svg`<path d="M323.4 85.2l-96.8 78.4c-16.1 13-19.2 36.4-7 53.1c12.9 17.8 38 21.3 55.3 7.8l99.3-77.2c7-5.4 17-4.2 22.5 2.8s4.2 17-2.8 22.5l-20.9 16.2L512 316.8V128h-.7l-3.9-2.5L434.8 79c-15.3-9.8-33.2-15-51.4-15c-21.8 0-43 7.5-60 21.2zm22.8 124.4l-51.7 40.2C263 274.4 217.3 268 193.7 235.6c-22.2-30.5-16.6-73.1 12.7-96.8l83.2-67.3c-11.6-4.9-24.1-7.4-36.8-7.4C234 64 215.7 69.6 200 80l-72 48V352h28.2l91.4 83.4c19.6 17.9 49.9 16.5 67.8-3.1c5.5-6.1 9.2-13.2 11.1-20.6l17 15.6c19.5 17.9 49.9 16.6 67.8-2.9c4.5-4.9 7.8-10.6 9.9-16.5c19.4 13 45.8 10.3 62.1-7.5c17.9-19.5 16.6-49.9-2.9-67.8l-134.2-123zM16 128c-8.8 0-16 7.2-16 16V352c0 17.7 14.3 32 32 32H64c17.7 0 32-14.3 32-32V128H16zM48 320a16 16 0 1 1 0 32 16 16 0 1 1 0-32zM544 128V352c0 17.7 14.3 32 32 32h32c17.7 0 32-14.3 32-32V144c0-8.8-7.2-16-16-16H544zm32 208a16 16 0 1 1 32 0 16 16 0 1 1 -32 0z"/>`;
 
@@ -120,6 +126,9 @@ export default class AlpacaMapIcon extends LitElement {
       case "calendarCheck":
         icon = this._iconCalendarCheck();
         break;
+      case "circleInfo":
+        icon = this._iconCircleInfo();
+        break;
       case "handShake":
         icon = this._iconHandshake();
         break;

diff --git a/src/alpaca-map-marker.js b/src/alpaca-map-marker.js
@@ -1,8 +1,9 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, nothing, html, css } from "lit";
 import "./alpaca-map-icon.js";
 
 export default class AlpacaMapMarker extends LitElement {
   static properties = {
+    id: { type: Number },
     name: { type: String },
     category: { type: String },
     count: { type: Number },
@@ -19,6 +20,7 @@ export default class AlpacaMapMarker extends LitElement {
         }
       },
     } /* If a property changes the element re-renders */,
+    linkToFarmPage: { type: Boolean },
   };
 
   constructor() {
@@ -39,6 +41,27 @@ export default class AlpacaMapMarker extends LitElement {
     super.connectedCallback();
   }
 
+  renderLinkToFarmPage() {
+    if (this.linkToFarmPage) {
+      return html`
+        <a
+          href="https://www.alpaca.life/farm/${this.id}"
+          onclick="event.stopPropagation()"
+        >
+          <div class="farm-marker-link">
+            <address class="farm-info">
+              <span class="icon"
+                ><alpaca-map-icon icon="circleInfo"></alpaca-map-icon></span
+              ><span class="text">Farm info</span>
+            </address>
+          </div>
+        </a>
+      `;
+    }
+
+    return html`${nothing}`;
+  }
+
   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.
@@ -55,32 +78,32 @@ export default class AlpacaMapMarker extends LitElement {
         </div>
         <div class="count">${this.count} 🦙</div>
       </div>
-
       <div class="more-info ${this.highlight}">
         <div class="name">
           <h2>${this.name}</h2>
         </div>
-
         <div class="city">
           <address>
             <alpaca-map-icon icon="locationDot"></alpaca-map-icon>${this.city}
           </address>
         </div>
-
         <div class="address">
           <address>${this.address}</address>
         </div>
 
+        ${this.renderLinkToFarmPage()}
+
         <a
           href="${this.directions}"
           target="_blank"
           rel="noreferrer"
           title="Google directions"
+          onclick="event.stopPropagation()"
         >
           <div class="farm-marker-link">
             <address class="directions">
               <alpaca-map-icon icon="car" class="icon"></alpaca-map-icon
-              ><span>Directions</span
+              ><span class="text">Directions</span
               ><alpaca-map-icon
                 icon="arrowUpRightFromSquare"
                 class="icon link-arrow"

diff --git a/src/alpaca-map.js b/src/alpaca-map.js
@@ -15,6 +15,7 @@ export default class AlpacaMap extends LitElement {
     centerLng: { type: Number },
     dataSource: { type: String },
     assetSource: { type: String },
+    linkToFarmPage: { type: Boolean },
   };
 
   static styles = [
@@ -227,6 +228,7 @@ export default class AlpacaMap extends LitElement {
     this.centerLng = 8.4689;
     this.dataSource = "http://localhost:3000/api/companies"; // TODO set default depending on environment
     this.assetSource = "https://www.alpaca.life/assets";
+    this.linkToFarmPage = true;
 
     this.farms = [];
     this.cluster = null;
@@ -303,6 +305,9 @@ export default class AlpacaMap extends LitElement {
 
     const markers = this.farms.map((farm) => {
       const content = document.createElement("alpaca-map-marker");
+      content.setAttribute("linkToFarmPage", this.linkToFarmPage);
+
+      content.setAttribute("id", farm?.id);
       content.setAttribute("name", farm?.name);
       content.setAttribute(
         "category",

diff --git a/src/styles-map-marker.js b/src/styles-map-marker.js
@@ -81,8 +81,9 @@ export default css`
       box-shadow: 0 0.25rem 0 0.125rem var(--gray-400);
     }
 
-    .directions,
-    .city address {
+    .city address,
+    .farm-info,
+    .directions {
       display: flex;
       flex-basis: auto;
       align-items: center;