diff --git a/controllers/profile/comment_paragraph_plugin_profile_controller.rb b/controllers/profile/comment_paragraph_plugin_profile_controller.rb index 2e37ebd..42133c7 100644 --- a/controllers/profile/comment_paragraph_plugin_profile_controller.rb +++ b/controllers/profile/comment_paragraph_plugin_profile_controller.rb @@ -4,7 +4,7 @@ class CommentParagraphPluginProfileController < ProfileController def view_comments @article_id = params[:article_id] @paragraph_id = params[:paragraph_id] - + article = profile.articles.find(@article_id) @paragraph_comment_page = (params[:paragraph_comment_page] || 1).to_i diff --git a/lib/ext/comment.rb b/lib/ext/comment.rb index 78cc278..d37d3ca 100644 --- a/lib/ext/comment.rb +++ b/lib/ext/comment.rb @@ -3,12 +3,14 @@ require_dependency 'comment' class Comment scope :without_paragraph, :conditions => {:paragraph_id => nil } - + + settings_items :comment_paragraph_selected_area, :type => :string + scope :in_paragraph, proc { |paragraph_id| { :conditions => ['paragraph_id = ?', paragraph_id] } } - attr_accessible :paragraph_id + attr_accessible :paragraph_id, :comment_paragraph_selected_area end diff --git a/public/comment_paragraph_macro.js b/public/comment_paragraph_macro.js index 3814002..a7e4c9f 100644 --- a/public/comment_paragraph_macro.js +++ b/public/comment_paragraph_macro.js @@ -1,5 +1,8 @@ var comment_paragraph_anchor; jQuery(document).ready(function($) { + + jQuery('.autoexpand-text-area').autosize(); + var anchor = window.location.hash; if(anchor.length==0) return; @@ -8,7 +11,7 @@ jQuery(document).ready(function($) { if($('div[data-macro=comment_paragraph_plugin/allow_comment]').length==0) return; //comment_paragraph_plugin/allow_comment div must exists var comment_id = val[1]; if(!/^\d+$/.test(comment_id)) return; //test for integer - + comment_paragraph_anchor = anchor; var url = '/plugin/comment_paragraph/public/comment_paragraph/'+comment_id; $.getJSON(url, function(data) { @@ -37,3 +40,291 @@ function loadCompleted(paragraph) { comment_paragraph_anchor = null; } } + +//Return a string with the beggining and the end of the selection of a text area separated by colon +function getSelectionBounderies(textareaId){ + + var textarea = document.getElementById(textareaId); + if ('selectionStart' in textarea) { + // check whether some text is selected in the textarea + if (textarea.selectionStart != textarea.selectionEnd) { + alert(textarea.selectionStart + ":" + textarea.selectionEnd) + return textarea.selectionStart + ":" + textarea.selectionEnd; + } + } + + return false +} + +/*! + Autosize v1.18.9 - 2014-05-27 + Automatically adjust textarea height based on user input. + (c) 2014 Jack Moore - http://www.jacklmoore.com/autosize + license: http://www.opensource.org/licenses/mit-license.php +*/ +(function ($) { + var + defaults = { + className: 'autosizejs', + id: 'autosizejs', + append: '\n', + callback: false, + resizeDelay: 10, + placeholder: true + }, + + // border:0 is unnecessary, but avoids a bug in Firefox on OSX + copy = '', + + // line-height is conditionally included because IE7/IE8/old Opera do not return the correct value. + typographyStyles = [ + 'fontFamily', + 'fontSize', + 'fontWeight', + 'fontStyle', + 'letterSpacing', + 'textTransform', + 'wordSpacing', + 'textIndent' + ], + + // to keep track which textarea is being mirrored when adjust() is called. + mirrored, + + // the mirror element, which is used to calculate what size the mirrored element should be. + mirror = $(copy).data('autosize', true)[0]; + + // test that line-height can be accurately copied. + mirror.style.lineHeight = '99px'; + if ($(mirror).css('lineHeight') === '99px') { + typographyStyles.push('lineHeight'); + } + mirror.style.lineHeight = ''; + + $.fn.autosize = function (options) { + if (!this.length) { + return this; + } + + options = $.extend({}, defaults, options || {}); + + if (mirror.parentNode !== document.body) { + $(document.body).append(mirror); + } + + return this.each(function () { + var + ta = this, + $ta = $(ta), + maxHeight, + minHeight, + boxOffset = 0, + callback = $.isFunction(options.callback), + originalStyles = { + height: ta.style.height, + overflow: ta.style.overflow, + overflowY: ta.style.overflowY, + wordWrap: ta.style.wordWrap, + resize: ta.style.resize + }, + timeout, + width = $ta.width(), + taResize = $ta.css('resize'); + + if ($ta.data('autosize')) { + // exit if autosize has already been applied, or if the textarea is the mirror element. + return; + } + $ta.data('autosize', true); + + if ($ta.css('box-sizing') === 'border-box' || $ta.css('-moz-box-sizing') === 'border-box' || $ta.css('-webkit-box-sizing') === 'border-box'){ + boxOffset = $ta.outerHeight() - $ta.height(); + } + + // IE8 and lower return 'auto', which parses to NaN, if no min-height is set. + minHeight = Math.max(parseInt($ta.css('minHeight'), 10) - boxOffset || 0, $ta.height()); + + $ta.css({ + overflow: 'hidden', + overflowY: 'hidden', + wordWrap: 'break-word' // horizontal overflow is hidden, so break-word is necessary for handling words longer than the textarea width + }); + + if (taResize === 'vertical') { + $ta.css('resize','none'); + } else if (taResize === 'both') { + $ta.css('resize', 'horizontal'); + } + + // The mirror width must exactly match the textarea width, so using getBoundingClientRect because it doesn't round the sub-pixel value. + // window.getComputedStyle, getBoundingClientRect returning a width are unsupported, but also unneeded in IE8 and lower. + function setWidth() { + var width; + var style = window.getComputedStyle ? window.getComputedStyle(ta, null) : false; + + if (style) { + + width = ta.getBoundingClientRect().width; + + if (width === 0 || typeof width !== 'number') { + width = parseInt(style.width,10); + } + + $.each(['paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth'], function(i,val){ + width -= parseInt(style[val],10); + }); + } else { + width = $ta.width(); + } + + mirror.style.width = Math.max(width,0) + 'px'; + } + + function initMirror() { + var styles = {}; + + mirrored = ta; + mirror.className = options.className; + mirror.id = options.id; + maxHeight = parseInt($ta.css('maxHeight'), 10); + + // mirror is a duplicate textarea located off-screen that + // is automatically updated to contain the same text as the + // original textarea. mirror always has a height of 0. + // This gives a cross-browser supported way getting the actual + // height of the text, through the scrollTop property. + $.each(typographyStyles, function(i,val){ + styles[val] = $ta.css(val); + }); + + $(mirror).css(styles).attr('wrap', $ta.attr('wrap')); + + setWidth(); + + // Chrome-specific fix: + // When the textarea y-overflow is hidden, Chrome doesn't reflow the text to account for the space + // made available by removing the scrollbar. This workaround triggers the reflow for Chrome. + if (window.chrome) { + var width = ta.style.width; + ta.style.width = '0px'; + var ignore = ta.offsetWidth; + ta.style.width = width; + } + } + + // Using mainly bare JS in this function because it is going + // to fire very often while typing, and needs to very efficient. + function adjust() { + var height, original; + + if (mirrored !== ta) { + initMirror(); + } else { + setWidth(); + } + + if (!ta.value && options.placeholder) { + // If the textarea is empty, copy the placeholder text into + // the mirror control and use that for sizing so that we + // don't end up with placeholder getting trimmed. + mirror.value = ($ta.attr("placeholder") || '') + options.append; + } else { + mirror.value = ta.value + options.append; + } + + mirror.style.overflowY = ta.style.overflowY; + original = parseInt(ta.style.height,10); + + // Setting scrollTop to zero is needed in IE8 and lower for the next step to be accurately applied + mirror.scrollTop = 0; + + mirror.scrollTop = 9e4; + + // Using scrollTop rather than scrollHeight because scrollHeight is non-standard and includes padding. + height = mirror.scrollTop; + + if (maxHeight && height > maxHeight) { + ta.style.overflowY = 'scroll'; + height = maxHeight; + } else { + ta.style.overflowY = 'hidden'; + if (height < minHeight) { + height = minHeight; + } + } + + height += boxOffset; + + if (original !== height) { + ta.style.height = height + 'px'; + if (callback) { + options.callback.call(ta,ta); + } + } + } + + function resize () { + clearTimeout(timeout); + timeout = setTimeout(function(){ + var newWidth = $ta.width(); + + if (newWidth !== width) { + width = newWidth; + adjust(); + } + }, parseInt(options.resizeDelay,10)); + } + + if ('onpropertychange' in ta) { + if ('oninput' in ta) { + // Detects IE9. IE9 does not fire onpropertychange or oninput for deletions, + // so binding to onkeyup to catch most of those occasions. There is no way that I + // know of to detect something like 'cut' in IE9. + $ta.on('input.autosize keyup.autosize', adjust); + } else { + // IE7 / IE8 + $ta.on('propertychange.autosize', function(){ + if(event.propertyName === 'value'){ + adjust(); + } + }); + } + } else { + // Modern Browsers + $ta.on('input.autosize', adjust); + } + + // Set options.resizeDelay to false if using fixed-width textarea elements. + // Uses a timeout and width check to reduce the amount of times adjust needs to be called after window resize. + + if (options.resizeDelay !== false) { + $(window).on('resize.autosize', resize); + } + + // Event for manual triggering if needed. + // Should only be needed when the value of the textarea is changed through JavaScript rather than user input. + $ta.on('autosize.resize', adjust); + + // Event for manual triggering that also forces the styles to update as well. + // Should only be needed if one of typography styles of the textarea change, and the textarea is already the target of the adjust method. + $ta.on('autosize.resizeIncludeStyle', function() { + mirrored = null; + adjust(); + }); + + $ta.on('autosize.destroy', function(){ + mirrored = null; + clearTimeout(timeout); + $(window).off('resize', resize); + $ta + .off('autosize') + .off('.autosize') + .css(originalStyles) + .removeData('autosize'); + }); + + // Call adjust in case the textarea already contains text. + adjust(); + }); + }; +}(window.jQuery || window.$)); // jQuery or jQuery-like library, such as Zepto \ No newline at end of file diff --git a/public/jquery.autosize.js b/public/jquery.autosize.js new file mode 100644 index 0000000..27b341b --- /dev/null +++ b/public/jquery.autosize.js @@ -0,0 +1,272 @@ +/*! + Autosize v1.18.9 - 2014-05-27 + Automatically adjust textarea height based on user input. + (c) 2014 Jack Moore - http://www.jacklmoore.com/autosize + license: http://www.opensource.org/licenses/mit-license.php +*/ +(function ($) { + var + defaults = { + className: 'autosizejs', + id: 'autosizejs', + append: '\n', + callback: false, + resizeDelay: 10, + placeholder: true + }, + + // border:0 is unnecessary, but avoids a bug in Firefox on OSX + copy = '', + + // line-height is conditionally included because IE7/IE8/old Opera do not return the correct value. + typographyStyles = [ + 'fontFamily', + 'fontSize', + 'fontWeight', + 'fontStyle', + 'letterSpacing', + 'textTransform', + 'wordSpacing', + 'textIndent' + ], + + // to keep track which textarea is being mirrored when adjust() is called. + mirrored, + + // the mirror element, which is used to calculate what size the mirrored element should be. + mirror = $(copy).data('autosize', true)[0]; + + // test that line-height can be accurately copied. + mirror.style.lineHeight = '99px'; + if ($(mirror).css('lineHeight') === '99px') { + typographyStyles.push('lineHeight'); + } + mirror.style.lineHeight = ''; + + $.fn.autosize = function (options) { + if (!this.length) { + return this; + } + + options = $.extend({}, defaults, options || {}); + + if (mirror.parentNode !== document.body) { + $(document.body).append(mirror); + } + + return this.each(function () { + var + ta = this, + $ta = $(ta), + maxHeight, + minHeight, + boxOffset = 0, + callback = $.isFunction(options.callback), + originalStyles = { + height: ta.style.height, + overflow: ta.style.overflow, + overflowY: ta.style.overflowY, + wordWrap: ta.style.wordWrap, + resize: ta.style.resize + }, + timeout, + width = $ta.width(), + taResize = $ta.css('resize'); + + if ($ta.data('autosize')) { + // exit if autosize has already been applied, or if the textarea is the mirror element. + return; + } + $ta.data('autosize', true); + + if ($ta.css('box-sizing') === 'border-box' || $ta.css('-moz-box-sizing') === 'border-box' || $ta.css('-webkit-box-sizing') === 'border-box'){ + boxOffset = $ta.outerHeight() - $ta.height(); + } + + // IE8 and lower return 'auto', which parses to NaN, if no min-height is set. + minHeight = Math.max(parseInt($ta.css('minHeight'), 10) - boxOffset || 0, $ta.height()); + + $ta.css({ + overflow: 'hidden', + overflowY: 'hidden', + wordWrap: 'break-word' // horizontal overflow is hidden, so break-word is necessary for handling words longer than the textarea width + }); + + if (taResize === 'vertical') { + $ta.css('resize','none'); + } else if (taResize === 'both') { + $ta.css('resize', 'horizontal'); + } + + // The mirror width must exactly match the textarea width, so using getBoundingClientRect because it doesn't round the sub-pixel value. + // window.getComputedStyle, getBoundingClientRect returning a width are unsupported, but also unneeded in IE8 and lower. + function setWidth() { + var width; + var style = window.getComputedStyle ? window.getComputedStyle(ta, null) : false; + + if (style) { + + width = ta.getBoundingClientRect().width; + + if (width === 0 || typeof width !== 'number') { + width = parseInt(style.width,10); + } + + $.each(['paddingLeft', 'paddingRight', 'borderLeftWidth', 'borderRightWidth'], function(i,val){ + width -= parseInt(style[val],10); + }); + } else { + width = $ta.width(); + } + + mirror.style.width = Math.max(width,0) + 'px'; + } + + function initMirror() { + var styles = {}; + + mirrored = ta; + mirror.className = options.className; + mirror.id = options.id; + maxHeight = parseInt($ta.css('maxHeight'), 10); + + // mirror is a duplicate textarea located off-screen that + // is automatically updated to contain the same text as the + // original textarea. mirror always has a height of 0. + // This gives a cross-browser supported way getting the actual + // height of the text, through the scrollTop property. + $.each(typographyStyles, function(i,val){ + styles[val] = $ta.css(val); + }); + + $(mirror).css(styles).attr('wrap', $ta.attr('wrap')); + + setWidth(); + + // Chrome-specific fix: + // When the textarea y-overflow is hidden, Chrome doesn't reflow the text to account for the space + // made available by removing the scrollbar. This workaround triggers the reflow for Chrome. + if (window.chrome) { + var width = ta.style.width; + ta.style.width = '0px'; + var ignore = ta.offsetWidth; + ta.style.width = width; + } + } + + // Using mainly bare JS in this function because it is going + // to fire very often while typing, and needs to very efficient. + function adjust() { + var height, original; + + if (mirrored !== ta) { + initMirror(); + } else { + setWidth(); + } + + if (!ta.value && options.placeholder) { + // If the textarea is empty, copy the placeholder text into + // the mirror control and use that for sizing so that we + // don't end up with placeholder getting trimmed. + mirror.value = ($ta.attr("placeholder") || '') + options.append; + } else { + mirror.value = ta.value + options.append; + } + + mirror.style.overflowY = ta.style.overflowY; + original = parseInt(ta.style.height,10); + + // Setting scrollTop to zero is needed in IE8 and lower for the next step to be accurately applied + mirror.scrollTop = 0; + + mirror.scrollTop = 9e4; + + // Using scrollTop rather than scrollHeight because scrollHeight is non-standard and includes padding. + height = mirror.scrollTop; + + if (maxHeight && height > maxHeight) { + ta.style.overflowY = 'scroll'; + height = maxHeight; + } else { + ta.style.overflowY = 'hidden'; + if (height < minHeight) { + height = minHeight; + } + } + + height += boxOffset; + + if (original !== height) { + ta.style.height = height + 'px'; + if (callback) { + options.callback.call(ta,ta); + } + } + } + + function resize () { + clearTimeout(timeout); + timeout = setTimeout(function(){ + var newWidth = $ta.width(); + + if (newWidth !== width) { + width = newWidth; + adjust(); + } + }, parseInt(options.resizeDelay,10)); + } + + if ('onpropertychange' in ta) { + if ('oninput' in ta) { + // Detects IE9. IE9 does not fire onpropertychange or oninput for deletions, + // so binding to onkeyup to catch most of those occasions. There is no way that I + // know of to detect something like 'cut' in IE9. + $ta.on('input.autosize keyup.autosize', adjust); + } else { + // IE7 / IE8 + $ta.on('propertychange.autosize', function(){ + if(event.propertyName === 'value'){ + adjust(); + } + }); + } + } else { + // Modern Browsers + $ta.on('input.autosize', adjust); + } + + // Set options.resizeDelay to false if using fixed-width textarea elements. + // Uses a timeout and width check to reduce the amount of times adjust needs to be called after window resize. + + if (options.resizeDelay !== false) { + $(window).on('resize.autosize', resize); + } + + // Event for manual triggering if needed. + // Should only be needed when the value of the textarea is changed through JavaScript rather than user input. + $ta.on('autosize.resize', adjust); + + // Event for manual triggering that also forces the styles to update as well. + // Should only be needed if one of typography styles of the textarea change, and the textarea is already the target of the adjust method. + $ta.on('autosize.resizeIncludeStyle', function() { + mirrored = null; + adjust(); + }); + + $ta.on('autosize.destroy', function(){ + mirrored = null; + clearTimeout(timeout); + $(window).off('resize', resize); + $ta + .off('autosize') + .off('.autosize') + .css(originalStyles) + .removeData('autosize'); + }); + + // Call adjust in case the textarea already contains text. + adjust(); + }); + }; +}(window.jQuery || window.$)); // jQuery or jQuery-like library, such as Zepto diff --git a/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb b/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb index 756728b..d720cea 100644 --- a/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb +++ b/views/comment_paragraph_plugin_profile/_comment_paragraph.html.erb @@ -1,19 +1,32 @@