feat(overlay, toggle): new setOffset method #5833 (#6082)

Author: dafo

CHANGELOG.md

@@ -2,7 +2,6 @@
 
 All notable changes for each version of this project will be documented in this file.
 
-
 ## 9.0.0
 
 ### General
@@ -17,6 +16,11 @@ All notable changes for each version of this project will be documented in this
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Behavioral Change** - Pinning columns is no longer automatically prevented when the pinning area would exceed the size of the grid.
 
+### New Features
+- `IgxOverlayService`:
+    - `setOffset` method added. It repositions the content in the horizontal and vertical directions.
+- `IgxToggleDirective`:
+    - `setOffset` method added. It repositions the content in the horizontal and vertical directions.
 
 ## 8.2.6
 

projects/igniteui-angular/src/lib/directives/toggle/README.md

@@ -15,7 +15,7 @@ Basic initialization
 </div>
 ```
 
-Opne/Close toggle through public methods that are provided by exporting the directive with name **toggle**.
+Open/Close toggle through public methods that are provided by exporting the directive with name **toggle**.
 ```html
 <button (click)="toggleRef.open()">Open</button>
 <button (click)="toggleRef.close()">Close</button>
@@ -49,6 +49,8 @@ handlers when the toggle is opened and respectively closed.
 | `close` | --- | `void` | Closes the toggle. |
 | `toggle` | overlaySettings?: `OverlaySettings` | `void` | Closes the toggle. |
 | `reposition` | --- | `void` | Repositions the toggle. |
+| `setOffset`  | Repositions the content in the horizontal and/or vertical directions. |deltaX, deltaY |
+
 
 
 # IgxToggleAction Directive

projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts

@@ -276,6 +276,13 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
         this.overlayService.reposition(this._overlayId);
     }
 
+    /**
+     * Repositions the content in the horizontal and/or vertical directions.
+     */
+    setOffset(deltaX: number, deltaY: number) {
+        this.overlayService.setOffset(this._overlayId, deltaX, deltaY);
+    }
+
     /**
      * @hidden
      */

projects/igniteui-angular/src/lib/services/overlay/README.md

@@ -96,6 +96,7 @@ this.overlay.show(component, overlaySettings);
 |hide             | Remove the provided native element of for the component with provided id        |id               |
 |hideAll          | Remove the all native elements and hides the overlay                            |-                |
 |reposition       | Repositions the native element of the component with provided id                |id               |
+|setOffset        | Repositions the content in the horizontal and/or vertical directions.          |id, deltaX, deltaY |
 
 ###### IPositionStrategy
 

projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts

@@ -504,6 +504,48 @@ describe('igxOverlay', () => {
             expect(BaseFitPositionStrategy.prototype.position).toHaveBeenCalledTimes(3);
         });
 
+        it('Should properly call setOffset method', fakeAsync(() => {
+            const fix = TestBed.createComponent(WidthTestOverlayComponent);
+            const overlayInstance = fix.componentInstance.overlay;
+            const id = fix.componentInstance.overlay.attach(SimpleRefComponent);
+
+            overlayInstance.show(id);
+
+            fix.detectChanges();
+            tick();
+
+            overlayInstance.setOffset(id, 40, 40);
+            const overlayContent: Element = document.getElementsByClassName(CLASS_OVERLAY_CONTENT_MODAL)[0];
+            const component = document.getElementsByClassName('simpleRef')[0];
+            const contentRectOverlay = overlayContent.getBoundingClientRect();
+            const componentRectOverlay = component.getBoundingClientRect();
+            let overlayContentTransform = (<any>overlayContent).style.transform;
+            const firstTransform = 'translate(40px, 40px)';
+            const secondTransform = 'translate(30px, 60px)';
+
+            expect(contentRectOverlay.top).toEqual(componentRectOverlay.top);
+            expect(contentRectOverlay.left).toEqual(componentRectOverlay.left);
+            expect(overlayContentTransform).toEqual(firstTransform);
+
+            // Set the offset again and verify it is changed correctly
+            overlayInstance.setOffset(id, -10, 20);
+            fix.detectChanges();
+            tick();
+            const contentRectOverlayNew = overlayContent.getBoundingClientRect();
+            const componentRectOverlayNew = component.getBoundingClientRect();
+            overlayContentTransform = (<any>overlayContent).style.transform;
+
+            expect(contentRectOverlayNew.top).toEqual(componentRectOverlayNew.top);
+            expect(contentRectOverlayNew.left).toEqual(componentRectOverlayNew.left);
+
+            expect(contentRectOverlayNew.top).not.toEqual(contentRectOverlay.top);
+            expect(contentRectOverlayNew.left).not.toEqual(contentRectOverlay.left);
+
+            expect(componentRectOverlayNew.top).not.toEqual(componentRectOverlay.top);
+            expect(componentRectOverlayNew.left).not.toEqual(componentRectOverlay.left);
+            expect(overlayContentTransform).toEqual(secondTransform);
+        }));
+
         it('fix for #1690 - click on second filter does not close first one.', fakeAsync(() => {
             const fixture = TestBed.createComponent(TwoButtonsComponent);
             const button1 = fixture.nativeElement.getElementsByClassName('buttonOne')[0];
@@ -3451,7 +3493,7 @@ export class SimpleDynamicComponent {
 }
 
 @Component({
-    template: `<div #item style='position: absolute; width:100px; height: 100px; background-color: red'></div>`
+    template: `<div #item class="simpleRef" style='position: absolute; width:100px; height: 100px; background-color: red'></div>`
 })
 export class SimpleRefComponent {
     @ViewChild('item', { static: true })

projects/igniteui-angular/src/lib/services/overlay/overlay.ts

@@ -245,6 +245,29 @@ export class IgxOverlayService implements OnDestroy {
             false);
     }
 
+    /**
+     * Repositions the content in the horizontal and/or vertical directions.
+     * ```typescript
+     * this.overlay.setOffset(id, x, y);
+     * ```
+     */
+    setOffset(id: string, deltaX: number, deltaY: number) {
+        const info: OverlayInfo = this.getOverlayById(id);
+
+        if (!info) {
+           return;
+        }
+
+        info.transformX += deltaX;
+        info.transformY += deltaY;
+
+        const transformX = info.transformX;
+        const transformY = info.transformY;
+
+        const translate = `translate(${transformX}px, ${transformY}px)`;
+        info.elementRef.nativeElement.parentElement.style.transform = translate;
+    }
+
     private _show(info: OverlayInfo) {
         const eventArgs: OverlayCancelableEventArgs = { id: info.id, componentRef: info.componentRef, cancel: false };
         this.onOpening.emit(eventArgs);
@@ -334,7 +357,7 @@ export class IgxOverlayService implements OnDestroy {
     }
 
     private getOverlayInfo(component: any, moduleRef?: Pick<NgModuleRef<any>, 'injector' | 'componentFactoryResolver'>): OverlayInfo {
-        const info: OverlayInfo = { ngZone: this._zone };
+        const info: OverlayInfo = { ngZone: this._zone, transformX: 0, transformY: 0 };
         if (component instanceof ElementRef) {
             info.elementRef = <ElementRef>component;
         } else {

projects/igniteui-angular/src/lib/services/overlay/utilities.ts

@@ -102,6 +102,8 @@ export interface OverlayInfo {
     openAnimationInnerPlayer?: any;
     closeAnimationInnerPlayer?: any;
     ngZone: NgZone;
+    transformX?: number;
+    transformY?: number;
 }
 
 /** @hidden */