This repository has been archived by the owner on Dec 2, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 44
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
160c273
commit f43904b
Showing
10 changed files
with
303 additions
and
64 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| <a name="module_VirtualViewSequence"></a> | ||
| #VirtualViewSequence | ||
| Virtual ViewSequence for famo.us which creates & destroys nodes using a | ||
| factory delegate. The factory class should support the following functions: | ||
| - create() | ||
| - createNext(prevRenderable) | ||
| - createPrevious(nextRenderable) | ||
| - destroy(renderable) (optional) | ||
|
|
||
| Example: | ||
|
|
||
| ```javascript | ||
| var VirtualViewSequence = require('famous-flex/VirtualViewSequence'); | ||
|
|
||
| // Factory for creating surfaces | ||
| function MyFactory() {} | ||
| MyFactory.prototype.create = function(index) { | ||
| var surface = new Surface({ | ||
| size: [undefined, 100], | ||
| classes: ['my-surface'] | ||
| }); | ||
| surface.index = index || 0; // add property to renderable | ||
| return surface; | ||
| }; | ||
| MyFactory.prototype.createNext = function(renderable) { | ||
| return this.create(renderable.index + 1); | ||
| }; | ||
| MyFactory.prototype.createPrevious = function(renderable) { | ||
| return this.create(renderable.index - 1); | ||
| }; | ||
|
|
||
| // Create infinite scrollview | ||
| var viewSequence = new VirtualViewSequence({ | ||
| factory: new MyFactory() | ||
| }); | ||
| var scrollView = new FlexScrollView({ | ||
| dataSource: viewSequence | ||
| }); | ||
| ``` | ||
|
|
||
| <a name="exp_module_VirtualViewSequence"></a> | ||
| ##class: VirtualViewSequence ⏏ | ||
| **Members** | ||
|
|
||
| * [class: VirtualViewSequence ⏏](#exp_module_VirtualViewSequence) | ||
| * [new VirtualViewSequence(options)](#exp_new_module_VirtualViewSequence) | ||
| * [virtualViewSequence.getPrevious()](#module_VirtualViewSequence#getPrevious) | ||
| * [virtualViewSequence.getNext()](#module_VirtualViewSequence#getNext) | ||
| * [virtualViewSequence.get()](#module_VirtualViewSequence#get) | ||
| * [virtualViewSequence.getIndex()](#module_VirtualViewSequence#getIndex) | ||
| * [virtualViewSequence.toString()](#module_VirtualViewSequence#toString) | ||
| * [virtualViewSequence.cleanup()](#module_VirtualViewSequence#cleanup) | ||
|
|
||
| <a name="exp_new_module_VirtualViewSequence"></a> | ||
| ###new VirtualViewSequence(options) | ||
| **Params** | ||
|
|
||
| - options `Object` - Configurable options. | ||
| - factory `Object` - Factory delegate for creating new renderables. | ||
| - \[value\] `Renderable` - Renderable for this node (when omitted, `factory.create()` is called) | ||
| - \[index\] `Number` - Index of this node (default: 0). | ||
|
|
||
| <a name="module_VirtualViewSequence#getPrevious"></a> | ||
| ###virtualViewSequence.getPrevious() | ||
| Get previous node. | ||
|
|
||
| When no previous node exists, the factory-delegate function `createPrevious` | ||
| is called to construct a renderable for the previous node. When `createPrevious` | ||
| returns `undefined`, no previous-node will be created. | ||
|
|
||
| **Returns**: `VirtualViewSequence` - previous node. | ||
| <a name="module_VirtualViewSequence#getNext"></a> | ||
| ###virtualViewSequence.getNext() | ||
| Get next node. | ||
|
|
||
| When no next node exists, the factory-delegate function `createNext` | ||
| is called to construct a renderable for the next node. When `createNext` | ||
| returns `undefined`, no next-node will be created. | ||
|
|
||
| **Returns**: `VirtualViewSequence` - next node. | ||
| <a name="module_VirtualViewSequence#get"></a> | ||
| ###virtualViewSequence.get() | ||
| Get the value of this node. | ||
|
|
||
| **Returns**: `Renderable` - surface/view | ||
| <a name="module_VirtualViewSequence#getIndex"></a> | ||
| ###virtualViewSequence.getIndex() | ||
| Get the index of the node. | ||
|
|
||
| **Returns**: `Number` - Index of node. | ||
| <a name="module_VirtualViewSequence#toString"></a> | ||
| ###virtualViewSequence.toString() | ||
| Get human readable string verion of the node. | ||
|
|
||
| **Returns**: `String` - node as a human readable string | ||
| <a name="module_VirtualViewSequence#cleanup"></a> | ||
| ###virtualViewSequence.cleanup() | ||
| Cleans up any un-accessed nodes since the previous call to `cleanup`. | ||
|
|
||
| This function cleans up any nodes that have not been accessed | ||
| since the last call to `cleanup`. When a node is accessed | ||
| through a call to `getNext`, `getPrevious`, `get` or `getIndex` | ||
| it is considered `touched` and should not be cleaned up. | ||
|
|
||
| **Returns**: `VirtualViewSequence` - this. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| <a name="module_ProportionalLayout"></a> | ||
| #ProportionalLayout | ||
| Lays-out renderables sequentially based on size-ratios (similar to the stock famo.us FlexibleLayout view). | ||
|
|
||
| |options|type|description| | ||
| |---|---|---| | ||
| |`ratios`|Array|Size-ratios of the renderables.| | ||
|
|
||
| Example: | ||
|
|
||
| ```javascript | ||
| var ProportionalLayout = require('famous-flex/layouts/ProportionalLayout'); | ||
|
|
||
| var layoutController = new LayoutController({ | ||
| layout: ProportionalLayout, | ||
| layoutOptions: { | ||
| ratios: [1, 1, 2, 1], // total size: 5 | ||
| }, | ||
| dataSource: [ | ||
| new Surface({content: 'item 1'}), // 20% | ||
| new Surface({content: 'item 2'}), // 20% | ||
| new Surface({content: 'item 3'}), // 40% | ||
| new Surface({content: 'item 4'}) // 20% | ||
| ] | ||
| }); | ||
| ``` | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| <a name="module_WheelLayout"></a> | ||
| #WheelLayout | ||
| Lays out renderables in a spinner wheel (slot-machine wheel) formation. | ||
|
|
||
| |options|type|description| | ||
| |---|---|---| | ||
| |`itemSize`|Size|Size (width or height) of an item to layout.| | ||
| |`[diameter]`|Number|Diameter of the wheel in pixels (default: `3 x itemSize`).| | ||
| |`[radialOpacity]`|Number|Opacity (0..1) at the diameter edges of the wheel (default: 1).| | ||
|
|
||
| Example: | ||
|
|
||
| ```javascript | ||
| var ContainerSurface = require('famous/surfaces/ContainerSurface'); | ||
| var ScrollController = require('famous-flex/ScrollController'); | ||
| var WheelLayout = require('famous-flex/layouts/WheelLayout'); | ||
|
|
||
| // Create scroll-wheel | ||
| var scrollWheel = new ScrollController({ | ||
| layout: WheelLayout, | ||
| layoutOptions: { | ||
| itemSize: 100, // item has height of 100 pixels | ||
| radialOpacity: 0.5 // make items at the edges more transparent | ||
| }, | ||
| dataSource: [ | ||
| new Surface({content: 'item 1'}), | ||
| new Surface({content: 'item 2'}), | ||
| new Surface({content: 'item 3'}) | ||
| ] | ||
| }); | ||
|
|
||
| // Create a container-surface for clipping and give it a nice perspective | ||
| var container = new ContainerSurface({ | ||
| properties: { | ||
| overflow: 'hidden' | ||
| } | ||
| }); | ||
| container.context.setPerspective(1500); | ||
| container.add(scrollWheel); | ||
| ``` | ||
|
|
Oops, something went wrong.