table layout dev

dhilt · Dec 11, 2019 · 228296c · 228296c
1 parent 5c56b60
commit 228296c
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 22 deletions.
diff --git a/demo/app/samples/test.component.html b/demo/app/samples/test.component.html
@@ -41,17 +41,25 @@
   <br><br>
 </div>
 
-<div class="viewport" style="height: 600px" id="my-viewport">
-  <div
-    *uiScroll="let item of datasource"
-    (click)="doToggleItem(item)"
-    [style.height]="item.height + 'px'"
-  >
-    <app-samples-test-inner>
-      {{item.text}}
-      <span [style.color]="item.color">
-        {{item.isSelected ? '********' : ''}}
-      </span>
-    </app-samples-test-inner>
-  </div>
+<div class="viewport tableFixHead" style="height: 600px;" id="my-viewport">
+<table>
+  <thead><th>data</th></thead>
+  <tbody>
+    <tr class="temp"
+      *uiScroll="let item of datasource;table"
+      (click)="doToggleItem(item)"
+    >
+      <td>
+        <div [style.height]="item.height + 'px'">
+        <app-samples-test-inner>
+          {{item.text}}
+          <span [style.color]="item.color">
+            {{item.isSelected ? '********' : ''}}
+          </span>
+        </app-samples-test-inner>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>
 </div>
diff --git a/demo/styles.css b/demo/styles.css
@@ -318,3 +318,20 @@ li.L1,li.L3,li.L5,li.L7,li.L9 { }
   pre .typ, code .typ { font-weight: bold }
   pre .tag, code .tag { font-weight: bold; color: #204a87; }
 }
+
+table tr.temp {
+  color: red;
+  position: fixed;
+  left: -99999px;
+}
+
+table, caption, tbody, tfoot, thead, tr, th, td {
+  padding: 0;
+}
+
+.tableFixHead          { overflow-y: auto; height: 100px; }
+.tableFixHead thead th { position: sticky; top: 0; }
+
+/* Just common table stuff. Really. */
+table  { border-collapse: collapse; }
+th     { background:#eee; }
diff --git a/src/component/classes/viewport.ts b/src/component/classes/viewport.ts
@@ -36,9 +36,15 @@ export class Viewport {
       this.scrollEventElement = <Document>(this.element.ownerDocument);
       this.scrollable = <HTMLElement>this.scrollEventElement.scrollingElement;
     } else {
-      this.host = <HTMLElement>this.element.parentElement;
+      this.host = <HTMLElement>this.element.parentElement;//.parentElement.parentElement;
+      if (this.host) {
+        this.host = <HTMLElement>this.host.parentElement;
+      }
+      if (this.host) {
+        this.host = <HTMLElement>this.host.parentElement;
+      }
       this.scrollEventElement = this.host;
-      this.scrollable = <HTMLElement>this.element.parentElement;
+      this.scrollable = this.host;
     }
 
     this.paddings = new Paddings(this.element, this.routines, settings);

diff --git a/src/component/processes/render.ts b/src/component/processes/render.ts
@@ -8,13 +8,18 @@ export default class Render {
     scroller.logger.stat('before new items render');
     scroller.innerLoopSubscriptions.push(
       scroller.bindData().subscribe(() => {
+        const elts = scroller.viewport.element.querySelectorAll(`tr:not([data-sid])`);
+        if (elts && elts.length && elts.length === scroller.state.fetch.items.length) {
+          elts.forEach((elt, index) => {
+            (<any>elt).dataset['sid'] = scroller.state.fetch.items[index].nodeId;
+          });
         if (Render.processElements(scroller)) {
           scroller.callWorkflow({
             process: Process.render,
             status: ProcessStatus.next,
             payload: { noClip: scroller.state.clip.noClip }
           });
-        } else {
+        } } else {
           scroller.callWorkflow({
             process: Process.render,
             status: ProcessStatus.error,
@@ -55,6 +60,7 @@ export default class Render {
     item.element = <HTMLElement>element;
     item.element.style.left = '';
     item.element.style.position = '';
+    item.element.classList.remove('temp');
     item.invisible = false;
     item.setSize();
     buffer.cache.add(item);

diff --git a/src/ui-scroll.component.ts b/src/ui-scroll.component.ts
@@ -9,11 +9,20 @@ import { Datasource as IDatasource } from './component/interfaces/index';
 import { Datasource } from './component/classes/datasource';
 import { Item } from './component/classes/item';
 
-/* tslint:disable:component-selector */
-@Component({
-  selector: '[ui-scroll]',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  template: `<div data-padding-backward></div><div
+const template = `<ng-container *ngIf="isTable"><tr data-sid="backward">
+  <td><div data-padding-backward></div></td>
+</tr><ng-template
+  *ngFor="let item of items"
+  [ngTemplateOutlet]="template"
+  [ngTemplateOutletContext]="{
+    $implicit: item.data,
+    index: item.$index,
+    odd: item.$index % 2,
+    even: !(item.$index % 2)
+ }"
+></ng-template><tr data-sid="forward">
+  <td><div data-padding-forward></div></td>
+</tr></ng-container><ng-container *ngIf="!isTable"><div data-padding-backward></div><div
   *ngFor="let item of items"
   [attr.data-sid]="item.nodeId"
   [style.position]="item.invisible ? 'fixed' : null"
@@ -26,14 +35,21 @@ import { Item } from './component/classes/item';
     odd: item.$index % 2,
     even: !(item.$index % 2)
  }"
-></ng-template></div><div data-padding-forward></div>`
+></ng-template></div><div data-padding-forward></div></ng-container>`
+
+/* tslint:disable:component-selector */
+@Component({
+  selector: 'tbody [ui-scroll]',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template
 })
 export class UiScrollComponent implements OnInit, OnDestroy {
 
   // come from the directive
   public version: string;
   public template: TemplateRef<any>;
   public datasource: IDatasource | Datasource;
+  public isTable: boolean;
 
   // use in the template
   public items: Array<Item>;

diff --git a/src/ui-scroll.directive.ts b/src/ui-scroll.directive.ts
@@ -8,6 +8,7 @@ import { Datasource } from './component/interfaces/datasource';
 export class UiScrollDirective implements OnInit {
   private version: string;
   private datasource: Datasource;
+  private isTable: boolean;
 
   constructor(
     private templateRef: TemplateRef<any>,
@@ -20,6 +21,10 @@ export class UiScrollDirective implements OnInit {
     this.datasource = datasource;
   }
 
+  @Input() set uiScrollTable(value: any) {
+    this.isTable = !!value;
+  }
+
   ngOnInit() {
     const templateView = this.templateRef.createEmbeddedView({});
     const compFactory = this.resolver.resolveComponentFactory(UiScrollComponent);
@@ -28,6 +33,7 @@ export class UiScrollDirective implements OnInit {
     );
     componentRef.instance.datasource = this.datasource;
     componentRef.instance.template = this.templateRef;
+    componentRef.instance.isTable = this.isTable;
     componentRef.instance.version = version;
   }
 }