diff --git a/app/models/status_message.rb b/app/models/status_message.rb index f9e3b8331..e87f88acc 100644 --- a/app/models/status_message.rb +++ b/app/models/status_message.rb @@ -13,7 +13,7 @@ class StatusMessage < Post acts_as_taggable_on :tags extract_tags_from :raw_message - validates_length_of :text, :maximum => 1000, :text => "please make your status messages less than 1000 characters" + validates_length_of :text, :maximum => 10000, :text => "please make your status messages less than 10000 characters" xml_name :status_message xml_attr :raw_message diff --git a/config/assets.yml b/config/assets.yml index 2699fab7c..e0d5b438f 100644 --- a/config/assets.yml +++ b/config/assets.yml @@ -15,6 +15,7 @@ javascripts: - public/javascripts/vendor/jquery.hotkeys.js - public/javascripts/vendor/jquery.autoresize.min.js - public/javascripts/vendor/jquery-ui-1.8.9.custom.min.js + - public/javascripts/vendor/jquery.expander.js - public/javascripts/vendor/facebox.js - public/javascripts/vendor/timeago.js - public/javascripts/vendor/Mustache.js diff --git a/public/javascripts/stream.js b/public/javascripts/stream.js index 8b6c2a69a..72c05d07d 100644 --- a/public/javascripts/stream.js +++ b/public/javascripts/stream.js @@ -84,6 +84,14 @@ var Stream = { }); }); + + // collapse long comments + $(stream_string + " .content").find("p").expander({ + slicePoint: 400, + widow: 12, + expandText: "show more", + userCollapse: false + }); }, setUpLikes: function(){ var likes = $("#main_stream .like_it, #main_stream .dislike_it"); diff --git a/public/javascripts/vendor/jquery.expander.js b/public/javascripts/vendor/jquery.expander.js new file mode 100644 index 000000000..f56eef03c --- /dev/null +++ b/public/javascripts/vendor/jquery.expander.js @@ -0,0 +1,152 @@ +/* + * jQuery Expander plugin + * Version 0.4 (12/09/2008) + * @requires jQuery v1.1.1+ + * + * Dual licensed under the MIT and GPL licenses: + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + * + */ + + +(function($) { + + $.fn.expander = function(options) { + + var opts = $.extend({}, $.fn.expander.defaults, options); + var delayedCollapse; + return this.each(function() { + var $this = $(this); + var o = $.meta ? $.extend({}, opts, $this.data()) : opts; + var cleanedTag, startTags, endTags; + var allText = $this.html(); + var startText = allText.slice(0, o.slicePoint).replace(/\w+$/,''); + startTags = startText.match(/<\w[^>]*>/g); + if (startTags) {startText = allText.slice(0,o.slicePoint + startTags.join('').length).replace(/\w+$/,'');} + + if (startText.lastIndexOf('<') > startText.lastIndexOf('>') ) { + startText = startText.slice(0,startText.lastIndexOf('<')); + } + var endText = allText.slice(startText.length); + // create necessary expand/collapse elements if they don't already exist + if (!$('span.details', this).length) { + // end script if text length isn't long enough. + if ( endText.replace(/\s+$/,'').split(' ').length < o.widow ) { return; } + // otherwise, continue... + if (endText.indexOf(' -1) { + endTags = endText.match(/<(\/)?[^>]*>/g); + for (var i=0; i < endTags.length; i++) { + + if (endTags[i].indexOf(' -1) { + var startTag, startTagExists = false; + for (var j=0; j < i; j++) { + startTag = endTags[j].slice(0, endTags[j].indexOf(' ')).replace(/(\w)$/,'$1>'); + if (startTag == rSlash(endTags[i])) { + startTagExists = true; + } + } + if (!startTagExists) { + startText = startText + endTags[i]; + var matched = false; + for (var s=startTags.length - 1; s >= 0; s--) { + if (startTags[s].slice(0, startTags[s].indexOf(' ')).replace(/(\w)$/,'$1>') == rSlash(endTags[i]) + && matched == false) { + cleanedTag = cleanedTag ? startTags[s] + cleanedTag : startTags[s]; + matched = true; + } + }; + } + } + } + + endText = cleanedTag && cleanedTag + endText || endText; + } + $this.html([ + startText, + '', + o.expandPrefix, + '', + o.expandText, + '', + '', + '', + endText, + '' + ].join('') + ); + } + var $thisDetails = $('span.details', this), + $readMore = $('span.read-more', this); + $thisDetails.hide(); + $readMore.find('a').click(function() { + $readMore.hide(); + + if (o.expandEffect === 'show' && !o.expandSpeed) { + o.beforeExpand($this); + $thisDetails.show(); + o.afterExpand($this); + delayCollapse(o, $thisDetails); + } else { + o.beforeExpand($this); + $thisDetails[o.expandEffect](o.expandSpeed, function() { + $thisDetails.css({zoom: ''}); + o.afterExpand($this); + delayCollapse(o, $thisDetails); + }); + } + return false; + }); + if (o.userCollapse) { + $this + .find('span.details').append('' + o.userCollapsePrefix + '' + o.userCollapseText + ''); + $this.find('span.re-collapse a').click(function() { + + clearTimeout(delayedCollapse); + var $detailsCollapsed = $(this).parents('span.details'); + reCollapse($detailsCollapsed); + o.onCollapse($this, true); + return false; + }); + } + }); + function reCollapse(el) { + el.hide() + .prev('span.read-more').show(); + } + function delayCollapse(option, $collapseEl) { + if (option.collapseTimer) { + delayedCollapse = setTimeout(function() { + reCollapse($collapseEl); + option.onCollapse($collapseEl.parent(), false); + }, + option.collapseTimer + ); + } + } + function rSlash(rString) { + return rString.replace(/\//,''); + } + }; + // plugin defaults + $.fn.expander.defaults = { + slicePoint: 100, // the number of characters at which the contents will be sliced into two parts. + // Note: any tag names in the HTML that appear inside the sliced element before + // the slicePoint will be counted along with the text characters. + widow: 4, // a threshold of sorts for whether to initially hide/collapse part of the element's contents. + // If after slicing the contents in two there are fewer words in the second part than + // the value set by widow, we won't bother hiding/collapsing anything. + expandText: 'read more', // text displayed in a link instead of the hidden part of the element. + // clicking this will expand/show the hidden/collapsed text + expandPrefix: '… ', + collapseTimer: 0, // number of milliseconds after text has been expanded at which to collapse the text again + expandEffect: 'fadeIn', + expandSpeed: '', // speed in milliseconds of the animation effect for expanding the text + userCollapse: true, // allow the user to re-collapse the expanded text. + userCollapseText: '[collapse expanded text]', // text to use for the link to re-collapse the text + userCollapsePrefix: ' ', + beforeExpand: function($thisEl) {}, + afterExpand: function($thisEl) {}, + onCollapse: function($thisEl, byUser) {} + }; +})(jQuery); diff --git a/spec/javascripts/stream-spec.js b/spec/javascripts/stream-spec.js index 4b0a16275..c7ecd19c0 100644 --- a/spec/javascripts/stream-spec.js +++ b/spec/javascripts/stream-spec.js @@ -2,6 +2,15 @@ * licensed under the Affero General Public License version 3 or later. See * the COPYRIGHT file. */ +function randomString(string_length) { + var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz "; + var randomstring = ''; + for (var i=0; i' + + '
' + + '

' + + randomString(1000) + + '

' + + '
' + + '' + ); + Stream.initialize(); + expect($(".details").css('display')).toEqual('none'); + expect($(".read-more a").css('display').toEqual('inline'); + expect($(".re-collapse a").css('display')).toEqual('none'); + $(".read-more a").click(); + jasmine.Clock.tick(200); + expect($(".read-more a").css('display').toEqual('none'); + expect($(".re-collapse a").css('display')).toEqual('inline'); + expect($(".details").css('display')).toEqual('inline'); + }); }); describe("toggleComments", function() { diff --git a/spec/javascripts/support/jasmine.yml b/spec/javascripts/support/jasmine.yml index 707fb41ad..db177e801 100644 --- a/spec/javascripts/support/jasmine.yml +++ b/spec/javascripts/support/jasmine.yml @@ -16,6 +16,7 @@ src_files: - public/javascripts/vendor/jquery.tipsy.js - public/javascripts/jquery.infieldlabel-custom.js - public/javascripts/vendor/jquery.autoresize.min.js + - public/javascripts/vendor/jquery.expander.js - public/javascripts/vendor/Mustache.js - public/javascripts/vendor/charCount.js - public/javascripts/vendor/timeago.js diff --git a/spec/models/status_message_spec.rb b/spec/models/status_message_spec.rb index 06a110824..02595164b 100644 --- a/spec/models/status_message_spec.rb +++ b/spec/models/status_message_spec.rb @@ -63,9 +63,9 @@ describe StatusMessage do db_status.text.should == message end - it 'should require status messages to be less than 1000 characters' do + it 'should require status messages to be less than 10000 characters' do message = '' - 1001.times do message = message +'1';end + 10001.times do message = message +'1';end status = Factory.build(:status_message, :text => message) status.should_not be_valid