Updates to docs

IjzerenHein · Dec 2, 2014 · cda80f2 · cda80f2
1 parent 86d4fd1
commit cda80f2
Show file tree

Hide file tree

Showing 11 changed files with 42 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -238,9 +238,9 @@ FlexScrollView is a flexible and highly performant scroll-view for famo.us suppo
 - bottom/right alignment
 - all the good stuff you expect from a scrollview and more ;)
 
-It is based on [ScrollController](docs/ScrollController.md) which implements the core functionality of the scroll-view, which is turn is inherited from [LayoutController](docs/LayoutController.md).
+[FlexScrollView](docs/FlexScrollView.md) is based on [ScrollController](docs/ScrollController.md) which implements the core functionality of the scroll-view, which is turn is inherited from [LayoutController](docs/LayoutController.md).
 
-### Take the [FlexScrollView Tutorial](tutorials/FlexScrollView.md)
+### For a full overview, take the [FlexScrollView Tutorial](tutorials/FlexScrollView.md)
 
 
 ## Standard layouts

diff --git a/docs/layouts/CollectionLayout.md b/docs/layouts/CollectionLayout.md
@@ -13,9 +13,10 @@ continues at the next column/row.
 Example:
 
 ```javascript
+var FlexScrollView = require('famous-flex/FlexScrollView');
 var CollectionLayout = require('famous-flex/layouts/CollectionLayout');
 
-scrollView = new FlexScrollView({
+var scrollView = new FlexScrollView({
   layout: CollectionLayout,
   layoutOptions: {
     itemSize: [100, 100],    // item has width and height of 100 pixels
@@ -27,6 +28,6 @@ scrollView = new FlexScrollView({
     new Surface({content: 'item 2'}),
     new Surface({content: 'item 3'})
   ]
-})
+});
 ```
 
diff --git a/docs/layouts/GridLayout.md b/docs/layouts/GridLayout.md
@@ -6,15 +6,15 @@ columns and rows.
 |options|type|description|
 |---|---|---|
 |`cells`|Size|Number of cells: [columns, rows]|
-|`[margins]`|Array|Margins applied to the outside (e.g. [10, 20, 10, 20])|
+|`[margins]`|Number/Array|Margins shorthand (e.g. 5, [10, 20], [2, 5, 2, 10])|
 |`[spacing]`|Size|Spacing between renderables. (e.g. [10, 10]|
 
 Example:
 
 ```javascript
 var GridLayout = require('famous-flex/layouts/GridLayout');
 
-new LayoutController({
+var layoutController = new LayoutController({
   layout: GridLayout,
   layoutOptions: {
     cells: [10, 5],            // 10 columns, 5 rows
@@ -26,6 +26,6 @@ new LayoutController({
     new Surface({content: 'item 2'}),
     new Surface({content: 'item 3'})
   ]
-})
+});
 ```
 
diff --git a/docs/layouts/HeaderFooterLayout.md b/docs/layouts/HeaderFooterLayout.md
@@ -6,14 +6,14 @@ Three part layout consisting of a top-header, bottom-footer and middle part.
 |---|---|---|
 |`[headerSize]`|Number|Height of the header|
 |`[footerSize]`|Number|Height of the footer|
-|`[margins]`|Number/Array|Margins|
+|`[margins]`|Number/Array|Margins shorthand (e.g. 5, [10, 20], [2, 5, 2, 10])|
 
 Example:
 
 ```javascript
 var HeaderFooterLayout = require('famous-flex/layouts/HeaderFooterLayout');
 
-new LayoutController({
+var layout = new LayoutController({
   layout: HeaderFooterLayout,
   layoutOptions: {
     headerSize: 60,    // header has height of 60 pixels
@@ -24,6 +24,6 @@ new LayoutController({
 	   content: new Surface({content: 'This is the content surface'}),
 	   footer: new Surface({content: 'This is the footer surface'})
   }
-})
+});
 ```
 
diff --git a/docs/layouts/ListLayout.md b/docs/layouts/ListLayout.md
@@ -12,13 +12,17 @@ Lays out items and optionally sticky sections from top to bottom or left to righ
 Example:
 
 ```javascript
-var ScrollView = require('famous-flex/ScrollView');
+var FlexScrollView = require('famous-flex/FlexScrollView');
 var ListLayout = require('famous-flex/layouts/ListLayout');
 
-var scrollView = new ScrollView({
+var scrollView = new FlexScrollView({
   layout: ListLayout,
   layoutOptions: {
-    isSectionCallback: _isSection,
+    margins: [20, 10, 20, 10],
+    spacing: 1,
+    isSectionCallback: function(renderNode) {
+      return renderNode.isSection;
+    },
   },
   dataSource: [
     // first section
@@ -30,7 +34,7 @@ var scrollView = new ScrollView({
     _createCell(),
   ]
 });
-this.add(tableView);
+this.add(scrollView);
 
 function _createCell() {
   return new Surface({
@@ -47,9 +51,5 @@ function _createSection() {
   section.isSection = true; // mark renderNode as section
   return section;
 }
-
-function _isSection(renderNode) {
-  return renderNode.isSection;
-}
 ```
 
diff --git a/docs/layouts/NavBarLayout.md b/docs/layouts/NavBarLayout.md
@@ -7,7 +7,7 @@ When no item-width is specified, the width of the renderable itsself is used.
 
 |options|type|description|
 |---|---|---|
-|`[margins]`|Margins|Margins to use (see Margins)|
+|`[margins]`|Number/Array|Margins shorthand (e.g. 5, [10, 20], [2, 5, 2, 10])|
 |`[itemWidth]`|Number|Width of the left & right items|
 |`[leftItemWidth]`|Number|Width of the left items|
 |`[rightItemWidth]`|Number|Width of the right items|
@@ -18,7 +18,7 @@ Example:
 ```javascript
 var NavBarLayout = require('famous-flex/layouts/NavBarLayout');
 
-new LayoutController({
+var layout = new LayoutController({
   layout: NavBarLayout,
   layoutOptions: {
     margins: [5, 5, 5, 5], // margins to utilize
@@ -35,6 +35,6 @@ new LayoutController({
       new Surface({content: 'right2'})
     ]
   }
-})
+});
 ```
 
diff --git a/src/layouts/CollectionLayout.js b/src/layouts/CollectionLayout.js
@@ -25,9 +25,10 @@
  * Example:
  *
  * ```javascript
+ * var FlexScrollView = require('famous-flex/FlexScrollView');
  * var CollectionLayout = require('famous-flex/layouts/CollectionLayout');
  *
- * scrollView = new FlexScrollView({
+ * var scrollView = new FlexScrollView({
  *   layout: CollectionLayout,
  *   layoutOptions: {
  *     itemSize: [100, 100],    // item has width and height of 100 pixels
@@ -39,7 +40,7 @@
  *     new Surface({content: 'item 2'}),
  *     new Surface({content: 'item 3'})
  *   ]
- * })
+ * });
  * ```
  * @module
  */

diff --git a/src/layouts/GridLayout.js b/src/layouts/GridLayout.js
@@ -18,15 +18,15 @@
  * |options|type|description|
  * |---|---|---|
  * |`cells`|Size|Number of cells: [columns, rows]|
- * |`[margins]`|Array|Margins applied to the outside (e.g. [10, 20, 10, 20])|
+ * |`[margins]`|Number/Array|Margins shorthand (e.g. 5, [10, 20], [2, 5, 2, 10])|
  * |`[spacing]`|Size|Spacing between renderables. (e.g. [10, 10]|
  *
  * Example:
  *
  * ```javascript
  * var GridLayout = require('famous-flex/layouts/GridLayout');
  *
- * new LayoutController({
+ * var layoutController = new LayoutController({
  *   layout: GridLayout,
  *   layoutOptions: {
  *     cells: [10, 5],            // 10 columns, 5 rows
@@ -38,7 +38,7 @@
  *     new Surface({content: 'item 2'}),
  *     new Surface({content: 'item 3'})
  *   ]
- * })
+ * });
  * ```
  * @module
  */

diff --git a/src/layouts/HeaderFooterLayout.js b/src/layouts/HeaderFooterLayout.js
@@ -17,14 +17,14 @@
  * |---|---|---|
  * |`[headerSize]`|Number|Height of the header|
  * |`[footerSize]`|Number|Height of the footer|
- * |`[margins]`|Number/Array|Margins|
+ * |`[margins]`|Number/Array|Margins shorthand (e.g. 5, [10, 20], [2, 5, 2, 10])|
  *
  * Example:
  *
  * ```javascript
  * var HeaderFooterLayout = require('famous-flex/layouts/HeaderFooterLayout');
  *
- * new LayoutController({
+ * var layout = new LayoutController({
  *   layout: HeaderFooterLayout,
  *   layoutOptions: {
  *     headerSize: 60,    // header has height of 60 pixels
@@ -35,7 +35,7 @@
  *	   content: new Surface({content: 'This is the content surface'}),
  *	   footer: new Surface({content: 'This is the footer surface'})
  *   }
- * })
+ * });
  * ```
  * @module
  */

diff --git a/src/layouts/ListLayout.js b/src/layouts/ListLayout.js
@@ -23,13 +23,17 @@
  * Example:
  *
  * ```javascript
- * var ScrollView = require('famous-flex/ScrollView');
+ * var FlexScrollView = require('famous-flex/FlexScrollView');
  * var ListLayout = require('famous-flex/layouts/ListLayout');
  *
- * var scrollView = new ScrollView({
+ * var scrollView = new FlexScrollView({
  *   layout: ListLayout,
  *   layoutOptions: {
- *     isSectionCallback: _isSection,
+ *     margins: [20, 10, 20, 10],
+ *     spacing: 1,
+ *     isSectionCallback: function(renderNode) {
+ *       return renderNode.isSection;
+ *     },
  *   },
  *   dataSource: [
  *     // first section
@@ -41,7 +45,7 @@
  *     _createCell(),
  *   ]
  * });
- * this.add(tableView);
+ * this.add(scrollView);
  *
  * function _createCell() {
  *   return new Surface({
@@ -58,10 +62,6 @@
  *   section.isSection = true; // mark renderNode as section
  *   return section;
  * }
- *
- * function _isSection(renderNode) {
- *   return renderNode.isSection;
- * }
  * ```
  * @module
  */

diff --git a/src/layouts/NavBarLayout.js b/src/layouts/NavBarLayout.js
@@ -18,7 +18,7 @@
  *
  * |options|type|description|
  * |---|---|---|
- * |`[margins]`|Margins|Margins to use (see Margins)|
+ * |`[margins]`|Number/Array|Margins shorthand (e.g. 5, [10, 20], [2, 5, 2, 10])|
  * |`[itemWidth]`|Number|Width of the left & right items|
  * |`[leftItemWidth]`|Number|Width of the left items|
  * |`[rightItemWidth]`|Number|Width of the right items|
@@ -29,7 +29,7 @@
  * ```javascript
  * var NavBarLayout = require('famous-flex/layouts/NavBarLayout');
  *
- * new LayoutController({
+ * var layout = new LayoutController({
  *   layout: NavBarLayout,
  *   layoutOptions: {
  *     margins: [5, 5, 5, 5], // margins to utilize
@@ -46,7 +46,7 @@
  *       new Surface({content: 'right2'})
  *     ]
  *   }
- * })
+ * });
  * ```
  * @module
  */