Skip to content

Commit

Permalink
Merge pull request #2526 from NCEAS/feature-1784-remove-legend-preview
Browse files Browse the repository at this point in the history 
Remove legend previews from toolbar
  • Loading branch information
@robyngit
robyngit committed Sep 17, 2024
2 parents 43d79df + cb86e12 commit a099573
Show file tree
Hide file tree
Showing 6 changed files with 292 additions and 1,063 deletions.
Binary file removed docs/screenshots/views/maps/LegendView.png
View file
Binary file not shown.
17 changes: 3 additions & 14 deletions src/css/map-view.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -888,7 +888,7 @@ represents 1 unit of the given distance measurement. */
background-color: var(--portal-col-primary-1, #15324e);
}

.layer-item__legend-and-settings {
.layer-item__settings {
/* Show button when layer is hovered. */
display: flex;
border: 1px solid var(--portal-col-neutral-4);
Expand Down Expand Up @@ -919,19 +919,14 @@ represents 1 unit of the given distance measurement. */
}
}

.layer-item__legend-and-settings {
.layer-item__settings {
/* Show button when layer is shown. */
display: flex;
border: 1px solid var(--portal-col-primary-2);

/* Only show legend when layer is shown. */
.layer-item__legend-container {
display: block;
}
}
}

.layer-item__legend-and-settings {
.layer-item__settings {
/* By default, don't show button. */
display: none;
align-items: center;
Expand All @@ -948,12 +943,6 @@ represents 1 unit of the given distance measurement. */
color: var(--portal-col-neutral-6, currentColor);
}

.layer-item__legend-container {
/* By default, don't show legend. */
display: none;
margin-left: -0.5rem;
}

/* Use the same style on button hover and when selected. */
&.layer-item--selected,
&:hover {
Expand Down
3 changes: 1 addition & 2 deletions src/js/templates/maps/layer-item.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
<%= label %>
</span>
</span>
<span class="<%= classes.legendAndSettings %>">
<span class="<%= classes.settings %>">
<i class="icon-gear layer-item__settings-toggle"></i>
<span class="layer-item__legend-container"></span>
</span>
261 changes: 99 additions & 162 deletions src/js/views/maps/LayerDetailsView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ define([
"views/maps/LayerOpacityView",
"views/maps/LayerInfoView",
"views/maps/LayerNavigationView",
"views/maps/LegendView",
], (
$,
_,
Expand All @@ -23,7 +22,6 @@ define([
LayerOpacityView,
LayerInfoView,
LayerNavigationView,
LegendView,
) => {
/**
* @class LayerDetailsView
Expand Down Expand Up @@ -120,13 +118,6 @@ define([
showTitle: false,
hideIfError: true,
},
{
label: "Legend",
view: LegendView,
collapsible: false,
showTitle: true,
hideIfError: true,
},
{
label: "Opacity",
view: LayerOpacityView,
Expand All @@ -143,12 +134,7 @@ 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}
*/
/** @inheritdoc */
events() {
const events = {};
// Close the layer details panel when the toggle button is clicked. Get the
Expand All @@ -168,153 +154,118 @@ define([
* @param {object} [options] - A literal object with options to pass to the view
*/
initialize(options) {
try {
// Get all the options and apply them to this view
if (typeof options === "object") {
Object.keys(options).forEach((key) => {
this[key] = options[key];
});
}
} catch (e) {
console.log(
`A LayerDetailsView failed to initialize. Error message: ${e}`,
);
// Get all the options and apply them to this view
if (typeof options === "object") {
Object.assign(this, options);
}
},

/**
* Renders this view
* @returns {LayerDetailsView | null} Returns the rendered view element
* @returns {LayerDetailsView} Returns the rendered view element
*/
render() {
try {
const { model } = this;
const { model } = this;

// 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);
}

// 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}`);

// Remove and do not render opacity section if showOpacitySlider is false
if (model?.get("showOpacitySlider") === false) {
this.renderedSections = this.renderedSections.filter(
(item) => item.label !== "Opacity",
);
this.renderedSections = this.sections.map((section) => {
const detailSection = new LayerDetailView({
label: section.label,
contentView: section.view,
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";
}
}
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) => {
const detailSection = new LayerDetailView({
label: section.label,
contentView: section.view,
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";
}
if (section.hideIfError) {
// eslint-disable-next-line no-param-reassign
section.renderedView.el.style.display = displayProperty;
}
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) => {
const hideIfErrorSections = _.filter(
this.renderedSections,
(section) => section.hideIfError,
);
let displayProperty = "";
if (status === "error") {
displayProperty = "none";
}
hideIfErrorSections.forEach((section) => {
const renderedViewEl = section.renderedView.el;
renderedViewEl.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 null;
}

return this;
},

/**
* Show/expand the Layer Details panel. Opening the panel also changes the
* MapAsset model's 'selected attribute' to true.
*/
open() {
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}`,
);
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);
}
},

Expand All @@ -323,18 +274,11 @@ define([
* MapAsset model's 'selected attribute' to false.
*/
close() {
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}`,
);
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 @@ -346,24 +290,17 @@ define([
* information.
*/
updateModel(newModel) {
try {
// 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();
} catch (error) {
console.log(
`There was an error updating the MapAsset model in a LayerDetailsView` +
`. Error details: ${error}`,
);
}
// 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 a099573

Please sign in to comment.