Renamed ScrollView to FlexScrollView

Gruntfile.js

@@ -25,13 +25,12 @@ module.exports = function(grunt) {
             { src: 'src/LayoutContext.js', dest: 'docs/LayoutContext.md' },
             { src: 'src/LayoutController.js', dest: 'docs/LayoutController.md' },
             { src: 'src/ScrollController.js', dest: 'docs/ScrollController.md' },
-            { src: 'src/ScrollView.js', dest: 'docs/ScrollView.md' },
+            { src: 'src/FlexScrollView.js', dest: 'docs/FlexScrollView.md' },
             { src: 'src/LayoutUtility.js', dest: 'docs/LayoutUtility.md' },
             // helpers
             { src: 'src/helpers/LayoutDockHelper.js', dest: 'docs/helpers/LayoutDockHelper.md' },
             // layouts
             { src: 'src/layouts/CollectionLayout.js', dest: 'docs/layouts/CollectionLayout.md' },
-            { src: 'src/layouts/TableLayout.js', dest: 'docs/layouts/TableLayout.md' },
             { src: 'src/layouts/GridLayout.js', dest: 'docs/layouts/GridLayout.md' },
             { src: 'src/layouts/ListLayout.js', dest: 'docs/layouts/ListLayout.md' },
             { src: 'src/layouts/HeaderFooterLayout.js', dest: 'docs/layouts/HeaderFooterLayout.md' },

README.md

@@ -260,7 +260,7 @@ It is based on [ScrollController](docs/ScrollController.md) which implements the
 |---|---|
 |[LayoutController](docs/LayoutController.md)|Lays out renderables and optionally animates between layout states.|
 |[ScrollController](docs/ScrollController.md)|Scrollable LayoutController (base class for FlexScrollView).|
-|[FlexScrollView](docs/ScrollView.md)|Customizable scroll-view with pull-to-refrsh and scroll-view linking.|
+|[FlexScrollView](docs/FlexScrollView.md)|Flexible scroll-view with pull-to-refresh, margins & spacing and more good stuff.|
 |[LayoutContext](docs/LayoutContext.md)|Context used for writing layout-functions.|
 |[LayoutUtility](docs/LayoutUtility.md)|Utility class containing helper functions.|
 

bower.json

@@ -15,9 +15,11 @@
     "famous",
     "flex",
     "famous-flex",
+    "famousflex",
     "layoutcontroller",
-    "scrolllayoutcontroller",
+    "scrollcontroller",
     "scrollview",
+    "flexscrollview",
     "flex-scrollview"
   ],
   "license": "MIT",

docs/FlexScrollView.md

@@ -0,0 +1,33 @@
+<a name="module_FlexScrollView"></a>
+#FlexScrollView
+Flexible ScrollView drop-in replacement for famo.us.
+
+Key features:
+-    Customizable layout (uses ListLayout by default)
+-    Insert/remove at any position using animations
+-    Support for `true` size renderables
+-    Pull to refresh (header & footer)
+-    Horizontal/vertical direction
+-    Top/left or bottom/right alignment
+-    Pagination
+-    Option to embed in a ContainerSurface
+-    ScrollView linking
+
+Inherited from: [ScrollController](./ScrollController.md)
+
+<a name="module_FlexScrollView..getPosition"></a>
+##~~FlexScrollView~getPosition([node])~~
+Returns the position associated with the Scrollview instance's current node
+(generally the node currently at the top).
+
+This function is a shim provided for compatibility with the stock famo.us ScrollView.
+
+**Params**
+
+- \[node\] `number` - If specified, returns the position of the node at that index in the
+Scrollview instance's currently managed collection.  
+
+***Deprecated***  
+**Scope**: inner function of [FlexScrollView](#module_FlexScrollView)  
+**Returns**: `number` - The position of either the specified node, or the Scrollview's current Node,
+in pixels translated.  

docs/LayoutController.md

@@ -38,6 +38,8 @@ function and a data-source.
   - \[flow\] `Bool` - Enables flow animations when the layout changes (default: `false`).  
   - \[insertSpec\] `Spec` - Size, transform, opacity... to use when inserting new renderables into the scene (default: `{}`).  
   - \[removeSpec\] `Spec` - Size, transform, opacity... to use when removing renderables from the scene (default: `{}`).  
+  - \[alwaysLayout\] `Bool` - When set to true, always calls the layout function on every render-cycle (default: `false`).  
+  - \[autoPipeEvents\] `Bool` - When set to true, automatically calls .pipe on all renderables when inserted (default: `false`).  
 
 <a name="module_LayoutController#setOptions"></a>
 ###layoutController.setOptions(options)
@@ -52,6 +54,8 @@ Patches the LayoutController instance's options with the passed-in ones.
   - \[direction\] `Utility.Direction` - Direction to layout into (e.g. Utility.Direction.Y) (when ommited the default direction of the layout is used)  
   - \[insertSpec\] `Spec` - Size, transform, opacity... to use when inserting new renderables into the scene (default: `{}`).  
   - \[removeSpec\] `Spec` - Size, transform, opacity... to use when removing renderables from the scene (default: `{}`).  
+  - \[alwaysLayout\] `Bool` - When set to true, always calls the layout function on every render-cycle (default: `false`).  
+  - \[autoPipeEvents\] `Bool` - When set to true, automatically calls .pipe on all renderables when inserted (default: `false`).  
 
 **Returns**: `LayoutController` - this  
 <a name="module_LayoutController#setDataSource"></a>

docs/ScrollController.md

@@ -44,24 +44,18 @@ Inherited from: [LayoutController](./LayoutController.md)
 ###new ScrollController(options)
 **Params**
 
-- options `Object` - Options.  
-  - \[layout\] `function` | `Object` - Layout function or layout-literal.  
-  - \[layoutOptions\] `Object` - Options to pass in to the layout-function.  
-  - \[dataSource\] `Array` | `ViewSequence` | `Object` - Array, ViewSequence or Object with key/value pairs.  
-  - \[direction\] `Utility.Direction` - Direction to layout into (e.g. Utility.Direction.Y) (when ommited the default direction of the layout is used)  
-  - \[flow\] `Bool` - Enables flow animations when the layout changes (default: `false`).  
-  - \[insertSpec\] `Spec` - Size, transform, opacity... to use when inserting new renderables into the scene (default: `{}`).  
-  - \[removeSpec\] `Spec` - Size, transform, opacity... to use when removing renderables from the scene (default: `{}`).  
+- options `Object` - Configurable options (see LayoutController for all inherited options).  
+  - \[useContainer\] `Bool` - Embeds the view in a ContainerSurface to hide any overflow and capture input events (default: `false`).  
   - \[paginated\] `Bool` - Enabled pagination when set to `true` (default: `false`).  
   - \[alignment\] `Number` - Alignment of the renderables (0 = top/left, 1 = bottom/right) (default: `0`).  
   - \[mouseMove\] `Bool` - Enables scrolling by holding the mouse-button down and moving the mouse (default: `false`).  
+  - \[enabled\] `Bool` - Enables or disabled user input (default: `true`).  
   - \[nodeSpring\] `Object` - Spring options to use when transitioning renderables between scenes  
   - \[scrollParticle\] `Object` - Options for the scroll particle (default: `{}`)  
   - \[scrollSpring\] `Object` - Spring-force options that are applied on the scroll particle when e.g. bounds is reached (default: `{dampingRatio: 1.0, period: 350}`)  
   - \[scrollDrag\] `Object` - Drag-force options to apply on the scroll particle  
   - \[scrollFriction\] `Object` - Friction-force options to apply on the scroll particle  
   - \[layoutAll\] `Bool` - When set to true, always lays out all renderables in the datasource (default: `false`).  
-  - \[alwaysLayout\] `Bool` - When set to true, always calls the layout function (default: `false`).  
   - \[visibleItemThresshold\] `Number` - Thresshold (0..1) used for determining whether an item is considered to be the first/last visible item (default: `0.5`).  
   - \[debug\] `Bool` - Logs debug output to the console (default: `false`).  
 
@@ -72,25 +66,18 @@ Patches the ScrollController instance's options with the passed-in ones.
 
 **Params**
 
-- options `Object` - An object of configurable options for the ScrollController instance.  
-  - \[layout\] `function` | `Object` - Layout function or layout-literal.  
-  - \[layoutOptions\] `Object` - Options to pass in to the layout-function.  
-  - \[dataSource\] `Array` | `ViewSequence` | `Object` - Array, ViewSequence or Object with key/value pairs.  
-  - \[direction\] `Utility.Direction` - Direction to layout into (e.g. Utility.Direction.Y) (when ommited the default direction of the layout is used)  
-  - \[insertSpec\] `Spec` - Size, transform, opacity... to use when inserting new renderables into the scene (default: `{}`).  
-  - \[removeSpec\] `Spec` - Size, transform, opacity... to use when removing renderables from the scene (default: `{}`).  
-  - \[useContainer\] `Bool` - Embeds the view in a ContainerSurface to hide any overflow and capture input events (default: `false`).  
+- options `Object` - Configurable options (see LayoutController for all inherited options).  
   - \[paginated\] `Bool` - Enabled pagination when set to `true` (default: `false`).  
   - \[alignment\] `Number` - Alignment of the renderables (0 = top/left, 1 = bottom/right) (default: `0`).  
   - \[mouseMove\] `Bool` - Enables scrolling by holding the mouse-button down and moving the mouse (default: `false`).  
+  - \[enabled\] `Bool` - Enables or disabled user input (default: `true`).  
   - \[nodeSpring\] `Object` - Spring options to use when transitioning renderables between scenes  
   - \[scrollParticle\] `Object` - Options for the scroll particle (default: `{}`)  
   - \[scrollSpring\] `Object` - Spring-force options that are applied on the scroll particle when e.g. bounds is reached (default: `{dampingRatio: 1.0, period: 500}`)  
   - \[scrollDrag\] `Object` - Drag-force options to apply on the scroll particle  
   - \[scrollFriction\] `Object` - Friction-force options to apply on the scroll particle  
   - \[visibleItemThresshold\] `Number` - Thresshold (0..1) used for determining whether an item is considered to be the first/last visible item (default: `0.5`).  
   - \[layoutAll\] `Bool` - When set to true, always lays out all renderables in the datasource (default: `false`).  
-  - \[alwaysLayout\] `Bool` - When set to true, always calls the layout function (default: `false`).  
   - \[debug\] `Bool` - Logs debug output to the console (default: `false`).  
 
 **Returns**: `ScrollController` - this  

docs/layouts/CollectionLayout.md

@@ -6,20 +6,21 @@ continues at the next column/row.
 |options|type|description|
 |---|---|---|
 |`itemSize`|Size/Function|Size of an item to layout or callback function which should return the size, e.g.: `function(renderNode, contextSize)`|
-|`[gutter]`|Size|Gutter-space between renderables|
+|`[margins]`|Number/Array|Margins shorthand (e.g. 5, [10, 20], [2, 5, 2, 10])|
+|`[spacing]`|Number/Array|Spacing between items (e.g. 5, [10, 10])|
 |`[justify]`|Bool/Array.Bool|Justify the renderables accross the width/height|
 
 Example:
 
 ```javascript
 var CollectionLayout = require('famous-flex/layouts/CollectionLayout');
 
-new LayoutController({
+scrollView = new FlexScrollView({
   layout: CollectionLayout,
   layoutOptions: {
-    itemSize: [100, 100],  // item has width and height of 100 pixels
-    gutter: [5, 5],        // gutter of 5 pixels in between cells
-    justify: true          // justify the items neatly across the whole width and height
+    itemSize: [100, 100],    // item has width and height of 100 pixels
+    margins: [10, 5, 10, 5], // outer margins
+    spacing: [10, 10]        // spacing between items
   },
   dataSource: [
     new Surface({content: 'item 1'}),

docs/layouts/GridLayout.md

@@ -7,7 +7,7 @@ columns and rows.
 |---|---|---|
 |`cells`|Size|Number of cells: [columns, rows]|
 |`[margins]`|Array|Margins applied to the outside (e.g. [10, 20, 10, 20])|
-|`[gutter]`|Size|Gutter-space between renderables. (e.g. [10, 10]|
+|`[spacing]`|Size|Spacing between renderables. (e.g. [10, 10]|
 
 Example:
 
@@ -19,7 +19,7 @@ new LayoutController({
   layoutOptions: {
     cells: [10, 5],            // 10 columns, 5 rows
     margins: [20, 20, 20, 20], // margins on the outside
-    gutter: [20, 20]           // gutter between cells
+    spacing: [10, 10]          // spacing between cells
   },
   dataSource: [
     new Surface({content: 'item 1'}),

docs/layouts/ListLayout.md

@@ -1,26 +1,55 @@
 <a name="module_ListLayout"></a>
 #ListLayout
-Lays out a collection of renderables from top to bottom or left to right.
+Lays out items and optionally sticky sections from top to bottom or left to right.
 
 |options|type|description|
 |---|---|---|
-|`[itemSize]`|Number|Height or width in pixels of the list-item|
+|`[itemSize]`|Number/Function|Height or width in pixels of an item (used when renderNode has no size)|
+|`[margins]`|Number/Array|Margins shorthand (e.g. 5, [10, 20], [2, 5, 2, 10])|
+|`[spacing]`|Number|Spacing between items|
+|`[isSectionCallback]`|Function|Callback that is called in order to check if a render-node is a section rather than a cell.|
 
 Example:
 
 ```javascript
+var ScrollView = require('famous-flex/ScrollView');
 var ListLayout = require('famous-flex/layouts/ListLayout');
 
-var scrollController = new ScrollController({
+var scrollView = new ScrollView({
   layout: ListLayout,
   layoutOptions: {
-    itemSize: 40,         // item has height of 40 pixels
+    isSectionCallback: _isSection,
   },
   dataSource: [
-    new Surface({content: 'item 1'}),
-    new Surface({content: 'item 2'}),
-    new Surface({content: 'item 3'})
+    // first section
+    _createSection(),
+    _createCell(),
+    _createCell(),
+    // second section
+    _createSection(),
+    _createCell(),
   ]
-})
+});
+this.add(tableView);
+
+function _createCell() {
+  return new Surface({
+    size: [undefined, 50],
+    content: 'my cell'
+  });
+}
+
+function _createSection() {
+  var section = new Surface({
+    size: [undefined, 30],
+    content: 'my sticky section'
+  });
+  section.isSection = true; // mark renderNode as section
+  return section;
+}
+
+function _isSection(renderNode) {
+  return renderNode.isSection;
+}
 ```
 

package.json

@@ -22,9 +22,11 @@
     "famous",
     "flex",
     "famous-flex",
+    "famousflex",
     "layoutcontroller",
-    "scrolllayoutcontroller",
+    "scrollcontroller",
     "scrollview",
+    "flexscrollview",
     "flex-scrollview"
   ],
   "licenses": [

tutorials/FlexScrollView.md

@@ -9,7 +9,7 @@ By default FlexScrollView uses the [ListLayout](../docs/layouts/ListLayout.md) l
 # Index
 
 - [Getting started](#getting-started)
-- [API reference](../docs/ScrollView.md)
+- [API reference](../docs/FlexScrollView.md)
 - [Flow mode animations](#flow-mode-animations)
 - [Collection layout](#collection-layout)
 - [Pagination](#pagination)