update(gridlist): improve ability to add custom animator to gridlist …

…reflow remove empty gridlist theme file to resolve gulp-sass errors when file is empty improve scss styling hierarchy
JeffPinkston · Feb 14, 2015 · 1d9132a · 1d9132a
1 parent 91053dc
commit 1d9132a
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 113 deletions.
diff --git a/src/components/gridList/demoResponsiveUsage/style.scss b/src/components/gridList/demoResponsiveUsage/style.scss
diff --git a/src/components/gridList/gridList-theme.scss b/src/components/gridList/gridList-theme.scss
diff --git a/src/components/gridList/gridList.js b/src/components/gridList/gridList.js
@@ -331,6 +331,7 @@ function GridListDirective($interpolate, $mdConstant, $mdGridLayout, $mdMedia, $
   }
 }
 
+  /* @ngInject */
 function GridListController($timeout) {
   this.invalidated = false;
   this.$timeout_ = $timeout;
@@ -377,72 +378,77 @@ GridListController.prototype = {
 
 /* @ngInject */
 function GridLayoutFactory($mdUtil) {
+  var defaultAnimator = GridTileAnimator;
 
-  return function(colCount, tileSpans) {
-    var defaultAnimator = GridTileAnimator;
-    var self, layoutInfo, gridStyles, layoutTime, mapTime, reflowTime, layoutInfo;
+  /**
+   * Set the reflow animator callback
+   */
+  GridLayout.animateWith =function(customAnimator) {
+    defaultAnimator = !angular.isFunction(customAnimator) ? GridTileAnimator : customAnimator;
+  };
 
-    layoutTime = $mdUtil.time(function() {
-      layoutInfo = calculateGridFor(colCount, tileSpans);
-    });
+  return GridLayout;
 
-    return self = {
-
-      /**
-       * Set the reflow animator callback
-       */
-      animateWith : function(customAnimator) {
-        defaultAnimator = !angular.isFunction(customAnimator) ? GridTileAnimator : customAnimator;
-      },
-
-      /**
-       * An array of objects describing each tile's position in the grid.
-       */
-      layoutInfo: function() {
-        return layoutInfo;
-      },
-
-      /**
-       * Maps grid positioning to an element and a set of styles using the
-       * provided updateFn.
-       */
-      map: function(updateFn) {
-        mapTime = $mdUtil.time(function() {
-          var info = self.layoutInfo();
-          gridStyles = updateFn(info.positioning, info.rowCount);
-        });
-        return self;
-      },
-
-      /**
-       * Default animator simply sets the element.css( <styles> ). An alternate
-       * animator can be provided as an argument. The function has the following
-       * signature:
-       *
-       *    function({grid: {element: JQLite, style: Object}, tiles: Array<{element: JQLite, style: Object}>)
-       */
-      reflow: function(animatorFn) {
-        reflowTime = $mdUtil.time(function() {
-          var animator = animatorFn || defaultAnimator;
-          animator(gridStyles.grid, gridStyles.tiles);
-        });
-        return self;
-      },
-
-      /**
-       * Timing for the most recent layout run.
-       */
-      performance: function() {
-        return {
-          tileCount: tileSpans.length,
-          layoutTime: layoutTime,
-          mapTime: mapTime,
-          reflowTime: reflowTime,
-          totalTime: layoutTime + mapTime + reflowTime
-        };
-      }
-    };
-  };
+  /**
+   * Publish layout function
+   */
+  function GridLayout(colCount, tileSpans) {
+      var self, layoutInfo, gridStyles, layoutTime, mapTime, reflowTime, layoutInfo;
+
+      layoutTime = $mdUtil.time(function() {
+        layoutInfo = calculateGridFor(colCount, tileSpans);
+      });
+
+      return self = {
+
+        /**
+         * An array of objects describing each tile's position in the grid.
+         */
+        layoutInfo: function() {
+          return layoutInfo;
+        },
+
+        /**
+         * Maps grid positioning to an element and a set of styles using the
+         * provided updateFn.
+         */
+        map: function(updateFn) {
+          mapTime = $mdUtil.time(function() {
+            var info = self.layoutInfo();
+            gridStyles = updateFn(info.positioning, info.rowCount);
+          });
+          return self;
+        },
+
+        /**
+         * Default animator simply sets the element.css( <styles> ). An alternate
+         * animator can be provided as an argument. The function has the following
+         * signature:
+         *
+         *    function({grid: {element: JQLite, style: Object}, tiles: Array<{element: JQLite, style: Object}>)
+         */
+        reflow: function(animatorFn) {
+          reflowTime = $mdUtil.time(function() {
+            var animator = animatorFn || defaultAnimator;
+            animator(gridStyles.grid, gridStyles.tiles);
+          });
+          return self;
+        },
+
+        /**
+         * Timing for the most recent layout run.
+         */
+        performance: function() {
+          return {
+            tileCount: tileSpans.length,
+            layoutTime: layoutTime,
+            mapTime: mapTime,
+            reflowTime: reflowTime,
+            totalTime: layoutTime + mapTime + reflowTime
+          };
+        }
+      };
+    }
 
   /**
    * Default Gridlist animator simple sets the css for each element;

diff --git a/src/components/gridList/gridList.scss b/src/components/gridList/gridList.scss
@@ -1,65 +1,64 @@
-md-grid-list,
-md-grid-tile {
-  display: block;
-}
-
 md-grid-list {
+  display: block;
   position: relative;
-}
-
-md-grid-tile {
-  position: absolute;
 
-  figure {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
+  md-grid-tile {
+    display: block;
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    padding: 0;
-    margin: 0;
-  }
 
-  // Headers & footers
-  md-grid-tile-header,
-  md-grid-tile-footer {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    height: 48px;
-    color: #fff;
-    background: rgba(0, 0, 0, 0.18);
-    overflow: hidden;
+    figure {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      padding: 0;
+      margin: 0;
+    }
+
+    // Headers & footers
+    md-grid-tile-header,
+    md-grid-tile-footer {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      height: 48px;
+      color: #fff;
+      background: rgba(0, 0, 0, 0.18);
+      overflow: hidden;
 
-    // Positioning
-    position: absolute;
-    left: 0;
-    right: 0;
+      // Positioning
+      position: absolute;
+      left: 0;
+      right: 0;
 
-    h3,
-    h4 {
-      font-weight: 400;
-      margin: 0 0 0 16px;
-    }
+      h3,
+      h4 {
+        font-weight: 400;
+        margin: 0 0 0 16px;
+      }
+
+      h3 {
+        font-size: 14px;
+      }
 
-    h3 {
-      font-size: 14px;
+      h4 {
+        font-size: 12px;
+      }
     }
 
-    h4 {
-      font-size: 12px;
+    md-grid-tile-header {
+      top: 0;
     }
-  }
 
-  md-grid-tile-header {
-    top: 0;
+    md-grid-tile-footer {
+      bottom: 0;
+    }
   }
 
-  md-grid-tile-footer {
-    bottom: 0;
-  }
 }
+