Use shared expansion panel component in layer list

src/css/map-view.css

@@ -867,72 +867,6 @@ represents 1 unit of the given distance measurement. */
   opacity: var(--map-no-brightness-or-opacity-tweaks, 0.5);
 }
 
-/*****************************************************************************************
- *
- * Layers Category List
- *
- * Layer category list contains a list of layer categories which can be expanded in to a list of Layer Items.
- *
- */
-
-.layer-category-list {
-  .layer-category-item {
-    box-shadow: 0 1px var(--map-col-item-divider, var(--map-col-bkg-lightest__deprecate)) inset;
-
-    .layer-category-item__metadata {
-      display: grid;
-      align-items: center;
-      cursor: pointer;
-      font-size: 1rem;
-      grid-template-columns: min-content auto min-content;
-      padding: 0 1.5rem;
-
-      &:hover {
-        background-color: var(--map-col-content-bkg-highlight, #15324e);
-        transition: background-color .3s ease-in-out;
-      }
-    }
-  }
-}
-
-.layer-category-item__label {
-  font-weight: 500;
-  color: var(--map-col-text-highlight, var(--map-col-highlight__deprecate));
-}
-
-.layer-category-item__icon {
-  fill: var(--map-col-text-highlight, var(--map-col-highlight__deprecate));
-  color: var(--map-col-text-highlight, var(--map-col-highlight__deprecate));
-  height: 2rem;
-  width: 2rem;
-  margin: 0.25rem;
-  margin-right: 0.75rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.layer-category-item__icon>svg {
-  height: 1rem;
-}
-
-.layer-category-item__expand-toggle {
-  width: 2rem;
-  display: flex;
-  justify-content: center;
-  color: var(--map-col-utility-buttons);
-}
-
-.layer-category-item__layers {
-  display: none;
-  animation: fadeIn .3s ease-in-out;
-}
-
-.layer-category-item__layers.open {
-  display: block;
-}
-
-
 /*****************************************************************************************
  *
  * Layer Details

src/js/templates/maps/layer-category-item.html

@@ -1,13 +1 @@
-<div class="<%= classNames.metadata %>">
-  <span class="<%= classNames.icon %>">
-    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"><path d="m3.2 7.3 8.6 4.6a.5.5 0 0 0 .4 0l8.6-4.6a.4.4 0 0 0 0-.8L12.1 3a.5.5 0 0 0-.4 0L3.3 6.5a.4.4 0 0 0 0 .8Z"/><path d="M20.7 10.7 19 9.9l-6.7 3.6a.5.5 0 0 1-.4 0L5 9.9l-1.8.8a.5.5 0 0 0 0 .8l8.5 5a.5.5 0 0 0 .5 0l8.5-5a.5.5 0 0 0 0-.8Z"/><path d="m20.7 15.1-1.5-.7-7 3.8a.5.5 0 0 1-.4 0l-7-3.8-1.5.7a.5.5 0 0 0 0 .9l8.5 5a.5.5 0 0 0 .5 0l8.5-5a.5.5 0 0 0 0-.9Z"/></svg>
-  </span>
-  <span class="layer-category-item__label">
-    <%= label %>
-  </span>
-  <span class="layer-category-item__expand-toggle">
-    <i class="icon-caret-up <%= classNames.collapsed %>"></i>
-    <i class="icon-caret-down <%= classNames.expanded %>"></i>
-  </span>
-</div>
 <div class="<%= classNames.layers %>" />

src/js/templates/maps/viewfinder/expansion-panel.html

@@ -1,6 +1,8 @@
 <div class="<%= classNames.toggle %>">
   <div class="<%= classNames.icon %>">
-    <i class="icon <%= icon %>"></i>
+    <%if(!isSvgIcon) {%>
+      <i class="icon <%= icon %>"></i>
+    <%}%>
   </div>
   <div class="<%= classNames.title %>">
     <%= title %>

src/js/views/maps/LayerCategoryListView.js

@@ -7,16 +7,22 @@ define(
     'underscore',
     'backbone',
     'collections/maps/AssetCategories',
+    'common/IconUtilities',
     // Sub-views
-    'views/maps/LayerCategoryItemView',
+    'views/maps/LayerListView',
+    'views/maps/viewfinder/ExpansionPanelView',
+    'models/maps/viewfinder/ExpansionPanelsModel',
   ],
   function (
     $,
     _,
     Backbone,
     AssetCategories,
+    IconUtilities,
     // Sub-views
-    LayerCategoryItemView,
+    LayerListView,
+    ExpansionPanelView,
+    ExpansionPanelsModel,
   ) {
 
     /**
@@ -47,18 +53,30 @@ define(
 
         /**
         * The array of layer categories to display in the list
-        * @type {LayerCategoryItemView[]}
+        * @type {ExpansionPanel[]}
         */
-        layerCategoryItemViews: undefined,
+        panels: undefined,
 
         /**
         * Executed when a new LayerCategoryListView is created
         * @param {Object} options - A literal object with options to pass to the view
         */
         initialize(options) {
           if (options.collection instanceof AssetCategories) {
-            this.layerCategoryItemViews = options.collection.map(categoryModel => {
-              return new LayerCategoryItemView({model: categoryModel});
+            this.panelsModel = new ExpansionPanelsModel({ isMulti: true });
+
+            this.panels = options.collection.map(categoryModel => {
+              const icon = categoryModel.get('icon');
+              return new ExpansionPanelView({
+                contentViewInstance: new LayerListView({
+                  collection: categoryModel.get('mapAssets'),
+                  isCategorized: true,
+                }),
+                icon,
+                isSvgIcon: IconUtilities.isSVG(icon),
+                panelsModel: this.panelsModel,
+                title: categoryModel.get('label'),
+              });
             });
           }
         },
@@ -68,9 +86,9 @@ define(
         * @return {LayerCategoryListView} Returns the rendered view element
         */
         render() {
-          this.layerCategoryItemViews = _.forEach(this.layerCategoryItemViews, layerCategoryItemView => {
-            layerCategoryItemView.render();
-            this.el.appendChild(layerCategoryItemView.el);
+          this.panels = _.forEach(this.panels, panel => {
+            panel.render();
+            this.el.appendChild(panel.el);
           });
 
           return this;
@@ -82,8 +100,21 @@ define(
          * @returns {boolean} - True if a layer item matches the text
          */
         search(text) {
-          return _.reduce(this.layerCategoryItemViews, (matched, layerCategoryItem) => {
-            return layerCategoryItem.search(text) || matched;
+          return _.reduce(this.panels, (matched, panel) => {
+            const searchResultsFound = panel.contentViewInstance.search(text);
+            if (searchResultsFound) {
+              panel.$el.show();
+              if (text !== '') {
+                panel.open();
+              } else {
+                panel.collapse();
+              }
+            } else {
+              panel.$el.hide();
+              panel.collapse();
+            }
+
+            return searchResultsFound || matched;
           }, false);
         },
       }