From 89564f1c7e57b8c05c88180c92b81744959d4e31 Mon Sep 17 00:00:00 2001
From: "Manu Mtz.-Almeida" <manu.valladolid@gmail.com>
Date: Mon, 27 Jun 2016 20:42:55 +0200
Subject: [PATCH] feat(feature-detect): detect if backdrop-filter is supported

Currently `backdrop-filter` is only supported by Safari and it allows web developers to implement awesome background blur effects like a native iOS app
---
 src/util/feature-detect.ts | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/src/util/feature-detect.ts b/src/util/feature-detect.ts
index 51a64c8966b..7f6ee488877 100644
--- a/src/util/feature-detect.ts
+++ b/src/util/feature-detect.ts
@@ -1,6 +1,6 @@
 
 export class FeatureDetect {
-  private _results: any = {};
+  private _results: {[featureName: string]: boolean} = {};
 
   run(window: Window, document: Document) {
     for (let name in featureDetects) {
@@ -8,7 +8,7 @@ export class FeatureDetect {
     }
   }
 
-  has(featureName: string) {
+  has(featureName: string): boolean {
     return !!this._results[featureName];
   }
 
@@ -18,10 +18,10 @@ export class FeatureDetect {
 
 }
 
-let featureDetects = {};
+let featureDetects: {[featureName: string]: Function} = {};
 
 
-FeatureDetect.add('hairlines', function(window: Window, document: Document, body: HTMLBodyElement) {
+FeatureDetect.add('hairlines', function(window: Window, document: Document, body: HTMLBodyElement): boolean {
   /**
   * Hairline Shim
   * Add the "hairline" CSS class name to the body tag
@@ -41,3 +41,18 @@ FeatureDetect.add('hairlines', function(window: Window, document: Document, body
   }
   return canDo;
 });
+
+FeatureDetect.add('backdrop-filter', function(window: Window, document: Document, body: HTMLBodyElement): boolean {
+  /**
+  * backdrop-filter Shim
+  * Checks if css backdrop-filter is implemented by the browser.
+  */
+  let styles = <any>body.style;
+  let backdrop = styles['backdrop-filter'] !== undefined ||
+    styles['-webkit-backdrop-filter'] !== undefined;
+  if (backdrop) {
+    body.classList.add('backdrop-filter');
+  }
+  return backdrop;
+});
+