diff --git a/jquery.autosize.input.js b/jquery.autosize.input.js
index d4bf181..c87ee3e 100644
--- a/jquery.autosize.input.js
+++ b/jquery.autosize.input.js
@@ -1,118 +1,156 @@
-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 () {
+(function (factory) {
+ if (typeof define === "function" && define.amd) {
+ // AMD support
+ define(["jquery.autosize.input"], factory);
+ } else if (typeof exports !== 'undefined') {
+ // CommonJS support
+ var jQuery = require('jquery');
+ module.exports = factory(jQuery);
+ } 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", _this.update.bind(_this));
+
+ // Update
_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;
}
- // Update mirror
- this._mirror.text(value);
+ AutosizeInput.prototype.getOptions = function () {
+ return this._options;
+ };
+
+ AutosizeInput.prototype.destroy = function() {
+ this._mirror.remove();
+ this._input.off("keydown keyup input propertychange change", null, this.update.bind(this));
+ };
- // Calculate the width
- var newWidth = this._mirror.width() + this._options.space;
+ AutosizeInput.prototype.update = function () {
+ var value = this._input.val() || "";
- // Update the width
- this._input.width(newWidth);
- };
+ if (value === this._mirror.text()) {
+ // Nothing have changed - skip
+ return;
+ }
- AutosizeInput.getDefaultOptions = function () {
- return this._defaultOptions;
- };
+ // Update mirror
+ this._mirror.text(value);
- AutosizeInput.getInstanceKey = function () {
- // Use camelcase because .data()['autosize-input-instance'] will not work
- return "autosizeInputInstance";
- };
- AutosizeInput._defaultOptions = new AutosizeInputOptions();
- return AutosizeInput;
- })();
- Plugins.AutosizeInput = AutosizeInput;
+ // Calculate the width
+ var newWidth = this._mirror.width() + this._options.space;
- // jQuery Plugin
- (function ($) {
- var pluginDataAttributeName = "autosize-input";
- var validTypes = ["text", "password", "search", "url", "tel", "email", "number"];
+ // Update the width
+ this._input.width(newWidth);
+ };
- // 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;
- }
+ 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
+ (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 (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?
+ if (!(this.tagName == "INPUT" && $.inArray(this.type, validTypes) > -1)) {
+ // Skip - if not input and of valid type
+ return;
+ }
+
+ 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 ( options == undefined ) {
+ if (methods[optionsAndMethods]){
+ var method = optionsAndMethods;
+ } else {
+ var options = optionsAndMethods;
+ }
}
- // Create and attach instance
- $this.data(Plugins.AutosizeInput.getInstanceKey(), new Plugins.AutosizeInput(this, options));
- }
+ 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));
+ }
+
+ if ( method != undefined) {
+ return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
+ }
+ });
+ };
+
+ // 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 = {}));
+});
+
+
+
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"
+}