diff --git a/README.md b/README.md index fda9227..c92a240 100644 --- a/README.md +++ b/README.md @@ -53,8 +53,8 @@ config(function () { // ... ``` -Use it in your html: - +##Use it in your html: +###Basic ```
I need some space too
@@ -65,6 +65,23 @@ Use it in your html:
``` +###Automatic recalculation of height: + ``` +
+
I need some space too
+
+ 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! +
+
+ ``` + +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? diff --git a/bower.json b/bower.json index 4613b47..092cf38 100644 --- a/bower.json +++ b/bower.json @@ -1,8 +1,9 @@ { "name": "angular-auto-height", - "version": "0.0.5", + "version": "0.1.0", "authors": [ - "Emanuel Imhof " + "Emanuel Imhof ", + "Tue Carr Nørgård " ], "description": "An AngularJS directive to automatically adjust the height of an element corresponding to the parent and siblings.", "main": "dist/auto-height.js", diff --git a/dist/auto-height.js b/dist/auto-height.js index 69926e8..be8605d 100644 --- a/dist/auto-height.js +++ b/dist/auto-height.js @@ -1 +1 @@ -(function(){angular.module("m43nu.auto-height",[]).directive("autoHeight",["$window","$timeout",function(n,e){return{link:function(t,r,i){var u,a;return u=function(n){var e,t,r,i;for(e=0,t=0,r=n.length;r>t;t++)i=n[t],e+=i.offsetHeight;return e},a=function(n){var e,t,r,i,u;for(i=n.parent().children(),u=[],t=0,r=i.length;r>t;t++)e=i[t],e!==n[0]&&u.push(e);return u},angular.element(n).bind("resize",function(){var e,t;return e=i.additionalHeight||0,t=n.innerHeight-r.parent()[0].getBoundingClientRect().top,r.css("height",t-u(a(r))-e+"px")}),e(function(){return angular.element(n).triggerHandler("resize")},1e3)}}}])}).call(this); \ No newline at end of file +(function(){angular.module("m43nu.auto-height",[]).directive("autoHeight",["$window","$timeout",function(e,t){return{link:function(n,r,i){var u,o;return"recalculate-on-css-class-changes"===i.autoHeight&&t(function(){var n,r,i;return r=0,n=new MutationObserver(function(){return t(function(){var t,n,i;return n=e.document,i=e.document.documentElement,t=Math.max(n.body.scrollHeight,i.scrollHeight,n.body.offsetHeight,i.offsetHeight,i.clientHeight),t!==r&&angular.element(e).triggerHandler("resize"),r=t})}),i={attributes:!0,attributeFilter:["class"],subtree:!0},n.observe(e.document.body,i)}),u=function(e){var t,n,r,i;for(t=0,n=0,r=e.length;r>n;n++)i=e[n],t+=i.offsetHeight;return t},o=function(e){var t,n,r,i,u;for(i=e.parent().children(),u=[],n=0,r=i.length;r>n;n++)t=i[n],t!==e[0]&&u.push(t);return u},angular.element(e).bind("resize",function(){var t,n;return t=i.additionalHeight||0,n=e.innerHeight-r.parent()[0].getBoundingClientRect().top,r.css("height",n-u(o(r))-t+"px")}),t(function(){return angular.element(e).triggerHandler("resize")},1e3)}}}])}).call(this); \ No newline at end of file diff --git a/package.json b/package.json index 0b80b57..9937219 100644 --- a/package.json +++ b/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": { diff --git a/src/auto-height.coffee b/src/auto-height.coffee index 48d5c92..6f98981 100644 --- a/src/auto-height.coffee +++ b/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