Navigation Menu

Skip to content

Commit

Permalink
Add ability to hide/show the Data tab
Browse files Browse the repository at this point in the history 
Related to #1080 #1000 #998
  • Loading branch information
@laurenwalker
laurenwalker committed Sep 5, 2019
1 parent 5c7ee51 commit e5fd1b0
Show file tree
Hide file tree
Showing 3 changed files with 239 additions and 25 deletions.
79 changes: 77 additions & 2 deletions src/js/models/portals/PortalModel.js
View file
Expand Up @@ -60,7 +60,7 @@ define(["jquery",
// The portal document options may specify section to hide
hideMetrics: false,
hideData: false,
hidePeople: false,
hideMembers: false,
hideMap: false,
// Map options, as specified in the portal document options
mapZoomLevel: 3,
Expand All @@ -71,7 +71,7 @@ define(["jquery",
mapModel: gmaps ? new MapModel() : null,
optionNames: ["primaryColor", "secondaryColor", "accentColor",
"mapZoomLevel", "mapCenterLatitude", "mapCenterLongitude",
"mapShapeHue", "hideMetrics"],
"mapShapeHue", "hideData", "hideMetrics", "hideMembers"],
// Portal view colors, as specified in the portal document options
primaryColor: "#999999",
secondaryColor: "#666666",
Expand Down Expand Up @@ -1126,6 +1126,81 @@ define(["jquery",
this.constructor.__super__.save.call(this);
},

/**
* Removes or hides the given section from this Portal
* @param {PortalSectionModel|string} section - Either the PortalSectionModel
* to remove, or the name of the section to remove. Some sections in the portals
* are not tied to PortalSectionModels, because they are created from other parts of the Portal
* document. For example, the Data, Metrics, and Members sections.
*/
removeSection: function(section){

try{

//If this section is a string, remove it by adding custom options
if(typeof section == "string"){
switch( section.toLowerCase() ){
case "data":
this.set("hideData", true);
break;
case "metrics":
this.set("hideMetrics", true);
break;
case "members":
this.set("hideMembers", true);
break;
}
}
//If this section is a section model, delete it from this Portal
else if( PortalSectionModel.prototype.isPrototypeOf(section) ){
//TODO: Delete these Markdown sections
}
else{
return;
}
}
catch(e){
console.error(e);
}

},

/**
* Adds the given section to this Portal
* @param {PortalSectionModel|string} section - Either the PortalSectionModel
* to add, or the name of the section to add. Some sections in the portals
* are not tied to PortalSectionModels, because they are created from other parts of the Portal
* document. For example, the Data, Metrics, and Members sections.
*/
addSection: function(section){
try{
//If this section is a string, add it by adding custom options
if(typeof section == "string"){
switch( section.toLowerCase() ){
case "data":
this.set("hideData", false);
break;
case "metrics":
this.set("hideMetrics", null);
break;
case "members":
this.set("hideMembers", null);
break;
}
}
//If this section is a section model, add it to this Portal
else if( PortalSectionModel.prototype.isPrototypeOf(section) ){
//TODO: Add a Markdown section
}
else{
return;
}
}
catch(e){
console.error(e);
}
},

/**
* Saves a reference to this Portal on the MetacatUI global object
*/
Expand Down
20 changes: 17 additions & 3 deletions src/js/templates/portals/editor/portEditorSectionLink.html
View file
@@ -1,5 +1,5 @@
<li class="section-link-container">
<a href="<%=href%>" data-toggle="tab" class="section-link" data-section-name="<%=sectionName%>">
<li class="section-link-container" data-section-name="<%=sectionName%>">
<a href="<%=href%>" data-toggle="tab" class="section-link">
<%=sectionName%>
</a>
<% if( menuOptions && menuOptions.length ){ %>
Expand All @@ -16,11 +16,25 @@
<% } %>
<% if(menuOptions.includes("Delete")){ %>
<li>
<a href="#" class="delete-section">
<a href="#" class="remove-section">
<i class="icon icon-on-left icon-remove"></i> Delete
</a>
</li>
<% } %>
<% if(menuOptions.includes("Hide")){ %>
<li>
<a href="#" class="remove-section">
<i class="icon icon-on-left icon-eye-close"></i> Hide
</a>
</li>
<% } %>
<% if(menuOptions.includes("Show")){ %>
<li>
<a href="#" class="show-section">
<i class="icon icon-on-left icon-eye-open"></i> Show
</a>
</li>
<% } %>
</ul>
<% } %>
</li>
165 changes: 145 additions & 20 deletions src/js/views/portals/editor/PortEditorSectionsView.js
View file
Expand Up @@ -2,14 +2,15 @@ define(['underscore',
'jquery',
'backbone',
'models/portals/PortalModel',
'models/portals/PortalSectionModel',
"views/portals/editor/PortEditorSectionView",
"views/portals/editor/PortEditorSettingsView",
"views/portals/editor/PortEditorDataView",
"views/portals/editor/PortEditorMdSectionView",
"text!templates/portals/editor/portEditorSections.html",
"text!templates/portals/editor/portEditorMetrics.html",
"text!templates/portals/editor/portEditorSectionLink.html"],
function(_, $, Backbone, Portal,
function(_, $, Backbone, Portal, PortalSection,
PortEditorSectionView, PortEditorSettingsView, PortEditorDataView,
PortEditorMdSectionView,
Template, MetricsSectionTemplate, SectionLinkTemplate){
Expand Down Expand Up @@ -116,8 +117,9 @@ function(_, $, Backbone, Portal,
*/
events: {
"click .add-section" : "addSection",
"click .delete-section" : "deleteSection",
"click .rename-section" : "renameSection"
"click .remove-section" : "removeSection",
"click .rename-section" : "renameSection",
"click .show-section" : "showSection"
},

/**
Expand Down Expand Up @@ -245,24 +247,53 @@ function(_, $, Backbone, Portal,
* Renders a Data section in this view
*/
renderDataSection: function(){
// Render a PortEditorDataView and corresponding tab
var dataView = new PortEditorDataView({
model: this.model
});

//Insert the subview element into this view
this.$(this.portEditDataViewContainer)
.html(dataView.el)
.attr("id", dataView.getName({ linkFriendly: true }));
try{
// Render a PortEditorDataView and corresponding tab
var dataView = new PortEditorDataView({
model: this.model
});

//Render the PortEditorDataView
dataView.render();
//Insert the subview element into this view
this.$(this.portEditDataViewContainer)
.html(dataView.el)
.attr("id", dataView.getName({ linkFriendly: true }));

// Add the tab to the tab navigation
this.addSectionLink(dataView, ["Delete"]);
//Render the PortEditorDataView
dataView.render();

// Add the data section to the list of subviews
this.subviews.push(dataView);
//Create the menu options for the Data section link
var menuOptions = [];
if( this.model.get("hideData") === true ){
menuOptions.push("Show");
}
else{
menuOptions.push("Hide");
}

// Add the tab to the tab navigation
this.addSectionLink(dataView, menuOptions);

//When the Data section has been hidden or shown, update the section link
this.listenTo(this.model, "change:hideData", function(){
//Create the menu options for the Data section link
var menuOptions = [];
if( this.model.get("hideData") === true ){
menuOptions.push("Show");
}
else{
menuOptions.push("Hide");
}

this.updateSectionLink(dataView, menuOptions);
});

// Add the data section to the list of subviews
this.subviews.push(dataView);
}
catch(e){
console.error(e);
}
},

/**
Expand Down Expand Up @@ -464,12 +495,50 @@ function(_, $, Backbone, Portal,
*/
addSectionLink: function(sectionView, menuOptions){

this.$(this.sectionLinksContainer).append(this.sectionLinkTemplate({
//Add the section link to the page
this.$(this.sectionLinksContainer).append(this.createSectionLink(sectionView, menuOptions));

},

/**
* Add a link to the given editor section
* @param {PortEditorSectionView} sectionView - The view to add a link to
* @param {string[]} menuOptions - An array of menu options for this section. e.g. Rename, Delete
* @return {Element}
*/
createSectionLink: function(sectionView, menuOptions){
//Create a section link
var sectionLink = $(this.sectionLinkTemplate({
href: "#" + sectionView.getName({ linkFriendly: true }),
sectionName: sectionView.getName(),
menuOptions: menuOptions || []
}))
}));

//Attach the section model to the link
sectionLink.data({
model: sectionView.model,
view: sectionView
});

return sectionLink[0];
},

/**
* Add a link to the given editor section
* @param {PortEditorSectionView} sectionView - The view to add a link to
* @param {string[]} menuOptions - An array of menu options for this section. e.g. Rename, Delete
*/
updateSectionLink: function(sectionView, menuOptions){

//Create a new link to the section
var sectionLink = this.createSectionLink(sectionView, menuOptions);

//Replace the existing link
this.$(this.sectionLinksContainer).children().each(function(i, link){
if( $(link).data("view") == sectionView ){
$(link).replaceWith(sectionLink);
}
});
},

/**
Expand All @@ -484,7 +553,63 @@ function(_, $, Backbone, Portal,
* Removes a section and its tab from this view and the PortalModel
* @param {Event} [e] - (optional) The click event on the Remove button
*/
deleteSection: function(e){
removeSection: function(e){

try{

//Get the PortalSection model for this remove button
var sectionLink = $(e.target).parents(".section-link-container"),
section = sectionLink.data("model");

//If this section is not a PortalSection model, get the section name
if( !PortalSection.prototype.isPrototypeOf(section) ){
section = sectionLink.data("section-name");
}

//If no section was found, exit now
if( !section ){
return;
}

//Remove this section from the Portal
this.model.removeSection(section);
}
catch(e){
console.error(e);
MetacatUI.appView.showAlert("The section could not be deleted. (" + e.message + ")", "alert-error");
}

},

/**
* Shows a previously-hidden section
* @param {Event} [e] - (optional) The click event on the Show button
*/
showSection: function(e){

try{

//Get the PortalSection model for this show button
var sectionLink = $(e.target).parents(".section-link-container"),
section = sectionLink.data("model");

//If this section is not a PortalSection model, get the section name
if( !PortalSection.prototype.isPrototypeOf(section) ){
section = sectionLink.data("section-name");
}

//If no section was found, exit now
if( !section ){
return;
}

//Mark this section as shown
this.model.addSection(section);
}
catch(e){
console.error(e);
MetacatUI.appView.showAlert("The section could not be shown. (" + e.message + ")", "alert-error");
}

},

Expand Down

0 comments on commit e5fd1b0

Please sign in to comment.