feat:(sortgrid) ng-sg-active class implementation

Author: Aleš

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 

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

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

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 = {

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', () => {

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

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

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