publiclab/plots2

<div class="col-lg-5">
  <% if !@node.nil? %>

    <h3 id="wiki-title" style="margin-top:0;"><%= raw translation('wiki.revisions.revisions_for', :wiki => @node.title) %></h3>

    <ul class="nav nav-tabs">
      <li class="nav-item"><a class="nav-link" href="/wiki/<%= @node.slug_from_path %>"><%= translation('wiki.revisions.view') %></a></li>
      <li class="nav-item"><a class="nav-link" href="/wiki/edit/<%= @node.slug_from_path %>"><%= translation('wiki.revisions.edit') %></a></li>
      <li class="nav-item"><a class="nav-link active" href="/wiki/revisions/<%= @node.slug_from_path %>"><%= translation('wiki.revisions.revisions') %> (<%= @node.revisions.length %>)</a></li>
      <!--<li class="pull-right"><%= render :partial => "home/social" %></li>-->
    </ul>

    <table class="table">
    <% @revisions.each_with_index do |revision, index| %>
      <tr id="row<%= @node.revisions.length-1-index %>"<% if index < 2 %> class="warning"<% end %><% if revision.status == 0 %> style="background:#fcc;"<% end %>>

        <td><b>
          <a href="javascript:void(0)" onClick="goto(<%= @node.revisions.length-1-index %>,<%= @node.revisions.length-2-index %>)"><%= @node.revisions.length-1-index %></a>
          <% if revision.status == 0 %><span class="badge badge-danger"><%= translation('wiki.revisions.moderated') %></span><% end %>
          <% if revision.vid == @node.latest.vid %><span class="badge badge-success"><%= translation('wiki.revisions.current') %></span><% end %>
        </b></td>

        <% if revision.author %><td><a href="/profile/<%= revision.author.name %>"><%= revision.author.name %></a></td><% end %>

        <td>
          <a href="/wiki/revisions/<%= params[:id] %>/<%= revision.vid %>"><%= revision.created_at.to_s(:long) %></a>
          <i class="fa fa-external-link"></i>
      | <%= distance_of_time_in_words(revision.created_at, Time.current, { include_seconds: false, scope: 'datetime.time_ago_in_words' }) %>
          <div style="display:none;" id="body_<%= @node.revisions.length-1-index %>"><%= raw RDiscount.new(revision.body).to_html %></div>
        </td>
        <td><small><a class="btn btn-sm btn-outline-secondary btn-revert" href="/wiki/revert/<%= revision.vid %>" data-confirm="<%= translation('wiki.revisions.are_you_sure',{},false) %>"><i class="fa fa-arrow-reload"></i> <%= translation('wiki.revisions.revert') %></a></small></td>
        <% if logged_in_as(['admin', 'moderator']) %>
          <% if revision.status == 1 %>
            <td><small><a class='btn btn-sm btn-outline-secondary' data-toggle="tooltip" title="Mark as Spam" data-placement="top" href='/moderate/revision/spam/<%= revision.vid %>' data-confirm="<%= translation('wiki.revisions.are_you_sure',{},false) %>"><i class='fa fa-ban'></i></a></small></td>
          <% elsif revision.status == 0 %>
            <td><small><a class='btn btn-sm btn-outline-secondary' href='/moderate/revision/publish/<%= revision.vid %>'><i class='fa fa-plus-circle'></i> <%= translation('wiki.revisions.republish') %></a></small></td>
          <% end %>
        <% end %>

        <td><small><a class="btn btn-sm btn-outline-secondary" data-toggle="tooltip" title="Raw Content" data-placement="top" href="/wiki/raw/<%= revision.vid %>"><i class="fa fa-code"></i></a></small></td>

      </tr>
    <% end %>
    </table>

   <hr />
   <% if @pagy_revisions %>
   <%= raw pagy_bootstrap_nav(@pagy_revisions) if @paginated %>
   <% else %>
   <%= will_paginate @revisions, renderer: WillPaginate::ActionView::BootstrapLinkRenderer if @paginated %>
   <% end %>
</div>
  <div class="col-lg-7">
    <div class="btn-group float-right">
      <a class="btn btn-link" data-toggle="tooltip" title="Previous" data-placement="left" href="javascript:void(0)" onClick="prev()">&laquo;</a>
      <a class="btn btn-link" data-toggle="tooltip" title="Next" data-placement="right" href="javascript:void(0)" onClick="next()">&raquo;</a>
    </div>
    <h3 style="margin-top:0;"><%= raw translation('wiki.revisions.comparing_revision', :revision_1 => @node.revisions.length-1, :revision_2 => @node.revisions.length-2) %></h3>
    <div class="card bg-light">
        <div class="card-body" id="diff">
        </div>
    </div>

    <style>
      del { background:#faa; }
      ins { background:#afa; }
    </style>

    <script>

      var newer = <%= @node.revisions.length - 1 %>,
          older = <%= @node.revisions.length - 2 %>;

      function prev() {
        if (older > 0) {
          older -= 1;
          newer -= 1;
          goto(newer, older);
        }
        console.log('prev', newer, older);
      }

      function next() {
        if (newer < <%= @node.revisions.length-1 %>) {
          older += 1;
          newer += 1;
          goto(newer, older);
        }
        console.log('next', newer, older);
      }

      function goto(newer, older) {

        $('#newer').html(newer);
        $('#older').html(older);
        older_str = $('#body_' + older).html();
        newer_str = $('#body_' + newer).html();

        if(older_str != null && newer_str != null) {

          $('#diff').html(diffString(older_str, newer_str));
          $('tr').removeClass('warning');
          $('#row' + older).addClass('warning');
          $('#row' + newer).addClass('warning');

        }

      }

      jQuery(document).ready(function() {

        $('#diff').html(
          diffString(
            $('#body_' + older).html(),
            $('#body_' + newer).html()
          )
        );

        $(document).keydown(function(e){
          if (e.keyCode == 39) next();
          if (e.keyCode == 37) prev();
        })

      });

    </script>

  <% end %>
</div>