Source: src/js/views/maps/LayersPanelView.js

  1. "use strict";
  3. define([
  4.   "backbone",
  5.   "text!templates/maps/layers-panel.html",
  6.   "views/maps/LayerCategoryListView",
  7.   "views/maps/LayerListView",
  8.   "views/maps/SearchInputView",
  9. ], (
  10.   Backbone,
  11.   Template,
  12.   LayerCategoryListView,
  13.   LayerListView,
  14.   SearchInputView,
  15. ) => {
  16.   /**
  17.    * @class LayersPanelView
  18.    * @classdesc LayersPanelView shows information about a map's layers and supports
  19.    * searching. This view is used as a toolbar section.
  20.    * @classcategory Views/Maps
  21.    * @name LayersPanelView
  22.    * @extends Backbone.View
  23.    * @screenshot views/maps/LayersPanelView.png
  24.    * @since 2.28.0
  25.    * @constructs LayersPanelView
  26.    */
  27.   const LayersPanelView = Backbone.View.extend(
  28.     /** @lends LayersPanelView.prototype */ {
  29.       /**
  30.        * The type of View this is
  31.        * @type {string}
  32.        */
  33.       type: "LayersPanelView",
  35.       /**
  36.        * The HTML classes to use for this view's element
  37.        * @type {string}
  38.        */
  39.       className: "layers-panel",
  41.       /**
  42.        * The HTML classes to use for this view's HTML elements.
  43.        * @type {Object<string,string>}
  44.        */
  45.       classNames: {
  46.         search: "layers-panel__search",
  47.         layers: "layers-panel__layers",
  48.       },
  50.       /**
  51.        * @typedef {Object} LayersPanelViewOptions
  52.        * @property {Map} The Map model that contains layers information.
  53.        */
  54.       initialize(options) {
  55.         this.map = options.model;
  56.       },
  58.       /**
  59.        * Render the view by updating the HTML of the element.
  60.        * The new HTML is computed from an HTML template that
  61.        * is passed an object with relevant view state.
  62.        * */
  63.       render() {
  64.         this.el.innerHTML = _.template(Template)({
  65.           classNames: this.classNames,
  66.         });
  68.         if (this.map.get("layerCategories")?.length > 0) {
  69.           this.layersView = new LayerCategoryListView({
  70.             collection: this.map.get("layerCategories"),
  71.           });
  72.         } else {
  73.           this.layersView = new LayerListView({
  74.             collection: this.map.get("layers"),
  75.             isCategorized: false,
  76.           });
  77.         }
  78.         this.layersView.render();
  79.         this.$(`.${this.classNames.layers}`).append(this.layersView.el);
  81.         this.searchInput = new SearchInputView({
  82.           placeholder: "Search all data layers",
  83.           search: (text) => this.search(text),
  84.           noMatchCallback: () => this.layersView.search(""),
  85.         });
  86.         this.searchInput.render();
  87.         this.$(`.${this.classNames.search}`).append(this.searchInput.el);
  88.       },
  90.       /**
  91.        * Search function for the SearchInputView.
  92.        * @param {string} [text] - The search text from user input.
  93.        * @returns {boolean} - True if there is a layer match.
  94.        */
  95.       search(text) {
  96.         this.dismissLayerDetails();
  97.         const matched = this.layersView.search(text);
  98.         if (!matched) {
  99.           this.searchInput.setError("No layers match your search");
  100.         }
  101.         return matched;
  102.       },
  104.       dismissLayerDetails() {
  105.         this.map.getLayerGroups().forEach((mapAssets) => {
  106.           mapAssets.forEach((layerModel) => {
  107.             layerModel.set("selected", false);
  108.           });
  109.         });
  110.       },
  111.     },
  112.   );
  114.   return LayersPanelView;
  115. });