-
-
- +
-
+
+
+ +
+
-
-
-
Component
-
-
-
-
- Class:
-
-
- {{ componentClass }}
-
-
-
-
- Description:
-
- OverlayScrollbars as a {{ framework }}-Component.
-
-
-
-
-
-
-
- {{ componentContent }}
- {{ loremIpsumShort }}
-
- {{ componentContent }}
- {{ loremIpsumLong }}
-
- {{ loremIpsumMedium }}
-
-
-
-
-
- Scroll
- Change Options
- Change Content
- Log
-
-
+
+
+
+
Component
+
+
+
+
+ Class:
+
+
+ {{ componentClass }}
+
+
+
+
+ Description:
+
+ OverlayScrollbars as a {{ framework }}-Component.
+
+
+
-
\ No newline at end of file
+
+
+ {{ componentContent }}
+ {{ loremIpsumShort }}
+
+ {{ componentContent }}
+ {{ loremIpsumLong }}
+
+ {{ loremIpsumMedium }}
+
+
+
+
+
+
+ Scroll
+
+ Change Options
+ Change Content
+ Log
+
+
+
+
diff --git a/packages/overlayscrollbars-ngx/example/src/app/app.component.spec.ts b/packages/overlayscrollbars-ngx/example/src/app/app.component.spec.ts
index d51921e..dc3e79b 100644
--- a/packages/overlayscrollbars-ngx/example/src/app/app.component.spec.ts
+++ b/packages/overlayscrollbars-ngx/example/src/app/app.component.spec.ts
@@ -1,31 +1,25 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
- beforeEach(async(() => {
- TestBed.configureTestingModule({
- declarations: [
- AppComponent
- ],
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [AppComponent],
}).compileComponents();
- }));
+ });
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
- const app = fixture.debugElement.componentInstance;
+ const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
- it(`should have as title 'example'`, () => {
- const fixture = TestBed.createComponent(AppComponent);
- const app = fixture.debugElement.componentInstance;
- expect(app.title).toEqual('example');
- });
-
- it('should render title in a h1 tag', () => {
+ it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
- const compiled = fixture.debugElement.nativeElement;
- expect(compiled.querySelector('h1').textContent).toContain('Welcome to example!');
+ const compiled = fixture.nativeElement;
+ expect(compiled.querySelector('.content span').textContent).toContain(
+ 'example app is running!'
+ );
});
});
diff --git a/packages/overlayscrollbars-ngx/example/src/app/app.component.ts b/packages/overlayscrollbars-ngx/example/src/app/app.component.ts
index 03ae382..ec189d9 100644
--- a/packages/overlayscrollbars-ngx/example/src/app/app.component.ts
+++ b/packages/overlayscrollbars-ngx/example/src/app/app.component.ts
@@ -3,90 +3,107 @@ import { OverlayScrollbarsComponent } from 'overlayscrollbars-ngx';
import OverlayScrollbars from 'overlayscrollbars';
@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.css']
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ styleUrls: ['./app.component.css'],
})
export class AppComponent {
- framework: string = 'Angular';
- customClassName: string = 'custom-class-name-test';
- componentClass: string = 'OverlayScrollbarsComponent';
- loremIpsumLong: string = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
- loremIpsumMedium: string = 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.';
- loremIpsumShort: string = 'Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio.';
- loremList: Array
= [];
- hasCustomClassName: boolean = false;
- componentContent: string = 'Lorem Ipsum';
- osComponentOptions: OverlayScrollbars.Options = {
- resize: 'both',
- paddingAbsolute: true,
- scrollbars: {
- autoHide: 'never'
+ framework: string = 'Angular';
+ customClassName: string = 'custom-class-name-test';
+ componentClass: string = 'OverlayScrollbarsComponent';
+ loremIpsumLong: string =
+ 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
+ loremIpsumMedium: string =
+ 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.';
+ loremIpsumShort: string =
+ 'Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio.';
+ loremList: Array = [];
+ hasCustomClassName: boolean = false;
+ componentContent: string = 'Lorem Ipsum';
+ osComponentOptions: OverlayScrollbars.Options = {
+ resize: 'both',
+ paddingAbsolute: true,
+ scrollbars: {
+ autoHide: 'never',
+ },
+ };
+ @ViewChild('osComponentRef1', { read: OverlayScrollbarsComponent })
+ osComponentRef1: OverlayScrollbarsComponent;
+ @ViewChild('osComponentRef2', { read: OverlayScrollbarsComponent })
+ osComponentRef2: OverlayScrollbarsComponent;
+
+ ngAfterViewInit() {
+ console.log(`${this.componentClass} (1)`);
+ console.log(this.osComponentRef1);
+
+ console.log(`${this.componentClass} (2)`);
+ console.log(this.osComponentRef2);
+ }
+
+ onBtnScrollRandom(
+ event: any,
+ refArray: ReadonlyArray
+ ) {
+ if (refArray) {
+ for (let i = 0; i < refArray.length; i++) {
+ if (refArray[i]) {
+ const osInstance = refArray[i].osInstance();
+ osInstance.scrollStop().scroll(
+ {
+ x: Math.floor(Math.random() * osInstance.scroll().max.x + 0),
+ y: Math.floor(Math.random() * osInstance.scroll().max.y + 0),
+ },
+ 1000,
+ 'easeOutElastic'
+ );
}
+ }
+ }
+ }
+
+ onBtnChangeOptions() {
+ this.hasCustomClassName = !this.hasCustomClassName;
+ this.osComponentOptions = {
+ resize: this.osComponentOptions.resize === 'both' ? 'none' : 'both',
+ scrollbars: {
+ autoHide:
+ this.osComponentOptions.scrollbars.autoHide === 'never'
+ ? 'scroll'
+ : 'never',
+ },
};
- @ViewChild('osComponentRef1', { read: OverlayScrollbarsComponent })
- osComponentRef1: OverlayScrollbarsComponent;
- @ViewChild('osComponentRef2', { read: OverlayScrollbarsComponent })
- osComponentRef2: OverlayScrollbarsComponent;
+ }
- ngAfterViewInit() {
- console.log(`${this.componentClass} (1)`);
- console.log(this.osComponentRef1)
+ onBtnChangeContent() {
+ this.componentContent = this.componentContent + '\r\n' + this.randomIpsum();
+ this.loremList.push(this.randomIpsum());
+ }
- console.log(`${this.componentClass} (2)`);
- console.log(this.osComponentRef2);
- }
+ onBtnLog() {
+ console.log(`== ${this.componentClass} (1) ==`);
+ console.log('Ref:');
+ console.log(this.osComponentRef1);
+ console.log('Instance:');
+ console.log(this.osComponentRef1.osInstance());
+ console.log('Target:');
+ console.log(this.osComponentRef1.osTarget());
+ console.log('');
+ console.log(`== ${this.componentClass} (2) ==`);
+ console.log('Ref:');
+ console.log(this.osComponentRef2);
+ console.log('Instance:');
+ console.log(this.osComponentRef2.osInstance());
+ console.log('Target:');
+ console.log(this.osComponentRef2.osTarget());
+ }
- onBtnScrollRandom(event: any, refArray: ReadonlyArray) {
- if (refArray) {
- for (let i = 0; i < refArray.length; i++) {
- if (refArray[i]) {
- const osInstance = refArray[i].osInstance();
- osInstance.scrollStop().scroll({
- x: Math.floor((Math.random() * osInstance.scroll().max.x) + 0),
- y: Math.floor((Math.random() * osInstance.scroll().max.y) + 0)
- }, 1000, 'easeOutElastic');
- }
- }
- }
- }
-
- onBtnChangeOptions() {
- this.hasCustomClassName = !this.hasCustomClassName;
- this.osComponentOptions = {
- resize: this.osComponentOptions.resize === 'both' ? 'none' : 'both',
- scrollbars: {
- autoHide: this.osComponentOptions.scrollbars.autoHide === 'never' ? 'scroll' : 'never',
- }
- }
- }
-
- onBtnChangeContent() {
- this.componentContent = this.componentContent + '\r\n' + this.randomIpsum();
- this.loremList.push(this.randomIpsum());
- }
-
- onBtnLog() {
- console.log(`== ${this.componentClass} (1) ==`);
- console.log('Ref:');
- console.log(this.osComponentRef1);
- console.log('Instance:');
- console.log(this.osComponentRef1.osInstance());
- console.log('Target:');
- console.log(this.osComponentRef1.osTarget());
- console.log('');
- console.log(`== ${this.componentClass} (2) ==`);
- console.log('Ref:');
- console.log(this.osComponentRef2);
- console.log('Instance:');
- console.log(this.osComponentRef2.osInstance());
- console.log('Target:');
- console.log(this.osComponentRef2.osTarget());
- }
-
- randomIpsum(): string {
- const loremIpsums = [this.loremIpsumLong, this.loremIpsumMedium, this.loremIpsumShort];
- const random = Math.floor(Math.random() * loremIpsums.length);
- return loremIpsums[random];
- }
+ randomIpsum(): string {
+ const loremIpsums = [
+ this.loremIpsumLong,
+ this.loremIpsumMedium,
+ this.loremIpsumShort,
+ ];
+ const random = Math.floor(Math.random() * loremIpsums.length);
+ return loremIpsums[random];
+ }
}
diff --git a/packages/overlayscrollbars-ngx/example/src/app/app.module.ts b/packages/overlayscrollbars-ngx/example/src/app/app.module.ts
index a65e55d..bd527e6 100644
--- a/packages/overlayscrollbars-ngx/example/src/app/app.module.ts
+++ b/packages/overlayscrollbars-ngx/example/src/app/app.module.ts
@@ -4,13 +4,9 @@ import { OverlayscrollbarsModule } from 'overlayscrollbars-ngx';
import { AppComponent } from './app.component';
@NgModule({
- declarations: [
- AppComponent
- ],
- imports: [
- BrowserModule, OverlayscrollbarsModule
- ],
- providers: [],
- bootstrap: [AppComponent]
+ declarations: [AppComponent],
+ imports: [BrowserModule, OverlayscrollbarsModule],
+ providers: [],
+ bootstrap: [AppComponent],
})
-export class AppModule { }
+export class AppModule {}
diff --git a/packages/overlayscrollbars-ngx/example/src/assets/.gitkeep b/packages/overlayscrollbars-ngx/example/src/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/packages/overlayscrollbars-ngx/example/src/browserslist b/packages/overlayscrollbars-ngx/example/src/browserslist
deleted file mode 100644
index 37371cb..0000000
--- a/packages/overlayscrollbars-ngx/example/src/browserslist
+++ /dev/null
@@ -1,11 +0,0 @@
-# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
-# For additional information regarding the format and rule options, please see:
-# https://github.com/browserslist/browserslist#queries
-#
-# For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
-
-> 0.5%
-last 2 versions
-Firefox ESR
-not dead
-not IE 9-11
\ No newline at end of file
diff --git a/packages/overlayscrollbars-ngx/example/src/favicon.ico b/packages/overlayscrollbars-ngx/example/src/favicon.ico
index 8081c7c..997406a 100644
Binary files a/packages/overlayscrollbars-ngx/example/src/favicon.ico and b/packages/overlayscrollbars-ngx/example/src/favicon.ico differ
diff --git a/packages/overlayscrollbars-ngx/example/src/index.html b/packages/overlayscrollbars-ngx/example/src/index.html
index fb41f2b..0b2a9d5 100644
--- a/packages/overlayscrollbars-ngx/example/src/index.html
+++ b/packages/overlayscrollbars-ngx/example/src/index.html
@@ -1,18 +1,13 @@
-
- OverlayScrollbars Angular App
- Example
+
-
+