versions-diff: included js to radio_button control and adjusts on look-and-feel

AI2822

versions-diff: included js to radio_button control and adjusts on look-and-feel
AI2822
Junior Silva
1 parent 2253cc66
Showing 3 changed files with 108 additions and 10 deletions Show diff stats
app/controllers/public/content_viewer_controller.rb
app/views/content_viewer/article_versions.rhtml
public/stylesheets/application.css
@@ -127,7 +127,7 @@ class ContentViewerController &lt; ApplicationController
   def versions_diff
     path = params[:page].join('/')
     @page = profile.articles.find_by_path(path)
-    @v1, @v2 = @page.versions.find_by_version(params[:v1]).body, @page.versions.find_by_version(params[:v2]).body
+    @v1, @v2 = @page.versions.find_by_version(params[:v1]), @page.versions.find_by_version(params[:v2])
     p params
   end
@@ -2,20 +2,54 @@
 <p><%= _('This is the list of all versions of this content. Select a version to see it and then revert to it.') %>.</p>
-<% form_tag({:controller => 'content_viewer', :action => 'versions_diff', :profile => profile.identifier, :page => @page.path.split('/')}) do %>
-  <ul class='article-versions'>
+<% form_tag({:controller => 'content_viewer', :action => 'versions_diff', :profile => profile.identifier, :page => @page.path.split('/')}, :method => 'get') do %>
+  <ul id="article-versions">
     <% @versions.each do |v| %>
-      <li> 
-        <%= radio_button_tag 'v1', v.version %> 
-        <%= radio_button_tag 'v2', v.version %>
+      <li>
+        <%= radio_button_tag 'v1', v.version, false, :onclick => 'versionInputClicked(this)' %>
+        <%= radio_button_tag 'v2', v.version, false, :onclick => 'versionInputClicked(this)' %>
         <%= link_to(_("Version #{v.version}"), @page.url.merge(:version => v.version)) %>
         <%= @page.version == v.version ? _('(current)') : '' %>
         <span class='updated-by'><%= _('by %{author}') % {:author => link_to(@page.author_name(v.version), @page.author_url)} %></span>
-        <div class='updated-on'><%= show_time(v.updated_at) %></div>
+        <span class='updated-on'><%= show_time(v.updated_at) %></span>
       </li>
     <% end %>
   </ul>
-  <%= submit_button(:search, _('Show differences between selected versions')) %>
+<script>
+  function versionInputClicked(input) {
+    var selectedColumn = input.name;
+    var sisterColumn = (selectedColumn == 'v1') ? 'v2' : 'v1';
+    var li = input.parentNode;
+    var checkedBrotherLi = jQuery('#article-versions input[name=' + sisterColumn + ']:checked').parent()[0];
+    updateColumn(selectedColumn, li);
+    updateColumn(sisterColumn, checkedBrotherLi); 
+  }
+
+  function updateColumn(selectedColumn, startLi){
+    var sisterColumn = (selectedColumn == 'v1') ? 'v2' : 'v1';
+    var walkMethod = (selectedColumn == 'v1') ? 'prev' : 'next';
+    var li = startLi;
+    var foundCheckedBrother = false;
+    while(li = jQuery(li)[walkMethod]()[0]) {
+      li.className = '';
+      if (!foundCheckedBrother){
+        li.className = 'selected';
+        foundCheckedBrother = jQuery('input[name=' + sisterColumn + ']', li)[0].checked;
+      }
+      jQuery('input[name=' + selectedColumn + ']', li)[0].disabled = foundCheckedBrother;
+    }
+  }
+
+  var penultVersion = jQuery('#article-versions input[name=v1]')[1];
+  var lastVersion = jQuery('#article-versions input[name=v2]')[0];
+  jQuery('#article-versions input').attr('disabled', false);
+  if (penultVersion && lastVersion) {
+    penultVersion.checked = lastVersion.checked = true;
+    lastVersion.onclick();
+  }
+</script> 
+  <%= submit_button(:clock, _('Show differences between selected versions')) %>
 <% end %>
 <%= pagination_links @versions, :param_name => 'npage' %>
+
@@ -6539,7 +6539,71 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
   z-index: 1;
 }
-ul.article-versions li {
-  font-size: 13px;
+#article-versions {
+  margin: 0 0 15px 0;
+  padding: 0;
+}
+
+#article-versions li {
+  list-style: none;
+  margin: 0;
   padding: 3px 0px;
 }
+
+#article-versions input:disabled {
+  opacity: 0.3;
+}
+
+#article-versions .selected {
+  background: #ff9;
+}
+
+.action-content_viewer-versions_diff .diff {
+  text-align: justify;
+}
+
+.diff ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.diff del, .diff ins {
+  display: block;
+  text-decoration: none;
+}
+
+.diff li {
+  padding: 5px 10px; 
+  margin: 0;
+  line-height: 150%;
+}
+
+.diff li.ins {
+  background: #dfd;
+}
+
+.diff li.del {
+  background: #fee;
+}
+
+.diff li.ins:hover {
+  background: #8f8;
+}
+
+.diff li.del:hover {
+  background: #f99;
+}
+
+.diff strong {
+  background: rgba(255, 255, 0, 0.2);
+}
+
+.diff li.diff-comment { 
+  display: none; 
+}
+
+.diff li.diff-block-info { 
+  background: none repeat scroll 0 0 gray;
+}
+
	@@ -127,7 +127,7 @@ class ContentViewerController < ApplicationController		@@ -127,7 +127,7 @@ class ContentViewerController < ApplicationController
127	def versions_diff	127	def versions_diff
128	path = params[:page].join('/')	128	path = params[:page].join('/')
129	@page = profile.articles.find_by_path(path)	129	@page = profile.articles.find_by_path(path)
130	- @v1, @v2 = @page.versions.find_by_version(params[:v1]).body, @page.versions.find_by_version(params[:v2]).body	130	+ @v1, @v2 = @page.versions.find_by_version(params[:v1]), @page.versions.find_by_version(params[:v2])
131	p params	131	p params
132	end	132	end
133		133
	@@ -2,20 +2,54 @@		@@ -2,20 +2,54 @@
2		2
3	<p><%= _('This is the list of all versions of this content. Select a version to see it and then revert to it.') %>.</p>	3	<p><%= _('This is the list of all versions of this content. Select a version to see it and then revert to it.') %>.</p>
4		4
5	-<% form_tag({:controller => 'content_viewer', :action => 'versions_diff', :profile => profile.identifier, :page => @page.path.split('/')}) do %>
6	- <ul class='article-versions'>	5	+<% form_tag({:controller => 'content_viewer', :action => 'versions_diff', :profile => profile.identifier, :page => @page.path.split('/')}, :method => 'get') do %>
		6	+ <ul id="article-versions">
7	<% @versions.each do \|v\| %>	7	<% @versions.each do \|v\| %>
8	- <li>
9	- <%= radio_button_tag 'v1', v.version %>
10	- <%= radio_button_tag 'v2', v.version %>	8	+ <li>
		9	+ <%= radio_button_tag 'v1', v.version, false, :onclick => 'versionInputClicked(this)' %>
		10	+ <%= radio_button_tag 'v2', v.version, false, :onclick => 'versionInputClicked(this)' %>
11	<%= link_to(_("Version #{v.version}"), @page.url.merge(:version => v.version)) %>	11	<%= link_to(_("Version #{v.version}"), @page.url.merge(:version => v.version)) %>
12	<%= @page.version == v.version ? _('(current)') : '' %>	12	<%= @page.version == v.version ? _('(current)') : '' %>
13	<span class='updated-by'><%= _('by %{author}') % {:author => link_to(@page.author_name(v.version), @page.author_url)} %></span>	13	<span class='updated-by'><%= _('by %{author}') % {:author => link_to(@page.author_name(v.version), @page.author_url)} %></span>
14	- <div class='updated-on'><%= show_time(v.updated_at) %></div>	14	+ <span class='updated-on'><%= show_time(v.updated_at) %></span>
15	</li>	15	</li>
16	<% end %>	16	<% end %>
17	</ul>	17	</ul>
18		18
19	- <%= submit_button(:search, _('Show differences between selected versions')) %>	19	+<script>
		20	+ function versionInputClicked(input) {
		21	+ var selectedColumn = input.name;
		22	+ var sisterColumn = (selectedColumn == 'v1') ? 'v2' : 'v1';
		23	+ var li = input.parentNode;
		24	+ var checkedBrotherLi = jQuery('#article-versions input[name=' + sisterColumn + ']:checked').parent()[0];
		25	+ updateColumn(selectedColumn, li);
		26	+ updateColumn(sisterColumn, checkedBrotherLi);
		27	+ }
		28	+
		29	+ function updateColumn(selectedColumn, startLi){
		30	+ var sisterColumn = (selectedColumn == 'v1') ? 'v2' : 'v1';
		31	+ var walkMethod = (selectedColumn == 'v1') ? 'prev' : 'next';
		32	+ var li = startLi;
		33	+ var foundCheckedBrother = false;
		34	+ while(li = jQuery(li)[walkMethod]()[0]) {
		35	+ li.className = '';
		36	+ if (!foundCheckedBrother){
		37	+ li.className = 'selected';
		38	+ foundCheckedBrother = jQuery('input[name=' + sisterColumn + ']', li)[0].checked;
		39	+ }
		40	+ jQuery('input[name=' + selectedColumn + ']', li)[0].disabled = foundCheckedBrother;
		41	+ }
		42	+ }
		43	+
		44	+ var penultVersion = jQuery('#article-versions input[name=v1]')[1];
		45	+ var lastVersion = jQuery('#article-versions input[name=v2]')[0];
		46	+ jQuery('#article-versions input').attr('disabled', false);
		47	+ if (penultVersion && lastVersion) {
		48	+ penultVersion.checked = lastVersion.checked = true;
		49	+ lastVersion.onclick();
		50	+ }
		51	+</script>
		52	+ <%= submit_button(:clock, _('Show differences between selected versions')) %>
20	<% end %>	53	<% end %>
21	<%= pagination_links @versions, :param_name => 'npage' %>	54	<%= pagination_links @versions, :param_name => 'npage' %>
		55	+
	@@ -6539,7 +6539,71 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {		@@ -6539,7 +6539,71 @@ li.profile-activity-item.upload_image .activity-gallery-images-count-1 img {
6539	z-index: 1;	6539	z-index: 1;
6540	}	6540	}
6541		6541
6542	-ul.article-versions li {
6543	- font-size: 13px;	6542	+#article-versions {
		6543	+ margin: 0 0 15px 0;
		6544	+ padding: 0;
		6545	+}
		6546	+
		6547	+#article-versions li {
		6548	+ list-style: none;
		6549	+ margin: 0;
6544	padding: 3px 0px;	6550	padding: 3px 0px;
6545	}	6551	}
		6552	+
		6553	+#article-versions input:disabled {
		6554	+ opacity: 0.3;
		6555	+}
		6556	+
		6557	+#article-versions .selected {
		6558	+ background: #ff9;
		6559	+}
		6560	+
		6561	+.action-content_viewer-versions_diff .diff {
		6562	+ text-align: justify;
		6563	+}
		6564	+
		6565	+.diff ul {
		6566	+ list-style: none;
		6567	+ margin: 0;
		6568	+ padding: 0;
		6569	+}
		6570	+
		6571	+.diff del, .diff ins {
		6572	+ display: block;
		6573	+ text-decoration: none;
		6574	+}
		6575	+
		6576	+.diff li {
		6577	+ padding: 5px 10px;
		6578	+ margin: 0;
		6579	+ line-height: 150%;
		6580	+}
		6581	+
		6582	+.diff li.ins {
		6583	+ background: #dfd;
		6584	+}
		6585	+
		6586	+.diff li.del {
		6587	+ background: #fee;
		6588	+}
		6589	+
		6590	+.diff li.ins:hover {
		6591	+ background: #8f8;
		6592	+}
		6593	+
		6594	+.diff li.del:hover {
		6595	+ background: #f99;
		6596	+}
		6597	+
		6598	+.diff strong {
		6599	+ background: rgba(255, 255, 0, 0.2);
		6600	+}
		6601	+
		6602	+.diff li.diff-comment {
		6603	+ display: none;
		6604	+}
		6605	+
		6606	+.diff li.diff-block-info {
		6607	+ background: none repeat scroll 0 0 gray;
		6608	+}
		6609	+