From be4311ac7e1795a3c7f9b6ea4953aa9e4c3bb501 Mon Sep 17 00:00:00 2001
From: Robert Messerle <rmesserle@google.com>
Date: Tue, 18 Aug 2015 14:21:13 -0700
Subject: [PATCH] fix(ripple): fixes js error on button click for date picker

---
 src/core/services/ripple/ripple.js | 21 ++++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/core/services/ripple/ripple.js b/src/core/services/ripple/ripple.js
index d105d3b5ad5..16f7d414b71 100644
--- a/src/core/services/ripple/ripple.js
+++ b/src/core/services/ripple/ripple.js
@@ -51,18 +51,29 @@ function InkRippleCtrl ($scope, $element, rippleOptions, $window, $timeout, $mdU
   this.options    = rippleOptions;
   this.mousedown  = false;
   this.ripples    = [];
-  this.container  = null;
-  this.color      = null;
-  this.background = null;
   this.timeout    = null; // Stores a reference to the most-recent ripple timeout
   this.lastRipple = null;
 
+  this.valueOnUse('container', angular.bind(this, this.createContainer));
+  this.valueOnUse('color', angular.bind(this, this.getColor, 1));
+  this.valueOnUse('background', angular.bind(this, this.getColor, 0.5));
+
   // attach method for unit tests
   ($element.controller('mdInkRipple') || {}).createRipple = angular.bind(this, this.createRipple);
 
   this.bindEvents();
 }
 
+InkRippleCtrl.prototype.valueOnUse = function (key, getter) {
+  var value = null;
+  Object.defineProperty(this, key, {
+    get: function () {
+      if (value === null) value = getter();
+      return value;
+    }
+  });
+};
+
 /**
  * Returns the color that the ripple should be (either based on CSS or hard-coded)
  * @returns {string}
@@ -189,10 +200,6 @@ InkRippleCtrl.prototype.clearTimeout = function () {
  * @param top
  */
 InkRippleCtrl.prototype.createRipple = function (left, top) {
-  if (!this.container) this.container = this.createContainer();
-  if (!this.color) this.color = this.getColor();
-  if (!this.background) this.background = this.getColor(0.5);
-
   var ctrl        = this;
   var ripple      = angular.element('<div class="md-ripple"></div>');
   var width       = this.$element.prop('clientWidth');