Skip to content

Commit

Permalink
docs: add live examples for app flipper grid header image index modifier
Browse files Browse the repository at this point in the history
  • Loading branch information
thuongvu committed Sep 12, 2014
1 parent 58c3a4b commit 5783027
Show file tree
Hide file tree
Showing 35 changed files with 1,799 additions and 581 deletions.
638 changes: 449 additions & 189 deletions dist/famous-angular.js

Large diffs are not rendered by default.

6 changes: 4 additions & 2 deletions docs-generation/docs.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
]
}
}
}]
Expand Down
138 changes: 120 additions & 18 deletions docs/unstable/directive/faApp/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -59,27 +59,129 @@ it is inside of a <a href="../../../api/directive/faSurface/">fa-surface</a> dir

<h2 id="example">Example</h2><p><code>Fa-app</code> creates a Famous Context, the root of the Render Tree. Renderables (such as <code>fa-modifier</code>&#39;s &amp; <code>fa-surface</code>&#39;s) nested within an <code>fa-app</code> are added to this root context. </p>
<p>Declaring <code>fa-app</code> appends a div with the class of <code>&quot;famous-angular-container&quot;</code> to the DOM. It then instantiates a Context via Famous&#39; Engine <code>.createContext()</code> method, passing in a reference to the <code>famous-angular-container</code> div, resulting in a Famous context that renderables can be added to connected to Angular. <code>Fa-app</code> can be declared as an element or as an attribute within another element. </p>
<pre><code class="lang-html">&lt;fa-app style=&quot;width: 320px; height: 568px;&quot;&gt;
&lt;fa-modifier&gt;
&lt;fa-surface&gt;This will be shown on screen.&lt;/fa-surface&gt;
&lt;/fa-modifier&gt;
&lt;div&gt;This will not appear on screen because it is not inside an fa-surface.&lt;/div&gt;
&lt;/fa-app&gt;</code></pre>
<p>

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

<div>
<a ng-click="openPlunkr('{{ relative }}examples/example-example')" class="btn pull-right">
<i class="glyphicon glyphicon-edit">&nbsp;</i>
Edit in Plunker</a>
<div class="runnable-example" path="examples/example-example"
module="faAppExampleApp"
>

<div ng-non-bindable class="runnable-example-file"
name="index.html"
language="html"
type="html"
>
<pre><code>{% raw %} &lt;fa-app&gt;&#10; &lt;fa-modifier&gt;&#10; &lt;fa-surface&gt;This will be shown on screen.&lt;/fa-surface&gt;&#10; &lt;/fa-modifier&gt;&#10; &lt;div&gt;This will not appear on screen because it is not inside an fa-surface.&lt;/div&gt;&#10;&lt;/fa-app&gt;{% endraw %}</code></pre>
</div>

<div ng-non-bindable class="runnable-example-file"
name="style.css"
language="css"
type="css"
>
<pre><code>{% raw %}fa-app {&#10; position: fixed;&#10; top: 0;&#10; right: 0;&#10; bottom: 0;&#10; left: 0;&#10;}{% endraw %}</code></pre>
</div>

<div ng-non-bindable class="runnable-example-file"
name="script.js"
language="js"
type="js"
>
<pre><code>{% raw %}angular.module(&#39;faAppExampleApp&#39;, [&#39;famous.angular&#39;]);{% endraw %}</code></pre>
</div>


<iframe class="runnable-example-frame" src="{{ relative }}examples/example-example/index.html" name="example-example"></iframe>
</div>
</div>


</p>
<h2 id="common-qustions">Common Qustions</h2>
<h3 id="multiple-fa-app-s">Multiple fa-app&#39;s</h3>
<p>Nesting an <code>fa-app</code> within another <code>fa-app</code> is possible, and the use case of this approach would be for css content overflow.</p>
<p>In the example below, there is an <code>fa-surface</code> with an <code>fa-app</code> nested inside. Normally, an <code>fa-surface</code> 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 <code>fa-app</code> within an <code>fa-surface</code>, which creates another Famous context, in which Famous elements can be nested inside. </p>
<pre><code class="lang-html">&lt;fa-app style=&quot;width: 500px; height: 500px;&quot;&gt;
&lt;fa-surface&gt;
&lt;fa-app style=&quot;width: 200px; height: 200px;&quot;&gt;
&lt;fa-image-surface
fa-image-url=&quot;https://famo.us/assets/images/famous_logo_white.svg&quot;
fa-size=&quot;[400, 400]&quot;&gt;
&lt;/fa-image-surface&gt;
&lt;/fa-app&gt;
&lt;/fa-surface&gt;
&lt;/fa-app&gt;</code></pre>
<p>The outer <code>fa-app</code> is sized 500x500, and it contains all of the content. The use case of this <code>fa-app</code> within another <code>fa-app</code> is to clip content using the css overflow:hidden property. The <code>fa-image-surface</code> links to a 400x400 sized image of the Famous logo. Its parent is the nested <code>fa-app</code>, whose size is only 200x200. </p>
<p>In the example below, there is an <code>fa-surface</code> with an <code>fa-app</code> nested inside. Normally, an <code>fa-surface</code> 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 <code>fa-app</code> within an <code>fa-surface</code>, which creates another Famous context, in which Famous elements can be nested inside.</p>
<p>

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

<div>
<a ng-click="openPlunkr('{{ relative }}examples/example-example1')" class="btn pull-right">
<i class="glyphicon glyphicon-edit">&nbsp;</i>
Edit in Plunker</a>
<div class="runnable-example" path="examples/example-example1"
module="faAppExampleAppA"
>

<div ng-non-bindable class="runnable-example-file"
name="index.html"
language="html"
type="html"
>
<pre><code>{% raw %}&lt;fa-app style=&quot;width: 500px; height: 500px;&quot;&gt;&#10; &lt;fa-surface&gt;&#10; &lt;fa-app style=&quot;width: 200px; height: 200px; overflow: hidden;&quot;&gt;&#10; &lt;fa-image-surface &#10; fa-image-url=&quot;https://famo.us/assets/images/famous_logo_white.svg&quot; &#10; fa-size=&quot;[400, 400]&quot;&gt;&#10; &lt;/fa-image-surface&gt;&#10; &lt;/fa-app&gt;&#10; &lt;/fa-surface&gt;&#10;&lt;/fa-app&gt;{% endraw %}</code></pre>
</div>

<div ng-non-bindable class="runnable-example-file"
name="style.css"
language="css"
type="css"
>
<pre><code>{% raw %}fa-app {&#10; background-color: #000; &#10;}{% endraw %}</code></pre>
</div>

<div ng-non-bindable class="runnable-example-file"
name="script.js"
language="js"
type="js"
>
<pre><code>{% raw %}angular.module(&#39;faAppExampleAppA&#39;, [&#39;famous.angular&#39;]);{% endraw %}</code></pre>
</div>


<iframe class="runnable-example-frame" src="{{ relative }}examples/example-example1/index.html" name="example-example1"></iframe>
</div>
</div>



The outer <code>fa-app</code> is sized 500x500, and it contains all of the content. The use case of this <code>fa-app</code> within another <code>fa-app</code> is to clip content using the css overflow:hidden property. The <code>fa-image-surface</code> links to a 400x400 sized image of the Famous logo. Its parent is the nested <code>fa-app</code>, whose size is only 200x200. </p>
<p>The larger image content (400x400) will overflow the boundaries of its parent, the the nested <code>fa-app</code> (200x200). Because <code>fa-app</code> 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. </p>
<p>Take note: declaring multiple <code>fa-app</code>s within a page is permitted, but each new one incurs a penalty for performance. <code>fa-app</code> is similar to a Famo.us ContainerSurface, in that it creates an additional Context that the Famo.us Engine must manage. </p>
<h3 id="fa-app-must-be-declared-with-a-height-width">Fa-app must be declared with a height &amp; width</h3>
Expand Down
71 changes: 64 additions & 7 deletions docs/unstable/directive/faFlipper/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,11 @@ constructor. See [https://famo.us/docs/views/Flipper]



<h2 id="dependencies">Dependencies</h2>
<ul>
<li><a href="famous">TODO:famous</a></li>
</ul>




Expand All @@ -59,13 +64,65 @@ constructor. See [https://famo.us/docs/views/Flipper]
<h2 id="example">Example</h2><p>A Famous Flipper has a <code>.flip()</code> method that toggles a rotation between front and back sides.
In the example below, when an <code>fa-surface</code> is clicked, it calls the function <code>flipIt</code>.</p>
<p>This function attempts a DOM lookup for an isolate of an <code>fa-flipper</code> element, and calls the <code>.flip()</code> function of <code>fa-flipper</code>.</p>
<pre><code class="lang-html">&lt;fa-flipper&gt;
&lt;fa-surface fa-background-color=&quot;&#39;yellow&#39;&quot; fa-click=&quot;flipIt()&quot;&gt;&lt;/fa-surface&gt;
&lt;fa-surface fa-background-color=&quot;&#39;red&#39;&quot; fa-click=&quot;flipIt()&quot;&gt;&lt;/fa-surface&gt;
&lt;/fa-flipper&gt;</code></pre>
<pre><code class="lang-javascript">$scope.flipIt = function() {
$famous.find(&#39;fa-flipper&#39;)[0].flip();
};</code></pre>
<p>

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

<div>
<a ng-click="openPlunkr('{{ relative }}examples/example-example2')" class="btn pull-right">
<i class="glyphicon glyphicon-edit">&nbsp;</i>
Edit in Plunker</a>
<div class="runnable-example" path="examples/example-example2"
module="faFlipperExampleApp"
>

<div ng-non-bindable class="runnable-example-file"
name="index.html"
language="html"
type="html"
>
<pre><code>{% raw %}&lt;fa-app ng-controller=&quot;FlipperCtrl&quot;&gt;&#10; &lt;fa-flipper&gt;&#10; &lt;fa-modifier fa-size=&quot;[200, 200]&quot;&gt;&#10; &lt;fa-surface fa-background-color=&quot;&#39;yellow&#39;&quot; fa-click=&quot;flipIt()&quot;&gt;Click me to see me flip!&lt;/fa-surface&gt;&#10; &lt;/fa-modifier&gt; &#10; &lt;fa-modifier fa-size=&quot;[200, 200]&quot;&gt;&#10; &lt;fa-surface fa-background-color=&quot;&#39;red&#39;&quot; fa-click=&quot;flipIt()&quot;&gt;Flip me again!&lt;/fa-surface&gt;&#10; &lt;/fa-modifier&gt; &#10; &lt;/fa-flipper&gt;&#10;&lt;/fa-app&gt;{% endraw %}</code></pre>
</div>

<div ng-non-bindable class="runnable-example-file"
name="style.css"
language="css"
type="css"
>
<pre><code>{% raw %}fa-app {&#10; position: fixed;&#10; top: 0;&#10; right: 0;&#10; bottom: 0;&#10; left: 0;&#10;}&#10;div {&#10; cursor: pointer;&#10; padding: 8px 8px;&#10;}{% endraw %}</code></pre>
</div>

<div ng-non-bindable class="runnable-example-file"
name="script.js"
language="js"
type="js"
>
<pre><code>{% raw %}angular.module(&#39;faFlipperExampleApp&#39;, [&#39;famous.angular&#39;])&#10; .controller(&#39;FlipperCtrl&#39;, [&#39;$scope&#39;, &#39;$famous&#39;, function($scope, $famous) {&#10; $scope.flipIt = function() {&#10; $famous.find(&#39;fa-flipper&#39;)[0].flip();&#10; };&#10;}]);{% endraw %}</code></pre>
</div>


<iframe class="runnable-example-frame" src="{{ relative }}examples/example-example2/index.html" name="example-example2"></iframe>
</div>
</div>


</p>



134 changes: 119 additions & 15 deletions docs/unstable/directive/faGridLayout/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,22 +57,126 @@ constructor. See [https://famo.us/docs/views/GridLayout]


<h2 id="example">Example</h2><p>A Famous Grid Layout divides a context into evenly-sized grid cells. Pass an option such as <code>dimension</code> by binding an object with the property to <code>fa-options</code>.</p>
<p>In the example below, <code>fa-options</code> references <code>myGridLayoutOptions</code> on the scope.</p>
<pre><code class="lang-javascript">$scope.myGridLayoutOptions = {
dimensions: [2,2], // specifies number of columns and rows
};</code></pre>
<p>In the example below, <code>fa-size</code> is specified as <code>[100, 100]</code>, so each <code>fa-surface</code> will have these dimensions.</p>
<pre><code class="lang-html">&lt;fa-grid-layout fa-options=&quot;myGridLayoutOptions&quot;&gt;
&lt;fa-modifier ng-repeat=&quot;grid in grids&quot;
fa-size=&quot;[100, 100]&quot;&gt;
&lt;fa-surface fa-background-color=&quot;grid.bgColor&quot;&gt;&lt;/fa-surface&gt;
&lt;/fa-modifier&gt;
&lt;/fa-grid-layout&gt;</code></pre>
<pre><code class="lang-javascript">$scope.grids = [{bgColor: &quot;orange&quot;}, {bgColor: &quot;red&quot;}, {bgColor: &quot;green&quot;}, {bgColor: &quot;yellow&quot;}];</code></pre>
<p>In the example below, <code>fa-options</code> references <code>myGridLayoutOptions</code> on the scope. The dimensions property has a value of <code>[2,2]</code> which specifies the columns and rows. <code>fa-size</code> is specified as <code>[100, 100]</code> on the fa-modifier, so each <code>fa-surface</code> will have these dimensions.</p>
<p>

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

<div>
<a ng-click="openPlunkr('{{ relative }}examples/example-example3')" class="btn pull-right">
<i class="glyphicon glyphicon-edit">&nbsp;</i>
Edit in Plunker</a>
<div class="runnable-example" path="examples/example-example3"
module="faGridExampleApp"
>

<div ng-non-bindable class="runnable-example-file"
name="index.html"
language="html"
type="html"
>
<pre><code>{% raw %}&lt;fa-app ng-controller=&quot;GridCtrl&quot;&gt;&#10;&lt;fa-grid-layout fa-options=&quot;myGridLayoutOptions&quot;&gt;&#10; &lt;fa-modifier ng-repeat=&quot;grid in grids&quot;&#10; fa-size=&quot;[100, 100]&quot;&gt;&#10; &lt;fa-surface fa-background-color=&quot;grid.bgColor&quot;&gt;&lt;/fa-surface&gt;&#10; &lt;/fa-modifier&gt;&#10;&lt;/fa-grid-layout&gt;&#10;&lt;/fa-app&gt;{% endraw %}</code></pre>
</div>

<div ng-non-bindable class="runnable-example-file"
name="script.js"
language="js"
type="js"
>
<pre><code>{% raw %}angular.module(&#39;faGridExampleApp&#39;, [&#39;famous.angular&#39;])&#10; .controller(&#39;GridCtrl&#39;, [&#39;$scope&#39;, function($scope) {&#10;&#10; $scope.myGridLayoutOptions = {&#10; dimensions: [2,2], // specifies number of columns and rows&#10; };&#10;&#10; $scope.grids = [{bgColor: &quot;orange&quot;}, {bgColor: &quot;red&quot;}, {bgColor: &quot;green&quot;}, {bgColor: &quot;yellow&quot;}];&#10;&#10;}]);{% endraw %}</code></pre>
</div>

<div ng-non-bindable class="runnable-example-file"
name="style.css"
language="css"
type="css"
>
<pre><code>{% raw %}fa-app {&#10; position: fixed;&#10; top: 0;&#10; right: 0;&#10; bottom: 0;&#10; left: 0;&#10;}{% endraw %}</code></pre>
</div>


<iframe class="runnable-example-frame" src="{{ relative }}examples/example-example3/index.html" name="example-example3"></iframe>
</div>
</div>


</p>
<p>If <code>fa-size</code> is not specified, as in this example below, the fa-surface&#39;s will collectively fill the height and width of its parent modifier/context.</p>
<pre><code class="lang-html">&lt;fa-grid-layout fa-options=&quot;myGridLayoutOptions&quot;&gt;
&lt;fa-surface ng-repeat=&quot;grid in grids&quot; fa-background-color=&quot;grid.bgColor&quot;&gt;&lt;/fa-surface&gt;
&lt;/fa-grid-layout&gt;</code></pre>
<p>

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

<div>
<a ng-click="openPlunkr('{{ relative }}examples/example-example4')" class="btn pull-right">
<i class="glyphicon glyphicon-edit">&nbsp;</i>
Edit in Plunker</a>
<div class="runnable-example" path="examples/example-example4"
module="faGridExampleAppA"
>

<div ng-non-bindable class="runnable-example-file"
name="index.html"
language="html"
type="html"
>
<pre><code>{% raw %}&lt;fa-app ng-controller=&quot;GridCtrlA&quot;&gt;&#10; &lt;fa-grid-layout fa-options=&quot;myGridLayoutOptions&quot;&gt;&#10; &lt;fa-surface ng-repeat=&quot;grid in grids&quot; fa-background-color=&quot;grid.bgColor&quot;&gt;&lt;/fa-surface&gt;&#10; &lt;/fa-grid-layout&gt;&#10;&lt;/fa-app&gt;{% endraw %}</code></pre>
</div>

<div ng-non-bindable class="runnable-example-file"
name="script.js"
language="js"
type="js"
>
<pre><code>{% raw %}angular.module(&#39;faGridExampleAppA&#39;, [&#39;famous.angular&#39;])&#10; .controller(&#39;GridCtrlA&#39;, [&#39;$scope&#39;, function($scope) {&#10;&#10; $scope.myGridLayoutOptions = {&#10; dimensions: [2,2], // specifies number of columns and rows&#10; };&#10;&#10; $scope.grids = [{bgColor: &quot;orange&quot;}, {bgColor: &quot;red&quot;}, {bgColor: &quot;green&quot;}, {bgColor: &quot;yellow&quot;}];&#10;&#10;}]);{% endraw %}</code></pre>
</div>

<div ng-non-bindable class="runnable-example-file"
name="style.css"
language="css"
type="css"
>
<pre><code>{% raw %}fa-app {&#10; position: fixed;&#10; top: 0;&#10; right: 0;&#10; bottom: 0;&#10; left: 0;&#10;}{% endraw %}</code></pre>
</div>


<iframe class="runnable-example-frame" src="{{ relative }}examples/example-example4/index.html" name="example-example4"></iframe>
</div>
</div>


</p>



Loading

0 comments on commit 5783027

Please sign in to comment.