diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/shared/partials/fullscreen/FullscreenViewer.java b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/shared/partials/fullscreen/FullscreenViewer.java new file mode 100644 index 00000000000..56c74c128c6 --- /dev/null +++ b/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 { + } + + 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 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() { + @Override + public void onClose(CloseEvent 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(); + } + } + } +} diff --git a/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/shared/partials/fullscreen/FullscreenViewer.ui.xml b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/shared/partials/fullscreen/FullscreenViewer.ui.xml new file mode 100644 index 00000000000..bb6ac79694c --- /dev/null +++ b/java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/shared/partials/fullscreen/FullscreenViewer.ui.xml @@ -0,0 +1,39 @@ + + + + .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; + } + + + + + + + + + + \ No newline at end of file