Legend 2: Create legend components

src/js/templates/maps/legend/layer-legend.html

@@ -0,0 +1,2 @@
+<div class="layer-legend__layer-name"><%= name %></div>
+<div class="<%= classNames.palette %>">palette</div>

src/js/templates/maps/legend/legend-container.html

@@ -0,0 +1,6 @@
+<div class="<%= classNames.header %>">
+  <i class="icon-list-ul legend-container__header-icon"></i>
+  <div class="legend-container__header-name">Legend</div>
+  <i class="icon-caret-down <%= classNames.expandIcon %>"></i>
+</div>
+<div class="<%= classNames.content %>"></div>

src/js/views/maps/legend/LayerLegendView.js

@@ -0,0 +1,72 @@
+"use strict";
+
+define([
+  "backbone",
+  "underscore",
+  "models/maps/AssetColorPalette",
+  "text!templates/maps/legend/layer-legend.html",
+], (Backbone, _, AssetColorPalette, Template) => {
+  const BASE_CLASS = "layer-legend";
+  const CLASS_NAMES = {
+    palette: `${BASE_CLASS}__palette`,
+  };
+
+  /**
+   * @class LayerLegendView
+   * @classdesc A legend view for a particular layer that contains the layer name and the color
+   * details.
+   * @classcategory Views/Maps/Legend
+   * @name LayerLegendView
+   * @augments Backbone.View
+   * @screenshot views/maps/legend/LayerLegendView.png
+   * @since 0.0.0
+   * @constructs
+   */
+  const LayerLegendView = Backbone.View.extend(
+    /** @lends LayerLegendView.prototype */ {
+      /** @inheritdoc */
+      className: BASE_CLASS,
+
+      /**
+       * The model that this view uses
+       * @type {AssetColorPalette}
+       */
+      model: null,
+
+      /** @inheritdoc */
+      template: _.template(Template),
+
+      /** @inheritdoc */
+      initialize(options) {
+        this.model = options.model;
+      },
+
+      /** @inheritdoc */
+      render() {
+        this.$el.html(
+          this.template({
+            classNames: CLASS_NAMES,
+            name: this.model.get("label"),
+          }),
+        );
+
+        const paletteType = this.model.get("paletteType");
+        if (paletteType === "categorical") {
+          this.renderCategoricalPalette();
+        } else if (paletteType === "continuous") {
+          this.renderContinuousPalette();
+        }
+      },
+
+      renderCategoricalPalette() {
+        // TODO
+      },
+
+      renderContinuousPalette() {
+        // TODO
+      },
+    },
+  );
+
+  return LayerLegendView;
+});

src/js/views/maps/legend/LegendContainerView.js

@@ -0,0 +1,93 @@
+"use strict";
+
+define([
+  "backbone",
+  "underscore",
+  "models/maps/Map",
+  "views/maps/legend/LayerLegendView",
+  "text!templates/maps/legend/legend-container.html",
+], (Backbone, _, Map, LayerLegendView, Template) => {
+  const BASE_CLASS = "legend-container";
+  const CLASS_NAMES = {
+    content: `${BASE_CLASS}__content`,
+    header: `${BASE_CLASS}__header`,
+    expandIcon: `${BASE_CLASS}__header-expand`,
+  };
+
+  /**
+   * @class LegendContainerView
+   * @classdesc A container for the legend overlay on the map.
+   * @classcategory Views/Maps/Legend
+   * @name LegendContainerView
+   * @augments Backbone.View
+   * @screenshot views/maps/legend/LegendContainerView.png
+   * @since 0.0.0
+   * @constructs
+   */
+  const LegendContainerView = Backbone.View.extend(
+    /** @lends LegendContainerView.prototype */ {
+      /** @inheritdoc */
+      className: BASE_CLASS,
+
+      /**
+       * The model that this view uses
+       * @type {Map}
+       */
+      model: null,
+
+      /** @inheritdoc */
+      template: _.template(Template),
+
+      /** @inheritdoc */
+      events() {
+        return { [`click .${CLASS_NAMES.header}`]: "toggleExpanded" };
+      },
+
+      /** @inheritdoc */
+      initialize(options) {
+        this.model = options.model;
+      },
+
+      /** @inheritdoc */
+      render() {
+        this.$el.html(
+          this.template({
+            classNames: CLASS_NAMES,
+          }),
+        );
+
+        this.updateLegend();
+        this.model.get("allLayers")?.forEach((layer) => {
+          this.stopListening(layer, "change:visible");
+          this.listenTo(layer, "change:visible", this.updateLegend);
+        });
+      },
+
+      /**
+       * Toggles the expanded state of the legend container.
+       */
+      toggleExpanded() {
+        this.$el.toggleClass("expanded");
+      },
+
+      /**
+       * Updates the legend with the current color palettes.
+       */
+      updateLegend() {
+        const content = this.$(`.${CLASS_NAMES.content}`).empty();
+        this.model.get("allLayers")?.forEach((layer) => {
+          if (!layer.get("visible") || !layer.get("colorPalette")) {
+            return;
+          }
+          const layerLegendView = new LayerLegendView({
+            model: layer.get("colorPalette"),
+          });
+          layerLegendView.render();
+          content.append(layerLegendView.el);
+        });
+      },
+    },
+  );
+
+  return LegendContainerView;
+});

test/config/tests.json

@@ -68,7 +68,9 @@
     "./js/specs/unit/models/SolrResult.spec.js",
     "./js/specs/unit/models/DataONEObject.spec.js",
     "./js/specs/unit/views/maps/MapView.spec.js",
-    "./js/specs/unit/views/maps/MapWidgetContainerView.spec.js"
+    "./js/specs/unit/views/maps/MapWidgetContainerView.spec.js",
+    "./js/specs/unit/views/maps/legend/LayerLegendView.spec.js",
+    "./js/specs/unit/views/maps/legend/LegendContainerView.spec.js"
   ],
   "integration": [
     "./js/specs/integration/collections/SolrResults.spec.js",

test/js/specs/unit/views/maps/legend/LayerLegendView.spec.js

@@ -0,0 +1,28 @@
+define([
+  "views/maps/legend/LayerLegendView",
+  "models/maps/Map",
+  "/test/js/specs/shared/clean-state.js",
+], (LayerLegendView, Map, cleanState) => {
+  const expect = chai.expect;
+
+  describe("LayerLegendView Test Suite", () => {
+    const state = cleanState(() => {
+      const view = new LayerLegendView({
+        el: document.createElement("div"),
+        model: new Map(),
+      });
+
+      return { view };
+    }, beforeEach);
+
+    describe("Initialization", () => {
+      it("creates an LayerLegendView instance", () => {
+        expect(state.view).to.be.instanceof(LayerLegendView);
+      });
+    });
+
+    describe("render", () => {
+      // TODO
+    });
+  });
+});

test/js/specs/unit/views/maps/legend/LegendContainerView.spec.js

@@ -0,0 +1,71 @@
+define([
+  "views/maps/legend/LegendContainerView",
+  "models/maps/Map",
+  "collections/maps/MapAssets",
+  "/test/js/specs/shared/clean-state.js",
+  "/test/js/specs/unit/views/maps/legend/LegendContainerViewHarness.js",
+], (
+  LegendContainerView,
+  Map,
+  MapAssets,
+  cleanState,
+  LegendContainerViewHarness,
+) => {
+  const expect = chai.expect;
+
+  describe("LegendContainerView Test Suite", () => {
+    const state = cleanState(() => {
+      const view = new LegendContainerView({
+        el: document.createElement("div"),
+        model: new Map(),
+      });
+      const harness = new LegendContainerViewHarness(view);
+
+      return { view, harness };
+    }, beforeEach);
+
+    describe("Initialization", () => {
+      it("creates an LegendContainerView instance", () => {
+        expect(state.view).to.be.instanceof(LegendContainerView);
+      });
+    });
+
+    describe("render", () => {
+      it("shows the legend for the visible layers", () => {
+        const layers = new MapAssets([
+          { label: "layer 1", visible: false, colorPalette: {} },
+          { label: "layer 2", visible: true, colorPalette: {} },
+        ]);
+        state.view.model.set("allLayers", layers);
+        state.view.render();
+
+        expect(state.harness.getContent().children()).to.have.lengthOf(1);
+      });
+
+      it("updates legend content when layers' visibility changes", () => {
+        const layers = new MapAssets([
+          { label: "layer 1", visible: false, colorPalette: {} },
+          { label: "layer 2", visible: true, colorPalette: {} },
+        ]);
+        state.view.model.set("allLayers", layers);
+        state.view.render();
+        layers.at(0).set("visible", true);
+
+        expect(state.harness.getContent().children()).to.have.lengthOf(2);
+      });
+    });
+
+    describe("toggleExpanded", () => {
+      it("toggles expanded status when triggered", () => {
+        state.view.render();
+        expect(state.harness.isExpanded()).to.be.false;
+
+        state.view.toggleExpanded();
+        expect(state.harness.isExpanded()).to.be.true;
+
+        state.view.toggleExpanded();
+        expect(state.harness.isExpanded()).to.be.false;
+      });
+    });
+  });
+});

test/js/specs/unit/views/maps/legend/LegendContainerViewHarness.js

@@ -0,0 +1,17 @@
+"use strict";
+
+define([], () => {
+  return class LegendContainerViewHarness {
+    constructor(view) {
+      this.view = view;
+    }
+
+    getContent() {
+      return this.view.$(".legend-container__content");
+    }
+
+    isExpanded() {
+      return this.view.$el.hasClass("expanded");
+    }
+  };
+});