side-by-side diffs: use full power of mergerly whitespace and interactive merge modes

rhodecode/templates/files/diff_2way.html

@@ -1,80 +1,91 b''
 ## -*- coding: utf-8 -*-
 
 <%inherit file="/base/base.html"/>
 
 <%def name="js_extra()">
 <script type="text/javascript" src="${h.url('/js/jquery.1.10.1.min.js')}"></script>
 <script type="text/javascript" src="${h.url('/js/codemirror.js')}"></script>
 <script type="text/javascript" src="${h.url('/js/mergerly.js')}"></script>
 </%def>
 <%def name="css_extra()">
 <link rel="stylesheet" type="text/css" href="${h.url('/css/codemirror.css')}"/>
 <link rel="stylesheet" type="text/css" href="${h.url('/css/mergerly.css')}"/>
 </%def>
 
 <%def name="title()">
     ${_('%s File side-by-side diff') % c.repo_name} &middot; ${c.rhodecode_name}
 </%def>
 
 <%def name="breadcrumbs_links()">
     ${_('File diff')} r${c.changeset_1.revision}:${h.short_id(c.changeset_1.raw_id)} &rarr; r${c.changeset_2.revision}:${h.short_id(c.changeset_2.raw_id)}
 </%def>
 
 <%def name="page_nav()">
     ${self.menu('repositories')}
 </%def>
 
 <%def name="main()">
 ${self.repo_context_bar('changelog')}
 <div class="box">
     <!-- box / title -->
     <div class="title">
         ${self.breadcrumbs()}
     </div>
 
     <div class="diff-container" style="overflow-x: hidden">
         <div class="diffblock comm" style="margin:3px; padding:1px">
             <div class="code-header">
                 <div class="changeset_header">
                     <div class="changeset_file">
                         ${h.link_to(h.safe_unicode(c.node1.path),h.url('files_home',repo_name=c.repo_name,
                         revision=c.cs2.raw_id,f_path=h.safe_unicode(c.node1.path)))}
                     </div>
                     <div class="diff-actions">
                       <a href="${h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(c.node1.path),diff2=c.cs2.raw_id,diff1=c.cs1.raw_id,diff='diff',fulldiff=1)}" class="tooltip" title="${h.tooltip(_('Show full diff for this file'))}"><img class="icon" src="${h.url('/images/icons/page_white_go.png')}"/></a>
                       <a href="${h.url('files_diff_2way_home',repo_name=c.repo_name,f_path=h.safe_unicode(c.node1.path),diff2=c.cs2.raw_id,diff1=c.cs1.raw_id,diff='diff',fulldiff=1)}" class="tooltip" title="${h.tooltip(_('Show full side-by-side diff for this file'))}"><img class="icon" src="${h.url('/images/icons/application_double.png')}"/></a>
                       <a href="${h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(c.node1.path),diff2=c.cs2.raw_id,diff1=c.cs1.raw_id,diff='raw')}" class="tooltip" title="${h.tooltip(_('Raw diff'))}"><img class="icon" src="${h.url('/images/icons/page_white.png')}"/></a>
                       <a href="${h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(c.node1.path),diff2=c.cs2.raw_id,diff1=c.cs1.raw_id,diff='download')}" class="tooltip" title="${h.tooltip(_('Download diff'))}"><img class="icon" src="${h.url('/images/icons/page_save.png')}"/></a>
-                      ##${c.ignorews_url(request.GET, h.FID(c.cs2,path))}
-                      ##${c.context_url(request.GET, h.FID(c.cs2,path))}
+                      ${h.checkbox('ignorews', label=_('ignore white space'))}
+                      ${h.checkbox('edit_mode', label=_('turn on edit mode'))}
                     </div>
                 </div>
             </div>
             <div id="compare"></div>
         </div>
     </div>
 
 <script>
 var orig1 = '${(c.orig1)|n}';
 var orig2 = '${(c.orig2)|n}';
 
 $(document).ready(function () {
     $('#compare').mergely({
         width: 'auto',
         height: '600',
         fgcolor: {a:'#ddffdd',c:'#cccccc',d:'#ffdddd'},
         bgcolor: '#fff',
         viewport: true,
         cmsettings: {mode: 'text/plain', readOnly: true, lineWrapping: false, lineNumbers: true},
         lhs: function(setValue) {
             setValue(orig1);
         },
         rhs: function(setValue) {
             setValue(orig2);
         },
     });
+    $('#ignorews').change(function(e){
+        var val = e.currentTarget.checked;
+        $('#compare').mergely('options', {ignorews: val});
+        $('#compare').mergely('update');
+    })
+    $('#edit_mode').change(function(e){
+        var val = !e.currentTarget.checked;
+        $('#compare').mergely('cm', 'lhs').setOption('readOnly', val);
+        $('#compare').mergely('cm', 'rhs').setOption('readOnly', val);
+        $('#compare').mergely('update');
+    })
 });
 </script>
 
 </div>
 </%def>