Merge pull request #17 from kreuzerk/feature/customScrollPoints

Feature/custom scroll points

Author: nivekcode

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