From 3e00db07840fb6e61b1ab76478931735ccd6ffe9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ale=C5=A1?= Date: Thu, 7 Oct 2021 14:16:57 +0200 Subject: [PATCH] feat:(sortgrid) ng-sg-active class implementation --- README.md | 1 + .../lib/helpers/class/ngsg-class.service.spec.ts | 13 +++++++++++++ .../src/lib/helpers/class/ngsg-class.service.ts | 9 +++++++++ .../mutliselect/ngsg-selection.service.spec.ts | 2 ++ .../src/lib/ngsg-item.directive.spec.ts | 9 +++++++-- .../ng-sortgrid/src/lib/ngsg-item.directive.ts | 15 +++++++++------ .../src/lib/sort/sort/ngsg-sort.service.spec.ts | 16 +++++++++------- .../src/lib/sort/sort/ngsg-sort.service.ts | 1 + 8 files changed, 51 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index df9ed8c..e70853e 100644 --- a/README.md +++ b/README.md @@ -87,6 +87,7 @@ 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 | +| ng-sg-active | This class is added when dragging item| | # 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 diff --git a/projects/ng-sortgrid/src/lib/helpers/class/ngsg-class.service.spec.ts b/projects/ng-sortgrid/src/lib/helpers/class/ngsg-class.service.spec.ts index 108ddc0..966dd55 100644 --- a/projects/ng-sortgrid/src/lib/helpers/class/ngsg-class.service.spec.ts +++ b/projects/ng-sortgrid/src/lib/helpers/class/ngsg-class.service.spec.ts @@ -49,4 +49,17 @@ describe('NgsgClassService', () => { expect(removeClassSpy).toHaveBeenCalledWith('ng-sg-selected'); }); + it('should add the active class', () => { + const addClassSpy = createSpy(); + const element = {classList: {add: addClassSpy}} as any; + sut.addActiveClass(element); + expect(addClassSpy).toHaveBeenCalledWith('ng-sg-active'); + }); + + it('should remove the active class', () => { + const removeClassSpy = createSpy(); + const element = {classList: {remove: removeClassSpy}} as any; + sut.removeActiveClass(element); + expect(removeClassSpy).toHaveBeenCalledWith('ng-sg-active'); + }); }); diff --git a/projects/ng-sortgrid/src/lib/helpers/class/ngsg-class.service.ts b/projects/ng-sortgrid/src/lib/helpers/class/ngsg-class.service.ts index dee9816..f7bd972 100644 --- a/projects/ng-sortgrid/src/lib/helpers/class/ngsg-class.service.ts +++ b/projects/ng-sortgrid/src/lib/helpers/class/ngsg-class.service.ts @@ -7,6 +7,7 @@ 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); @@ -32,4 +33,12 @@ export class NgsgClassService { element.classList.remove(this.SELECTED_DEFAULT_CLASS); } + public addActiveClass(element: Element): void { + element.classList.add(this.ACTIVE_DEFAULT_CLASS); + } + + public removeActiveClass(element: Element): void { + element.classList.remove(this.ACTIVE_DEFAULT_CLASS); + } + } diff --git a/projects/ng-sortgrid/src/lib/mutliselect/ngsg-selection.service.spec.ts b/projects/ng-sortgrid/src/lib/mutliselect/ngsg-selection.service.spec.ts index 3be702c..6312432 100644 --- a/projects/ng-sortgrid/src/lib/mutliselect/ngsg-selection.service.spec.ts +++ b/projects/ng-sortgrid/src/lib/mutliselect/ngsg-selection.service.spec.ts @@ -5,7 +5,9 @@ import { NgsgSelectionService } from './ngsg-selection.service'; describe('NgsgSelectionService', () => { const ngsgClassService = { addSelectedClass: jest.fn(), + addActiveClass: jest.fn(), removeSelectedClass: jest.fn(), + removeActiveClass: jest.fn(), } as any; const ngsgStore = { 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 0a36406..55b5667 100644 --- a/projects/ng-sortgrid/src/lib/ngsg-item.directive.spec.ts +++ b/projects/ng-sortgrid/src/lib/ngsg-item.directive.spec.ts @@ -29,7 +29,10 @@ describe('NgsgItemDirective', () => { } as any; const ngsgEventService = new NgsgEventsService(); const scrollHelperService = { - scrollIfNecessary: () => {}, + scrollIfNecessary: () => { }, + } as any; + const classService = { + addActiveClass: jest.fn() } as any; beforeEach(() => { @@ -40,7 +43,8 @@ describe('NgsgItemDirective', () => { ngsgReflectService, ngsgStore, ngsgEventService, - scrollHelperService + scrollHelperService, + classService ); }); @@ -69,6 +73,7 @@ describe('NgsgItemDirective', () => { } as any; sut.dragStart(event); expect(ngsgSelectionService.selectElementIfNoSelection).toHaveBeenCalledWith(sortGroup, event.target); + expect(classService.addActiveClass).toHaveBeenCalledWith(event.target); }); it('should init the sort for the current group', () => { diff --git a/projects/ng-sortgrid/src/lib/ngsg-item.directive.ts b/projects/ng-sortgrid/src/lib/ngsg-item.directive.ts index c56893f..96af658 100644 --- a/projects/ng-sortgrid/src/lib/ngsg-item.directive.ts +++ b/projects/ng-sortgrid/src/lib/ngsg-item.directive.ts @@ -22,6 +22,7 @@ import {NgsgOrderChange} from './shared/ngsg-order-change.model'; import {NgsgReflectService} from './sort/reflection/ngsg-reflect.service'; import {NgsgSortService} from './sort/sort/ngsg-sort.service'; import {NgsgStoreService} from './store/ngsg-store.service'; +import { NgsgClassService } from './helpers/class/ngsg-class.service'; const selector = '[ngSortgridItem]'; @@ -46,7 +47,8 @@ export class NgsgItemDirective implements OnInit, OnChanges, AfterViewInit, OnDe private reflectService: NgsgReflectService, private ngsgStore: NgsgStoreService, private ngsgEventService: NgsgEventsService, - private scrollHelperService: ScrollHelperService + private scrollHelperService: ScrollHelperService, + private classService: NgsgClassService ) { } @@ -60,11 +62,11 @@ export class NgsgItemDirective implements OnInit, OnChanges, AfterViewInit, OnDe takeUntil(this.destroy$), takeWhile(() => this.autoScroll) ).subscribe(() => { - this.scrollHelperService.scrollIfNecessary(event, { - top: this.scrollPointTop, - bottom: this.scrollPointBottom - }, this.scrollSpeed); - } + this.scrollHelperService.scrollIfNecessary(event, { + top: this.scrollPointTop, + bottom: this.scrollPointBottom + }, this.scrollSpeed); + } ); } @@ -94,6 +96,7 @@ export class NgsgItemDirective implements OnInit, OnChanges, AfterViewInit, OnDe return; } this.selectionService.selectElementIfNoSelection(this.ngSortGridGroup, event.target); + this.classService.addActiveClass(event.target); this.sortService.initSort(this.ngSortGridGroup); } diff --git a/projects/ng-sortgrid/src/lib/sort/sort/ngsg-sort.service.spec.ts b/projects/ng-sortgrid/src/lib/sort/sort/ngsg-sort.service.spec.ts index bb44dfa..b6101f5 100644 --- a/projects/ng-sortgrid/src/lib/sort/sort/ngsg-sort.service.spec.ts +++ b/projects/ng-sortgrid/src/lib/sort/sort/ngsg-sort.service.spec.ts @@ -8,8 +8,10 @@ describe('NgsgSortService', () => { addPlaceHolderClass: jest.fn(), removePlaceHolderClass: jest.fn(), addDroppedClass: jest.fn(), + addActiveClass: jest.fn(), removeSelectedClass: jest.fn(), removeDroppedClass: jest.fn(), + removeActiveClass: jest.fn(), } as any; const ngsgStore = { getFirstSelectItem: jest.fn(), @@ -21,13 +23,13 @@ describe('NgsgSortService', () => { }); const createElement = (value, nextSibling) => - ({ - value, - nextSibling, - parentNode: { - insertBefore: () => {}, - }, - } as any); + ({ + value, + nextSibling, + parentNode: { + insertBefore: () => {}, + }, + } as any); it('should insert the first element in the middle if we drag it to the right', () => { const group = 'test-group'; diff --git a/projects/ng-sortgrid/src/lib/sort/sort/ngsg-sort.service.ts b/projects/ng-sortgrid/src/lib/sort/sort/ngsg-sort.service.ts index df26dff..d7e82fb 100644 --- a/projects/ng-sortgrid/src/lib/sort/sort/ngsg-sort.service.ts +++ b/projects/ng-sortgrid/src/lib/sort/sort/ngsg-sort.service.ts @@ -58,6 +58,7 @@ export class NgsgSortService { this.classService.removePlaceHolderClass(item); this.classService.addDroppedClass(item); this.classService.removeSelectedClass(item); + this.classService.removeActiveClass(item); timer(500).subscribe(() => this.classService.removeDroppedClass(item)); } }