-
-
Notifications
You must be signed in to change notification settings - Fork 28
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2392 from NCEAS/feature-2275/4-zoom-presets-in-vi…
…ewfinder Add zoom presets UI to viewfinder behind showZoomPresets flag
- Loading branch information
Showing
16 changed files
with
547 additions
and
105 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| 'use strict'; | ||
|
|
||
| define( | ||
| [ | ||
| 'underscore', | ||
| 'backbone', | ||
| 'models/maps/viewfinder/ZoomPresetModel', | ||
| ], | ||
| function (_, Backbone, ZoomPresetModel) { | ||
| /** | ||
| * @class ZoomPresets | ||
| * @classdesc A ZoomPresets collection is a group of ZoomPresetModel models | ||
| * that provide a location and list of layers to make visible when the user | ||
| * selects. | ||
| * @class ZoomPresets | ||
| * @classcategory Collections/Maps | ||
| * @extends Backbone.Collection | ||
| * @since x.x.x | ||
| * @constructor | ||
| */ | ||
| const ZoomPresets = Backbone.Collection.extend( | ||
| /** @lends ZoomPresets.prototype */ { | ||
| /** @inheritdoc */ | ||
| model: ZoomPresetModel, | ||
|
|
||
| /** | ||
| * @param {Object[]} zoomPresets The raw list of objects that represent | ||
| * the zoom presets, to be converted into ZoomPresetModels. | ||
| * @param {MapAsset[]} allLayers All of the layers available for display | ||
| * in the map. | ||
| */ | ||
| parse({ zoomPresetObjects, allLayers }) { | ||
| if (isNonEmptyArray(zoomPresetObjects)) { | ||
| const zoomPresets = zoomPresetObjects.map(zoomPresetObj => { | ||
| const enabledLayerIds = []; | ||
| const enabledLayerLabels = []; | ||
| for (const layer of allLayers) { | ||
| if (zoomPresetObj.layerIds?.find(id => id === layer.get('layerId'))) { | ||
| enabledLayerIds.push(layer.get('layerId')); | ||
| enabledLayerLabels.push(layer.get('label')); | ||
| } | ||
| } | ||
|
|
||
| return new ZoomPresetModel({ | ||
| description: zoomPresetObj.description, | ||
| enabledLayerLabels, | ||
| enabledLayerIds, | ||
| position: { | ||
| latitude: zoomPresetObj.latitude, | ||
| longitude: zoomPresetObj.longitude, | ||
| height: zoomPresetObj.height | ||
| }, | ||
| title: zoomPresetObj.title, | ||
| }, { parse: true }); | ||
| }); | ||
|
|
||
| return zoomPresets; | ||
| } | ||
|
|
||
| return []; | ||
| }, | ||
| } | ||
| ); | ||
|
|
||
| function isNonEmptyArray(a) { | ||
| return a && a.length && Array.isArray(a); | ||
| } | ||
|
|
||
| return ZoomPresets; | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,41 +1,60 @@ | ||
| 'use strict'; | ||
|
|
||
| define(['underscore', 'backbone',], (_, Backbone) => { | ||
| /** | ||
| * @class ZoomPresetModel | ||
| * @classdesc ZoomPresetModel represents a point of interest on a map that can | ||
| * be configured within a MapView. | ||
| * @classcategory Models/Maps | ||
| * @extends Backbone.Model | ||
| * @since x.x.x | ||
| */ | ||
| const ZoomPresetModel = Backbone.Model.extend( | ||
| define( | ||
| ['underscore', 'backbone', 'models/maps/GeoPoint'], | ||
| (_, Backbone, GeoPoint) => { | ||
| /** | ||
| * @class ZoomPresetModel | ||
| * @classdesc ZoomPresetModel represents a point of interest on a map that can | ||
| * be configured within a MapView. | ||
| * @classcategory Models/Maps | ||
| * @extends Backbone.Model | ||
| * @since x.x.x | ||
| */ | ||
| const ZoomPresetModel = Backbone.Model.extend( | ||
| /** @lends ZoomPresetModel.prototype */ { | ||
|
|
||
| /** | ||
| * @typedef {Object} ZoomPresetModelOptions | ||
| * @property {string} title The displayed title for the preset. | ||
| * @property {GeoPoint} geoPoint The location representing this preset, | ||
| * including height information. | ||
| * @property {string} description A brief description of the layers and | ||
| * location. | ||
| * @property {string[]} enabledLayers A list of layer identifiers which are | ||
| * to be enabled for this preset. | ||
| */ | ||
| /** | ||
| * @typedef {Object} ZoomPresetModelOptions | ||
| * @property {string} title The displayed title for the preset. | ||
| * @property {GeoPoint} geoPoint The location representing this preset, | ||
| * including height information. | ||
| * @property {string} description A brief description of the layers and | ||
| * location. | ||
| * @property {string[]} enabledLayerIds A list of layer IDs which are to | ||
| * be enabled for this preset. | ||
| * @property {string[]} enabledLayerLabels A list of layer labels which | ||
| * are enabled for this preset. | ||
| */ | ||
|
|
||
| /** | ||
| * @name ZoomPresetModel#defaults | ||
| * @type {ZoomPresetModelOptions} | ||
| */ | ||
| defaults() { | ||
| return { | ||
| title: '', | ||
| geoPoint: null, | ||
| description: '', | ||
| enabledLayers: [], | ||
| } | ||
| }, | ||
| }); | ||
| /** | ||
| * @name ZoomPresetModel#defaults | ||
| * @type {ZoomPresetModelOptions} | ||
| */ | ||
| defaults() { | ||
| return { | ||
| description: '', | ||
| enabledLayerIds: [], | ||
| enabledLayerLabels: [], | ||
| geoPoint: null, | ||
| title: '', | ||
| } | ||
| }, | ||
|
|
||
| return ZoomPresetModel; | ||
| }); | ||
| /** | ||
| * @param {Object} position The latitude, longitude, and height of this | ||
| * ZoomPresetModel's GeoPoint. | ||
| */ | ||
| parse({ position, ...rest }) { | ||
| const geoPoint = new GeoPoint({ | ||
| latitude: position.latitude, | ||
| longitude: position.longitude, | ||
| height: position.height | ||
| }); | ||
|
|
||
| return { geoPoint, ...rest }; | ||
| }, | ||
| }); | ||
|
|
||
| return ZoomPresetModel; | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| <div class="toolbar__content-header">Viewfinder</div> | ||
|
|
||
| <div class="<%= classNames.searchView %>"></div> | ||
| <div class="<%= classNames.searchView %>"></div> | ||
| <div class="<%= classNames.zoomPresetsView %>"></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.