Download as
Browse Code »

Commit c7848c909993a713bd52dd0d83a5028d3ede1711

Authored by Evandro Jr
1 parent b826b0e6
Exists in master

working with textarea

Showing 5 changed files with 591 additions and 13 deletions   Show diff stats
controllers/profile/comment_paragraph_plugin_profile_controller.rb
  Diff comments   View file @c7848c9
... ... @@ -4,7 +4,7 @@ class CommentParagraphPluginProfileController < ProfileController
4 4 def view_comments
5 5 @article_id = params[:article_id]
6 6 @paragraph_id = params[:paragraph_id]
7   -
  7 +
8 8 article = profile.articles.find(@article_id)
9 9 @paragraph_comment_page = (params[:paragraph_comment_page] || 1).to_i
10 10  
... ...
lib/ext/comment.rb
  Diff comments   View file @c7848c9
... ... @@ -3,12 +3,14 @@ require_dependency 'comment'
3 3 class Comment
4 4  
5 5 scope :without_paragraph, :conditions => {:paragraph_id => nil }
6   -
  6 +
  7 + settings_items :comment_paragraph_selected_area, :type => :string
  8 +
7 9 scope :in_paragraph, proc { |paragraph_id| {
8 10 :conditions => ['paragraph_id = ?', paragraph_id]
9 11 }
10 12 }
11 13  
12   - attr_accessible :paragraph_id
  14 + attr_accessible :paragraph_id, :comment_paragraph_selected_area
13 15  
14 16 end
... ...
public/comment_paragraph_macro.js
  Diff comments   View file @c7848c9
1 1 var comment_paragraph_anchor;
2 2 jQuery(document).ready(function($) {
  3 +
  4 + jQuery('.autoexpand-text-area').autosize();
  5 +
3 6 var anchor = window.location.hash;
4 7 if(anchor.length==0) return;
5 8  
... ... @@ -8,7 +11,7 @@ jQuery(document).ready(function($) {
8 11 if($('div[data-macro=comment_paragraph_plugin/allow_comment]').length==0) return; //comment_paragraph_plugin/allow_comment div must exists
9 12 var comment_id = val[1];
10 13 if(!/^\d+$/.test(comment_id)) return; //test for integer
11   -
  14 +
12 15 comment_paragraph_anchor = anchor;
13 16 var url = '/plugin/comment_paragraph/public/comment_paragraph/'+comment_id;
14 17 $.getJSON(url, function(data) {
... ... @@ -37,3 +40,291 @@ function loadCompleted(paragraph) {
37 40 comment_paragraph_anchor = null;
38 41 }
39 42 }
  43 +
  44 +//Return a string with the beggining and the end of the selection of a text area separated by colon
  45 +function getSelectionBounderies(textareaId){
  46 +
  47 + var textarea = document.getElementById(textareaId);
  48 + if ('selectionStart' in textarea) {
  49 + // check whether some text is selected in the textarea
  50 + if (textarea.selectionStart != textarea.selectionEnd) {
  51 + alert(textarea.selectionStart + ":" + textarea.selectionEnd)
  52 + return textarea.selectionStart + ":" + textarea.selectionEnd;
  53 + }
  54 + }
  55 +
  56 + return false
  57 +}
  58 +
  59 +/*!
  60 + Autosize v1.18.9 - 2014-05-27
  61 + Automatically adjust textarea height based on user input.
  62 + (c) 2014 Jack Moore - http://www.jacklmoore.com/autosize
  63 + license: http://www.opensource.org/licenses/mit-license.php
  64 +*/
  65 +(function ($) {
  66 + var
  67 + defaults = {
  68 + className: 'autosizejs',
  69 + id: 'autosizejs',
  70 + append: '\n',
  71 + callback: false,
  72 + resizeDelay: 10,
  73 + placeholder: true
  74 + },
  75 +
  76 + // border:0 is unnecessary, but avoids a bug in Firefox on OSX
  77 + copy = '<textarea tabindex="-1" style="position:absolute; top:-999px; left:0; right:auto; bottom:auto; border:0; padding: 0; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; word-wrap:break-word; height:0 !important; min-height:0 !important; overflow:hidden; transition:none; -webkit-transition:none; -moz-transition:none;"/>',
  78 +
  79 + // line-height is conditionally included because IE7/IE8/old Opera do not return the correct value.
  80 + typographyStyles = [
  81 + 'fontFamily',
  82 + 'fontSize',
  83 + 'fontWeight',
  84 + 'fontStyle',
  85 + 'letterSpacing',
  86 + 'textTransform',
  87 + 'wordSpacing',
  88 + 'textIndent'
  89 + ],
  90 +
  91 + // to keep track which textarea is being mirrored when adjust() is called.
  92 + mirrored,
  93 +
  94 + // the mirror element, which is used to calculate what size the mirrored element should be.
  95 + mirror = $(copy).data('autosize', true)[0];
  96 +
  97 + // test that line-height can be accurately copied.
  98 + mirror.style.lineHeight = '99px';
  99 + if ($(mirror).css('lineHeight') === '99px') {
  100 + typographyStyles.push('lineHeight');
  101 + }
  102 + mirror.style.lineHeight = '';
  103 +
  104 + $.fn.autosize = function (options) {
  105 + if (!this.length) {
  106 + return this;
  107 + }
  108 +
  109 + options = $.extend({}, defaults, options || {});
  110 +
  111 + if (mirror.parentNode !== document.body) {
  112 + $(document.body).append(mirror);
  113 + }
  114 +
  115 + return this.each(function () {
  116 + var
  117 + ta = this,
  118 + $ta = $(ta),
  119 + maxHeight,
  120 + minHeight,
  121 + boxOffset = 0,
  122 + callback = $.isFunction(options.callback),
  123 + originalStyles = {
  124 + height: ta.style.height,
  125 + overflow: ta.style.overflow,
  126 + overflowY: ta.style.overflowY,
  127 + wordWrap: ta.style.wordWrap,
  128 + resize: ta.style.resize
  129 + },
  130 + timeout,
  131 + width = $ta.width(),
  132 + taResize = $ta.css('resize');
  133 +
  134 + if ($ta.data('autosize')) {
  135 + // exit if autosize has already been applied, or if the textarea is the mirror element.
  136 + return;
  137 + }
  138 + $ta.data('autosize', true);
  139 +
  140 + if ($ta.css('box-sizing') === 'border-box' || $ta.css('-moz-box-sizing') === 'border-box' || $ta.css('-webkit-box-sizing') === 'border-box'){
  141 + boxOffset = $ta.outerHeight() - $ta.height();
  142 + }
  143 +
  144 + // IE8 and lower return 'auto', which parses to NaN, if no min-height is set.
  145 + minHeight = Math.max(parseInt($ta.css('minHeight'), 10) - boxOffset || 0, $ta.height());
  146 +
  147 + $ta.css({
  148 + overflow: 'hidden',
  149 + overflowY: 'hidden',
  150 + wordWrap: 'break-word' // horizontal overflow is hidden, so break-word is necessary for handling words longer than the textarea width
  151 + });
  152 +
  153 + if (taResize === 'vertical') {
  154 + $ta.css('resize','none');
  155 + } else if (taResize === 'both') {
  156 + $ta.css('resize', 'horizontal');
  157 + }
  158 +
  159 + // The mirror width must exactly match the textarea width, so using getBoundingClientRect because it doesn't round the sub-pixel value.
  160 + // window.getComputedStyle, getBoundingClientRect returning a width are unsupported, but also unneeded in IE8 and lower.
  161 + function setWidth() {
  162 + var width;
  163 + var style = window.getComputedStyle ? window.getComputedStyle(ta, null) : false;
  164 +
  165 + if (style) {
  166 +
  167 + width = ta.getBoundingClientRect().width;
  168 +
  169 + if (width === 0 || typeof width !== 'number') {
  170 + width = parseInt(style.width,10);
  171 + }
  172 +
  173 + $.each(['paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth'], function(i,val){
  174 + width -= parseInt(style[val],10);
  175 + });
  176 + } else {
  177 + width = $ta.width();
  178 + }
  179 +
  180 + mirror.style.width = Math.max(width,0) + 'px';
  181 + }
  182 +
  183 + function initMirror() {
  184 + var styles = {};
  185 +
  186 + mirrored = ta;
  187 + mirror.className = options.className;
  188 + mirror.id = options.id;
  189 + maxHeight = parseInt($ta.css('maxHeight'), 10);
  190 +
  191 + // mirror is a duplicate textarea located off-screen that
  192 + // is automatically updated to contain the same text as the
  193 + // original textarea. mirror always has a height of 0.
  194 + // This gives a cross-browser supported way getting the actual
  195 + // height of the text, through the scrollTop property.
  196 + $.each(typographyStyles, function(i,val){
  197 + styles[val] = $ta.css(val);
  198 + });
  199 +
  200 + $(mirror).css(styles).attr('wrap', $ta.attr('wrap'));
  201 +
  202 + setWidth();
  203 +
  204 + // Chrome-specific fix:
  205 + // When the textarea y-overflow is hidden, Chrome doesn't reflow the text to account for the space
  206 + // made available by removing the scrollbar. This workaround triggers the reflow for Chrome.
  207 + if (window.chrome) {
  208 + var width = ta.style.width;
  209 + ta.style.width = '0px';
  210 + var ignore = ta.offsetWidth;
  211 + ta.style.width = width;
  212 + }
  213 + }
  214 +
  215 + // Using mainly bare JS in this function because it is going
  216 + // to fire very often while typing, and needs to very efficient.
  217 + function adjust() {
  218 + var height, original;
  219 +
  220 + if (mirrored !== ta) {
  221 + initMirror();
  222 + } else {
  223 + setWidth();
  224 + }
  225 +
  226 + if (!ta.value && options.placeholder) {
  227 + // If the textarea is empty, copy the placeholder text into
  228 + // the mirror control and use that for sizing so that we
  229 + // don't end up with placeholder getting trimmed.
  230 + mirror.value = ($ta.attr("placeholder") || '') + options.append;
  231 + } else {
  232 + mirror.value = ta.value + options.append;
  233 + }
  234 +
  235 + mirror.style.overflowY = ta.style.overflowY;
  236 + original = parseInt(ta.style.height,10);
  237 +
  238 + // Setting scrollTop to zero is needed in IE8 and lower for the next step to be accurately applied
  239 + mirror.scrollTop = 0;
  240 +
  241 + mirror.scrollTop = 9e4;
  242 +
  243 + // Using scrollTop rather than scrollHeight because scrollHeight is non-standard and includes padding.
  244 + height = mirror.scrollTop;
  245 +
  246 + if (maxHeight && height > maxHeight) {
  247 + ta.style.overflowY = 'scroll';
  248 + height = maxHeight;
  249 + } else {
  250 + ta.style.overflowY = 'hidden';
  251 + if (height < minHeight) {
  252 + height = minHeight;
  253 + }
  254 + }
  255 +
  256 + height += boxOffset;
  257 +
  258 + if (original !== height) {
  259 + ta.style.height = height + 'px';
  260 + if (callback) {
  261 + options.callback.call(ta,ta);
  262 + }
  263 + }
  264 + }
  265 +
  266 + function resize () {
  267 + clearTimeout(timeout);
  268 + timeout = setTimeout(function(){
  269 + var newWidth = $ta.width();
  270 +
  271 + if (newWidth !== width) {
  272 + width = newWidth;
  273 + adjust();
  274 + }
  275 + }, parseInt(options.resizeDelay,10));
  276 + }
  277 +
  278 + if ('onpropertychange' in ta) {
  279 + if ('oninput' in ta) {
  280 + // Detects IE9. IE9 does not fire onpropertychange or oninput for deletions,
  281 + // so binding to onkeyup to catch most of those occasions. There is no way that I
  282 + // know of to detect something like 'cut' in IE9.
  283 + $ta.on('input.autosize keyup.autosize', adjust);
  284 + } else {
  285 + // IE7 / IE8
  286 + $ta.on('propertychange.autosize', function(){
  287 + if(event.propertyName === 'value'){
  288 + adjust();
  289 + }
  290 + });
  291 + }
  292 + } else {
  293 + // Modern Browsers
  294 + $ta.on('input.autosize', adjust);
  295 + }
  296 +
  297 + // Set options.resizeDelay to false if using fixed-width textarea elements.
  298 + // Uses a timeout and width check to reduce the amount of times adjust needs to be called after window resize.
  299 +
  300 + if (options.resizeDelay !== false) {
  301 + $(window).on('resize.autosize', resize);
  302 + }
  303 +
  304 + // Event for manual triggering if needed.
  305 + // Should only be needed when the value of the textarea is changed through JavaScript rather than user input.
  306 + $ta.on('autosize.resize', adjust);
  307 +
  308 + // Event for manual triggering that also forces the styles to update as well.
  309 + // Should only be needed if one of typography styles of the textarea change, and the textarea is already the target of the adjust method.
  310 + $ta.on('autosize.resizeIncludeStyle', function() {
  311 + mirrored = null;
  312 + adjust();
  313 + });
  314 +
  315 + $ta.on('autosize.destroy', function(){
  316 + mirrored = null;
  317 + clearTimeout(timeout);
  318 + $(window).off('resize', resize);
  319 + $ta
  320 + .off('autosize')
  321 + .off('.autosize')
  322 + .css(originalStyles)
  323 + .removeData('autosize');
  324 + });
  325 +
  326 + // Call adjust in case the textarea already contains text.
  327 + adjust();
  328 + });
  329 + };
  330 +}(window.jQuery || window.$)); // jQuery or jQuery-like library, such as Zepto
40 331 \ No newline at end of file
... ...
public/jquery.autosize.js 0 → 100644
  Diff comments   View file @c7848c9
... ... @@ -0,0 +1,272 @@
  1 +/*!
  2 + Autosize v1.18.9 - 2014-05-27
  3 + Automatically adjust textarea height based on user input.
  4 + (c) 2014 Jack Moore - http://www.jacklmoore.com/autosize
  5 + license: http://www.opensource.org/licenses/mit-license.php
  6 +*/
  7 +(function ($) {
  8 + var
  9 + defaults = {
  10 + className: 'autosizejs',
  11 + id: 'autosizejs',
  12 + append: '\n',
  13 + callback: false,
  14 + resizeDelay: 10,
  15 + placeholder: true
  16 + },
  17 +
  18 + // border:0 is unnecessary, but avoids a bug in Firefox on OSX
  19 + copy = '<textarea tabindex="-1" style="position:absolute; top:-999px; left:0; right:auto; bottom:auto; border:0; padding: 0; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; word-wrap:break-word; height:0 !important; min-height:0 !important; overflow:hidden; transition:none; -webkit-transition:none; -moz-transition:none;"/>',
  20 +
  21 + // line-height is conditionally included because IE7/IE8/old Opera do not return the correct value.
  22 + typographyStyles = [
  23 + 'fontFamily',
  24 + 'fontSize',
  25 + 'fontWeight',
  26 + 'fontStyle',
  27 + 'letterSpacing',
  28 + 'textTransform',
  29 + 'wordSpacing',
  30 + 'textIndent'
  31 + ],
  32 +
  33 + // to keep track which textarea is being mirrored when adjust() is called.
  34 + mirrored,
  35 +
  36 + // the mirror element, which is used to calculate what size the mirrored element should be.
  37 + mirror = $(copy).data('autosize', true)[0];
  38 +
  39 + // test that line-height can be accurately copied.
  40 + mirror.style.lineHeight = '99px';
  41 + if ($(mirror).css('lineHeight') === '99px') {
  42 + typographyStyles.push('lineHeight');
  43 + }
  44 + mirror.style.lineHeight = '';
  45 +
  46 + $.fn.autosize = function (options) {
  47 + if (!this.length) {
  48 + return this;
  49 + }
  50 +
  51 + options = $.extend({}, defaults, options || {});
  52 +
  53 + if (mirror.parentNode !== document.body) {
  54 + $(document.body).append(mirror);
  55 + }
  56 +
  57 + return this.each(function () {
  58 + var
  59 + ta = this,
  60 + $ta = $(ta),
  61 + maxHeight,
  62 + minHeight,
  63 + boxOffset = 0,
  64 + callback = $.isFunction(options.callback),
  65 + originalStyles = {
  66 + height: ta.style.height,
  67 + overflow: ta.style.overflow,
  68 + overflowY: ta.style.overflowY,
  69 + wordWrap: ta.style.wordWrap,
  70 + resize: ta.style.resize
  71 + },
  72 + timeout,
  73 + width = $ta.width(),
  74 + taResize = $ta.css('resize');
  75 +
  76 + if ($ta.data('autosize')) {
  77 + // exit if autosize has already been applied, or if the textarea is the mirror element.
  78 + return;
  79 + }
  80 + $ta.data('autosize', true);
  81 +
  82 + if ($ta.css('box-sizing') === 'border-box' || $ta.css('-moz-box-sizing') === 'border-box' || $ta.css('-webkit-box-sizing') === 'border-box'){
  83 + boxOffset = $ta.outerHeight() - $ta.height();
  84 + }
  85 +
  86 + // IE8 and lower return 'auto', which parses to NaN, if no min-height is set.
  87 + minHeight = Math.max(parseInt($ta.css('minHeight'), 10) - boxOffset || 0, $ta.height());
  88 +
  89 + $ta.css({
  90 + overflow: 'hidden',
  91 + overflowY: 'hidden',
  92 + wordWrap: 'break-word' // horizontal overflow is hidden, so break-word is necessary for handling words longer than the textarea width
  93 + });
  94 +
  95 + if (taResize === 'vertical') {
  96 + $ta.css('resize','none');
  97 + } else if (taResize === 'both') {
  98 + $ta.css('resize', 'horizontal');
  99 + }
  100 +
  101 + // The mirror width must exactly match the textarea width, so using getBoundingClientRect because it doesn't round the sub-pixel value.
  102 + // window.getComputedStyle, getBoundingClientRect returning a width are unsupported, but also unneeded in IE8 and lower.
  103 + function setWidth() {
  104 + var width;
  105 + var style = window.getComputedStyle ? window.getComputedStyle(ta, null) : false;
  106 +
  107 + if (style) {
  108 +
  109 + width = ta.getBoundingClientRect().width;
  110 +
  111 + if (width === 0 || typeof width !== 'number') {
  112 + width = parseInt(style.width,10);
  113 + }
  114 +
  115 + $.each(['paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth'], function(i,val){
  116 + width -= parseInt(style[val],10);
  117 + });
  118 + } else {
  119 + width = $ta.width();
  120 + }
  121 +
  122 + mirror.style.width = Math.max(width,0) + 'px';
  123 + }
  124 +
  125 + function initMirror() {
  126 + var styles = {};
  127 +
  128 + mirrored = ta;
  129 + mirror.className = options.className;
  130 + mirror.id = options.id;
  131 + maxHeight = parseInt($ta.css('maxHeight'), 10);
  132 +
  133 + // mirror is a duplicate textarea located off-screen that
  134 + // is automatically updated to contain the same text as the
  135 + // original textarea. mirror always has a height of 0.
  136 + // This gives a cross-browser supported way getting the actual
  137 + // height of the text, through the scrollTop property.
  138 + $.each(typographyStyles, function(i,val){
  139 + styles[val] = $ta.css(val);
  140 + });
  141 +
  142 + $(mirror).css(styles).attr('wrap', $ta.attr('wrap'));
  143 +
  144 + setWidth();
  145 +
  146 + // Chrome-specific fix:
  147 + // When the textarea y-overflow is hidden, Chrome doesn't reflow the text to account for the space
  148 + // made available by removing the scrollbar. This workaround triggers the reflow for Chrome.
  149 + if (window.chrome) {
  150 + var width = ta.style.width;
  151 + ta.style.width = '0px';
  152 + var ignore = ta.offsetWidth;
  153 + ta.style.width = width;
  154 + }
  155 + }
  156 +
  157 + // Using mainly bare JS in this function because it is going
  158 + // to fire very often while typing, and needs to very efficient.
  159 + function adjust() {
  160 + var height, original;
  161 +
  162 + if (mirrored !== ta) {
  163 + initMirror();
  164 + } else {
  165 + setWidth();
  166 + }
  167 +
  168 + if (!ta.value && options.placeholder) {
  169 + // If the textarea is empty, copy the placeholder text into
  170 + // the mirror control and use that for sizing so that we
  171 + // don't end up with placeholder getting trimmed.
  172 + mirror.value = ($ta.attr("placeholder") || '') + options.append;
  173 + } else {
  174 + mirror.value = ta.value + options.append;
  175 + }
  176 +
  177 + mirror.style.overflowY = ta.style.overflowY;
  178 + original = parseInt(ta.style.height,10);
  179 +
  180 + // Setting scrollTop to zero is needed in IE8 and lower for the next step to be accurately applied
  181 + mirror.scrollTop = 0;
  182 +
  183 + mirror.scrollTop = 9e4;
  184 +
  185 + // Using scrollTop rather than scrollHeight because scrollHeight is non-standard and includes padding.
  186 + height = mirror.scrollTop;
  187 +
  188 + if (maxHeight && height > maxHeight) {
  189 + ta.style.overflowY = 'scroll';
  190 + height = maxHeight;
  191 + } else {
  192 + ta.style.overflowY = 'hidden';
  193 + if (height < minHeight) {
  194 + height = minHeight;
  195 + }
  196 + }
  197 +
  198 + height += boxOffset;
  199 +
  200 + if (original !== height) {
  201 + ta.style.height = height + 'px';
  202 + if (callback) {
  203 + options.callback.call(ta,ta);
  204 + }
  205 + }
  206 + }
  207 +
  208 + function resize () {
  209 + clearTimeout(timeout);
  210 + timeout = setTimeout(function(){
  211 + var newWidth = $ta.width();
  212 +
  213 + if (newWidth !== width) {
  214 + width = newWidth;
  215 + adjust();
  216 + }
  217 + }, parseInt(options.resizeDelay,10));
  218 + }
  219 +
  220 + if ('onpropertychange' in ta) {
  221 + if ('oninput' in ta) {
  222 + // Detects IE9. IE9 does not fire onpropertychange or oninput for deletions,
  223 + // so binding to onkeyup to catch most of those occasions. There is no way that I
  224 + // know of to detect something like 'cut' in IE9.
  225 + $ta.on('input.autosize keyup.autosize', adjust);
  226 + } else {
  227 + // IE7 / IE8
  228 + $ta.on('propertychange.autosize', function(){
  229 + if(event.propertyName === 'value'){
  230 + adjust();
  231 + }
  232 + });
  233 + }
  234 + } else {
  235 + // Modern Browsers
  236 + $ta.on('input.autosize', adjust);
  237 + }
  238 +
  239 + // Set options.resizeDelay to false if using fixed-width textarea elements.
  240 + // Uses a timeout and width check to reduce the amount of times adjust needs to be called after window resize.
  241 +
  242 + if (options.resizeDelay !== false) {
  243 + $(window).on('resize.autosize', resize);
  244 + }
  245 +
  246 + // Event for manual triggering if needed.
  247 + // Should only be needed when the value of the textarea is changed through JavaScript rather than user input.
  248 + $ta.on('autosize.resize', adjust);
  249 +
  250 + // Event for manual triggering that also forces the styles to update as well.
  251 + // Should only be needed if one of typography styles of the textarea change, and the textarea is already the target of the adjust method.
  252 + $ta.on('autosize.resizeIncludeStyle', function() {
  253 + mirrored = null;
  254 + adjust();
  255 + });
  256 +
  257 + $ta.on('autosize.destroy', function(){
  258 + mirrored = null;
  259 + clearTimeout(timeout);
  260 + $(window).off('resize', resize);
  261 + $ta
  262 + .off('autosize')
  263 + .off('.autosize')
  264 + .css(originalStyles)
  265 + .removeData('autosize');
  266 + });
  267 +
  268 + // Call adjust in case the textarea already contains text.
  269 + adjust();
  270 + });
  271 + };
  272 +}(window.jQuery || window.$)); // jQuery or jQuery-like library, such as Zepto
... ...
views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb
  Diff comments   View file @c7848c9
1 1 <div class="comments">
2   - <div class="comment_paragraph_<%= paragraph_id %>" style="float: left">
3   - <div style="float: left">
  2 + <textarea id="comment_area_<%= paragraph_id %>" readonly="true" cols="60" style="border: none;text-align: justify" class='autoexpand-text-area'>
  3 + <%= inner_html %>
  4 + </textarea>
  5 + <script>
  6 + jQuery("#comment_area_<%= paragraph_id %>").mouseup(function() {
  7 + var selected_area=getSelectionBounderies("comment_area_<%= paragraph_id %>")
  8 + form = jQuery('.comment_paragraph_<%= paragraph_id %>').parent().find('form');
  9 + if (form.find('input.selected_area').length === 0){
  10 + jQuery('<input>').attr({
  11 + class: 'selected_area',
  12 + name: 'comment[comment_paragraph_selected_area]',
  13 + value: selected_area
  14 + }).appendTo(form)
  15 + }else{
  16 + form.find('input.selected_area').val(selected_area)
  17 + }
  18 + });
  19 + </script>
  20 + <div class="comment_paragraph_<%= paragraph_id %>" align="center">
4 21 <%= link_to_remote(image_tag("/plugins/comment_paragraph/images/comments.gif"),
5 22 :url => { :profile => profile_identifier, :controller => 'comment_paragraph_plugin_profile', :action => 'view_comments', :paragraph_id => paragraph_id, :article_id => article_id},
6 23 :method => :post,
7 24 :condition => "!toggleParagraph(#{paragraph_id})",
8 25 :complete => "loadCompleted(#{paragraph_id})")%>
9   - </div>
10   - <!-- FIXME: css file -->
11   - <div id="comments_paragraph_count_<%= paragraph_id %>" style="float: right; vertical-align: middle; padding-left: 3px; padding-right: 5px; color: #5AC1FC"><span id="comment-count-<%= paragraph_id %>" class='comment-count'><%= count %></span></div>
12 26  
13   - </div>
14   -
15   - <div>
16   - <%= inner_html %>
  27 + <!-- FIXME: css file -->
  28 + <div align="center" id="comments_paragraph_count_<%= paragraph_id %>" style="vertical-align: middle; padding-left: 3px; padding-right: 5px; color: #5AC1FC"><span id="comment-count-<%= paragraph_id %>" class='comment-count'><%= count %></span></div>
  29 + <br><br>
17 30 </div>
18 31  
19 32 <div class="comment-paragraph-loading-<%= paragraph_id %>"/>
... ...