r87686 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:r87685‎ | r87686 | r87687 >
Date:14:58, 8 May 2011
Author:janpaul123
Status:ok (Comments)
Tags:
Comment:
Reverted r87521 for now. Couldn't find any documentation that elastic textareas are available in jQuery UI.
Modified paths:
  • /trunk/extensions/WikiLove/WikiLove.php (modified) (history)
  • /trunk/extensions/WikiLove/jquery.elastic.js (added) (history)
  • /trunk/extensions/WikiLove/wikiLove.js (modified) (history)

Diff [purge]

Index: trunk/extensions/WikiLove/WikiLove.php
@@ -98,6 +98,10 @@
9999 ),
100100 'dependencies' => array(
101101 'jquery.ui.dialog',
 102+ 'jquery.elastic',
102103 ),
103104 ),
 105+ 'jquery.elastic' => $wikiLoveTpl + array(
 106+ 'scripts' => 'jquery.elastic.js',
 107+ ),
104108 );
Index: trunk/extensions/WikiLove/wikiLove.js
@@ -159,6 +159,7 @@
160160 $( '#wlSubtype' ).change( $.wikiLove.changeSubtype );
161161 $( '#wlPreviewForm' ).submit( $.wikiLove.submitPreview );
162162 $( '#wlSendForm' ).click( $.wikiLove.submitSend );
 163+ $( '#wlMessage' ).elastic(); // have the message textarea grow automatically
163164 }
164165
165166 $.wikiLove.$dialog.dialog( 'open' );
Index: trunk/extensions/WikiLove/jquery.elastic.js
@@ -0,0 +1,6 @@
 2+(function(jQuery){jQuery.fn.extend({elastic:function(){var mimics=['paddingTop','paddingRight','paddingBottom','paddingLeft','fontSize','lineHeight','fontFamily','width','fontWeight'];return this.each(function(){if(this.type!='textarea'){return false;}
 3+var $textarea=jQuery(this),$twin=jQuery('<div />').css({'position':'absolute','display':'none','word-wrap':'break-word'}),lineHeight=parseInt($textarea.css('line-height'),10)||parseInt($textarea.css('font-size'),'10'),minheight=parseInt($textarea.css('height'),10)||lineHeight*3,maxheight=parseInt($textarea.css('max-height'),10)||Number.MAX_VALUE,goalheight=0,i=0;if(maxheight<0){maxheight=Number.MAX_VALUE;}
 4+$twin.appendTo($textarea.parent());var i=mimics.length;while(i--){$twin.css(mimics[i].toString(),$textarea.css(mimics[i].toString()));}
 5+function setHeightAndOverflow(height,overflow){curratedHeight=Math.floor(parseInt(height,10));if($textarea.height()!=curratedHeight){$textarea.css({'height':curratedHeight+'px','overflow':overflow});}}
 6+function update(){var textareaContent=$textarea.val().replace(/&/g,'&amp;').replace(/ /g,'&nbsp;').replace(/<|>/g,'&gt;').replace(/\n/g,'<br />');var twinContent=$twin.html();if(textareaContent+'&nbsp;'!=twinContent){$twin.html(textareaContent+'&nbsp;');if(Math.abs($twin.height()+lineHeight-$textarea.height())>3){var goalheight=$twin.height()+lineHeight;if(goalheight>=maxheight){setHeightAndOverflow(maxheight,'auto');}else if(goalheight<=minheight){setHeightAndOverflow(minheight,'hidden');}else{setHeightAndOverflow(goalheight,'hidden');}}}}
 7+$textarea.css({'overflow':'hidden'});$textarea.keyup(function(){update();});$textarea.live('input paste',function(e){setTimeout(update,250);});update();});}});})(jQuery);
\ No newline at end of file
Property changes on: trunk/extensions/WikiLove/jquery.elastic.js
___________________________________________________________________
Added: svn:eol-style
18 + native

Past revisions this follows-up on

RevisionCommit summaryAuthorDate
r87521removing jquery.elastic since you get this for free with jquery.ui.dialogkaldari00:08, 6 May 2011

Comments

#Comment by Kaldari (talk | contribs)   00:07, 9 May 2011

See http://jqueryui.com/demos/resizable/#textarea. I was wrong about it being part of dialog though. You'll need to add jquery.ui,resizable as a module dependency.

#Comment by Kaldari (talk | contribs)   00:08, 9 May 2011

typo, I meant jquery.ui.resizable

#Comment by JanPaul123 (talk | contribs)   09:49, 9 May 2011

Right, but that's not the same as an elastic textarea. With jquery.ui.resizable you can only add a handle, you still have to drag-n-drop manually. It doesn't do auto-growing/shrinking as jquery.elastic does (a la Facebook comments).

#Comment by Kaldari (talk | contribs)   17:19, 9 May 2011

Ah, I didn't realize that. Carry on then :)

Status & tagging log