angular-elastic-input - npm Package Compare versions

Comparing version 2.2.1 to 2.4.0

bower.json

 {
     "name": "angular-elastic-input",
     "description": "A directive for AngularJS which automatically resizes the width of input field according to the content, while typing.",
-    "version": "2.2.1",
+    "version": "2.4.0",
     "homepage": "https://github.com/jacek-pulit/angular-elastic-input",
@@ -6,0 +6,0 @@ "keywords": ["elastic input", "autosize input", "autogrow input"],

dist/angular-elastic-input.js

@@ -14,5 +14,26 @@ /**
     angular.element($document[0].body).append(wrapper);
+    function getStyle(oElm, css3Prop) {
+      var strValue = '';
+      if (window.getComputedStyle) {
+        strValue = getComputedStyle(oElm).getPropertyValue(css3Prop);
+      } else if (oElm.currentStyle) {
+        //IE
+        try {
+          strValue = oElm.currentStyle[css3Prop];
+        } catch (e) {
+        }
+      }
+      return strValue;
+    }
+    function getParentWidth(element) {
+      var parent = element[0], width;
+      do {
+        parent = parent.parentNode;
+        width = parseInt(getStyle(parent, 'width'), 10) - parseInt(getStyle(parent, 'padding-left'), 10) - parseInt(getStyle(parent, 'padding-right'), 10);
+      } while (getStyle(parent, 'display') != 'block' && parent.nodeName.toLowerCase() != 'body');
+      return width + 'px';
+    }
     function setMirrorStyle(mirror, element, attrs) {
       var style = $window.getComputedStyle(element[0]);
-      var defaultMaxWidth = style.maxWidth === 'none' ? element.parent().prop('clientWidth') : style.maxWidth;
+      var defaultMaxWidth = style.maxWidth === 'none' ? getParentWidth(element) : style.maxWidth;
       element.css('minWidth', attrs.puElasticInputMinwidth || style.minWidth);
@@ -57,7 +78,12 @@ element.css('maxWidth', attrs.puElasticInputMaxwidth || defaultMaxWidth);
         attrs.$set('ngTrim', attrs.ngTrim === 'true' ? 'true' : 'false');
-        var mirror = angular.element('<span style="white-space:pre;"></span>');
+        // Initial value of mirror is null character what should trigger initial width update
+        var mirror = angular.element('<span style="white-space:pre;">&#000;</span>');
         setMirrorStyle(mirror, element, attrs);
         wrapper.append(mirror);
         function update() {
-          mirror.text(element.val() || attrs.placeholder || '');
+          var newValue = element.val() || attrs.placeholder || '';
+          // If new value is the same value as previous one there is no need to update the styling
+          if (mirror.text() == newValue)
+            return;
+          mirror.text(newValue);
           var delta = parseInt(attrs.puElasticInputWidthDelta) || 1;
@@ -67,7 +93,4 @@ element.css('width', mirror.prop('offsetWidth') + delta + 'px');
         update();
-        if (attrs.ngModel) {
-          scope.$watch(attrs.ngModel, update);
-        } else {
-          element.on('keydown keyup focus input propertychange change', update);
-        }
+        scope.$watch(attrs.ngModel, update);
+        element.on('keydown keyup focus input propertychange change', update);
         scope.$on('$destroy', function () {
@@ -74,0 +97,0 @@ mirror.remove();

dist/angular-elastic-input.min.js

 /** 
  * angular-elastic-input 
  * A directive for AngularJS which automatically resizes the width of input field according to the content, while typing. 
- * @version: 2.2.1 
+ * @version: 2.4.0 
  * @author: Jacek Pulit <[e-mail]>
  * @license: MIT 
- * @build: Monday, June 6th, 2016, 7:30:11 AM GMT+0200 
+ * @build: Thursday, July 7th, 2016, 11:27:27 PM GMT+0200 
  */
 (function(){
-"use strict";angular.module("puElasticInput",[]).directive("puElasticInput",["$document","$window",function(a,b){function c(a,c,d){var e=b.getComputedStyle(c[0]),f="none"===e.maxWidth?c.parent().prop("clientWidth"):e.maxWidth;c.css("minWidth",d.puElasticInputMinwidth||e.minWidth),c.css("maxWidth",d.puElasticInputMaxwidth||f),angular.forEach(["fontFamily","fontSize","fontWeight","fontStyle","letterSpacing","textTransform","wordSpacing"],function(b){a.css(b,e[b])}),a.css("paddingLeft",e.textIndent),"border-box"===e.boxSizing?angular.forEach(["paddingLeft","paddingRight","borderLeftStyle","borderLeftWidth","borderRightStyle","borderRightWidth"],function(b){a.css(b,e[b])}):"padding-box"===e.boxSizing&&angular.forEach(["paddingLeft","paddingRight"],function(b){a.css(b,e[b])})}var d=angular.element('<div style="position:fixed; top:-999px; left:0;"></div>');return angular.element(a[0].body).append(d),{restrict:"A",link:function(a,b,e){function f(){g.text(b.val()||e.placeholder||"");var a=parseInt(e.puElasticInputWidthDelta)||1;b.css("width",g.prop("offsetWidth")+a+"px")}e.$set("ngTrim","true"===e.ngTrim?"true":"false");var g=angular.element('<span style="white-space:pre;"></span>');c(g,b,e),d.append(g),f(),e.ngModel?a.$watch(e.ngModel,f):b.on("keydown keyup focus input propertychange change",f),a.$on("$destroy",function(){g.remove()})}}}]);
+"use strict";angular.module("puElasticInput",[]).directive("puElasticInput",["$document","$window",function(a,b){function c(a,b){var c="";if(window.getComputedStyle)c=getComputedStyle(a).getPropertyValue(b);else if(a.currentStyle)try{c=a.currentStyle[b]}catch(d){}return c}function d(a){var b,d=a[0];do d=d.parentNode,b=parseInt(c(d,"width"),10)-parseInt(c(d,"padding-left"),10)-parseInt(c(d,"padding-right"),10);while("block"!=c(d,"display")&&"body"!=d.nodeName.toLowerCase());return b+"px"}function e(a,c,e){var f=b.getComputedStyle(c[0]),g="none"===f.maxWidth?d(c):f.maxWidth;c.css("minWidth",e.puElasticInputMinwidth||f.minWidth),c.css("maxWidth",e.puElasticInputMaxwidth||g),angular.forEach(["fontFamily","fontSize","fontWeight","fontStyle","letterSpacing","textTransform","wordSpacing"],function(b){a.css(b,f[b])}),a.css("paddingLeft",f.textIndent),"border-box"===f.boxSizing?angular.forEach(["paddingLeft","paddingRight","borderLeftStyle","borderLeftWidth","borderRightStyle","borderRightWidth"],function(b){a.css(b,f[b])}):"padding-box"===f.boxSizing&&angular.forEach(["paddingLeft","paddingRight"],function(b){a.css(b,f[b])})}var f=angular.element('<div style="position:fixed; top:-999px; left:0;"></div>');return angular.element(a[0].body).append(f),{restrict:"A",link:function(a,b,c){function d(){var a=b.val()||c.placeholder||"";if(g.text()!=a){g.text(a);var d=parseInt(c.puElasticInputWidthDelta)||1;b.css("width",g.prop("offsetWidth")+d+"px")}}c.$set("ngTrim","true"===c.ngTrim?"true":"false");var g=angular.element('<span style="white-space:pre;">&#000;</span>');e(g,b,c),f.append(g),d(),a.$watch(c.ngModel,d),b.on("keydown keyup focus input propertychange change",d),a.$on("$destroy",function(){g.remove()})}}}]);
 })();

package.json

 {
   "name": "angular-elastic-input",
   "description": "A directive for AngularJS which automatically resizes the width of input field according to the content, while typing.",
-  "version": "2.2.1",
+  "version": "2.4.0",
   "homepage": "https://github.com/jacek-pulit/angular-elastic-input",
@@ -6,0 +6,0 @@ "keywords": [

src/angular-elastic-input.js

@@ -15,5 +15,32 @@ /**
 
+    function getStyle(oElm, css3Prop){
+        var strValue = "";
+
+        if(window.getComputedStyle){
+            strValue = getComputedStyle(oElm).getPropertyValue(css3Prop);
+
+        } else if (oElm.currentStyle){ //IE
+            try {
+                strValue = oElm.currentStyle[css3Prop];
+            } catch (e) {}
+        }
+        return strValue;
+    }
+
+    function getParentWidth(element) {
+
+        var parent = element[0], width;
+
+        do {
+            parent = parent.parentNode;
+            width = parseInt(getStyle(parent, 'width'), 10) - parseInt(getStyle(parent, 'padding-left'), 10) - parseInt(getStyle(parent, 'padding-right'), 10);
+
+        } while( getStyle(parent, 'display') != 'block' && parent.nodeName.toLowerCase() != 'body' );
+
+        return width + 'px';
+    }
+
     function setMirrorStyle(mirror, element, attrs) {
         var style = $window.getComputedStyle(element[0]);
-        var defaultMaxWidth = style.maxWidth === 'none' ? element.parent().prop('clientWidth') : style.maxWidth;
+        var defaultMaxWidth = style.maxWidth === 'none' ? getParentWidth(element) : style.maxWidth;
         element.css('minWidth', attrs.puElasticInputMinwidth || style.minWidth);
@@ -49,3 +76,4 @@ element.css('maxWidth', attrs.puElasticInputMaxwidth || defaultMaxWidth);
 
-            var mirror = angular.element('<span style="white-space:pre;"></span>');
+            // Initial value of mirror is null character what should trigger initial width update
+            var mirror = angular.element('<span style="white-space:pre;">&#000;</span>');
             setMirrorStyle(mirror, element, attrs);
@@ -56,3 +84,10 @@
             function update() {
-                mirror.text(element.val() || attrs.placeholder || '');
+
+                var newValue = element.val() || attrs.placeholder || '';
+
+                // If new value is the same value as previous one there is no need to update the styling
+                if ( mirror.text() == newValue ) return;
+
+                mirror.text( newValue );
+
                 var delta = parseInt(attrs.puElasticInputWidthDelta) || 1;
@@ -64,7 +99,4 @@ element.css('width', mirror.prop('offsetWidth') + delta + 'px');
 
-            if (attrs.ngModel) {
-                scope.$watch(attrs.ngModel, update);
-            } else {
-                element.on('keydown keyup focus input propertychange change', update);
-            }
+            scope.$watch(attrs.ngModel, update);
+            element.on('keydown keyup focus input propertychange change', update);
 
@@ -71,0 +103,0 @@ scope.$on('$destroy', function() {

test/mainSpec.js

@@ -138,3 +138,18 @@ describe('puElasticInput', function() {
 
+        it('max width is set to outer element inner width', function(){
+            var element = compileAndDigest('<div style="width: 500px;"><input ng-model="s" pu-elastic-input></div>');
+            expect( element.find('input').css('max-width') ).toBe( '500px' );
+        });
+
+        it('max width is set to outer element inner width excluding padding', function(){
+            var element = compileAndDigest('<div style="width: 500px; padding: 0 10px 0 5px;"><input ng-model="s" pu-elastic-input></div>');
+            expect( element.find('input').css('max-width') ).toBe( '485px' );
+        });
+
+        it('max width is set to first outer block element inner width', function(){
+            var element = compileAndDigest('<div style="width: 500px; padding: 0 10px 0 5px;"><span><input ng-model="s" pu-elastic-input></span></div>');
+            expect( element.find('input').css('max-width') ).toBe( '485px' );
+        });
+
     });
 });

No alert changes

Improved metrics

Total package byte prevSize

153932

537.14%

Number of package files

29

20.83%

Lines of code

979

107.42%

No dependency changes