mirror of
https://github.com/eclipse-sailing-analytics/sailing-analytics.git
synced 2026-10-27 22:37:15 +00:00
Added partials for a mobile fullscreen image gallery
This commit is contained in:
Benjamin Barth committed
1 parent
c006c813f3
commit
7e46be248e
4 files changed
+267
No files matched your search
+123
@@ -0,0 +1,123 @@
|
||||
package com.sap.sailing.gwt.home.mobile.partials.imagegallery;
|
||||
|
||||
import java.util.Collection;
|
||||
|
||||
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.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.uibinder.client.UiHandler;
|
||||
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.LayoutPanel;
|
||||
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.sap.sailing.gwt.ui.shared.media.SailingImageDTO;
|
||||
import com.sap.sse.gwt.client.controls.carousel.ImageCarousel.FullscreenViewer;
|
||||
|
||||
public class MobileFullscreenGallery implements FullscreenViewer<SailingImageDTO>{
|
||||
|
||||
private static MobileFullscreenGalleryUiBinder uiBinder = GWT.create(MobileFullscreenGalleryUiBinder.class);
|
||||
|
||||
interface MobileFullscreenGalleryUiBinder extends UiBinder<LayoutPanel, MobileFullscreenGallery> {
|
||||
}
|
||||
|
||||
interface Style extends CssResource {
|
||||
String popup();
|
||||
String content();
|
||||
}
|
||||
|
||||
@UiField Style style;
|
||||
@UiField(provided=true) SimpleLayoutPanel contentUi = new FullscreenContentPanel();
|
||||
|
||||
private final FullscreenPopupPanel popup = new FullscreenPopupPanel();
|
||||
private final LayoutPanel mainPanel;
|
||||
|
||||
public MobileFullscreenGallery() {
|
||||
popup.setWidget(mainPanel = uiBinder.createAndBindUi(this));
|
||||
popup.addStyleName(style.popup());
|
||||
}
|
||||
|
||||
@UiHandler("closeActionUi")
|
||||
void onCloseActionClicked(ClickEvent event) {
|
||||
popup.hide();
|
||||
}
|
||||
|
||||
public HandlerRegistration addCloseHandler(CloseHandler<PopupPanel> handler) {
|
||||
return popup.addCloseHandler(handler);
|
||||
}
|
||||
|
||||
@Override
|
||||
public void show(SailingImageDTO selectedImage, Collection<SailingImageDTO> imageList) {
|
||||
contentUi.setWidget(new MobileGalleryPlayer(selectedImage, imageList));
|
||||
contentUi.getWidget().getElement().addClassName(style.content());
|
||||
mainPanel.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();
|
||||
event.cancel();
|
||||
return;
|
||||
}
|
||||
event.consume();
|
||||
};
|
||||
|
||||
private void showPopupPanel() {
|
||||
RootPanel.get().getElement().getStyle().setOverflow(Overflow.HIDDEN);
|
||||
FullscreenPopupPanel.this.show();
|
||||
}
|
||||
}
|
||||
|
||||
private class FullscreenContentPanel 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) {
|
||||
mainPanel.onResize();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@Override
|
||||
protected void onUnload() {
|
||||
if (windowResizeHandler != null) {
|
||||
windowResizeHandler.removeHandler();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
+37
@@ -0,0 +1,37 @@
|
||||
<!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:with field="i18n" type="com.sap.sailing.gwt.ui.client.StringMessages" />
|
||||
<ui:with field="i18n_ubi" type="com.sap.sailing.gwt.common.client.i18n.TextMessages" />
|
||||
<ui:style gss="true" type="com.sap.sailing.gwt.home.mobile.partials.imagegallery.MobileFullscreenGallery.Style">
|
||||
.popup {
|
||||
position: fixed !important;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: rgba(0,0,0,0.9);
|
||||
z-index: 5;
|
||||
}
|
||||
.closeAction {
|
||||
height: 50px;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
padding: 10px;
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.content {
|
||||
overflow: auto !important;
|
||||
}
|
||||
</ui:style>
|
||||
<g:LayoutPanel>
|
||||
<g:layer top="0" bottom="0">
|
||||
<g:SimpleLayoutPanel styleName="{style.container}" ui:field="contentUi" />
|
||||
</g:layer>
|
||||
<g:layer top="0" right="0" width="50px" height="50px">
|
||||
<g:Image title="{i18n.closeFullscreenView}" url="images/home/close.svg" styleName="{style.closeAction}" ui:field="closeActionUi"/>
|
||||
</g:layer>
|
||||
</g:LayoutPanel>
|
||||
</ui:UiBinder>
|
||||
+86
@@ -0,0 +1,86 @@
|
||||
package com.sap.sailing.gwt.home.mobile.partials.imagegallery;
|
||||
|
||||
import java.util.Collection;
|
||||
|
||||
import com.google.gwt.core.client.GWT;
|
||||
import com.google.gwt.core.client.Scheduler;
|
||||
import com.google.gwt.core.client.Scheduler.ScheduledCommand;
|
||||
import com.google.gwt.dom.client.DivElement;
|
||||
import com.google.gwt.dom.client.Document;
|
||||
import com.google.gwt.uibinder.client.UiBinder;
|
||||
import com.google.gwt.uibinder.client.UiField;
|
||||
import com.google.gwt.user.client.ui.ResizeComposite;
|
||||
import com.google.gwt.user.client.ui.Widget;
|
||||
import com.sap.sse.common.Util;
|
||||
import com.sap.sse.gwt.client.media.ImageDTO;
|
||||
|
||||
public class MobileGalleryPlayer extends ResizeComposite {
|
||||
|
||||
private static MyBinder uiBinder = GWT.create(MyBinder.class);
|
||||
|
||||
interface MyBinder extends UiBinder<Widget, MobileGalleryPlayer> {
|
||||
}
|
||||
|
||||
@UiField DivElement mainSliderUi;
|
||||
|
||||
private int selectedIdx;
|
||||
|
||||
public MobileGalleryPlayer(ImageDTO selected, Collection<? extends ImageDTO> images) {
|
||||
initWidget(uiBinder.createAndBindUi(this));
|
||||
selectedIdx = Math.max(selectedIdx, Util.indexOf(images, selected));
|
||||
for (ImageDTO i : images) {
|
||||
mainSliderUi.appendChild(createMainImgElement(i));
|
||||
}
|
||||
}
|
||||
|
||||
private DivElement createMainImgElement(ImageDTO i) {
|
||||
DivElement img = Document.get().createDivElement();
|
||||
img.getStyle().setBackgroundImage("url(\"" + i.getSourceRef() + "\")");
|
||||
img.getStyle().setProperty("backgroundSize", "contain");
|
||||
img.getStyle().setProperty("backgroundRepeat", "no-repeat");
|
||||
img.getStyle().setProperty("backgroundPosition", "center");
|
||||
return img;
|
||||
}
|
||||
|
||||
@Override
|
||||
protected void onLoad() {
|
||||
_onLoad();
|
||||
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
|
||||
@Override
|
||||
public void execute() {
|
||||
gotoSlider(selectedIdx);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@Override
|
||||
public void onResize() {
|
||||
refreshSlider();
|
||||
}
|
||||
|
||||
native void gotoSlider(int index) /*-{
|
||||
$wnd.$('.mainSlider').slick('slickGoTo', index, true);
|
||||
$wnd.$('.mainSlider').slick('setPosition');
|
||||
}-*/;
|
||||
|
||||
native void refreshSlider() /*-{
|
||||
$wnd.$('.mainSlider').slick('setOption', null, null, true);
|
||||
}-*/;
|
||||
|
||||
/**
|
||||
* JSNI wrapper that does setup the sliders
|
||||
*
|
||||
* @param uniqueId
|
||||
*/
|
||||
native void _onLoad() /*-{
|
||||
$wnd.$('.mainSlider').slick({
|
||||
lazyLoad : 'ondemand',
|
||||
slidesToShow : 1,
|
||||
slidesToScroll : 1,
|
||||
arrows : false,
|
||||
centerMode : false,
|
||||
variableWidth : false,
|
||||
adaptiveHeight : false,
|
||||
});
|
||||
}-*/;
|
||||
}
|
||||
+21
@@ -0,0 +1,21 @@
|
||||
<!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">
|
||||
@external slick-active;
|
||||
.mainSlider {
|
||||
height: 100%;
|
||||
}
|
||||
.mainSlider div {
|
||||
height: 100%;
|
||||
}
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</ui:style>
|
||||
<g:SimpleLayoutPanel>
|
||||
<g:HTMLPanel styleName="{style.content}">
|
||||
<div class="mainSlider {style.mainSlider}" ui:field="mainSliderUi"></div>
|
||||
</g:HTMLPanel>
|
||||
</g:SimpleLayoutPanel>
|
||||
</ui:UiBinder>
|
||||
Reference in new issue
Block a user