docs: edit scrollview touchend move start view

docs/unstable/directive/faApp/index.md

@@ -71,10 +71,14 @@ it is inside of a <a href="api/directive/faSurface">fa-surface</a> directive.
 <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.
 Declaring multiple fa-app&#39;s within a page is permitted, but each new one incurs a penalty to performance, and <code>fa-app</code>&#39;s should definitely not be declared within an ng-repeat.</p>
 <h3 id="fa-app-must-be-declared-with-a-height-width">Fa-app must be declared with a height &amp; width</h3>
-<p>The element fa-app is declared within must have a height and width styling, declared inline or as a css declaration in an external stylesheet.</p>
+<p>The element <code>fa-app</code> is declared within must have a set height and width styling, declared inline or as a css declaration in an external stylesheet.</p>
 <pre><code class="lang-html">&lt;fa-app style=&quot;width: 320px; height: 568px;&quot;&gt;
    &lt;!-- other fa- scene graph components --&gt;
 &lt;/fa-app&gt;</code></pre>
+<p>If <code>fa-app</code> is declared as an attribute of another element, that element must be a <code>display:block</code> element, such as a <code>div</code> or <code>p</code>.</p>
+<pre><code class="lang-html">&lt;div fa-app style=&quot;width: 320px; height: 568px;&quot;&gt;
+  &lt;!-- other fa- scene graph components --&gt;
+&lt;/div&gt;</code></pre>
 
 
 

docs/unstable/directive/faClick/index.md

@@ -88,7 +88,8 @@ click. (<a href="<a">TODO:href="https://docs.angularjs.org/guide/expression#-eve
 
 
 
-<h2 id="example">Example</h2><p><code>Fa-click</code> is most commonly used on a <code>fa-surface</code>&#39;.  Internally, a Famous Surface has a <code>&quot;.on()&quot;</code> method that binds a callback function to an event type handled by that Surface.
+<h2 id="example">Example</h2><h3 id="fa-click-on-an-fa-surface">Fa-click on an fa-surface</h3>
+<p><code>Fa-click</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-click</code> is bound to that <code>fa-surface</code>&#39;s click eventHandler, and when the <code>fa-surface</code> is clicked, 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-click=&quot;myClickHandler($event)&quot; fa-background-color=&quot;&#39;red&#39;&quot;&gt;&lt;/fa-surface&gt;
@@ -97,6 +98,25 @@ click. (<a href="<a">TODO:href="https://docs.angularjs.org/guide/expression#-eve
   console.log(&quot;click&quot;);
   console.log($event);
 };</code></pre>
+<h3 id="fa-click-on-an-fa-view">Fa-click on an fa-view</h3>
+<p><code>Fa-click</code> may be used on an <code>fa-view</code>.  The function expression bound to <code>fa-click</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>click</code> event, it will call the function expression bound to <code>fa-click</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 click event occurs on the <code>fa-surface</code>, it is piped to the <code>fa-view</code>.<br><code>fa-click</code> defines a callback function in which to handle click events, and when it receives a click event, it calls <code>myClickHandler()</code>. </p>
+<pre><code class="lang-html">&lt;fa-view fa-click=&quot;myClickHandler($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.myClickHandler = function($event) {
+  console.log($event);
+  console.log(&quot;fa-view receives the click event from the fa-surface, and calls myClickHandler defined on fa-click&quot;);
+};</code></pre>
 
 
 

docs/unstable/directive/faIndex/index.md

@@ -64,6 +64,7 @@ order is desired, then the index value must be assigned/overridden using the faI
 <h2 id="example">Example</h2><p><code>Fa-index</code> determines the order of which the surfaces appear in the sequential view.
 In this example below, a Scroll View is created with two nested <code>fa-view</code>&#39;s, both of which have an <code>fa-index</code> of 0 and 1, respectively.</p>
 <p>If <code>fa-index</code> is declared explicitly, it will override any default order of <code>fa-view</code>&#39;s declared in html.
+If <code>fa-views</code> are created with an ng-repeat, they are automatically assigned the $index property, unless explicitly set.
 The <code>fa-view</code> with the blue background color appears after the one with the red background because its <code>fa-index</code> is set to 1.</p>
 <p><code>fa-scroll-view</code> accepts another directive called <code>fa-start-index</code> as an attribute, which determines which <code>fa-view</code> the Scroll View displays by default.
 <code>Fa-start-index</code> will not affect the sequential order of the layout; the <code>fa-view</code> with the red background will be layed out first, followed by the one with the blue background.

docs/unstable/directive/faRenderNode/index.md

@@ -49,26 +49,28 @@ It allows you to pass a reference to an arbitrary render node from your controll
     <!-- content -->
 </fa-render-node>
 ```
-`Fa-render-node` can wrap a custom-made widget or any renderable component from Famous and allow it to be inserted in the Render Tree.  
+
+
 
-All Famous widgets, such as a Scroll View, a Sequential Layout, or a Header-footer-layout, are extended Famous Views.
-`Fa-render-node` allows a developer to create & extend their own Famous View, and use it within their own Famous-Angular app. 
+
 
-In the example below, a Famous View is instantiated on the scope; a Modifier is added to it, and then a Surface is added below.
-This approach of creating a View and adding renderables to it with the `.add()` method is more in line with a "vanilla Famous" approach than a declarative approach with Famous-Angular.  
 
-In the html view, an `fa-render-node` is declared, with an `fa-node` attribute of the name of the View created on the scope, resulting in this custom, newly-created View appearing on the page.
 
-```javascript
-var View = $famous['famous/core/View'];
-var Modifier = $famous['famous/core/Modifier'];
-var Surface = $famous['famous/core/Surface'];
-var Transform = $famous['famous/core/Transform'];
+<h2 id="example">Example</h2><p><code>Fa-render-node</code> can wrap a custom-made widget or any renderable component from Famous and allow it to be inserted in the Render Tree.  </p>
+<p>All Famous widgets, such as a Scroll View, a Sequential Layout, or a Header-footer-layout, are extended Famous Views.
+<code>Fa-render-node</code> allows a developer to create &amp; extend their own Famous View, and use it within their own Famous-Angular app. </p>
+<p>In the example below, a Famous View is instantiated on the scope; a Modifier is added to it, and then a Surface is added below.
+This approach of creating a View and adding renderables to it with the <code>.add()</code> method is more in line with a &quot;vanilla Famous&quot; approach than a declarative approach with Famous-Angular.  </p>
+<p>In the html view, an <code>fa-render-node</code> is declared, with an <code>fa-node</code> attribute of the name of the View created on the scope, resulting in this custom, newly-created View appearing on the page.</p>
+<pre><code class="lang-javascript">var View = $famous[&#39;famous/core/View&#39;];
+var Modifier = $famous[&#39;famous/core/Modifier&#39;];
+var Surface = $famous[&#39;famous/core/Surface&#39;];
+var Transform = $famous[&#39;famous/core/Transform&#39;];
 
 $scope.masterView = new View();
 
-var _surf = new Surface({properties: {backgroundColor: 'red'}});
-_surf.setContent("I'm a surface");
+var _surf = new Surface({properties: {backgroundColor: &#39;red&#39;}});
+_surf.setContent(&quot;I&#39;m a surface&quot;);
 
 var _mod = new Modifier();
 
@@ -82,14 +84,7 @@ $scope.masterView.add(_mod).add(_surf);
 ```javascript
 
 ```html
-<fa-render-node fa-node="masterView" id="render"></fa-render-node>
-```
-
-
-
-
-
-
+&lt;fa-render-node fa-node=&quot;masterView&quot; id=&quot;render&quot;&gt;&lt;/fa-render-node&gt;</code></pre>