Much smarter project note truncation

Fixes #780

app/helpers/notes_helper.rb

@@ -2,4 +2,8 @@ module NotesHelper
   def truncated_note(note, characters = 50)
     sanitize(textilize_without_paragraph(truncate(note.body, :length => characters, :omission => "...")))
   end
+
+  def rendered_note(note)
+    sanitize(textilize_without_paragraph(note.body))
+  end
 end

app/views/layouts/standard.html.erb

@@ -6,7 +6,8 @@
       'jquery.autocomplete', :cache => true %>
     <%= stylesheet_link_tag "print", :media => "print" %>
     <%= javascript_include_tag 'jquery','jquery-ui','jquery.cookie',
-      'jquery.blockUI','jquery.jeditable','jquery.autocomplete', :cache => 'jquery-all' %>
+      'jquery.blockUI','jquery.jeditable','jquery.autocomplete',
+      'jquery.truncator', :cache => 'jquery-all' %>
     <%= javascript_include_tag 'hoverIntent','superfish','application',
       'accesskey-hints','niftycube','flashobject', :cache => 'tracks' %>
     <%= javascript_tag "var AUTH_TOKEN = #{form_authenticity_token.inspect};" if protect_against_forgery? %>

app/views/notes/_notes_summary.rhtml

@@ -1,6 +1,6 @@
 <% note = notes_summary -%>
 <div class="note_wrapper" id="<%= dom_id(note) %>">
 <%= link_to( image_tag("blank.png", :border => 0), note_path(note), :title => "Show note", :class => "link_to_notes icon") %>&nbsp;
-<%= truncated_note(note) %>
+<%= rendered_note(note) %>
 </div>
 <% note = nil -%>

public/javascripts/application.js

@@ -289,6 +289,8 @@ $(document).ready(function() {
     $(this).next().toggle("fast"); return false;
   });
 
+  $('.note_wrapper').truncate({max_length: 90, more: '', less: ''});
+
   $(".show_successors").live('click', function () {
     $(this).next().toggle("fast"); return false;
   });

public/javascripts/jquery.truncator.js

@@ -0,0 +1,81 @@
+// HTML Truncator for jQuery
+// by Henrik Nyh <http://henrik.nyh.se> 2008-02-28.
+// modified by Eric Allen <http://hackerengineer.net> 2010-04-02
+// Free to modify and redistribute with credit.
+
+(function($) {
+
+  var trailing_whitespace = true;
+
+  $.fn.truncate = function(options) {
+
+    var opts = $.extend({}, $.fn.truncate.defaults, options);
+
+    $(this).each(function() {
+
+      var content_length = $.trim(squeeze($(this).text())).length;
+      if (content_length <= opts.max_length)
+        return;  // bail early if not overlong
+
+      var actual_max_length = opts.max_length - opts.more.length - 3;  // 3 for " ()"
+      var truncated_node = recursivelyTruncate(this, actual_max_length);
+      var full_node = $(this).hide();
+
+      truncated_node.insertAfter(full_node);
+
+      findNodeForMore(truncated_node).append('...');
+    });
+  }
+
+  // Note that the " (…more)" bit counts towards the max length – so a max
+  // length of 10 would truncate "1234567890" to "12 (…more)".
+  $.fn.truncate.defaults = {
+    max_length: 100,
+    more: '…more',
+    less: 'less'
+  };
+
+  function recursivelyTruncate(node, max_length) {
+    return (node.nodeType == 3) ? truncateText(node, max_length) : truncateNode(node, max_length);
+  }
+
+  function truncateNode(node, max_length) {
+    var node = $(node);
+    var new_node = node.clone().empty();
+    var truncatedChild;
+    node.contents().each(function() {
+      var remaining_length = max_length - new_node.text().length;
+      if (remaining_length == 0) return;  // breaks the loop
+      truncatedChild = recursivelyTruncate(this, remaining_length);
+      if (truncatedChild) new_node.append(truncatedChild);
+    });
+    return new_node;
+  }
+
+  function truncateText(node, max_length) {
+    var text = squeeze(node.data);
+    if (trailing_whitespace)  // remove initial whitespace if last text
+      text = text.replace(/^ /, '');  // node had trailing whitespace.
+    trailing_whitespace = !!text.match(/ $/);
+    var text = text.slice(0, max_length);
+    // Ensure HTML entities are encoded
+    // http://debuggable.com/posts/encode-html-entities-with-jquery:480f4dd6-13cc-4ce9-8071-4710cbdd56cb
+    text = $('<div/>').text(text).html();
+    return text;
+  }
+
+  // Collapses a sequence of whitespace into a single space.
+  function squeeze(string) {
+    return string.replace(/\s+/g, ' ');
+  }
+
+  // Finds the last, innermost block-level element
+  function findNodeForMore(node) {
+    var $node = $(node);
+    var last_child = $node.children(":last");
+    if (!last_child) return node;
+    var display = last_child.css('display');
+    if (!display || display=='inline') return $node;
+    return findNodeForMore(last_child);
+  };
+})(jQuery);