Merge pull request ArcBees#10 from ArcBees/jd_max_width_rowspan

Add the possibility to span all the rows + Add the maximumWidth option

Author: jDramaix

elastic-sample/src/main/java/com/arcbees/gquery/elastic/htmlsample/public/ElasticLayoutSample.html

@@ -29,8 +29,8 @@
     pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
     laborum
 </div>
-<div>2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
-    dolore
+<div>2. Lorem ipsum dolor sit amet, consectetur
+    adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
     magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
     pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est

elastic-sample/src/main/java/com/arcbees/gquery/elastic/widgetsample/client/WidgetSample.java

@@ -16,8 +16,6 @@
 
 package com.arcbees.gquery.elastic.widgetsample.client;
 
-import java.util.Random;
-
 import com.arcbees.gquery.elastic.client.Elastic;
 import com.arcbees.gquery.elastic.client.ElasticHtmlPanel;
 import com.google.gwt.core.client.EntryPoint;
@@ -31,6 +29,8 @@
 import com.google.gwt.user.client.ui.ScrollPanel;
 import com.google.gwt.user.client.ui.Widget;
 
+import java.util.Random;
+
 public class WidgetSample implements EntryPoint {
     interface WidgetSampleUiBinder extends UiBinder<Widget, WidgetSample> {
     }

elastic/src/main/java/com/arcbees/gquery/elastic/client/Elastic.java

@@ -29,6 +29,7 @@ public Elastic init(GQuery gq) {
 
     public static String COLUMN_ATTRIBUTE = "data-elastic-column";
     public static String SPAN_ATTRIBUTE = "data-elastic-span";
+    public static String ROW_SPAN_ATTRIBUTE = "data-elastic-row-span";
 
     static String ELASTIC_DATA_KEY = "__GQUERY_ARCBEES_ELASTIC";
 

elastic/src/main/java/com/arcbees/gquery/elastic/client/ElasticHtmlPanel.java

@@ -65,6 +65,44 @@ public void setMinimumColumnWidth(int columnWidth, boolean updateLayout) {
         }
     }
 
+    /**
+     * Set the maximal width in px for a column and update the layout accordingly. When the column width reach this value, the width of the column is not
+     * increased even if the width od the container increase.
+     * <p/>
+     * If you want to the width of the columns doesn't increase with the width of the container, set the
+     * <code>maximumWidth</code> equals to the <code>minimumWidth</code>
+     * <p/>
+     * If you want that the columns take all the available space in the container et increase their width according to
+     * the width of the container, set the <code>maximumWidth</code> to -1.
+     * <p/>
+     * Default: {@value -1}
+     */
+    public void setMaximumColumnWidth(int maximumColumnWidth) {
+        setMaximumColumnWidth(maximumColumnWidth, true);
+    }
+
+
+    /**
+     * Set the maximal width in px for a column. When the column width reach this value, the width of the column is not
+     * increased even if the width od the container increase. The layout is updated if <code>updateLayout</code> equals
+     * to <code>true</code>
+     * <p/>
+     * If you want to the width of the columns doesn't increase with the width of the container, set the
+     * <code>maximumWidth</code> equals to the <code>minimumWidth</code>
+     * <p/>
+     * If you want that the columns take all the available space in the container and increase their width according to
+     * the width of the container, set the <code>maximumWidth</code> to -1.
+     * <p/>
+     * Default: {@value -1}
+     */
+    public void setMaximumColumnWidth(int maximumColumnWidth, boolean updateLayout) {
+        options.setMaximumColumnWidth(maximumColumnWidth);
+
+        if (updateLayout) {
+            update();
+        }
+    }
+
     /**
      * Set the minimal number of columns to display and update the layout accordingly.
      * <p>

elastic/src/main/java/com/arcbees/gquery/elastic/client/ElasticImpl.java

@@ -16,11 +16,6 @@
 
 package com.arcbees.gquery.elastic.client;
 
-import java.util.ArrayList;
-import java.util.Comparator;
-import java.util.List;
-import java.util.PriorityQueue;
-
 import com.arcbees.gquery.elastic.client.MutationObserver.DomMutationCallback;
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.core.client.JsArray;
@@ -36,10 +31,14 @@
 import com.google.gwt.user.client.Window;
 import com.google.web.bindery.event.shared.HandlerRegistration;
 
-import static java.lang.Math.max;
-import static java.lang.Math.min;
+import java.util.ArrayList;
+import java.util.Comparator;
+import java.util.List;
+import java.util.PriorityQueue;
 
 import static com.google.gwt.query.client.GQuery.$;
+import static java.lang.Math.max;
+import static java.lang.Math.min;
 
 public class ElasticImpl {
     /**
@@ -56,6 +55,7 @@ private static class StyleInfo {
         int height;
         double width;
         Integer floatColumn;
+        boolean rowSpanAll;
     }
 
     private class LayoutCommand implements RepeatingCommand {
@@ -102,6 +102,7 @@ public int compare(Integer col1, Integer col2) {
     // Deque interfaces not supported by gwt
     private PriorityQueue<Integer> columnPriorities;
     private List<Double> columnHeights;
+    private List<Boolean> ignoredColumn;
     private boolean useTranslate3d;
     private boolean useCalc;
     private double columnWidth;
@@ -117,6 +118,7 @@ public ElasticImpl(Element container, ElasticOption options) {
         this.options = options;
 
         columnHeights = new ArrayList<Double>();
+        ignoredColumn = new ArrayList<Boolean>();
         columnPriorities = new PriorityQueue<Integer>(10, new ColumnHeightComparator());
         useTranslate3d = CSS_TRANSLATE_3D != null;
         useCalc = CSS_CALC != null;
@@ -143,6 +145,7 @@ void update(boolean fullUpdate) {
         int prevColumnNumber = columnHeights.size();
         columnHeights.clear();
         columnPriorities.clear();
+        ignoredColumn.clear();
 
         GQuery $container = $(container);
         // check if children returns text elements
@@ -159,11 +162,16 @@ void update(boolean fullUpdate) {
 
         columnWidth = (totalColumnWidth - ((colNumber - 1) * options.getInnerColumnMargin())) / colNumber;
         columnWidth = max(columnWidth, options.getMinimumColumnWidth());
+        if (options.getMaximumColumnWidth() != -1) {
+            int maxWidth = max(options.getMinimumColumnWidth(), options.getMaximumColumnWidth());
+            columnWidth = min(columnWidth, maxWidth);
+        }
 
         double initialTop = useTranslate3d ? 0 : containerPaddingTop;
         for (int i = 0; i < colNumber; i++) {
             columnHeights.add(initialTop);
             columnPriorities.add(i);
+            ignoredColumn.add(false);
         }
 
         // Use four different loops in order to avoid browser reflows
@@ -173,7 +181,7 @@ void update(boolean fullUpdate) {
             }
         }
 
-        if (!useCalc || prevColumnNumber != colNumber) {
+        if (!canUseCalc() || prevColumnNumber != colNumber) {
             for (Element e : items.elements()) {
                 setItemWidth(e, colNumber);
             }
@@ -190,6 +198,10 @@ void update(boolean fullUpdate) {
         setHeightContainer();
     }
 
+    private boolean canUseCalc() {
+        return useCalc && options.getMaximumColumnWidth() == -1;
+    }
+
     private void init() {
         GQuery $container = $(container);
 
@@ -265,7 +277,7 @@ private void placeItem(Element e, int numberOfCol) {
 
         if (useTranslate3d) {
             String translate3d;
-            if (useCalc) {
+            if (canUseCalc()) {
                 double weight = (double) column / span;
                 String offset = (100 * weight) + "%" +
                         " + " + ((si.marginLeft + si.marginRight) * weight + options.getInnerColumnMargin() * column)
@@ -283,11 +295,17 @@ private void placeItem(Element e, int numberOfCol) {
         }
 
         double newHeight = minHeight + si.height + si.borderTopWidth + si.borderBottomWidth + si.marginBottom + si
-                .marginTop + options.getInnerRowMargin();
+                    .marginTop + options.getInnerRowMargin();
 
         for (int i = column; i < column + span; i++) {
             columnHeights.set(i, newHeight);
-            columnPriorities.add(i);
+            if (si.rowSpanAll) {
+                ignoredColumn.set(i, true);
+            }
+
+            if (!ignoredColumn.get(i)) {
+                columnPriorities.add(i);
+            }
         }
     }
 
@@ -315,7 +333,7 @@ private void setItemWidth(Element e, int nbrOfCol) {
         StyleInfo si = getStyleInfo(e);
         int span = min(si.span, nbrOfCol);
         String width;
-        if (useCalc) {
+        if (canUseCalc()) {
             double weight = (double) span / nbrOfCol;
             si.width = 100 * weight;
             double innerMarginPart = (double) (options.getInnerColumnMargin() * (nbrOfCol - 1)) * weight;
@@ -326,6 +344,7 @@ private void setItemWidth(Element e, int nbrOfCol) {
         } else {
             si.width = columnWidth * span + options.getInnerColumnMargin() * (span - 1) - si.marginLeft - si
                     .marginRight;
+
             width = si.width + "px";
         }
 
@@ -352,6 +371,7 @@ private StyleInfo initItem(Element e) {
 
         StyleInfo styleInfo = new StyleInfo();
         styleInfo.span = getSpan(e);
+        styleInfo.rowSpanAll = "all".equals(e.getAttribute(Elastic.ROW_SPAN_ATTRIBUTE));
         styleInfo.floatColumn = floatColumn;
         styleInfo.marginRight = $e.cur("marginRight", true);
         styleInfo.marginLeft = $e.cur("marginLeft", true);

elastic/src/main/java/com/arcbees/gquery/elastic/client/ElasticOption.java

@@ -18,11 +18,13 @@
 
 public class ElasticOption {
     static int MINIMUM_COLUMN_DEFAULT = 1;
+    static int MAXIMUM_COLUMN_WIDTH_DEFAULT = -1;
     static int MINIMUM_COLUMN_WIDTH_DEFAULT = 250;
     static int INNER_COLUMN_MARGIN_DEFAULT = 10;
     static int INNER_ROW_MARGIN_DEFAULT = 10;
 
     private int minimumColumnWidth;
+    private int maximumColumnWidth;
     private int minNumberColumn;
     private int maxNumberColumn;
     private int innerColumnMargin;
@@ -34,18 +36,43 @@ public ElasticOption() {
     }
 
     /**
-     * Set the minimal width in px for a column.
+     * Set the minimal width in px for a column. This value is used to know how many column can be display inside
+     * the container.
+     * <p/>
      * Default: {@value #MINIMUM_COLUMN_WIDTH_DEFAULT}
      */
     public ElasticOption setMinimumColumWidth(int columnWidth) {
         this.minimumColumnWidth = columnWidth;
         return this;
     }
 
+
     public int getMinimumColumnWidth() {
         return minimumColumnWidth;
     }
 
+    /**
+     * Set the maximal width in px for a column. When the column width reach this value, the width of the column is not
+     * increased even if the width of the container increases.
+     * <p/>
+     * If you want to the width of the columns doesn't increase with the width of the container, set the
+     * <code>maximumWidth</code> equals to the <code>minimumWidth</code>
+     * <p/>
+     * If you want that the columns take all the available space in the container and increase their width according to
+     * the width of the container, set the <code>maximumWidth</code> to -1.
+     * <p/>
+     * If the maximumColumnWidth value is be lower than the value returned by {@link #getMinimumColumnWidth()}, this
+     * last is taken in order to calculate the maximum width of the columns
+     * Default: {@value #MAXIMUM_COLUMN_WIDTH_DEFAULT}
+     */
+    public void setMaximumColumnWidth(int maximumColumnWidth) {
+        this.maximumColumnWidth = maximumColumnWidth;
+    }
+
+    public int getMaximumColumnWidth() {
+        return maximumColumnWidth;
+    }
+
     public int getMinimalNumberOfColumn() {
         return minNumberColumn;
     }
@@ -115,6 +142,7 @@ public ElasticOption setAutoResize(boolean autoResize) {
 
     private void setDefaults() {
         minimumColumnWidth = MINIMUM_COLUMN_WIDTH_DEFAULT;
+        maximumColumnWidth = MAXIMUM_COLUMN_WIDTH_DEFAULT;
         minNumberColumn = MINIMUM_COLUMN_DEFAULT;
         maxNumberColumn = Integer.MAX_VALUE;
         innerColumnMargin = INNER_COLUMN_MARGIN_DEFAULT;