Retire vendored cacycle_diff.js for a diff-lcs-based diff view

Revisions#diff now computes an inline or side-by-side word diff
server-side (Page#diff_against, lib/html_word_diff.rb) instead of
shipping raw/escaped content to the browser for a 2008-era vendored
JS differ to mangle. View mode is picked via a `view` param, settable
either on the diff page itself or directly from the revisions#index
sticky bar next to "Diff revisions".

Also fixes a pre-existing bug in RevisionsController#diff's single-
revision branch, which set params[:start]/params[:end] instead of
params[:start_revision]/params[:end_revision].

4 files changed, 59 insertions, 55 deletions

diff --git a/app/controllers/revisions_controller.rb b/app/controllers/revisions_controller.rb
index 42d667e..9acb26f 100644
--- a/app/controllers/revisions_controller.rb
+++ b/app/controllers/revisions_controller.rb
@@ -13,16 +13,18 @@ class RevisionsController < ApplicationController
 
   def diff
     @node = Node.find(params[:node_id])
-    
+
     if @node.pages.length > 1
       params[:start_revision]  ||= @node.pages.all[-2].revision
       params[:end_revision]    ||= @node.pages.all[-1].revision
     else
-      params[:start], params[:end] = 1, 1
+      params[:start_revision], params[:end_revision] = 1, 1
     end
-    
-    @start  = @node.pages.find_by_revision( params[:start_revision] )
-    @end    = @node.pages.find_by_revision( params[:end_revision] )
+
+    @start      = @node.pages.find_by_revision( params[:start_revision] )
+    @end        = @node.pages.find_by_revision( params[:end_revision] )
+    @diff_view  = params[:view] == "side_by_side" ? :side_by_side : :inline
+    @diff       = @end.diff_against( @start, view: @diff_view )
   end
 
   def show
diff --git a/app/models/page.rb b/app/models/page.rb
index 1a98e08..ea04cd6 100644
--- a/app/models/page.rb
+++ b/app/models/page.rb
@@ -175,6 +175,22 @@ class Page < ApplicationRecord
     self.save
   end
 
+  def diff_against other, view: :inline
+    if view == :side_by_side
+      {
+        title:    HtmlWordDiff.side_by_side(other.title.to_s,    title.to_s),
+        abstract: HtmlWordDiff.side_by_side(other.abstract.to_s, abstract.to_s),
+        body:     HtmlWordDiff.side_by_side(other.body.to_s,     body.to_s)
+      }
+    else
+      {
+        title:    HtmlWordDiff.inline(other.title.to_s,    title.to_s),
+        abstract: HtmlWordDiff.inline(other.abstract.to_s, abstract.to_s),
+        body:     HtmlWordDiff.inline(other.body.to_s,     body.to_s)
+      }
+    end
+  end
+
   def public?
     published_at.nil? ? true : published_at < Time.now
   end
diff --git a/app/views/revisions/diff.html.erb b/app/views/revisions/diff.html.erb
index d8c6a47..d7bb528 100644
--- a/app/views/revisions/diff.html.erb
+++ b/app/views/revisions/diff.html.erb
@@ -7,58 +7,36 @@
 <%= form_tag diff_node_revisions_path do %>
   <%= select_tag :start_revision, options_for_select(@node.pages.map{|x| x.revision}, params[:start_revision].to_i) %>
   <%= select_tag :end_revision, options_for_select(@node.pages.map{|x| x.revision}, params[:end_revision].to_i) %>
+  <%= select_tag :view, options_for_select([['Inline', 'inline'], ['Side by side', 'side_by_side']], @diff_view) %>
   <%= submit_tag 'Diff' %>
 <% end %>
 
-<div id="start_title" style="display: none;">
-  <%= h(@start.title) %>
-</div>
-
-<div id="end_title" style="display: none;">
-  <%= h(@end.title) %>
-</div>
-
-<div id="start_abstract" style="display: none;">
-  <%= h(@start.abstract) %>
-</div>
-
-<div id="end_abstract" style="display: none;">
-  <%= h(@end.abstract) %>
-</div>
-
-<pre>
-  <div id="start_body" style="display: none;">
-    <%= (@start.body) %>
-  </div>
-</pre>
-<pre>
-  <div id="end_body" style="display: none;">
-    <%= (@end.body) %>
-  </div>
-</pre>
-
-<script src="/javascripts/cacycle_diff.js"></script>
-<script type="text/javascript" charset="utf-8">
-  window.onload = function() {
-    title1    = document.getElementById('start_title').innerHTML;
-    title2    = document.getElementById('end_title').innerHTML;
-    abstract1 = document.getElementById('start_abstract').innerHTML;
-    abstract2 = document.getElementById('end_abstract').innerHTML;
-    body1     = document.getElementById('start_body').innerHTML;
-    body2     = document.getElementById('end_body').innerHTML;
-    document.getElementById('diffview_title').innerHTML = WDiffString(title1, title2);
-    document.getElementById('diffview_abstract').innerHTML = WDiffString(abstract1, abstract2);
-    document.getElementById('diffview_body').innerHTML = WDiffString(body1, body2);
-  }
-</script>
-
 <div id="diffview">
-  <h3>Title</h3>
-  <p id="diffview_title"></p>
-  
-  <h3>Abstract</h3>
-  <p id="diffview_abstract"></p>
-  
-  <h3>Body</h3>
-  <p id="diffview_body"></p>
+  <% if @diff_view == :side_by_side %>
+    <div class="diff_side_by_side">
+      <div class="diff_column">
+        <h3>Title</h3>
+        <p><%= raw @diff[:title][0] %></p>
+        <h3>Abstract</h3>
+        <p><%= raw @diff[:abstract][0] %></p>
+        <h3>Body</h3>
+        <%= raw @diff[:body][0] %>
+      </div>
+      <div class="diff_column">
+        <h3>Title</h3>
+        <p><%= raw @diff[:title][1] %></p>
+        <h3>Abstract</h3>
+        <p><%= raw @diff[:abstract][1] %></p>
+        <h3>Body</h3>
+        <%= raw @diff[:body][1] %>
+      </div>
+    </div>
+  <% else %>
+    <h3>Title</h3>
+    <p><%= raw @diff[:title] %></p>
+    <h3>Abstract</h3>
+    <p><%= raw @diff[:abstract] %></p>
+    <h3>Body</h3>
+    <%= raw @diff[:body] %>
+  <% end %>
 </div>
diff --git a/app/views/revisions/index.html.erb b/app/views/revisions/index.html.erb
index a6a981a..58c08b7 100644
--- a/app/views/revisions/index.html.erb
+++ b/app/views/revisions/index.html.erb
@@ -19,6 +19,8 @@
               form: { id: 'diff_form', class: 'button_to computation' },
               disabled: true %>
         <span id="diff_selection_label"></span>
+        <label><%= radio_button_tag :view, 'inline', true %> Inline</label>
+        <label><%= radio_button_tag :view, 'side_by_side', false %> Side by side</label>
       </td>
     </tr>
   </thead>
@@ -68,6 +70,7 @@
   document.getElementById('diff_form').addEventListener('submit', function(e) {
     var start = document.querySelector('input[name="start_revision"]:checked');
     var end = document.querySelector('input[name="end_revision"]:checked');
+    var view = document.querySelector('input[name="view"]:checked');
     if (start) {
       var s = document.createElement('input');
       s.type = 'hidden'; s.name = 'start_revision'; s.value = start.value;
@@ -78,5 +81,10 @@
       en.type = 'hidden'; en.name = 'end_revision'; en.value = end.value;
       this.appendChild(en);
     }
+    if (view) {
+      var v = document.createElement('input');
+      v.type = 'hidden'; v.name = 'view'; v.value = view.value;
+      this.appendChild(v);
+    }
   });
 </script>