Commit 9e8fcf2d2468c10ae595865f9f7b136f5c80c138
1 parent
f6769a0f
Exists in
theme-brasil-digital-from-staging
and in
9 other branches
working with textarea
Showing
5 changed files
with
591 additions
and
13 deletions
Show diff stats
plugins/comment_paragraph/controllers/profile/comment_paragraph_plugin_profile_controller.rb
| ... | ... | @@ -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 | ... | ... |
plugins/comment_paragraph/lib/ext/comment.rb
| ... | ... | @@ -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 | ... | ... |
plugins/comment_paragraph/public/comment_paragraph_macro.js
| 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 | ... | ... |
| ... | ... | @@ -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 | ... | ... |
plugins/comment_paragraph/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb
| 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 %>"/> | ... | ... |