gCubeSystem
/
geoportal-data-viewer-app
15
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added Table Of Contents (TOC) and "Go to Top"

This commit is contained in:
Francesco Mangiacrapa 2022-11-18 11:06:47 +01:00
parent 67e975df6a
commit 20c4da197e
5 changed files with 122 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/ProjectViewer.java
View File

@ -20,17 +20,18 @@ import org.gcube.portlets.user.geoportaldataviewer.client.ui.map.ExtentMapUtil;
import org.gcube.portlets.user.geoportaldataviewer.client.ui.map.ExtentMapUtil.Location;
import org.gcube.portlets.user.geoportaldataviewer.client.ui.map.ExtentMapUtil.PLACE;
import org.gcube.portlets.user.geoportaldataviewer.client.ui.map.MapView;
import org.gcube.portlets.user.geoportaldataviewer.client.ui.util.CustomFlexTable;
import com.github.gwtbootstrap.client.ui.Button;
import com.github.gwtbootstrap.client.ui.constants.ButtonType;
import com.github.gwtbootstrap.client.ui.constants.IconType;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.UListElement;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.shared.HandlerManager;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.Random;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Composite;
@ -45,7 +46,7 @@ import ol.Coordinate;
*
* @author Francesco Mangiacrapa at ISTI-CNR francesco.mangiacrapa@isti.cnr.it
*
* Nov 9, 2022
* Nov 9, 2022
*/
public class ProjectViewer extends Composite {
@ -56,7 +57,7 @@ public class ProjectViewer extends Composite {
*
* @author Francesco Mangiacrapa at ISTI-CNR francesco.mangiacrapa@isti.cnr.it
*
* Nov 9, 2022
* Nov 9, 2022
*/
interface ProjectViewerUiBinder extends UiBinder<Widget, ProjectViewer> {
}
@ -66,10 +67,16 @@ public class ProjectViewer extends Composite {
@UiField
HTMLPanel pageViewDetails;
@UiField
HTMLPanel projectViewerMainPanel;
@UiField
HTMLPanel centroidPanel;
@UiField
HTMLPanel tableOfContentPanel;
@UiField
Button shareButton;
@ -82,9 +89,10 @@ public class ProjectViewer extends Composite {
@UiField
Button addLayersToMap;
private ProjectView theProjectView;
@UiField
UListElement toc_list_anchors;
private CustomFlexTable customTable = new CustomFlexTable();
private ProjectView theProjectView;
private GeoportalItemReferences geoportalItemReferences;
@ -92,20 +100,26 @@ public class ProjectViewer extends Composite {
private HandlerManager applicationBus;
private HandlerManager projectViewerBus;
private String projectViewerMainPanelID;
/**
* Instantiates a new project viewer.
*/
private ProjectViewer() {
initWidget(uiBinder.createAndBindUi(this));
pageViewDetails.getElement().setId("page-view-details");
pageViewDetails.getElement().addClassName("page-view-details");
projectViewerMainPanelID = "projectViewer-"+Random.nextInt();
projectViewerMainPanel.getElement().setId(projectViewerMainPanelID);
}
/**
* Instantiates a new project viewer.
*
* @param applicationBus the application bus
* @param applicationBus the application bus
* @param geoportalItemRefs the geoportal item refs
* @param projectView the project view
* @param projectView the project view
*/
public ProjectViewer(HandlerManager applicationBus, GeoportalItemReferences geoportalItemRefs,
final ProjectView projectView) {
@ -114,6 +128,7 @@ public class ProjectViewer extends Composite {
this.theProjectView = projectView;
this.geoportalItemReferences = geoportalItemRefs;
this.applicationBus = applicationBus;
this.projectViewerBus = new HandlerManager(null);
final String theTitle = projectView.getTheProjectDV().getProfileName() != null
? projectView.getTheProjectDV().getProfileName()
@ -149,8 +164,9 @@ public class ProjectViewer extends Composite {
cv.setAddLayersToMapVisible(false);
int width = Window.getClientWidth() * 75 / 100;
int height = Window.getClientHeight() * 70 / 100;
String modalTitle = ProjectUtil.toHMLCode(false, theProjectView.getTheProjectDV().getTheDocument(), theProjectView.getTheProjectDV().getId());
String modalTitle = ProjectUtil.toHMLCode(false, theProjectView.getTheProjectDV().getTheDocument(),
theProjectView.getTheProjectDV().getId());
ModalWindow mw = new ModalWindow(modalTitle, width, height);
mw.add(cv);
mw.setCaller(ProjectViewer.this);
@ -192,7 +208,7 @@ public class ProjectViewer extends Composite {
applicationBus.fireEvent(new AddLayerToMapEvent(theProjectView.getTheProjectDV(), true));
}
});
setAddLayersToMapVisible(false);
GeoportalDataViewerServiceAsync.Util.getInstance().getMyLogin(new AsyncCallback<String>() {
@ -207,19 +223,35 @@ public class ProjectViewer extends Composite {
public void onFailure(Throwable caught) {
}
});
for (SectionView sectionView : projectView.getListSections()) {
if (!sectionView.isEmpty()) {
SectionViewer sectionViewer = new SectionViewer(sectionView);
SectionViewer sectionViewer = new SectionViewer(sectionView, projectViewerMainPanelID);
String sectionId = sectionView.getSectionTitle().replaceAll("[^A-Za-z0-9]", "-") + "_"
+ Random.nextInt();
String divTarget = "<div class='anchor-target' id='" + sectionId + "'></div>";
sectionViewer.getElement().insertFirst(new HTML(divTarget).getElement());
addAnchorToSection(sectionId, sectionView.getSectionTitle());
pageViewDetails.add(sectionViewer);
}
if(sectionView.hasSpatialLayers()) {
if (sectionView.hasSpatialLayers()) {
setAddLayersToMapVisible(true);
}
}
if (toc_list_anchors.getChildCount() > 0) {
tableOfContentPanel.setVisible(true);
}
}
private void addAnchorToSection(String id, String text) {
// Anchor anchor = new Anchor(text);
// anchor.setHref("#"+id);
String htmlAnchor = "<a href='#" + id + "'>" + text + "</a>";
toc_list_anchors.appendChild(new HTML("<li>" + htmlAnchor + "</li>").getElement());
}
/**

13
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/ProjectViewer.ui.xml
View File

@ -29,20 +29,29 @@
width: 100%;
}
</ui:style>
<g:HTMLPanel>
<g:HTMLPanel ui:field="projectViewerMainPanel">
<!-- <g:HTMLPanel ui:field="sharePanel" -->
<!-- addStyleNames="{style.align-to-right}"> -->
<!-- </g:HTMLPanel> -->
<g:HTMLPanel ui:field="headerPanel"
addStyleNames="{style.the-title}"></g:HTMLPanel>
<g:HTMLPanel ui:field="pageViewDetails">
<g:HorizontalPanel addStyleNames="functionalities-style">
<g:HorizontalPanel
addStyleNames="functionalities-style">
<b:Button ui:field="shareButton">Share</b:Button>
<b:Button ui:field="expandButton">Expand</b:Button>
<b:Button ui:field="relationshipsButton">Relationships</b:Button>
<b:Button ui:field="addLayersToMap">Add Layers to Map</b:Button>
</g:HorizontalPanel>
<g:HTMLPanel ui:field="centroidPanel"></g:HTMLPanel>
<g:HTMLPanel ui:field="tableOfContentPanel"
visible="false">
<div id="toc_container">
<p class="toc_title">Contents</p>
<ul ui:field="toc_list_anchors" class="toc_list">
</ul>
</div>
</g:HTMLPanel>
</g:HTMLPanel>
</g:HTMLPanel>
</ui:UiBinder>

16
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/SectionViewer.java
View File

@ -12,7 +12,10 @@ import org.gcube.portlets.user.geoportaldataviewer.client.ui.cms.gallery.ImagesS
import org.gcube.portlets.user.geoportaldataviewer.client.ui.cms.layers.LayersSectionViewer;
import org.gcube.portlets.user.geoportaldataviewer.client.ui.util.CustomFlexTable;
import com.github.gwtbootstrap.client.ui.Button;
import com.github.gwtbootstrap.client.ui.PageHeader;
import com.github.gwtbootstrap.client.ui.constants.ButtonType;
import com.github.gwtbootstrap.client.ui.constants.IconType;
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
@ -36,14 +39,23 @@ public class SectionViewer extends Composite {
@UiField
PageHeader sectionTitle;
public SectionViewer(SectionView sectionView) {
public SectionViewer(SectionView sectionView, String topTargetId) {
initWidget(uiBinder.createAndBindUi(this));
this.sectionView = sectionView;
List<SubDocumentView> subDocuments = sectionView.getListSubDocuments();
sectionTitle.setTitle(sectionView.getSectionTitle());
sectionTitle.setText(sectionView.getSectionTitle());
Button goToTop = new Button("");
goToTop.setType(ButtonType.LINK);
goToTop.setIcon(IconType.DOUBLE_ANGLE_UP);
goToTop.setHref("#"+topTargetId);
goToTop.setTitle("Go to top");
goToTop.getElement().setClassName("go-top-right");
sectionTitle.add(goToTop);
boolean displayAsGallery = false;
for (SubDocumentView subDocumentView : subDocuments) {

1
src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/SectionViewer.ui.xml
View File

@ -10,6 +10,7 @@
.font-size-h1-22 h1 {
font-size: 22px;
margin-top: 5px;
}
.align-to-right {

53
src/main/webapp/GeoportalDataViewer.css
View File

@ -77,6 +77,17 @@ body {
font-size: 14px;
}
.go-top-right {
float: right;
margin-right: 20px;
top: -35px;
position: relative;
font-size: 18px;
}
.go-top-right a:visited {
color: #08c !important;
}
.data-click-img {
max-width: 395px;
}
@ -93,18 +104,18 @@ body {
font-weight: bold;
}
#page-view-details {
.page-view-details {
margin: 10px;
text-rendering: optimizelegibility;
font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
#page-view-details .page-header {
.page-view-details .page-header {
margin-bottom: 22px;
padding-top: 5px;
}
#page-view-details p {
.page-view-details p {
font-size: 14px;
padding: 10px;
color: #333;
@ -632,10 +643,42 @@ body {
border-radius: 2px;
}
/******************************
Table Of Contents (TOC)
*******************************/
#toc_container {
background: #f9f9f9 none repeat scroll 0 0;
border: 1px solid #eee;
display: table;
font-size: 95%;
padding: 20px;
width: auto;
}
/*****
.toc_title {
font-weight: 700;
text-align: center;
}
#toc_container li, #toc_container ul, #toc_container ul li {
list-style: outside none none !important;
}
#toc_container ul li a:visited {
color: #08c !important;
}
.anchor-target {
top: -35px;
position: relative;
display: block;
visibility: hidden;
}
/******************************
RESPONSIVE
***/
*******************************/
@media all and (max-width: 2350px) {
#timeline-data {