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

"use strict";

define([
  "backbone",
  "underscore",
  "models/maps/AssetColorPalette",
  "views/maps/legend/CategoricalSwatchView",
  "views/maps/legend/ContinuousSwatchView",
  "text!templates/maps/legend/layer-legend.html",
], (
  Backbone,
  _,
  AssetColorPalette,
  CategoricalSwatchView,
  ContinuousSwatchView,
  Template,
) => {
  const BASE_CLASS = "layer-legend";
  const CLASS_NAMES = {
    palette: `${BASE_CLASS}__palette`,
    icon: "list-item__icon",
    filterIcon: "list-item__filter-icon",
    filterIconActive: "list-item__filter-icon--active",
    layerName: `${BASE_CLASS}__layer-name`,
  };

  /**
   * @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 2.30.0
   * @constructs
   */
  const LayerLegendView = Backbone.View.extend(
    /** @lends LayerLegendView.prototype */ {
      /** @inheritdoc */
      className: BASE_CLASS,

      /**
       * The palette model that this view uses
       * @type {AssetColorPalette}
       */
      model: null,

      /**
       * The name of the layer that this legend applies to.
       * @type {string}
       */
      layerName: null,

      /** @inheritdoc */
      template: _.template(Template),

      /** @inheritdoc */
      initialize(options) {
        this.filterModel = options.filterModel;
        this.model = options.model;
        this.layerName = options.layerName;
        this.layerModel = options.layerModel;
      },

      /** @inheritdoc */
      render() {
        const paletteType = this.model.get("paletteType");
        if (paletteType === "categorical") {
          this.renderCategoricalPalette();
        } else if (paletteType === "continuous") {
          this.renderContinuousPalette();
        }
      },

      /** Populates the view template with variabels. */
      renderTemplate() {
        let name;
        const property = this.model.get("label") || this.model.get("property");
        if (this.layerName && property) {
          name = `${this.layerName} (${property})`;
        } else {
          name = this.layerName || property;
        }

        this.$el.html(
          this.template({
            classNames: CLASS_NAMES,
            name,
          }),
        );

        // Insert the filter icon to the right of the label element text. This
        //  icon appears for layers that are "filterable" based on their
        //  atrributes.
        this.swatchEl = this.el.querySelector(`.${CLASS_NAMES.layerName}`);
        if (this.filterModel && this.swatchEl) {
          const filterIconEl = document.createElement("span");
          const classes = [
            CLASS_NAMES.icon,
            CLASS_NAMES.filterIcon,
            CLASS_NAMES.filterIconActive,
          ];
          filterIconEl.classList.add(...classes);
          filterIconEl.title = "Filter by property"; // add tooltip
          filterIconEl.innerHTML = `<i class="icon icon-filter"></i>`;
          this.swatchEl.prepend(filterIconEl);
        }
      },

      /** Fills the palette div with categorical swatches. */
      renderCategoricalPalette() {
        this.renderTemplate();
        this.model.get("colors").forEach((color) => {
          // if (color.get("value")) {
          // const swatch = new CategoricalSwatchView({ model: color });
          const swatch = new CategoricalSwatchView({
            model: color,
            filterModel: this.filterModel,
            layerModel: this.layerModel,
          });
          swatch.render();

          this.$(`.${CLASS_NAMES.palette}`).append(swatch.el);
          // }
        });
      },

      /** Fills the palette div with a continuous swatch. */
      renderContinuousPalette() {
        this.renderTemplate();
        const swatch = new ContinuousSwatchView({
          model: this.model,
        });
        swatch.render();

        this.$(`.${CLASS_NAMES.palette}`).append(swatch.el);
      },
    },
  );

  return LayerLegendView;
});