From cda80f2681b788978c995b228825743bf20c9967 Mon Sep 17 00:00:00 2001 From: IjzerenHein Date: Tue, 2 Dec 2014 19:29:51 +0100 Subject: [PATCH] Updates to docs --- README.md | 4 ++-- docs/layouts/CollectionLayout.md | 5 +++-- docs/layouts/GridLayout.md | 6 +++--- docs/layouts/HeaderFooterLayout.md | 6 +++--- docs/layouts/ListLayout.md | 16 ++++++++-------- docs/layouts/NavBarLayout.md | 6 +++--- src/layouts/CollectionLayout.js | 5 +++-- src/layouts/GridLayout.js | 6 +++--- src/layouts/HeaderFooterLayout.js | 6 +++--- src/layouts/ListLayout.js | 16 ++++++++-------- src/layouts/NavBarLayout.js | 6 +++--- 11 files changed, 42 insertions(+), 40 deletions(-) diff --git a/README.md b/README.md index 556362c..519c2be 100644 --- 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 index cd8ee42..9d1f64f 100644 --- 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 index 540399f..68f72cc 100644 --- a/docs/layouts/GridLayout.md +++ b/docs/layouts/GridLayout.md @@ -6,7 +6,7 @@ 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: @@ -14,7 +14,7 @@ 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 index 976593c..52b756a 100644 --- 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 index c79beb4..3e7d425 100644 --- 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 index ffc15d7..1acb419 100644 --- 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 index 00212d1..e4382cf 100644 --- 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 index 541da48..283f765 100644 --- a/src/layouts/GridLayout.js +++ b/src/layouts/GridLayout.js @@ -18,7 +18,7 @@ * |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: @@ -26,7 +26,7 @@ * ```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 index 9b1a64a..32536ff 100644 --- 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 index 93d96af..6250e2b 100644 --- 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 index 4eadedc..80a3718 100644 --- 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 */