Fullscreen Leaderboard - Added generic fullscreen viewer

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/shared/partials/fullscreen/FullscreenViewer.java

@@ -0,0 +1,131 @@
+package com.sap.sailing.gwt.home.shared.partials.fullscreen;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.Style.Overflow;
+import com.google.gwt.dom.client.Style.Unit;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.ClickHandler;
+import com.google.gwt.event.dom.client.KeyCodes;
+import com.google.gwt.event.logical.shared.CloseEvent;
+import com.google.gwt.event.logical.shared.CloseHandler;
+import com.google.gwt.event.logical.shared.ResizeEvent;
+import com.google.gwt.event.logical.shared.ResizeHandler;
+import com.google.gwt.event.shared.HandlerRegistration;
+import com.google.gwt.resources.client.CssResource;
+import com.google.gwt.uibinder.client.UiBinder;
+import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.user.client.Event;
+import com.google.gwt.user.client.Event.NativePreviewEvent;
+import com.google.gwt.user.client.Window;
+import com.google.gwt.user.client.ui.FlowPanel;
+import com.google.gwt.user.client.ui.Image;
+import com.google.gwt.user.client.ui.PopupPanel;
+import com.google.gwt.user.client.ui.RootPanel;
+import com.google.gwt.user.client.ui.SimpleLayoutPanel;
+import com.google.gwt.user.client.ui.Widget;
+
+public class FullscreenViewer {
+    
+    private static FullscreenViewerUiBinder uiBinder = GWT.create(FullscreenViewerUiBinder.class);
+
+    interface FullscreenViewerUiBinder extends UiBinder<Widget, FullscreenViewer> {
+    }
+    
+    interface Style extends CssResource {
+        String background();
+        String toolbar();
+        String toolbarItem();
+        String content();
+    }
+    
+    @UiField Style style;
+    @UiField FlowPanel toolbarUi;
+    @UiField(provided=true) SimpleLayoutPanel contentUi = new FullscreenViewerContentPanel();
+    
+    private final FullscreenPopupPanel popup = new FullscreenPopupPanel();
+    
+    public FullscreenViewer() {
+        popup.setWidget(uiBinder.createAndBindUi(this));
+        Image closeControl = new Image("images/home/close.svg");
+        closeControl.addClickHandler(new ClickHandler() {
+            @Override
+            public void onClick(ClickEvent event) {
+                popup.hide();
+            }
+        });
+        addToolbarAction(closeControl);
+    }
+    
+    public HandlerRegistration addCloseHandler(CloseHandler<PopupPanel> handler) {
+        return popup.addCloseHandler(handler);
+    }
+    
+    public void addToolbarAction(Widget widget) {
+        widget.addStyleName(style.toolbarItem());
+        toolbarUi.add(widget);
+    }
+    
+    public void showContent(Widget content) {
+        contentUi.setWidget(content);
+        contentUi.getWidget().getElement().addClassName(style.content());
+        contentUi.onResize();
+        popup.showPopupPanel();
+    }
+    
+    private class FullscreenPopupPanel extends PopupPanel {
+        private FullscreenPopupPanel() {
+            super(false, true);
+            this.addCloseHandler(new CloseHandler<PopupPanel>() {
+                @Override
+                public void onClose(CloseEvent<PopupPanel> event) {
+                    RootPanel.get().getElement().getStyle().setOverflow(Overflow.AUTO);
+                    contentUi.getWidget().getElement().removeClassName(style.content());
+                }
+            });
+        }
+        
+        protected void onPreviewNativeEvent(NativePreviewEvent event) {
+            if (event.getTypeInt() == Event.ONKEYDOWN && event.getNativeEvent().getKeyCode() == KeyCodes.KEY_ESCAPE) {
+                FullscreenPopupPanel.this.hide();
+            }
+        };
+        
+        private void showPopupPanel() {
+            this.setPopupPositionAndShow(new PositionCallback() {
+                @Override
+                public void setPosition(int offsetWidth, int offsetHeight) {
+                    RootPanel.get().getElement().getStyle().setOverflow(Overflow.HIDDEN);
+                    FullscreenPopupPanel.this.center();
+                }
+            });
+        }
+    }
+    
+    private class FullscreenViewerContentPanel extends SimpleLayoutPanel {
+        private HandlerRegistration windowResizeHandler;
+        
+        @Override
+        public void onResize() {
+            popup.getWidget().getElement().getStyle().setWidth(Window.getClientWidth(), Unit.PX);
+            popup.getWidget().getElement().getStyle().setHeight(Window.getClientHeight(), Unit.PX);
+            super.onResize();
+        }
+        
+        @Override
+        protected void onLoad() {
+            windowResizeHandler = Window.addResizeHandler(new ResizeHandler() {
+                @Override
+                public void onResize(ResizeEvent event) {
+                    FullscreenViewerContentPanel.this.onResize();
+                }
+            });
+        }
+        
+        @Override
+        protected void onUnload() {
+            if (windowResizeHandler != null) {
+                windowResizeHandler.removeHandler();
+            }
+        }
+    }
+}

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/shared/partials/fullscreen/FullscreenViewer.ui.xml

@@ -0,0 +1,39 @@
+<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
+<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui">
+	<ui:style gss="true" type="com.sap.sailing.gwt.home.shared.partials.fullscreen.FullscreenViewer.Style">
+	.background {
+		background-color: rgba(0,0,0,0.9);
+	}
+	.toolbar {
+		text-align: right;
+		padding: 0 5px;
+	}
+	.toolbarItem {
+		height: 50px;
+		width: auto;
+		padding: 10px;
+		cursor: pointer;
+		float: right;
+	}
+	.toolbarItem:hover {
+		background-color: #d79900;
+	}
+	.container {
+	}
+	.content {
+		background-color: white;
+		overflow: auto !important;
+		border-color: rgba(0,0,0,0.9);
+		border-width: 0 5px 5px;
+		border-style: solid;
+	}
+	</ui:style>
+	<g:LayoutPanel styleName="{style.background}">
+		<g:layer top="0" height="50">
+			<g:FlowPanel styleName="{style.toolbar}" ui:field="toolbarUi" />
+		</g:layer>
+		<g:layer top="50" bottom="0">
+			<g:SimpleLayoutPanel styleName="{style.container}" ui:field="contentUi" />
+		</g:layer>
+	</g:LayoutPanel>
+</ui:UiBinder>