Changeset - 2881dd265f21
[Not reviewed]
stable
0 8 0
Mads Kiilerich - 11 years ago 2015-04-28 16:45:43
madski@unity3d.com
templates: only bind pager event handlers once - avoid "leaks" and repeated page loads

Summary page ended up hammering the server and when pages were loaded one time
extra for each paging click.

Just moving javascript code from the data template (where it would be re-run on
each paging) and to the main page template.
8 files changed with 57 insertions and 54 deletions:
0 comments (0 inline, 0 general)
kallithea/templates/changelog/changelog_summary_data.html
Show inline comments
 
## -*- coding: utf-8 -*-
 
%if c.repo_changesets:
 
<table>
 
    <tr>
 
        <th class="left"></th>
 
        <th class="left"></th>
 
        <th class="left">${_('Revision')}</th>
 
        <th class="left">${_('Commit Message')}</th>
 
        <th class="left">${_('Age')}</th>
 
        <th class="left">${_('Author')}</th>
 
        <th class="left">${_('Refs')}</th>
 
    </tr>
 
%for cnt,cs in enumerate(c.repo_changesets):
 
    <tr class="parity${cnt%2}">
 
        <td class="compact">
 
            <div class="changeset-status-container">
 
              %if c.statuses.get(cs.raw_id):
 
                <div class="changeset-status-ico shortlog">
 
                %if c.statuses.get(cs.raw_id)[2]:
 
                  <a class="tooltip" title="${_('Changeset status: %s\nClick to open associated pull request #%s') % (c.statuses.get(cs.raw_id)[0], c.statuses.get(cs.raw_id)[2])}" href="${h.url('pullrequest_show',repo_name=c.statuses.get(cs.raw_id)[3],pull_request_id=c.statuses.get(cs.raw_id)[2])}">
 
                    <i class="icon-circle changeset-status-${c.statuses.get(cs.raw_id)[0]}"></i>
 
                  </a>
 
                %else:
 
                  <i class="icon-circle changeset-status-${c.statuses.get(cs.raw_id)[0]}"></i>
 
                %endif
 
                </div>
 
              %endif
 
            </div>
 
        </td>
 
        <td class="compact">
 
              %if c.comments.get(cs.raw_id,[]):
 
               <div class="comments-container">
 
                   <div title="${('comments')}">
 
                       <a href="${h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id,anchor='comment-%s' % c.comments[cs.raw_id][0].comment_id)}">
 
                          <i class="icon-comment"></i>${len(c.comments[cs.raw_id])}
 
                       </a>
 
                   </div>
 
               </div>
 
              %endif
 
        </td>
 
        <td>
 
            <a href="${h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id)}" class="revision-link">${h.show_id(cs)}</a>
 
        </td>
 
        <td>
 
            ${h.urlify_commit(h.chop_at(cs.message,'\n'),c.repo_name, h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id))}
 
        </td>
 
        <td><span class="tooltip" title="${h.tooltip(h.fmt_date(cs.date))}">
 
                      ${h.age(cs.date)}</span>
 
        </td>
 
        <td title="${cs.author}">${h.person(cs.author)}</td>
 
        <td>
 
            %if h.is_hg(c.db_repo_scm_instance):
 
                %for book in cs.bookmarks:
 
                    <div class="booktag" title="${_('Bookmark %s') % book}">
 
                        ${h.link_to(book,h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id))}
 
                    </div>
 
                %endfor
 
            %endif
 
            %for tag in cs.tags:
 
             <div class="tagtag" title="${_('Tag %s') % tag}">
 
                 ${h.link_to(tag,h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id))}
 
             </div>
 
            %endfor
 
            %if cs.branch:
 
             <div class="branchtag" title="${_('Branch %s' % cs.branch)}">
 
                 ${h.link_to(cs.branch,h.url('changelog_home',repo_name=c.repo_name,branch=cs.branch))}
 
             </div>
 
            %endif
 
        </td>
 
    </tr>
 
%endfor
 

	
 
</table>
 

	
 
<script type="text/javascript">
 
  $(document).ready(function(){
 
    var $shortlog_data = $('#shortlog_data');
 
    $shortlog_data.on('click','.pager_link',function(e){
 
      asynchtml(e.target.href, $shortlog_data, function(){tooltip_activate();});
 
      e.preventDefault();
 
    });
 
  });
 
</script>
 

	
 
<div class="pagination-wh pagination-left">
 
${c.repo_changesets.pager('$link_previous ~2~ $link_next')}
 
</div>
 
%else:
 

	
 
%if h.HasRepoPermissionAny('repository.write','repository.admin')(c.repo_name):
 
<h4>${_('Add or upload files directly via Kallithea')}</h4>
 
<div style="margin: 20px 30px;">
 
  <div id="add_node_id" class="add_node">
 
      <a class="btn btn-mini" href="${h.url('files_add_home',repo_name=c.repo_name,revision=0,f_path='', anchor='edit')}">${_('Add New File')}</a>
 
  </div>
 
</div>
 
%endif
 

	
 

	
 
<h4>${_('Push new repo')}</h4>
 
<pre>
 
    ${c.db_repo_scm_instance.alias} clone ${c.clone_repo_url}
 
    ${c.db_repo_scm_instance.alias} add README # add first file
 
    ${c.db_repo_scm_instance.alias} commit -m "Initial" # commit with message
 
    ${c.db_repo_scm_instance.alias} push ${'origin master' if h.is_git(c.db_repo_scm_instance) else ''} # push changes back
 
</pre>
 

	
 
<h4>${_('Existing repository?')}</h4>
 
<pre>
 
%if h.is_git(c.db_repo_scm_instance):
 
    git remote add origin ${c.clone_repo_url}
 
    git push -u origin master
 
%else:
 
    hg push ${c.clone_repo_url}
 
%endif
 
</pre>
 
%endif
kallithea/templates/followers/followers.html
Show inline comments
 
## -*- coding: utf-8 -*-
 
<%inherit file="/base/base.html"/>
 

	
 
<%block name="title">
 
    ${_('%s Followers') % c.repo_name}
 
</%block>
 

	
 
<%def name="breadcrumbs_links()">
 
    ${_('Followers')}
 
</%def>
 

	
 
<%block name="header_menu">
 
    ${self.menu('repositories')}
 
</%block>
 

	
 
<%def name="main()">
 
${self.repo_context_bar('followers')}
 
<div class="box">
 
    <!-- box / title -->
 
    <div class="title">
 
        ${self.breadcrumbs()}
 
    </div>
 
    <!-- end box / title -->
 
    <div class="table">
 
        <div id="followers">
 
            <%include file='followers_data.html'/>
 
        </div>
 
    </div>
 
</div>
 
<script type="text/javascript">
 
  $(document).ready(function(){
 
    var $followers = $('#followers');
 
    $followers.on('click','.pager_link',function(e){
 
        asynchtml(e.target.href, $followers, function(){
 
            show_more_event();
 
            tooltip_activate();
 
            show_changeset_tooltip();
 
        });
 
        e.preventDefault();
 
    });
 
  });
 
</script>
 
</%def>
kallithea/templates/followers/followers_data.html
Show inline comments
 
## -*- coding: utf-8 -*-
 

	
 
% for f in c.followers_pager:
 
    <div>
 
        <div class="follower_user">
 
            <div class="gravatar">
 
              ${h.gravatar(f.user.email, size=24)}
 
            </div>
 
            <span style="font-size: 20px"> <b>${f.user.username}</b> (${f.user.name} ${f.user.lastname})</span>
 
        </div>
 
        <div style="clear:both;padding-top: 10px"></div>
 
        <div class="follower_date">${_('Started following -')}
 
        <span class="tooltip" title="${h.tooltip(f.follows_from)}"> ${h.age(f.follows_from)}</span></div>
 
        <div style="border-bottom: 1px solid #DDD;margin:10px 0px 10px 0px"></div>
 
    </div>
 
% endfor
 

	
 
<div class="pagination-wh pagination-left">
 
<script type="text/javascript">
 
$(document).ready(function(){
 
    var $followers = $('#followers');
 
    $followers.on('click','.pager_link',function(e){
 
        asynchtml(e.target.href, $followers, function(){
 
            show_more_event();
 
            tooltip_activate();
 
            show_changeset_tooltip();
 
        });
 
        e.preventDefault();
 
    });
 
});
 
</script>
 
${c.followers_pager.pager('$link_previous ~2~ $link_next')}
 
</div>
kallithea/templates/forks/forks.html
Show inline comments
 
## -*- coding: utf-8 -*-
 
<%inherit file="/base/base.html"/>
 

	
 
<%block name="title">
 
    ${_('%s Forks') % c.repo_name}
 
</%block>
 

	
 
<%def name="breadcrumbs_links()">
 
    ${_('Forks')}
 
</%def>
 

	
 
<%block name="header_menu">
 
    ${self.menu('repositories')}
 
</%block>
 

	
 
<%def name="main()">
 
${self.repo_context_bar('showforks')}
 
<div class="box">
 
    <!-- box / title -->
 
    <div class="title">
 
        ${self.breadcrumbs()}
 
    </div>
 
    <!-- end box / title -->
 
    <div class="table">
 
        <div id="forks">
 
            <%include file='forks_data.html'/>
 
        </div>
 
    </div>
 
</div>
 
<script type="text/javascript">
 
  $(document).ready(function(){
 
      var $forks = $('#forks');
 
      $forks.on('click','.pager_link',function(e){
 
          asynchtml(e.target.href, $forks, function(){
 
              show_more_event();
 
              tooltip_activate();
 
              show_changeset_tooltip();
 
          });
 
          e.preventDefault();
 
      });
 
  });
 
</script>
 
</%def>
kallithea/templates/forks/forks_data.html
Show inline comments
 
## -*- coding: utf-8 -*-
 

	
 
% if c.forks_pager:
 
    % for f in c.forks_pager:
 
        <div>
 
            <div class="fork_user">
 
                <div class="gravatar">
 
                  ${h.gravatar(f.user.email, size=24)}
 
                </div>
 
                <span style="font-size: 20px">
 
                 <b>${f.user.username}</b> (${f.user.name} ${f.user.lastname}) /
 
                  ${h.link_to(f.repo_name,h.url('summary_home',repo_name=f.repo_name))}
 
                </span>
 
                <div style="padding:5px 3px 3px 42px;">${f.description}</div>
 
            </div>
 
            <div style="clear:both;padding-top: 10px"></div>
 
            <div class="follower_date">${_('Forked')} -
 
                <span class="tooltip" title="${h.tooltip(h.fmt_date(f.created_on))}"> ${h.age(f.created_on)}</span>
 
                <a title="${_('Compare fork with %s' % c.repo_name)}"
 
                   href="${h.url('compare_url',repo_name=c.repo_name, org_ref_type=c.db_repo.landing_rev[0],org_ref_name=c.db_repo.landing_rev[1],other_repo=f.repo_name,other_ref_type=c.db_repo.landing_rev[0],other_ref_name=c.db_repo.landing_rev[1], merge=1)}"
 
                   class="btn btn-small"><i class="icon-git-compare"></i> ${_('Compare Fork')}</a>
 
            </div>
 
            <div style="border-bottom: 1px solid #DDD;margin:10px 0px 10px 0px"></div>
 
        </div>
 
    % endfor
 
  <div class="pagination-wh pagination-left">
 
  <script type="text/javascript">
 
  $(document).ready(function(){
 
      var $forks = $('#forks');
 
      $forks.on('click','.pager_link',function(e){
 
          asynchtml(e.target.href, $forks, function(){
 
              show_more_event();
 
              tooltip_activate();
 
              show_changeset_tooltip();
 
          });
 
          e.preventDefault();
 
      });
 
  });
 
  </script>
 
  ${c.forks_pager.pager('$link_previous ~2~ $link_next')}
 
  </div>
 
% else:
 
    ${_('There are no forks yet')}
 
% endif
kallithea/templates/journal/journal.html
Show inline comments
 
@@ -242,97 +242,116 @@
 
    function table_renderer(data){
 
        var myDataSource = new YAHOO.util.DataSource(data);
 
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
 

	
 
        myDataSource.responseSchema = {
 
            resultsList: "records",
 
            fields: [
 
               {key:"menu"},
 
               {key:"raw_name"},
 
               {key:"name"},
 
               {key:"last_changeset"},
 
               {key:"last_rev_raw"},
 
               {key:"action"}
 
            ]
 
         };
 
        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;
 
            }
 
            return res;
 
        }
 
        // main table sorting
 
        var myColumnDefs = [
 
            {key:"menu",label:"",sortable:false,className:"quick_repo_menu hidden"},
 
            {key:"name",label:"${_('Name')}",sortable:true,
 
                sortOptions: { sortFunction: nameSort }},
 
            {key:"last_changeset",label:"${_('Tip')}",sortable:true,
 
                sortOptions: { sortFunction: revisionSort }},
 
            {key:"action",label:"${_('Action')}",sortable:false}
 
        ];
 

	
 
        var myDataTable = new YAHOO.widget.DataTable("repos_list_wrap", myColumnDefs, myDataSource,{
 
          sortedBy:{key:"name",dir:"asc"},
 
          paginator: YUI_paginator(25, ['user-paginator']),
 

	
 
          MSG_SORTASC:"${_('Click to sort ascending')}",
 
          MSG_SORTDESC:"${_('Click to sort descending')}",
 
          MSG_EMPTY:"${_('No records found.')}",
 
          MSG_ERROR:"${_('Data error.')}",
 
          MSG_LOADING:"${_('Loading...')}"
 
        }
 
        );
 
        myDataTable.subscribe('postRenderEvent',function(oArgs) {
 
            tooltip_activate();
 
            quick_repo_menu();
 
        });
 

	
 
        var filterTimeout = null;
 

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

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

	
 
            // Get filtered data
 
            myDataSource.sendRequest(YUD.get('q_filter').value,{
 
                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(){
 
            clearTimeout(filterTimeout);
 
            filterTimeout = setTimeout(updateFilter,600);
 
        });
 

	
 
        if($('#q_filter').val()) {
 
            updateFilter();
 
        }
 
    }
 

	
 
    </script>
 

	
 
<script type="text/javascript">
 
    $(document).ready(function(){
 
        var $journal = $('#journal');
 
        $journal.on('click','.pager_link',function(e){
 
            asynchtml(e.target.href, $journal, function(){
 
                show_more_event();
 
                tooltip_activate();
 
                show_changeset_tooltip();
 
            });
 
            e.preventDefault();
 
        });
 
        $('#journal').on('click','.show_more',function(e){
 
            var el = e.target;
 
            $('#'+el.id.substring(1)).show();
 
            $(el.parentNode).hide();
 
        });
 
    });
 
</script>
 
</%def>
kallithea/templates/journal/journal_data.html
Show inline comments
 
## -*- coding: utf-8 -*-
 

	
 
%if c.journal_day_aggreagate:
 
    %for day,items in c.journal_day_aggreagate:
 
     <div class="journal_day">${day}</div>
 
        % for user,entries in items:
 
            <div class="journal_container">
 
                <div class="gravatar">
 
                    ${h.gravatar(user.email if user else 'anonymous@kallithea-scm.org', size=24)}
 
                </div>
 
                %if user:
 
                    <div class="journal_user">${user.name} ${user.lastname}</div>
 
                %else:
 
                    <div class="journal_user deleted">${entries[0].username}</div>
 
                %endif
 
                <div class="journal_action_container">
 
                % for entry in entries:
 
                    <div class="journal_icon"> ${h.action_parser(entry)[2]()}</div>
 
                    <div class="journal_action">${h.action_parser(entry)[0]()}</div>
 
                    <div class="journal_repo">
 
                        <span class="journal_repo_name">
 
                        %if entry.repository is not None:
 
                          ${h.link_to(entry.repository.repo_name,
 
                                      h.url('summary_home',repo_name=entry.repository.repo_name))}
 
                        %else:
 
                          ${entry.repository_name}
 
                        %endif
 
                        </span>
 
                    </div>
 
                    <div class="journal_action_params">${h.literal(h.action_parser(entry)[1]())}</div>
 
                    <div class="date"><span class="tooltip" title="${h.tooltip(h.fmt_date(entry.action_date))}">${h.age(entry.action_date)}</span></div>
 
                %endfor
 
                </div>
 
            </div>
 
        %endfor
 
    %endfor
 

	
 
  <div class="pagination-wh pagination-left" style="padding: 0px 0px 0px 10px;">
 
  ${c.journal_pager.pager('$link_previous ~2~ $link_next')}
 
  </div>
 
    <script type="text/javascript">
 
    $(document).ready(function(){
 
        var $journal = $('#journal');
 
        $journal.on('click','.pager_link',function(e){
 
            asynchtml(e.target.href, $journal, function(){
 
                show_more_event();
 
                tooltip_activate();
 
                show_changeset_tooltip();
 
            });
 
            e.preventDefault();
 
        });
 
        $('#journal').on('click','.show_more',function(e){
 
            var el = e.target;
 
            $('#'+el.id.substring(1)).show();
 
            $(el.parentNode).hide();
 
        });
 
    });
 
    </script>
 
%else:
 
  <div style="padding:5px 0px 10px 10px;">
 
      ${_('No entries yet')}
 
  </div>
 
%endif
kallithea/templates/summary/summary.html
Show inline comments
 
@@ -304,97 +304,108 @@ $(document).ready(function(){
 
             url = url.replace('__NAME__',title_tmpl);
 

	
 
             s.html(url)
 
           }
 
       }
 
    });
 

	
 
    var tmpl_links = {};
 
    %for cnt,archive in enumerate(c.db_repo_scm_instance._get_archives()):
 
      tmpl_links["${archive['type']}"] = '${h.link_to('__NAME__', h.url('files_archive_home',repo_name=c.db_repo.repo_name, fname='__CS__'+archive['extension'],subrepos='__SUB__'),class_='btn btn-small')}';
 
    %endfor
 
})
 
</script>
 

	
 
%if c.show_stats:
 
<script type="text/javascript">
 
$(document).ready(function(){
 
    var data = ${c.trending_languages|n};
 
    var total = 0;
 
    var no_data = true;
 
    var tbl = document.createElement('table');
 
    tbl.setAttribute('class','trending_language_tbl');
 
    var cnt = 0;
 
    for (var i=0;i<data.length;i++){
 
        total+= data[i][1].count;
 
    }
 
    for (var i=0;i<data.length;i++){
 
        cnt += 1;
 
        no_data = false;
 

	
 
        var hide = cnt>2;
 
        var tr = document.createElement('tr');
 
        if (hide){
 
            tr.setAttribute('style','display:none');
 
            tr.setAttribute('class','stats_hidden');
 
        }
 
        var k = data[i][0];
 
        var obj = data[i][1];
 
        var percentage = Math.round((obj.count/total*100),2);
 

	
 
        var td1 = document.createElement('td');
 
        td1.width = 150;
 
        var trending_language_label = document.createElement('div');
 
        trending_language_label.innerHTML = obj.desc+" ("+k+")";
 
        td1.appendChild(trending_language_label);
 

	
 
        var td2 = document.createElement('td');
 
        td2.setAttribute('style','padding-right:14px !important');
 
        var trending_language = document.createElement('div');
 
        var nr_files = obj.count+" ${_('files')}";
 

	
 
        trending_language.title = k+" "+nr_files;
 

	
 
        if (percentage>22){
 
            trending_language.innerHTML = "<b style='font-size:0.8em'>"+percentage+"% "+nr_files+ "</b>";
 
        }
 
        else{
 
            trending_language.innerHTML = "<b style='font-size:0.8em'>"+percentage+"%</b>";
 
        }
 

	
 
        trending_language.setAttribute("class", 'trending_language top-right-rounded-corner bottom-right-rounded-corner');
 
        trending_language.style.width=percentage+"%";
 
        td2.appendChild(trending_language);
 

	
 
        tr.appendChild(td1);
 
        tr.appendChild(td2);
 
        tbl.appendChild(tr);
 
        if(cnt == 3){
 
            var show_more = document.createElement('tr');
 
            var td = document.createElement('td');
 
            lnk = document.createElement('a');
 

	
 
            lnk.href='#';
 
            lnk.innerHTML = "${_('Show more')}";
 
            lnk.id='code_stats_show_more';
 
            td.appendChild(lnk);
 

	
 
            show_more.appendChild(td);
 
            show_more.appendChild(document.createElement('td'));
 
            tbl.appendChild(show_more);
 
        }
 

	
 
    }
 
    if (data.length == 0) {
 
        tbl.innerHTML = "<tr><td>${_('No data ready yet')}</td></tr>";
 
    }
 

	
 
    $('#lang_stats').append(tbl);
 
    $('#code_stats_show_more').click(function(){
 
        $('.stats_hidden').show();
 
        $('#code_stats_show_more').hide();
 
    });
 
});
 
</script>
 
%endif
 

	
 
## Shortlog paging
 
<script type="text/javascript">
 
  $(document).ready(function(){
 
    var $shortlog_data = $('#shortlog_data');
 
    $shortlog_data.on('click','.pager_link',function(e){
 
      asynchtml(e.target.href, $shortlog_data, function(){tooltip_activate();});
 
      e.preventDefault();
 
    });
 
  });
 
</script>
 

	
 
</%def>
0 comments (0 inline, 0 general)