update(Layout): add ngCloak intercept

ThomasBurleson · ThomasBurleson · commit adb2281e7072 · 2015-12-01T09:58:07.000-06:00
Delay the un-cloaking while the Layout injections finish processing.

* update docs to use 'Layout' instead of 'Grid'
diff --git a/docs/app/js/app.js b/docs/app/js/app.js
@@ -252,7 +252,7 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES, $location, $rootScope, $http, $wind
         id: 'layoutContainers',
         url: 'layout/container'
       },{
-        name: 'Grid System',
+        name: 'Layout System',
         id: 'layoutGrid',
         url: 'layout/grid'
       },{
diff --git a/docs/app/partials/layout-options.tmpl.html b/docs/app/partials/layout-options.tmpl.html
@@ -120,7 +120,7 @@
   </docs-demo>
 
   <p>
-    See the <a href="layout/grid">Grid System</a> page for a basic explanation
+    See the <a href="layout/grid">Layout System</a> page for a basic explanation
     of flex and offset attributes.
   </p>
 
diff --git a/src/core/services/layout/layout.js b/src/core/services/layout/layout.js
@@ -15,6 +15,8 @@
   var config = {
     /**
      * Enable directive attribute-to-class conversions
+     * Developers can use `<body md-layout-css />` to quickly
+     * disable the Layout directivees and prohibit the injection of Layout classnames
      */
     enabled: true,
 
@@ -167,7 +169,9 @@
     .directive('hideLtMd', warnAttrNotSupported('hide-lt-md'))
     .directive('hideLtLg', warnAttrNotSupported('hide-lt-lg'))
     .directive('showLtMd', warnAttrNotSupported('show-lt-md'))
-    .directive('showLtLg', warnAttrNotSupported('show-lt-lg'));
+    .directive('showLtLg', warnAttrNotSupported('show-lt-lg'))
+
+    .directive('ngCloak',  buildCloakInterceptor('ng-cloak'));
 
   /**
    * Special directive that will disable ALL Layout conversions of layout
@@ -209,6 +213,31 @@
   //
   // *********************************************************************************
 
+  /**
+   * Tail-hook ngCloak to delay the uncloaking while Layout transformers
+   * finish processing. Eliminates flicker with Material.Layoouts
+   */
+  function buildCloakInterceptor(className) {
+    return [ '$timeout', function($timeout){
+      return {
+        restrict : 'A',
+        priority : -10,   // run after normal ng-cloak
+        compile  : function( element ) {
+          if (!config.enabled) return angular.noop;
+
+          // Re-add the cloak
+          element.addClass(className);
+
+          return function( scope, element ) {
+            // Wait while layout injectors configure, then uncload
+            $timeout( function(){
+              element.removeClass(className);
+            }, 10, false);
+          };
+        }
+      };
+    }];
+  }
 
   /**
    * Creates a directive registration function where a possible dynamic attribute
