| Index: trunk/extensions/Translate/resources/jquery.autoresize.js |
| — | — | @@ -1,104 +1,274 @@ |
| 2 | 2 | /* |
| 3 | | - * jQuery autoResize (textarea auto-resizer) |
| 4 | | - * @copyright James Padolsey http://james.padolsey.com |
| 5 | | - * @version 1.04 |
| 6 | | - * Modified by Nike |
| 7 | | - */ |
| | 3 | + * jQuery.fn.autoResize 1.14 |
| | 4 | + * -- |
| | 5 | + * https://github.com/jamespadolsey/jQuery.fn.autoResize |
| | 6 | + * -- |
| | 7 | + * This program is free software. It comes without any warranty, to |
| | 8 | + * the extent permitted by applicable law. You can redistribute it |
| | 9 | + * and/or modify it under the terms of the Do What The Fuck You Want |
| | 10 | + * To Public License, Version 2, as published by Sam Hocevar. See |
| | 11 | + * http://sam.zoy.org/wtfpl/COPYING for more details. */ |
| 8 | 12 | |
| 9 | 13 | (function($){ |
| 10 | | - |
| 11 | | - $.fn.autoResize = function(options) { |
| 12 | | - |
| 13 | | - // Just some abstracted details, |
| 14 | | - // to make plugin users happy: |
| 15 | | - var settings = $.extend({ |
| 16 | | - onResize : function(){}, |
| 17 | | - animate : true, |
| 18 | | - animateDuration : 150, |
| 19 | | - animateCallback : function(){}, |
| 20 | | - extraSpace : 20, |
| 21 | | - limit: 1000, |
| 22 | | - delay: 1000, |
| 23 | | - }, options); |
| 24 | | - |
| 25 | | - var timer; |
| 26 | | - |
| 27 | | - // Only textarea's auto-resize: |
| 28 | | - this.filter('textarea').each(function(){ |
| 29 | | - |
| 30 | | - // Get rid of scrollbars and disable WebKit resizing: |
| 31 | | - var textarea = $(this).css({resize:'none','overflow-y':'hidden'}), |
| 32 | | - |
| 33 | | - // Cache original height, for use later: |
| 34 | | - origHeight = textarea.height(), |
| 35 | | - |
| 36 | | - // Need clone of textarea, hidden off screen: |
| 37 | | - clone = (function(){ |
| 38 | | - |
| 39 | | - // Properties which may effect space taken up by chracters: |
| 40 | | - var props = ['height','width','lineHeight','textDecoration','letterSpacing'], |
| 41 | | - propOb = {}; |
| 42 | | - |
| 43 | | - // Create object of styles to apply: |
| 44 | | - $.each(props, function(i, prop){ |
| 45 | | - propOb[prop] = textarea.css(prop); |
| 46 | | - }); |
| 47 | | - |
| 48 | | - // Clone the actual textarea removing unique properties |
| 49 | | - // and insert before original textarea: |
| 50 | | - return textarea.clone().removeAttr('id').removeAttr('name').css({ |
| 51 | | - position: 'absolute', |
| 52 | | - top: 0, |
| 53 | | - left: -9999 |
| 54 | | - }).css(propOb).attr('tabIndex','-1').insertBefore(textarea); |
| 55 | | - |
| 56 | | - })(), |
| 57 | | - lastScrollTop = null, |
| 58 | | - updateSize = function() { |
| 59 | | - var that = this; |
| 60 | | - if (timer !== null) clearTimeout(timer); |
| 61 | | - timer = setTimeout(updateSizeLazy, settings.delay, that); |
| 62 | | - }, |
| 63 | | - updateSizeLazy = function(that) { |
| 64 | | - // Prepare the clone: |
| 65 | | - clone.height(0).val($(that).val()).scrollTop(10000); |
| 66 | | - |
| 67 | | - // Find the height of text: |
| 68 | | - var scrollTop = Math.max(clone.scrollTop(), origHeight) + settings.extraSpace, |
| 69 | | - toChange = $(that).add(clone); |
| 70 | | - |
| 71 | | - // Don't do anything if scrollTip hasen't changed: |
| 72 | | - if (lastScrollTop === scrollTop) { return; } |
| 73 | | - lastScrollTop = scrollTop; |
| 74 | | - |
| 75 | | - // Check for limit: |
| 76 | | - if ( scrollTop >= settings.limit ) { |
| 77 | | - $(that).css('overflow-y',''); |
| 78 | | - return; |
| 79 | | - } |
| 80 | | - // Fire off callback: |
| 81 | | - settings.onResize.call(that); |
| 82 | | - |
| 83 | | - // Either animate or directly apply height: |
| 84 | | - settings.animate && textarea.css('display') === 'block' ? |
| 85 | | - toChange.stop().animate({height:scrollTop}, settings.animateDuration, settings.animateCallback) |
| 86 | | - : toChange.height(scrollTop); |
| 87 | | - }; |
| 88 | | - |
| 89 | | - // Bind namespaced handlers to appropriate events: |
| 90 | | - textarea |
| 91 | | - .unbind('.dynSiz') |
| 92 | | - .bind('keyup.dynSiz', updateSize) |
| 93 | | - .bind('keydown.dynSiz', updateSize) |
| 94 | | - .bind('change.dynSiz', updateSize); |
| 95 | | - |
| 96 | | - }); |
| 97 | | - |
| 98 | | - // Chain: |
| 99 | | - return this; |
| 100 | | - |
| 101 | | - }; |
| 102 | | - |
| 103 | | - |
| 104 | | - |
| 105 | | -})(jQuery); |
| \ No newline at end of file |
| | 14 | + |
| | 15 | + var uid = 'ar' + +new Date, |
| | 16 | + |
| | 17 | + defaults = autoResize.defaults = { |
| | 18 | + onResize: function(){}, |
| | 19 | + onBeforeResize: function(){return 123}, |
| | 20 | + onAfterResize: function(){return 555}, |
| | 21 | + animate: { |
| | 22 | + duration: 200, |
| | 23 | + complete: function(){} |
| | 24 | + }, |
| | 25 | + extraSpace: 50, |
| | 26 | + minHeight: 'original', |
| | 27 | + maxHeight: 500, |
| | 28 | + minWidth: 'original', |
| | 29 | + maxWidth: 500 |
| | 30 | + }; |
| | 31 | + |
| | 32 | + autoResize.cloneCSSProperties = [ |
| | 33 | + 'lineHeight', 'textDecoration', 'letterSpacing', |
| | 34 | + 'fontSize', 'fontFamily', 'fontStyle', 'fontWeight', |
| | 35 | + 'textTransform', 'textAlign', 'direction', 'wordSpacing', 'fontSizeAdjust', |
| | 36 | + 'paddingTop', 'paddingLeft', 'paddingBottom', 'paddingRight', 'width' |
| | 37 | + ]; |
| | 38 | + |
| | 39 | + autoResize.cloneCSSValues = { |
| | 40 | + position: 'absolute', |
| | 41 | + top: -9999, |
| | 42 | + left: -9999, |
| | 43 | + opacity: 0, |
| | 44 | + overflow: 'hidden' |
| | 45 | + }; |
| | 46 | + |
| | 47 | + autoResize.resizableFilterSelector = [ |
| | 48 | + 'textarea:not(textarea.' + uid + ')', |
| | 49 | + 'input:not(input[type])', |
| | 50 | + 'input[type=text]', |
| | 51 | + 'input[type=password]', |
| | 52 | + 'input[type=email]', |
| | 53 | + 'input[type=url]' |
| | 54 | + ].join(','); |
| | 55 | + |
| | 56 | + autoResize.AutoResizer = AutoResizer; |
| | 57 | + |
| | 58 | + $.fn.autoResize = autoResize; |
| | 59 | + |
| | 60 | + function autoResize(config) { |
| | 61 | + this.filter(autoResize.resizableFilterSelector).each(function(){ |
| | 62 | + new AutoResizer( $(this), config ); |
| | 63 | + }); |
| | 64 | + return this; |
| | 65 | + } |
| | 66 | + |
| | 67 | + function AutoResizer(el, config) { |
| | 68 | + |
| | 69 | + if (el.data('AutoResizer')) { |
| | 70 | + el.data('AutoResizer').destroy(); |
| | 71 | + } |
| | 72 | + |
| | 73 | + config = this.config = $.extend({}, autoResize.defaults, config); |
| | 74 | + this.el = el; |
| | 75 | + |
| | 76 | + this.nodeName = el[0].nodeName.toLowerCase(); |
| | 77 | + |
| | 78 | + this.originalHeight = el.height(); |
| | 79 | + this.previousScrollTop = null; |
| | 80 | + |
| | 81 | + this.value = el.val(); |
| | 82 | + |
| | 83 | + if (config.maxWidth === 'original') config.maxWidth = el.width(); |
| | 84 | + if (config.minWidth === 'original') config.minWidth = el.width(); |
| | 85 | + if (config.maxHeight === 'original') config.maxHeight = el.height(); |
| | 86 | + if (config.minHeight === 'original') config.minHeight = el.height(); |
| | 87 | + |
| | 88 | + if (this.nodeName === 'textarea') { |
| | 89 | + el.css({ |
| | 90 | + resize: 'none', |
| | 91 | + overflowY: 'hidden' |
| | 92 | + }); |
| | 93 | + } |
| | 94 | + |
| | 95 | + el.data('AutoResizer', this); |
| | 96 | + |
| | 97 | + // Make sure onAfterResize is called upon animation completion |
| | 98 | + config.animate.complete = (function(f){ |
| | 99 | + return function() { |
| | 100 | + config.onAfterResize.call(el); |
| | 101 | + return f.apply(this, arguments); |
| | 102 | + }; |
| | 103 | + }(config.animate.complete)); |
| | 104 | + |
| | 105 | + this.bind(); |
| | 106 | + |
| | 107 | + } |
| | 108 | + |
| | 109 | + AutoResizer.prototype = { |
| | 110 | + |
| | 111 | + bind: function() { |
| | 112 | + |
| | 113 | + var check = $.proxy(function(){ |
| | 114 | + this.check(); |
| | 115 | + return true; |
| | 116 | + }, this); |
| | 117 | + |
| | 118 | + this.unbind(); |
| | 119 | + |
| | 120 | + this.el |
| | 121 | + .bind('keyup.autoResize', check) |
| | 122 | + //.bind('keydown.autoResize', check) |
| | 123 | + .bind('change.autoResize', check) |
| | 124 | + .bind('paste.autoResize', function() { |
| | 125 | + setTimeout(function() { check(); }, 0); |
| | 126 | + }); |
| | 127 | + |
| | 128 | + if (!this.el.is(':hidden')) { |
| | 129 | + this.check(null, true); |
| | 130 | + } |
| | 131 | + |
| | 132 | + }, |
| | 133 | + |
| | 134 | + unbind: function() { |
| | 135 | + this.el.unbind('.autoResize'); |
| | 136 | + }, |
| | 137 | + |
| | 138 | + createClone: function() { |
| | 139 | + |
| | 140 | + var el = this.el, |
| | 141 | + clone = this.nodeName === 'textarea' ? el.clone() : $('<span/>'); |
| | 142 | + |
| | 143 | + this.clone = clone; |
| | 144 | + |
| | 145 | + $.each(autoResize.cloneCSSProperties, function(i, p){ |
| | 146 | + clone[0].style[p] = el.css(p); |
| | 147 | + }); |
| | 148 | + |
| | 149 | + clone |
| | 150 | + .removeAttr('name') |
| | 151 | + .removeAttr('id') |
| | 152 | + .addClass(uid) |
| | 153 | + .attr('tabIndex', -1) |
| | 154 | + .css(autoResize.cloneCSSValues); |
| | 155 | + |
| | 156 | + if (this.nodeName === 'textarea') { |
| | 157 | + clone.height('auto'); |
| | 158 | + } else { |
| | 159 | + clone.width('auto').css({ |
| | 160 | + whiteSpace: 'nowrap' |
| | 161 | + }); |
| | 162 | + } |
| | 163 | + |
| | 164 | + }, |
| | 165 | + |
| | 166 | + check: function(e, immediate) { |
| | 167 | + |
| | 168 | + if (!this.clone) { |
| | 169 | + this.createClone(); |
| | 170 | + this.injectClone(); |
| | 171 | + } |
| | 172 | + |
| | 173 | + var config = this.config, |
| | 174 | + clone = this.clone, |
| | 175 | + el = this.el, |
| | 176 | + value = el.val(); |
| | 177 | + |
| | 178 | + // Do nothing if value hasn't changed |
| | 179 | + if (value === this.prevValue) { return true; } |
| | 180 | + this.prevValue = value; |
| | 181 | + |
| | 182 | + if (this.nodeName === 'input') { |
| | 183 | + |
| | 184 | + clone.text(value); |
| | 185 | + |
| | 186 | + // Calculate new width + whether to change |
| | 187 | + var cloneWidth = clone.width(), |
| | 188 | + newWidth = (cloneWidth + config.extraSpace) >= config.minWidth ? |
| | 189 | + cloneWidth + config.extraSpace : config.minWidth, |
| | 190 | + currentWidth = el.width(); |
| | 191 | + |
| | 192 | + newWidth = Math.min(newWidth, config.maxWidth); |
| | 193 | + |
| | 194 | + if ( |
| | 195 | + (newWidth < currentWidth && newWidth >= config.minWidth) || |
| | 196 | + (newWidth >= config.minWidth && newWidth <= config.maxWidth) |
| | 197 | + ) { |
| | 198 | + |
| | 199 | + config.onBeforeResize.call(el); |
| | 200 | + config.onResize.call(el); |
| | 201 | + |
| | 202 | + el.scrollLeft(0); |
| | 203 | + |
| | 204 | + if (config.animate && !immediate) { |
| | 205 | + el.stop(1,1).animate({ |
| | 206 | + width: newWidth |
| | 207 | + }, config.animate); |
| | 208 | + } else { |
| | 209 | + el.width(newWidth); |
| | 210 | + config.onAfterResize.call(el); |
| | 211 | + } |
| | 212 | + |
| | 213 | + } |
| | 214 | + |
| | 215 | + return; |
| | 216 | + |
| | 217 | + } |
| | 218 | + |
| | 219 | + // TEXTAREA |
| | 220 | + |
| | 221 | + clone.width(el.width()).height(0).val(value).scrollTop(10000); |
| | 222 | + |
| | 223 | + var scrollTop = clone[0].scrollTop; |
| | 224 | + |
| | 225 | + // Don't do anything if scrollTop hasen't changed: |
| | 226 | + if (this.previousScrollTop === scrollTop) { |
| | 227 | + return; |
| | 228 | + } |
| | 229 | + |
| | 230 | + this.previousScrollTop = scrollTop; |
| | 231 | + |
| | 232 | + if (scrollTop + config.extraSpace >= config.maxHeight) { |
| | 233 | + el.css('overflowY', ''); |
| | 234 | + scrollTop = config.maxHeight; |
| | 235 | + immediate = true; |
| | 236 | + } else if (scrollTop <= config.minHeight) { |
| | 237 | + scrollTop = config.minHeight; |
| | 238 | + } else { |
| | 239 | + el.css('overflowY', 'hidden'); |
| | 240 | + scrollTop += config.extraSpace; |
| | 241 | + } |
| | 242 | + |
| | 243 | + config.onBeforeResize.call(el); |
| | 244 | + config.onResize.call(el); |
| | 245 | + |
| | 246 | + // Either animate or directly apply height: |
| | 247 | + if (config.animate && !immediate) { |
| | 248 | + el.stop(1,1).animate({ |
| | 249 | + height: scrollTop |
| | 250 | + }, config.animate); |
| | 251 | + } else { |
| | 252 | + el.height(scrollTop); |
| | 253 | + config.onAfterResize.call(el); |
| | 254 | + } |
| | 255 | + |
| | 256 | + }, |
| | 257 | + |
| | 258 | + destroy: function() { |
| | 259 | + this.unbind(); |
| | 260 | + this.el.removeData('AutoResizer'); |
| | 261 | + this.clone.remove(); |
| | 262 | + delete this.el; |
| | 263 | + delete this.clone; |
| | 264 | + }, |
| | 265 | + |
| | 266 | + injectClone: function() { |
| | 267 | + ( |
| | 268 | + autoResize.cloneContainer || |
| | 269 | + (autoResize.cloneContainer = $('<arclones/>').appendTo('body')) |
| | 270 | + ).append(this.clone); |
| | 271 | + } |
| | 272 | + |
| | 273 | + }; |
| | 274 | + |
| | 275 | +})(jQuery); |