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

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

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

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

@@ -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> 

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

@@ -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) {

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

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

src/main/webapp/GeoportalDataViewer.css

@@ -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 {