kallithea Changeset - 2881dd265f21

Changeset - 2881dd265f21

Parent rev.

Child rev.

[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:

kallithea/templates/changelog/changelog_summary_data.html

kallithea/templates/followers/followers.html

kallithea/templates/followers/followers_data.html

kallithea/templates/forks/forks.html

kallithea/templates/forks/forks_data.html

kallithea/templates/journal/journal.html

kallithea/templates/journal/journal_data.html

kallithea/templates/summary/summary.html

0 comments (0 inline, 0 general)

kallithea/templates/changelog/changelog_summary_data.html

➞

Show inline comments

@@ @@ -27,91 +27,81 @@ @@
               %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

@@ @@ -290,49 +290,68 @@ @@
           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

@@ @@ -352,49 +352,60 @@ $(document).ready(function(){ @@
         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)