feat(carousel): add @Input() hasProgressBar

A-l-y-l-e · Feb 15, 2019 · c5c9b8e · c5c9b8e
1 parent 4c5f15c
commit c5c9b8e
Show file tree

Hide file tree

Showing 2 changed files with 79 additions and 6 deletions.
diff --git a/src/lib/carousel/carousel.html b/src/lib/carousel/carousel.html
@@ -10,23 +10,33 @@
     <ng-content></ng-content>
   </div>
   <div [className]="classes.carouselIndicators" *ngIf="lyItems.length !== 1">
-      <div tabindex="0"
+    <div tabindex="0"
       (click)="_select(i)"
       role="button"
-      *ngFor="let item of lyItems; let i = index">
+      *ngFor="let item of lyItems; index as i"
+    >
       <span ly-paper
       color="#000"
       bg="background:primary"
       [class.active]="selectedIndex==i"
       [elevation]="8"
-      [shadowColor]="'text'"
-      ></span>
-      </div>
+      [shadowColor]="'text'"></span>
+    </div>
   </div>
   <div [ngClass]="[classes.actions, 'left']" (click)="prev()">
     <svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path></svg>
   </div>
   <div [ngClass]="[classes.actions, 'right']" (click)="next()">
     <svg viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path></svg>
   </div>
+  <div
+    [className]="classes.barContainer"
+    *ngIf="hasProgressBar && _isIntervalFn && interval && autoplay"
+  >
+    <div
+      [className]="classes.bar"
+      #_progressBar
+      [style.animation-duration]="interval + 'ms'"
+    ></div>
+  </div>
 </div>
diff --git a/src/lib/carousel/carousel.ts b/src/lib/carousel/carousel.ts
@@ -26,6 +26,7 @@ const chroma = _chroma;
 /** Default interval in ms */
 const DEFAULT_INTERVAL = 7000;
 const DEFAULT_AUTOPLAY = true;
+const DEFAULT_HAS_PROGRESS_BAR = false;
 const STYLE_PRIORITY = -2;
 
 export const STYLES = (theme: ThemeVariables) => {
@@ -133,6 +134,33 @@ export const STYLES = (theme: ThemeVariables) => {
         transform: 'scale(1)',
         opacity: 1
       }
+    },
+    barContainer: {
+      background: chroma(theme.background.primary.default).alpha(.25).css(),
+      height: '4px',
+      position: 'absolute',
+      bottom: 0,
+      width: '100%',
+    },
+    bar: {
+      height: '4px',
+      position: 'absolute',
+      bottom: 0,
+      width: '100%',
+      animationName: '{interval}',
+      animationTimingFunction: 'linear',
+      animationIterationCount: 'infinite',
+      background: theme.text.primary
+    },
+    $keyframes: {
+      interval: {
+        0: {
+          transform: 'translateX(0%)'
+        },
+        100: {
+          transform: `translateX(${dir === 'left' ? '-' : ''}100%)`
+        }
+      }
     }
   };
 };
@@ -157,6 +185,7 @@ export class LyCarousel implements OnInit, AfterViewInit, OnDestroy {
   private _intervalFn: number | null = null;
   @ViewChild('slideContainer') slideContainer: ElementRef;
   @ViewChild('_slide') _slide: ElementRef;
+  @ViewChild('_progressBar') _progressBar: ElementRef<HTMLDivElement>;
   @ContentChildren(forwardRef(() => LyCarouselItem)) lyItems: QueryList<LyCarouselItem>;
   /** @docs-private */
   @Input() mode: CarouselMode = CarouselMode.default;
@@ -165,11 +194,17 @@ export class LyCarousel implements OnInit, AfterViewInit, OnDestroy {
   _selectedElement: HTMLElement;
   private _touch: boolean;
   private _autoplay: boolean;
+  private _hasProgressBar: boolean;
   private _slideClass: string;
 
   /** Emits whenever the component is destroyed. */
   private readonly _destroy = new Subject<void>();
 
+  /** @internal */
+  get _isIntervalFn() {
+    return !!this._intervalFn;
+  }
+
   @Input()
   set touch(val: boolean) {
     const newVal = toBoolean(val);
@@ -198,6 +233,15 @@ export class LyCarousel implements OnInit, AfterViewInit, OnDestroy {
     return this._autoplay;
   }
 
+  @Input()
+  set hasProgressBar(val: boolean) {
+    const newVal = toBoolean(val);
+    this._hasProgressBar = newVal;
+  }
+  get hasProgressBar() {
+    return this._hasProgressBar;
+  }
+
   constructor(
     private _el: ElementRef,
     private _cd: ChangeDetectorRef,
@@ -211,9 +255,12 @@ export class LyCarousel implements OnInit, AfterViewInit, OnDestroy {
     if (!this.touch) {
       this.touch = false;
     }
-    if (this.autoplay != null) {
+    if (this.autoplay == null) {
       this.autoplay = DEFAULT_AUTOPLAY;
     }
+    if (this.hasProgressBar == null) {
+      this.hasProgressBar = DEFAULT_HAS_PROGRESS_BAR;
+    }
   }
 
   ngAfterViewInit() {
@@ -334,13 +381,29 @@ export class LyCarousel implements OnInit, AfterViewInit, OnDestroy {
   private _resetInterval() {
     if (Platform.isBrowser) {
       this.stop();
+      this._restartProgressBarAnimation();
+      this._markForCheck();
       this._intervalFn = setInterval(() => {
         this.next(true);
+        this._restartProgressBarAnimation();
         this._markForCheck();
       }, this.interval) as any;
     }
   }
 
+  private _restartProgressBarAnimation() {
+    if (this.hasProgressBar && this._progressBar) {
+
+      const el = this._progressBar.nativeElement;
+
+      // Hack for restart animation
+      el.style.animationName = 'øfakeName';
+      window.getComputedStyle(el).getPropertyValue('opacity');
+      el.style.animationName = '';
+
+    }
+  }
+
   private _onPan(x) {
     const sign = this._theme.variables.getDirection(DirAlias.before) === 'left' ? -1 : 1;
     this._renderer.setStyle(this._slide.nativeElement, 'transform', `translateX(calc(${sign * 100 * this.selectedIndex }% + ${x}px))`);