Feature/nora 1283 replaced msd elastic to autosize

client/common/directives/ModelField/ModelField.js

@@ -12,6 +12,7 @@ angular.module('dashboard.directives.ModelField', [
   'dashboard.directives.ModelFieldMultiSelect',
   'dashboard.directives.ModelFieldNumber',
   'dashboard.directive.DateTimePicker',
+  'dashboard.directive.AutoSize',
   'ngCookies',
   'ngSlider',
   'ngSignaturePad',
@@ -221,7 +222,7 @@ angular.module('dashboard.directives.ModelField', [
         template = '<label class="col-sm-2 control-label">{{ display.label || key | translate }}:</label>\
           <div class="col-sm-10">\
             <div class="error-message" ng-if="display.error.length > 0">{{ display.error }}</div>\
-            <textarea msd-elastic ng-model="data[key]" ng-keyup="lengthCheck($event)" ng-disabled="{{ display.readonly }}" ng-required="{{ model.properties[key].required }}" class="field form-control" ng-maxlength="{{ display.maxLength }}"></textarea>\
+            <textarea auto-size ng-model="data[key]" ng-keyup="lengthCheck($event)" ng-disabled="{{ display.readonly }}" ng-required="{{ model.properties[key].required }}" class="field form-control" ng-maxlength="{{ display.maxLength }}"></textarea>\
             <div class="model-field-description">\
               <span ng-if="display.description"> {{ display.description | translate }} </span> \
               <span ng-if="display.maxLength"> &nbsp({{ charsLeft }} characters left) </span>\

client/common/directives/NgAutoSize/ng-autosize.js

@@ -0,0 +1,30 @@
+// https://hassantariqblog.wordpress.com/2016/07/27/angularjs-textarea-auto-resize-directive
+
+angular.module('dashboard.directive.AutoSize', [
+])
+
+.directive('autoSize', function($timeout, $window) {
+  return {
+    restrict: 'A',
+    link: function(scope, element, attrs) {
+
+      scope.minTextAreaHeight = 150;
+
+      element.css({ 'height': 'auto', 'overflow-y': 'hidden' });
+      $timeout(function() {
+        var scrollHeight = element[0].scrollHeight;
+        var height = Math.max(scrollHeight, scope.minTextAreaHeight);
+        element.css('height', height + 'px');
+      }, 100);
+
+      function update() {
+        element.css({ 'height': 'auto', 'overflow-y': 'hidden' });
+        element.css('height', element[0].scrollHeight + 'px');
+      }
+
+      element.on('input', update);
+      element.on('load', update);
+      angular.element($window).bind('resize', update);
+    }
+  }
+});