From 6dc07c1447d3092b1640c0694cf095fac579c02c Mon Sep 17 00:00:00 2001 From: Marko Radinovic Date: Tue, 7 Oct 2014 16:50:55 +0200 Subject: [PATCH] Added configuration for gutter width and transition duration. --- .../vaadin/alump/masonry/MasonryLayout.java | 31 +++++++++++++++++++ .../client/MasonryLayoutConnector.java | 4 +-- .../masonry/client/MasonryLayoutState.java | 4 +++ .../alump/masonry/client/MasonryPanel.java | 8 +++-- 4 files changed, 42 insertions(+), 5 deletions(-) diff --git a/masonry-addon/src/main/java/org/vaadin/alump/masonry/MasonryLayout.java b/masonry-addon/src/main/java/org/vaadin/alump/masonry/MasonryLayout.java index 40a6f9d..de6bb87 100644 --- a/masonry-addon/src/main/java/org/vaadin/alump/masonry/MasonryLayout.java +++ b/masonry-addon/src/main/java/org/vaadin/alump/masonry/MasonryLayout.java @@ -90,6 +90,37 @@ public MasonryLayout(int columnWidth) { this(); getState().columnWidth = columnWidth; } + + /** + * Create new masonry layout with defined column width + * @param columnWidth Column width used to calculate left positions of items. Can not be changed after start. + * Remember to update horizontal values of CSS rules to match with this. + */ + + /** + * Create new masonry layout with defined column width and gutter width + * @param columnWidth Column width used to calculate left positions of items. Can not be changed after start. + * @param gutter Gutter width (default 10). To set vertical space use margin CSS rule. (margin-bottom:10px). Can not be changed after start. + */ + public MasonryLayout(int columnWidth, int gutter) { + this(); + getState().columnWidth = columnWidth; + getState().gutter = gutter; + } + + /** + * Create new masonry layout with defined column width, gutter width and transition duration + * @param columnWidth columnWidth Column width used to calculate left positions of items. Can not be changed after start. + * @param gutter gutter Gutter width (default 10). To set vertical space use margin CSS rule. (margin-bottom:10px). Can not be changed after start. + * @param transitionDuration Duration of the transition when items change position or appearance, set in a CSS time format. Default 0.4s. Can not be changed after start. + */ + public MasonryLayout(int columnWidth, int gutter, String transitionDuration) { + this(); + getState().columnWidth = columnWidth; + getState().gutter = gutter; + getState().transitionDuration = transitionDuration; + } + // We must override getState() to cast the state to MyComponentState @Override diff --git a/masonry-addon/src/main/java/org/vaadin/alump/masonry/client/MasonryLayoutConnector.java b/masonry-addon/src/main/java/org/vaadin/alump/masonry/client/MasonryLayoutConnector.java index a7ec6e0..b6e083f 100644 --- a/masonry-addon/src/main/java/org/vaadin/alump/masonry/client/MasonryLayoutConnector.java +++ b/masonry-addon/src/main/java/org/vaadin/alump/masonry/client/MasonryLayoutConnector.java @@ -89,14 +89,14 @@ public void onStateChanged(StateChangeEvent stateChangeEvent) { clickEventHandler.handleEventHandlerRegistration(); // call always, will be ignored after first time - getWidget().initialize(getState().columnWidth); + getWidget().initialize(getState().columnWidth, getState().gutter, getState().transitionDuration); } @Override public void onConnectorHierarchyChange(ConnectorHierarchyChangeEvent event) { - getWidget().initialize(getState().columnWidth); + getWidget().initialize(getState().columnWidth, getState().gutter, getState().transitionDuration); for (ComponentConnector child : event.getOldChildren()) { if (child.getParent() != this) { diff --git a/masonry-addon/src/main/java/org/vaadin/alump/masonry/client/MasonryLayoutState.java b/masonry-addon/src/main/java/org/vaadin/alump/masonry/client/MasonryLayoutState.java index c913f96..05fa38a 100644 --- a/masonry-addon/src/main/java/org/vaadin/alump/masonry/client/MasonryLayoutState.java +++ b/masonry-addon/src/main/java/org/vaadin/alump/masonry/client/MasonryLayoutState.java @@ -14,6 +14,10 @@ public class MasonryLayoutState extends AbstractLayoutState { public int columnWidth = 300; + + public int gutter = 10; + + public String transitionDuration = "0.4s"; /** * Addtional stylenames for items (usually related to sizing) diff --git a/masonry-addon/src/main/java/org/vaadin/alump/masonry/client/MasonryPanel.java b/masonry-addon/src/main/java/org/vaadin/alump/masonry/client/MasonryPanel.java index 920c416..0d3e0a5 100644 --- a/masonry-addon/src/main/java/org/vaadin/alump/masonry/client/MasonryPanel.java +++ b/masonry-addon/src/main/java/org/vaadin/alump/masonry/client/MasonryPanel.java @@ -54,12 +54,12 @@ public MasonryPanel() { setElement(Document.get().createDivElement()); } - public void initialize(int columnWidth) { + public void initialize(int columnWidth, int gutter, String transitionDuration) { if(msnry != null) { return; } - msnry = initializeMasonry(getElement(), createMasonryProperties(columnWidth).getJavaScriptObject()); + msnry = initializeMasonry(getElement(), createMasonryProperties(columnWidth, gutter, transitionDuration).getJavaScriptObject()); } public void setVisible(boolean visible) { @@ -136,10 +136,12 @@ protected static native void nativeDestroy(JavaScriptObject msnry) msnry.destroy(); }-*/; - protected static JSONObject createMasonryProperties(int columnWidth) { + protected static JSONObject createMasonryProperties(int columnWidth, int gutter, String transitionDuration) { JSONObject obj = new JSONObject(); obj.put("columnWidth", new JSONNumber(columnWidth)); obj.put("itemSelector", new JSONString("." + ITEM_CLASSNAME)); + obj.put("gutter", new JSONNumber(gutter)); + obj.put("transitionDuration", new JSONString(transitionDuration)); return obj; }