Mercurial > kallithea
view kallithea/templates/changeset/diff_block.html @ 8579:6f1e25144958
diff: fix "Show inline comments"
jQuery has weak "friendly" semantics for data attributes and do for example
interpret the data attribute name 'id_for' as 'idFor'. We could thus not
retrieve it as 'id_for'.
Instead, avoid the special semantics of '_' by just naming the data attribute
'for'.
author | Mads Kiilerich <mads@kiilerich.com> |
---|---|
date | Thu, 18 Jun 2020 16:08:36 +0200 |
parents | 0617a88e0daa |
children | 4bf9d7f18253 |
line wrap: on
line source
## -*- coding: utf-8 -*- <%def name="diff_block(a_repo_name, a_ref_type, a_ref_name, a_rev, cs_repo_name, cs_ref_name, cs_ref_type, cs_rev, file_diff_data)"> <div class="diff-collapse"> <button data-target="${'diff-container-%s' % (id(file_diff_data))}" class="diff-collapse-button btn btn-link btn-sm">↑ ${_('Collapse Diff')} ↑</button> </div> %for id_fid, url_fid, op, a_filename, cs_filename, diff, stats in file_diff_data: ${diff_block_diffblock(id_fid, url_fid, op, diff, a_repo_name, a_rev, a_ref_type, a_ref_name, a_filename, cs_repo_name, cs_rev, cs_ref_type, cs_ref_name, cs_filename, 'diff-container-%s' % id(file_diff_data))} %endfor </%def> <%def name="diff_block_diffblock(id_fid, url_fid, op, diff, a_repo_name, a_rev, a_ref_type, a_ref_name, a_filename, cs_repo_name, cs_rev, cs_ref_type, cs_ref_name, cs_filename, cls)" > <div id="${id_fid}_target"></div> <div id="${id_fid}" class="panel panel-default ${cls}"> <div class="panel-heading clearfix"> <div class="pull-left"> ${cs_filename} </div> <div class="pull-left diff-actions"> <span> %if op == 'A': <span class="no-file" data-toggle="tooltip" title="${_('No file before')}"> <i class="icon-minus-circled"></i></span> %else: <a href="${h.url('files_home', repo_name=a_repo_name, f_path=a_filename, revision=a_rev)}" data-toggle="tooltip" title="${_('File before')}"> <i class="icon-doc"></i></a> %endif %if op == 'A': <span class="arrow" data-toggle="tooltip" title="${_('Added')}">➞</span> %elif op == 'M': <span class="arrow" data-toggle="tooltip" title="${_('Modified')}">➞</span> %elif op == 'D': <span class="arrow" data-toggle="tooltip" title="${_('Deleted')}">➞</span> %elif op == 'R': <span class="arrow" data-toggle="tooltip" title="${_('Renamed')}">➞</span> %elif op is None: <span class="arrow" data-toggle="tooltip" title="${_('No change')}">➞</span> %else: <span class="arrow" data-toggle="tooltip" title="${_('Unknown operation: %r') % op}">➞</span> %endif %if op == 'D': <span class="no-file" data-toggle="tooltip" title="${_('No file after')}"> <i class="icon-minus-circled"></i></span> %else: <a href="${h.url('files_home', repo_name=cs_repo_name, f_path=cs_filename, revision=cs_rev)}" data-toggle="tooltip" title="${_('File after')}"> <i class="icon-doc"></i></a> %endif </span> <a href="${h.url('files_diff_home',repo_name=cs_repo_name,f_path=cs_filename,diff2=cs_rev,diff1=a_rev,diff='diff',fulldiff=1)}" data-toggle="tooltip" title="${_('Show full diff for this file')}"> <i class="icon-file-code"></i></a> <a href="${h.url('files_diff_2way_home',repo_name=cs_repo_name,f_path=cs_filename,diff2=cs_rev,diff1=a_rev,diff='diff',fulldiff=1)}" data-toggle="tooltip" title="${_('Show full side-by-side diff for this file')}"> <i class="icon-docs"></i></a> <a href="${h.url('files_diff_home',repo_name=cs_repo_name,f_path=cs_filename,diff2=cs_rev,diff1=a_rev,diff='raw')}" data-toggle="tooltip" title="${_('Raw diff for this file')}"> <i class="icon-diff"></i></a> <a href="${h.url('files_diff_home',repo_name=cs_repo_name,f_path=cs_filename,diff2=cs_rev,diff1=a_rev,diff='download')}" data-toggle="tooltip" title="${_('Download diff for this file')}"> <i class="icon-floppy"></i></a> ${c.ignorews_url(request.GET, url_fid)} ${c.context_url(request.GET, url_fid)} </div> <div class="pull-right"> ${_('Show inline comments')} ${h.checkbox('checkbox-show-inline-' + id_fid, checked="checked",class_="show-inline-comments",**{'data-for':id_fid})} </div> </div> <div class="no-padding panel-body" data-f_path="${cs_filename}"> ${diff|n} %if op and cs_filename.rsplit('.')[-1] in ['png', 'gif', 'jpg', 'bmp']: <div class="btn btn-image-diff-show">Show images</div> %if op == 'M': <div id="${id_fid}_image-diff" class="btn btn-image-diff-swap" style="display:none">Press to swap images</div> %endif <div> %if op in 'DM': <img id="${id_fid}_image-diff-img-a" class="img-diff img-diff-swapable" style="display:none" realsrc="${h.url('files_raw_home',repo_name=a_repo_name,revision=a_rev,f_path=a_filename)}" /> %endif %if op in 'AM': <img id="${id_fid}_image-diff-img-b" class="img-diff img-diff-swapable" style="display:none" realsrc="${h.url('files_raw_home',repo_name=cs_repo_name,revision=cs_rev,f_path=cs_filename)}" /> %endif </div> %endif </div> </div> </%def> <%def name="diff_block_js()"> <script>'use strict'; $(document).ready(function(){ $('.btn-image-diff-show').click(function(){ $('.btn-image-diff-show').hide(); $('.btn-image-diff-swap').show(); $('.img-diff-swapable') .each(function(i,e){ $(e).prop('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')); }); function reset(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); $('.diff-collapse-button').click(function(e) { $('.diff_block').toggleClass('hidden'); var $button = $(e.currentTarget); var $target = $('.' + $button.data('target')); if($target.hasClass('hidden')){ $target.removeClass('hidden'); $button.html("↑ {0} ↑".format(_TM['Collapse Diff'])); } else if(!$target.hasClass('hidden')){ $target.addClass('hidden'); $button.html("↓ {0} ↓".format(_TM['Expand Diff'])); } }); $('.show-inline-comments').change(function(e){ var target = e.currentTarget; if(target == null){ target = this; } var boxid = $(target).data('for'); if(target.checked){ $('#{0} .inline-comments'.format(boxid)).show(); }else{ $('#{0} .inline-comments'.format(boxid)).hide(); } }); }); </script> </%def>