changelog: re-render branch graph on page resize

When the browser size has been changed, the dots may no longer be correctly
aligned with the table rows. Currently, the graph will just overflow without
changing size, but that can soon change.

kallithea/templates/changelog/changelog.html

@@ -1,329 +1,333 b''
 ## -*- coding: utf-8 -*-
 
 <%inherit file="/base/base.html"/>
 
 <%block name="title">
     ${_('%s Changelog') % c.repo_name}
     %if c.changelog_for_path:
       /${c.changelog_for_path}
     %endif
 </%block>
 
 <%def name="breadcrumbs_links()">
     <% size = c.size if c.size <= c.total_cs else c.total_cs %>
     ${_('Changelog')}
     %if c.changelog_for_path:
      - /${c.changelog_for_path}
     %endif
     %if c.revision:
     @ ${h.short_id(c.first_revision.raw_id)}
     %endif
     - ${ungettext('showing %d out of %d revision', 'showing %d out of %d revisions', size) % (size, c.total_cs)}
 </%def>
 
 <%block name="header_menu">
     ${self.menu('repositories')}
 </%block>
 
 <%def name="main()">
 ${self.repo_context_bar('changelog', c.first_revision.raw_id if c.first_revision else None)}
 <div class="panel panel-primary">
     <div class="panel-heading clearfix">
         ${self.breadcrumbs()}
     </div>
     <div class="panel-body changelog-panel">
         %if c.pagination:
                 <div class="changelog-heading clearfix" style="${'display:none' if c.changelog_for_path else ''}">
                     <div class="pull-left">
                         ${h.form(h.url.current(),method='get',class_="form-inline")}
                             ${h.submit('set',_('Show'),class_="btn btn-default btn-sm")}
                             ${h.text('size',size=3,value=c.size,class_='form-control')}
                             ${_('revisions')}
                             %if c.branch_name:
                                 ${h.hidden('branch', c.branch_name)}
                             %endif
                             <a href="#" class="btn btn-default btn-sm" id="rev_range_clear" style="display:none">${_('Clear selection')}</a>
                         ${h.end_form()}
                     </div>
                     <div class="pull-right">
                         <a href="#" class="btn btn-default btn-sm" id="rev_range_container" style="display:none"></a>
                         %if c.revision:
                             <a class="btn btn-default btn-sm" href="${h.url('changelog_home', repo_name=c.repo_name)}">
                                 ${_('Go to tip of repository')}
                             </a>
                         %endif
                         %if c.db_repo.fork:
                             <a id="compare_fork"
                                title="${_('Compare fork with %s' % c.db_repo.fork.repo_name)}"
                                href="${h.url('compare_url',repo_name=c.db_repo.fork.repo_name,org_ref_type=c.db_repo.landing_rev[0],org_ref_name=c.db_repo.landing_rev[1],other_repo=c.repo_name,other_ref_type='branch' if request.GET.get('branch') else c.db_repo.landing_rev[0],other_ref_name=request.GET.get('branch') or c.db_repo.landing_rev[1], merge=1)}"
                                class="btn btn-default btn-sm"><i class="icon-git-compare"></i> ${_('Compare fork with parent repository (%s)' % c.db_repo.fork.repo_name)}</a>
                         %endif
                         ## text and href of open_new_pr is controlled from javascript
                         <a id="open_new_pr" class="btn btn-default btn-sm"></a>
                         ${_("Branch filter:")} ${h.select('branch_filter',c.branch_name,c.branch_filters)}
                     </div>
                 </div>
 
                 <div id="graph_nodes">
                     <canvas id="graph_canvas" style="width:0"></canvas>
                 </div>
                 <div id="graph_content" style="${'margin: 0px' if c.changelog_for_path else ''}">
 
                 <table class="table" id="changesets">
                 <tbody>
                 %for cnt,cs in enumerate(c.pagination):
                     <tr id="chg_${cnt+1}" class="container ${'mergerow' if len(cs.parents) > 1 else ''}">
                         <td class="checkbox-column">
                             %if c.changelog_for_path:
                                 ${h.checkbox(cs.raw_id,class_="changeset_range", disabled="disabled")}
                             %else:
                                 ${h.checkbox(cs.raw_id,class_="changeset_range")}
                             %endif
                         <td class="status">
                           %if c.statuses.get(cs.raw_id):
                             <div class="changeset-status-ico">
                             %if c.statuses.get(cs.raw_id)[2]:
                               <a data-toggle="tooltip" title="${_('Changeset status: %s by %s\nClick to open associated pull request %s') % (c.statuses.get(cs.raw_id)[1], c.statuses.get(cs.raw_id)[5].username, c.statuses.get(cs.raw_id)[4])}" 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:
                               <a data-toggle="tooltip" title="${_('Changeset status: %s by %s') % (c.statuses.get(cs.raw_id)[1], c.statuses.get(cs.raw_id)[5].username)}"
                                  href="${c.comments[cs.raw_id][0].url()}">
                                   <i class="icon-circle changeset-status-${c.statuses.get(cs.raw_id)[0]}"></i>
                               </a>
                             %endif
                             </div>
                           %endif
                         </td>
                         <td class="author">
                             ${h.gravatar(h.email_or_none(cs.author), size=16)}
                             <span data-toggle="tooltip" title="${cs.author}" class="user">${h.shorter(h.person(cs.author),22)}</span>
                         </td>
                         <td class="hash">
                             ${h.link_to(h.show_id(cs),h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id), class_='changeset_hash')}
                         </td>
                         <td class="date">
                             <div class="date" data-toggle="tooltip" title="${h.fmt_date(cs.date)}">${h.age(cs.date,True)}</div>
                         </td>
                         <td class="expand_commit" data-commit_id="${cs.raw_id}" title="${_('Expand commit message')}">
                             <i class="icon-align-left"></i>
                         </td>
                         <td class="mid">
                             <div class="log-container">
                                 <div class="message" id="C-${cs.raw_id}">${h.urlify_text(cs.message, c.repo_name,h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id))}</div>
                                 <div class="extra-container">
                                     %if c.comments.get(cs.raw_id):
                                         <div class="comments-container">
                                             <div class="comments-cnt" data-toggle="tooltip" title="${_('Changeset has comments')}">
                                                 <a href="${c.comments[cs.raw_id][0].url()}">
                                                     ${len(c.comments[cs.raw_id])}
                                                     <i class="icon-comment-discussion"></i>
                                                 </a>
                                             </div>
                                         </div>
                                     %endif
                                     %if cs.bumped:
                                         <span class="bumpedtag" title="Bumped">
                                             Bumped
                                         </span>
                                     %endif
                                     %if cs.divergent:
                                         <span class="divergenttag" title="Divergent">
                                             Divergent
                                         </span>
                                     %endif
                                     %if cs.extinct:
                                         <span class="extincttag" title="Extinct">
                                             Extinct
                                         </span>
                                     %endif
                                     %if cs.unstable:
                                         <span class="unstabletag" title="Unstable">
                                             Unstable
                                         </span>
                                     %endif
                                     %if cs.phase:
                                         <span class="phasetag" title="Phase">
                                             ${cs.phase}
                                         </span>
                                     %endif
                                     %if h.is_hg(c.db_repo_scm_instance):
                                         %for book in cs.bookmarks:
                                             <span class="booktag" title="${_('Bookmark %s') % book}">
                                                 ${h.link_to(book,h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id))}
                                             </span>
                                         %endfor
                                     %endif
                                     %for tag in cs.tags:
                                         <span class="tagtag" title="${_('Tag %s') % tag}">
                                             ${h.link_to(tag,h.url('changeset_home',repo_name=c.repo_name,revision=cs.raw_id))}
                                         </span>
                                     %endfor
                                     %if (not c.branch_name) and cs.branch:
                                         <span class="branchtag" title="${_('Branch %s' % cs.branch)}">
                                             ${h.link_to(cs.branch,h.url('changelog_home',repo_name=c.repo_name,branch=cs.branch))}
                                         </span>
                                     %endif
                                 </div>
                             </div>
                         </td>
                     </tr>
                 %endfor
                 </tbody>
                 </table>
 
                 <input type="checkbox" id="singlerange" style="display:none"/>
 
                 </div>
 
                 <ul class="pagination">
                     ${c.pagination.pager()}
                 </ul>
 
         <script type="text/javascript" src="${h.url('/js/graph.js', ver=c.kallithea_version)}"></script>
         <script type="text/javascript">
+            var jsdata = ${h.js(c.jsdata)};
+            var graph = new BranchRenderer('graph_canvas', 'graph_content', 'chg_');
+
             $(document).ready(function(){
                 var $checkboxes = $('.changeset_range');
 
                 pyroutes.register('changeset_home', ${h.js(h.url('changeset_home', repo_name='%(repo_name)s', revision='%(revision)s'))}, ['repo_name', 'revision']);
 
                 var checkbox_checker = function(e) {
                     var $checked_checkboxes = $checkboxes.filter(':checked');
                     var $singlerange = $('#singlerange');
 
                     $('#rev_range_container').hide();
                     $checkboxes.show();
                     $singlerange.show();
 
                     if ($checked_checkboxes.length > 0) {
                         $checked_checkboxes.first().parent('td').append($singlerange);
                         var singlerange = $singlerange.prop('checked');
                         var rev_end = $checked_checkboxes.first().prop('name');
                         if ($checked_checkboxes.length > 1 || singlerange) {
                             var rev_start = $checked_checkboxes.last().prop('name');
                             $('#rev_range_container').prop('href',
                                 pyroutes.url('changeset_home', {'repo_name': ${h.js(c.repo_name)},
                                                                 'revision': rev_start + '...' + rev_end}));
                             $('#rev_range_container').html(
                                  _TM['Show Selected Changesets {0} &rarr; {1}'].format(rev_start.substr(0, 12), rev_end.substr(0, 12)));
                             $('#rev_range_container').show();
                             $('#open_new_pr').prop('href', pyroutes.url('pullrequest_home',
                                                                         {'repo_name': ${h.js(c.repo_name)},
                                                                          'rev_start': rev_start,
                                                                          'rev_end': rev_end}));
                             $('#open_new_pr').html(_TM['Open New Pull Request for {0} &rarr; {1}'].format(rev_start.substr(0, 12), rev_end.substr(0, 12)));
                         } else {
                             $('#open_new_pr').prop('href', pyroutes.url('pullrequest_home',
                                                                         {'repo_name': ${h.js(c.repo_name)},
                                                                          'rev_end': rev_end}));
                             $('#open_new_pr').html(_TM['Open New Pull Request from {0}'].format(rev_end.substr(0, 12)));
                         }
                         $('#rev_range_clear').show();
                         $('#compare_fork').hide();
 
                         var disabled = true;
                         $checkboxes.each(function(){
                             var $this = $(this);
                             if (disabled) {
                                 if ($this.prop('checked')) {
                                     $this.closest('tr').removeClass('out-of-range');
                                     disabled = singlerange;
                                 } else {
                                     $this.closest('tr').addClass('out-of-range');
                                 }
                             } else {
                                 $this.closest('tr').removeClass('out-of-range');
                                 disabled = $this.prop('checked');
                             }
                         });
 
                         if ($checked_checkboxes.length + (singlerange ? 1 : 0) >= 2) {
                             $checkboxes.hide();
                             $checked_checkboxes.show();
                             if (!singlerange)
                                 $singlerange.hide();
                         }
                     } else {
                         $('#singlerange').hide().prop('checked', false);
                         $('#rev_range_clear').hide();
                         %if c.revision:
                             $('#open_new_pr').prop('href', pyroutes.url('pullrequest_home',
                                                                         {'repo_name': ${h.js(c.repo_name)},
                                                                          'rev_end':${h.js(c.first_revision.raw_id)}}));
                             $('#open_new_pr').html(_TM['Open New Pull Request from {0}'].format(${h.jshtml(c.revision)}));
                         %else:
                             $('#open_new_pr').prop('href', pyroutes.url('pullrequest_home',
                                                                         {'repo_name': ${h.js(c.repo_name)},
                                                                         'branch':${h.js(c.first_revision.branch)}}));
                             $('#open_new_pr').html(_TM['Open New Pull Request from {0}'].format(${h.jshtml(c.first_revision.branch)}));
                         %endif
                         $('#compare_fork').show();
                         $checkboxes.closest('tr').removeClass('out-of-range');
                     }
                 };
                 checkbox_checker();
                 $checkboxes.click(function() {
                     checkbox_checker();
-                    r.render(jsdata);
+                    graph.render(jsdata);
                 });
                 $('#singlerange').click(checkbox_checker);
 
                 $('#rev_range_clear').click(function(e){
                     $checkboxes.prop('checked', false);
                     checkbox_checker();
-                    r.render(jsdata);
+                    graph.render(jsdata);
                 });
 
                 var $msgs = $('.message');
                 // get first element height
                 var el = $('#graph_content .container')[0];
                 var row_h = el.clientHeight;
                 $msgs.each(function() {
                     var m = this;
 
                     var h = m.clientHeight;
                     if(h > row_h){
                         var offset = row_h - (h+12);
                         $(m.nextElementSibling).css('display', 'block');
                         $(m.nextElementSibling).css('margin-top', offset+'px');
                     }
                 });
 
                 $('.expand_commit').on('click',function(e){
                     var cid = $(this).data('commit_id');
                     $('#C-'+cid).toggleClass('expanded');
 
                     //redraw the graph, r and jsdata are bound outside function
-                    r.render(jsdata);
+                    graph.render(jsdata);
                 });
 
                 // change branch filter
                 $("#branch_filter").select2({
                     dropdownAutoWidth: true,
                     maxResults: 50,
                     sortResults: branchSort
                     });
 
                 $("#branch_filter").change(function(e){
                     var selected_branch = e.currentTarget.options[e.currentTarget.selectedIndex].value;
                     if(selected_branch != ''){
                         window.location = pyroutes.url('changelog_home', {'repo_name': ${h.js(c.repo_name)},
                                                                           'branch': selected_branch});
                     }else{
                         window.location = pyroutes.url('changelog_home', {'repo_name': ${h.js(c.repo_name)}});
                     }
                     $("#changelog").hide();
                 });
 
-                var jsdata = ${h.js(c.jsdata)};
-                var r = new BranchRenderer('graph_canvas', 'graph_content', 'chg_');
-                r.render(jsdata);
+                graph.render(jsdata);
             });
 
+            $(window).resize(function(){
+                graph.render(jsdata);
+            });
         </script>
         %else:
             ${_('There are no changes yet')}
         %endif
     </div>
 </div>
 </%def>