├── .gitignore ├── .npmignore ├── AngularAutoHeight.0.0.5.nupkg ├── LICENSE ├── README.md ├── bower.json ├── dist └── auto-height.js ├── gulpfile.js ├── index.js ├── package.json └── src └── auto-height.coffee /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .idea 3 | bower_components 4 | node_modules -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | bower.json 3 | gulpfile.js 4 | node_modules 5 | *.nupkg 6 | -------------------------------------------------------------------------------- /AngularAutoHeight.0.0.5.nupkg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/m43nu/angular-auto-height/d0b4b96ee37b52b1e0b772d9bbd15afe4b031eb7/AngularAutoHeight.0.0.5.nupkg -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015 twygmbh (https://github.com/twygmbh) 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # AngularJS auto-height directive 2 | 3 | ## Usage: 4 | 5 | ### bower: 6 | 7 | ``` 8 | $ bower install m43nu/angular-auto-height 9 | ``` 10 | 11 | Include it in your angular-app: 12 | 13 | ``` 14 | angular.module('myApp', [ 15 | // ... 16 | 'm43nu.auto-height' 17 | ]). 18 | config(function () { 19 | // ... 20 | ``` 21 | 22 | ### npm: 23 | 24 | ``` 25 | $ npm install angular-auto-height 26 | ``` 27 | 28 | Include it in your angular-app: 29 | 30 | ``` 31 | angular.module('myApp', [ 32 | // ... 33 | require('angular-auto-height') 34 | ]). 35 | config(function () { 36 | // ... 37 | ``` 38 | 39 | ### NuGet: 40 | 41 | ``` 42 | $ Install-Package AngularAutoHeight 43 | ``` 44 | 45 | Include it in your angular-app: 46 | 47 | ``` 48 | angular.module('myApp', [ 49 | // ... 50 | 'm43nu.auto-height' 51 | ]). 52 | config(function () { 53 | // ... 54 | ``` 55 | 56 | Use it in your html: 57 | 58 | ``` 59 |
60 |
I need some space too
61 |
62 | I stretch to the available height, 63 | calculated from the height available from .parent and my siblings. 64 |
65 |
66 | ``` 67 | 68 | ## Community 69 | 70 | ### Got a question? 71 | 72 | Just send me a message and I'll try to get to you as soon as possible. 73 | 74 | ### Found a bug? 75 | 76 | Please submit a new issue. 77 | 78 | ### Fixed something? 79 | 80 | 1. Fork angular-auto-height 81 | 2. Create a topic branch - `git checkout -b my_branch` 82 | 3. Push to your branch - `git push origin my_branch` 83 | 4. Send me a pull-request for your topic branch 84 | 5. That's it! 85 | 86 | ### License 87 | 88 | Released Under [MIT License](https://github.com/m43nu/angular-auto-height/blob/master/LICENSE). 89 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-auto-height", 3 | "version": "0.0.5", 4 | "authors": [ 5 | "Emanuel Imhof " 6 | ], 7 | "description": "An AngularJS directive to automatically adjust the height of an element corresponding to the parent and siblings.", 8 | "main": "dist/auto-height.js", 9 | "keywords": [ 10 | "angular", 11 | "js", 12 | "m43nu", 13 | "auto", 14 | "height", 15 | "angularjs" 16 | ], 17 | "license": "MIT", 18 | "ignore": [ 19 | "**/.*", 20 | "node_modules", 21 | "bower_components", 22 | "test", 23 | "tests", 24 | "src", 25 | "gulpfile.js", 26 | "*.nupkg" 27 | ], 28 | "dependencies": { 29 | "angular": "~1.2" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /dist/auto-height.js: -------------------------------------------------------------------------------- 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); -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | coffee = require('gulp-coffee'), 3 | uglify = require('gulp-uglify'), 4 | nugetpack = require('gulp-nuget-pack'); 5 | 6 | gulp.task('build', function () { 7 | return gulp.src('./src/*.coffee') 8 | .pipe(coffee()) 9 | .pipe(uglify()) 10 | .pipe(gulp.dest('./dist/')) 11 | }); 12 | 13 | gulp.task('nuget', function (callback) { 14 | nugetpack({ 15 | id: 'AngularAutoHeight', 16 | version: '0.0.5', 17 | authors: 'Emanuel Imhof ', 18 | description: 'An AngularJS directive to automatically adjust the height of an element corresponding to the parent and siblings.' 19 | }, [ 'dist/*.js' ], callback); 20 | }); -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | require('./dist/auto-height'); 2 | module.exports = 'm43nu.auto-height'; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-auto-height", 3 | "version": "0.0.5", 4 | "description": "An AngularJS directive to automatically adjust the height of an element corresponding to the parent and siblings.", 5 | "browser": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+https://github.com/m43nu/angular-auto-height.git" 9 | }, 10 | "keywords": [ 11 | "angular", 12 | "js", 13 | "twy", 14 | "auto", 15 | "height", 16 | "angularjs" 17 | ], 18 | "author": "Emanuel Imhof ", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/m43nu/angular-auto-height/issues" 22 | }, 23 | "homepage": "https://github.com/m43nu/angular-auto-height#readme", 24 | "peerDependencies": { 25 | "angular": ">=1.2.0" 26 | }, 27 | "devDependencies": { 28 | "gulp": "^3.9.0", 29 | "gulp-coffee": "^2.3.1", 30 | "gulp-nuget-pack": "0.0.6", 31 | "gulp-uglify": "^1.4.2" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/auto-height.coffee: -------------------------------------------------------------------------------- 1 | ###* 2 | # @version 0.0.5 3 | # @copyright Emanuel Imhof [All Rights Reserved] 4 | # @license MIT License (see LICENSE.txt) 5 | ### 6 | angular.module('m43nu.auto-height', []). 7 | directive 'autoHeight', [ '$window', '$timeout', ($window, $timeout) -> 8 | link: ($scope, $element, $attrs) -> 9 | combineHeights = (collection) -> 10 | heights = 0 11 | heights += node.offsetHeight for node in collection 12 | heights 13 | 14 | siblings = ($elm) -> 15 | elm for elm in $elm.parent().children() when elm != $elm[0] 16 | 17 | angular.element($window).bind 'resize', -> 18 | additionalHeight = $attrs.additionalHeight || 0 19 | parentHeight = $window.innerHeight - $element.parent()[0].getBoundingClientRect().top 20 | $element.css('height', (parentHeight - combineHeights(siblings($element)) - additionalHeight) + "px") 21 | 22 | $timeout -> 23 | angular.element($window).triggerHandler('resize') 24 | , 1000 25 | ] --------------------------------------------------------------------------------