Skip to content

Commit

Permalink
docs: add live examples for surface, tap, touchend, touchmove, touchs…
Browse files Browse the repository at this point in the history 
…tart
  • Loading branch information
@thuongvu
thuongvu committed Sep 14, 2014
1 parent 66b8d3e commit d27595e
Show file tree
Hide file tree
Showing 12 changed files with 1,092 additions and 337 deletions.
473 changes: 349 additions & 124 deletions dist/famous-angular.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/famous-angular.min.js
View file

Large diffs are not rendered by default.

22 changes: 11 additions & 11 deletions docs/unstable/directive/faSurface/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ ngIncludes or custom (vanilla Angular) directives.
Edit in Plunker</a>
<div class="runnable-example" path="examples/example-example46"
module="faScrollViewExampleApp"
module="faSurfaceExampleApp"
>
Expand Down Expand Up @@ -109,7 +109,7 @@ ngIncludes or custom (vanilla Angular) directives.
type="js"
>
<pre><code>{% raw %}angular.module(&#39;faScrollViewExampleApp&#39;, [&#39;famous.angular&#39;]);{% endraw %}</code></pre>
<pre><code>{% raw %}angular.module(&#39;faSurfaceExampleApp&#39;, [&#39;famous.angular&#39;]);{% endraw %}</code></pre>
</div>

<div ng-non-bindable class="runnable-example-file"
Expand Down Expand Up @@ -162,7 +162,7 @@ ngIncludes or custom (vanilla Angular) directives.
Edit in Plunker</a>
<div class="runnable-example" path="examples/example-example47"
module="faScrollViewExampleApp"
module="faSurfaceExampleApp"
>
Expand All @@ -188,7 +188,7 @@ ngIncludes or custom (vanilla Angular) directives.
type="js"
>
<pre><code>{% raw %}angular.module(&#39;faScrollViewExampleApp&#39;, [&#39;famous.angular&#39;]);{% endraw %}</code></pre>
<pre><code>{% raw %}angular.module(&#39;faSurfaceExampleApp&#39;, [&#39;famous.angular&#39;]);{% endraw %}</code></pre>
</div>

<div ng-non-bindable class="runnable-example-file"
Expand Down Expand Up @@ -238,7 +238,7 @@ For example, this will not work:</p>
Edit in Plunker</a>
<div class="runnable-example" path="examples/example-example48"
module="faScrollViewExampleApp"
module="faSurfaceExampleApp"
>
Expand All @@ -252,7 +252,7 @@ For example, this will not work:</p>
type="html"
>
<pre><code>{% raw %}&lt;fa-app ng-controller=&quot;ScrollCtrl&quot;&gt;&#10; &lt;fa-modifier fa-size=&quot;sizeForBoxFunction&quot;&gt;&#10; &lt;fa-surface fa-background-color=&quot;&#39;red&#39;&quot;&gt;&lt;/fa-surface&gt;&#10; &lt;/fa-modifier&gt;&#10;&lt;/fa-app&gt;&#10;&#10;&lt;script&gt;&#10; angular.module(&#39;faScrollViewExampleApp&#39;, [&#39;famous.angular&#39;])&#10; .controller(&#39;ScrollCtrl&#39;, [&#39;$scope&#39;, &#39;$famous&#39;, function($scope, $famous) {&#10; &#10; $scope.sizeForBoxFunction = function() {&#10; return [75, 75];&#10; };&#10;&#10; }]);&#10;&lt;/script&gt;{% endraw %}</code></pre>
<pre><code>{% raw %}&lt;fa-app ng-controller=&quot;SurfaceCtrl&quot;&gt;&#10; &lt;fa-modifier fa-size=&quot;sizeForBoxFunction&quot;&gt;&#10; &lt;fa-surface fa-background-color=&quot;&#39;red&#39;&quot;&gt;&lt;/fa-surface&gt;&#10; &lt;/fa-modifier&gt;&#10;&lt;/fa-app&gt;&#10;&#10;&lt;script&gt;&#10; angular.module(&#39;faSurfaceExampleApp&#39;, [&#39;famous.angular&#39;])&#10; .controller(&#39;SurfaceCtrl&#39;, [&#39;$scope&#39;, &#39;$famous&#39;, function($scope, $famous) {&#10; &#10; $scope.sizeForBoxFunction = function() {&#10; return [75, 75];&#10; };&#10;&#10; }]);&#10;&lt;/script&gt;{% endraw %}</code></pre>
</div>

<div ng-non-bindable class="runnable-example-file"
Expand Down Expand Up @@ -288,7 +288,7 @@ Take note that they accept a string in the html view. If you do not enclose the
Edit in Plunker</a>
<div class="runnable-example" path="examples/example-example49"
module="faScrollViewExampleApp"
module="faSurfaceExampleApp"
>
Expand All @@ -314,7 +314,7 @@ Take note that they accept a string in the html view. If you do not enclose the
type="js"
>
<pre><code>{% raw %}angular.module(&#39;faScrollViewExampleApp&#39;, [&#39;famous.angular&#39;]);{% endraw %}</code></pre>
<pre><code>{% raw %}angular.module(&#39;faSurfaceExampleApp&#39;, [&#39;famous.angular&#39;]);{% endraw %}</code></pre>
</div>

<div ng-non-bindable class="runnable-example-file"
Expand Down Expand Up @@ -349,7 +349,7 @@ Take note that they accept a string in the html view. If you do not enclose the
Edit in Plunker</a>
<div class="runnable-example" path="examples/example-example50"
module="faScrollViewExampleApp"
module="faSurfaceExampleApp"
>
Expand All @@ -363,7 +363,7 @@ Take note that they accept a string in the html view. If you do not enclose the
type="html"
>
<pre><code>{% raw %}&lt;fa-app ng-controller=&quot;ScrollCtrl&quot;&gt;&#10; &lt;fa-modifier fa-size=&quot;[300, 50]&quot;&gt;&#10; &lt;fa-surface ng-class=&quot;{strike: applyStrike}&quot;&gt;&#10; Check box to apply strikethrough!&#10; &lt;input type=&quot;checkbox&quot; ng-model=&quot;applyStrike&quot;&gt;&lt;/input&gt;&#10; &lt;/fa-surface&gt;&#10; &lt;/fa-modifier&gt;&#10;&lt;/fa-app&gt;{% endraw %}</code></pre>
<pre><code>{% raw %}&lt;fa-app ng-controller=&quot;SurfaceCtrl&quot;&gt;&#10; &lt;fa-modifier fa-size=&quot;[300, 50]&quot;&gt;&#10; &lt;fa-surface ng-class=&quot;{strike: applyStrike}&quot;&gt;&#10; Check box to apply strikethrough!&#10; &lt;input type=&quot;checkbox&quot; ng-model=&quot;applyStrike&quot;&gt;&lt;/input&gt;&#10; &lt;/fa-surface&gt;&#10; &lt;/fa-modifier&gt;&#10;&lt;/fa-app&gt;{% endraw %}</code></pre>
</div>

<div ng-non-bindable class="runnable-example-file"
Expand All @@ -387,7 +387,7 @@ Take note that they accept a string in the html view. If you do not enclose the
type="js"
>
<pre><code>{% raw %} angular.module(&#39;faScrollViewExampleApp&#39;, [&#39;famous.angular&#39;])&#10; .controller(&#39;ScrollCtrl&#39;, [&#39;$scope&#39;, &#39;$famous&#39;, function($scope, $famous) {&#10;}]);{% endraw %}</code></pre>
<pre><code>{% raw %}angular.module(&#39;faSurfaceExampleApp&#39;, [&#39;famous.angular&#39;])&#10; .controller(&#39;SurfaceCtrl&#39;, [&#39;$scope&#39;, &#39;$famous&#39;, function($scope, $famous) {&#10;}]);{% endraw %}</code></pre>
</div>


Expand Down
108 changes: 100 additions & 8 deletions docs/unstable/directive/faTap/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,14 +87,106 @@ This directive allows you to specify custom behavior when an element is tapped.


<h2 id="example">Example</h2><p>Note: For testing purposes during development, enable mobile emulation: <a href="https://developer.chrome.com/devtools/docs/mobile-emulation">https://developer.chrome.com/devtools/docs/mobile-emulation</a></p>
<p><code>Fa-tap</code> checks if a touchmove event fires between a touchstart and touchend event. If the touchmove event fired, (the user &quot;dragged&quot; their finger), a <code>fa-tap</code> event will not fire. If the user did not &quot;drag&quot; their finger on touch, when releasing their finger, a touchend event will fire, and fa-tap will fire.</p>
<pre><code class="lang-html">&lt;fa-modifier fa-size=&quot;[100, 100]&quot;&gt;
&lt;fa-surface fa-tap=&quot;tapHandler($event)&quot; fa-background-color=&quot;&#39;red&#39;&quot;&gt;&lt;/fa-surface&gt;
&lt;/fa-modifier&gt;</code></pre>
<pre><code class="lang-javascript">$scope.tapHandler = function($event) {
console.log($event);
console.log(&quot;tap&quot;);
};</code></pre>
<p><code>Fa-tap</code> checks if a touchmove event fires between a touchstart and tap event. If the touchmove event fired, (the user &quot;dragged&quot; their finger), a <code>fa-tap</code> event will not fire. If the user did not &quot;drag&quot; their finger on touch, when releasing their finger, a tap event will fire, and fa-tap will fire.</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-example51')" class="btn pull-right">
<i class="glyphicon glyphicon-edit">&nbsp;</i>
Edit in Plunker</a>
<div class="runnable-example" path="examples/example-example51"
module="faTapExampleApp"
>

<div ng-non-bindable class="runnable-example-file"
name="index.html"
language="html"
type="html"
>
<pre><code>{% raw %}&lt;fa-app ng-controller=&quot;TapCtrl&quot;&gt;&#10; &lt;fa-modifier fa-size=&quot;[100, 100]&quot;&gt;&#10; &lt;fa-surface fa-tap=&quot;tapHandler($event)&quot;&#10; fa-background-color=&quot;&#39;red&#39;&quot;&gt;&#10; Tap count: {{tapCount}}&#10; &lt;/fa-surface&gt;&#10; &lt;/fa-modifier&gt;&#10;&lt;/fa-app&gt;&#10;&#10;&lt;script&gt;&#10; angular.module(&#39;faTapExampleApp&#39;, [&#39;famous.angular&#39;])&#10; .controller(&#39;TapCtrl&#39;, [&#39;$scope&#39;, &#39;$famous&#39;, function($scope, $famous) {&#10; &#10; $scope.tapCount = 0;&#10;&#10; $scope.tapHandler = function($event) {&#10; console.log($event);&#10; $scope.tapCount++;&#10; };&#10;&#10; }]);&#10;&lt;/script&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>


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


</p>
<h3 id="fa-tap-on-an-fa-view">Fa-tap on an fa-view</h3>
<p><code>Fa-tap</code> may be used on an <code>fa-view</code>. The function expression bound to <code>fa-tap</code> will be bound to the <code>fa-view</code>&#39;s internal <code>_eventInput</code>, the aggregation point of all events received by the <code>fa-view</code>. When it receives a <code>tap</code> event, it will call the function expression bound to <code>fa-tap</code>.</p>
<p>In the example below, the <code>fa-surface</code> pipes its Surface events to an instantied Famous Event Handler called <code>myEvents</code>.
<code>Fa-view</code> pipes from <code>myEvents</code>, receiving all events piped by the <code>fa-surface</code>.</p>
<p>When a tap event occurs on the <code>fa-surface</code>, it is piped to the <code>fa-view</code>.<br><code>fa-tap</code> defines a callback function in which to handle tap events, and when it receives a tap event, it calls <code>tap()</code>. </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-example52')" class="btn pull-right">
<i class="glyphicon glyphicon-edit">&nbsp;</i>
Edit in Plunker</a>
<div class="runnable-example" path="examples/example-example52"
module="faTapExampleApp"
>

<div ng-non-bindable class="runnable-example-file"
name="index.html"
language="html"
type="html"
>
<pre><code>{% raw %}&lt;fa-app ng-controller=&quot;TapCtrl&quot;&gt;&#10;&#10; &lt;!-- The fa-view receives the tap event from the fa-surface, and calls $scope.tap, which is bound to fa-tap on the fa-view. --&gt;&#10;&#10; &lt;fa-view fa-tap=&quot;tap($event)&quot; fa-pipe-from=&quot;myEvents&quot;&gt;&#10; &lt;fa-modifier fa-size=&quot;[100, 100]&quot;&gt;&#10; &lt;fa-surface fa-pipe-to=&quot;myEvents&quot;&#10; fa-background-color=&quot;&#39;orange&#39;&quot;&gt;&#10; Tap count: {{tapCount}}&#10; &lt;/fa-surface&gt;&#10; &lt;/fa-modifier&gt;&#10; &lt;/fa-view&gt;&#10;&lt;/fa-app&gt;&#10;&#10;&lt;script&gt;&#10; angular.module(&#39;faTapExampleApp&#39;, [&#39;famous.angular&#39;])&#10; .controller(&#39;TapCtrl&#39;, [&#39;$scope&#39;, &#39;$famous&#39;, function($scope, $famous) {&#10; &#10; var EventHandler = $famous[&#39;famous/core/EventHandler&#39;];&#10; $scope.myEvents = new EventHandler();&#10;&#10; $scope.tapCount = 0;&#10; &#10; $scope.tap = function($event) {&#10; console.log($event);&#10; $scope.tapCount++;&#10; };&#10;&#10; }]);&#10;&lt;/script&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>


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


</p>



117 changes: 94 additions & 23 deletions docs/unstable/directive/faTouchend/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,34 +93,105 @@ Note: For testing purposes during development, enable mobile emulation: https:/
<h3 id="fa-touchend-on-an-fa-surface">Fa-touchend on an fa-surface</h3>
<p><code>Fa-touchend</code> can be used on an <code>fa-surface</code>. Internally, a Famous Surface has a <code>.on()</code> method that binds a callback function to an event type handled by that Surface.
The function expression bound to <code>fa-touchend</code> is bound to that <code>fa-surface</code>&#39;s touchend eventHandler, and when touchend fires, the function expression will be called. </p>
<pre><code class="lang-html">&lt;fa-modifier fa-size=&quot;[100, 100]&quot;&gt;
&lt;fa-surface fa-touchend=&quot;touchEnd($event)&quot; fa-background-color=&quot;&#39;red&#39;&quot;&gt;&lt;/fa-surface&gt;
&lt;/fa-modifier&gt;</code></pre>
<pre><code class="lang-javascript">var touchEndCounter = 0;
$scope.touchEnd = function($event) {
touchEndCounter++;
console.log($event);
console.log(&quot;touchEnd: &quot; + touchEndCounter);
};</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-example53')" class="btn pull-right">
<i class="glyphicon glyphicon-edit">&nbsp;</i>
Edit in Plunker</a>
<div class="runnable-example" path="examples/example-example53"
module="faTouchEndExampleApp"
>

<div ng-non-bindable class="runnable-example-file"
name="index.html"
language="html"
type="html"
>
<pre><code>{% raw %}&lt;fa-app ng-controller=&quot;TouchEndCtrl&quot;&gt;&#10; &lt;fa-modifier fa-size=&quot;[200, 100]&quot;&gt;&#10; &lt;fa-surface fa-touchend=&quot;touchEnd($event)&quot;&#10; fa-background-color=&quot;&#39;red&#39;&quot;&gt;&#10; Touch-end count: {{touchEndCount}}&#10; &lt;/fa-surface&gt;&#10; &lt;/fa-modifier&gt;&#10;&lt;/fa-app&gt;&#10;&#10;&lt;script&gt;&#10; angular.module(&#39;faTouchEndExampleApp&#39;, [&#39;famous.angular&#39;])&#10; .controller(&#39;TouchEndCtrl&#39;, [&#39;$scope&#39;, &#39;$famous&#39;, function($scope, $famous) {&#10; &#10; $scope.touchEndCount = 0;&#10;&#10; $scope.touchEnd = function($event) {&#10; console.log($event);&#10; $scope.touchEndCount++;&#10; };&#10;&#10; }]);&#10;&lt;/script&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>


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


</p>
<h3 id="fa-touchend-on-an-fa-view">Fa-touchend on an fa-view</h3>
<p><code>Fa-touchend</code> may be used on an <code>fa-view</code>. The function expression bound to <code>fa-touchend</code> will be bound to the <code>fa-view</code>&#39;s internal <code>_eventInput</code>, the aggregation point of all events received by the <code>fa-view</code>. When it receives a <code>touchend</code> event, it will call the function expression bound to <code>fa-touchend</code>.</p>
<p>In the example below, the <code>fa-surface</code> pipes its Surface events to an instantied Famous Event Handler called <code>myEvents</code>.
<code>Fa-view</code> pipes from <code>myEvents</code>, receiving all events piped by the <code>fa-surface</code>.</p>
<p>When a touchend event occurs on the <code>fa-surface</code>, it is piped to the <code>fa-view</code>.<br><code>fa-touchend</code> defines a callback function in which to handle touchend events, and when it receives a touchend event, it calls <code>touchEnd()</code>. </p>
<pre><code class="lang-html">&lt;fa-view fa-touchend=&quot;touchEnd($event)&quot; fa-pipe-from=&quot;myEvents&quot;&gt;
&lt;fa-modifier fa-size=&quot;[100, 100]&quot;&gt;
&lt;fa-surface fa-pipe-to=&quot;myEvents&quot;
fa-background-color=&quot;&#39;orange&#39;&quot;&gt;
&lt;/fa-surface&gt;
&lt;/fa-modifier&gt;
&lt;/fa-view&gt;</code></pre>
<pre><code class="lang-javascript">var EventHandler = $famous[&#39;famous/core/EventHandler&#39;];
$scope.myEvents = new EventHandler();

$scope.touchEnd = function($event) {
console.log($event);
console.log(&quot;fa-view receives the touchend event from the fa-surface, and calls $scope.touchEnd bound to fa-touchend&quot;);
};</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-example54')" class="btn pull-right">
<i class="glyphicon glyphicon-edit">&nbsp;</i>
Edit in Plunker</a>
<div class="runnable-example" path="examples/example-example54"
module="faTouchEndExampleApp"
>

<div ng-non-bindable class="runnable-example-file"
name="index.html"
language="html"
type="html"
>
<pre><code>{% raw %}&lt;fa-app ng-controller=&quot;TouchEndCtrl&quot;&gt;&#10;&#10; &lt;!-- The fa-view receives the touchend event from the fa-surface, and calls $scope.touchEnd, which is bound to fa-touchend on the fa-view. --&gt;&#10;&#10; &lt;fa-view fa-touchend=&quot;touchEnd($event)&quot; fa-pipe-from=&quot;myEvents&quot;&gt;&#10; &lt;fa-modifier fa-size=&quot;[100, 100]&quot;&gt;&#10; &lt;fa-surface fa-pipe-to=&quot;myEvents&quot;&#10; fa-background-color=&quot;&#39;orange&#39;&quot;&gt;&#10; Touch-end count: {{touchEndCount}}&#10; &lt;/fa-surface&gt;&#10; &lt;/fa-modifier&gt;&#10; &lt;/fa-view&gt;&#10;&lt;/fa-app&gt;&#10;&#10;&lt;script&gt;&#10; angular.module(&#39;faTouchEndExampleApp&#39;, [&#39;famous.angular&#39;])&#10; .controller(&#39;TouchEndCtrl&#39;, [&#39;$scope&#39;, &#39;$famous&#39;, function($scope, $famous) {&#10; &#10; var EventHandler = $famous[&#39;famous/core/EventHandler&#39;];&#10; $scope.myEvents = new EventHandler();&#10;&#10; $scope.touchEndCount = 0;&#10; &#10; $scope.touchEnd = function($event) {&#10; console.log($event);&#10; $scope.touchEndCount++;&#10; };&#10;&#10; }]);&#10;&lt;/script&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>


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


</p>



Loading

0 comments on commit d27595e

Please sign in to comment.