From 56a72c871eb3e3006e19c0f61db9677543708eca Mon Sep 17 00:00:00 2001 From: TueCN Date: Tue, 20 Oct 2015 16:20:21 +0200 Subject: [PATCH 1/7] new observer functionality --- bower.json | 5 +- dist/auto-height.js | 115 ++++++++++++++++++++++++++--------------- src/auto-height.coffee | 19 ++++++- 3 files changed, 95 insertions(+), 44 deletions(-) diff --git a/bower.json b/bower.json index 7748d06..d02c69d 100644 --- a/bower.json +++ b/bower.json @@ -1,8 +1,9 @@ { "name": "angular-auto-height", - "version": "0.0.4", + "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 9bbf852..859ef61 100644 --- a/dist/auto-height.js +++ b/dist/auto-height.js @@ -1,47 +1,80 @@ +// Generated by CoffeeScript 1.10.0 + /** - * @version 0.0.4 + * @version 0.1.0 * @copyright TWY GmbH [All Rights Reserved] * @license MIT License (see LICENSE.txt) */ -angular.module('twygmbh.auto-height', []).directive('autoHeight', [ - '$window', '$timeout', function($window, $timeout) { - return { - link: function($scope, $element, $attrs) { - var combineHeights, siblings; - combineHeights = function(collection) { - var heights, i, len, node; - heights = 0; - for (i = 0, len = collection.length; i < len; i++) { - node = collection[i]; - heights += node.offsetHeight; - } - return heights; - }; - siblings = function($elm) { - var elm, i, len, ref, results; - ref = $elm.parent().children(); - results = []; - for (i = 0, len = ref.length; i < len; i++) { - elm = ref[i]; - if (elm !== $elm[0]) { - results.push(elm); + +(function() { + angular.module('twygmbh.auto-height', []).directive('autoHeight', [ + '$window', '$timeout', function($window, $timeout) { + return { + link: function($scope, $element, $attrs) { + var combineHeights, observe, siblings; + observe = function(observedEleId) { + if (!observedEleId) { + return; + } + return $timeout(function() { + var $observee, observee, observer, oldHeight, options; + observee = observedEleId === 'document' ? $window.document : $('#' + observedEleId).get(0); + $observee = $(observee); + oldHeight = 0; + observer = new MutationObserver(function() { + var currentHeight; + currentHeight = $observee.height(); + if (currentHeight !== oldHeight) { + angular.element($window).triggerHandler('resize'); + } + return oldHeight = currentHeight; + }); + if (observee) { + options = { + attributes: true, + attributeFilter: ['class'], + subtree: true + }; + return observer.observe(observee, options); + } + }); + }; + combineHeights = function(collection) { + var heights, i, len, node; + heights = 0; + for (i = 0, len = collection.length; i < len; i++) { + node = collection[i]; + heights += node.offsetHeight; } - } - return results; - }; - angular.element($window).bind('resize', function() { - var additionalHeight, parentHeight; - additionalHeight = $attrs.additionalHeight || 0; - parentHeight = $window.innerHeight - $element.parent()[0].getBoundingClientRect().top; - return $element.css('height', (parentHeight - combineHeights(siblings($element)) - additionalHeight) + "px"); - }); - return $timeout(function() { - return angular.element($window).triggerHandler('resize'); - }, 1000); - } - }; - } -]); + return heights; + }; + siblings = function($elm) { + var elm, i, len, ref, results; + ref = $elm.parent().children(); + results = []; + for (i = 0, len = ref.length; i < len; i++) { + elm = ref[i]; + if (elm !== $elm[0]) { + results.push(elm); + } + } + return results; + }; + observe($attrs.observeHeightOf); + angular.element($window).bind('resize', function() { + var additionalHeight, parentHeight; + additionalHeight = $attrs.additionalHeight || 0; + parentHeight = $window.innerHeight - $element.parent()[0].getBoundingClientRect().top; + return $element.css('height', (parentHeight - combineHeights(siblings($element)) - additionalHeight) + "px"); + }); + return $timeout(function() { + return angular.element($window).triggerHandler('resize'); + }, 1000); + } + }; + } + ]); + +}).call(this); -// --- -// generated by coffee-script 1.9.2 \ No newline at end of file +//# sourceMappingURL=auto-height.js.map diff --git a/src/auto-height.coffee b/src/auto-height.coffee index 20b8151..845619c 100644 --- a/src/auto-height.coffee +++ b/src/auto-height.coffee @@ -1,11 +1,27 @@ ###* -# @version 0.0.4 +# @version 0.1.0 # @copyright TWY GmbH [All Rights Reserved] # @license MIT License (see LICENSE.txt) ### angular.module('twygmbh.auto-height', []). directive 'autoHeight', [ '$window', '$timeout', ($window, $timeout) -> link: ($scope, $element, $attrs) -> + observe = (observedEleId) -> + if (!observedEleId) + return + $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; + combineHeights = (collection) -> heights = 0 heights += node.offsetHeight for node in collection @@ -14,6 +30,7 @@ angular.module('twygmbh.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 From 7f7f9cd811fcfb6dcd19414fd58578a94e14479e Mon Sep 17 00:00:00 2001 From: TueCN Date: Tue, 20 Oct 2015 17:00:42 +0200 Subject: [PATCH 2/7] Updated README --- README.md | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index cd690a5..caa11a7 100644 --- a/README.md +++ b/README.md @@ -39,8 +39,8 @@ config(function () { Use it in your html: ``` -
-
I need some space too
+
+
I need some space too
I stretch to the available height, calculated from the height available from .parent and my siblings. @@ -48,6 +48,21 @@ Use it in your html:
``` +Optional automatic height update based on changes to other elements: + + ``` +
+
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 dynamically changes height, I recalculate my height! +
+
+ ``` + + + ## Community ### Got a question? From 1429d79b2e0a49518db4ee170a6211b84ce494e1 Mon Sep 17 00:00:00 2001 From: TueCN Date: Fri, 15 Jan 2016 10:54:50 +0100 Subject: [PATCH 3/7] Merge branch 'master' of https://github.com/m43nu/angular-auto-height --- dist/auto-height.js | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/auto-height.js b/dist/auto-height.js index 69926e8..ce34d0f 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,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 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": { From 49988917790b9e83181ca49d9cb17e879f1e9b80 Mon Sep 17 00:00:00 2001 From: TueCN Date: Mon, 18 Jan 2016 14:43:31 +0100 Subject: [PATCH 4/7] Updated description of new observer functionality --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 6ca4229..40e002c 100644 --- a/README.md +++ b/README.md @@ -56,8 +56,8 @@ config(function () { Use it in your html: ``` -
-
I need some space too
+
+
I need some space too
I stretch to the available height, calculated from the height available from .parent and my siblings. @@ -65,7 +65,7 @@ Use it in your html:
``` -Optional automatic height update based on changes to other elements: +Optional automatic re-calculation of height based on changes to other elements: ```
@@ -73,7 +73,7 @@ Optional automatic height update based on changes to other elements:
I stretch to the available height, calculated from the height available from parent and my siblings. - Also, if my parent dynamically changes height, I recalculate my height! + Also, if my parent changes height, I recalculate my height!
``` From 675a8aac6578762479d82df449d7764f0dd4e694 Mon Sep 17 00:00:00 2001 From: TueCN Date: Mon, 18 Jan 2016 14:58:45 +0100 Subject: [PATCH 5/7] Updated description of new observer functionality --- README.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 40e002c..8551ccd 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,7 +65,8 @@ Use it in your html:
``` -Optional automatic re-calculation of height based on changes to other elements: +###Automatic recalculation of height: +_Note: This feature requires support of MutationObserver - see http://caniuse.com/#feat=mutationobserver_ ```
From e53e61c96b766bb4c6c13657ea4200dc09385375 Mon Sep 17 00:00:00 2001 From: TueCN Date: Mon, 18 Jan 2016 15:05:01 +0100 Subject: [PATCH 6/7] Updated description of new observer functionality --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 8551ccd..2adaf97 100644 --- a/README.md +++ b/README.md @@ -66,8 +66,6 @@ config(function () { ``` ###Automatic recalculation of height: -_Note: This feature requires support of MutationObserver - see http://caniuse.com/#feat=mutationobserver_ - ```
I need some space too
@@ -78,6 +76,10 @@ _Note: This feature requires support of MutationObserver - see http://caniuse.co
``` + +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_ From 0ff6846a97ddc44864732a081a14e5c922c51c0f Mon Sep 17 00:00:00 2001 From: TueCN Date: Wed, 13 Apr 2016 13:44:15 +0200 Subject: [PATCH 7/7] 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