Add references field to Crop class.

1 files changed, 23 insertions, 1 deletions

diff --git a/js/garden.js b/js/garden.js
index 1551ff5..8e5c991 100644
--- a/js/garden.js
+++ b/js/garden.js
@@ -44,7 +44,7 @@ class Season {
 
 class Crop {
   constructor(name, {depth, fallCrop, family, headStart, interval, maturity, multisow,
-                     overwinterPlant, pause, spacing, springPlant, resume,
+                     overwinterPlant, pause, references, spacing, springPlant, resume,
                      species, transplant, trellis}) {
     // Seed planting depth in inches.
     this.depth = depth || .25;
@@ -70,6 +70,8 @@ class Crop {
     this.overwinterPlant = overwinterPlant;
     // When to pause succession planting (weeks after last frost)
     this.pause = pause || 99;
+    // External links to helpful information about the crop.
+    this.references = references || [];
     // When to resume succession planting (weeks before first frost)
     this.resume = resume || 99;
     // Plants per square foot, or, in the case of multisowing, clumps
@@ -551,6 +553,25 @@ function viewCropDetails(crop) {
     modal.appendChild(p);
   }
 
+  function addReferences() {
+    const div = document.createElement("div");
+    const title = document.createElement("span");
+    const list = document.createElement("ul");
+    title.appendChild(document.createTextNode("References"));
+    div.appendChild(title);
+    crop.references.forEach(ref => {
+      const li = document.createElement("li");
+      const link = document.createElement("a");
+      link.appendChild(document.createTextNode(ref.title));
+      link.href = ref.url;
+      link.target = "_blank"; // open in new tab.
+      li.appendChild(link);
+      list.appendChild(li);
+    });
+    div.appendChild(list);
+    modal.appendChild(div);
+  }
+
   const container = document.getElementById("container");
   const overlay = document.createElement("div");
   const modal = document.createElement("div");
@@ -608,6 +629,7 @@ function viewCropDetails(crop) {
   }
   addDetail("Seed planting depth", `${crop.depth}"`);
   addDetail("Needs a trellis", crop.trellis ? "Yes" : "No");
+  addReferences();
   overlay.classList.add("overlay");
   overlay.appendChild(modal);
   container.appendChild(overlay);