From 2b23ab9c367f1ab14874f00eaaadc410385809b9 Mon Sep 17 00:00:00 2001 From: yvonnesjy Date: Fri, 7 Jun 2024 01:27:05 -0700 Subject: [PATCH] Fixup: Fix lint errors --- src/js/views/maps/FeatureInfoView.js | 166 +++++++++++++-------------- 1 file changed, 79 insertions(+), 87 deletions(-) diff --git a/src/js/views/maps/FeatureInfoView.js b/src/js/views/maps/FeatureInfoView.js index f980eed51..88d2a408f 100644 --- a/src/js/views/maps/FeatureInfoView.js +++ b/src/js/views/maps/FeatureInfoView.js @@ -6,7 +6,7 @@ define([ "backbone", "models/maps/Feature", "text!templates/maps/feature-info/feature-info.html", -], function ($, _, Backbone, Feature, Template) { +], ($, _, Backbone, Feature, Template) => { /** * @class FeatureInfoView * @classdesc An info-box / panel that shows more details about a specific geo-spatial @@ -19,12 +19,12 @@ define([ * insensitive). * @classcategory Views/Maps * @name FeatureInfoView - * @extends Backbone.View + * @augments Backbone.View * @screenshot views/maps/FeatureInfoView.png * @since 2.18.0 * @constructs */ - var FeatureInfoView = Backbone.View.extend( + const FeatureInfoView = Backbone.View.extend( /** @lends FeatureInfoView.prototype */ { /** * The type of View this is @@ -53,7 +53,7 @@ define([ /** * A ContentTemplate object specifies a single template designed to render * information about the Feature. - * @typedef {Object} ContentTemplate + * @typedef {object} ContentTemplate * @since 2.19.0 * @property {string} [name] - An identifier for this template. * @property {string[]} [options] - The list of keys (option names) that are @@ -95,23 +95,23 @@ define([ * Creates an object that gives the events this view will listen to and the * associated function to call. Each entry in the object has the format 'event * selector': 'function'. - * @returns {Object} + * @returns {object} */ - events: function () { - var events = {}; + events() { + const events = {}; // Close the layer details panel when the toggle button is clicked. Get the // class of the toggle button from the classes property set in this view. - events["click ." + this.classes.toggle] = "close"; + events[`click .${this.classes.toggle}`] = "close"; // Open the Layer Details panel - events["click ." + this.classes.layerDetailsButton] = + events[`click .${this.classes.layerDetailsButton}`] = "showLayerDetails"; - events["click ." + this.classes.zoomButton] = "zoomToFeature"; + events[`click .${this.classes.zoomButton}`] = "zoomToFeature"; return events; }, /** * Classes that are used to identify the HTML elements that comprise this view. - * @type {Object} + * @type {object} * @property {string} open The class to add to the outermost HTML element for this * view when the layer details view is open/expanded (not hidden) * @property {string} toggle The element in the template that acts as a toggle to @@ -135,37 +135,37 @@ define([ /** * Whether or not the layer details view is open - * @type {Boolean} + * @type {boolean} */ isOpen: false, /** * Executed when a new FeatureInfoView is created - * @param {Object} [options] - A literal object with options to pass to the view + * @param {object} [options] - A literal object with options to pass to the view */ - initialize: function (options) { + initialize(options) { try { // Get all the options and apply them to this view - if (typeof options == "object") { - for (const [key, value] of Object.entries(options)) { + if (typeof options === "object") { + Object.entries(options).forEach(([key, value]) => { this[key] = value; - } + }); } } catch (e) { console.log( - "A FeatureInfoView failed to initialize. Error message: " + e, + `A FeatureInfoView failed to initialize. Error message: ${e}`, ); } }, /** * Renders this view - * @return {FeatureInfoView} Returns the rendered view element + * @returns {FeatureInfoView} Returns the rendered view element */ - render: function () { + render() { try { const view = this; - const classes = view.classes; + const { classes } = view; // Show the feature info box as open if the view is set to have it open // already @@ -176,11 +176,11 @@ define([ // Insert the principal template into the view view.$el.html( view.template({ - classes: classes, + classes, }), ); - const iFrame = view.el.querySelector("." + classes.contentContainer); + const iFrame = view.el.querySelector(`.${classes.contentContainer}`); // Select the iFrame const iFrameDoc = iFrame.contentWindow.document; @@ -216,13 +216,13 @@ define([ // Identify the elements from the template that will be updated when the // Feature model changes view.elements = { - title: view.el.querySelector("." + classes.title), - iFrame: iFrame, + title: view.el.querySelector(`.${classes.title}`), + iFrame, iFrameContentContainer: iFrameDoc.getElementById("content"), layerDetailsButton: view.el.querySelector( - "." + classes.layerDetailsButton, + `.${classes.layerDetailsButton}`, ), - zoomButton: view.el.querySelector("." + classes.zoomButton), + zoomButton: view.el.querySelector(`.${classes.zoomButton}`), }; view.update(); @@ -233,34 +233,32 @@ define([ // When the model changes, update the view view.stopListening(view.model, "change"); view.listenTo(view.model, "change", view.update); - - return view; } catch (error) { console.log( - "There was an error rendering a FeatureInfoView" + - ". Error details: " + - error, + `There was an error rendering a FeatureInfoView` + + `. Error details: ${error}`, ); } + return this; }, /** * Updates the view with information from the current Feature model */ - updateContent: function () { + updateContent() { try { const view = this; // Elements to update const title = this.getFeatureTitle(); - const iFrame = this.elements.iFrame; + const { iFrame } = this.elements; const iFrameDiv = this.elements.iFrameContentContainer; - const layerDetailsButton = this.elements.layerDetailsButton; - const zoomButton = this.elements.zoomButton; + const { layerDetailsButton } = this.elements; + const { zoomButton } = this.elements; const mapAsset = this.model.get("mapAsset"); - let mapAssetLabel = mapAsset ? mapAsset.get("label") : null; + const mapAssetLabel = mapAsset ? mapAsset.get("label") : null; const layerButtonDisplay = mapAsset ? null : "none"; - const layerButtonText = "See " + mapAssetLabel + " layer details"; + const layerButtonText = `See ${mapAssetLabel} layer details`; // The Cesium Map Widget can't zoom to Cesium3DTileFeatures, so for now, hide // the 'zoom to feature' button const zoomButtonDisplay = @@ -272,7 +270,7 @@ define([ this.elements.title.innerHTML = title; // Update the iFrame content - this.getContent().then(function (html) { + this.getContent().then((html) => { iFrameDiv.innerHTML = html; iFrame.style.height = 0; iFrame.style.opacity = 0; @@ -281,7 +279,7 @@ define([ // is necessary for content that loads asynchronously, like // images. Difficult to set listeners for this, since the content // may be from a different domain. - setTimeout(function () { + setTimeout(() => { view.updateIFrameHeight(); }, 500); }); @@ -294,9 +292,8 @@ define([ zoomButton.style.display = zoomButtonDisplay; } catch (error) { console.log( - "There was an error rendering the content of a FeatureInfoView" + - ". Error details: " + - error, + `There was an error rendering the content of a FeatureInfoView` + + `. Error details: ${error}`, ); } }, @@ -306,7 +303,7 @@ define([ * within it. * @since 2.27.0 */ - updateIFrameHeight: function () { + updateIFrameHeight() { const iFrame = this.elements?.iFrame; // 336 includes the maximum height of the top bars, bottom padding, and other // content of feature info like label on top and buttons at the bottom. This is @@ -318,7 +315,7 @@ define([ maxHeight, iFrame.contentWindow.document.getElementById("content").scrollHeight, ); - iFrame.style.height = height / 16 + "rem"; + iFrame.style.height = `${height / 16}rem`; iFrame.style.opacity = 1; }, @@ -330,7 +327,7 @@ define([ * @returns {Promise|null} Returns a promise that resolves to the content HTML * when ready, otherwise null */ - getContent: function () { + getContent() { try { let content = null; let templateOptions = this.model.toJSON(); @@ -341,12 +338,12 @@ define([ : null; const propertyMap = templateConfig ? templateConfig.options : {}; const templateName = templateConfig ? templateConfig.template : null; - const contentTemplates = this.contentTemplates; + const { contentTemplates } = this; // Given the name of a template configured in the MapAsset model, find the // matching template from the contentTemplates set on this view let contentTemplate = contentTemplates.find( - (template) => template.name == templateName, + (template) => template.name === templateName, ); if (!contentTemplate) { contentTemplate = contentTemplates[contentTemplates.length - 1]; @@ -361,16 +358,17 @@ define([ templateConfig.options ) { templateOptions = {}; - contentTemplate.options.forEach(function (prop) { + contentTemplate.options.forEach((prop) => { const key = propertyMap[prop]; templateOptions[prop] = featureProperties[key] || ""; }); } // Return a promise that resolves to the content HTML - return new Promise(function (resolve, reject) { + return new Promise((resolve) => { if (contentTemplate) { - require([contentTemplate.template], function (template) { + // eslint-disable-next-line import/no-dynamic-require + require([contentTemplate.template], (template) => { content = _.template(template)(templateOptions); resolve(content); }); @@ -380,10 +378,10 @@ define([ }); } catch (error) { console.log( - "There was an error getting the content of a FeatureInfoView" + - ". Error details: " + - error, + `There was an error getting the content of a FeatureInfoView` + + `. Error details: ${error}`, ); + return null; } }, @@ -392,7 +390,7 @@ define([ * @since 2.19.0 * @returns {string} The title for the feature info box */ - getFeatureTitle: function () { + getFeatureTitle() { try { let title = ""; let suffix = ""; @@ -424,9 +422,9 @@ define([ // Search by search key, since search keys are in order of preference. Find // the first matching key. - const nameKeyLower = searchKeys.find(function (searchKey) { - return propKeysLower.includes(searchKey); - }); + const nameKeyLower = searchKeys.find((searchKey) => + propKeysLower.includes(searchKey), + ); // Then figure out which of the original property keys matches (we need it // in the original case). @@ -435,14 +433,14 @@ define([ name = properties[nameKey] ?? this.model.get("featureID"); if (assetName) { - suffix = " from " + assetName + " Layer"; + suffix = ` from ${assetName} Layer`; } } if (name) { - title = title + " " + name; + title = `${title} ${name}`; } if (suffix) { - title = title + suffix; + title += suffix; } } @@ -456,9 +454,8 @@ define([ return title; } catch (error) { console.log( - "There was an error making a title for the FeatureInfoView" + - ". Error details: " + - error, + `There was an error making a title for the FeatureInfoView` + + `. Error details: ${error}`, ); return "Feature"; } @@ -470,16 +467,15 @@ define([ * parent Map view has a listener set to show the Layer Details view when this * attribute is changed. */ - showLayerDetails: function () { + showLayerDetails() { try { if (this.model && this.model.get("mapAsset")) { this.model.get("mapAsset").set("selected", true); } } catch (error) { console.log( - "There was an error showing the layer details panel from a FeatureInfoView" + - ". Error details: " + - error, + `There was an error showing the layer details panel from a FeatureInfoView` + + `. Error details: ${error}`, ); } }, @@ -489,18 +485,17 @@ define([ * zoom to the full extent of this feature in the map. Also make sure that the Map * Asset layer is visible in the map. */ - zoomToFeature: function () { + zoomToFeature() { try { - const model = this.model; + const { model } = this; const mapAsset = model ? model.get("mapAsset") : false; if (mapAsset) { mapAsset.zoomTo(model); } } catch (error) { console.log( - "There was an error zooming to a feature from a FeatureInfoView" + - ". Error details: " + - error, + `There was an error zooming to a feature from a FeatureInfoView` + + `. Error details: ${error}`, ); } }, @@ -508,15 +503,14 @@ define([ /** * Shows the feature info box */ - open: function () { + open() { try { this.el.classList.add(this.classes.open); this.isOpen = true; } catch (error) { console.log( - "There was an error showing the FeatureInfoView" + - ". Error details: " + - error, + `There was an error showing the FeatureInfoView` + + `. Error details: ${error}`, ); } }, @@ -524,7 +518,7 @@ define([ /** * Hide the feature info box from view */ - close: function () { + close() { try { this.el.classList.remove(this.classes.open); this.isOpen = false; @@ -536,9 +530,8 @@ define([ } } catch (error) { console.log( - "There was an error hiding the FeatureInfoView" + - ". Error details: " + - error, + `There was an error hiding the FeatureInfoView` + + `. Error details: ${error}`, ); } }, @@ -548,7 +541,7 @@ define([ * information in the Feature model. Open the panel if there is a Feature model, * or close it if there is no model or the model has only default values. */ - update: function () { + update() { try { if (!this.model || this.model.isDefault()) { if (this.isOpen) { @@ -560,9 +553,8 @@ define([ } } catch (error) { console.log( - "There was an error updating the content of a FeatureInfoView" + - ". Error details: " + - error, + `There was an error updating the content of a FeatureInfoView` + + `. Error details: ${error}`, ); } }, @@ -573,7 +565,7 @@ define([ * the new model. * @param {Feature} newModel The new Feature model to display content for */ - changeModel: function (newModel) { + changeModel(newModel) { const view = this; const currentModel = view.model; const currentMapAsset = currentModel @@ -596,7 +588,7 @@ define([ // the view view const newMapAsset = newModel ? newModel.get("mapAsset") : null; if (newMapAsset) { - view.listenTo(newMapAsset, "change:visible", function () { + view.listenTo(newMapAsset, "change:visible", () => { if (!newMapAsset.get("visible")) { view.close(); }