From 1a8660b5877f4dd9fe836f37409dbd2b27991072 Mon Sep 17 00:00:00 2001 From: kreuzerk Date: Thu, 3 Oct 2019 13:39:50 +0200 Subject: [PATCH 1/9] feat(scrollpoint): handle custom scroll points --- .../src/lib/helpers/scroll-helper.service.ts | 19 +++++++++++-------- .../src/lib/ngsg-item.directive.ts | 9 ++++++++- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/projects/ng-sortgrid/src/lib/helpers/scroll-helper.service.ts b/projects/ng-sortgrid/src/lib/helpers/scroll-helper.service.ts index 646022f..37ad813 100644 --- a/projects/ng-sortgrid/src/lib/helpers/scroll-helper.service.ts +++ b/projects/ng-sortgrid/src/lib/helpers/scroll-helper.service.ts @@ -13,28 +13,31 @@ export class ScrollHelperService { private window: WindowProxy; private DEFAULT_SCROLLSPEED = 50; + private SCROLL_BUFFER = 50; constructor(@Inject(DOCUMENT) private document) { this.window = document.defaultView; } - public scrollIfNecessary(element: HTMLElement, scrollPoints: ScrollPoints = {}, scrollSpeed?: number): void { - const bounding = element.getBoundingClientRect(); - if (this.isTopScrollNeeded(bounding.top, scrollPoints.top)) { + public scrollIfNecessary(event: any, scrollPoints: ScrollPoints = {}, scrollSpeed?: number): void { + const position = event.pageY - this.window.scrollY; + + if (this.isTopScrollNeeded(position, scrollPoints.top)) { this.window.scrollBy({top: -scrollSpeed || -this.DEFAULT_SCROLLSPEED, behavior: 'smooth'}); return; } - if (this.isBottomScrollNeeded(bounding.top, scrollPoints.bottom)) { + if (this.isBottomScrollNeeded(position, scrollPoints.bottom)) { this.window.scrollBy({top: scrollSpeed || this.DEFAULT_SCROLLSPEED, behavior: 'smooth'}); } } - private isTopScrollNeeded(topBounding: number, scrollPointTop: number): boolean { - return scrollPointTop ? topBounding < scrollPointTop : topBounding < 0; + private isTopScrollNeeded(currentPosition: number, scrollPointTop: number): boolean { + return scrollPointTop ? currentPosition < scrollPointTop + this.SCROLL_BUFFER : currentPosition < 20; } - private isBottomScrollNeeded(bottomBounding: number, scrollPointBottom: number): boolean { - return scrollPointBottom ? bottomBounding < scrollPointBottom : bottomBounding > this.window.innerHeight; + private isBottomScrollNeeded(currentPosition: number, scrollPointBottom: number): boolean { + return scrollPointBottom ? + currentPosition < scrollPointBottom : currentPosition > this.window.innerHeight - this.SCROLL_BUFFER; } } diff --git a/projects/ng-sortgrid/src/lib/ngsg-item.directive.ts b/projects/ng-sortgrid/src/lib/ngsg-item.directive.ts index 895115f..270aa69 100644 --- a/projects/ng-sortgrid/src/lib/ngsg-item.directive.ts +++ b/projects/ng-sortgrid/src/lib/ngsg-item.directive.ts @@ -28,7 +28,9 @@ export class NgsgItemDirective implements OnInit, OnChanges, AfterViewInit, OnDe @Input() ngSortGridGroup = 'defaultGroup'; @Input() ngSortGridItems; @Input() scrollPointTop; + @Input() scrollPointBottom; @Input() scrollSpeed; + @Input() autoScroll = false; @Output() sorted = new EventEmitter(); @@ -91,7 +93,12 @@ export class NgsgItemDirective implements OnInit, OnChanges, AfterViewInit, OnDe @HostListener('drag', ['$event']) drag(event): void { - this.scrollHelperService.scrollIfNecessary(event.target, {top: this.scrollPointTop}, this.scrollSpeed); + if (this.autoScroll) { + this.scrollHelperService.scrollIfNecessary(event, { + top: this.scrollPointTop, + bottom: this.scrollPointBottom + }, this.scrollSpeed); + } } @HostListener('dragover', ['$event']) From a885d0c61c09d81adce9c0ae9e3cd51daa9c674c Mon Sep 17 00:00:00 2001 From: kreuzerk Date: Thu, 3 Oct 2019 14:03:08 +0200 Subject: [PATCH 2/9] test(scrollpoint): test scroll behaviour and custom scroll points --- .../lib/helpers/scroll-helper.service.spec.ts | 62 +++++++++++-------- .../src/lib/helpers/scroll-helper.service.ts | 7 ++- .../src/lib/ngsg-item.directive.spec.ts | 42 ++++++++----- 3 files changed, 67 insertions(+), 44 deletions(-) diff --git a/projects/ng-sortgrid/src/lib/helpers/scroll-helper.service.spec.ts b/projects/ng-sortgrid/src/lib/helpers/scroll-helper.service.spec.ts index c15d1a1..01bdf78 100644 --- a/projects/ng-sortgrid/src/lib/helpers/scroll-helper.service.spec.ts +++ b/projects/ng-sortgrid/src/lib/helpers/scroll-helper.service.spec.ts @@ -10,7 +10,7 @@ describe('Scroll helper', () => { innerWidth: 0, scrollBy: () => { } - } + } as any }; let scrollSpy: SpyObj; @@ -21,28 +21,32 @@ describe('Scroll helper', () => { describe('Top scroll', () => { - it('should scroll to the top with the default scroll speed when we drag over the top viewport', () => { - const element = { - getBoundingClientRect: () => ({top: -100, left: 0, bottom: 0, right: 0}) - } as any; - sut.scrollIfNecessary(element); + it(`should scroll to the top with the default scroll speed when we drag over + the top viewport + scroll buffer`, () => { + documentMock.defaultView.scrollY = 0; + const event = { + pageY: 40 + }; + sut.scrollIfNecessary(event); expect(scrollSpy).toHaveBeenCalledWith({top: -50, behavior: 'smooth'}); }); it('should scroll to the top with the default scroll speed when we drag over the top scroll position', () => { - const element = { - getBoundingClientRect: () => ({top: 120, left: 0, bottom: 0, right: 0}) - } as any; - sut.scrollIfNecessary(element, {top: 140}); + documentMock.defaultView.scrollY = 0; + const event = { + pageY: 110 + }; + sut.scrollIfNecessary(event, {top: 140}); expect(scrollSpy).toHaveBeenCalledWith({top: -50, behavior: 'smooth'}); }); it('should scroll to the top with the custom scroll speed when we drag over the top viewport', () => { - const element = { - getBoundingClientRect: () => ({top: -100, left: 0, bottom: 0, right: 0}) - } as any; + documentMock.defaultView.scrollY = 0; + const event = { + pageY: 40 + }; const scrollSpeed = 100; - sut.scrollIfNecessary(element, {}, scrollSpeed); + sut.scrollIfNecessary(event, {}, scrollSpeed); expect(scrollSpy).toHaveBeenCalledWith({top: -scrollSpeed, behavior: 'smooth'}); }); @@ -50,28 +54,32 @@ describe('Scroll helper', () => { describe('Bottom scroll', () => { - it('should scroll to the bottom with the default scroll speed when we drag over the bottom viewport', () => { - const element = { - getBoundingClientRect: () => ({top: 100, left: 0, bottom: 20, right: 0}) - } as any; - sut.scrollIfNecessary(element); + it('should scroll to the bottom with the default scroll speed when we drag over the bottom viewport - scroll buffer', () => { + documentMock.defaultView.scrollY = 0; + documentMock.defaultView.innerHeight = 100; + const event = { + pageY: 80 + }; + sut.scrollIfNecessary(event); expect(scrollSpy).toHaveBeenCalledWith({top: 50, behavior: 'smooth'}); }); it('should scroll to the bottom with the default scroll speed when we drag over the bottom scroll position', () => { - const element = { - getBoundingClientRect: () => ({top: 120, left: 0, bottom: 200, right: 0}) - } as any; - sut.scrollIfNecessary(element, {bottom: 140}); + documentMock.defaultView.scrollY = 0; + const event = { + pageY: 141 + }; + sut.scrollIfNecessary(event, {bottom: 140}); expect(scrollSpy).toHaveBeenCalledWith({top: 50, behavior: 'smooth'}); }); it('should scroll to the top with the custom scroll speed when we drag over the top viewport', () => { - const element = { - getBoundingClientRect: () => ({top: 20, left: 0, bottom: 20, right: 0}) - } as any; + documentMock.defaultView.scrollY = 0; + const event = { + pageY: 110 + }; const scrollSpeed = 100; - sut.scrollIfNecessary(element, {}, scrollSpeed); + sut.scrollIfNecessary(event, {}, scrollSpeed); expect(scrollSpy).toHaveBeenCalledWith({top: scrollSpeed, behavior: 'smooth'}); }); diff --git a/projects/ng-sortgrid/src/lib/helpers/scroll-helper.service.ts b/projects/ng-sortgrid/src/lib/helpers/scroll-helper.service.ts index 37ad813..91d6c40 100644 --- a/projects/ng-sortgrid/src/lib/helpers/scroll-helper.service.ts +++ b/projects/ng-sortgrid/src/lib/helpers/scroll-helper.service.ts @@ -33,11 +33,12 @@ export class ScrollHelperService { } private isTopScrollNeeded(currentPosition: number, scrollPointTop: number): boolean { - return scrollPointTop ? currentPosition < scrollPointTop + this.SCROLL_BUFFER : currentPosition < 20; + return scrollPointTop ? currentPosition < scrollPointTop : + currentPosition < this.SCROLL_BUFFER; } private isBottomScrollNeeded(currentPosition: number, scrollPointBottom: number): boolean { - return scrollPointBottom ? - currentPosition < scrollPointBottom : currentPosition > this.window.innerHeight - this.SCROLL_BUFFER; + return scrollPointBottom ? currentPosition > scrollPointBottom : + currentPosition > this.window.innerHeight - this.SCROLL_BUFFER; } } diff --git a/projects/ng-sortgrid/src/lib/ngsg-item.directive.spec.ts b/projects/ng-sortgrid/src/lib/ngsg-item.directive.spec.ts index 13eb58f..f1be2ff 100644 --- a/projects/ng-sortgrid/src/lib/ngsg-item.directive.spec.ts +++ b/projects/ng-sortgrid/src/lib/ngsg-item.directive.spec.ts @@ -1,11 +1,11 @@ import {NgsgItemDirective} from './ngsg-item.directive'; -import createSpyObj = jasmine.createSpyObj; import {NgsgSortService} from './ngsg-sort.service'; import {NgsgSelectionService} from './ngsg-selection.service'; import {NgsgReflectService} from './ngsg-reflect.service'; import {NgsgStoreService} from './ngsg-store.service'; import {NgsgEventsService} from './ngsg-events.service'; +import createSpyObj = jasmine.createSpyObj; import createSpy = jasmine.createSpy; describe('NgsgItemDirective', () => { @@ -220,18 +220,32 @@ describe('NgsgItemDirective', () => { expect(consoleWarnSpy).toHaveBeenCalledWith(expectedWarniningMessage); }); - it('should call the scrollHelper once we drag', () => { - const event = { - target: 'Some target' - }; - const scrollPointTop = 20; - const scrollSpeed = 50; - sut.scrollPointTop = scrollPointTop; - sut.scrollSpeed = scrollSpeed; - spyOn(scrollHelperService, 'scrollIfNecessary'); - - sut.drag(event); - expect(scrollHelperService.scrollIfNecessary) - .toHaveBeenCalledWith(event.target, {top: scrollPointTop}, scrollSpeed); + describe('Drag', () => { + + it('should not call the scrollHelper if autoScroll is set to false', () => { + spyOn(scrollHelperService, 'scrollIfNecessary'); + sut.drag({}); + expect(scrollHelperService.scrollIfNecessary).not.toHaveBeenCalled(); + }); + + it('should call the scrollHelper with the event, the scrollpoints and the scrollspeed', () => { + spyOn(scrollHelperService, 'scrollIfNecessary'); + const event = 'A very cool event'; + const scrollPointTop = 10; + const scrollPointBottom = 80; + const scrollSpeed = 100; + + sut.scrollPointTop = scrollPointTop; + sut.scrollPointBottom = scrollPointBottom; + sut.scrollSpeed = scrollSpeed; + sut.autoScroll = true; + + sut.drag(event); + expect(scrollHelperService.scrollIfNecessary).toHaveBeenCalledWith(event, { + top: scrollPointTop, + bottom: scrollPointBottom + }, scrollSpeed); + }); + }); }); From cb73fbcfc849602b3632d936133bf20f7b4244b4 Mon Sep 17 00:00:00 2001 From: kreuzerk Date: Thu, 3 Oct 2019 14:33:10 +0200 Subject: [PATCH 3/9] chore(filestructure): reorganize files --- projects/ng-sortgrid/README.md | 2 ++ .../{ => helpers/class}/ngsg-class.service.spec.ts | 0 .../lib/{ => helpers/class}/ngsg-class.service.ts | 1 - .../element}/ngsg-elements.helper.spec.ts | 0 .../{ => helpers/element}/ngsg-elements.helper.ts | 0 .../{ => scroll}/scroll-helper.service.spec.ts | 0 .../helpers/{ => scroll}/scroll-helper.service.ts | 0 .../{ => mutliselect}/ngsg-selection.service.spec.ts | 8 ++++---- .../lib/{ => mutliselect}/ngsg-selection.service.ts | 7 +++---- .../ng-sortgrid/src/lib/ngsg-item.directive.spec.ts | 10 +++++----- projects/ng-sortgrid/src/lib/ngsg-item.directive.ts | 12 ++++++------ .../src/lib/{ => shared}/ngsg-dragelement.model.ts | 0 .../src/lib/{ => shared}/ngsg-events.service.ts | 0 .../reflection}/ngsg-reflect.service.spec.ts | 6 +++--- .../{ => sort/reflection}/ngsg-reflect.service.ts | 8 +++----- .../lib/{ => sort/sort}/ngsg-sort.service.spec.ts | 6 +++--- .../src/lib/{ => sort/sort}/ngsg-sort.service.ts | 8 ++++---- .../src/lib/{ => store}/ngsg-store.service.spec.ts | 1 - .../src/lib/{ => store}/ngsg-store.service.ts | 2 +- 19 files changed, 34 insertions(+), 37 deletions(-) rename projects/ng-sortgrid/src/lib/{ => helpers/class}/ngsg-class.service.spec.ts (100%) rename projects/ng-sortgrid/src/lib/{ => helpers/class}/ngsg-class.service.ts (95%) rename projects/ng-sortgrid/src/lib/{ => helpers/element}/ngsg-elements.helper.spec.ts (100%) rename projects/ng-sortgrid/src/lib/{ => helpers/element}/ngsg-elements.helper.ts (100%) rename projects/ng-sortgrid/src/lib/helpers/{ => scroll}/scroll-helper.service.spec.ts (100%) rename projects/ng-sortgrid/src/lib/helpers/{ => scroll}/scroll-helper.service.ts (100%) rename projects/ng-sortgrid/src/lib/{ => mutliselect}/ngsg-selection.service.spec.ts (95%) rename projects/ng-sortgrid/src/lib/{ => mutliselect}/ngsg-selection.service.ts (92%) rename projects/ng-sortgrid/src/lib/{ => shared}/ngsg-dragelement.model.ts (100%) rename projects/ng-sortgrid/src/lib/{ => shared}/ngsg-events.service.ts (100%) rename projects/ng-sortgrid/src/lib/{ => sort/reflection}/ngsg-reflect.service.spec.ts (94%) rename projects/ng-sortgrid/src/lib/{ => sort/reflection}/ngsg-reflect.service.ts (89%) rename projects/ng-sortgrid/src/lib/{ => sort/sort}/ngsg-sort.service.spec.ts (94%) rename projects/ng-sortgrid/src/lib/{ => sort/sort}/ngsg-sort.service.ts (87%) rename projects/ng-sortgrid/src/lib/{ => store}/ngsg-store.service.spec.ts (98%) rename projects/ng-sortgrid/src/lib/{ => store}/ngsg-store.service.ts (96%) diff --git a/projects/ng-sortgrid/README.md b/projects/ng-sortgrid/README.md index ae2f80d..a234105 100644 --- a/projects/ng-sortgrid/README.md +++ b/projects/ng-sortgrid/README.md @@ -2,6 +2,8 @@ [![codecov](https://codecov.io/gh/kreuzerk/ng-sortgrid/branch/master/graph/badge.svg)](https://codecov.io/gh/kreuzerk/ng-sortgrid) [![angular7](https://img.shields.io/badge/angular%207%20ready-true-green.svg)]() +# Ng-sortgrid + ![Logo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/logo-new.png) ![Grid demo](https://raw.githubusercontent.com/kreuzerk/ng-sortgrid/master/projects/ng-sortgrid-demo/src/assets/grid-demo.gif) diff --git a/projects/ng-sortgrid/src/lib/ngsg-class.service.spec.ts b/projects/ng-sortgrid/src/lib/helpers/class/ngsg-class.service.spec.ts similarity index 100% rename from projects/ng-sortgrid/src/lib/ngsg-class.service.spec.ts rename to projects/ng-sortgrid/src/lib/helpers/class/ngsg-class.service.spec.ts diff --git a/projects/ng-sortgrid/src/lib/ngsg-class.service.ts b/projects/ng-sortgrid/src/lib/helpers/class/ngsg-class.service.ts similarity index 95% rename from projects/ng-sortgrid/src/lib/ngsg-class.service.ts rename to projects/ng-sortgrid/src/lib/helpers/class/ngsg-class.service.ts index 37b80b2..dee9816 100644 --- a/projects/ng-sortgrid/src/lib/ngsg-class.service.ts +++ b/projects/ng-sortgrid/src/lib/helpers/class/ngsg-class.service.ts @@ -7,7 +7,6 @@ export class NgsgClassService { private SELECTED_DEFAULT_CLASS = 'ng-sg-selected'; private PLACEHOLDER_DEFAULT_CLASS = 'ng-sg-placeholder'; private DROPPED_DEFAULT_CLASS = 'ng-sg-dropped'; - private ACTIVE_DEFAULT_CLASS = 'ng-sg-active'; public addPlaceHolderClass(element: Element): void { element.classList.add(this.PLACEHOLDER_DEFAULT_CLASS); diff --git a/projects/ng-sortgrid/src/lib/ngsg-elements.helper.spec.ts b/projects/ng-sortgrid/src/lib/helpers/element/ngsg-elements.helper.spec.ts similarity index 100% rename from projects/ng-sortgrid/src/lib/ngsg-elements.helper.spec.ts rename to projects/ng-sortgrid/src/lib/helpers/element/ngsg-elements.helper.spec.ts diff --git a/projects/ng-sortgrid/src/lib/ngsg-elements.helper.ts b/projects/ng-sortgrid/src/lib/helpers/element/ngsg-elements.helper.ts similarity index 100% rename from projects/ng-sortgrid/src/lib/ngsg-elements.helper.ts rename to projects/ng-sortgrid/src/lib/helpers/element/ngsg-elements.helper.ts diff --git a/projects/ng-sortgrid/src/lib/helpers/scroll-helper.service.spec.ts b/projects/ng-sortgrid/src/lib/helpers/scroll/scroll-helper.service.spec.ts similarity index 100% rename from projects/ng-sortgrid/src/lib/helpers/scroll-helper.service.spec.ts rename to projects/ng-sortgrid/src/lib/helpers/scroll/scroll-helper.service.spec.ts diff --git a/projects/ng-sortgrid/src/lib/helpers/scroll-helper.service.ts b/projects/ng-sortgrid/src/lib/helpers/scroll/scroll-helper.service.ts similarity index 100% rename from projects/ng-sortgrid/src/lib/helpers/scroll-helper.service.ts rename to projects/ng-sortgrid/src/lib/helpers/scroll/scroll-helper.service.ts diff --git a/projects/ng-sortgrid/src/lib/ngsg-selection.service.spec.ts b/projects/ng-sortgrid/src/lib/mutliselect/ngsg-selection.service.spec.ts similarity index 95% rename from projects/ng-sortgrid/src/lib/ngsg-selection.service.spec.ts rename to projects/ng-sortgrid/src/lib/mutliselect/ngsg-selection.service.spec.ts index 7c04621..c894945 100644 --- a/projects/ng-sortgrid/src/lib/ngsg-selection.service.spec.ts +++ b/projects/ng-sortgrid/src/lib/mutliselect/ngsg-selection.service.spec.ts @@ -1,10 +1,10 @@ import createSpyObj = jasmine.createSpyObj; +import createSpy = jasmine.createSpy; import {NgsgSelectionService} from './ngsg-selection.service'; -import {NgsgClassService} from './ngsg-class.service'; -import {NgsgStoreService} from './ngsg-store.service'; -import createSpy = jasmine.createSpy; -import {NgsgElementsHelper} from './ngsg-elements.helper'; +import {NgsgClassService} from '../helpers/class/ngsg-class.service'; +import {NgsgStoreService} from '../store/ngsg-store.service'; +import {NgsgElementsHelper} from '../helpers/element/ngsg-elements.helper'; describe('NgsgSelectionService', () => { diff --git a/projects/ng-sortgrid/src/lib/ngsg-selection.service.ts b/projects/ng-sortgrid/src/lib/mutliselect/ngsg-selection.service.ts similarity index 92% rename from projects/ng-sortgrid/src/lib/ngsg-selection.service.ts rename to projects/ng-sortgrid/src/lib/mutliselect/ngsg-selection.service.ts index d5e6e54..08c9137 100644 --- a/projects/ng-sortgrid/src/lib/ngsg-selection.service.ts +++ b/projects/ng-sortgrid/src/lib/mutliselect/ngsg-selection.service.ts @@ -1,10 +1,9 @@ import { Injectable } from '@angular/core'; import { fromEvent, merge, NEVER, Observable, Subject } from 'rxjs'; import { filter, mapTo, switchMap } from 'rxjs/operators'; - -import { NgsgStoreService } from './ngsg-store.service'; -import { NgsgClassService } from './ngsg-class.service'; -import { NgsgElementsHelper } from './ngsg-elements.helper'; +import {NgsgClassService} from '../helpers/class/ngsg-class.service'; +import {NgsgStoreService} from '../store/ngsg-store.service'; +import {NgsgElementsHelper} from '../helpers/element/ngsg-elements.helper'; enum ChangeAction { ADD, diff --git a/projects/ng-sortgrid/src/lib/ngsg-item.directive.spec.ts b/projects/ng-sortgrid/src/lib/ngsg-item.directive.spec.ts index f1be2ff..374deb8 100644 --- a/projects/ng-sortgrid/src/lib/ngsg-item.directive.spec.ts +++ b/projects/ng-sortgrid/src/lib/ngsg-item.directive.spec.ts @@ -1,12 +1,12 @@ import {NgsgItemDirective} from './ngsg-item.directive'; -import {NgsgSortService} from './ngsg-sort.service'; -import {NgsgSelectionService} from './ngsg-selection.service'; -import {NgsgReflectService} from './ngsg-reflect.service'; -import {NgsgStoreService} from './ngsg-store.service'; -import {NgsgEventsService} from './ngsg-events.service'; import createSpyObj = jasmine.createSpyObj; import createSpy = jasmine.createSpy; +import {NgsgSortService} from './sort/sort/ngsg-sort.service'; +import {NgsgSelectionService} from './mutliselect/ngsg-selection.service'; +import {NgsgReflectService} from './sort/reflection/ngsg-reflect.service'; +import {NgsgStoreService} from './store/ngsg-store.service'; +import {NgsgEventsService} from './shared/ngsg-events.service'; describe('NgsgItemDirective', () => { let sut: NgsgItemDirective; diff --git a/projects/ng-sortgrid/src/lib/ngsg-item.directive.ts b/projects/ng-sortgrid/src/lib/ngsg-item.directive.ts index 270aa69..947b7e2 100644 --- a/projects/ng-sortgrid/src/lib/ngsg-item.directive.ts +++ b/projects/ng-sortgrid/src/lib/ngsg-item.directive.ts @@ -12,14 +12,14 @@ import { SimpleChanges } from '@angular/core'; -import {NgsgReflectService} from './ngsg-reflect.service'; -import {NgsgStoreService} from './ngsg-store.service'; -import {NgsgSortService} from './ngsg-sort.service'; -import {NgsgSelectionService} from './ngsg-selection.service'; -import {NgsgEventsService} from './ngsg-events.service'; -import {ScrollHelperService} from './helpers/scroll-helper.service'; import {Subject} from 'rxjs'; import {takeUntil} from 'rxjs/operators'; +import {NgsgSortService} from './sort/sort/ngsg-sort.service'; +import {NgsgSelectionService} from './mutliselect/ngsg-selection.service'; +import {NgsgReflectService} from './sort/reflection/ngsg-reflect.service'; +import {NgsgStoreService} from './store/ngsg-store.service'; +import {NgsgEventsService} from './shared/ngsg-events.service'; +import {ScrollHelperService} from './helpers/scroll/scroll-helper.service'; const selector = '[ngSortgridItem]'; diff --git a/projects/ng-sortgrid/src/lib/ngsg-dragelement.model.ts b/projects/ng-sortgrid/src/lib/shared/ngsg-dragelement.model.ts similarity index 100% rename from projects/ng-sortgrid/src/lib/ngsg-dragelement.model.ts rename to projects/ng-sortgrid/src/lib/shared/ngsg-dragelement.model.ts diff --git a/projects/ng-sortgrid/src/lib/ngsg-events.service.ts b/projects/ng-sortgrid/src/lib/shared/ngsg-events.service.ts similarity index 100% rename from projects/ng-sortgrid/src/lib/ngsg-events.service.ts rename to projects/ng-sortgrid/src/lib/shared/ngsg-events.service.ts diff --git a/projects/ng-sortgrid/src/lib/ngsg-reflect.service.spec.ts b/projects/ng-sortgrid/src/lib/sort/reflection/ngsg-reflect.service.spec.ts similarity index 94% rename from projects/ng-sortgrid/src/lib/ngsg-reflect.service.spec.ts rename to projects/ng-sortgrid/src/lib/sort/reflection/ngsg-reflect.service.spec.ts index 7b38d54..ecb933b 100644 --- a/projects/ng-sortgrid/src/lib/ngsg-reflect.service.spec.ts +++ b/projects/ng-sortgrid/src/lib/sort/reflection/ngsg-reflect.service.spec.ts @@ -1,9 +1,9 @@ import createSpyObj = jasmine.createSpyObj; -import {NgsgStoreService} from './ngsg-store.service'; import {NgsgReflectService} from './ngsg-reflect.service'; -import {NgsgDragelement} from './ngsg-dragelement.model'; -import {NgsgElementsHelper} from './ngsg-elements.helper'; +import {NgsgStoreService} from '../../store/ngsg-store.service'; +import {NgsgDragelement} from '../../shared/ngsg-dragelement.model'; +import {NgsgElementsHelper} from '../../helpers/element/ngsg-elements.helper'; describe('NgsgReflectService', () => { diff --git a/projects/ng-sortgrid/src/lib/ngsg-reflect.service.ts b/projects/ng-sortgrid/src/lib/sort/reflection/ngsg-reflect.service.ts similarity index 89% rename from projects/ng-sortgrid/src/lib/ngsg-reflect.service.ts rename to projects/ng-sortgrid/src/lib/sort/reflection/ngsg-reflect.service.ts index 0c774e6..7e48d60 100644 --- a/projects/ng-sortgrid/src/lib/ngsg-reflect.service.ts +++ b/projects/ng-sortgrid/src/lib/sort/reflection/ngsg-reflect.service.ts @@ -1,9 +1,7 @@ import { Injectable } from '@angular/core'; - -import { NgsgStoreService } from './ngsg-store.service'; -import { NgsgSelectionService } from './ngsg-selection.service'; -import { NgsgDragelement } from './ngsg-dragelement.model'; -import { NgsgElementsHelper } from './ngsg-elements.helper'; +import {NgsgStoreService} from '../../store/ngsg-store.service'; +import {NgsgDragelement} from '../../shared/ngsg-dragelement.model'; +import {NgsgElementsHelper} from '../../helpers/element/ngsg-elements.helper'; @Injectable({ providedIn: 'root' diff --git a/projects/ng-sortgrid/src/lib/ngsg-sort.service.spec.ts b/projects/ng-sortgrid/src/lib/sort/sort/ngsg-sort.service.spec.ts similarity index 94% rename from projects/ng-sortgrid/src/lib/ngsg-sort.service.spec.ts rename to projects/ng-sortgrid/src/lib/sort/sort/ngsg-sort.service.spec.ts index 06a998f..8a5cc07 100644 --- a/projects/ng-sortgrid/src/lib/ngsg-sort.service.spec.ts +++ b/projects/ng-sortgrid/src/lib/sort/sort/ngsg-sort.service.spec.ts @@ -1,8 +1,8 @@ import {NgsgSortService} from './ngsg-sort.service'; import createSpyObj = jasmine.createSpyObj; -import {NgsgClassService} from './ngsg-class.service'; -import {NgsgStoreService} from './ngsg-store.service'; -import {NgsgElementsHelper} from './ngsg-elements.helper'; +import {NgsgClassService} from '../../helpers/class/ngsg-class.service'; +import {NgsgStoreService} from '../../store/ngsg-store.service'; +import {NgsgElementsHelper} from '../../helpers/element/ngsg-elements.helper'; describe('NgsgSortService', () => { diff --git a/projects/ng-sortgrid/src/lib/ngsg-sort.service.ts b/projects/ng-sortgrid/src/lib/sort/sort/ngsg-sort.service.ts similarity index 87% rename from projects/ng-sortgrid/src/lib/ngsg-sort.service.ts rename to projects/ng-sortgrid/src/lib/sort/sort/ngsg-sort.service.ts index 8998c81..38afa08 100644 --- a/projects/ng-sortgrid/src/lib/ngsg-sort.service.ts +++ b/projects/ng-sortgrid/src/lib/sort/sort/ngsg-sort.service.ts @@ -1,10 +1,10 @@ import { Injectable } from '@angular/core'; import { timer } from 'rxjs'; -import { NgsgStoreService } from './ngsg-store.service'; -import { NgsgClassService } from './ngsg-class.service'; -import { NgsgDragelement } from './ngsg-dragelement.model'; -import { NgsgElementsHelper } from './ngsg-elements.helper'; +import {NgsgDragelement} from '../../shared/ngsg-dragelement.model'; +import {NgsgClassService} from '../../helpers/class/ngsg-class.service'; +import {NgsgStoreService} from '../../store/ngsg-store.service'; +import {NgsgElementsHelper} from '../../helpers/element/ngsg-elements.helper'; @Injectable({ providedIn: 'root' diff --git a/projects/ng-sortgrid/src/lib/ngsg-store.service.spec.ts b/projects/ng-sortgrid/src/lib/store/ngsg-store.service.spec.ts similarity index 98% rename from projects/ng-sortgrid/src/lib/ngsg-store.service.spec.ts rename to projects/ng-sortgrid/src/lib/store/ngsg-store.service.spec.ts index f39cfd6..fc182f2 100644 --- a/projects/ng-sortgrid/src/lib/ngsg-store.service.spec.ts +++ b/projects/ng-sortgrid/src/lib/store/ngsg-store.service.spec.ts @@ -1,5 +1,4 @@ import {NgsgStoreService} from './ngsg-store.service'; -import {NgsgDragelement} from './ngsg-dragelement.model'; describe('NgsgStoreService', () => { diff --git a/projects/ng-sortgrid/src/lib/ngsg-store.service.ts b/projects/ng-sortgrid/src/lib/store/ngsg-store.service.ts similarity index 96% rename from projects/ng-sortgrid/src/lib/ngsg-store.service.ts rename to projects/ng-sortgrid/src/lib/store/ngsg-store.service.ts index 2bbfb8a..894f786 100644 --- a/projects/ng-sortgrid/src/lib/ngsg-store.service.ts +++ b/projects/ng-sortgrid/src/lib/store/ngsg-store.service.ts @@ -1,5 +1,5 @@ import {Injectable} from '@angular/core'; -import {NgsgDragelement} from './ngsg-dragelement.model'; +import {NgsgDragelement} from '../shared/ngsg-dragelement.model'; // TODO add interfaces for classes export interface NgsgState { From 612e1f243752844a8b4aecff994605eb06c317a6 Mon Sep 17 00:00:00 2001 From: kreuzerk Date: Thu, 3 Oct 2019 15:33:23 +0200 Subject: [PATCH 4/9] refactor(showcase): add introduction module --- .../src/app/app.component.html | 32 +----------------- .../ng-sortgrid-demo/src/app/app.module.ts | 25 ++------------ .../src/app/app.routing.module.ts | 12 +++++++ .../async-pipe-memory.component.css | 0 .../async-pipe-memory.component.html | 0 .../async-pipe/async-pipe-memory.component.ts | 0 .../examples/card/card.component.css | 0 .../examples/card/card.component.html | 0 .../examples/card/card.component.ts | 0 .../getting-started-memory.component.html | 0 .../getting-started-memory.component.ts | 0 .../groups/groups-memory.component.html | 0 .../groups/groups-memory.component.ts | 0 .../examples/memory-demo.css | 0 .../react-on-changes-memory.component.html | 0 .../react-on-changes-memory.component.ts | 0 .../introduction.routing.module.ts | 11 ++++++ .../{ => shared}/header/header.component.html | 0 .../{ => shared}/header/header.component.ts | 0 .../app/{ => shared}/nav/nav.component.html | 0 .../src/app/{ => shared}/nav/nav.component.ts | 0 .../step/step.component.css | 0 .../step/step.component.html | 0 .../step/step.component.ts | 0 .../ng-sortgrid-demo/src/assets/scrolling.png | Bin 0 -> 508404 bytes projects/ng-sortgrid/README.md | 18 ++++++++++ 26 files changed, 45 insertions(+), 53 deletions(-) create mode 100644 projects/ng-sortgrid-demo/src/app/app.routing.module.ts rename projects/ng-sortgrid-demo/src/app/{ => introduction}/examples/async-pipe/async-pipe-memory.component.css (100%) rename projects/ng-sortgrid-demo/src/app/{ => introduction}/examples/async-pipe/async-pipe-memory.component.html (100%) rename projects/ng-sortgrid-demo/src/app/{ => introduction}/examples/async-pipe/async-pipe-memory.component.ts (100%) rename projects/ng-sortgrid-demo/src/app/{ => introduction}/examples/card/card.component.css (100%) rename projects/ng-sortgrid-demo/src/app/{ => introduction}/examples/card/card.component.html (100%) rename projects/ng-sortgrid-demo/src/app/{ => introduction}/examples/card/card.component.ts (100%) rename projects/ng-sortgrid-demo/src/app/{ => introduction}/examples/getting-started/getting-started-memory.component.html (100%) rename projects/ng-sortgrid-demo/src/app/{ => introduction}/examples/getting-started/getting-started-memory.component.ts (100%) rename projects/ng-sortgrid-demo/src/app/{ => introduction}/examples/groups/groups-memory.component.html (100%) rename projects/ng-sortgrid-demo/src/app/{ => introduction}/examples/groups/groups-memory.component.ts (100%) rename projects/ng-sortgrid-demo/src/app/{ => introduction}/examples/memory-demo.css (100%) rename projects/ng-sortgrid-demo/src/app/{ => introduction}/examples/react-on-changes/react-on-changes-memory.component.html (100%) rename projects/ng-sortgrid-demo/src/app/{ => introduction}/examples/react-on-changes/react-on-changes-memory.component.ts (100%) create mode 100644 projects/ng-sortgrid-demo/src/app/introduction/introduction.routing.module.ts rename projects/ng-sortgrid-demo/src/app/{ => shared}/header/header.component.html (100%) rename projects/ng-sortgrid-demo/src/app/{ => shared}/header/header.component.ts (100%) rename projects/ng-sortgrid-demo/src/app/{ => shared}/nav/nav.component.html (100%) rename projects/ng-sortgrid-demo/src/app/{ => shared}/nav/nav.component.ts (100%) rename projects/ng-sortgrid-demo/src/app/{examples => shared}/step/step.component.css (100%) rename projects/ng-sortgrid-demo/src/app/{examples => shared}/step/step.component.html (100%) rename projects/ng-sortgrid-demo/src/app/{examples => shared}/step/step.component.ts (100%) create mode 100644 projects/ng-sortgrid-demo/src/assets/scrolling.png diff --git a/projects/ng-sortgrid-demo/src/app/app.component.html b/projects/ng-sortgrid-demo/src/app/app.component.html index 94c3ff7..4a64577 100644 --- a/projects/ng-sortgrid-demo/src/app/app.component.html +++ b/projects/ng-sortgrid-demo/src/app/app.component.html @@ -1,34 +1,4 @@ - - - -
-

1. Getting started

- - - - -
- -

2. React on changes

-

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.

- - - - -
-

3. Group sortgrids

-

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.

- - - -
-

4. Use the async pipe

- - -
- +