# HG changeset patch
# User Mads Kiilerich <madski@unity3d.com>
# Date 2014-08-01 20:28:42
# Node ID e457b951aabe0186d5393239093e6fbd0e47e276
# Parent  47e54cf3047bcb6ecfcc8ce3e0e206ca8d4e5452

diff: option for showing images

diff --git a/kallithea/public/css/style.css b/kallithea/public/css/style.css
--- a/kallithea/public/css/style.css
+++ b/kallithea/public/css/style.css
@@ -5122,6 +5122,17 @@ div.comment:target>.comment-wrapp {
     margin: -2px;
 }
 
+.btn-image-diff-show,
+.btn-image-diff-swap {
+    margin: 5px;
+}
+
+.img-diff {
+    max-width: 45%;
+    height: auto;
+    margin: 5px;
+}
+
 .img-preview {
     max-width: 100%;
     height: auto;
diff --git a/kallithea/templates/changeset/changeset.html b/kallithea/templates/changeset/changeset.html
--- a/kallithea/templates/changeset/changeset.html
+++ b/kallithea/templates/changeset/changeset.html
@@ -157,6 +157,7 @@ ${self.repo_context_bar('changelog', c.c
 
     ## diff block
     <%namespace name="diff_block" file="/changeset/diff_block.html"/>
+    ${diff_block.diff_block_js()}
     ${diff_block.diff_block(c.changes[c.changeset.raw_id])}
 
     % if c.limited_diff:
diff --git a/kallithea/templates/changeset/changeset_range.html b/kallithea/templates/changeset/changeset_range.html
--- a/kallithea/templates/changeset/changeset_range.html
+++ b/kallithea/templates/changeset/changeset_range.html
@@ -75,7 +75,8 @@ ${self.repo_context_bar('changelog')}
     </div>
     <%namespace name="comment" file="/changeset/changeset_file_comment.html"/>
     <%namespace name="diff_block" file="/changeset/diff_block.html"/>
-     %for cs in c.cs_ranges:
+    ${diff_block.diff_block_js()}
+    %for cs in c.cs_ranges:
           ##${comment.comment_inline_form(cs)}
           ## diff block
           <div class="h3">
@@ -109,6 +110,6 @@ ${self.repo_context_bar('changelog')}
            </div>
           ${diff_block.diff_block(c.changes[cs.raw_id])}
 
-     %endfor
-    </div>
+    %endfor
+</div>
 </%def>
diff --git a/kallithea/templates/changeset/diff_block.html b/kallithea/templates/changeset/diff_block.html
--- a/kallithea/templates/changeset/diff_block.html
+++ b/kallithea/templates/changeset/diff_block.html
@@ -44,6 +44,17 @@
         <div class="code-body">
             <div class="full_f_path" path="${h.safe_unicode(path)}"></div>
             ${diff|n}
+            %if path.rsplit('.')[-1] in ['png', 'gif', 'jpg', 'bmp']:
+              <div class="btn btn-image-diff-show">Show images</div>
+              <div id="${FID}_image-diff" class="btn btn-image-diff-swap" style="display:none">Press to swap images</div>
+              <div>
+                <img id="${FID}_image-diff-img-a" class="img-diff img-diff-swapable" style="display:none"
+                    realsrc="${h.url('files_raw_home',repo_name=c.repo_name,revision=cs1,f_path=path) if change in 'DM' else ''}"
+                /><img id="${FID}_image-diff-img-b" class="img-diff img-diff-swapable" style="display:none"
+                    realsrc="${h.url('files_raw_home',repo_name=c.repo_name,revision=cs2,f_path=path) if change in 'AM' else ''}"
+                />
+              </div>
+            %endif
         </div>
     </div>
 %endfor
@@ -88,7 +99,45 @@
         <div class="code-body">
             <div class="full_f_path" path="${h.safe_unicode(filenode_path)}"></div>
             ${diff|n}
+            %if filenode_path.rsplit('.')[-1] in ['png', 'gif', 'jpg', 'bmp']:
+              <div class="btn btn-image-diff-show">Show images</div>
+              <div id="${h.FID('',filenode_path)}_image-diff" class="btn btn-image-diff-swap" style="display:none">Press to swap images</div>
+              <div>
+                <img id="${h.FID('',filenode_path)}_image-diff-img-a" class="img-diff img-diff-swapable" style="display:none"
+                    realsrc="${h.url('files_raw_home',repo_name=c.repo_name,revision=c.org_rev,f_path=filenode_path) if op in 'DM' else ''}"
+                /><img id="${h.FID('',filenode_path)}_image-diff-img-b" class="img-diff img-diff-swapable" style="display:none"
+                    realsrc="${h.url('files_raw_home',repo_name=c.repo_name,revision=c.other_rev,f_path=filenode_path) if op in 'AM' else ''}"
+                />
+              </div>
+            %endif
         </div>
     </div>
   %endfor
 </%def>
+
+<%def name="diff_block_js()">
+<script type="text/javascript">
+$(document).ready(function(){
+    $('.btn-image-diff-show').click(function(e){
+        $('.btn-image-diff-show').hide();
+        $('.btn-image-diff-swap').show();
+        $('.img-diff-swapable')
+            .each(function(i,e){
+                    $(e).attr('src', $(e).attr('realsrc'));
+                })
+            .show();
+        });
+    
+    $('.btn-image-diff-swap').mousedown(function(e){
+        $('#'+e.currentTarget.id+'-img-a.img-diff-swapable')
+          .before($('#'+e.currentTarget.id+'-img-b.img-diff-swapable'));
+    });
+    var reset = function(e){
+        $('#'+e.currentTarget.id+'-img-a.img-diff-swapable')
+          .after($('#'+e.currentTarget.id+'-img-b.img-diff-swapable'));
+    };
+    $('.btn-image-diff-swap').mouseup(reset);
+    $('.btn-image-diff-swap').mouseleave(reset);
+});
+</script>
+</%def>
diff --git a/kallithea/templates/compare/compare_diff.html b/kallithea/templates/compare/compare_diff.html
--- a/kallithea/templates/compare/compare_diff.html
+++ b/kallithea/templates/compare/compare_diff.html
@@ -81,6 +81,7 @@ ${self.repo_context_bar('changelog')}
 
         ## diff block
         <%namespace name="diff_block" file="/changeset/diff_block.html"/>
+        ${diff_block.diff_block_js()}
         %for fid, change, f, stat in c.files:
           ${diff_block.diff_block_simple([c.changes[fid]])}
         %endfor
diff --git a/kallithea/templates/files/file_diff.html b/kallithea/templates/files/file_diff.html
--- a/kallithea/templates/files/file_diff.html
+++ b/kallithea/templates/files/file_diff.html
@@ -25,6 +25,7 @@ ${self.repo_context_bar('changelog')}
     <div>
     ## diff block
     <%namespace name="diff_block" file="/changeset/diff_block.html"/>
+    ${diff_block.diff_block_js()}
     ${diff_block.diff_block(c.changes)}
     </div>
 </div>
diff --git a/kallithea/templates/pullrequests/pullrequest_show.html b/kallithea/templates/pullrequests/pullrequest_show.html
--- a/kallithea/templates/pullrequests/pullrequest_show.html
+++ b/kallithea/templates/pullrequests/pullrequest_show.html
@@ -307,6 +307,7 @@ ${self.repo_context_bar('showpullrequest
 
     ## diff block
     <%namespace name="diff_block" file="/changeset/diff_block.html"/>
+    ${diff_block.diff_block_js()}
     %for fid, change, f, stat in c.files:
       ${diff_block.diff_block_simple([c.changes[fid]])}
     %endfor