Merge pull request #17 from kreuzerk/feature/customScrollPoints

Feature/custom scroll points

README.md

@@ -8,7 +8,7 @@
 
 ![Grid demo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/grid-demo.gif)
 
-Read the README or just simply check out our demo at: https://kreuzerk.github.io/ng-sortgrid/ 
+[Demo](https://kreuzerk.github.io/ng-sortgrid/)
 
 - [Getting started](#getting-started)
   - [Download the module](#download-the-module)
@@ -80,3 +80,21 @@ Alternative you can provide custom styles for the different classes listed bello
 | ng-sg-placeholder | This class is added to the placeholder item which previews where the item is inserted                                                          |
 | ng-sg-dropped     | This class is added as soon after you drop an item. The class will be on the item for 500 milliseconds before it gets removed                  |
 | ng-sg-selected    | This class is added when you press the CMD or the Ctrl Key and Click on an item. It indicates which items are selected for the multi drag&drop |
+
+# Scrolling
+The ng-sortgrid has a *autoScroll* flag which you can use to enable autoScroll. If you enable autoScroll the screen will start to scroll 
+in the following scenario. 
+
+![Grid demo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/scrolling.png)
+
+- If you drag an element in the top 50px of the screen
+- If you drag an element in the bottom 50px of the screen
+
+## Custom scroll points
+Sometimes its not enough to onyl scroll once you drag over the top view port border. Imagine that you have a fixed navbar 
+at the top of your page. In this case you need to scroll once you drag an element over the navbar.
+
+## Scroll speed (*default 50*)
+The *scrollSpeed* property accepts a number and allows you to specify the scrolling speed.
+
+[Check out the scroll demo](https://kreuzerk.github.io/ng-sortgrid/scrolling)

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;
+}
+

projects/ng-sortgrid-demo/src/app/app.component.html

@@ -1,34 +1,4 @@
-<ngsg-demo-nav></ngsg-demo-nav>
-<ngsg-demo-header></ngsg-demo-header>
-
-<div class="container">
-  <h1>1. Getting started</h1>
-  <ngsg-demo-step title="Loop over your elements with *ngFor. 🛎️ the items needs to be an array. Alternate you can also use the async pipe - see below" image="gs1.png"></ngsg-demo-step>
-  <ngsg-demo-step title="Apply the ngSortgridItem directive" image="gs2.png"></ngsg-demo-step>
-  <ngsg-demo-memory></ngsg-demo-memory>
-
-  <hr class="chaptor-separator"/>
-
-  <h1>2. React on changes</h1>
-  <p>In most cases you are interested in the new sort order. Often you want to store them in local storage or even send them
-  to the backend. To do so the following two steps are needed in addition to the "Getting started" step.</p>
-  <ngsg-demo-step title="Pass your items to the directive via the ngSortGridItems input." image="gs3.png"></ngsg-demo-step>
-  <ngsg-demo-step title="React on the 'sorted' output events" image="gs4.png"></ngsg-demo-step>
-  <ngsg-demo-react-on-changes-memory></ngsg-demo-react-on-changes-memory>
-
-  <hr class="chaptor-separator"/>
-  <h1>3. Group sortgrids</h1>
-  <p>In case you have more than one sortgriditem on the page you need to group the sortgriditems to avoid dropping drags from
-  one group in another group.</p>
-  <ngsg-demo-step title="Pass in a unique name to the ngSortGridGroup input" image="gs5.png"></ngsg-demo-step>
-  <ngsg-demo-groups-memory></ngsg-demo-groups-memory>
-
-  <hr class="chaptor-separator"/>
-  <h1>4. Use the async pipe</h1>
-  <ngsg-demo-step title="Use the async pipe to loop over the items and to pass in the ngSortGridItems" image="gs6.png"></ngsg-demo-step>
-  <ngsg-demo-async></ngsg-demo-async>
-</div>
-
+<router-outlet></router-outlet>
 <footer class="py-5 bg-dark">
   <div class="container">
     <p class="m-0 text-center text-white">Made with ♥️ by <a href="https://twitter.com/KevinKreuzer90" target="_blank">Kevin Kreuzer</a></p>

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];

projects/ng-sortgrid-demo/src/app/app.module.ts

@@ -2,30 +2,11 @@ import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 
 import {AppComponent} from './app.component';
-import {NgsgModule} from '../../../ng-sortgrid/src/lib/ngsg.module';
-import {NavComponent} from './nav/nav.component';
-import {HeaderComponent} from './header/header.component';
-import {GettingStartedMemoryComponent} from './examples/getting-started/getting-started-memory.component';
-import {StepComponent} from './examples/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 {AppRoutingModule} from './app.routing.module';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    NavComponent,
-    HeaderComponent,
-    GettingStartedMemoryComponent,
-    StepComponent,
-    ReactOnChangesMemoryComponent,
-    GroupsMemoryComponent,
-    CardComponent,
-    AsyncPipeMemoryComponent
-  ],
-  imports: [BrowserModule, NgsgModule],
-  providers: [],
+  declarations: [AppComponent],
+  imports: [BrowserModule, AppRoutingModule],
   bootstrap: [AppComponent]
 })
 export class AppModule {

projects/ng-sortgrid-demo/src/app/app.routing.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+
+
+@NgModule({
+  imports: [RouterModule.forRoot([
+    {path: '', loadChildren: './introduction/introduction.module#IntroductionModule'},
+    {path: 'scrolling', loadChildren: './scrolling/scrolling.module#ScrollingModule'}
+  ])],
+  exports: [RouterModule]
+})
+export class AppRoutingModule {
+}

projects/ng-sortgrid-demo/src/app/examples/async-pipe/async-pipe-memory.component.ts → 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 {
 

projects/ng-sortgrid-demo/src/app/examples/getting-started/getting-started-memory.component.ts → 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 {
 

projects/ng-sortgrid-demo/src/app/examples/groups/groups-memory.component.ts → 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 {
 

projects/ng-sortgrid-demo/src/app/examples/react-on-changes/react-on-changes-memory.component.ts → 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 {
 

projects/ng-sortgrid-demo/src/app/introduction/introduction.component.html

@@ -0,0 +1,39 @@
+<ngsg-demo-nav></ngsg-demo-nav>
+<ngsg-demo-header></ngsg-demo-header>
+
+<div class="container">
+  <h1>1. Getting started</h1>
+  <ngsg-demo-step title="Loop over your elements with *ngFor. 🛎️ the items needs to be an array. Alternate you can also use the async pipe - see below" image="gs1.png"></ngsg-demo-step>
+  <ngsg-demo-step title="Apply the ngSortgridItem directive" image="gs2.png"></ngsg-demo-step>
+  <ngsg-demo-memory></ngsg-demo-memory>
+
+  <hr class="chaptor-separator"/>
+
+  <h1>2. React on changes</h1>
+  <p>In most cases you are interested in the new sort order. Often you want to store them in local storage or even send them
+    to the backend. To do so the following two steps are needed in addition to the "Getting started" step.</p>
+  <ngsg-demo-step title="Pass your items to the directive via the ngSortGridItems input." image="gs3.png"></ngsg-demo-step>
+  <ngsg-demo-step title="React on the 'sorted' output events" image="gs4.png"></ngsg-demo-step>
+  <ngsg-demo-react-on-changes-memory></ngsg-demo-react-on-changes-memory>
+
+  <hr class="chaptor-separator"/>
+  <h1>3. Group sortgrids</h1>
+  <p>In case you have more than one sortgriditem on the page you need to group the sortgriditems to avoid dropping drags from
+    one group in another group.</p>
+  <ngsg-demo-step title="Pass in a unique name to the ngSortGridGroup input" image="gs5.png"></ngsg-demo-step>
+  <ngsg-demo-groups-memory></ngsg-demo-groups-memory>
+
+  <hr class="chaptor-separator"/>
+  <h1>4. Use the async pipe</h1>
+  <ngsg-demo-step title="Use the async pipe to loop over the items and to pass in the ngSortGridItems" image="gs6.png"></ngsg-demo-step>
+  <ngsg-demo-async></ngsg-demo-async>
+
+  <hr class="chaptor-separator"/>
+  <h1>5. Scrolling</h1>
+  <p>
+    The scrolling demo is in a separate page because we need more items and a sticky navheader.
+  </p>
+
+  <button routerLink="scrolling" class="btn btn-primary" style="margin-bottom: 50px">Check out the demo...</button>
+
+</div>

projects/ng-sortgrid-demo/src/app/introduction/introduction.component.spec.ts

@@ -0,0 +1,26 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IntroductionComponent } from './introduction.component';
+import {IntroductionModule} from './introduction.module';
+
+describe('IntroductionComponent', () => {
+  let component: IntroductionComponent;
+  let fixture: ComponentFixture<IntroductionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [IntroductionModule]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(IntroductionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ng-sortgrid-demo/src/app/introduction/introduction.component.ts

@@ -0,0 +1,14 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-introduction',
+  templateUrl: './introduction.component.html'
+})
+export class IntroductionComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

projects/ng-sortgrid-demo/src/app/introduction/introduction.module.ts

@@ -0,0 +1,28 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {IntroductionComponent} from './introduction.component';
+import {GettingStartedMemoryComponent} from './examples/getting-started/getting-started-memory.component';
+import {ReactOnChangesMemoryComponent} from './examples/react-on-changes/react-on-changes-memory.component';
+import {GroupsMemoryComponent} from './examples/groups/groups-memory.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,
+    GettingStartedMemoryComponent,
+    ReactOnChangesMemoryComponent,
+    GroupsMemoryComponent,
+    AsyncPipeMemoryComponent
+  ],
+  imports: [
+    CommonModule,
+    IntroductionRoutingModule,
+    NgsgModule,
+    SharedModule
+  ]
+})
+export class IntroductionModule {
+}

projects/ng-sortgrid-demo/src/app/introduction/introduction.routing.module.ts

@@ -0,0 +1,12 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {IntroductionComponent} from './introduction.component';
+
+@NgModule({
+  imports: [RouterModule.forChild([
+    {path: '', component: IntroductionComponent}
+  ])],
+  exports: [RouterModule]
+})
+export class IntroductionRoutingModule {
+}

projects/ng-sortgrid-demo/src/app/scrolling/scrolling.component.html

@@ -0,0 +1,17 @@
+<ngsg-demo-nav [fixed]="true" [height]="height + 'px'" subtitle="Scrolling demo"></ngsg-demo-nav>
+<div class="container" style="margin-top: 400px">
+  <h1>Scrolling</h1>
+  <ngsg-demo-step title="Sample code to enable scrolling with a custom top scroll point." image="scrolling-code.png"></ngsg-demo-step>
+  <ngsg-demo-step title="Scroll down to the bottom of the page, drag an item over the blue header (which is the top scroll point) and watch it scroll 😊"></ngsg-demo-step>
+  <div class="example-container">
+    <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>

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();
+  });
+});