From d031a9fbf48a6544c3aa7e1493ebe1d5334715e6 Mon Sep 17 00:00:00 2001
From: BitDen <yuvzhenko@inbox.ru>
Date: Mon, 25 Dec 2017 07:58:06 +0800
Subject: [PATCH] Return ui-scroll modules

---
 src/app/app.component.ts                      | 35 +++++++++----------
 src/app/app.module.ts                         |  4 +--
 .../ui-scroll.component.css}                  | 14 ++++----
 .../ui-scroll.component.html                  | 10 +++---
 .../ui-scroll.component.ts                    | 22 ++++++------
 5 files changed, 40 insertions(+), 45 deletions(-)
 rename src/app/{app.component.css => ui-scroll-directive/ui-scroll.component.css} (83%)

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index aa206a9b..77a34af0 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -3,30 +3,29 @@ import { Observable } from 'rxjs/Observable';
 
 @Component({
   selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  templateUrl: './app.component.html'
 })
 export class AppComponent {
   private title = 'app works!';
   private test: Boolean = true;
 
   private datasource = {
-    list: [1,2,3,4,5,6,7,8,9]
-    // test: [1,2,3,4,5,6,7,8,7,6,5,4,3,2,1,0],
-    // get: (index: number, count: number) => Observable.create(observer => {
-    //   console.log('requested index = ' + index + ', count = ' + count);
-    //   setTimeout(() => {
-    //     let data = [];
-    //     for (let i = index; i <= index + count - 1; i++) {
-    //       data.push({
-    //         id: i,
-    //         text: "item #" + i
-    //       });
-    //     }
-    //     console.log('resolved ' + data.length + ' items (index = ' + index + ', count = ' + count + ')');
-    //     observer.next(data);
-    //   }, 50);
-    // })
+    // list: [1,2,3,4,5,6,7,8,9]
+    test: [1,2,3,4,5,6,7,8,7,6,5,4,3,2,1,0],
+    get: (index: number, count: number) => Observable.create(observer => {
+      console.log('requested index = ' + index + ', count = ' + count);
+      setTimeout(() => {
+        let data = [];
+        for (let i = index; i <= index + count - 1; i++) {
+          data.push({
+            id: i,
+            text: "item #" + i
+          });
+        }
+        console.log('resolved ' + data.length + ' items (index = ' + index + ', count = ' + count + ')');
+        observer.next(data);
+      }, 50);
+    })
   };
 
   constructor() {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 508eb1de..b1e5f236 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -11,9 +11,7 @@ import { UiScrollDirective } from './ui-scroll-directive/ui-scroll.directive';
     UiScrollComponent,
     UiScrollDirective
   ],
-  imports: [
-    BrowserModule
-  ],
+  imports: [BrowserModule],
   entryComponents: [UiScrollComponent],
   bootstrap: [AppComponent]
 })
diff --git a/src/app/app.component.css b/src/app/ui-scroll-directive/ui-scroll.component.css
similarity index 83%
rename from src/app/app.component.css
rename to src/app/ui-scroll-directive/ui-scroll.component.css
index ecfdeee7..8a4f94d8 100644
--- a/src/app/app.component.css
+++ b/src/app/ui-scroll-directive/ui-scroll.component.css
@@ -1,7 +1,7 @@
-.viewport {
-  width: 200px;
-  height: 120px;
-  overflow-anchor: none;
-  overflow-y: auto;
-  display: block;
-}
\ No newline at end of file
+:host {
+  width: 200px;
+  height: 120px;
+  overflow-anchor: none;
+  overflow-y: auto;
+  display: block;
+}
diff --git a/src/app/ui-scroll-directive/ui-scroll.component.html b/src/app/ui-scroll-directive/ui-scroll.component.html
index 6b2c8ad3..205e8b99 100644
--- a/src/app/ui-scroll-directive/ui-scroll.component.html
+++ b/src/app/ui-scroll-directive/ui-scroll.component.html
@@ -1,21 +1,21 @@
 <div data-padding-top></div>
-<div *ngFor="let item of datasource.list">
+<!-- <div *ngFor="let item of datasource.list">
   <ng-template
     [ngTemplateOutlet]="templateVariable"
     [ngTemplateOutletContext]="{
       $implicit: item
    }">
   </ng-template>
-</div>
-<!-- <div *ngFor="let item of getItems()" id="{{getItemId(item.$index)}}">
+</div> -->
+<div *ngFor="let item of getItems()" id="{{getItemId(item.$index)}}">
   <div [style.position]="item.invisible ? 'fixed' : null" [style.left]="item.invisible ? '-99999px' : null" >
     <ng-template
       [ngTemplateOutlet]="templateVariable"
       [ngTemplateOutletContext]="{
-        item: item.scope,
+        $implicit: item.$index,
         index: item.$index
      }">
     </ng-template>
   </div>
-</div> -->
+</div>
 <div data-padding-bottom></div>
diff --git a/src/app/ui-scroll-directive/ui-scroll.component.ts b/src/app/ui-scroll-directive/ui-scroll.component.ts
index d562b178..636b1d06 100644
--- a/src/app/ui-scroll-directive/ui-scroll.component.ts
+++ b/src/app/ui-scroll-directive/ui-scroll.component.ts
@@ -15,7 +15,8 @@ import Data from './modules/data';
 @Component({
   selector: 'ui-scroll',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  templateUrl: './ui-scroll.component.html'
+  templateUrl: './ui-scroll.component.html',
+  styleUrls: [`./ui-scroll.component.css`]
 })
 export class UiScrollComponent implements OnInit, OnDestroy {
 
@@ -30,17 +31,14 @@ export class UiScrollComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
-    // Elements.initialize(this.elementRef);
-    // Data.initialize(this);
-    // Workflow.initialize(this);
-    // this.onScrollListener = this.renderer.listen(Elements.viewport, 'scroll', (event) =>
-    //   debouncedRound(() => Workflow.run(event), 25)
-    // );
-    // Workflow.run(Direction.bottom);
-    // Workflow.run(Direction.top);
-    // console.log(this);
-    // console.log(this.elementRef.nativeElement.innerHTML.trim());
-    // console.log(this.templateVariable);  // Here should be info from app.component.html..?
+    Elements.initialize(this.elementRef);
+    Data.initialize(this);
+    Workflow.initialize(this);
+    this.onScrollListener = this.renderer.listen(Elements.viewport, 'scroll', (event) =>
+      debouncedRound(() => Workflow.run(event), 25)
+    );
+    Workflow.run(Direction.bottom);
+    Workflow.run(Direction.top);
   }
 
   ngOnDestroy() {