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
49d8acb
commit c567765
Showing
1 changed file
with
85 additions
and
98 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -10,12 +10,14 @@ the renderables from one layout to another. For instance, you can layout a colle | |
| of renderables using a `CollectionLayout`, and change that into a `ListLayout`. When using | ||
| `flow`-mode the renderables will smoothly transition from the old state to the new state using physics, particles and springs. | ||
|
|
||
| ## Mixed-mode support | ||
| ## 2016 Update! | ||
|
|
||
| famous-flex was written for the v0.3.x API of famo.us. The new mixed-mode API of famo.us is drastically different | ||
| and famous-flex therefore needs to be ported to the new API and engine. Some parts will need to be upgraded while others will need to be rewritten from scratch. Also, BEST integration needs to be added. A new branch called 'mixed-mode' will be created on which all mixed-mode development will take place, starting with a LayoutController and the core layouts. After that the Scrolling support shall be added and finally the widgets. | ||
| Many people have asked me what the future of famous-flex holds, and I would like to shed some light on this.. | ||
| I've been working on a big update to famous-flex for some time now. Initially it was to be based on the mixed-mode release of famo.us, but this doesn't seem future proof at the moment. It will therefore be based on (or rather run on top of) famous v3 and [Samsara.js](https://github.com/dmvaldman/samsara). The new library shall contain an extensive set of out-of-the-box controls such as a switch, slider, progress-bar, label, tab-bar, scrollview, etc... All controls will be highly customizable and highly animatable. The idea here is to have a complete and solid set of building blocks for quickly building web/apps. | ||
|
|
||
| In order to make this happen, community contributions would be very welcome to speed up the process. If you want to help, please drop me a line at [email protected]. Also, donations are very welcome and will allow me to spent more time on migrating to mixed-mode and on new famous-flex features. If you want to donate, [click here](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=6PV9ACCZS43VJ). | ||
| A second goal will be to use famous-flex as an output target for [NativeScript](https://www.nativescript.org) apps. Using NativeScript it is possible to write native apps (iOS/Android) using the power of javascript. How awesome would it be to be able to run these apps in the browser as well. I have clear use cases for this and my customers would benefit from this. I want the ability to be able to write a mobile app and website using a shared code-base, and have native performance characteristics for the mobile apps. | ||
|
|
||
| All the best, IjzerenHein | ||
|
|
||
|
|
||
| ### Demos | ||
|
|
@@ -52,23 +54,22 @@ In order to make this happen, community contributions would be very welcome to s | |
| - [HeaderFooterLayout](docs/layouts/HeaderFooterLayout.md) | ||
| - [NavBarLayout](docs/layouts/NavBarLayout.md) | ||
| - [TabBarLayout](docs/layouts/TabBarLayout.md) | ||
| - [ListLayout](docs/layouts/ListLayout.md) *(scrollable)* | ||
| - [ListLayout](docs/layouts/ListLayout.md) *(scrollable)* | ||
| - [CollectionLayout](docs/layouts/CollectionLayout.md) *(scrollable)* | ||
| - [WheelLayout](docs/layouts/WheelLayout.md) *(scrollable)* | ||
| - [CoverLayout](docs/layouts/CoverLayout.md) *(scrollable)* | ||
|
|
||
| ### Resources | ||
| - [Documentation](#documentation) | ||
| - [Roadmap](#roadmap) | ||
|
|
||
|
|
||
| ## Installation | ||
|
|
||
| Install using bower or npm: | ||
|
|
||
| bower install famous-flex | ||
| bower install famous-flex | ||
|
|
||
| npm install famous-flex | ||
| npm install famous-flex | ||
|
|
||
| ## LayoutController | ||
|
|
||
|
|
@@ -85,19 +86,19 @@ var CollectionLayout = require('famous-flex/layouts/CollectionLayout'); // impor | |
|
|
||
| // create collection-layout | ||
| var layoutController = new LayoutController({ | ||
| layout: CollectionLayout, | ||
| layoutOptions: { | ||
| itemSize: [100, 100], | ||
| gutter: [20, 20], | ||
| justify: true | ||
| }, | ||
| flow: true, // smoothly animates renderables when changing the layout | ||
| direction: 1, // 0 = X, 1 = Y, undefined = use default from selected layout-function | ||
| dataSource: [ | ||
| new Surface({content: 'surface1'}), | ||
| new Surface({content: 'surface2'}), | ||
| new Surface({content: 'surface3'}) | ||
| ] | ||
| layout: CollectionLayout, | ||
| layoutOptions: { | ||
| itemSize: [100, 100], | ||
| gutter: [20, 20], | ||
| justify: true | ||
| }, | ||
| flow: true, // smoothly animates renderables when changing the layout | ||
| direction: 1, // 0 = X, 1 = Y, undefined = use default from selected layout-function | ||
| dataSource: [ | ||
| new Surface({content: 'surface1'}), | ||
| new Surface({content: 'surface2'}), | ||
| new Surface({content: 'surface3'}) | ||
| ] | ||
| }); | ||
| this.add(layoutController); // add layout-controller to the render-tree | ||
| ``` | ||
|
|
@@ -126,17 +127,17 @@ layout-functions. | |
| */ | ||
| function LayoutFunction(context, options) { | ||
|
|
||
| // simple layout-function that lays out renderables from top to bottom | ||
| var node = context.next(); | ||
| var y = 0; | ||
| while (node) { | ||
| context.set(node, { | ||
| size: [context.size[0], 100], | ||
| translate: [0, y, 0] | ||
| }); | ||
| y += 100; | ||
| node = context.next(); | ||
| } | ||
| // simple layout-function that lays out renderables from top to bottom | ||
| var node = context.next(); | ||
| var y = 0; | ||
| while (node) { | ||
| context.set(node, { | ||
| size: [context.size[0], 100], | ||
| translate: [0, y, 0] | ||
| }); | ||
| y += 100; | ||
| node = context.next(); | ||
| } | ||
| }; | ||
| ``` | ||
|
|
||
|
|
@@ -161,23 +162,23 @@ layout-function to enumerate all the renderables in the data-source: | |
|
|
||
| ```javascript | ||
| var layoutController = new LayoutController({ | ||
| layout: function (context, options) { | ||
| var y = 0; | ||
| var node = context.next(); | ||
| while (node) { | ||
| context.set(node, { | ||
| size: [context.size[0], 100], | ||
| translate: [0, y, 0] | ||
| }); | ||
| y += 100; | ||
| node = context.next(); | ||
| } | ||
| }, | ||
| dataSource: [ | ||
| new Surface({content: 'surface1'}), | ||
| new Surface({content: 'surface2'}), | ||
| new Surface({content: 'surface3'}) | ||
| ] | ||
| layout: function (context, options) { | ||
| var y = 0; | ||
| var node = context.next(); | ||
| while (node) { | ||
| context.set(node, { | ||
| size: [context.size[0], 100], | ||
| translate: [0, y, 0] | ||
| }); | ||
| y += 100; | ||
| node = context.next(); | ||
| } | ||
| }, | ||
| dataSource: [ | ||
| new Surface({content: 'surface1'}), | ||
| new Surface({content: 'surface2'}), | ||
| new Surface({content: 'surface3'}) | ||
| ] | ||
| }); | ||
| ``` | ||
|
|
||
|
|
@@ -187,25 +188,25 @@ to the `context.set()` function: | |
|
|
||
| ```javascript | ||
| var layoutController = new LayoutController({ | ||
| layout: function (context, options) { | ||
| context.set('one', { | ||
| size: [100, 100], | ||
| translate: [0, 0, 0] | ||
| }); | ||
| context.set('two', { | ||
| size: [100, 100], | ||
| translate: [100, 0, 0] | ||
| }); | ||
| context.set('three', { | ||
| size: [100, 100], | ||
| translate: [200, 0, 0] | ||
| }); | ||
| }, | ||
| dataSource: { | ||
| 'one': new Surface({content: 'one'}), | ||
| 'two': new Surface({content: 'two'}), | ||
| 'three': new Surface({content: 'three'}) | ||
| } | ||
| layout: function (context, options) { | ||
| context.set('one', { | ||
| size: [100, 100], | ||
| translate: [0, 0, 0] | ||
| }); | ||
| context.set('two', { | ||
| size: [100, 100], | ||
| translate: [100, 0, 0] | ||
| }); | ||
| context.set('three', { | ||
| size: [100, 100], | ||
| translate: [200, 0, 0] | ||
| }); | ||
| }, | ||
| dataSource: { | ||
| 'one': new Surface({content: 'one'}), | ||
| 'two': new Surface({content: 'two'}), | ||
| 'three': new Surface({content: 'three'}) | ||
| } | ||
| }); | ||
| ``` | ||
|
|
||
|
|
@@ -218,16 +219,16 @@ using `dock` semantics (see [LayoutDockHelper](docs/helpers/LayoutDockHelper.md) | |
|
|
||
| ```javascript | ||
| var layoutController = new LayoutController({ | ||
| layout: {dock: [ | ||
| ['top', 'header', 50], | ||
| ['bottom', 'footer', 50], | ||
| ['fill', 'content'] | ||
| ]}, | ||
| dataSource: { | ||
| header: new Surface({content: 'Header'}), | ||
| footer: new Surface({content: 'Footer'}), | ||
| content: new Surface({content: 'Content'}) | ||
| } | ||
| layout: {dock: [ | ||
| ['top', 'header', 50], | ||
| ['bottom', 'footer', 50], | ||
| ['fill', 'content'] | ||
| ]}, | ||
| dataSource: { | ||
| header: new Surface({content: 'Header'}), | ||
| footer: new Surface({content: 'Footer'}), | ||
| content: new Surface({content: 'Content'}) | ||
| } | ||
| }); | ||
| ``` | ||
|
|
||
|
|
@@ -279,29 +280,15 @@ Layout helpers are special classes that simplify writing layout functions. | |
| |[LinkedListViewSequence](docs/LinkedListViewSequence.md)|Linked-list based View-sequence which resolves various issues with the stock famo.us ViewSequence.| | ||
|
|
||
|
|
||
| ## Roadmap | ||
|
|
||
| Famous-flex is still in its infancy. I am commited in creating a first-class | ||
| layout-solution for famo.us that is as performant, pluggable and awesome as | ||
| can be. But to do this, I need your support and feedback. Let me know which of | ||
| features below are most important to you, by leaving a comment in the corresponding | ||
| issue. | ||
|
|
||
| - [AutoLayout](https://github.com/IjzerenHein/famous-flex/issues/3) (Cassowary constraints) | ||
| - [Drag & drop](https://github.com/IjzerenHein/famous-flex/issues/5) (Drag & drop renderables in a layout) | ||
| - [New widgets](https://github.com/IjzerenHein/famous-flex/issues/49) (Suggestions for new widgets) | ||
| - [New Layouts](https://github.com/IjzerenHein/famous-flex/issues/50) (Suggestions for new layouts) | ||
|
|
||
|
|
||
| ## Contribute | ||
|
|
||
| If you like this project and want to support it, show some love | ||
| and give it a star. | ||
|
|
||
| and give it a star. Any donations are also very welcome and appreciated. | ||
| To donate [click here](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=6PV9ACCZS43VJ). | ||
|
|
||
| ## Contact | ||
| - @IjzerenHein | ||
| - http://www.gloey.nl | ||
| - [email protected] (for hire) | ||
| - @IjzerenHein | ||
| - http://www.gloey.nl | ||
| - [email protected] (for hire) | ||
|
|
||
| © 2014 - 2015 Hein Rutjes | ||
| © 2014 - 2016 Hein Rutjes | ||