Merge pull request #138 from dhilt/issue-132_Cannot-read-property-uns…

…ubscribe-of-undefined-in-workflow-ts

Workflow initialization

demo/app/app.module.ts

@@ -44,7 +44,9 @@ import { DemoPositiveLimitedDatasourceComponent } from './samples/datasource/pos
 import { RemoteDataService, DemoRemoteDatasourceComponent } from './samples/datasource/remote-datasource.component';
 import { DemoInvertedDatasourceComponent } from './samples/datasource/inverted-datasource.component';
 import { DemoPagesDatasourceComponent } from './samples/datasource/pages-datasource.component';
+import { DemoAdapterFixPositionComponent } from './samples/experimental/adapter-fix-position.component';
 import { DemoInverseSettingComponent } from './samples/experimental/inverse-setting.component';
+import { DemoAdapterFixUpdaterComponent } from './samples/experimental/adapter-fix-updater.component';
 import { WindowComponent } from './samples/window.component';
 import { TestComponent, TestInnerComponent } from './samples/test.component';
 
@@ -88,7 +90,9 @@ import { AppRoutingModule } from './app-routing.module';
     DemoRemoteDatasourceComponent,
     DemoInvertedDatasourceComponent,
     DemoPagesDatasourceComponent,
+    DemoAdapterFixPositionComponent,
     DemoInverseSettingComponent,
+    DemoAdapterFixUpdaterComponent,
     WindowComponent,
     TestComponent,
     TestInnerComponent

demo/app/samples/adapter.component.html

@@ -2,7 +2,7 @@ <h1>Angular UI Scroll Adapter Demos</h1>
 
 <p>
   <em>Adapter</em> is&nbsp;a&nbsp;special object to&nbsp;assess and manipulate the <em>uiScroll</em>.
-  The API it&nbsp;provides is&nbsp;being discussed on&nbsp;this page.
+  The API it&nbsp;provides is&nbsp; discussed on&nbsp;this page.
   Currently the only way to&nbsp;receive the <em>Adapter</em> is&nbsp;to&nbsp;instantiate
   the <em>Datasource</em> via operator <em>new</em>:
 </p>

demo/app/samples/adapter/append-prepend-sync.component.html

@@ -15,8 +15,8 @@
       which is optional and which allows to prevent rendering of new items in the Viewport when
       the end of the dataset (if we are speaking of <em>append</em>) or
       beginning of the dataset (<em>prepend</em> case) is not reached.
-      The <em>append</em> second argument is being called <em>eof</em> (end-of-file),
-      the <em>prepend</em> second argument is being called <em>bof</em> (begin-of-file).
+      The <em>append</em> second argument is called <em>eof</em> (end-of-file),
+      the <em>prepend</em> second argument is called <em>bof</em> (begin-of-file).
     </p>
     <p>
       Let's discuss <em>Adapter.prepend(items, bof)</em> case.
@@ -31,7 +31,7 @@
     </p>
     <p>
       In this demo we want the datasource to be consistent with the dataset changes made during append/prepend.
-      For this purpose a limited dataset is being initialized on the constructor and
+      For this purpose a limited dataset is initialized on the constructor and
       <em>Datasource.get</em> takes items by <em>id</em>, not by index. We can't rely on index because
       we are going to update our dataset per each <em>doAppend</em> / <em>doPrepend</em> calls
       destructively by <em>unshift</em> and <em>push</em>.

demo/app/samples/adapter/bof-eof.component.html

@@ -23,12 +23,13 @@
     <p>
       In this demo we have limited datasource consisting of 100 items starting from index 1.
       So initially we are at the left position of the available dataset, and that's why we see
-      "Begin of file is reached" message. After some scrolling down <em>bof</em> is
-      being turned to <em>false</em>. The first item is destroyed and can be retrieved again.
+      "Begin of file is reached" message.
+      After some scrolling down <em>bof</em> is turned to <em>false</em>.
+      The first item is destroyed and can be retrieved again.
     </p>
     <p>
       The <em>edgeCounter</em> is bof/eof changes counter. It is defined via <em>merge(bof$, eof$)</em>
-      subscription which is being triggered each time <em>bof$</em>/<em>eof$</em> emits a new value.
+      subscription which is triggered each time <em>bof$</em>/<em>eof$</em> emits a new value.
     </p>
   </div>
 </app-demo>

demo/app/samples/adapter/clip.component.html

@@ -9,7 +9,7 @@
       allowing to remove out-of-viewport items on demand.
       Commonly, the <em>uiScroll</em> runs the clipping procedure
       each time new items are fetched after scrolling.
-      Also, the <em>uiScroll</em> clipps old items from a side of the viewport
+      Also, the <em>uiScroll</em> clips old items from a side of the viewport
       that is opposite to a side where new items appear.
       This is one of the core parts of the virtualization concept.
       By invoking the <em>Adapter.clip</em> method
@@ -31,18 +31,18 @@
       Here we disabled virtualization by turning on the <em>infinite</em> setting.
       Clipping will never happen automatically.
       We see how the DOM elements counter value is getting bigger and bigger as we scroll on and on.
-      By pressiing the "Clip" button, we let only 20-21 items to survive.
+      By pressing the "Clip" button, we let only 20-21 items to survive.
       This way a kind of manual virtualization could be implemented.
     </p>
     <p>
       The method has an argument object that allows to run clipping process
-      only in one direction: 
+      only in one direction:
     </p>
     <pre>{{clipOptionsDescription}}</pre>
     <p>
       So, if we call <em>Adapter.clip({{clipOptionsSample}})</em>,
-      only ithose tems that are out of the bottom border of the visible part of the viewport
+      only those items that are out of the bottom edge of the visible part of the viewport
       will be clipped out.
     </p>
   </div>
-</app-demo>
+</app-demo>

demo/app/samples/adapter/clip.component.ts

@@ -69,7 +69,7 @@ doClip() {
 }`
   }];
 
-  clipOptionsDescription = `  ClipOptions {
+  clipOptionsDescription = `  AdapterClipOptions {
     forwardOnly?: boolean;
     backwardOnly?: boolean;
   }`;

demo/app/samples/adapter/first-last-visible-items.component.ts

@@ -92,8 +92,8 @@ Visible items counter: {{visibleCount}}
   }];
 
   itemAdapterDescription = `  ItemAdapter {
-    $index?: number;
-    data?: any;
+    $index: number;
+    data: any;
     element?: HTMLElement;
   }`;
 

demo/app/samples/adapter/is-loading-extended.component.html

@@ -45,7 +45,7 @@
         <em>inner loop</em> pending, which is <em>loopPending</em> and which includes
         some internal <em>uiScroll</em> subprocesses (fetch, clip, render)
         that can take some time in addition to <em>Datasource.get</em> work
-        (which is a part of "fetch" sbprocess);
+        (which is a part of "fetch" subprocess);
       </li>
       <li>
         <em>continuous work session</em> pending, which is <em>isLoading</em>

demo/app/samples/adapter/remove.component.html

@@ -1,5 +1,5 @@
 <ng-template #itemTemplate let-item="item">
-  {{item.text}} 
+  {{item.text}}
   <span class="remove" (click)="doRemove(item.id)">[remove]</span>
 </ng-template>
 
@@ -19,16 +19,18 @@
     </p>
     <pre>{{predicateDescription}}</pre>
     <p>
-      Here <em>id</em> is being received from the template
-      as the <em>id</em> of the item the user ckicked on.
+      Since the argument of the predicate has <em>ItemAdapter</em> type,
+      the <em>data</em> contains id-text objects defined at the component level.
+      The argument of <em>doRemove</em> method comes from the template
+      as the <em>id</em> of the item the user clicked on.
     </p>
     <p>
-      The very important thing is to syncronize our datasource with the changes
+      The very important thing is to synchronize our datasource with the changes
       we are making over the <em>uiScroll</em> buffer via <em>Adapter.remove</em>.
       Generally this is the App component responsibility,
-      and in this demo it is being provided via <em>doRemoveDatasource(id)</em> method.
+      and in this demo it happens via <em>doRemoveDatasource(id)</em> method.
       It removes item with given <em>id</em> from the initial dataset,
-      and decrements <em>id</em> of all items which ids are more than given one.
+      and decrements <em>id</em> of all items whose ids are greater than the given one.
     </p>
   </div>
 </app-demo>

demo/app/samples/adapter/remove.component.ts

@@ -86,7 +86,7 @@ doRemoveDatasource(id: number) {
 }
 
 doRemove(id: number) {
-  this.datasource.adapter.remove(item => item.data.id === id);
+  this.datasource.adapter.remove(({ data }) => data.id === id);
   this.doRemoveDatasource(id);
 }`
   }, {
@@ -122,7 +122,7 @@ doRemove(id: number) {
 }`
   }];
 
-  predicateDescription = `  this.datasource.adapter.remove(item => item.data.id === id);`;
+  predicateDescription = `  this.datasource.adapter.remove(({ data }) => data.id === id);`;
 
   doRemoveDatasource(id: number) {
     this.data = this.data.reduce((acc, item) => {
@@ -138,7 +138,7 @@ doRemove(id: number) {
   }
 
   doRemove(id: number) {
-    this.datasource.adapter.remove(item => item.data.id === id);
+    this.datasource.adapter.remove(({ data }) => data.id === id);
     this.doRemoveDatasource(id);
   }
 

demo/app/samples/common/basic.component.html

@@ -5,8 +5,8 @@
 >
   <div description>
     <p>
-      Speaking of what impact could <em>Settings</em> have on the scroller behaviour,
-      we are going to dig into it's behaviour details before any settings applied.
+      Speaking of what impact could <em>Settings</em> have on the scroller behavior,
+      we are going to dig into it's behavior details before any settings applied.
       And this is the very basic example where settings are not defined.
     </p>
     <p>
@@ -21,20 +21,20 @@
     </p>
     <p>
       The viewport scrollable size value can increase only;
-      as we do scroll more and more items are being passed through the <em>Datasource.get</em>.
+      as we scroll more and more, items are passed through the <em>Datasource.get</em>.
       Our <em>Datasource</em> is unlimited,
       it produces items with indexes from -Infinity to +Infinity.
       The number of DOM elements in the viewport is not constant,
       but it fluctuates around the initial value during scrolling (20-31).
       The core concept of the virtualization is to keep as small number of real items as needed
-      while the scrollable size of the viewport can grow.
+      while the scrollable size of the viewport can be very big.
     </p>
     <p>
       Why do we have 3 requests initially,
       why the first one is about only 5 items,
       why at least 10 items are invisible?
       This is how the <em>*uiScroll</em> works and further reading should shed more light on the details.
-      And we need to know that the default behaviour could be changed via Settings object.
+      And we need to know that the default behavior could be changed via Settings object.
     </p>
   </div>
 </app-demo>

demo/app/samples/common/different-heights.component.html

@@ -7,7 +7,7 @@
     <p>
       The <em>uiScroll</em> works fine with different item heights.
       To make this sample more strict and to demonstrate the
-      scrollbar parameters' consistency the limited datasource is being used.
+      scrollbar parameters' consistency the limited datasource is used.
     </p>
   </div>
 </app-demo>

demo/app/samples/common/infinite.component.html

@@ -9,7 +9,7 @@
       This mode can be turned on via <em>infinite</em> property of the <em>settings</em> object.
       Setting <em>infinite</em> to true, we ask the <em>uiScroll</em>
       not to remove items that are getting out of the visible part of the viewport.
-      That's why the DOM elements counter value is being increased per each edge-scroll event
+      That's why the DOM elements counter value increases per each edge-scroll event
       and never decreased.
     </p>
   </div>

demo/app/samples/common/item-size.component.html

@@ -5,7 +5,7 @@
 >
   <div description>
     <p>
-      Another setting which has an impact on the viewport's filling procedure is <em>itemSize</em>.
+      Another setting which has an impact on the viewport filling procedure is <em>itemSize</em>.
       After the first fetch is done, the <em>uiScroll</em> gets knowledge on average item's size
       and can make further requests precisely.
       Defining <em>settings.itemSize</em> property we are telling the <em>uiScroll</em> that

demo/app/samples/common/padding.component.html

@@ -49,7 +49,7 @@
     </p>
     <p>
       The default value of <em>padding</em> property is 0.5.
-      It is being treated as floating point number.
+      It is treated as floating point number.
       The minimum value is 0.01.
     </p>
   </div>

demo/app/samples/datasource.component.html

@@ -39,7 +39,7 @@ <h1>Angular UI Scroll Datasource Demos</h1>
 </ul>
 <p>
   With the help of&nbsp;<em>settings</em> object the scroller could be&nbsp;configured,
-  as&nbsp;it&nbsp;is&nbsp;being described on&nbsp;<a href="#settings">Settings demo page</a>.
+  as&nbsp;it&nbsp;is&nbsp; described on&nbsp;<a href="#settings">Settings demo page</a>.
   Here we&nbsp;are going to&nbsp;discuss the <em>Datasource.get</em> method implementation.
 </p>
 

demo/app/samples/datasource/bidirectional-unlimited-datasource.component.html

@@ -13,7 +13,7 @@
     </p>
     <p>
       This sample as well as following ones does include <em>Datasource.get</em> method log
-      telling us how many items are being fetched by the <em>uiScroll</em>
+      telling us how many items are fetched by the <em>uiScroll</em>
       via <em>Datasource</em>.
     </p>
   </div>

demo/app/samples/datasource/datasource-signatures.component.html

@@ -23,7 +23,7 @@
       <em>datasourceObservable</em> and <em>datasourceObservable2</em> introduce observable-based
       signature when an object of <em>Observable</em> type needs to be returned.
       Similar to promise case we need to be sure that the <em>next</em> method
-      is being called in appropriate time, and we assume that
+      is called in appropriate time, and we assume that
       <em>this.getDataObservable</em> method that delivers necessary part of the dataset
       based on <em>index</em> and <em>count</em> parameters.
     </p>

demo/app/samples/datasource/inverted-datasource.component.html

@@ -31,7 +31,7 @@ <h3 id="{{context.titleId}}">
     <em>Datasource.get</em> method implementation could be quite complex and flexible.
     This piece demonstrates how the dataset we want to virtualize could be
     processed to provide "inverted" viewport logic when
-    new positive items are being retrieved by scrolling up.
+    new positive items are retrieved by scrolling up.
   </p>
   <p>
     <em>getData</em> method implements positive limited datasource

demo/app/samples/datasource/pages-datasource.component.html

@@ -14,7 +14,7 @@
       The <em>constructor</em> initializes <em>data</em> two-dimensional array,
       <em>getDataPage</em> method simulates "pages" API. We are assuming that
       <em>getDataPage</em> is the only entry point to our data. Then
-      each time the <em>datasource.get</em> method is being called, we are
+      each time the <em>datasource.get</em> method is called, we are
       converting "index-count" API params to appropriate pages numbers,
       retrieving these pages, joining pages results and slicing it to
       resolve the exactly part of the dataset the <em>uiScroll</em> needs for.

demo/app/samples/experimental.component.html

@@ -3,7 +3,14 @@ <h1>Angular UI Scroll Experimental Demos</h1>
 <p>
   There are some undocumented settings and Adapter methods that provide additional flexibility.
   We can consider them as experimental features. Most of these features are not tested well
-  and may have some side effects or behave in imperfectly.
+  and may have some side effects or behave imperfectly.
 </p>
+<p>
+  For example, <em>Adapter.fix</em> method. It has different options for different cases
+  which are discussed below. The options are passed as props of its argument object:
+</p>
+<pre>{{adapterFixArgumentDescription}}</pre>
 
+<app-adapter-fix-position></app-adapter-fix-position>
 <app-inverse-setting></app-inverse-setting>
+<app-adapter-fix-updater></app-adapter-fix-updater>

demo/app/samples/experimental.component.ts

@@ -9,4 +9,11 @@ export class ExperimentalComponent {
   constructor() {
   }
 
+  adapterFixArgumentDescription = `  interface AdapterFixOptions {
+    scrollPosition?: number;
+    minIndex?: number;
+    maxIndex?: number;
+    updater?: (item: ItemAdapter) => any;
+  }`;
+
 }

demo/app/samples/experimental/adapter-fix-position.component.html

@@ -0,0 +1,34 @@
+<app-demo [datasource]="datasource" [context]="demoContext" [sources]="sources">
+
+  <div actions>
+    <div class="comment">Available since v1.2.4, undocumented</div>
+    <button (click)="scrollTop()">scroll top</button>
+    <button (click)="scrollBottom()">scroll bottom</button>
+  </div>
+
+  <div description>
+    <p>
+      The first option of <em>Adapter.fix</em> method is <em>scrollPosition</em>.
+      It allows to change the position of the viewport's scrollbar programmatically.
+      It is used in the lib tests.
+    </p>
+    <p>
+      The value of <em>scrollPosition</em> should be an integer or Infinity.
+      Negative value would be treated as zero.
+      Despite the browsers have no agreement on how to deal with
+      setting <em>scrollTop</em>/<em>scrollLeft</em> properties
+      into <em>+/-Infinity</em>, the <em>uiScroll</em> treats them as follows:
+    </p>
+    <ul>
+      <li>
+        scroll to the beginning of the viewport if <em>-Infinity</em>,
+        (the value will be set to <em>0</em>)
+      </li>
+      <li>
+        scroll to the end of the viewport if <em>Infinity</em>
+        (scroll position will be set into the viewport's
+        <em>scrollHeight</em> or <em>scrollWidth</em> value)
+      </li>
+    </ul>
+  </div>
+</app-demo>