Skip to content

Commit

Permalink
Fixup: Fix format and lint errors
Browse files Browse the repository at this point in the history
  • Loading branch information
@yvonnesjy
yvonnesjy committed Jun 13, 2024
1 parent 9fc1e2a commit d8dab5d
Show file tree
Hide file tree
Showing 2 changed files with 307 additions and 480 deletions.
288 changes: 118 additions & 170 deletions src/js/views/maps/LayerDetailsView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ define([
"views/maps/LayerOpacityView",
"views/maps/LayerInfoView",
"views/maps/LayerNavigationView",
], function (
], (
$,
_,
Backbone,
Expand All @@ -22,20 +22,20 @@ define([
LayerOpacityView,
LayerInfoView,
LayerNavigationView,
) {
) => {
/**
* @class LayerDetailsView
* @classdesc A panel with additional information about a Layer (a Map Asset like
* imagery or vector data), plus some UI for updating the appearance of the Layer on
* the map, such as the opacity.
* @classcategory Views/Maps
* @name LayerDetailsView
* @extends Backbone.View
* @augments Backbone.View
* @screenshot views/maps/LayerDetailsView.png
* @since 2.18.0
* @constructs
*/
var LayerDetailsView = Backbone.View.extend(
const LayerDetailsView = Backbone.View.extend(
/** @lends LayerDetailsView.prototype */ {
/**
* The type of View this is
Expand Down Expand Up @@ -63,7 +63,7 @@ define([

/**
* 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
Expand All @@ -88,7 +88,7 @@ define([
/**
* Configuration for a Layer Detail section to show within this Layer Details
* view.
* @typedef {Object} DetailSectionOption
* @typedef {object} DetailSectionOption
* @property {string} label The name to display for this section
* @property {Backbone.View} view Any view that will render content for the Layer
* Detail section. This view will be passed the MapAsset model. The view should
Expand Down Expand Up @@ -134,197 +134,153 @@ 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}
*/
events: function () {
var events = {};
/** @inheritdoc */
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";
return events;
},

/**
* Whether or not the layer details view is open
* @type {Boolean}
* @type {boolean}
*/
isOpen: false,

/**
* Executed when a new LayerDetailsView 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) {
try {
// Get all the options and apply them to this view
if (typeof options == "object") {
for (const [key, value] of Object.entries(options)) {
this[key] = value;
}
}
} catch (e) {
console.log(
"A LayerDetailsView failed to initialize. Error message: " + e,
);
initialize(options) {
// Get all the options and apply them to this view
if (typeof options === "object") {
Object.entries(options).forEach(([key, value]) => {
this[key] = value;
});
}
},

/**
* Renders this view
* @return {LayerDetailsView} Returns the rendered view element
* @returns {LayerDetailsView} Returns the rendered view element
*/
render: function () {
try {
// Save a reference to this view
var view = this;
var model = this.model;

// Show the layer details box as open if the view is set to have it open
// already
if (this.isOpen) {
this.el.classList.add(this.classes.open);
}
render() {
const { model } = this;

// Insert the template into the view
this.$el.html(
this.template({
label: model ? model.get("label") || "" : "",
}),
);
// Show the layer details box as open if the view is set to have it open
// already
if (this.isOpen) {
this.el.classList.add(this.classes.open);
}

// Ensure the view's main element has the given class name
this.el.classList.add(this.className);
// Insert the template into the view
this.$el.html(
this.template({
label: model ? model.get("label") || "" : "",
}),
);

// Select elements in the template that we will need to manipulate
const sectionsContainer = this.el.querySelector(
"." + this.classes.sections,
);
const labelEl = this.el.querySelector("." + this.classes.label);
// Ensure the view's main element has the given class name
this.el.classList.add(this.className);

// Render each section in the Details panel
this.renderedSections = _.clone(this.sections);
// Select elements in the template that we will need to manipulate
const sectionsContainer = this.el.querySelector(
`.${this.classes.sections}`,
);
const labelEl = this.el.querySelector(`.${this.classes.label}`);

this.renderedSections.forEach(function (section) {
var detailSection = new LayerDetailView({
label: section.label,
contentView: section.view,
model: model,
collapsible: section.collapsible,
showTitle: section.showTitle,
});
sectionsContainer.append(detailSection.el);
detailSection.render();
// Hide the section if there is an error with the asset, and this section
// does make sense to show for a layer that can't be displayed
if (section.hideIfError && model) {
if (model && model.get("status") === "error") {
detailSection.el.style.display = "none";
}
}
section.renderedView = detailSection;
this.renderedSections = this.sections.map((section) => {
const detailSection = new LayerDetailView({
label: section.label,
contentView: section.view,
model,
collapsible: section.collapsible,
showTitle: section.showTitle,
});

// Hide/show sections with the 'hideIfError' property when the status of the
// MapAsset changes
this.stopListening(model, "change:status");
this.listenTo(model, "change:status", function (model, status) {
const hideIfErrorSections = _.filter(
this.renderedSections,
function (section) {
return section.hideIfError;
},
);
let displayProperty = "";
if (status === "error") {
displayProperty = "none";
sectionsContainer.append(detailSection.el);
detailSection.render();
// Hide the section if there is an error with the asset, and this section
// does make sense to show for a layer that can't be displayed
if (section.hideIfError && model) {
if (model && model.get("status") === "error") {
detailSection.el.style.display = "none";
}
hideIfErrorSections.forEach(function (section) {
}
return { ...section, renderedView: detailSection };
});

// Hide/show sections with the 'hideIfError' property when the status of the
// MapAsset changes
this.stopListening(model, "change:status");
this.listenTo(model, "change:status", (_model, status) => {
let displayProperty = "";
if (status === "error") {
displayProperty = "none";
}
this.renderedSections.forEach((section) => {
if (section.hideIfError) {
// eslint-disable-next-line no-param-reassign
section.renderedView.el.style.display = displayProperty;
});
}
});
});

// If this layer has a notification, show the badge and notification
// If this layer has a notification, show the badge and notification
// message
const notice = model ? model.get("notification") : null;
if (notice && (notice.message || notice.badge)) {
// message
const notice = model ? model.get("notification") : null;
if (notice && (notice.message || notice.badge)) {
// message
if (notice.message) {
const noticeEl = document.createElement("div");
noticeEl.classList.add(this.classes.notification);
noticeEl.innerText = notice.message;
if (notice.style) {
const badgeClass =
this.classes.notification + "--" + notice.style;
noticeEl.classList.add(badgeClass);
}
sectionsContainer.prepend(noticeEl);
if (notice.message) {
const noticeEl = document.createElement("div");
noticeEl.classList.add(this.classes.notification);
noticeEl.innerText = notice.message;
if (notice.style) {
const badgeClass = `${this.classes.notification}--${notice.style}`;
noticeEl.classList.add(badgeClass);
}
// badge
if (notice.badge) {
const badge = document.createElement("span");
badge.classList.add(this.classes.badge);
badge.innerText = notice.badge;
if (notice.style) {
const badgeClass = this.classes.badge + "--" + notice.style;
badge.classList.add(badgeClass);
}
labelEl.append(badge);
sectionsContainer.prepend(noticeEl);
}
// badge
if (notice.badge) {
const badge = document.createElement("span");
badge.classList.add(this.classes.badge);
badge.innerText = notice.badge;
if (notice.style) {
const badgeClass = `${this.classes.badge}--${notice.style}`;
badge.classList.add(badgeClass);
}
labelEl.append(badge);
}

return this;
} catch (error) {
console.log(
"There was an error rendering a LayerDetailsView" +
". Error details: " +
error,
);
}

return this;
},

/**
* Show/expand the Layer Details panel. Opening the panel also changes the
* MapAsset model's 'selected attribute' to true.
*/
open: function () {
try {
this.el.classList.add(this.classes.open);
this.isOpen = true;
// Ensure that the model is marked as selected
if (this.model) {
this.model.set("selected", true);
}
} catch (error) {
console.log(
"There was an error opening the LayerDetailsView" +
". Error details: " +
error,
);
open() {
this.el.classList.add(this.classes.open);
this.isOpen = true;
// Ensure that the model is marked as selected
if (this.model) {
this.model.set("selected", true);
}
},

/**
* Hide/collapse the Layer Details panel. Closing the panel also changes the
* MapAsset model's 'selected attribute' to false.
*/
close: function () {
try {
this.el.classList.remove(this.classes.open);
this.isOpen = false;
// Ensure that the model is not marked as selected
if (this.model) {
this.model.set("selected", false);
}
} catch (error) {
console.log(
"There was an error closing the LayerDetailsView" +
". Error details: " +
error,
);
close() {
this.el.classList.remove(this.classes.open);
this.isOpen = false;
// Ensure that the model is not marked as selected
if (this.model) {
this.model.set("selected", false);
}
},

Expand All @@ -335,26 +291,18 @@ define([
* view. If set to null, then the view will be rendered without any layer
* information.
*/
updateModel: function (newModel) {
try {
// Remove listeners from sub-views
this.renderedSections.forEach(function (section) {
if (
section.renderedView &&
typeof section.renderedView.onClose === "function"
) {
section.renderedView.onClose();
}
});
this.model = newModel;
this.render();
} catch (error) {
console.log(
"There was an error updating the MapAsset model in a LayerDetailsView" +
". Error details: " +
error,
);
}
updateModel(newModel) {
// Remove listeners from sub-views
this.renderedSections.forEach((section) => {
if (
section.renderedView &&
typeof section.renderedView.onClose === "function"
) {
section.renderedView.onClose();
}
});
this.model = newModel;
this.render();
},
},
);
Expand Down
Loading

0 comments on commit d8dab5d

Please sign in to comment.