diff --git a/jquery.tagsinput.js b/jquery.tagsinput.js index f57d6e9..fb71d79 100644 --- a/jquery.tagsinput.js +++ b/jquery.tagsinput.js @@ -18,12 +18,60 @@ var delimiter = new Array(); var tags_callbacks = new Array(); - $.fn.doAutosize = function(options){ - alert(JSON.stringify(options)); - } + $.fn.doAutosize = function(o){ + var minWidth = $(this).data('minwidth'), + maxWidth = $(this).data('maxwidth'), + val = '', + input = $(this), + testSubject = $('#'+$(this).data('tester_id')); + + if (val === (val = input.val())) {return;} + + // Enter new content into testSubject + var escaped = val.replace(/&/g, '&').replace(/\s/g,' ').replace(//g, '>'); + testSubject.html(escaped); + // Calculate new width + whether to change + var testerWidth = testSubject.width(), + newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth, + currentWidth = input.width(), + isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth) + || (newWidth > minWidth && newWidth < maxWidth); + + // Animate width + if (isValidWidthChange) { + input.width(newWidth); + } + + + }; $.fn.resetAutosize = function(options){ - alert(JSON.stringify(options)); - } + // alert(JSON.stringify(options)); + var minWidth = $(this).data('minwidth') || options.minInputWidth || $(this).width(), + maxWidth = $(this).data('maxwidth') || options.maxInputWidth || ($(this).closest('.tagsinput').width() - options.inputPadding), + val = '', + input = $(this), + testSubject = $('').css({ + position: 'absolute', + top: -9999, + left: -9999, + width: 'auto', + fontSize: input.css('fontSize'), + fontFamily: input.css('fontFamily'), + fontWeight: input.css('fontWeight'), + letterSpacing: input.css('letterSpacing'), + whiteSpace: 'nowrap' + }), + testerId = $(this).attr('id')+'_autosize_tester'; + if(! $('#'+testerId).length > 0){ + testSubject.attr('id', testerId); + testSubject.appendTo('body'); + } + + input.data('minwidth', minWidth); + input.data('maxwidth', maxWidth); + input.data('tester_id', testerId); + input.css('width', minWidth); + }; $.fn.addTag = function(value,options) { var options = jQuery.extend({focus:false,callback:true},options); this.each(function() { @@ -135,7 +183,9 @@ 'unique':true, removeWithBackspace:true, placeholderColor:'#666666', - autosize: true + autosize: true, + comfortZone: 20, + inputPadding: 6*2, },options); this.each(function() { @@ -181,7 +231,8 @@ } if (settings.interactive) { $(data.fake_input).val($(data.fake_input).attr('data-default')); - $(data.fake_input).css('color',settings.placeholderColor); + $(data.fake_input).css('color',settings.placeholderColor); + $(data.fake_input).resetAutosize(settings); $(data.holder).bind('click',data,function(event) { $(event.data.fake_input).focus();