refactor(showcase): add scroll example

nivekcode · nivekcode · commit 932d474e007c · 2019-10-03T16:20:11.000+02:00
diff --git a/projects/ng-sortgrid-demo/src/app/app.component.css b/projects/ng-sortgrid-demo/src/app/app.component.css
@@ -11,3 +11,28 @@
   color: #333; /* old IE */
   background-color: #333; /* Modern Browsers */
 }
+
+/*
+  Custom styles
+ */
+.container-fluid {
+  padding: 20px;
+}
+
+.example-list {
+  list-style-type: none;
+  padding: 0;
+}
+
+.example-list li {
+  display: table-cell;
+  padding: 4px;
+}
+
+.example-container {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  justify-content: center;
+}
+
diff --git a/projects/ng-sortgrid-demo/src/app/app.component.ts b/projects/ng-sortgrid-demo/src/app/app.component.ts
@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import {Component, ViewEncapsulation} from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
+  encapsulation: ViewEncapsulation.None
 })
 export class AppComponent {
   public items = [1, 2, 3, 4, 5, 6, 7, 8, 9];
diff --git a/projects/ng-sortgrid-demo/src/app/app.routing.module.ts b/projects/ng-sortgrid-demo/src/app/app.routing.module.ts
@@ -4,7 +4,8 @@ import {RouterModule} from '@angular/router';
 
 @NgModule({
   imports: [RouterModule.forRoot([
-    {path: '', loadChildren: './introduction/introduction.module#IntroductionModule'}
+    {path: '', loadChildren: './introduction/introduction.module#IntroductionModule'},
+    {path: 'scrolling', loadChildren: './scrolling/scrolling.module#ScrollingModule'}
   ])],
   exports: [RouterModule]
 })
diff --git a/projects/ng-sortgrid-demo/src/app/introduction/examples/async-pipe/async-pipe-memory.component.ts b/projects/ng-sortgrid-demo/src/app/introduction/examples/async-pipe/async-pipe-memory.component.ts
@@ -5,7 +5,7 @@ import {delay, tap} from 'rxjs/operators';
 @Component({
   selector: 'ngsg-demo-async',
   templateUrl: './async-pipe-memory.component.html',
-  styleUrls: ['./async-pipe-memory.component.css', '../memory-demo.css']
+  styleUrls: ['./async-pipe-memory.component.css']
 })
 export class AsyncPipeMemoryComponent {
 
diff --git a/projects/ng-sortgrid-demo/src/app/introduction/examples/getting-started/getting-started-memory.component.ts b/projects/ng-sortgrid-demo/src/app/introduction/examples/getting-started/getting-started-memory.component.ts
@@ -2,8 +2,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'ngsg-demo-memory',
-  templateUrl: 'getting-started-memory.component.html',
-  styleUrls: ['../memory-demo.css']
+  templateUrl: 'getting-started-memory.component.html'
 })
 export class GettingStartedMemoryComponent {
 
diff --git a/projects/ng-sortgrid-demo/src/app/introduction/examples/groups/groups-memory.component.ts b/projects/ng-sortgrid-demo/src/app/introduction/examples/groups/groups-memory.component.ts
@@ -2,8 +2,7 @@ import {Component} from '@angular/core';
 
 @Component({
   selector: 'ngsg-demo-groups-memory',
-  templateUrl: 'groups-memory.component.html',
-  styleUrls: ['../memory-demo.css']
+  templateUrl: 'groups-memory.component.html'
 })
 export class GroupsMemoryComponent {
 
diff --git a/projects/ng-sortgrid-demo/src/app/introduction/examples/memory-demo.css b/projects/ng-sortgrid-demo/src/app/introduction/examples/memory-demo.css
diff --git a/projects/ng-sortgrid-demo/src/app/introduction/examples/react-on-changes/react-on-changes-memory.component.ts b/projects/ng-sortgrid-demo/src/app/introduction/examples/react-on-changes/react-on-changes-memory.component.ts
@@ -2,8 +2,7 @@ import {Component, OnInit} from '@angular/core';
 
 @Component({
   selector: 'ngsg-demo-react-on-changes-memory',
-  templateUrl: 'react-on-changes-memory.component.html',
-  styleUrls: ['../memory-demo.css']
+  templateUrl: 'react-on-changes-memory.component.html'
 })
 export class ReactOnChangesMemoryComponent implements OnInit {
 
diff --git a/projects/ng-sortgrid-demo/src/app/introduction/introduction.component.css b/projects/ng-sortgrid-demo/src/app/introduction/introduction.component.css
diff --git a/projects/ng-sortgrid-demo/src/app/introduction/introduction.component.html b/projects/ng-sortgrid-demo/src/app/introduction/introduction.component.html
@@ -34,6 +34,6 @@ <h1>5. Scrolling</h1>
     The scrolling demo is in a separate page because we need more items and a sticky navheader.
   </p>
 
-  <button class="btn btn-primary" style="margin-bottom: 50px">Check out the demo...</button>
+  <button routerLink="scrolling" class="btn btn-primary" style="margin-bottom: 50px">Check out the demo...</button>
 
 </div>
diff --git a/projects/ng-sortgrid-demo/src/app/introduction/introduction.component.ts b/projects/ng-sortgrid-demo/src/app/introduction/introduction.component.ts
@@ -2,8 +2,7 @@ import { Component, OnInit } from '@angular/core';
 
 @Component({
   selector: 'app-introduction',
-  templateUrl: './introduction.component.html',
-  styleUrls: ['./introduction.component.css']
+  templateUrl: './introduction.component.html'
 })
 export class IntroductionComponent implements OnInit {
 
diff --git a/projects/ng-sortgrid-demo/src/app/introduction/introduction.module.ts b/projects/ng-sortgrid-demo/src/app/introduction/introduction.module.ts
@@ -1,33 +1,27 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {IntroductionComponent} from './introduction.component';
-import {NavComponent} from '../shared/nav/nav.component';
-import {HeaderComponent} from '../shared/header/header.component';
 import {GettingStartedMemoryComponent} from './examples/getting-started/getting-started-memory.component';
-import {StepComponent} from '../shared/step/step.component';
 import {ReactOnChangesMemoryComponent} from './examples/react-on-changes/react-on-changes-memory.component';
 import {GroupsMemoryComponent} from './examples/groups/groups-memory.component';
-import {CardComponent} from './examples/card/card.component';
 import {AsyncPipeMemoryComponent} from './examples/async-pipe/async-pipe-memory.component';
 import {IntroductionRoutingModule} from './introduction.routing.module';
 import {NgsgModule} from '../../../../ng-sortgrid/src/lib/ngsg.module';
+import {SharedModule} from '../shared/shared.module';
 
 @NgModule({
   declarations: [
     IntroductionComponent,
-    NavComponent,
-    HeaderComponent,
     GettingStartedMemoryComponent,
-    StepComponent,
     ReactOnChangesMemoryComponent,
     GroupsMemoryComponent,
-    CardComponent,
     AsyncPipeMemoryComponent
   ],
   imports: [
     CommonModule,
     IntroductionRoutingModule,
-    NgsgModule
+    NgsgModule,
+    SharedModule
   ]
 })
 export class IntroductionModule {
diff --git a/projects/ng-sortgrid-demo/src/app/introduction/introduction.routing.module.ts b/projects/ng-sortgrid-demo/src/app/introduction/introduction.routing.module.ts
@@ -5,7 +5,8 @@ import {IntroductionComponent} from './introduction.component';
 @NgModule({
   imports: [RouterModule.forChild([
     {path: '', component: IntroductionComponent}
-  ])]
+  ])],
+  exports: [RouterModule]
 })
 export class IntroductionRoutingModule {
 }
diff --git a/projects/ng-sortgrid-demo/src/app/scrolling/scrolling.component.html b/projects/ng-sortgrid-demo/src/app/scrolling/scrolling.component.html
@@ -0,0 +1,14 @@
+<ngsg-demo-nav [fixed]="true" [height]="height + 'px'" subtitle="Scrolling demo"></ngsg-demo-nav>
+<div class="container">
+  <div class="example-container" style="margin-top: 400px">
+    <ngsg-card *ngFor="let item of items"
+               ngSortgridItem
+               ngSortGridGroup="getting-started"
+               [autoScroll]="true"
+               [scrollPointTop]="height"
+               [ngSortGridItems]="items"
+               [item]="item"
+               class="example-box">
+    </ngsg-card>
+  </div>
+</div>
diff --git a/projects/ng-sortgrid-demo/src/app/scrolling/scrolling.component.spec.ts b/projects/ng-sortgrid-demo/src/app/scrolling/scrolling.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ScrollingComponent } from './scrolling.component';
+
+describe('ScrollingComponent', () => {
+  let component: ScrollingComponent;
+  let fixture: ComponentFixture<ScrollingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ScrollingComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ScrollingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/ng-sortgrid-demo/src/app/scrolling/scrolling.component.ts b/projects/ng-sortgrid-demo/src/app/scrolling/scrolling.component.ts
@@ -0,0 +1,18 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-scrolling',
+  templateUrl: './scrolling.component.html'
+})
+export class ScrollingComponent implements OnInit {
+
+  height = 350;
+  public items = Array.from(Array(50).keys());
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/projects/ng-sortgrid-demo/src/app/scrolling/scrolling.module.ts b/projects/ng-sortgrid-demo/src/app/scrolling/scrolling.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ScrollingComponent } from './scrolling.component';
+import {ScrollingRoutingModule} from './scrolling.routing.module';
+import {SharedModule} from '../shared/shared.module';
+import {NgsgModule} from '../../../../ng-sortgrid/src/lib/ngsg.module';
+
+@NgModule({
+  declarations: [ScrollingComponent],
+  imports: [
+    CommonModule,
+    SharedModule,
+    ScrollingRoutingModule,
+    NgsgModule
+  ]
+})
+export class ScrollingModule { }
diff --git a/projects/ng-sortgrid-demo/src/app/scrolling/scrolling.routing.module.ts b/projects/ng-sortgrid-demo/src/app/scrolling/scrolling.routing.module.ts
@@ -0,0 +1,11 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {ScrollingComponent} from './scrolling.component';
+
+@NgModule({
+  imports: [RouterModule.forChild([
+    {path: '', component: ScrollingComponent}
+  ])]
+})
+export class ScrollingRoutingModule {
+}
diff --git a/projects/ng-sortgrid-demo/src/app/shared/card/card.component.css b/projects/ng-sortgrid-demo/src/app/shared/card/card.component.css
diff --git a/projects/ng-sortgrid-demo/src/app/shared/card/card.component.html b/projects/ng-sortgrid-demo/src/app/shared/card/card.component.html
diff --git a/projects/ng-sortgrid-demo/src/app/shared/card/card.component.ts b/projects/ng-sortgrid-demo/src/app/shared/card/card.component.ts
diff --git a/projects/ng-sortgrid-demo/src/app/shared/header/header.component.ts b/projects/ng-sortgrid-demo/src/app/shared/header/header.component.ts
@@ -5,5 +5,4 @@ import {Component} from '@angular/core';
   templateUrl: 'header.component.html'
 })
 export class HeaderComponent {
-
 }
diff --git a/projects/ng-sortgrid-demo/src/app/shared/nav/nav.component.html b/projects/ng-sortgrid-demo/src/app/shared/nav/nav.component.html
@@ -1,6 +1,8 @@
-<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+<nav class="navbar navbar-expand-lg navbar-dark bg-primary"
+     [ngStyle]="{'height': height}"
+     [ngClass]="{'fixed-top': fixed}">
   <div class="container">
-    <a class="navbar-brand" href="#" style="font-size: 30px">ng-sortgrid</a>
+    <a class="navbar-brand" href="#" style="font-size: 30px">ng-sortgrid <small *ngIf="subtitle">{{subtitle}}</small></a>
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
       <span class="navbar-toggler-icon"></span>
     </button>
diff --git a/projects/ng-sortgrid-demo/src/app/shared/nav/nav.component.ts b/projects/ng-sortgrid-demo/src/app/shared/nav/nav.component.ts
@@ -1,8 +1,11 @@
-import {Component} from '@angular/core';
+import {Component, Input} from '@angular/core';
 
 @Component({
   selector: 'ngsg-demo-nav',
   templateUrl: './nav.component.html'
 })
 export class NavComponent {
+  @Input() fixed = false;
+  @Input() height = '60px';
+  @Input() subtitle;
 }
diff --git a/projects/ng-sortgrid-demo/src/app/shared/shared.module.ts b/projects/ng-sortgrid-demo/src/app/shared/shared.module.ts
@@ -1,8 +1,13 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import {StepComponent} from './step/step.component';
+import {HeaderComponent} from './header/header.component';
+import {NavComponent} from './nav/nav.component';
+import {CardComponent} from './card/card.component';
 
 @NgModule({
-  declarations: [],
+  declarations: [StepComponent, HeaderComponent, NavComponent, CardComponent],
+  exports: [StepComponent, HeaderComponent, NavComponent, CardComponent],
   imports: [
     CommonModule
   ]
diff --git a/projects/ng-sortgrid/src/lib/helpers/scroll/scroll-helper.service.ts b/projects/ng-sortgrid/src/lib/helpers/scroll/scroll-helper.service.ts
@@ -20,14 +20,14 @@ export class ScrollHelperService {
   }
 
   public scrollIfNecessary(event: any, scrollPoints: ScrollPoints = {}, scrollSpeed?: number): void {
-    const position = event.pageY - this.window.scrollY;
+    const currentPosition = event.pageY - this.window.scrollY;
 
-    if (this.isTopScrollNeeded(position, scrollPoints.top)) {
+    if (this.isTopScrollNeeded(currentPosition, scrollPoints.top)) {
       this.window.scrollBy({top: -scrollSpeed || -this.DEFAULT_SCROLLSPEED, behavior: 'smooth'});
       return;
     }
 
-    if (this.isBottomScrollNeeded(position, scrollPoints.bottom)) {
+    if (this.isBottomScrollNeeded(currentPosition, scrollPoints.bottom)) {
       this.window.scrollBy({top: scrollSpeed || this.DEFAULT_SCROLLSPEED, behavior: 'smooth'});
     }
   }
