Changeset - e8229d389948
[Not reviewed]
default
0 2 0
Mads Kiilerich - 10 years ago 2016-01-05 16:55:52
madski@unity3d.com
js: move .diff-collapse-button handling from the global base.js to the special diff js

Move it where it belongs and avoid adding more stuff to the global js later.
2 files changed with 13 insertions and 17 deletions:
0 comments (0 inline, 0 general)
kallithea/public/js/base.js
Show inline comments
 
@@ -1723,209 +1723,192 @@ var YUI_paginator = function(links_per_p
 
                }
 

	
 
                var par   = this.current ? this.current.parentNode : null,
 
                    after = this.link;
 
                if (par) {
 

	
 
                    // only show the last page if the rightmost one is
 
                    // lower, so we don't have doubled entries at the end
 
                    if (!(this.rightmost_page < p.getTotalPages())){
 
                        after = this.span
 
                    }
 

	
 
                    if (this.current !== after) {
 
                        par.replaceChild(after,this.current);
 
                        this.current = after;
 
                    }
 
                }
 
                this.current.innerHTML = this.paginator.getTotalPages();
 

	
 
            },
 
            destroy : function () {
 
                YUE.purgeElement(this.link);
 
                this.current.parentNode.removeChild(this.current);
 
                this.link = this.span = null;
 
            },
 
            onClick : function (e) {
 
                YUE.stopEvent(e);
 
                this.paginator.setPage(this.paginator.getTotalPages());
 
            }
 
        };
 

	
 
        })();
 

	
 
    var pagi = new YAHOO.widget.Paginator({
 
        rowsPerPage: links_per_page,
 
        alwaysVisible: false,
 
        template : "{PreviousPageLink} {MyFirstPageLink} {PageLinks} {MyLastPageLink} {NextPageLink}",
 
        pageLinks: 5,
 
        containerClass: 'pagination-wh',
 
        currentPageClass: 'pager_curpage',
 
        pageLinkClass: 'pager_link',
 
        nextPageLinkLabel: '&gt;',
 
        previousPageLinkLabel: '&lt;',
 
        containers:containers
 
    });
 

	
 
    return pagi
 
}
 

	
 
var YUI_datatable = function(data, fields, columns, countnode, sortkey, rows){
 
    var myDataSource = new YAHOO.util.DataSource(data);
 
    myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
 
    myDataSource.responseSchema = {
 
        resultsList: "records",
 
        fields: fields
 
        };
 
    myDataSource.doBeforeCallback = function(req, raw, res, cb) {
 
        // This is the filter function
 
        var data     = res.results || [],
 
            filtered = [],
 
            i, l;
 

	
 
        if (req) {
 
            req = req.toLowerCase();
 
            for (i = 0; i<data.length; i++) {
 
                var pos = data[i].raw_name.toLowerCase().indexOf(req);
 
                if (pos != -1) {
 
                    filtered.push(data[i]);
 
                }
 
            }
 
            res.results = filtered;
 
        }
 
        $(countnode).html(res.results.length);
 
        return res;
 
    }
 

	
 
    var myDataTable = new YAHOO.widget.DataTable("datatable_list_wrap", columns, myDataSource, {
 
        sortedBy: {key:sortkey, dir:"asc"},
 
        paginator: YUI_paginator(rows !== undefined && rows ? rows : 25, ['user-paginator']),
 
        MSG_SORTASC: _TM['MSG_SORTASC'],
 
        MSG_SORTDESC: _TM['MSG_SORTDESC'],
 
        MSG_EMPTY: _TM['MSG_EMPTY'],
 
        MSG_ERROR: _TM['MSG_ERROR'],
 
        MSG_LOADING: _TM['MSG_LOADING']
 
        });
 
    myDataTable.subscribe('postRenderEvent',function(oArgs) {
 
        tooltip_activate();
 
        quick_repo_menu();
 
        });
 

	
 
    var filterTimeout = null;
 
    var $q_filter = $('#q_filter');
 

	
 
    var updateFilter = function () {
 
        // Reset timeout
 
        filterTimeout = null;
 

	
 
        // Reset sort
 
        var state = myDataTable.getState();
 
        state.sortedBy = {key:sortkey, dir:YAHOO.widget.DataTable.CLASS_ASC};
 

	
 
        // Get filtered data
 
        myDataSource.sendRequest($q_filter.val(), {
 
            success : myDataTable.onDataReturnInitializeTable,
 
            failure : myDataTable.onDataReturnInitializeTable,
 
            scope   : myDataTable,
 
            argument: state});
 
        };
 

	
 
    $q_filter.click(function(){
 
            if(!$q_filter.hasClass('loaded')){
 
                //TODO: load here full list later to do search within groups
 
                $q_filter.addClass('loaded');
 
            }
 
        });
 

	
 
    $q_filter.keyup(function (e) {
 
            clearTimeout(filterTimeout);
 
            filterTimeout = setTimeout(updateFilter, 600);
 
        });
 
}
 

	
 
/**
 
 Branch Sorting callback for select2, modifying the filtered result so prefix
 
 matches come before matches in the line.
 
 **/
 
var branchSort = function(results, container, query) {
 
    if (query.term) {
 
        return results.sort(function (a, b) {
 
            // Put closed branches after open ones (a bit of a hack ...)
 
            var aClosed = a.text.indexOf("(closed)") > -1,
 
                bClosed = b.text.indexOf("(closed)") > -1;
 
            if (aClosed && !bClosed) {
 
                return 1;
 
            }
 
            if (bClosed && !aClosed) {
 
                return -1;
 
            }
 

	
 
            // Put prefix matches before matches in the line
 
            var aPos = a.text.toLowerCase().indexOf(query.term.toLowerCase()),
 
                bPos = b.text.toLowerCase().indexOf(query.term.toLowerCase());
 
            if (aPos === 0 && bPos !== 0) {
 
                return -1;
 
            }
 
            if (bPos === 0 && aPos !== 0) {
 
                return 1;
 
            }
 

	
 
            // Default sorting
 
            if (a.text > b.text) {
 
                return 1;
 
            }
 
            if (a.text < b.text) {
 
                return -1;
 
            }
 
            return 0;
 
        });
 
    }
 
    return results;
 
};
 

	
 
var prefixFirstSort = function(results, container, query) {
 
    if (query.term) {
 
        return results.sort(function (a, b) {
 
            // if parent node, no sorting
 
            if (a.children != undefined || b.children != undefined) {
 
                return 0;
 
            }
 

	
 
            // Put prefix matches before matches in the line
 
            var aPos = a.text.toLowerCase().indexOf(query.term.toLowerCase()),
 
                bPos = b.text.toLowerCase().indexOf(query.term.toLowerCase());
 
            if (aPos === 0 && bPos !== 0) {
 
                return -1;
 
            }
 
            if (bPos === 0 && aPos !== 0) {
 
                return 1;
 
            }
 

	
 
            // Default sorting
 
            if (a.text > b.text) {
 
                return 1;
 
            }
 
            if (a.text < b.text) {
 
                return -1;
 
            }
 
            return 0;
 
        });
 
    }
 
    return results;
 
};
 

	
 
// global hooks after DOM is loaded
 

	
 
$(document).ready(function(){
 
    $('.diff-collapse-button').click(function(e) {
 
        var $button = $(e.currentTarget);
 
        var $target = $('#' + $button.attr('target'));
 
        if($target.hasClass('hidden')){
 
            $target.removeClass('hidden');
 
            $button.html("&uarr; {0} &uarr;".format(_TM['Collapse Diff']));
 
        }
 
        else if(!$target.hasClass('hidden')){
 
            $target.addClass('hidden');
 
            $button.html("&darr; {0} &darr;".format(_TM['Expand Diff']));
 
        }
 
    });
 
});
kallithea/templates/changeset/diff_block.html
Show inline comments
 
## -*- coding: utf-8 -*-
 
##usage:
 
## <%namespace name="diff_block" file="/changeset/diff_block.html"/>
 
## ${diff_block.diff_block(change)}
 
##
 
<%def name="diff_block(change)">
 
<div class="diff-collapse">
 
    <span target="${'diff-container-%s' % (id(change))}" class="diff-collapse-button">&uarr; ${_('Collapse Diff')} &uarr;</span>
 
</div>
 
<div class="diff-container" id="${'diff-container-%s' % (id(change))}">
 
%for FID,(cs1, cs2, change, path, diff, stats) in change.iteritems():
 
    <div id="${FID}_target" style="clear:both;margin-top:25px"></div>
 
    <div id="${FID}" class="diffblock  margined comm">
 
        <div class="code-header">
 
            <div class="changeset_header">
 
                <div class="changeset_file">
 
                    ${h.link_to_if(change!='D',h.safe_unicode(path),h.url('files_home',repo_name=c.repo_name,
 
                    revision=cs2,f_path=h.safe_unicode(path)))}
 
                </div>
 
                <div class="diff-actions">
 
                  <a href="${h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(path),diff2=cs2,diff1=cs1,diff='diff',fulldiff=1)}" class="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=c.repo_name,f_path=h.safe_unicode(path),diff2=cs2,diff1=cs1,diff='diff',fulldiff=1)}" class="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=c.repo_name,f_path=h.safe_unicode(path),diff2=cs2,diff1=cs1,diff='raw')}" class="tooltip" title="${_('Raw diff')}">
 
                      <i class="icon-diff"></i>
 
                  </a>
 
                  <a href="${h.url('files_diff_home',repo_name=c.repo_name,f_path=h.safe_unicode(path),diff2=cs2,diff1=cs1,diff='download')}" class="tooltip" title="${_('Download diff')}">
 
                      <i class="icon-floppy"></i>
 
                  </a>
 
                  ${c.ignorews_url(request.GET, h.FID(cs2,path))}
 
                  ${c.context_url(request.GET, h.FID(cs2,path))}
 
                </div>
 
                <span style="float:right;margin-top:-3px">
 
                  <label>
 
                  ${_('Show inline comments')}
 
                  ${h.checkbox('',checked="checked",class_="show-inline-comments",id_for=h.FID(cs2,path))}
 
                  </label>
 
                </span>
 
            </div>
 
        </div>
 
        <div class="code-body full_f_path" data-f_path="${h.safe_unicode(path)}">
 
            ${diff|n}
 
            %if path.rsplit('.')[-1] in ['png', 'gif', 'jpg', 'bmp']:
 
              <div class="btn btn-image-diff-show">Show images</div>
 
              %if change =='M':
 
                <div id="${FID}_image-diff" class="btn btn-image-diff-swap" style="display:none">Press to swap images</div>
 
              %endif
 
              <div style="font-size: 0">
 
                %if change in 'DM':
 
                  <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)}" />
 
                %endif
 
                %if change in 'AM':
 
                  <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)}" />
 
                %endif
 
              </div>
 
            %endif
 
        </div>
 
    </div>
 
%endfor
 
</div>
 
</%def>
 

	
 
<%def name="diff_block_simple(files, changes)">
 
  %for fid, ch, f, stat in files:
 
    <%
 
    op, filenode_path, diff = changes[fid]
 
    %>
 
    <div id="${h.FID('',filenode_path)}_target" style="clear:both;margin-top:25px"></div>
 
    <div id="${h.FID('',filenode_path)}" class="diffblock  margined comm">
 
      <div class="code-header">
 
          <div class="changeset_header">
 
              <div class="changeset_file">
 
                  ${h.safe_unicode(filenode_path)} |
 
                  ## TODO: link to ancestor and head of other instead of exactly other
 
                  %if op == 'A':
 
                    ${_('Added')}
 
                    <a class="spantag" href="${h.url('files_home', repo_name=c.cs_repo.repo_name, f_path=filenode_path, revision=c.cs_rev)}">${h.short_ref(c.cs_ref_type, c.cs_ref_name)}</a>
 
                  %elif op == 'M':
 
                    <a class="spantag" href="${h.url('files_home', repo_name=c.a_repo.repo_name, f_path=filenode_path, revision=c.a_rev)}">${h.short_ref(c.a_ref_type, c.a_ref_name)}</a>
 
                    <i class="icon-right"></i>
 
                    <a class="spantag" href="${h.url('files_home', repo_name=c.cs_repo.repo_name, f_path=filenode_path, revision=c.cs_rev)}">${h.short_ref(c.cs_ref_type, c.cs_ref_name)}</a>
 
                  %elif op == 'D':
 
                    ${_('Deleted')}
 
                    <a class="spantag" href="${h.url('files_home', repo_name=c.a_repo.repo_name, f_path=filenode_path, revision=c.a_rev)}">${h.short_ref(c.a_ref_type, c.a_ref_name)}</a>
 
                  %elif op == 'R':
 
                    ${_('Renamed')}
 
                    <a class="spantag" href="${h.url('files_home', repo_name=c.a_repo.repo_name, f_path=filenode_path, revision=c.a_rev)}">${h.short_ref(c.a_ref_type, c.a_ref_name)}</a>
 
                    <i class="icon-right"></i>
 
                    <a class="spantag" href="${h.url('files_home', repo_name=c.cs_repo.repo_name, f_path=filenode_path, revision=c.cs_rev)}">${h.short_ref(c.cs_ref_type, c.cs_ref_name)}</a>
 
                  %else:
 
                    ${op}???
 
                  %endif
 
              </div>
 
              <div class="diff-actions">
 
                <a href="${h.url('files_diff_2way_home',repo_name=c.cs_repo.repo_name,f_path=h.safe_unicode(filenode_path),diff1=c.a_rev,diff2=c.cs_rev,diff='diff',fulldiff=1)}" class="tooltip" title="${_('Show full side-by-side diff for this file')}">
 
                  <i class="icon-docs"></i>
 
                </a>
 
                ${c.ignorews_url(request.GET)}
 
                ${c.context_url(request.GET)}
 
              </div>
 
          </div>
 
      </div>
 
        <div class="code-body full_f_path" data-f_path="${h.safe_unicode(filenode_path)}">
 
            ${diff|n}
 
            %if filenode_path.rsplit('.')[-1] in ['png', 'gif', 'jpg', 'bmp']:
 
              <div class="btn btn-image-diff-show">Show images</div>
 
              %if op == 'M':
 
                <div id="${h.FID('',filenode_path)}_image-diff" class="btn btn-image-diff-swap" style="display:none">Press to swap images</div>
 
              %endif
 
              <div style="font-size: 0">
 
                %if op in 'DM':
 
                  <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.a_repo.repo_name,revision=c.a_rev,f_path=filenode_path) if op in 'DM' else ''}" />
 
                %endif
 
                %if op in 'AM':
 
                  <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.cs_repo.repo_name,revision=c.cs_rev,f_path=filenode_path) if op in 'AM' else ''}" />
 
                %endif
 
              </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).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'));
 
    });
 
    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);
 

	
 
    $('.diff-collapse-button').click(function(e) {
 
        var $button = $(e.currentTarget);
 
        var $target = $('#' + $button.attr('target'));
 
        if($target.hasClass('hidden')){
 
            $target.removeClass('hidden');
 
            $button.html("&uarr; {0} &uarr;".format(_TM['Collapse Diff']));
 
        }
 
        else if(!$target.hasClass('hidden')){
 
            $target.addClass('hidden');
 
            $button.html("&darr; {0} &darr;".format(_TM['Expand Diff']));
 
        }
 
    });
 
});
 
</script>
 
</%def>
0 comments (0 inline, 0 general)