Merge pull request #2737 from NCEAS/feature-2698-leo-section-maps

Support fetching Zoom Preset info from LEO News Network

Author: rushirajnenuji

eslint.config.mjs

@@ -82,6 +82,12 @@ const metacatuiConfig = {
       google: "readonly",
     },
   },
+  // Tells eslint-plugin-jsdoc to allow namepaths like MapConfig#CameraPosition
+  settings: {
+    jsdoc: {
+      mode: "jsdoc",
+    },
+  },
   // Override rules that are not compatible with MetacatUI
   rules: {
     ...airbnbRulesOverrides,

src/css/map-view.css

@@ -501,9 +501,9 @@ represents 1 unit of the given distance measurement. */
 
   .toolbar__content-header {
     color: var(--portal-col-primary-7);
-    font-size: 1.5rem;
+    font-size: 1.25rem;
     font-weight: 700;
-    line-height: 2rem;
+    line-height: 1.5rem;
     margin: 1rem 1.5rem;
   }
 }
@@ -698,9 +698,9 @@ represents 1 unit of the given distance measurement. */
 
 .search-input {
   padding-bottom: 1rem;
-  background-color: var(--portal-col-neutral-00, var(--map-col-bkg));
 
   .search-input__field {
+    background-color: var(--portal-col-neutral-00, var(--map-col-bkg));
     position: relative;
     display: flex;
     justify-content: flex-end;
@@ -2008,8 +2008,12 @@ other class: .ui-slider-range */
   width: 100%;
 
   .viewfinder__search {
-    border-bottom: 1px solid
-      var(--portal-col-neutral-2, var(--map-col-bkg-lightest__deprecate));
+    background-color: var(
+      --portal-col-primary-1,
+      var(--map-col-bkg__deprecate)
+    );
+    border: 1px solid var(--portal-col-primary-2);
+    padding-top: 1.5rem;
   }
 
   .viewfinder__zoom-presets {
@@ -2070,7 +2074,7 @@ other class: .ui-slider-range */
 .viewfinder-zoom-presets {
   display: flex;
   flex-direction: column;
-  padding: 0.5rem 1.5rem 1rem 1.5rem;
+  padding: 0.1rem 1.5rem 1rem 1.5rem;
   row-gap: 0.5rem;
 
   .viewfinder-zoom-preset__preset {
@@ -2080,7 +2084,7 @@ other class: .ui-slider-range */
     cursor: pointer;
     display: flex;
     flex-direction: column;
-    padding: 1rem 1.5rem 1rem 2.5rem;
+    padding: 1.1rem 1.1rem 1rem 1.4rem;
     row-gap: 0.5rem;
 
     &:hover {
@@ -2151,6 +2155,14 @@ other class: .ui-slider-range */
     }
   }
 
+  .viewfinder-zoom-preset__image {
+    float: left;
+    margin: 0.3rem 0.5rem 0 0;
+    border-radius: var(--map-border-radius-big);
+    max-width: 90px;
+    max-height: 90px;
+  }
+
   .viewfinder-zoom-preset.viewfinder-zoom-preset--active
     .viewfinder-zoom-preset__preset {
     background-color: var(--portal-col-primary-6, #15324e);
@@ -2255,6 +2267,27 @@ other class: .ui-slider-range */
     animation: fadeIn 0.3s ease-in-out;
   }
 }
+
+/* modifier to make the toggle text title-like */
+.expansion-panel--title {
+  box-shadow: none;
+
+  .expansion-panel__toggle {
+    font-size: 1.3rem;
+  }
+
+  .expansion-panel__title {
+    font-weight: 600;
+    color: var(--portal-col-primary-7, var(--map-col-highlight__deprecate));
+  }
+  .expansion-panel__icon {
+    fill: var(--portal-col-primary-7, var(--map-col-highlight__deprecate));
+    color: var(--portal-col-primary-7, var(--map-col-highlight__deprecate));
+  }
+  .expansion-panel__toggle {
+    padding: 0.5rem 1.5rem;
+  }
+}
 /** END - Expansion panel View. */
 
 /*****************************************************************************************

src/js/collections/maps/viewfinder/ZoomPresetCategories.js

@@ -0,0 +1,71 @@
+"use strict";
+
+define([
+  "backbone",
+  "models/maps/viewfinder/ZoomPresetCategory",
+  "models/maps/Map",
+  "collections/maps/viewfinder/ZoomPresets",
+], (Backbone, ZoomPresetCategory, MapModel, ZoomPresets) => {
+  /**
+   * @classdesc ZoomPresetCategories is a collection of ZoomPresetCategory
+   * models. Each category groups a ZoomPresets collection used by the
+   * Viewfinder UI.
+   * @classcategory Collections/Maps
+   * @class ZoomPresetCategories
+   * @augments Backbone.Collection
+   * @since 0.0.0
+   * @class
+   */
+  const ZoomPresetCategories = Backbone.Collection.extend(
+    /** @lends ZoomPresetCategories.prototype */ {
+      /** @inheritdoc */
+      model: ZoomPresetCategory,
+
+      /**
+       * Parse raw category configs into attributes for ZoomPresetCategory
+       * models. Ensures the Map model is available to each category.
+       * @param {MapConfig#ZoomPresetCategory[]} resp The raw array of category
+       * configs.
+       * @param {object} options Options passed to the collection constructor.
+       * @param {MapModel} [options.mapModel] The Map model for these presets.
+       * @returns {object[]} The parsed attributes for each model.
+       */
+      parse(resp, options = {}) {
+        const { mapModel } = options;
+        if (!Array.isArray(resp)) return [];
+        return resp.map((attrs) => ({ ...attrs, mapModel }));
+      },
+
+      /**
+       * Set the parent Map model on each ZoomPresetCategory in this collection.
+       * @param {MapModel} mapModel The Map model that contains these
+       * categories.
+       */
+      setMapModel(mapModel) {
+        this.each((categoryModel) => categoryModel.setMapModel(mapModel));
+      },
+
+      /**
+       * Get a single flattened ZoomPresets collection from all categories.
+       * @returns {ZoomPresets} A ZoomPresets collection constructed from the
+       * combined models of each category's ZoomPresets.
+       */
+      getZoomPresetsFlat() {
+        const models = this.map(
+          (cat) => cat.get("zoomPresets")?.models || [],
+        ).flat();
+        return new ZoomPresets(models);
+      },
+
+      /**
+       * Get an array of ZoomPresets, one per ZoomPresetCategory.
+       * @returns {ZoomPresets[]} A list of ZoomPresets collections.
+       */
+      getZoomPresets() {
+        return this.map((cat) => cat.get("zoomPresets"));
+      },
+    },
+  );
+
+  return ZoomPresetCategories;
+});