Commit 65fdd5870c7ec1d077802098f909bcf22230217e
1 parent
3371aaf9
Exists in
master
and in
29 other branches
Makes the comment box in wall grow
I did a little refactor in the already existent script to limited_text_area so the part that grows the textarea can be reused elsewhere, e.g. the comment box in the wall. Since I was modifying the limited_text_area function again, I re-did here the fix to the bug in Chrome browsers where the textarea would grow with every key press. So this merge request also fix the ActionItem2288. (ActionItem2405)
Showing
5 changed files
with
36 additions
and
20 deletions
Show diff stats
app/helpers/application_helper.rb
| ... | ... | @@ -1183,6 +1183,10 @@ module ApplicationHelper |
| 1183 | 1183 | ], :class => 'limited-text-area') |
| 1184 | 1184 | end |
| 1185 | 1185 | |
| 1186 | + def expandable_text_area(object_name, method, text_area_id, options = {}) | |
| 1187 | + text_area(object_name, method, { :id => text_area_id, :onkeyup => "grow_text_area('#{text_area_id}')" }.merge(options)) | |
| 1188 | + end | |
| 1189 | + | |
| 1186 | 1190 | def pluralize_without_count(count, singular, plural = nil) |
| 1187 | 1191 | count == 1 ? singular : (plural || singular.pluralize) |
| 1188 | 1192 | end | ... | ... |
app/views/profile/_profile_comment_form.rhtml
| ... | ... | @@ -3,15 +3,17 @@ |
| 3 | 3 | <p class='profile-wall-reply'> |
| 4 | 4 | <% update_area = tab_action == 'wall' ? 'profile_activities' : 'network-activities' %> |
| 5 | 5 | <% form_remote_tag :url => {:controller => 'profile', :action => 'leave_comment_on_activity', :tab_action => tab_action}, :html => { :class => 'profile-wall-reply-form', 'data-update' => update_area } do %> |
| 6 | - <%= text_area :comment, :body, {:id => "reply_content_#{activity.id}", | |
| 7 | - :cols => 50, | |
| 8 | - :rows => 1, | |
| 9 | - :class => 'submit-with-keypress', | |
| 10 | - :title => _('Leave your comment'), | |
| 11 | - :onfocus => ('if(this.value==this.title){this.value="";this.style.color="#000"};this.style.backgroundImage="url(' + profile_icon(current_person, :icon, false) + ')"' if logged_in?), | |
| 12 | - :onblur => ('if(this.value==""){this.value=this.title;this.style.color="#ccc"};this.style.backgroundImage="none"' if logged_in?), | |
| 13 | - :value => _('Leave your comment'), | |
| 14 | - :style => 'color: #ccc' } %> | |
| 6 | + <%= expandable_text_area :comment, | |
| 7 | + :body, | |
| 8 | + "reply_content_#{activity.id}", | |
| 9 | + :cols => 50, | |
| 10 | + :rows => 1, | |
| 11 | + :class => 'submit-with-keypress', | |
| 12 | + :title => _('Leave your comment'), | |
| 13 | + :onfocus => ('if(this.value==this.title){this.value="";this.style.color="#000"};this.style.backgroundImage="url(' + profile_icon(current_person, :icon, false) + ')"' if logged_in?), | |
| 14 | + :onblur => ('if(this.value==""){this.value=this.title;this.style.color="#ccc"};this.style.backgroundImage="none"' if logged_in?), | |
| 15 | + :value => _('Leave your comment'), | |
| 16 | + :style => 'color: #ccc' %> | |
| 15 | 17 | <%= hidden_field_tag :source_id, activity.id, :id => "activity_id_#{activity.id}" %> |
| 16 | 18 | <% end %> |
| 17 | 19 | </p> | ... | ... |
app/views/profile/_profile_scrap_reply_form.rhtml
| ... | ... | @@ -2,15 +2,16 @@ |
| 2 | 2 | <div id='profile-wall-reply-form-<%= scrap.id%>' style='display:none'> |
| 3 | 3 | <p class='profile-wall-reply'> |
| 4 | 4 | <% form_remote_tag :url => {:controller => 'profile', :action => 'leave_scrap'}, :update => "profile_activities", :html => { :class => 'profile-wall-reply-form'} do %> |
| 5 | - <%= text_area :scrap, :content, { :id => "reply_content_#{scrap.id}", | |
| 6 | - :cols => 50, | |
| 7 | - :rows => 1, | |
| 8 | - :class => 'submit-with-keypress', | |
| 9 | - :title => _('Leave your comment'), | |
| 10 | - :onfocus => ('if(this.value==this.title){this.value="";this.style.color="#000"};this.style.backgroundImage="url(' + profile_icon(current_person, :icon, false) + ')"' if logged_in?), | |
| 11 | - :onblur => ('if(this.value==""){this.value=this.title;this.style.color="#ccc"};this.style.backgroundImage="none"' if logged_in?), | |
| 12 | - :value => _('Leave your comment') | |
| 13 | - } %> | |
| 5 | + <%= expandable_text_area :scrap, | |
| 6 | + :content, | |
| 7 | + "reply_content_#{scrap.id}", | |
| 8 | + :cols => 50, | |
| 9 | + :rows => 1, | |
| 10 | + :class => 'submit-with-keypress', | |
| 11 | + :title => _('Leave your comment'), | |
| 12 | + :onfocus => ('if(this.value==this.title){this.value="";this.style.color="#000"};this.style.backgroundImage="url(' + profile_icon(current_person, :icon, false) + ')"' if logged_in?), | |
| 13 | + :onblur => ('if(this.value==""){this.value=this.title;this.style.color="#ccc"};this.style.backgroundImage="none"' if logged_in?), | |
| 14 | + :value => _('Leave your comment') %> | |
| 14 | 15 | <%= hidden_field_tag 'scrap[scrap_id]', scrap.id %> |
| 15 | 16 | <%= hidden_field_tag 'receiver_id', scrap.sender.id %> |
| 16 | 17 | <% end %> | ... | ... |
public/javascripts/application.js
| ... | ... | @@ -622,7 +622,7 @@ function hide_and_show(hide_elements, show_elements) { |
| 622 | 622 | |
| 623 | 623 | function limited_text_area(textid, limit) { |
| 624 | 624 | var text = jQuery('#' + textid).val(); |
| 625 | - jQuery('#' + textid).css('height', jQuery('#' + textid).attr('scrollHeight') + 'px'); | |
| 625 | + grow_text_area(textid); | |
| 626 | 626 | var textlength = text.length; |
| 627 | 627 | jQuery('#' + textid + '_left span').html(limit - textlength); |
| 628 | 628 | if (textlength > limit) { |
| ... | ... | @@ -637,6 +637,15 @@ function limited_text_area(textid, limit) { |
| 637 | 637 | } |
| 638 | 638 | } |
| 639 | 639 | |
| 640 | +function grow_text_area(textid) { | |
| 641 | + var height = jQuery('#' + textid).attr('scrollHeight'); | |
| 642 | + if (jQuery.browser.webkit) { | |
| 643 | + height -= parseInt(jQuery('#' + textid).css('padding-top')) + | |
| 644 | + parseInt(jQuery('#' + textid).css('padding-bottom')); | |
| 645 | + } | |
| 646 | + jQuery('#' + textid).css('height', height + 'px'); | |
| 647 | +} | |
| 648 | + | |
| 640 | 649 | jQuery(function($) { |
| 641 | 650 | $('a').each(function() { |
| 642 | 651 | if (this.href == document.location.href) { | ... | ... |
public/stylesheets/application.css
| ... | ... | @@ -5047,7 +5047,7 @@ h1#agenda-title { |
| 5047 | 5047 | |
| 5048 | 5048 | #profile-network li textarea:focus, |
| 5049 | 5049 | #profile-wall li textarea:focus { |
| 5050 | - background-position: left center; | |
| 5050 | + background-position: left top; | |
| 5051 | 5051 | background-repeat: no-repeat; |
| 5052 | 5052 | text-indent: 28px; |
| 5053 | 5053 | } | ... | ... |