feat(layout): add scroll & ruler services

docs/structure.ts

@@ -366,6 +366,38 @@ export const structure = [
           },
         ],
       },
+      {
+        type: 'page',
+        name: 'LayoutScrollService',
+        children: [
+          {
+            type: 'block',
+            block: 'component',
+            source: 'NbLayoutScrollService',
+          },
+          {
+            type: 'block',
+            block: 'component',
+            source: 'NbScrollPosition',
+          },
+        ],
+      },
+      {
+        type: 'page',
+        name: 'LayoutRulerService',
+        children: [
+          {
+            type: 'block',
+            block: 'component',
+            source: 'NbLayoutRulerService',
+          },
+          {
+            type: 'block',
+            block: 'component',
+            source: 'NbLayoutDimensions',
+          },
+        ],
+      },
     ],
   },
   {

src/framework/theme/components/layout/layout.component.ts

@@ -17,6 +17,8 @@ import { convertToBoolProperty } from '../helpers';
 import { NbThemeService } from '../../services/theme.service';
 import { NbSpinnerService } from '../../services/spinner.service';
 import { NbLayoutDirectionService } from '../../services/direction.service';
+import { NbScrollPosition, NbLayoutScrollService } from '../../services/scroll.service';
+import { NbLayoutDimensions, NbLayoutRulerService } from '../../services/ruler.service';
 import { NB_WINDOW, NB_DOCUMENT } from '../../theme.options';
 
 /**
@@ -248,7 +250,7 @@ export class NbLayoutFooterComponent {
   styleUrls: ['./layout.component.scss'],
   template: `
     <ng-template #layoutTopDynamicArea></ng-template>
-    <div class="scrollable-container" #scrollableContainer>
+    <div class="scrollable-container" #scrollableContainer (scroll)="onScroll($event)">
       <div class="layout">
         <ng-content select="nb-layout-header:not([subheader])"></ng-content>
         <div class="layout-container">
@@ -332,6 +334,8 @@ export class NbLayoutComponent implements AfterViewInit, OnInit, OnDestroy {
     @Inject(NB_DOCUMENT) protected document,
     @Inject(PLATFORM_ID) protected platformId: Object,
     protected layoutDirectionService: NbLayoutDirectionService,
+    protected scrollService: NbLayoutScrollService,
+    protected rulerService: NbLayoutRulerService,
   ) {
 
     this.themeService.onThemeChange()
@@ -371,6 +375,24 @@ export class NbLayoutComponent implements AfterViewInit, OnInit, OnDestroy {
     }));
     this.spinnerService.load();
 
+    this.rulerService.onGetDimensions()
+      .pipe(
+        takeWhile(() => this.alive),
+      )
+      .subscribe(({ listener }) => {
+        listener.next(this.getDimensions());
+        listener.complete();
+      });
+
+    this.scrollService.onGetPosition()
+      .pipe(
+        takeWhile(() => this.alive),
+      )
+      .subscribe(({ listener }) => {
+        listener.next(this.getScrollPosition());
+        listener.complete();
+      });
+
     if (isPlatformBrowser(this.platformId)) {
       // trigger first time so that after the change we have the initial value
       this.themeService.changeWindowWidth(this.window.innerWidth);
@@ -403,6 +425,10 @@ export class NbLayoutComponent implements AfterViewInit, OnInit, OnDestroy {
         this.renderer.setProperty(this.document, 'dir', direction);
       });
 
+    this.scrollService.onManualScroll()
+      .pipe(takeWhile(() => this.alive))
+      .subscribe(({ x, y }: NbScrollPosition) => this.scroll(x, y));
+
     this.afterViewInit$.next(true);
   }
 
@@ -415,19 +441,98 @@ export class NbLayoutComponent implements AfterViewInit, OnInit, OnDestroy {
     this.alive = false;
   }
 
+  @HostListener('window:scroll', ['$event'])
+  onScroll($event) {
+    this.scrollService.fireScrollChange($event);
+  }
+
   @HostListener('window:resize', ['$event'])
   onResize(event) {
     this.themeService.changeWindowWidth(event.target.innerWidth);
   }
 
+  /**
+   * Returns scroll and client height/width
+   *
+   * Depending on the current scroll mode (`withScroll=true`) returns sizes from the body element
+   * or from the `.scrollable-container`
+   * @returns {NbLayoutDimensions}
+   */
+  getDimensions(): NbLayoutDimensions {
+    let clientWidth, clientHeight, scrollWidth, scrollHeight = 0;
+    if (this.withScrollValue) {
+      const container = this.scrollableContainerRef.nativeElement;
+      clientWidth = container.clientWidth;
+      clientHeight = container.clientHeight;
+      scrollWidth = container.scrollWidth;
+      scrollHeight = container.scrollHeight;
+    } else {
+      const { documentElement, body } = this.document;
+      clientWidth = documentElement.clientWidth || body.clientWidth;
+      clientHeight = documentElement.clientHeight || body.clientHeight;
+      scrollWidth = documentElement.scrollWidth || body.scrollWidth;
+      scrollHeight = documentElement.scrollHeight || body.scrollHeight;
+    }
+
+    return {
+      clientWidth,
+      clientHeight,
+      scrollWidth,
+      scrollHeight,
+    };
+  }
+
+  /**
+   * Returns scroll position of current scroll container.
+   *
+   * If `withScroll` = true, returns scroll position of the `.scrollable-container` element,
+   * otherwise - of the scrollable element of the window (which may be different depending of a browser)
+   *
+   * @returns {NbScrollPosition}
+   */
+  getScrollPosition(): NbScrollPosition {
+    if (this.withScrollValue) {
+      const container = this.scrollableContainerRef.nativeElement;
+      return { x: container.scrollLeft, y: container.scrollTop };
+    }
+
+    const documentRect = this.document.documentElement.getBoundingClientRect();
+
+    const x = -documentRect.left || this.document.body.scrollLeft || this.window.scrollX ||
+      this.document.documentElement.scrollLeft || 0;
+
+    const y = -documentRect.top || this.document.body.scrollTop || this.window.scrollY ||
+      this.document.documentElement.scrollTop || 0;
+
+
+    return { x, y };
+  }
+
   private initScrollTop() {
     this.router.events
       .pipe(
         takeWhile(() => this.alive),
         filter(event => event instanceof NavigationEnd),
       )
       .subscribe(() => {
-        this.scrollableContainerRef.nativeElement.scrollTo && this.scrollableContainerRef.nativeElement.scrollTo(0, 0);
+        this.scroll(0, 0);
       });
   }
+
+  private scroll(x: number, y: number) {
+    if (!isPlatformBrowser(this.platformId)) {
+      return;
+    }
+    if (this.withScrollValue) {
+      const scrollable = this.scrollableContainerRef.nativeElement;
+      if (scrollable.scrollTo) {
+        scrollable.scrollTo(x, y);
+      } else {
+        scrollable.scrollLeft = x;
+        scrollable.scrollTop = y;
+      }
+    } else {
+      this.window.scrollTo(x, y);
+    }
+  }
 }

src/framework/theme/index.ts

@@ -11,6 +11,8 @@ export * from './services/spinner.service';
 export * from './services/breakpoints.service';
 export * from './services/color.helper';
 export * from './services/direction.service';
+export * from './services/scroll.service';
+export * from './services/ruler.service';
 export * from './components/card/card.module';
 export * from './components/layout/layout.module';
 export * from './components/menu/menu.module';

src/framework/theme/services/ruler.service.spec.ts

@@ -0,0 +1,133 @@
+import { Component, ElementRef, ViewChild } from '@angular/core';
+import { APP_BASE_HREF } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { TestBed, ComponentFixture, fakeAsync, tick, async, inject } from '@angular/core/testing';
+import { NbLayoutRulerService, NbLayoutDimensions } from './ruler.service';
+import { NbLayoutModule } from '../components/layout/layout.module';
+import { NbThemeService } from './theme.service';
+import { NbThemeModule } from '../theme.module';
+import { NB_DOCUMENT } from '../theme.options';
+
+let currentDocument;
+let fixture: ComponentFixture<RulerTestComponent>;
+let componentInstance: RulerTestComponent;
+let rulerService: NbLayoutRulerService;
+
+@Component({
+  template: `
+    <nb-layout [withScroll]="localScroll" #layout>
+      <nb-layout-column>
+        <div #resize></div>
+      </nb-layout-column>
+    </nb-layout>
+  `,
+})
+class RulerTestComponent {
+
+  @ViewChild('resize', { read: ElementRef }) private resizeElement: ElementRef;
+  @ViewChild('layout', { read: ElementRef }) private layout: ElementRef;
+  localScroll = false;
+
+  setSize(width: string, height: string) {
+    this.resizeElement.nativeElement.style.width = width;
+    this.resizeElement.nativeElement.style.height = height;
+  }
+
+  useLocalScroll() {
+    this.localScroll = true;
+  }
+
+  useGlobalScroll() {
+    this.localScroll = false;
+  }
+
+  getScrollableElement() {
+    return this.layout.nativeElement.querySelector('.scrollable-container');
+  }
+}
+
+// This is rather a smoke test
+describe('NbLayoutRulerService', () => {
+
+  beforeEach(() => {
+    fixture = TestBed.configureTestingModule({
+      imports: [ RouterModule.forRoot([]), NbThemeModule.forRoot({ name: 'default' }), NbLayoutModule ],
+      providers: [ NbLayoutRulerService, NbThemeService, { provide: APP_BASE_HREF, useValue: '/' } ],
+      declarations: [ RulerTestComponent ],
+    })
+      .createComponent(RulerTestComponent);
+
+    componentInstance = fixture.componentInstance;
+
+    fixture.detectChanges();
+  });
+
+  beforeEach(async(inject(
+    [NbLayoutRulerService, NB_DOCUMENT],
+    (_rulerService, _document) => {
+      rulerService = _rulerService;
+      currentDocument = _document;
+    },
+  )));
+
+  afterEach(fakeAsync(() => {
+    fixture.destroy();
+    tick();
+    fixture.nativeElement.remove();
+  }));
+
+  it('should get dimensions from document', (done) => {
+    fixture.detectChanges();
+    rulerService.getDimensions()
+      .subscribe((size: NbLayoutDimensions) => {
+        expect(size.clientHeight).toEqual(currentDocument.documentElement.clientHeight);
+        expect(size.clientWidth).toEqual(currentDocument.documentElement.clientWidth);
+        expect(size.scrollHeight).toEqual(currentDocument.documentElement.scrollHeight);
+        expect(size.scrollWidth).toEqual(currentDocument.documentElement.scrollWidth);
+        done();
+      })
+  });
+
+  it('should get dimensions from document when scrolls', (done) => {
+    componentInstance.setSize('10000px', '10000px');
+    fixture.detectChanges();
+    rulerService.getDimensions()
+      .subscribe((size: NbLayoutDimensions) => {
+        expect(size.clientHeight).toEqual(currentDocument.documentElement.clientHeight);
+        expect(size.clientWidth).toEqual(currentDocument.documentElement.clientWidth);
+        expect(size.scrollHeight).toEqual(currentDocument.documentElement.scrollHeight);
+        expect(size.scrollWidth).toEqual(currentDocument.documentElement.scrollWidth);
+        done();
+      })
+  });
+
+  it('should get dimensions from scrollable', (done) => {
+    componentInstance.useLocalScroll();
+    fixture.detectChanges();
+    const scrollable = componentInstance.getScrollableElement();
+    rulerService.getDimensions()
+      .subscribe((size: NbLayoutDimensions) => {
+        expect(size.clientHeight).toEqual(scrollable.clientHeight);
+        expect(size.clientWidth).toEqual(scrollable.clientWidth);
+        expect(size.scrollHeight).toEqual(scrollable.scrollHeight);
+        expect(size.scrollWidth).toEqual(scrollable.scrollWidth);
+        done();
+      })
+  });
+
+  it('should get dimensions from scrollable when scrolls', (done) => {
+    componentInstance.useLocalScroll();
+    componentInstance.setSize('10000px', '10000px');
+    fixture.detectChanges();
+    const scrollable = componentInstance.getScrollableElement();
+    rulerService.getDimensions()
+      .subscribe((size: NbLayoutDimensions) => {
+        expect(size.clientHeight).toEqual(scrollable.clientHeight);
+        expect(size.clientWidth).toEqual(scrollable.clientWidth);
+        expect(size.scrollHeight).toEqual(scrollable.scrollHeight);
+        expect(size.scrollWidth).toEqual(scrollable.scrollWidth);
+        done();
+      })
+  });
+
+});