From 41ab67fe89629a454d13a31deafb20b9e67e0654 Mon Sep 17 00:00:00 2001 From: rakhmanov Date: Tue, 5 May 2015 15:49:37 +0600 Subject: [PATCH 1/6] added package.json for NPM installation --- package.json | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 package.json diff --git a/package.json b/package.json new file mode 100644 index 0000000..66dffbe --- /dev/null +++ b/package.json @@ -0,0 +1,21 @@ +{ + "name": "jquery.autosize.input", + "version": "1.0.0", + "description": "A jQuery plugin which automatically resizes the width of input fields according to the content, while typing", + "main": "jquery.autosize.input.js", + "repository": { + "type": "git", + "url": "https://github.com/MartinF/jQuery.Autosize.Input" + }, + "keywords": [ + "jquery", + "autosize", + "input" + ], + "author": "Martin From", + "license": "MIT", + "bugs": { + "url": "https://github.com/MartinF/jQuery.Autosize.Input/issues" + }, + "homepage": "https://github.com/MartinF/jQuery.Autosize.Input" +} From 740394097589ec984ff6f90aa26acbbd265a822a Mon Sep 17 00:00:00 2001 From: rakhmanov Date: Wed, 6 May 2015 17:47:35 +0600 Subject: [PATCH 2/6] AMD, CommonJS support --- jquery.autosize.input.js | 225 +++++++++++++++++++++------------------ 1 file changed, 121 insertions(+), 104 deletions(-) diff --git a/jquery.autosize.input.js b/jquery.autosize.input.js index d4bf181..9a7a12e 100644 --- a/jquery.autosize.input.js +++ b/jquery.autosize.input.js @@ -1,118 +1,135 @@ -var Plugins; -(function (Plugins) { - var AutosizeInputOptions = (function () { - function AutosizeInputOptions(space) { - if (typeof space === "undefined") { space = 30; } - this.space = space; - } - return AutosizeInputOptions; - })(); - Plugins.AutosizeInputOptions = AutosizeInputOptions; - - var AutosizeInput = (function () { - function AutosizeInput(input, options) { - var _this = this; - this._input = $(input); - this._options = $.extend({}, AutosizeInput.getDefaultOptions(), options); - - // Init mirror - this._mirror = $(''); - - // Copy to mirror - $.each(['fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'letterSpacing', 'textTransform', 'wordSpacing', 'textIndent'], function (i, val) { - _this._mirror[0].style[val] = _this._input.css(val); - }); - $("body").append(this._mirror); - - // Bind events - change update paste click mousedown mouseup focus blur - // IE 9 need keydown to keep updating while deleting (keeping backspace in - else it will first update when backspace is released) - // IE 9 need keyup incase text is selected and backspace/deleted is hit - keydown is to early - // How to fix problem with hitting the delete "X" in the box - but not updating!? mouseup is apparently to early - // Could bind separatly and set timer - // Add so it automatically updates if value of input is changed http://stackoverflow.com/a/1848414/58524 - this._input.on("keydown keyup input propertychange change", function (e) { - _this.update(); - }); - - // Update - (function () { - _this.update(); - })(); - } - AutosizeInput.prototype.getOptions = function () { - return this._options; - }; - - AutosizeInput.prototype.update = function () { - var value = this._input.val() || ""; - - if (value === this._mirror.text()) { - // Nothing have changed - skip - return; +(function (factory) { + if (typeof define === "function" && define.amd) { + // AMD support + define(["jquery.autosize.input"], factory); + } else if (typeof exports !== 'undefined') { + // CommonJS support + module.exports = factory; + } else { + // Non-modular execution + factory(jQuery); + } +})(function (jQuery) { + + var Plugins; + (function (Plugins) { + var AutosizeInputOptions = (function () { + function AutosizeInputOptions(space) { + if (typeof space === "undefined") { space = 30; } + this.space = space; + } + return AutosizeInputOptions; + })(); + Plugins.AutosizeInputOptions = AutosizeInputOptions; + + var AutosizeInput = (function () { + function AutosizeInput(input, options) { + var _this = this; + this._input = $(input); + this._options = $.extend({}, AutosizeInput.getDefaultOptions(), options); + + // Init mirror + this._mirror = $(''); + + // Copy to mirror + $.each(['fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'letterSpacing', 'textTransform', 'wordSpacing', 'textIndent'], function (i, val) { + _this._mirror[0].style[val] = _this._input.css(val); + }); + $("body").append(this._mirror); + + // Bind events - change update paste click mousedown mouseup focus blur + // IE 9 need keydown to keep updating while deleting (keeping backspace in - else it will first update when backspace is released) + // IE 9 need keyup incase text is selected and backspace/deleted is hit - keydown is to early + // How to fix problem with hitting the delete "X" in the box - but not updating!? mouseup is apparently to early + // Could bind separatly and set timer + // Add so it automatically updates if value of input is changed http://stackoverflow.com/a/1848414/58524 + this._input.on("keydown keyup input propertychange change", function (e) { + _this.update(); + }); + + // Update + (function () { + _this.update(); + })(); } + AutosizeInput.prototype.getOptions = function () { + return this._options; + }; - // Update mirror - this._mirror.text(value); + AutosizeInput.prototype.update = function () { + var value = this._input.val() || ""; - // Calculate the width - var newWidth = this._mirror.width() + this._options.space; + if (value === this._mirror.text()) { + // Nothing have changed - skip + return; + } - // Update the width - this._input.width(newWidth); - }; + // Update mirror + this._mirror.text(value); - AutosizeInput.getDefaultOptions = function () { - return this._defaultOptions; - }; + // Calculate the width + var newWidth = this._mirror.width() + this._options.space; - AutosizeInput.getInstanceKey = function () { - // Use camelcase because .data()['autosize-input-instance'] will not work - return "autosizeInputInstance"; - }; - AutosizeInput._defaultOptions = new AutosizeInputOptions(); - return AutosizeInput; - })(); - Plugins.AutosizeInput = AutosizeInput; + // Update the width + this._input.width(newWidth); + }; - // jQuery Plugin - (function ($) { - var pluginDataAttributeName = "autosize-input"; - var validTypes = ["text", "password", "search", "url", "tel", "email", "number"]; + AutosizeInput.getDefaultOptions = function () { + return this._defaultOptions; + }; + + AutosizeInput.getInstanceKey = function () { + // Use camelcase because .data()['autosize-input-instance'] will not work + return "autosizeInputInstance"; + }; + AutosizeInput._defaultOptions = new AutosizeInputOptions(); + return AutosizeInput; + })(); + Plugins.AutosizeInput = AutosizeInput; // jQuery Plugin - $.fn.autosizeInput = function (options) { - return this.each(function () { - // Make sure it is only applied to input elements of valid type - // Or let it be the responsibility of the programmer to only select and apply to valid elements? - if (!(this.tagName == "INPUT" && $.inArray(this.type, validTypes) > -1)) { - // Skip - if not input and of valid type - return; - } + (function ($) { + var pluginDataAttributeName = "autosize-input"; + var validTypes = ["text", "password", "search", "url", "tel", "email", "number"]; + + // jQuery Plugin + $.fn.autosizeInput = function (options) { + return this.each(function () { + // Make sure it is only applied to input elements of valid type + // Or let it be the responsibility of the programmer to only select and apply to valid elements? + if (!(this.tagName == "INPUT" && $.inArray(this.type, validTypes) > -1)) { + // Skip - if not input and of valid type + return; + } - var $this = $(this); + var $this = $(this); - if (!$this.data(Plugins.AutosizeInput.getInstanceKey())) { - // If instance not already created and attached - if (options == undefined) { - // Try get options from attribute - options = $this.data(pluginDataAttributeName); + if (!$this.data(Plugins.AutosizeInput.getInstanceKey())) { + // If instance not already created and attached + if (options == undefined) { + // Try get options from attribute + options = $this.data(pluginDataAttributeName); + } + + // Create and attach instance + $this.data(Plugins.AutosizeInput.getInstanceKey(), new Plugins.AutosizeInput(this, options)); } + }); + }; - // Create and attach instance - $this.data(Plugins.AutosizeInput.getInstanceKey(), new Plugins.AutosizeInput(this, options)); - } + // On Document Ready + $(function () { + // Instantiate for all with data-provide=autosize-input attribute + $("input[data-" + pluginDataAttributeName + "]").autosizeInput(); }); - }; - - // On Document Ready - $(function () { - // Instantiate for all with data-provide=autosize-input attribute - $("input[data-" + pluginDataAttributeName + "]").autosizeInput(); - }); - // Alternative to use On Document Ready and creating the instance immediately - //$(document).on('focus.autosize-input', 'input[data-autosize-input]', function (e) - //{ - // $(this).autosizeInput(); - //}); - })(jQuery); -})(Plugins || (Plugins = {})); + // Alternative to use On Document Ready and creating the instance immediately + //$(document).on('focus.autosize-input', 'input[data-autosize-input]', function (e) + //{ + // $(this).autosizeInput(); + //}); + })(jQuery); + })(Plugins || (Plugins = {})); +}); + + + From 0a6c0382fe108baa7f0388c4e0c533dad7558abc Mon Sep 17 00:00:00 2001 From: rakhmanov Date: Wed, 6 May 2015 18:22:28 +0600 Subject: [PATCH 3/6] fix support CommonJS --- jquery.autosize.input.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/jquery.autosize.input.js b/jquery.autosize.input.js index 9a7a12e..a8b5fd3 100644 --- a/jquery.autosize.input.js +++ b/jquery.autosize.input.js @@ -4,7 +4,8 @@ define(["jquery.autosize.input"], factory); } else if (typeof exports !== 'undefined') { // CommonJS support - module.exports = factory; + var jQuery = require('jquery'); + module.exports = factory(jQuery); } else { // Non-modular execution factory(jQuery); From 0e2f0569d1a19a9b0086134ad8be80de2b06256b Mon Sep 17 00:00:00 2001 From: rakhmanov Date: Wed, 13 May 2015 18:19:57 +0600 Subject: [PATCH 4/6] added destroy method from VitaliyZheleznov@2d30a3ff549d3620acfa2e9238862da82fb54280 --- jquery.autosize.input.js | 38 ++++++++++++++++++++++++++++++++------ 1 file changed, 32 insertions(+), 6 deletions(-) diff --git a/jquery.autosize.input.js b/jquery.autosize.input.js index a8b5fd3..e5ed1de 100644 --- a/jquery.autosize.input.js +++ b/jquery.autosize.input.js @@ -29,6 +29,10 @@ this._input = $(input); this._options = $.extend({}, AutosizeInput.getDefaultOptions(), options); + this._updateHandler = function(e){ ++ _this.update(); ++ }; + // Init mirror this._mirror = $(''); @@ -44,19 +48,23 @@ // How to fix problem with hitting the delete "X" in the box - but not updating!? mouseup is apparently to early // Could bind separatly and set timer // Add so it automatically updates if value of input is changed http://stackoverflow.com/a/1848414/58524 - this._input.on("keydown keyup input propertychange change", function (e) { - _this.update(); - }); + this._input.on("keydown keyup input propertychange change", this._updateHandler); // Update (function () { _this.update(); })(); - } + }; + AutosizeInput.prototype.getOptions = function () { - return this._options; + return this._options; }; + AutosizeInput.prototype.destroy = function() { ++ this._mirror.remove(); ++ this._input.off("keydown keyup input propertychange change", null, this._updateHandler); ++ }; + AutosizeInput.prototype.update = function () { var value = this._input.val() || ""; @@ -92,9 +100,15 @@ (function ($) { var pluginDataAttributeName = "autosize-input"; var validTypes = ["text", "password", "search", "url", "tel", "email", "number"]; + var methods = { ++ destroy : function() { ++ var $this = $(this); ++ $this.data(Plugins.AutosizeInput.getInstanceKey()).destroy() ++ } ++ }; // jQuery Plugin - $.fn.autosizeInput = function (options) { + $.fn.autosizeInput = function (optionsAndMethods) { return this.each(function () { // Make sure it is only applied to input elements of valid type // Or let it be the responsibility of the programmer to only select and apply to valid elements? @@ -105,6 +119,14 @@ var $this = $(this); + if ( options == undefined ) { ++ if (methods[optionsAndMethods]){ ++ var method = optionsAndMethods; ++ } else { ++ var options = optionsAndMethods; ++ } ++ } + if (!$this.data(Plugins.AutosizeInput.getInstanceKey())) { // If instance not already created and attached if (options == undefined) { @@ -115,6 +137,10 @@ // Create and attach instance $this.data(Plugins.AutosizeInput.getInstanceKey(), new Plugins.AutosizeInput(this, options)); } + + if ( method != undefined) { ++ return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )); ++ } }); }; From 086c39677132150426a699049568c9e37257c97e Mon Sep 17 00:00:00 2001 From: rakhmanov Date: Wed, 13 May 2015 18:47:39 +0600 Subject: [PATCH 5/6] fix pluses from pull request --- jquery.autosize.input.js | 44 +++++++++++++++++----------------------- 1 file changed, 19 insertions(+), 25 deletions(-) diff --git a/jquery.autosize.input.js b/jquery.autosize.input.js index e5ed1de..fa3234f 100644 --- a/jquery.autosize.input.js +++ b/jquery.autosize.input.js @@ -29,10 +29,6 @@ this._input = $(input); this._options = $.extend({}, AutosizeInput.getDefaultOptions(), options); - this._updateHandler = function(e){ -+ _this.update(); -+ }; - // Init mirror this._mirror = $(''); @@ -48,22 +44,20 @@ // How to fix problem with hitting the delete "X" in the box - but not updating!? mouseup is apparently to early // Could bind separatly and set timer // Add so it automatically updates if value of input is changed http://stackoverflow.com/a/1848414/58524 - this._input.on("keydown keyup input propertychange change", this._updateHandler); + this._input.on("keydown keyup input propertychange change", _this.update); // Update - (function () { - _this.update(); - })(); - }; + _this.update(); + } AutosizeInput.prototype.getOptions = function () { return this._options; }; AutosizeInput.prototype.destroy = function() { -+ this._mirror.remove(); -+ this._input.off("keydown keyup input propertychange change", null, this._updateHandler); -+ }; + this._mirror.remove(); + this._input.off("keydown keyup input propertychange change", null, this.update); + }; AutosizeInput.prototype.update = function () { var value = this._input.val() || ""; @@ -101,11 +95,11 @@ var pluginDataAttributeName = "autosize-input"; var validTypes = ["text", "password", "search", "url", "tel", "email", "number"]; var methods = { -+ destroy : function() { -+ var $this = $(this); -+ $this.data(Plugins.AutosizeInput.getInstanceKey()).destroy() -+ } -+ }; + destroy : function() { + var $this = $(this); + $this.data(Plugins.AutosizeInput.getInstanceKey()).destroy() + } + }; // jQuery Plugin $.fn.autosizeInput = function (optionsAndMethods) { @@ -120,12 +114,12 @@ var $this = $(this); if ( options == undefined ) { -+ if (methods[optionsAndMethods]){ -+ var method = optionsAndMethods; -+ } else { -+ var options = optionsAndMethods; -+ } -+ } + if (methods[optionsAndMethods]){ + var method = optionsAndMethods; + } else { + var options = optionsAndMethods; + } + } if (!$this.data(Plugins.AutosizeInput.getInstanceKey())) { // If instance not already created and attached @@ -139,8 +133,8 @@ } if ( method != undefined) { -+ return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )); -+ } + return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 )); + } }); }; From 480d4141f8f525b997443a2179c4ae18c3a824b5 Mon Sep 17 00:00:00 2001 From: rakhmanov Date: Wed, 13 May 2015 18:54:35 +0600 Subject: [PATCH 6/6] fix binding errors --- jquery.autosize.input.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/jquery.autosize.input.js b/jquery.autosize.input.js index fa3234f..c87ee3e 100644 --- a/jquery.autosize.input.js +++ b/jquery.autosize.input.js @@ -44,7 +44,7 @@ // How to fix problem with hitting the delete "X" in the box - but not updating!? mouseup is apparently to early // Could bind separatly and set timer // Add so it automatically updates if value of input is changed http://stackoverflow.com/a/1848414/58524 - this._input.on("keydown keyup input propertychange change", _this.update); + this._input.on("keydown keyup input propertychange change", _this.update.bind(_this)); // Update _this.update(); @@ -56,7 +56,7 @@ AutosizeInput.prototype.destroy = function() { this._mirror.remove(); - this._input.off("keydown keyup input propertychange change", null, this.update); + this._input.off("keydown keyup input propertychange change", null, this.update.bind(this)); }; AutosizeInput.prototype.update = function () {