Creative chaos (2)

dyuvzhenko · Dec 16, 2017 · 99ed60d · 99ed60d
1 parent c7a41e9
commit 99ed60d
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 29 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -10,4 +10,4 @@ <h1>
 
 <div *uiScroll="let item of datasource">
     Hello uiScroll Directive.<b>{{item}}</b>
-</div> 
+</div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -11,21 +11,22 @@ export class AppComponent {
   private test: Boolean = true;
 
   private datasource = {
-    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/ui-scroll-directive/ui-scroll.component.html b/src/app/ui-scroll-directive/ui-scroll.component.html
@@ -1,8 +1,14 @@
 <div data-padding-top></div>
+<div *ngFor="let item of datasource.list" id="{{item}}">
+  {{item}}
+  <ng-template
+    [ngTemplateOutlet]="templateVariable"
+    [ngTemplateOutletContext]="{
+      item: item
+   }">
+  </ng-template>
+</div>
 <!-- <div *ngFor="let item of getItems()" id="{{getItemId(item.$index)}}">
-  {{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"
@@ -12,6 +18,6 @@
      }">
     </ng-template>
   </div>
-</div>
+</div> -->
 <ng-content></ng-content>
 <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
@@ -34,17 +34,18 @@ export class UiScrollComponent implements OnInit, OnDestroy {
 
   ngOnInit() {
     this.datasource = this.uiScrollService.getDatasource();
-    Elements.initialize(this.elementRef);
-    Data.initialize(this);
-    Workflow.initialize(this);
-    this.onScrollListener = this.renderer.listen(Elements.viewport, 'scroll', (event) =>
-      debouncedRound(() => Workflow.run(event), 25)
-    );
+    console.log(this.templateVariable) // ! undefined
+    // 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..?
+    // console.log(this);
+    // console.log(this.elementRef.nativeElement.innerHTML.trim());
+    // console.log(this.templateVariable);  // Here should be info from app.component.html..?
   }
 
   ngOnDestroy() {