Merge pull request #195 from MurhafSousli/dev

5.0.2
MurhafSousli · Aug 30, 2019 · 008d414 · 008d414
2 parents fc05425 + cceb7c2
commit 008d414
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 47 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 5.0.2
+
+- Fix reached events in RTL in Mozilla and Safari, closes [#193]() in [8279828](https://github.com/MurhafSousli/ngx-scrollbar/pull/194/commits/8279828d1523897c238bbcfa926f8d3ec45370d1).
+- Fix reached events in AOT, closes #187, closes [#187](https://github.com/MurhafSousli/ngx-scrollbar/issues/187) in [5f67fe3](https://github.com/MurhafSousli/ngx-scrollbar/pull/192/commits/5f67fe3bbfae81a99e2943b872ccfc9a1578f21a).
+- Refactor scroll viewport layout with absolute positioning, closes [#189](https://github.com/MurhafSousli/ngx-scrollbar/issues/189) in [c9c4dae](https://github.com/MurhafSousli/ngx-scrollbar/pull/190/commits/c9c4dae14d66a0e506dcccd0912252985e53bf62).
+
 ## 5.0.1
 
 - fix: Hovering on a scrollbar highlights both scrollbars, closes [#181](https://github.com/MurhafSousli/ngx-scrollbar/issues/181) in [b533413](https://github.com/MurhafSousli/ngx-scrollbar/pull/182/commits/b53341346abf33be59eb760b7c64c08816a2059d).

diff --git a/projects/ngx-scrollbar-demo/src/app/example-x/example-x.component.html b/projects/ngx-scrollbar-demo/src/app/example-x/example-x.component.html
@@ -2,15 +2,6 @@
   <mat-card>
     <mat-card-header>
       <mat-card-title>Lab</mat-card-title>
-<!--      <span style="flex: 1"></span>-->
-<!--      <mat-button-toggle-group class="toggle-sensor"-->
-<!--                               #positionToggleGroup="matButtonToggleGroup"-->
-<!--                               aria-label="Scrollbar Sensor"-->
-<!--                               [(value)]="sensor">-->
-<!--        <mat-button-toggle value="noSensor">No sensor</mat-button-toggle>-->
-<!--        <mat-button-toggle value="contentSensor">Content sensor</mat-button-toggle>-->
-<!--        <mat-button-toggle value="resizeSensor" checked>Resize sensor</mat-button-toggle>-->
-<!--      </mat-button-toggle-group>-->
     </mat-card-header>
 
     <mat-divider></mat-divider>
@@ -43,6 +34,15 @@
                [style.width.%]="slider.contentWidth"
                [innerHTML]="content"></div>
         </ng-scrollbar>
+
+        <mat-divider></mat-divider>
+
+        <div class="smooth-scroll-buttons">
+          <button mat-flat-button (click)="scrollToTop()">ScrollToTop</button>
+          <button mat-flat-button (click)="scrollToBottom()">ScrollToBottom</button>
+          <button mat-flat-button (click)="scrollToLeft()">ScrollToLeft</button>
+          <button mat-flat-button (click)="scrollToRight()">ScrollToRight</button>
+        </div>
       </div>
 
       <mat-divider vertical></mat-divider>

diff --git a/projects/ngx-scrollbar-demo/src/app/example-x/example-x.component.scss b/projects/ngx-scrollbar-demo/src/app/example-x/example-x.component.scss
@@ -1,4 +1,4 @@
-$scrollable-height: 270px;
+$scrollable-height: 220px;
 
 .exampleX {
 
@@ -27,24 +27,6 @@ $scrollable-height: 270px;
       }
     }
 
-    .mat-button-toggle-group.toggle-sensor {
-      height: 26px;
-
-      .mat-button-toggle {
-        background-color: var(--color-examplex-primary);
-      }
-
-      .mat-button-toggle.mat-button-toggle-checked {
-        background-color: var(--color-accent);
-      }
-
-      .mat-button-toggle-label-content {
-        line-height: 26px;
-        font-size: 12px;
-        padding: 0;
-      }
-    }
-
     .highlight-layout {
       border: 2px groove var(--color-accent);
 
@@ -85,6 +67,7 @@ $scrollable-height: 270px;
   }
 
   .scrollbar-wrapper {
+    position: relative;
     flex: 1;
     height: $scrollable-height;
     max-height: $scrollable-height;
@@ -140,3 +123,21 @@ $scrollable-height: 270px;
   display: block;
   margin: 6px;
 }
+
+.smooth-scroll-buttons {
+  display: flex;
+  align-items: center;
+  button {
+    flex: 1;
+    font-size: 12px;
+    padding: 6px;
+    height: 30px;
+    line-height: 15px;
+    margin-top: 8px;
+    margin-bottom: 8px;
+    margin-right: 8px;
+    &:first-child {
+      margin-left: 8px;
+    }
+  }
+}
diff --git a/projects/ngx-scrollbar-demo/src/app/example-x/example-x.component.ts b/projects/ngx-scrollbar-demo/src/app/example-x/example-x.component.ts
@@ -1,12 +1,13 @@
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
 import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
 import { of, BehaviorSubject } from 'rxjs';
 import { take, tap, delay } from 'rxjs/operators';
 import {
   ScrollbarAppearance,
   ScrollbarTrack,
   ScrollbarPosition,
-  ScrollbarVisibility
+  ScrollbarVisibility,
+  NgScrollbar
 } from '../../../../ngx-scrollbar/src/public-api';
 // import {
 //   ScrollbarAppearance,
@@ -23,12 +24,12 @@ import { ReachedEvent } from './reached-notifier/reached-notifier.component';
   templateUrl: './example-x.component.html',
   styleUrls: ['./example-x.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    '[class.example-component]': 'true'
-  }
+  host: { '[class.example-component]': 'true' }
 })
 export class ExampleXComponent {
 
+  @ViewChild(NgScrollbar, { static: true }) scrollable: NgScrollbar;
+
   // Testing options
   slider: ResizeChange = {
     componentSize: 100,
@@ -71,6 +72,23 @@ export class ExampleXComponent {
       tap(() => this.reached.next({ ...this.reached.value, [eventName]: false }))
     ).subscribe();
   }
+
+  scrollToTop() {
+    this.scrollable.scrollToTop(0, 300);
+  }
+
+  scrollToBottom() {
+    this.scrollable.scrollToBottom(0, 300);
+  }
+
+  scrollToRight() {
+    this.scrollable.scrollToRight(0, 300);
+  }
+
+  scrollToLeft() {
+    this.scrollable.scrollToLeft(0, 300);
+  }
+
 }
 
 const content = `

diff --git a/projects/ngx-scrollbar-demo/src/app/shared/shared.module.ts b/projects/ngx-scrollbar-demo/src/app/shared/shared.module.ts
@@ -3,12 +3,18 @@ import { CommonModule } from '@angular/common';
 import { BidiModule } from '@angular/cdk/bidi';
 import {
   MatButtonModule,
-  MatButtonToggleModule,
   MatCardModule,
-  MatExpansionModule, MatInputModule, MatListModule,
-  MatSlideToggleModule, MatTabsModule,
+  MatExpansionModule,
+  MatInputModule,
+  MatListModule,
+  MatSlideToggleModule,
+  MatTabsModule,
   MatToolbarModule,
-  MatChipsModule, MatIconModule, MatCheckboxModule, MatSliderModule
+  MatChipsModule,
+  MatIconModule,
+  MatCheckboxModule,
+  MatSliderModule,
+  MatButtonToggleModule
 } from '@angular/material';
 
 import { HeaderComponent } from './header/header.component';
@@ -20,28 +26,22 @@ import { AuthorComponent } from './author/author.component';
 import { NgScrollbarModule } from '../../../../ngx-scrollbar/src/public-api';
 import { NgScrollbarReachedModule } from '../../../../ngx-scrollbar/reached-event/src/public_api';
 
-// import { NgScrollbarModule } from 'ngx-scrollbar';
-// import { NgScrollbarResizeSensorModule } from 'ngx-scrollbar/resize-sensor';
-// import { NgScrollbarContentSensorModule } from 'ngx-scrollbar/content-sensor';
-// import { NgScrollbarReachedModule } from 'ngx-scrollbar/reached-event';
-
 @NgModule({
   imports: [
     CommonModule,
     BidiModule,
     MatCardModule,
     MatButtonModule,
-    MatButtonToggleModule,
     MatSlideToggleModule,
     MatExpansionModule,
     MatToolbarModule,
     MatListModule,
     MatTabsModule,
     MatInputModule,
-    MatButtonToggleModule,
     MatChipsModule,
     MatSliderModule,
     NgScrollbarModule,
+    MatButtonToggleModule,
     NgScrollbarReachedModule
   ],
   exports: [
@@ -52,19 +52,18 @@ import { NgScrollbarReachedModule } from '../../../../ngx-scrollbar/reached-even
     LogoComponent,
     MatCardModule,
     MatButtonModule,
-    MatButtonToggleModule,
     MatSlideToggleModule,
     MatExpansionModule,
     MatToolbarModule,
     MatListModule,
     MatTabsModule,
     MatInputModule,
     MatCheckboxModule,
-    MatButtonToggleModule,
     MatChipsModule,
     MatIconModule,
     MatSliderModule,
     NgScrollbarModule,
+    MatButtonToggleModule,
     NgScrollbarReachedModule
   ],
   declarations: [

diff --git a/projects/ngx-scrollbar/package.json b/projects/ngx-scrollbar/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ngx-scrollbar",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "peerDependencies": {
     "@angular/common": "^8.0.0",
     "@angular/core": "^8.0.0",