From 5783027af3ad457626917e542d7e90c8a34cab7e Mon Sep 17 00:00:00 2001 From: Thuongvu Ho Date: Fri, 12 Sep 2014 11:11:21 -0700 Subject: [PATCH] docs: add live examples for app flipper grid header image index modifier --- dist/famous-angular.js | 638 ++++++++++++------ docs-generation/docs.config.js | 6 +- docs/unstable/directive/faApp/index.md | 138 +++- docs/unstable/directive/faFlipper/index.md | 71 +- docs/unstable/directive/faGridLayout/index.md | 134 +++- .../directive/faHeaderFooterLayout/index.md | 203 +++++- .../directive/faImageSurface/index.md | 68 +- docs/unstable/directive/faIndex/index.md | 91 ++- docs/unstable/directive/faModifier/index.md | 201 +++++- docs/unstable/directive/ngBlur/index.md | 2 +- docs/unstable/directive/ngClick/index.md | 76 ++- docs/unstable/directive/ngCopy/index.md | 8 +- docs/unstable/directive/ngCut/index.md | 8 +- docs/unstable/directive/ngDblclick/index.md | 8 +- docs/unstable/directive/ngFocus/index.md | 2 +- docs/unstable/directive/ngKeydown/index.md | 8 +- docs/unstable/directive/ngKeypress/index.md | 8 +- docs/unstable/directive/ngKeyup/index.md | 8 +- docs/unstable/directive/ngMousedown/index.md | 8 +- docs/unstable/directive/ngMouseenter/index.md | 8 +- docs/unstable/directive/ngMouseleave/index.md | 8 +- docs/unstable/directive/ngMousemove/index.md | 8 +- docs/unstable/directive/ngMouseover/index.md | 8 +- docs/unstable/directive/ngMouseup/index.md | 8 +- docs/unstable/directive/ngPaste/index.md | 8 +- docs/unstable/directive/ngSubmit/index.md | 8 +- famous-angular-docs | 2 +- src/scripts/directives/fa-app.js | 67 +- src/scripts/directives/fa-flipper.js | 47 +- src/scripts/directives/fa-grid-layout.js | 90 ++- .../directives/fa-header-footer-layout.js | 140 ++-- src/scripts/directives/fa-image-surface.js | 35 +- src/scripts/directives/fa-index.js | 95 ++- src/scripts/directives/fa-input.js | 44 +- src/scripts/directives/fa-modifier.js | 118 +++- 35 files changed, 1799 insertions(+), 581 deletions(-) diff --git a/dist/famous-angular.js b/dist/famous-angular.js index 3fbb56af..502c9028 100644 --- a/dist/famous-angular.js +++ b/dist/famous-angular.js @@ -1486,33 +1486,56 @@ angular.module('famous.angular') * * Declaring `fa-app` appends a div with the class of `"famous-angular-container"` to the DOM. It then instantiates a Context via Famous' Engine `.createContext()` method, passing in a reference to the `famous-angular-container` div, resulting in a Famous context that renderables can be added to connected to Angular. `Fa-app` can be declared as an element or as an attribute within another element. * - * ```html - * - * - * This will be shown on screen. - * - *
This will not appear on screen because it is not inside an fa-surface.
- * - * ``` + + + + + This will be shown on screen. + +
This will not appear on screen because it is not inside an fa-surface.
+ + + + fa-app { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + + angular.module('faAppExampleApp', ['famous.angular']); + + * ## Common Qustions * ### Multiple fa-app's * Nesting an `fa-app` within another `fa-app` is possible, and the use case of this approach would be for css content overflow. * - * In the example below, there is an `fa-surface` with an `fa-app` nested inside. Normally, an `fa-surface` should not nest another Famous element within it because it is a leaf node that has the purpose of being a container for html content. The exception is nesting an `fa-app` within an `fa-surface`, which creates another Famous context, in which Famous elements can be nested inside. - * - * ```html - * - * - * - * - * - * - * - * - * ``` + * In the example below, there is an `fa-surface` with an `fa-app` nested inside. Normally, an `fa-surface` should not nest another Famous element within it because it is a leaf node that has the purpose of being a container for html content. The exception is nesting an `fa-app` within an `fa-surface`, which creates another Famous context, in which Famous elements can be nested inside. * + + + + + + + + + + + + + fa-app { + background-color: #000; + } + + + angular.module('faAppExampleAppA', ['famous.angular']); + + * The outer `fa-app` is sized 500x500, and it contains all of the content. The use case of this `fa-app` within another `fa-app` is to clip content using the css overflow:hidden property. The `fa-image-surface` links to a 400x400 sized image of the Famous logo. Its parent is the nested `fa-app`, whose size is only 200x200. * * The larger image content (400x400) will overflow the boundaries of its parent, the the nested `fa-app` (200x200). Because `fa-app` has a css overflow:hidden property, it will clip the content of any of its children that is outside the 200x200 region. Any part of the 400x400 image that reaches outside of these boundaries are ignored. This may be useful for complex animations. @@ -2011,6 +2034,7 @@ angular.module('famous.angular') * @ngdoc directive * @name faFlipper * @module famous.angular + * @requires famous * @restrict EA * @description * This directive will create a Famo.us Flipper containing the @@ -2030,17 +2054,41 @@ angular.module('famous.angular') * * This function attempts a DOM lookup for an isolate of an `fa-flipper` element, and calls the `.flip()` function of `fa-flipper`. * - *```html - * - * - * - * - *``` - *```javascript - * $scope.flipIt = function() { - * $famous.find('fa-flipper')[0].flip(); - * }; - *``` + + + + + + Click me to see me flip! + + + Flip me again! + + + + + + fa-app { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + div { + cursor: pointer; + padding: 8px 8px; + } + + + angular.module('faFlipperExampleApp', ['famous.angular']) + .controller('FlipperCtrl', ['$scope', '$famous', function($scope, $famous) { + $scope.flipIt = function() { + $famous.find('fa-flipper')[0].flip(); + }; + }]); + + */ angular.module('famous.angular') @@ -2127,34 +2175,74 @@ angular.module('famous.angular') * @example * A Famous Grid Layout divides a context into evenly-sized grid cells. Pass an option such as `dimension` by binding an object with the property to `fa-options`. * - * In the example below, `fa-options` references `myGridLayoutOptions` on the scope. - * - * ```javascript - * $scope.myGridLayoutOptions = { - * dimensions: [2,2], // specifies number of columns and rows - * }; - * ``` - * - * In the example below, `fa-size` is specified as `[100, 100]`, so each `fa-surface` will have these dimensions. - * ```html - * - * - * - * - * - * ``` - * ```javascript - * $scope.grids = [{bgColor: "orange"}, {bgColor: "red"}, {bgColor: "green"}, {bgColor: "yellow"}]; - * ``` - * + * In the example below, `fa-options` references `myGridLayoutOptions` on the scope. The dimensions property has a value of `[2,2]` which specifies the columns and rows. `fa-size` is specified as `[100, 100]` on the fa-modifier, so each `fa-surface` will have these dimensions. + * + + + + + + + + + + + + angular.module('faGridExampleApp', ['famous.angular']) + .controller('GridCtrl', ['$scope', function($scope) { + + $scope.myGridLayoutOptions = { + dimensions: [2,2], // specifies number of columns and rows + }; + + $scope.grids = [{bgColor: "orange"}, {bgColor: "red"}, {bgColor: "green"}, {bgColor: "yellow"}]; + + }]); + + + fa-app { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + + * If `fa-size` is not specified, as in this example below, the fa-surface's will collectively fill the height and width of its parent modifier/context. * - * ```html - * - * - * - * ``` + + + + + + + + + + angular.module('faGridExampleAppA', ['famous.angular']) + .controller('GridCtrlA', ['$scope', function($scope) { + + $scope.myGridLayoutOptions = { + dimensions: [2,2], // specifies number of columns and rows + }; + + $scope.grids = [{bgColor: "orange"}, {bgColor: "red"}, {bgColor: "green"}, {bgColor: "yellow"}]; + + }]); + + + fa-app { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + */ angular.module('famous.angular') @@ -2256,55 +2344,111 @@ angular.module('famous.angular') * * Since the header and footer Modifiers have fixed heights of `[undefined, 75]` (fill the parent container horizontally, 75 pixels vertically), the content will fill the remaining height of the parent modifier or context. * - *```html - * - * - * Header - * - * - * Content - * - * - * Footer - * - *``` + + + + + + + + Header + + + Content + + + Footer + + + + + + + angular.module('faHeaderFooterExampleApp', ['famous.angular']) + + + fa-app { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + * * Famo.us' `HeaderFooterLayout` defaults to a vertical orientation. - * Specify a direction in the options to obtains a horizontal orientation. + * Specify a direction in the fa-options object to obtain a horizontal orientation. * - * ```html - * - * - * Header - * - * - * Content - * - * - * Footer - * - * ``` - * + + + + + + + + Header + + + Content + + + Footer + + + + + + + angular.module('faHeaderFooterExampleAppA', ['famous.angular']) + + + fa-app { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + * ## ng-repeat inside a fa-header-footer * * `Fa-header-footer` works with ng-repeat'ed renderables: * - * ```html - * - * - * - * {{view.text}} - * - * - * - * ``` - * ```javascript - * $scope.views = [ - * {bgColor: "red", text: "header", size: [undefined, 100]}, - * {bgColor: "green", text: "content", size: [undefined, undefined]}, - * {bgColor: "blue", text: "footer", size: [undefined, 100]} - * ]; - * ``` + + + + + + + {{view.text}} + + + + + + + angular.module('faHeaderFooterExampleAppB', ['famous.angular']) + .controller('HeaderFooterCtrlB', ['$scope', function($scope) { + $scope.views = [ + {bgColor: "red", text: "header", size: [undefined, 100]}, + {bgColor: "green", text: "content", size: [undefined, undefined]}, + {bgColor: "blue", text: "footer", size: [undefined, 100]} + ]; + }]); + + + fa-app { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + + * In the example above, 3 renderables are generated through an ng-repeat. The header and footer `Modifier`s generated by the ng-repeat have defined sizes of `[undefined, 100]` (they will fill their parent container horizontally, and be 100 pixels vertically). The content has a size of `[undefined, undefined]`, and it will fill the remaining heght and width of its container. * * Note: @@ -2391,15 +2535,32 @@ angular.module('famous.angular') * ``` @example * To use `fa-image-surface`, declare an `fa-image-url` attribute with a string url. - * ```html - * - * - * ``` + + + + + + + + + angular.module('faImageSurfExampleApp', ['famous.angular']); + + + fa-app { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + + * `Fa-image-surface` accepts two css-style properties: `color` and `background color`, which may be assigned values by the `fa-color` and `fa-background-color` attributes respectively. * * `Fa-size` may also be declared as an attribute. If void, the `fa-image-surface` will inherit the size of its parent node. @@ -2520,43 +2681,64 @@ angular.module('famous.angular') * `Fa-start-index` will not affect the sequential order of the layout; the `fa-view` with the red background will be layed out first, followed by the one with the blue background. * By setting `fa-start-index` to 1, the Scroll View will display the View with the index of 1, which is the View with the blue background color. * - * ```html - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * - * ``` - * - * ```javascript - * var EventHandler = $famous['famous/core/EventHandler']; - * $scope.eventHandler = new EventHandler(); - * $scope.list = [{content: "famous"}, {content: "angular"}, {content: "rocks!"}]; - * - * $scope.options = { - * scrollView: { - * direction: 0 // displays the fa-views horizontally - * } - * }; - *``` + + + + + + + + + + + + + +

Scroll me back!

+ + + + + + + +

Scroll me!

+ + + + + + + + + angular.module('faIndexExampleApp', ['famous.angular']) + .controller('IndexCtrl', ['$scope', '$famous', function($scope, $famous) { + + var EventHandler = $famous['famous/core/EventHandler']; + $scope.eventHandler = new EventHandler(); + $scope.list = [{content: "famous"}, {content: "angular"}, {content: "rocks!"}]; + + $scope.options = { + scrollView: { + direction: 0 // displays the fa-views horizontally + } + }; + + }]); + + + fa-app { + width: 320px; + height: 320px; + overflow: hidden; + } + p { + padding: 8px 8px; + } + + */ angular.module('famous.angular') @@ -2588,6 +2770,7 @@ angular.module('famous.angular') * @name ngClick * @module famous.angular * @restrict A + * @requires famous.angular * * @description * This is a wrapped for tha default ngCick which allows you to specify custom behavior when an fa-surface is clicked. @@ -2604,21 +2787,40 @@ angular.module('famous.angular') * * ``` * @example + + + + + Click Me! This has been clicked {{clicked}} times. + + + + + #app { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + fa-surface { + cursor: pointer; + } + + + angular.module('faInputExampleApp', ['famous.angular']) + .controller('ClickCtrl', ['$scope', function($scope) { + $scope.clicked = 0; + $scope.myClickHandler = function($event) { + console.log($event); + $scope.clicked++; + }; + }]); + + * ### ng-click on an fa-surface * `ng-click` can be used on an `fa-surface`. Internally, a Famous Surface has a `.on()` method that binds a callback function to an event type handled by that Surface. * The function expression bound to `ng-click` is bound to that `fa-surface`'s click eventHandler, and when the `fa-surface` is clicked, the function expression will be called. - * - * ```html - * - * - * - * ``` - * ```javascript - * $scope.myClickHandler = function($event) { - * console.log("click"); - * console.log($event); - * }; - * **/ angular.module('famous.angular') .config(['$provide', function ($provide) { @@ -3327,43 +3529,101 @@ angular.module('famous.angular') * This directive creates a Famo.us Modifier that will affect all children render nodes. Its properties can be bound * to values (e.g. `fa-translate="[15, 20, 1]"`, Famo.us Transitionable objects, or to functions that return numbers. * @usage - * ```html - * - * - * I'm translucent, skewed, rotated, and translated - * - * ``` - *```javascript - * $scope.myScopeSkewVariable = [0,0,.3]; - * $scope.myScopeFunctionThatReturnsAnArray = function() { - * return [0.5, 0.5]; - * }; - *``` + * + + + + + + I'm translucent, skewed, rotated, and translated + + + + + angular.module('faModifierExampleApp', ['famous.angular']) + .controller('ModifierCtrl', ['$scope', function($scope) { + + $scope.myScopeSkewVariable = [0,0,.3]; + + $scope.myScopeFunctionThatReturnsAnArray = function() { + return [1.5, 1.5]; + }; + }]); + + + fa-app { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + + * * @example * ## Values that fa-modifier attributes accept * `Fa-modifier` properties, (such as `faRotate`, `faScale`, etc) can be bound to number/arrays, object properties defined on the scope, function references, or function expressions. * Some properties (`faOpacity`, `faSize`, `faOrigin`, `faAlign`) can be bound to a Transitionable object directly. * - * ### Number/Array values - * `Fa-modifier` properties can be bound to number/array values. - * ```html - * - * - * - * ``` + + + + + + + + + + angular.module('faModifierExampleApp', ['famous.angular']); + + + fa-app { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + + * * ### Object properties on the scope *`Fa-modifier` properties can be bound to object properties defined on the scope. - * ```html - * - * - * - * ``` - * ```javascript - * $scope.boxObject = { - * origin: [.4, .4], - * size: [50, 50] - * } - * ``` + * + + + + + + + + + + + angular.module('faModifierExampleApp', ['famous.angular']) + .controller('ModifierCtrl', ['$scope', function($scope) { + + $scope.boxObject = { + origin: [.4, .4], + size: [50, 50] + }; + + }]); + + + fa-app { + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + } + + + * * ### Function references * `Fa-modifier` properties can be bound to a function reference that returns a value. * diff --git a/docs-generation/docs.config.js b/docs-generation/docs.config.js index 0d109353..e7f6eacb 100644 --- a/docs-generation/docs.config.js +++ b/docs-generation/docs.config.js @@ -88,9 +88,11 @@ module.exports = function(config) { scripts: [ 'https://code.famo.us/famous/global/0.2.2/famous.min.js', 'https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js', - '../../bower_components/famous-angular/dist/famous-angular.min.js' + '../../bower_components/famous-angular/dist/famous-angular.js' ], - stylesheets: [] + stylesheets: [ + '../../bower_components/famous-angular/dist/famous-angular.css' + ] } } }] diff --git a/docs/unstable/directive/faApp/index.md b/docs/unstable/directive/faApp/index.md index 637f55e8..9666490d 100644 --- a/docs/unstable/directive/faApp/index.md +++ b/docs/unstable/directive/faApp/index.md @@ -59,27 +59,129 @@ it is inside of a fa-surface dir

Example

Fa-app creates a Famous Context, the root of the Render Tree. Renderables (such as fa-modifier's & fa-surface's) nested within an fa-app are added to this root context.

Declaring fa-app appends a div with the class of "famous-angular-container" to the DOM. It then instantiates a Context via Famous' Engine .createContext() method, passing in a reference to the famous-angular-container div, resulting in a Famous context that renderables can be added to connected to Angular. Fa-app can be declared as an element or as an attribute within another element.

-
<fa-app style="width: 320px; height: 568px;">
-  <fa-modifier>
-    <fa-surface>This will be shown on screen.</fa-surface>
-  </fa-modifier>
-  <div>This will not appear on screen because it is not inside an fa-surface.</div>
-</fa-app>
+

+ +{% assign lvl = page.url | append:'X' | split:'/' | size %} +{% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %} + +

+ +   + Edit in Plunker +
+ + +
+ 
{% raw %} <fa-app>
  <fa-modifier>
    <fa-surface>This will be shown on screen.</fa-surface>
  </fa-modifier>
  <div>This will not appear on screen because it is not inside an fa-surface.</div>
</fa-app>{% endraw %}
+
+ +
+ 
{% raw %}fa-app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}{% endraw %}
+
+ +
+ 
{% raw %}angular.module('faAppExampleApp', ['famous.angular']);{% endraw %}
+
+ + + +
+
+ + +

Common Qustions

Multiple fa-app's

Nesting an fa-app within another fa-app is possible, and the use case of this approach would be for css content overflow.

-

In the example below, there is an fa-surface with an fa-app nested inside. Normally, an fa-surface should not nest another Famous element within it because it is a leaf node that has the purpose of being a container for html content. The exception is nesting an fa-app within an fa-surface, which creates another Famous context, in which Famous elements can be nested inside.

-
<fa-app style="width: 500px; height: 500px;">
-  <fa-surface>
-    <fa-app style="width: 200px; height: 200px;">
-      <fa-image-surface 
-         fa-image-url="https://famo.us/assets/images/famous_logo_white.svg" 
-         fa-size="[400, 400]">
-      </fa-image-surface>
-    </fa-app>
-  </fa-surface>
-</fa-app>
-

The outer fa-app is sized 500x500, and it contains all of the content. The use case of this fa-app within another fa-app is to clip content using the css overflow:hidden property. The fa-image-surface links to a 400x400 sized image of the Famous logo. Its parent is the nested fa-app, whose size is only 200x200.

+

In the example below, there is an fa-surface with an fa-app nested inside. Normally, an fa-surface should not nest another Famous element within it because it is a leaf node that has the purpose of being a container for html content. The exception is nesting an fa-app within an fa-surface, which creates another Famous context, in which Famous elements can be nested inside.

+

+ +{% assign lvl = page.url | append:'X' | split:'/' | size %} +{% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %} + +

+ +   + Edit in Plunker +
+ + +
+ 
{% raw %}<fa-app style="width: 500px; height: 500px;">
  <fa-surface>
    <fa-app style="width: 200px; height: 200px; overflow: hidden;">
      <fa-image-surface 
         fa-image-url="https://famo.us/assets/images/famous_logo_white.svg" 
         fa-size="[400, 400]">
      </fa-image-surface>
    </fa-app>
  </fa-surface>
</fa-app>{% endraw %}
+
+ +
+ 
{% raw %}fa-app {
  background-color: #000;  
}{% endraw %}
+
+ +
+ 
{% raw %}angular.module('faAppExampleAppA', ['famous.angular']);{% endraw %}
+
+ + + +
+
+ + + +The outer fa-app is sized 500x500, and it contains all of the content. The use case of this fa-app within another fa-app is to clip content using the css overflow:hidden property. The fa-image-surface links to a 400x400 sized image of the Famous logo. Its parent is the nested fa-app, whose size is only 200x200.

The larger image content (400x400) will overflow the boundaries of its parent, the the nested fa-app (200x200). Because fa-app has a css overflow:hidden property, it will clip the content of any of its children that is outside the 200x200 region. Any part of the 400x400 image that reaches outside of these boundaries are ignored. This may be useful for complex animations.

Take note: declaring multiple fa-apps within a page is permitted, but each new one incurs a penalty for performance. fa-app is similar to a Famo.us ContainerSurface, in that it creates an additional Context that the Famo.us Engine must manage.

Fa-app must be declared with a height & width

diff --git a/docs/unstable/directive/faFlipper/index.md b/docs/unstable/directive/faFlipper/index.md index ef8ee469..ad612faa 100644 --- a/docs/unstable/directive/faFlipper/index.md +++ b/docs/unstable/directive/faFlipper/index.md @@ -38,6 +38,11 @@ constructor. See [https://famo.us/docs/views/Flipper] +

Dependencies

+ + @@ -59,13 +64,65 @@ constructor. See [https://famo.us/docs/views/Flipper]

Example

A Famous Flipper has a .flip() method that toggles a rotation between front and back sides. In the example below, when an fa-surface is clicked, it calls the function flipIt.

This function attempts a DOM lookup for an isolate of an fa-flipper element, and calls the .flip() function of fa-flipper.

-
<fa-flipper>
-   <fa-surface fa-background-color="'yellow'" fa-click="flipIt()"></fa-surface>
-   <fa-surface fa-background-color="'red'" fa-click="flipIt()"></fa-surface>
-</fa-flipper>
-
$scope.flipIt = function() {
-   $famous.find('fa-flipper')[0].flip();
-};
+

+ +{% assign lvl = page.url | append:'X' | split:'/' | size %} +{% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %} + +

+ +   + Edit in Plunker +
+ + +
+ 
{% raw %}<fa-app ng-controller="FlipperCtrl">
  <fa-flipper>
    <fa-modifier fa-size="[200, 200]">
      <fa-surface fa-background-color="'yellow'" fa-click="flipIt()">Click me to see me flip!</fa-surface>
    </fa-modifier>  
    <fa-modifier fa-size="[200, 200]">
      <fa-surface fa-background-color="'red'" fa-click="flipIt()">Flip me again!</fa-surface>
    </fa-modifier>  
  </fa-flipper>
</fa-app>{% endraw %}
+
+ +
+ 
{% raw %}fa-app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
div {
  cursor: pointer;
  padding: 8px 8px;
}{% endraw %}
+
+ +
+ 
{% raw %}angular.module('faFlipperExampleApp', ['famous.angular'])
  .controller('FlipperCtrl', ['$scope', '$famous', function($scope, $famous) {
    $scope.flipIt = function() {
       $famous.find('fa-flipper')[0].flip();
    };
}]);{% endraw %}
+
+ + + +
+
+ + +

diff --git a/docs/unstable/directive/faGridLayout/index.md b/docs/unstable/directive/faGridLayout/index.md index 51b930d1..21988281 100644 --- a/docs/unstable/directive/faGridLayout/index.md +++ b/docs/unstable/directive/faGridLayout/index.md @@ -57,22 +57,126 @@ constructor. See [https://famo.us/docs/views/GridLayout]

Example

A Famous Grid Layout divides a context into evenly-sized grid cells. Pass an option such as dimension by binding an object with the property to fa-options.

-

In the example below, fa-options references myGridLayoutOptions on the scope.

-
$scope.myGridLayoutOptions = {
-   dimensions: [2,2], // specifies number of columns and rows
-};
-

In the example below, fa-size is specified as [100, 100], so each fa-surface will have these dimensions.

-
<fa-grid-layout fa-options="myGridLayoutOptions">
-   <fa-modifier ng-repeat="grid in grids"
-                fa-size="[100, 100]">
-     <fa-surface fa-background-color="grid.bgColor"></fa-surface>
-   </fa-modifier>
-</fa-grid-layout>
-
$scope.grids = [{bgColor: "orange"}, {bgColor: "red"}, {bgColor: "green"}, {bgColor: "yellow"}];
+

In the example below, fa-options references myGridLayoutOptions on the scope. The dimensions property has a value of [2,2] which specifies the columns and rows. fa-size is specified as [100, 100] on the fa-modifier, so each fa-surface will have these dimensions.

+

+ +{% assign lvl = page.url | append:'X' | split:'/' | size %} +{% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %} + +

+ +   + Edit in Plunker +
+ + +
+ 
{% raw %}<fa-app ng-controller="GridCtrl">
<fa-grid-layout fa-options="myGridLayoutOptions">
   <fa-modifier ng-repeat="grid in grids"
                fa-size="[100, 100]">
     <fa-surface fa-background-color="grid.bgColor"></fa-surface>
   </fa-modifier>
</fa-grid-layout>
</fa-app>{% endraw %}
+
+ +
+ 
{% raw %}angular.module('faGridExampleApp', ['famous.angular'])
  .controller('GridCtrl', ['$scope', function($scope) {

    $scope.myGridLayoutOptions = {
       dimensions: [2,2], // specifies number of columns and rows
    };

    $scope.grids = [{bgColor: "orange"}, {bgColor: "red"}, {bgColor: "green"}, {bgColor: "yellow"}];

}]);{% endraw %}
+
+ +
+ 
{% raw %}fa-app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}{% endraw %}
+
+ + + +
+
+ + +

If fa-size is not specified, as in this example below, the fa-surface's will collectively fill the height and width of its parent modifier/context.

-
<fa-grid-layout fa-options="myGridLayoutOptions">
-   <fa-surface ng-repeat="grid in grids" fa-background-color="grid.bgColor"></fa-surface>
-</fa-grid-layout>
+

+ +{% assign lvl = page.url | append:'X' | split:'/' | size %} +{% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %} + +

+ +   + Edit in Plunker +
+ + +
+ 
{% raw %}<fa-app ng-controller="GridCtrlA">
  <fa-grid-layout fa-options="myGridLayoutOptions">
     <fa-surface ng-repeat="grid in grids" fa-background-color="grid.bgColor"></fa-surface>
  </fa-grid-layout>
</fa-app>{% endraw %}
+
+ +
+ 
{% raw %}angular.module('faGridExampleAppA', ['famous.angular'])
  .controller('GridCtrlA', ['$scope', function($scope) {

    $scope.myGridLayoutOptions = {
       dimensions: [2,2], // specifies number of columns and rows
    };

    $scope.grids = [{bgColor: "orange"}, {bgColor: "red"}, {bgColor: "green"}, {bgColor: "yellow"}];

}]);{% endraw %}
+
+ +
+ 
{% raw %}fa-app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}{% endraw %}
+
+ + + +
+
+ + +

diff --git a/docs/unstable/directive/faHeaderFooterLayout/index.md b/docs/unstable/directive/faHeaderFooterLayout/index.md index 7abc0775..3c621e9b 100644 --- a/docs/unstable/directive/faHeaderFooterLayout/index.md +++ b/docs/unstable/directive/faHeaderFooterLayout/index.md @@ -60,42 +60,187 @@ a Header, Content, and Footer based on the order of its child elements.

Example

fa-header-footer is a View that arranges three renderables into a header and footer area with defined sizes, and a content area that fills up the remaining space.

To use it, declare it in the html and nest 3 renderables inside. In the example below, there are three direct children elements: a Modifier (with an fa-surface nested inside), a Surface, and another Modifier (with an fa-surface nested inside). The order that they are declared in the html determines whether each corresponds to a header, content, and footer.

Since the header and footer Modifiers have fixed heights of [undefined, 75] (fill the parent container horizontally, 75 pixels vertically), the content will fill the remaining height of the parent modifier or context.

-
<fa-header-footer-layout fa-options="{headerSize: 75, footerSize: 75}">
-  <!-- header -->
-    <fa-surface fa-background-color="'red'">Header</fa-surface>
+
 
+
+{% assign lvl = page.url | append:'X' | split:'/' | size %}
+{% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %}
+
+

+  
+     
+    Edit in Plunker
+  

+
+   
+    

+      
{% raw %}<fa-app>

  <fa-header-footer-layout fa-options="{headerSize: 75, footerSize: 75}">

    <!-- header -->
    <fa-surface fa-background-color="'red'">Header</fa-surface>
  
    <!-- content -->
    <fa-surface fa-background-color="'blue'">Content</fa-surface>
  
    <!-- footer -->
    <fa-surface fa-background-color="'green'">Footer</fa-surface>

  </fa-header-footer-layout>

</fa-app>{% endraw %}

+    

+  
+    

+      
{% raw %}angular.module('faHeaderFooterExampleApp', ['famous.angular']){% endraw %}

+    

+  
+    

+      
{% raw %}fa-app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}{% endraw %}

+    

+  
+
+    
+  

+

 
-  <!-- content -->
-  <fa-surface fa-background-color="'blue'">Content</fa-surface>
 
-  <!-- footer -->
-    <fa-surface fa-background-color="'green'">Footer</fa-surface>
-</fa-header-footer-layout>
+

Famo.us' HeaderFooterLayout defaults to a vertical orientation. -Specify a direction in the options to obtains a horizontal orientation.

-
<fa-header-footer-layout fa-options="{direction: 0, headerSize: 75, footerSize: 75}">
-  <!-- header -->
-    <fa-surface fa-background-color="'red'">Header</fa-surface>
+Specify a direction in the fa-options object to obtain a horizontal orientation.

+
 
+
+{% assign lvl = page.url | append:'X' | split:'/' | size %}
+{% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %}
+
+

+  
+     
+    Edit in Plunker
+  

+
+   
+    

+      
{% raw %}<fa-app>

  <fa-header-footer-layout fa-options="{direction: 0, headerSize: 75, footerSize: 75}">

    <!-- header -->
    <fa-surface fa-background-color="'red'">Header</fa-surface>
  
    <!-- content -->
    <fa-surface fa-background-color="'blue'">Content</fa-surface>
  
    <!-- footer -->
    <fa-surface fa-background-color="'green'">Footer</fa-surface>

  </fa-header-footer-layout>

</fa-app>{% endraw %}

+    

+  
+    

+      
{% raw %}angular.module('faHeaderFooterExampleAppA', ['famous.angular']){% endraw %}

+    

+  
+    

+      
{% raw %}fa-app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}{% endraw %}

+    

+  
 
-  <!-- content -->
-  <fa-surface fa-background-color="'blue'">Content</fa-surface>
+    
+  

+

 
-  <!-- footer -->
-    <fa-surface fa-background-color="'green'">Footer</fa-surface>
-</fa-header-footer-layout>
+ +

Fa-header-footer works with ng-repeat'ed renderables:

-
<fa-header-footer-layout>
-  <fa-modifier ng-repeat="view in views" fa-size="view.size" >
-    <fa-surface fa-background-color="view.bgColor">
-      {{view.text}}
-    </fa-surface>
-  </fa-modifier>
-</fa-header-footer-layout>
-
$scope.views = [
-{bgColor: "red", text: "header", size: [undefined, 100]},
-{bgColor: "green", text: "content", size: [undefined, undefined]},
-{bgColor: "blue", text: "footer", size: [undefined, 100]}
-];
+

+ +{% assign lvl = page.url | append:'X' | split:'/' | size %} +{% capture relative %}{% for i in (3..lvl) %}../{% endfor %}{% endcapture %} + +

+ +   + Edit in Plunker +
+ + +
+ 
{% raw %}<fa-app ng-controller="HeaderFooterCtrlB">
  <fa-header-footer-layout>
    <fa-modifier ng-repeat="view in views" fa-size="view.size">
      <fa-surface fa-background-color="view.bgColor">
        {{view.text}}
      </fa-surface>
    </fa-modifier>
  </fa-header-footer-layout>
</fa-app>{% endraw %}
+
+ +
+ 
{% raw %}angular.module('faHeaderFooterExampleAppB', ['famous.angular'])
  .controller('HeaderFooterCtrlB', ['$scope', function($scope) {
    $scope.views = [
      {bgColor: "red", text: "header", size: [undefined, 100]},
      {bgColor: "green", text: "content", size: [undefined, undefined]},
      {bgColor: "blue", text: "footer", size: [undefined, 100]}
    ];
}]);{% endraw %}
+
+ +
+ 
{% raw %}fa-app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}{% endraw %}
+
+ + + +
+
+ + +

In the example above, 3 renderables are generated through an ng-repeat. The header and footer Modifiers generated by the ng-repeat have defined sizes of [undefined, 100] (they will fill their parent container horizontally, and be 100 pixels vertically). The content has a size of [undefined, undefined], and it will fill the remaining heght and width of its container.

Note: