New feature: Automatic recalculation of height

README.md

@@ -53,8 +53,8 @@ config(function () {
   // ...
 ```
 
-Use it in your html:
-
+##Use it in your html:
+###Basic
 ```
 <div class="parent">
     <div class="sibling">I need some space too</div>
@@ -65,6 +65,23 @@ Use it in your html:
 </div>
 ```
 
+###Automatic recalculation of height:
+ ```
+ <div id="parent">
+     <div id="sibling">I need some space too</div>
+     <div auto-height="recalculate-on-css-class-changes">
+         I stretch to the available height,
+         calculated from the height available from parent and my siblings.
+         Also, if the document changes height because of css class changes, I recalculate my height!
+     </div>
+ </div>
+ ```
+
+This is useful when dynamically changing the height of elements (e.g. when collapsing/expanding sections using http://angular-ui.github.io/bootstrap/#/collapse)
+
+_Note: This feature requires support of MutationObserver - see http://caniuse.com/#feat=mutationobserver_
+
+
 ## Community
 
 ### Got a question?

bower.json

@@ -1,8 +1,9 @@
 {
   "name": "angular-auto-height",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "authors": [
-    "Emanuel Imhof <hello@m43nu.ch>"
+    "Emanuel Imhof <hello@m43nu.ch>",
+    "Tue Carr Nørgård <tue.tn1@gmail.com>"
   ],
   "description": "An AngularJS directive to automatically adjust the height of an element corresponding to the parent and siblings.",
   "main": "dist/auto-height.js",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "angular-auto-height",
-  "version": "0.0.5",
+  "version": "0.1.0",
   "description": "An AngularJS directive to automatically adjust the height of an element corresponding to the parent and siblings.",
   "browser": "index.js",
   "repository": {

src/auto-height.coffee

@@ -1,11 +1,28 @@
 ###*
-# @version 0.0.5
+# @version 0.1.0
 # @copyright Emanuel Imhof [All Rights Reserved]
 # @license MIT License (see LICENSE.txt)
 ###
 angular.module('m43nu.auto-height', []).
   directive 'autoHeight', [ '$window', '$timeout', ($window, $timeout) ->
     link: ($scope, $element, $attrs) ->
+      if($attrs.autoHeight == 'recalculate-on-css-class-changes')
+        $timeout ->
+          oldHeight = 0;
+          observer = new MutationObserver ->
+            $timeout ->
+              doc = $window.document;
+              docEle = $window.document.documentElement;
+              currentHeight = Math.max(
+                doc.body["scrollHeight"], docEle["scrollHeight"],
+                doc.body["offsetHeight"], docEle["offsetHeight"],
+                docEle["clientHeight"] );
+              if (currentHeight != oldHeight)
+                angular.element( $window ).triggerHandler( 'resize' );
+              oldHeight = currentHeight
+          options = {attributes: true, attributeFilter: ['class'], subtree: true}
+          observer.observe $window.document.body, options;
+
       combineHeights = (collection) ->
         heights = 0
         heights += node.offsetHeight for node in collection