made mobile trigger width configurable

glutengo · Jan 14, 2019 · a3b9fa1 · VictorGaiva · May 30, 2019 · a3b9fa1
1 parent 3a7e61f
commit a3b9fa1
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 4 deletions.
diff --git a/src/demo/demo.component.html b/src/demo/demo.component.html
@@ -7,7 +7,11 @@
 <button (click)="size = size - 10">Decrease size</button>
 <button (click)="toggleSide()">Toggle Side</button>
 
-<mgl-timeline [toggle]="toggle" [alternate]="alternate" [focusOnOpen]="false" [side]="side">
+<button (click)="mobileWidthThreshold = mobileWidthThreshold + 10">Increase Mobile Threshold</button>
+<button (click)="mobileWidthThreshold = mobileWidthThreshold - 10">Decrease Mobile Threshold</button> 
+Mobile Threshold: {{mobileWidthThreshold}}
+
+<mgl-timeline [toggle]="toggle" [alternate]="alternate" [focusOnOpen]="false" [side]="side" [(mobileWidthThreshold)]="mobileWidthThreshold">
   <mgl-timeline-entry *ngFor="let entry of entries; let i = index" (expand)="onExpand($event, i)">
     <mgl-timeline-entry-header>
       <div>{{entry.header}}</div>

diff --git a/src/demo/demo.component.ts b/src/demo/demo.component.ts
@@ -13,6 +13,7 @@ export class DemoComponent {
   color: boolean = false;
   size: number = 40;
   side: string = 'left';
+  mobileWidthThreshold: number = 640;
 
   entries = [
     {

diff --git a/src/demo/demo.module.ts b/src/demo/demo.module.ts
@@ -11,7 +11,7 @@ import { DemoComponent } from './demo.component';
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
-    MglTimelineModule
+    MglTimelineModule,
   ],
   providers: [],
   bootstrap: [DemoComponent]

diff --git a/src/timeline/timeline/timeline.component.ts b/src/timeline/timeline/timeline.component.ts
@@ -13,6 +13,9 @@ export class MglTimelineComponent implements AfterViewInit, OnChanges, OnDestroy
   @Input()
   toggle: boolean = true;
 
+  @Input()
+  mobileWidthThreshold: number = 640;
+
   @Input()
   alternate: boolean = true;
 
@@ -56,7 +59,7 @@ export class MglTimelineComponent implements AfterViewInit, OnChanges, OnDestroy
   }
 
   ngAfterViewInit() {
-    this.mobile = this.elementRef.nativeElement.clientWidth < 640;
+    this.mobile = this.elementRef.nativeElement.clientWidth < this.mobileWidthThreshold;
     setTimeout(() => this.updateContent());
     this.content.changes.subscribe(changes => {
       this.updateContent();
@@ -84,6 +87,7 @@ export class MglTimelineComponent implements AfterViewInit, OnChanges, OnDestroy
 
   @HostListener('window:resize', ['$event'])
   onResize(ev: KeyboardEvent) {
-    this.mobile = this.elementRef.nativeElement.clientWidth < 640;
+    console.log(this.mobileWidthThreshold);
+    this.mobile = this.elementRef.nativeElement.clientWidth < this.mobileWidthThreshold;
   }
 }