├── LICENCE.txt
├── README.md
├── bower.json
├── elastic.js
├── index.html
└── package.json


/LICENCE.txt:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Monospaced
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | [DEPRECATED] Angular Elastic
  2 | ===============
  3 | 
  4 | **Since [AngularJS support has been discontinued](https://blog.angular.io/discontinued-long-term-support-for-angularjs-cc066b82e65a) this package is deprecated and no longer maintained.**
  5 | 
  6 | ---
  7 | 
  8 | Elastic (autosize) textareas for AngularJS, without jQuery dependency.
  9 | 
 10 | [See it in action](http://monospaced.github.io/angular-elastic).
 11 | 
 12 | Usage
 13 | -----
 14 | 
 15 | as attribute
 16 | 
 17 |     <textarea msd-elastic ng-model="foo">
 18 |       ...
 19 |     </textarea>
 20 | 
 21 | as class
 22 | 
 23 |     <textarea class="msd-elastic" ng-model="bar">
 24 |       ...
 25 |     </textarea>
 26 | 
 27 | optionally append whitespace to the end of the height calculation (an extra newline improves the appearance when animating)
 28 | 
 29 |     <textarea msd-elastic="\n" ng-model="foo">
 30 |       ...
 31 |     </textarea>
 32 | 
 33 |     <textarea class="msd-elastic: \n;" ng-model="bar">
 34 |       ...
 35 |     </textarea>
 36 | 
 37 | or configure whitespace globally
 38 | 
 39 |     app.config(['msdElasticConfig', function(msdElasticConfig) {
 40 |       msdElasticConfig.append = '\n';
 41 |     }])
 42 | 
 43 | the directive also emits an `elastic:resize` event which you can listen for
 44 | 
 45 |     $scope.$on('elastic:resize', function(event, element, oldHeight, newHeight) {
 46 |       // do stuff
 47 |     });
 48 | 
 49 | Single line textareas
 50 | --------------
 51 | 
 52 | Set the `rows` attribute to `1`, as browsers default to `2`.
 53 | 
 54 |     <textarea rows="1" msd-elastic ng-model="foo">
 55 |       ...
 56 |     </textarea>
 57 | 
 58 | Install
 59 | -------
 60 | 
 61 |     bower install angular-elastic
 62 | 
 63 |     npm install angular-elastic
 64 | 
 65 | Include the `elastic.js` script provided by this component in your app.
 66 | 
 67 | Make sure to add `monospaced.elastic` to your app’s module dependencies.
 68 | 
 69 | ```
 70 | angular
 71 |   .module('yourApp', [
 72 |     'monospaced.elastic'
 73 |   ]);
 74 | ````
 75 | 
 76 | Support
 77 | -------
 78 | 
 79 | __Modern browsers__ only—Internet Explorer 6, 7 & 8 retain their default textarea behaviour.
 80 | 
 81 | Demo
 82 | ----------------
 83 | 
 84 | * [monospaced.github.io/angular-elastic](http://monospaced.github.io/angular-elastic)
 85 | * [plunker](http://plnkr.co/edit/9y6YLriAwsK9hqdu72WT?p=preview)
 86 | 
 87 | 
 88 | How it works
 89 | ------------
 90 | 
 91 | By creating a hidden textarea that mirrors the textarea to which the directive was applied, Angular Elastic can measure the required height and adjust the textarea accordingly. Adjustments are done on:
 92 | 
 93 | * Keystroke events
 94 | * Window resize events
 95 | * Model changes
 96 | 
 97 | This works well in most cases with no additional code required other than described in the Usage section above. However, it may occur that the adjustment must be invoked manually at a time that is not covered by the events listed above. E.g. textareas with the style `display: none;` may not have a valid width  in Safari which produces incorrect adjustments. In this case the adjustment needs to be invoked once these textareas become visible. For that Angular Elastic listens to the `elastic:adjust` event on its scope. To invoke the adjustment for all textareas covered by Angular Elastic use:
 98 | 
 99 |     $rootScope.$broadcast('elastic:adjust');
100 | 
101 | Inspiration
102 | ----------------
103 | 
104 | * [jQuery Autosize](http://www.jacklmoore.com/autosize/)
105 | 
106 | * [jQuery Elastic](http://unwrongest.com/projects/elastic/)
107 | 
108 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-elastic",
 3 |   "version": "2.5.1",
 4 |   "main": "elastic.js",
 5 |   "ignore": [
 6 |     "**/.*",
 7 |     "node_modules",
 8 |     "components"
 9 |   ],
10 |   "dependencies": {
11 |     "angular": ">=1.0.6"
12 |   }
13 | }


--------------------------------------------------------------------------------
/elastic.js:
--------------------------------------------------------------------------------
  1 | /*
  2 |  * angular-elastic v2.5.1
  3 |  * (c) 2014 Monospaced http://monospaced.com
  4 |  * License: MIT
  5 |  */
  6 | 
  7 | if (typeof module !== 'undefined' &&
  8 |     typeof exports !== 'undefined' &&
  9 |     module.exports === exports){
 10 |   module.exports = 'monospaced.elastic';
 11 | }
 12 | 
 13 | angular.module('monospaced.elastic', [])
 14 | 
 15 |   .constant('msdElasticConfig', {
 16 |     append: ''
 17 |   })
 18 | 
 19 |   .directive('msdElastic', [
 20 |     '$timeout', '$window', 'msdElasticConfig',
 21 |     function($timeout, $window, config) {
 22 |       'use strict';
 23 | 
 24 |       return {
 25 |         require: 'ngModel',
 26 |         restrict: 'A, C',
 27 |         link: function(scope, element, attrs, ngModel) {
 28 | 
 29 |           // cache a reference to the DOM element
 30 |           var ta = element[0],
 31 |               $ta = element;
 32 | 
 33 |           // ensure the element is a textarea, and browser is capable
 34 |           if (ta.nodeName !== 'TEXTAREA' || !$window.getComputedStyle) {
 35 |             return;
 36 |           }
 37 | 
 38 |           // set these properties before measuring dimensions
 39 |           $ta.css({
 40 |             'overflow': 'hidden',
 41 |             'overflow-y': 'hidden',
 42 |             'word-wrap': 'break-word'
 43 |           });
 44 | 
 45 |           // force text reflow
 46 |           var text = ta.value;
 47 |           ta.value = '';
 48 |           ta.value = text;
 49 | 
 50 |           var append = attrs.msdElastic ? attrs.msdElastic.replace(/\\n/g, '\n') : config.append,
 51 |               $win = angular.element($window),
 52 |               mirrorInitStyle = 'position: absolute; top: -999px; right: auto; bottom: auto;' +
 53 |                                 'left: 0; overflow: hidden; -webkit-box-sizing: content-box;' +
 54 |                                 '-moz-box-sizing: content-box; box-sizing: content-box;' +
 55 |                                 'min-height: 0 !important; height: 0 !important; padding: 0;' +
 56 |                                 'word-wrap: break-word; border: 0;',
 57 |               $mirror = angular.element('<textarea aria-hidden="true" tabindex="-1" ' +
 58 |                                         'style="' + mirrorInitStyle + '"/>').data('elastic', true),
 59 |               mirror = $mirror[0],
 60 |               taStyle = getComputedStyle(ta),
 61 |               resize = taStyle.getPropertyValue('resize'),
 62 |               borderBox = taStyle.getPropertyValue('box-sizing') === 'border-box' ||
 63 |                           taStyle.getPropertyValue('-moz-box-sizing') === 'border-box' ||
 64 |                           taStyle.getPropertyValue('-webkit-box-sizing') === 'border-box',
 65 |               boxOuter = !borderBox ? {width: 0, height: 0} : {
 66 |                             width:  parseInt(taStyle.getPropertyValue('border-right-width'), 10) +
 67 |                                     parseInt(taStyle.getPropertyValue('padding-right'), 10) +
 68 |                                     parseInt(taStyle.getPropertyValue('padding-left'), 10) +
 69 |                                     parseInt(taStyle.getPropertyValue('border-left-width'), 10),
 70 |                             height: parseInt(taStyle.getPropertyValue('border-top-width'), 10) +
 71 |                                     parseInt(taStyle.getPropertyValue('padding-top'), 10) +
 72 |                                     parseInt(taStyle.getPropertyValue('padding-bottom'), 10) +
 73 |                                     parseInt(taStyle.getPropertyValue('border-bottom-width'), 10)
 74 |                           },
 75 |               minHeightValue = parseInt(taStyle.getPropertyValue('min-height'), 10),
 76 |               heightValue = parseInt(taStyle.getPropertyValue('height'), 10),
 77 |               minHeight = Math.max(minHeightValue, heightValue) - boxOuter.height,
 78 |               maxHeight = parseInt(taStyle.getPropertyValue('max-height'), 10),
 79 |               mirrored,
 80 |               active,
 81 |               copyStyle = ['font-family',
 82 |                            'font-size',
 83 |                            'font-weight',
 84 |                            'font-style',
 85 |                            'letter-spacing',
 86 |                            'line-height',
 87 |                            'text-transform',
 88 |                            'word-spacing',
 89 |                            'text-indent'];
 90 | 
 91 |           // exit if elastic already applied (or is the mirror element)
 92 |           if ($ta.data('elastic')) {
 93 |             return;
 94 |           }
 95 | 
 96 |           // Opera returns max-height of -1 if not set
 97 |           maxHeight = maxHeight && maxHeight > 0 ? maxHeight : 9e4;
 98 | 
 99 |           // append mirror to the DOM
100 |           if (mirror.parentNode !== document.body) {
101 |             angular.element(document.body).append(mirror);
102 |           }
103 | 
104 |           // set resize and apply elastic
105 |           $ta.css({
106 |             'resize': (resize === 'none' || resize === 'vertical') ? 'none' : 'horizontal'
107 |           }).data('elastic', true);
108 | 
109 |           /*
110 |            * methods
111 |            */
112 | 
113 |           function initMirror() {
114 |             var mirrorStyle = mirrorInitStyle;
115 | 
116 |             mirrored = ta;
117 |             // copy the essential styles from the textarea to the mirror
118 |             taStyle = getComputedStyle(ta);
119 |             angular.forEach(copyStyle, function(val) {
120 |               mirrorStyle += val + ':' + taStyle.getPropertyValue(val) + ';';
121 |             });
122 |             mirror.setAttribute('style', mirrorStyle);
123 |           }
124 | 
125 |           function adjust() {
126 |             var taHeight,
127 |                 taComputedStyleWidth,
128 |                 mirrorHeight,
129 |                 width,
130 |                 overflow;
131 | 
132 |             if (mirrored !== ta) {
133 |               initMirror();
134 |             }
135 | 
136 |             // active flag prevents actions in function from calling adjust again
137 |             if (!active) {
138 |               active = true;
139 | 
140 |               mirror.value = ta.value + append; // optional whitespace to improve animation
141 |               mirror.style.overflowY = ta.style.overflowY;
142 | 
143 |               taHeight = ta.style.height === '' ? 'auto' : parseInt(ta.style.height, 10);
144 | 
145 |               taComputedStyleWidth = getComputedStyle(ta).getPropertyValue('width');
146 | 
147 |               // ensure getComputedStyle has returned a readable 'used value' pixel width
148 |               if (taComputedStyleWidth.substr(taComputedStyleWidth.length - 2, 2) === 'px') {
149 |                 // update mirror width in case the textarea width has changed
150 |                 width = parseInt(taComputedStyleWidth, 10) - boxOuter.width;
151 |                 mirror.style.width = width + 'px';
152 |               }
153 | 
154 |               mirrorHeight = mirror.scrollHeight;
155 | 
156 |               if (mirrorHeight > maxHeight) {
157 |                 mirrorHeight = maxHeight;
158 |                 overflow = 'scroll';
159 |               } else if (mirrorHeight < minHeight) {
160 |                 mirrorHeight = minHeight;
161 |               }
162 |               mirrorHeight += boxOuter.height;
163 |               ta.style.overflowY = overflow || 'hidden';
164 | 
165 |               if (taHeight !== mirrorHeight) {
166 |                 scope.$emit('elastic:resize', $ta, taHeight, mirrorHeight);
167 |                 ta.style.height = mirrorHeight + 'px';
168 |               }
169 | 
170 |               // small delay to prevent an infinite loop
171 |               $timeout(function() {
172 |                 active = false;
173 |               }, 1, false);
174 | 
175 |             }
176 |           }
177 | 
178 |           function forceAdjust() {
179 |             active = false;
180 |             adjust();
181 |           }
182 | 
183 |           /*
184 |            * initialise
185 |            */
186 | 
187 |           // listen
188 |           if ('onpropertychange' in ta && 'oninput' in ta) {
189 |             // IE9
190 |             ta['oninput'] = ta.onkeyup = adjust;
191 |           } else {
192 |             ta['oninput'] = adjust;
193 |           }
194 | 
195 |           $win.bind('resize', forceAdjust);
196 | 
197 |           scope.$watch(function() {
198 |             return ngModel.$modelValue;
199 |           }, function(newValue) {
200 |             forceAdjust();
201 |           });
202 | 
203 |           scope.$on('elastic:adjust', function() {
204 |             initMirror();
205 |             forceAdjust();
206 |           });
207 | 
208 |           $timeout(adjust, 0, false);
209 | 
210 |           /*
211 |            * destroy
212 |            */
213 | 
214 |           scope.$on('$destroy', function() {
215 |             $mirror.remove();
216 |             $win.unbind('resize', forceAdjust);
217 |           });
218 |         }
219 |       };
220 |     }
221 |   ]);
222 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en-gb" data-ng-app="elasticDemo" id="ng-app">
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <title>Angular Elastic</title>
  6 |   <meta name="viewport" content="width=device-width">
  7 |   <link rel="stylesheet" href="//necolas.github.io/normalize.css/2.1.1/normalize.css">
  8 |   <style>
  9 |     html {
 10 |       background: #e7f3ff;
 11 |       color: #1c000e;
 12 |       text-shadow: 0 1px 0 #fff;
 13 |     }
 14 |     body {
 15 |       margin: 8px auto;
 16 |       max-width: 90%;
 17 |       width: 480px;
 18 |     }
 19 |     h1 {
 20 |       margin: 0 0 8px;
 21 |       font-weight: normal;
 22 |       font-size: 30px;
 23 |     }
 24 |     a {
 25 |       color: #0074e7;
 26 |       text-decoration: none;
 27 |       -webkit-transition: all 250ms ease-in-out;
 28 |          -moz-transition: all 250ms ease-in-out;
 29 |            -o-transition: all 250ms ease-in-out;
 30 |               transition: all 250ms ease-in-out;
 31 |     }
 32 |     a:hover,
 33 |     a:focus,
 34 |     a:active {
 35 |       color: #0067ce;
 36 |       -webkit-transition: none;
 37 |          -moz-transition: none;
 38 |            -o-transition: none;
 39 |               transition: none;
 40 |     }
 41 |     textarea {
 42 |       padding: 10px;
 43 |       width: 300px;
 44 |       max-width: 90%;
 45 |     }
 46 |     .animate:focus {
 47 |       -webkit-transition: height 50ms ease-in-out;
 48 |          -moz-transition: height 50ms ease-in-out;
 49 |            -o-transition: height 50ms ease-in-out;
 50 |               transition: height 50ms ease-in-out;
 51 |     }
 52 |     .msd-elastic {
 53 |       max-height: 400px;
 54 |     }
 55 |     #first {
 56 |       font-size: 30px;
 57 |     }
 58 |   </style>
 59 | </head>
 60 | <body data-ng-controller="elasticDemoController">
 61 | 
 62 |   <h1>Angular Elastic</h1>
 63 | 
 64 |   <form data-ng-submit="submit()">
 65 |     <p>
 66 |       <textarea class="msd-elastic" data-ng-model="foo" id="first" data-ng-show="show" data-ng-controller="elasticCallbackController"></textarea>
 67 |     </p>
 68 |     <small data-ng-show="show"><a href data-ng-click="show = false">Hide</a> | </small>
 69 |     <small data-ng-show="!show"><a href data-ng-click="show = true">Show</a> | </small>
 70 |     <small><a href data-ng-click="foo = 'Model changed'">Change model</a></small>
 71 |     <p>
 72 |       <textarea class="animate msd-elastic: \n;" data-ng-model="bar"></textarea>
 73 |     </p>
 74 |     <p>
 75 |       <input type="submit" value="Submit and reset">
 76 |     </p>
 77 |   </form>
 78 | 
 79 |   <small>
 80 |     <a href="https://github.com/monospaced/angular-elastic">https://github.com/monospaced/angular-elastic</a> <br>
 81 |     <a href="http://monospaced.github.io/">Monospaced Labs</a>
 82 |   </small>
 83 | 
 84 |   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
 85 |   <script src="elastic.js"></script>
 86 |   <script>
 87 |     angular.module('elasticDemo', ['monospaced.elastic'])
 88 |       .controller('elasticDemoController', ['$scope', '$log', function($scope, $log){
 89 |         'use strict';
 90 | 
 91 |         $scope.foo = 'This textarea is going to grow when you fill it with text. Just type a few more words in it and you will see. This textarea is going to grow when you fill it with text.';
 92 |         $scope.bar = 'Elastic with a CSS transition. Try typing something...';
 93 | 
 94 |         $scope.submit = function(){
 95 |           $scope.bar = '';
 96 |         };
 97 | 
 98 |         $scope.show = true;
 99 |       }])
100 |       .controller('elasticCallbackController', ['$scope', '$log', function($scope, $log){
101 |         'use strict';
102 | 
103 |         $scope.$on('elastic:resize', function(){
104 |           $log.log('Height was adjusted!');
105 |         });
106 |       }]);
107 |   </script>
108 | </body>
109 | </html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-elastic",
 3 |   "version": "2.5.1",
 4 |   "description": "Elastic (autosize) textareas for AngularJS, without jQuery dependency.",
 5 |   "keywords": [
 6 |     "angular",
 7 |     "angularjs",
 8 |     "textarea",
 9 |     "elastic",
10 |     "autosize"
11 |   ],
12 |   "homepage": "http://monospaced.github.io/angular-elastic/",
13 |   "main": "elastic",
14 |   "bugs": "http://github.com/monospaced/angular-elastic/issues",
15 |   "license" : "MIT",
16 |   "repository" : {
17 |     "type" : "git",
18 |     "url" : "http://github.com/monospaced/angular-elastic"
19 |   },
20 |   "author": {
21 |     "name" : "Scott Boyle",
22 |     "email" : "scott@monospaced.com",
23 |     "url" : "http://scottboyle.co.uk/about"
24 |   },
25 |   "files": [
26 |     "elastic.js",
27 |     "package.json"
28 |   ],
29 |   "dependencies": {
30 |     "angular": ">=1.0.6"
31 |   }
32 | }


--------------------------------------------------------------------------------