From 0ff6846a97ddc44864732a081a14e5c922c51c0f Mon Sep 17 00:00:00 2001 From: TueCN Date: Wed, 13 Apr 2016 13:44:15 +0200 Subject: [PATCH] Removed dependency on jQuery. Now it works with just jqLite but you can no longer specify which element you want to observe height changes for. It is now always the document height that is being observed. --- README.md | 5 ++--- dist/auto-height.js | 2 +- src/auto-height.coffee | 28 ++++++++++++++-------------- 3 files changed, 17 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 2adaf97..c92a240 100644 --- a/README.md +++ b/README.md @@ -69,10 +69,10 @@ config(function () { ```
I need some space too
-
+
I stretch to the available height, calculated from the height available from parent and my siblings. - Also, if my parent changes height, I recalculate my height! + Also, if the document changes height because of css class changes, I recalculate my height!
``` @@ -80,7 +80,6 @@ config(function () { 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 diff --git a/dist/auto-height.js b/dist/auto-height.js index ce34d0f..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(e,t){return{link:function(n,r,i){var u,o,a;return o=function(n){return n?t(function(){var t,r,i,u,o;return r="document"===n?e.document:$("#"+n).get(0),t=$(r),u=0,i=new MutationObserver(function(){var n;return n=t.height(),n!==u&&angular.element(e).triggerHandler("resize"),u=n}),r?(o={attributes:!0,attributeFilter:["class"],subtree:!0},i.observe(r,o)):void 0}):void 0},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},a=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},o(i.observeHeightOf),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(a(r))-t+"px")}),t(function(){return angular.element(e).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/src/auto-height.coffee b/src/auto-height.coffee index 55e82c6..6f98981 100644 --- a/src/auto-height.coffee +++ b/src/auto-height.coffee @@ -1,26 +1,27 @@ ###* -# @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) -> - observe = (observedEleId) -> - if (!observedEleId) - return + if($attrs.autoHeight == 'recalculate-on-css-class-changes') $timeout -> - observee = if observedEleId == 'document' then $window.document else $('#' + observedEleId).get(0) - $observee = $(observee); oldHeight = 0; observer = new MutationObserver -> - currentHeight = $observee.height(); - if (currentHeight != oldHeight) - angular.element($window).triggerHandler('resize'); - oldHeight = currentHeight - if observee - options = {attributes: true,attributeFilter: ['class'], subtree: true} - observer.observe observee, options; + $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 @@ -30,7 +31,6 @@ angular.module('m43nu.auto-height', []). siblings = ($elm) -> elm for elm in $elm.parent().children() when elm != $elm[0] - observe($attrs.observeHeightOf) angular.element($window).bind 'resize', -> additionalHeight = $attrs.additionalHeight || 0 parentHeight = $window.innerHeight - $element.parent()[0].getBoundingClientRect().top