| Index: trunk/extensions/ArticleFeedbackv5/modules/jquery.articleFeedbackv5/jquery.articleFeedbackv5.css |
| — | — | @@ -612,7 +612,7 @@ |
| 613 | 613 | background: #fff; |
| 614 | 614 | border: 1px solid #000; |
| 615 | 615 | width: 518px; |
| 616 | | - height: 68px; |
| | 616 | + height: 42px; |
| 617 | 617 | overflow: hidden; |
| 618 | 618 | padding: 10px; |
| 619 | 619 | font-size: 1.1em; |
| — | — | @@ -642,7 +642,7 @@ |
| 643 | 643 | padding: 0 10px; |
| 644 | 644 | /* @embed */ |
| 645 | 645 | background: url(images/bg-submit.png) repeat-x !important; |
| 646 | | - margin: 10px 30px 0 0 !important; |
| | 646 | + margin: 0 30px 0 0 !important; |
| 647 | 647 | border: none !important; |
| 648 | 648 | -moz-border-radius: 3px; |
| 649 | 649 | -webkit-border-radius: 3px; |
| Index: trunk/extensions/ArticleFeedbackv5/modules/jquery.articleFeedbackv5/jquery.articleFeedbackv5.js |
| — | — | @@ -325,8 +325,11 @@ |
| 326 | 326 | // Turn the submit into a slick button |
| 327 | 327 | $block.find( '.articleFeedbackv5-submit' ) |
| 328 | 328 | .button() |
| 329 | | - .addClass( 'ui-button-blue' ) |
| | 329 | + .addClass( 'ui-button-blue' ); |
| 330 | 330 | |
| | 331 | + // Have the feedback textarea grow automatically |
| | 332 | + $block.find( '#articleFeedbackv5-find-feedback' ).elastic(); |
| | 333 | + |
| 331 | 334 | return $block; |
| 332 | 335 | }, |
| 333 | 336 | |
| Index: trunk/extensions/ArticleFeedbackv5/modules/jquery.elastic/jquery.elastic.js |
| — | — | @@ -0,0 +1,161 @@ |
| | 2 | +/** |
| | 3 | +* @name Elastic |
| | 4 | +* @descripton Elastic is jQuery plugin that grow and shrink your textareas automatically |
| | 5 | +* @version 1.6.11 |
| | 6 | +* @requires jQuery 1.2.6+ |
| | 7 | +* |
| | 8 | +* @author Jan Jarfalk |
| | 9 | +* @author-email jan.jarfalk@unwrongest.com |
| | 10 | +* @author-website http://www.unwrongest.com |
| | 11 | +* |
| | 12 | +* @licence MIT License - http://www.opensource.org/licenses/mit-license.php |
| | 13 | +*/ |
| | 14 | + |
| | 15 | +(function($){ |
| | 16 | + jQuery.fn.extend({ |
| | 17 | + elastic: function() { |
| | 18 | + |
| | 19 | + // We will create a div clone of the textarea |
| | 20 | + // by copying these attributes from the textarea to the div. |
| | 21 | + var mimics = [ |
| | 22 | + 'paddingTop', |
| | 23 | + 'paddingRight', |
| | 24 | + 'paddingBottom', |
| | 25 | + 'paddingLeft', |
| | 26 | + 'fontSize', |
| | 27 | + 'lineHeight', |
| | 28 | + 'fontFamily', |
| | 29 | + 'width', |
| | 30 | + 'fontWeight', |
| | 31 | + 'border-top-width', |
| | 32 | + 'border-right-width', |
| | 33 | + 'border-bottom-width', |
| | 34 | + 'border-left-width', |
| | 35 | + 'borderTopStyle', |
| | 36 | + 'borderTopColor', |
| | 37 | + 'borderRightStyle', |
| | 38 | + 'borderRightColor', |
| | 39 | + 'borderBottomStyle', |
| | 40 | + 'borderBottomColor', |
| | 41 | + 'borderLeftStyle', |
| | 42 | + 'borderLeftColor' |
| | 43 | + ]; |
| | 44 | + |
| | 45 | + return this.each( function() { |
| | 46 | + |
| | 47 | + // Elastic only works on textareas |
| | 48 | + if ( this.type !== 'textarea' ) { |
| | 49 | + return false; |
| | 50 | + } |
| | 51 | + |
| | 52 | + var $textarea = jQuery(this), |
| | 53 | + $twin = jQuery('<div />').css({ |
| | 54 | + 'position' : 'absolute', |
| | 55 | + 'display' : 'none', |
| | 56 | + 'word-wrap' : 'break-word', |
| | 57 | + 'white-space' : 'pre-wrap' |
| | 58 | + }), |
| | 59 | + lineHeight = parseInt($textarea.css('line-height'),10) || parseInt($textarea.css('font-size'),'10'), |
| | 60 | + minheight = parseInt($textarea.css('height'),10) || lineHeight*3, |
| | 61 | + maxheight = parseInt($textarea.css('max-height'),10) || Number.MAX_VALUE, |
| | 62 | + goalheight = 0; |
| | 63 | + |
| | 64 | + // Opera returns max-height of -1 if not set |
| | 65 | + if (maxheight < 0) { maxheight = Number.MAX_VALUE; } |
| | 66 | + |
| | 67 | + // Append the twin to the DOM |
| | 68 | + // We are going to meassure the height of this, not the textarea. |
| | 69 | + $twin.appendTo($textarea.parent()); |
| | 70 | + |
| | 71 | + // Copy the essential styles (mimics) from the textarea to the twin |
| | 72 | + var i = mimics.length; |
| | 73 | + while(i--){ |
| | 74 | + $twin.css(mimics[i].toString(),$textarea.css(mimics[i].toString())); |
| | 75 | + } |
| | 76 | + |
| | 77 | + // Updates the width of the twin. (solution for textareas with widths in percent) |
| | 78 | + function setTwinWidth(){ |
| | 79 | + var curatedWidth = Math.floor(parseInt($textarea.width(),10)); |
| | 80 | + if($twin.width() !== curatedWidth){ |
| | 81 | + $twin.css({'width': curatedWidth + 'px'}); |
| | 82 | + |
| | 83 | + // Update height of textarea |
| | 84 | + update(true); |
| | 85 | + } |
| | 86 | + } |
| | 87 | + |
| | 88 | + // Sets a given height and overflow state on the textarea |
| | 89 | + function setHeightAndOverflow(height, overflow){ |
| | 90 | + var curratedHeight = Math.floor(parseInt(height,10)); |
| | 91 | + if($textarea.height() !== curratedHeight){ |
| | 92 | + $textarea.css({'height': curratedHeight + 'px','overflow':overflow}); |
| | 93 | + } |
| | 94 | + } |
| | 95 | + |
| | 96 | + // This function will update the height of the textarea if necessary |
| | 97 | + function update(forced) { |
| | 98 | + |
| | 99 | + // Get curated content from the textarea. |
| | 100 | + var textareaContent = $textarea.val().replace(/&/g,'&').replace(/ {2}/g, ' ').replace(/<|>/g, '>').replace(/\n/g, '<br />'); |
| | 101 | + |
| | 102 | + // Compare curated content with curated twin. |
| | 103 | + var twinContent = $twin.html().replace(/<br>/ig,'<br />'); |
| | 104 | + |
| | 105 | + if(forced || textareaContent+' ' !== twinContent){ |
| | 106 | + |
| | 107 | + // Add an extra white space so new rows are added when you are at the end of a row. |
| | 108 | + $twin.html(textareaContent+' '); |
| | 109 | + |
| | 110 | + // Change textarea height if twin plus the height of one line differs more than 3 pixel from textarea height |
| | 111 | + if(Math.abs($twin.height() + lineHeight - $textarea.height()) > 3){ |
| | 112 | + |
| | 113 | + var goalheight = $twin.height()+lineHeight; |
| | 114 | + if(goalheight >= maxheight) { |
| | 115 | + setHeightAndOverflow(maxheight,'auto'); |
| | 116 | + } else if(goalheight <= minheight) { |
| | 117 | + setHeightAndOverflow(minheight,'hidden'); |
| | 118 | + } else { |
| | 119 | + setHeightAndOverflow(goalheight,'hidden'); |
| | 120 | + } |
| | 121 | + |
| | 122 | + } |
| | 123 | + |
| | 124 | + } |
| | 125 | + |
| | 126 | + } |
| | 127 | + |
| | 128 | + // Hide scrollbars |
| | 129 | + $textarea.css({'overflow':'hidden'}); |
| | 130 | + |
| | 131 | + // Update textarea size on keyup, change, cut and paste |
| | 132 | + $textarea.bind('keyup change cut paste', function(){ |
| | 133 | + update(); |
| | 134 | + }); |
| | 135 | + |
| | 136 | + // Update width of twin if browser or textarea is resized (solution for textareas with widths in percent) |
| | 137 | + $(window).bind('resize', setTwinWidth); |
| | 138 | + $textarea.bind('resize', setTwinWidth); |
| | 139 | + $textarea.bind('update', update); |
| | 140 | + |
| | 141 | + // Compact textarea on blur |
| | 142 | + $textarea.bind('blur',function(){ |
| | 143 | + if($twin.height() < maxheight){ |
| | 144 | + if($twin.height() > minheight) { |
| | 145 | + $textarea.height($twin.height()); |
| | 146 | + } else { |
| | 147 | + $textarea.height(minheight); |
| | 148 | + } |
| | 149 | + } |
| | 150 | + }); |
| | 151 | + |
| | 152 | + // And this line is to catch the browser paste event |
| | 153 | + $textarea.bind('input paste',function(e){ setTimeout( update, 250); }); |
| | 154 | + |
| | 155 | + // Run update once when elastic is initialized |
| | 156 | + update(); |
| | 157 | + |
| | 158 | + }); |
| | 159 | + |
| | 160 | + } |
| | 161 | + }); |
| | 162 | +})(jQuery); |
| \ No newline at end of file |
| Index: trunk/extensions/ArticleFeedbackv5/ArticleFeedbackv5.php |
| — | — | @@ -240,6 +240,7 @@ |
| 241 | 241 | 'Nimish Gautam', |
| 242 | 242 | 'Arthur Richards', |
| 243 | 243 | 'Timo Tijhof', |
| | 244 | + 'Ryan Kaldari', |
| 244 | 245 | ), |
| 245 | 246 | 'version' => '0.0.1', |
| 246 | 247 | 'descriptionmsg' => 'articlefeedbackv5-desc', |
| Index: trunk/extensions/ArticleFeedbackv5/ArticleFeedbackv5.hooks.php |
| — | — | @@ -156,6 +156,7 @@ |
| 157 | 157 | 'jquery.ui.button', |
| 158 | 158 | 'jquery.cookie', |
| 159 | 159 | 'jquery.clickTracking', |
| | 160 | + 'jquery.articleFeedbackv5.elastic', |
| 160 | 161 | ), |
| 161 | 162 | ), |
| 162 | 163 | 'jquery.articleFeedbackv5.special' => array( |
| — | — | @@ -179,6 +180,10 @@ |
| 180 | 181 | 'mediawiki.util', |
| 181 | 182 | ), |
| 182 | 183 | ), |
| | 184 | + // TODO: Move jquery.elastic into core resources |
| | 185 | + 'jquery.articleFeedbackv5.elastic' => array( |
| | 186 | + 'scripts' => 'jquery.elastic/jquery.elastic.js' |
| | 187 | + ), |
| 183 | 188 | ); |
| 184 | 189 | |
| 185 | 190 | /* Static Methods */ |