Merge pull request ArcBees#4 from ArcBees/jd_readme

add README.md

Author: jDramaix

README.md

@@ -1,29 +1,66 @@
-#ArcBees GQuery Plugins
-
-##Plugins
-<table>
-  <tr>
-    <th>Plugin</th>
-    <th>Demo</th>
-    <th>Demo Source</th>
-    <th>Javadocs</th>
-  </tr>
-  <tr>
-    <td><a href="https://github.com/ArcBees/ArcBees-GQuery-Plugins/tree/master/tooltip">Tooltip Home</a></td>
-    <td><a href="http://arcbees.github.com/ArcBees-GQuery-Plugins/">Demo & Docs</a></td>
-    <td><a href="https://github.com/ArcBees/ArcBees-GQuery-Plugins/tree/master/tooltip-sample/src/main/java/com/arcbees/gquery/tooltip/client">Source</a></td>
-    <td><a href="http://arcbees.github.com/ArcBees-GQuery-Plugins/javadoc/apidocs/">Javadocs</a></td>
-  </tr>
-</table>
-
-##Contributor
-
-###Deploying
-* Deploying Javadocs and site to GitHub use `mvn clean package site`
+#GQuery Elastic Plugin
+
+##Description of the plugin
+Elastic plugin takes the children of an element and rearranges them in a grid layout (like google+ or pinterest)
+
+##Examples
+Check these 2 examples:
+
+http://arcbees.github.io/gwtquery-elastic-plugin/ElasticWidgetSample/WidgetSample.html
+
+http://arcbees.github.io/gwtquery-elastic-plugin/ElasticBasicSample/ElasticLayoutSample.html
+
+##How it works ?
+To call the plugin:
+
+```java
+    import static com.arcbees.gquery.elastic.client.Elastic.Elastic;
+
+    ElasticOption option = new ElasticOption()
+           .withColumWidth(400)
+           .withMinimalNumberOfColumn(2);
+
+            $("#container").as(Elastic).elastic(option);
+```
+
+or you can use an `ElasticHtmlPanel` and all direct children of the panel (html elements or widgets) will be rearranged in column.
+
+
+
+##How to configure it
+
+The different options are:
+* _minimumColumnWidth_: Specify the minimum width of the column. The plugin uses this value to maximise the 
+number of column to display. (default: 250px)
+* _minimalNumberOfColumn_: Specify the minimum number of column. (default: 1)
+* _maximumNumberOfColumn_: Specify the maximum number of column. (default: infinity)
+* _maximumNumberOfColumn_: Specify the maximum number of column. (default: infinity)
+* _InnerColumnMargin_: Specify the space between each column (default: 10px)
+* _InnerRowMargin_: Specify the space between each row (default: 10px)
+*_autoResize_: Specify if we have to recalculate the layout after a window resizing. (default: true)
+
+To specify this option, you can use an `ElasticOption` object and pass it to the plugin or uses the specific method directly on the ElasticHtmlPanel
+
+On each child we can specify the following attributes:
+*_data-elastic-span_: specify the number of column to span for this child.
+*_data-elastic-column_: Force the child to be displayed in a specific column. "first" and "last" values are also accepted and the child will be displayed respectively in the first of in the last column no matter the number of column
+
+## How to install
+
+There is no official release yet, but you can already use a snapshot version
+###With maven :
+```xml
+    <dependency>
+        <groupId>com.arcbees.gquery</groupId>
+        <artifactId>elastic</artifactId>
+        <version>1.0-SNAPSHOT</version>
+    </dependency>
+```
+
 
 ##Thanks to
 [![Arcbees.com](http://arcbees-ads.appspot.com/ad.png)](http://arcbees.com)
 
 [![IntelliJ](https://lh6.googleusercontent.com/--QIIJfKrjSk/UJJ6X-UohII/AAAAAAAAAVM/cOW7EjnH778/s800/banner_IDEA.png)](http://www.jetbrains.com/idea/index.html)
 
-[![githalytics.com alpha](https://cruel-carlota.gopagoda.com/ae27e06a3a8ba8e031d37594ff186900 "githalytics.com")](http://githalytics.com/ArcBees/ArcBees-GQuery-Plugins)
+[![githalytics.com alpha](https://cruel-carlota.pagodabox.com/361ac462e4947df21a821a3fbbbc3367 "githalytics.com")](http://githalytics.com/ArcBees/gwtquery-elastic-plugin)

elastic-sample/src/main/java/com/arcbees/gquery/elastic/htmlsample/client/ElasticSample.java

@@ -32,7 +32,7 @@ public void onModuleLoad() {
             @Override
             public void f() {
                 ElasticOption option = new ElasticOption()
-                        .setMinimumColumWidth(400)
+                        .setMinimumColumWidth(275)
                         .setMinimalNumberOfColumn(2);
 
                 $("#container").as(Elastic).elastic(option);

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

@@ -17,6 +17,9 @@
     <script language="javascript" src="ElasticBasicSample.nocache.js"></script>
 </head>
 <body>
+<p>
+    Click on the button to run the plugin. Then resize the window to see how the plugin recomputes the layout.
+</p>
 <button id="go">Elastic</button>
 <div id="container">
 <div data-elastic-span="all"><h3>data-elastic-span="all"</h3>1. Lorem ipsum dolor sit amet, consectetur adipisicing
@@ -230,5 +233,17 @@
     laborum
 </div>
 </div>
+<script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-43120417-20', 'auto', {'allowLinker': true});
+    ga('require', 'linker');
+    ga('linker:autoLink', ['github.com'] );
+    ga('send', 'pageview');
+
+</script>
 </body>
 </html>

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

@@ -13,8 +13,20 @@
 <body>
 <header>
     This is an infinite scroll panel widget. Each time you reach the the bottom of the scroll, new divs are added in the
-    panel and are automatically laid out by the ElasticHtmlPanel.
+    panel and are automatically laid out by the ElasticHtmlPanel. Resize the window to see how the plugin recompute the layout.
 </header>
 <section id="main"></section>
+<script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-43120417-20', 'auto', {'allowLinker': true});
+    ga('require', 'linker');
+    ga('linker:autoLink', ['github.com'] );
+    ga('send', 'pageview');
+
+</script>
 </body>
 </html>