Skip to content

Commit

Permalink
docs: modified scrollview live examples, add sequential + surface liv…
Browse files Browse the repository at this point in the history 
…e examples
  • Loading branch information
@thuongvu
thuongvu committed Sep 14, 2014
1 parent 8bb10f8 commit 66b8d3e
Show file tree
Hide file tree
Showing 7 changed files with 712 additions and 318 deletions.
297 changes: 182 additions & 115 deletions dist/famous-angular.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5136,55 +5136,6 @@ angular.module('famous.angular')
* In the example below, the outer Scroll View contains two explictly created Views. One of those Views contains another Scroll View with sub-views created through an ngRepeat.
* The outer Scroll View is passed an option for its `direction` to be `horizontal (0)`, and the inner Scroll View is passed an option for a `vertical direction (1)`.
*
* ```html
* <fa-app style="width: 320px; height: 568px;">
* <!-- outer scroll view that scrolls horizontally between "main" view and "sidebar" view-->
* <fa-scroll-view fa-pipe-from="eventHandler" fa-options="options.scrollViewOuter">
*
* <!-- sidebar view -->
* <fa-view fa-index="0">
* <fa-modifier fa-size="[100, undefined]" id="sideBarMod">
* <fa-surface fa-pipe-to="eventHandler"
* fa-background-color="'blue'"
* fa-size="[undefined, undefined]">
* </fa-surface>
* </fa-modifier>
* </fa-view>
*
* <!-- main view -->
* <fa-view fa-index="1">
* <!-- inner scroll view that scrolls vertically-->
* <fa-scroll-view fa-pipe-from="eventHandler" fa-options="options.scrollViewInner">
* <fa-view ng-repeat="item in list">
* <fa-surface fa-pipe-to="eventHandler"
* fa-size="[undefined, undefined]"
* fa-background-color="'red'">
* </fa-surface>
* </fa-view>
* </fa-scroll-view>
* </fa-view>
*
* </fa-scroll-view>
* </fa-app>
*
* ```
* ```javascript
* var EventHandler = $famous['famous/core/EventHandler'];
* $scope.eventHandler = new EventHandler();
* $scope.list = [{content: "famous"}, {content: "angular"}, {content: "rocks!"}];
*
* $scope.options = {
* scrollViewOuter: {
* direction: 0,
* paginated: true
* },
* scrollViewInner :{
* direction: 1
* }
* };
* ```
*
*
<example module="faScrollViewExampleApp">
<file name="index.html">
<fa-app ng-controller="ScrollCtrl" style="width: 100%; height: 568px;">
Expand All @@ -5197,7 +5148,7 @@ angular.module('famous.angular')
<fa-surface fa-pipe-to="eventHandler"
fa-background-color="'blue'"
fa-size="[undefined, undefined]">
Sidebar
Sidebar (scroll horizontally to hide)
</fa-surface>
</fa-modifier>
</fa-view>
Expand Down Expand Up @@ -5225,7 +5176,14 @@ angular.module('famous.angular')
var EventHandler = $famous['famous/core/EventHandler'];
$scope.eventHandler = new EventHandler();
$scope.list = [{content: "Awesome content"}, {content: "Scroll to see more awesome content"}, {content: "Famo.us/angular rocks!"}];
$scope.list = [{
content: "Awesome content"
},{
content: "Scroll vertically to see more awesome content"
},{
content: "Famo.us/angular rocks!"
}
];
$scope.options = {
scrollViewOuter: {
Expand Down Expand Up @@ -5358,21 +5316,41 @@ angular.module('famous.angular')
*
* There are no positioning properties (such as `fa-translate`) specified on the `fa-modifier`, but these `fa-surface`s will translate automatically in the specified direction as not to overlap each other.
*
* ```html
* <fa-sequential-layout fa-options="seqOptions">
* <fa-view ng-repeat="view in seq">
* <fa-modifier fa-size="[undefined, 100]">
* <fa-surface fa-background-color="view.bgColor"></fa-surface>
* </fa-modifier>
* </fa-view>
* </fa-sequential-layout>
* ```
* ```javascript
* $scope.seqOptions = {
* direction: 1, // vertical = 1 (default), horizontal = 0
* };
* $scope.seq = [{bgColor: "orange"}, {bgColor: "red"}, {bgColor: "green"}, {bgColor: "yellow"}];
* ```
<example module="faSequentialExampleApp">
<file name="index.html">
<fa-app ng-controller="SequentialCtrl">
<fa-sequential-layout fa-options="sequentialOptions">
<fa-view ng-repeat="view in sequence">
<fa-modifier fa-size="[undefined, 100]">
<fa-surface fa-background-color="view.bgColor"></fa-surface>
</fa-modifier>
</fa-view>
</fa-sequential-layout>
</fa-app>
<script>
angular.module('faSequentialExampleApp', ['famous.angular'])
.controller('SequentialCtrl', ['$scope', '$famous', function($scope, $famous) {
$scope.sequentialOptions = {
direction: 1, // vertical = 1 (default), horizontal = 0
};
$scope.sequence = [{bgColor: "orange"}, {bgColor: "red"}, {bgColor: "green"}, {bgColor: "yellow"}];
}]);
</script>
</file>
<file name="style.css">
fa-app {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</file>
</example>
*/

angular.module('famous.angular')
Expand Down Expand Up @@ -5471,41 +5449,51 @@ angular.module('famous.angular')
*
* @example
* An `fa-surface` can use an ng-include to compile an external HTML fragment:
* ```html
* <fa-modifier fa-size="[960, undefined]">
* <fa-surface fa-size="[undefined, undefined]">
* <div ng-include src=" 'views/animations.html' "></div>
* </fa-surface>
* </fa-modifier>
* ```
*
* A simple ng-repeat of surfaces can be implemented like this:
* ```html
* <fa-modifier ng-repeat="item in list" fa-size="[100, 100]" fa-translate="[0, $index * 75, 0]">
* <fa-surface fa-size="[undefined, undefined]">
* {{item.content}}
* </fa-surface>
* </fa-modifier>
* ```
*
* ```javascript
* $scope.list = [{content: "famous"}, {content: "angular"}, {content: "rocks!"}];
* ```
<example module="faScrollViewExampleApp">
<file name="index.html">
<fa-app>
<fa-modifier fa-size="[960, undefined]">
<fa-surface fa-size="[undefined, undefined]">
<div ng-include src=" 'helloWorld.html' "></div>
</fa-surface>
</fa-modifier>
</fa-app>
</file>
<file name="helloWorld.html">
<p>This is compiled from an external HTML fragment in helloWorld.html!</p>
</file>
<file name="script.js">
angular.module('faScrollViewExampleApp', ['famous.angular']);
</file>
<file name="style.css">
fa-app {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</file>
</example>
*
* ##Common Confusions
* ### A Surface is a leaf node
* An fa-surface is a leaf node; this means that there should not be Famous-Angular elements nested within an fa-surface.
*
* This followin will NOT work correctly:
* This following example will NOT work correctly:
* ```html
* <fa-surface>
* <!-- the contents of a Surface must be standard HTML, so Famo.us components will not get rendered correctly. -->
* <!-- the contents of a Surface must be standard HTML. -->
* <!-- If a Famo.us component is on a surface, it will not get rendered correctly. -->
* <fa-modifier>
* <fa-surface></fa-surface>
* <fa-surface>This will not work correctly.</fa-surface>
* </fa-modifier>
* </fa-surface>
* ```
*
It will throw this error: "Error: Surfaces are leaf nodes of the Famo.us render tree and cannot accept rendernode children. To include additional Famo.us content inside of a fa-surface, that content must be enclosed in an additional fa-app."
*
* The purpose of an fa-surface is to contain viewable HTML content:
* ```html
* <fa-surface>
Expand All @@ -5518,10 +5506,26 @@ angular.module('famous.angular')
* ### Properties on surfaces vs modifiers
* With Famous, properties related to layout and visibility belong on a Modifier. A Surface should be added below a Modifier on the Render Tree, as Modifiers affect everything below them.
*
* You may be tempted to set the `fa-origin` or another layout property on an fa-surface, and discover that it does not work:
* ```html
* <fa-surface fa-origin="[.5, 0]">This will not change the origin.</fa-surface>
* ```
<example module="faScrollViewExampleApp">
<file name="index.html">
<fa-app>
<fa-surface fa-origin="[.5, 0]">This will not change the origin.</fa-surface>
</fa-app>
</file>
<file name="script.js">
angular.module('faScrollViewExampleApp', ['famous.angular']);
</file>
<file name="style.css">
fa-app {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</file>
</example>
*
*
* While you can specify `fa-size` on surfaces themselves, it is not recommended.
* This is not best practice:
Expand Down Expand Up @@ -5552,36 +5556,99 @@ angular.module('famous.angular')
* };
* ```
* To reiterate, the best practice to animate or set any layout/visibilty properties of a surface is to do so on a modifier that affects the Surface. The purpose of a Surface is to contain HTML content, whether rendered from a template, or data-bound.
* <fa-modifier fa-size="[100, 100]">
* <fa-surface fa-background-color="'red'"></fa-surface>
* </fa-modifier>
*
<example module="faScrollViewExampleApp">
<file name="index.html">
<fa-app ng-controller="ScrollCtrl">
<fa-modifier fa-size="sizeForBoxFunction">
<fa-surface fa-background-color="'red'"></fa-surface>
</fa-modifier>
</fa-app>
<script>
angular.module('faScrollViewExampleApp', ['famous.angular'])
.controller('ScrollCtrl', ['$scope', '$famous', function($scope, $famous) {
$scope.sizeForBoxFunction = function() {
return [75, 75];
};
}]);
</script>
</file>
<file name="style.css">
fa-app {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</file>
</example>
*
* ### fa-color & fa-background-color
* The exceptions of not setting layout/visibility properties on an `fa-surface` are `fa-color` and `fa-background-color`: these two properties are passed through the `.setProperties()` method available on Famous Surfaces.
* Take note that they accept a string in the html view. If you do not enclose them in quotation marks, Angular will evaluate it as an object on the scope, but surrounding it with quotation marks will specify it as a string expression.
* ```html
* <fa-modifier fa-size="[200, 50]">
* <fa-surface fa-background-color="'orange'" fa-color="'#fff'">
* This text should be white.
* </fa-surface>
* </fa-modifier>
* ```
*
<example module="faScrollViewExampleApp">
<file name="index.html">
<fa-app>
<fa-modifier fa-size="[200, 50]">
<fa-surface fa-background-color="'orange'" fa-color="'#fff'">
This text should be white on an orange background.
</fa-surface>
</fa-modifier>
</fa-app>
</file>
<file name="script.js">
angular.module('faScrollViewExampleApp', ['famous.angular']);
</file>
<file name="style.css">
fa-app {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</file>
</example>
*
* ### ng-class
* Ng-Class works on `fa-surface`s:
* ```html
* <fa-modifier fa-size="[150, 50]">
* <fa-surface fa-background-color="'blue'" ng-class="{strike: applyStrike}">
* Strikethrough!
* <input type="checkbox" ng-model="applyStrike"></input>
* </fa-surface>
* </fa-modifier>
* ```
* ```css
* .strike {
* text-decoration: line-through;
* }
* ```
*
<example module="faScrollViewExampleApp">
<file name="index.html">
<fa-app ng-controller="ScrollCtrl">
<fa-modifier fa-size="[300, 50]">
<fa-surface ng-class="{strike: applyStrike}">
Check box to apply strikethrough!
<input type="checkbox" ng-model="applyStrike"></input>
</fa-surface>
</fa-modifier>
</fa-app>
</file>
<file name="style.css">
fa-app {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.strike {
text-decoration: line-through;
}
</file>
<file name="script.js">
angular.module('faScrollViewExampleApp', ['famous.angular'])
.controller('ScrollCtrl', ['$scope', '$famous', function($scope, $famous) {
}]);
</file>
</example>
*
*
*/

angular.module('famous.angular')
Expand Down
Loading

0 comments on commit 66b8d3e

Please sign in to comment.