fix(module): non-target offset inside nested container (#80)

As pointed out, the offset for nested elements was incorrectly calculated. This PR fixes the calculations.

.circleci/config.yml

@@ -38,8 +38,12 @@ references:
     run:
       name: Update Chrome Driver
       command: |
-        wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
-        sudo dpkg -i google-chrome-stable_current_amd64.deb
+        sudo apt-get update
+        sudo apt-get install lsb-release libappindicator3-1
+        curl -L -o google-chrome.deb https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
+        sudo dpkg -i google-chrome.deb
+        sudo sed -i 's|HERE/chrome"|HERE/chrome" --no-sandbox|g' /opt/google/chrome/google-chrome
+        rm google-chrome.deb
 
 # Jobs
 jobs:

src/app/+container-offset/container-offset-routing.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+import { ContainerOffsetComponent } from './container-offset.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: ContainerOffsetComponent
+  },
+  {
+    path: '**',
+    redirectTo: '',
+    pathMatch: 'full'
+  }
+];
+
+@NgModule({
+  imports: [
+    RouterModule.forChild(routes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class ContainerOffsetRoutingModule { }

src/app/+container-offset/container-offset.component.html

@@ -0,0 +1,22 @@
+<h1>Hello {{name}}!</h1>
+<p #dialogContentForScroll class="scrollContent">
+  <span>Lorem ipsum dolor sit amet<br/></span>
+  <span>Lorem ipsum dolor sit amet<br/></span>
+  <span>Lorem ipsum dolor sit amet<br/></span>
+  <span>Lorem ipsum dolor sit amet<br/></span>
+  <span>Lorem ipsum dolor sit amet<br/></span>
+  <span>Lorem ipsum dolor sit amet<br/></span>
+  <span>Lorem ipsum dolor sit amet<br/></span>
+  <span>Lorem ipsum dolor sit amet<br/></span>
+  <span>Lorem ipsum dolor sit amet<br/></span>
+  <span>Lorem ipsum dolor sit amet<br/></span>
+  <span>Lorem ipsum dolor sit amet<br/></span>
+  <span>Lorem ipsum dolor sit amet<br/></span>
+  <span>Lorem ipsum dolor sit amet<br/></span>
+  <span>Lorem ipsum dolor sit amet<br/></span>
+  <span>Lorem ipsum dolor sit amet<br/></span>
+  <span>Lorem ipsum dolor sit amet<br/></span>
+  <span>Lorem ipsum dolor sit amet<br/></span>
+  <span id="target">Target Node</span>
+</p>
+<div class="space">This is just some space div</div>

src/app/+container-offset/container-offset.component.scss

@@ -0,0 +1,17 @@
+:host {
+  display: block;
+}
+
+.scrollContent {
+  height: 200px;
+  overflow-y: scroll;
+}
+
+#target {
+  display: block;
+  height: 500px;
+}
+
+.space {
+  height: 2000px;
+}

src/app/+container-offset/container-offset.component.ts

@@ -0,0 +1,35 @@
+import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+
+import { ScrollToService } from '../modules/scroll-to/scroll-to.service';
+import { ScrollToConfigOptions } from '../modules/scroll-to/models/scroll-to-config.model';
+
+@Component({
+  selector: 'ngx-container-offset',
+  templateUrl: './container-offset.component.html',
+  styleUrls: ['./container-offset.component.scss']
+})
+export class ContainerOffsetComponent implements AfterViewInit {
+
+  @ViewChild('dialogContentForScroll') dialogContent: ElementRef;
+  scrollPosition: number;
+  name = 'Angular 5';
+
+  constructor(private readonly scrollToService: ScrollToService) {
+    this.scrollPosition = 107;
+  }
+
+  ngAfterViewInit(): void {
+
+    const dialogElement = this.dialogContent.nativeElement as HTMLElement;
+
+    dialogElement.onscroll = () => {
+      this.scrollPosition = dialogElement.scrollTop;
+    };
+
+    this.scrollToService.scrollTo({
+      offset: this.scrollPosition,
+      container: dialogElement
+    } as ScrollToConfigOptions);
+
+  }
+}

src/app/+container-offset/container-offset.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import {
+  ContainerOffsetRoutingModule
+} from './container-offset-routing.module';
+import {
+  ContainerOffsetComponent
+} from './container-offset.component';
+import { ScrollToModule } from '../modules/scroll-to/scroll-to.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ContainerOffsetRoutingModule,
+    ScrollToModule.forRoot()
+  ],
+  declarations: [
+    ContainerOffsetComponent
+  ]
+})
+export class ContainerOffsetModule { }

src/app/+container-target/container-target.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, ElementRef } from '@angular/core';
+import { Component, ElementRef } from '@angular/core';
 
 import { ScrollToService } from '../modules/scroll-to/scroll-to.service';
 
@@ -7,20 +7,17 @@ import { ScrollToService } from '../modules/scroll-to/scroll-to.service';
   templateUrl: './container-target.component.html',
   styleUrls: ['./container-target.component.scss']
 })
-export class ContainerTargetComponent implements OnInit {
+export class ContainerTargetComponent {
 
   constructor(private _scrollToService: ScrollToService) { }
 
-  public ngOnInit() {
-
-  }
-
   public scrollToElementInAnotherContainer(container, event) {
 
     const sub = this._scrollToService.scrollTo({
       container: '#another-scroll-container',
       target: 'another-scroll-container-destination',
-      easing: 'easeOutElastic'
+      easing: 'easeOutElastic',
+      duration: 3000
     });
 
     sub.subscribe(

src/app/app-routing.module.ts

@@ -10,6 +10,10 @@ export const routes: Routes = [
     path: 'container-target',
     loadChildren: './+container-target/container-target.module#ContainerTargetModule'
   },
+  {
+    path: 'container-offset',
+    loadChildren: './+container-offset/container-offset.module#ContainerOffsetModule'
+  },
   {
     path: 'offset-only',
     loadChildren: './+offset-only/offset-only.module#OffsetOnlyModule'

src/app/app.component.html

@@ -6,6 +6,9 @@ <h1>
     <li>
       <a [routerLink]="['/container-target']">Container Target</a>
     </li>
+    <li>
+      <a [routerLink]="['/container-offset']">Container Offset</a>
+    </li>
     <li>
       <a [routerLink]="['/offset-only']">Offset Only</a>
     </li>

src/app/modules/scroll-to/scroll-to.service.ts

@@ -107,7 +107,7 @@ export class ScrollToService {
 
     const listenerTarget = this._getListenerTarget(container) || window;
 
-    let to = 0;
+    let to = container ? container.getBoundingClientRect().top : 0;
 
     if (targetNode) {
       to = isWindow(listenerTarget) ? targetNode.offsetTop : targetNode.getBoundingClientRect().top;

src/app/modules/scroll-to/statics/scroll-to-animation.ts

@@ -112,7 +112,6 @@ export class ScrollToAnimation {
 
     // Set offset from Offset Map
     if (this._isBrowser) {
-
       this._options
         .offsetMap
         .forEach((value, key) => this._mappedOffset = window.innerWidth > key ? value : this._mappedOffset);