From 48d3a0cde147aaee09f586a819cdd562e3a74029 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Mon, 7 Aug 2017 23:22:00 +0200
Subject: [PATCH] refactor(slider): remove redundant renderer class (#6281)

Gets rid of the `SliderRenderer` class which doesn't really do much, apart from holding a couple of methods. The methods have been moved into the slider itself.
---
 src/lib/slider/slider.html |  2 +-
 src/lib/slider/slider.ts   | 63 +++++++++++++++-----------------------
 2 files changed, 26 insertions(+), 39 deletions(-)

diff --git a/src/lib/slider/slider.html b/src/lib/slider/slider.html
index 6b1b7be1fc1..20fd47a9841 100644
--- a/src/lib/slider/slider.html
+++ b/src/lib/slider/slider.html
@@ -1,4 +1,4 @@
-<div class="mat-slider-wrapper">
+<div class="mat-slider-wrapper" #sliderWrapper>
   <div class="mat-slider-track-wrapper">
     <div class="mat-slider-track-background" [ngStyle]="_trackBackgroundStyles"></div>
     <div class="mat-slider-track-fill" [ngStyle]="_trackFillStyles"></div>
diff --git a/src/lib/slider/slider.ts b/src/lib/slider/slider.ts
index 670945d401b..3788213cbf8 100644
--- a/src/lib/slider/slider.ts
+++ b/src/lib/slider/slider.ts
@@ -19,6 +19,7 @@ import {
   ViewEncapsulation,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
+  ViewChild,
 } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {coerceBooleanProperty, coerceNumberProperty, HammerInput} from '../core';
@@ -377,9 +378,6 @@ export class MdSlider extends _MdSliderMixinBase
   /** The size of a tick interval as a percentage of the size of the track. */
   private _tickIntervalPercent: number = 0;
 
-  /** A renderer to handle updating the slider's thumb and fill track. */
-  private _renderer: SliderRenderer;
-
   /** The dimensions of the slider. */
   private _sliderDimensions: ClientRect | null = null;
 
@@ -391,6 +389,9 @@ export class MdSlider extends _MdSliderMixinBase
   /** The value of the slider when the slide start event fires. */
   private _valueOnSlideStart: number | null;
 
+  /** Reference to the inner slider wrapper element. */
+  @ViewChild('sliderWrapper') private _sliderWrapper: ElementRef;
+
   /**
    * Whether mouse events should be converted to a slider position by calculating their distance
    * from the right or bottom edge of the slider as opposed to the top or left.
@@ -412,7 +413,6 @@ export class MdSlider extends _MdSliderMixinBase
     this._focusOriginMonitor
         .monitor(this._elementRef.nativeElement, renderer, true)
         .subscribe((origin: FocusOrigin) => this._isActive = !!origin && origin !== 'keyboard');
-    this._renderer = new SliderRenderer(this._elementRef);
   }
 
   ngOnDestroy() {
@@ -426,7 +426,7 @@ export class MdSlider extends _MdSliderMixinBase
 
     // We save the dimensions of the slider here so we can use them to update the spacing of the
     // ticks and determine where on the slider click and slide events happen.
-    this._sliderDimensions = this._renderer.getSliderDimensions();
+    this._sliderDimensions = this._getSliderDimensions();
     this._updateTickIntervalPercent();
   }
 
@@ -437,7 +437,7 @@ export class MdSlider extends _MdSliderMixinBase
 
     let oldValue = this.value;
     this._isSliding = false;
-    this._renderer.addFocus();
+    this._focusHostElement();
     this._updateValueFromPosition({x: event.clientX, y: event.clientY});
 
     /* Emit a change and input event if the value changed. */
@@ -479,7 +479,7 @@ export class MdSlider extends _MdSliderMixinBase
     this._onMouseenter();
 
     this._isSliding = true;
-    this._renderer.addFocus();
+    this._focusHostElement();
     this._valueOnSlideStart = this.value;
 
     if (event) {
@@ -500,7 +500,7 @@ export class MdSlider extends _MdSliderMixinBase
   _onFocus() {
     // We save the dimensions of the slider here so we can use them to update the spacing of the
     // ticks and determine where on the slider click and slide events happen.
-    this._sliderDimensions = this._renderer.getSliderDimensions();
+    this._sliderDimensions = this._getSliderDimensions();
     this._updateTickIntervalPercent();
   }
 
@@ -647,6 +647,23 @@ export class MdSlider extends _MdSliderMixinBase
     return Math.max(min, Math.min(value, max));
   }
 
+  /**
+   * Get the bounding client rect of the slider track element.
+   * The track is used rather than the native element to ignore the extra space that the thumb can
+   * take up.
+   */
+  private _getSliderDimensions() {
+    return this._sliderWrapper ? this._sliderWrapper.nativeElement.getBoundingClientRect() : null;
+  }
+
+  /**
+   * Focuses the native element.
+   * Currently only used to allow a blur event to fire but will be used with keyboard input later.
+   */
+  private _focusHostElement() {
+    this._elementRef.nativeElement.focus();
+  }
+
   /**
    * Sets the model value. Implemented as part of ControlValueAccessor.
    * @param value
@@ -682,33 +699,3 @@ export class MdSlider extends _MdSliderMixinBase
     this.disabled = isDisabled;
   }
 }
-
-/**
- * Renderer class in order to keep all dom manipulation in one place and outside of the main class.
- * @docs-private
- */
-export class SliderRenderer {
-  private _sliderElement: HTMLElement;
-
-  constructor(elementRef: ElementRef) {
-    this._sliderElement = elementRef.nativeElement;
-  }
-
-  /**
-   * Get the bounding client rect of the slider track element.
-   * The track is used rather than the native element to ignore the extra space that the thumb can
-   * take up.
-   */
-  getSliderDimensions() {
-    let wrapperElement = this._sliderElement.querySelector('.mat-slider-wrapper');
-    return wrapperElement ? wrapperElement.getBoundingClientRect() : null;
-  }
-
-  /**
-   * Focuses the native element.
-   * Currently only used to allow a blur event to fire but will be used with keyboard input later.
-   */
-  addFocus() {
-    this._sliderElement.focus();
-  }
-}