From 20c4da197e71d628c837a751fff93af20f902670 Mon Sep 17 00:00:00 2001 From: "francesco.mangiacrapa" Date: Fri, 18 Nov 2022 11:06:47 +0100 Subject: [PATCH] Added Table Of Contents (TOC) and "Go to Top" --- .../client/ui/cms/project/ProjectViewer.java | 64 ++++++++++++++----- .../ui/cms/project/ProjectViewer.ui.xml | 13 +++- .../client/ui/cms/project/SectionViewer.java | 16 ++++- .../ui/cms/project/SectionViewer.ui.xml | 1 + src/main/webapp/GeoportalDataViewer.css | 53 +++++++++++++-- 5 files changed, 122 insertions(+), 25 deletions(-) diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/ProjectViewer.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/ProjectViewer.java index 411cfde..04d599c 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/ProjectViewer.java +++ b/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 { } @@ -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() { @@ -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 = "
"; + 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 = "" + text + ""; + toc_list_anchors.appendChild(new HTML("
  • " + htmlAnchor + "
    • ").getElement()); } /** diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/ProjectViewer.ui.xml b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/ProjectViewer.ui.xml index 1e81553..31cb3c5 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/ProjectViewer.ui.xml +++ b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/ProjectViewer.ui.xml @@ -29,20 +29,29 @@ width: 100%; } - + - + Share Expand Relationships Add Layers to Map + +
    +

    Contents

    +
      +
    +
    +     \ No newline at end of file diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/SectionViewer.java b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/SectionViewer.java index 1c60d5a..9d43642 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/SectionViewer.java +++ b/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 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) { diff --git a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/SectionViewer.ui.xml b/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/SectionViewer.ui.xml index 0ebc229..60951c2 100644 --- a/src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/cms/project/SectionViewer.ui.xml +++ b/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 { diff --git a/src/main/webapp/GeoportalDataViewer.css b/src/main/webapp/GeoportalDataViewer.css index ac96008..997c8d2 100644 --- a/src/main/webapp/GeoportalDataViewer.css +++ b/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 {