kallithea Changeset - e87baa8f1c5b

Changeset - e87baa8f1c5b

Parent rev.

Child rev.

[Not reviewed]

default

0 6 0

Mads Kiilerich - 10 years ago 2015-08-05 12:29:41
madski@unity3d.com

comments: rework/rewrite javascript for inline comment handling

There shouldn't be any functional changes here, but the focus has been on doing
the right thing instead of looking at how it was before.

Incremental cleanup did not seem feasible. I think this is more readable and
maintainable than before ... at least for me.

Existing snippets has been reused when reimplementing. The new implementation
focus on being as simple as possible and well-structured. jQuery and data
attributes are used instead of custom implementations. Some existing functions
have been modified or renamed, others have been removed when they no longer
were needed.

6 files changed with 126 insertions and 233 deletions:

kallithea/public/css/style.css

kallithea/public/js/base.js

106

196

kallithea/templates/changeset/changeset.html

kallithea/templates/changeset/changeset_file_comment.html

kallithea/templates/pullrequests/pullrequest_show.html

kallithea/tests/functional/test_changeset_comments.py

0 comments (0 inline, 0 general)

kallithea/public/css/style.css

➞

Show inline comments

@@ @@ -3975,546 +3975,540 @@ div.readme .readme_box h3 { @@
 div.readme .readme_box h2 {
     margin-top: 1.5em !important;
     border-top: 4px solid #e0e0e0 !important;
     padding-top: .5em !important;
+}
 div.readme .readme_box p {
     color: black !important;
     margin: 1em 0 !important;
     line-height: 1.5em !important;
+}
 div.readme .readme_box ul {
     list-style: disc !important;
     margin: 1em 0 1em 2em !important;
+}
 div.readme .readme_box ol {
     list-style: decimal;
     margin: 1em 0 1em 2em !important;
+}
 div.readme .readme_box code {
     font-size: 12px !important;
     background-color: ghostWhite !important;
     color: #444 !important;
     padding: 0 .2em !important;
     border: 1px solid #dedede !important;
+}
 div.readme .readme_box pre code {
     padding: 0 !important;
     font-size: 12px !important;
     background-color: #eee !important;
     border: none !important;
+}
 div.readme .readme_box pre {
     margin: 1em 0;
     font-size: 12px;
     background-color: #eee;
     border: 1px solid #ddd;
     padding: 5px;
     color: #444;
     overflow: auto;
     border-radius: 3px;
+}
 div.readme .readme_box table {
     display: table;
     border-collapse: separate;
     border-spacing: 2px;
     border-color: gray;
     width: auto !important;
+}
 /** RST STYLE **/
 div.rst-block {
     padding: 0px;
+}
 div.rst-block h2 {
     font-weight: normal;
+}
 div.rst-block {
     background-color: #fafafa;
+}
 div.rst-block {
     clear: both;
     overflow: hidden;
     margin: 0;
     padding: 0 20px;
+}
 div.rst-block h1,
 div.rst-block h2,
 div.rst-block h3,
 div.rst-block h4,
 div.rst-block h5,
 div.rst-block h6 {
     border-bottom: 0 !important;
     margin: 0 !important;
     padding: 0 !important;
     line-height: 1.5em !important;
+}
 div.rst-block h1:first-child {
     padding-top: .25em !important;
+}
 div.rst-block h2,
 div.rst-block h3 {
     margin: 1em 0 !important;
+}
 div.rst-block h2 {
     margin-top: 1.5em !important;
     border-top: 4px solid #e0e0e0 !important;
     padding-top: .5em !important;
+}
 div.rst-block p {
     color: black !important;
     margin: 1em 0 !important;
     line-height: 1.5em !important;
+}
 div.rst-block ul {
     list-style: disc !important;
     margin: 1em 0 1em 2em !important;
+}
 div.rst-block ol {
     list-style: decimal;
     margin: 1em 0 1em 2em !important;
+}
 div.rst-block code {
     font-size: 12px !important;
     background-color: ghostWhite !important;
     color: #444 !important;
     padding: 0 .2em !important;
     border: 1px solid #dedede !important;
+}
 div.rst-block pre code {
     padding: 0 !important;
     font-size: 12px !important;
     background-color: #eee !important;
     border: none !important;
+}
 div.rst-block pre {
     margin: 1em 0;
     font-size: 12px;
     background-color: #eee;
     border: 1px solid #ddd;
     padding: 5px;
     color: #444;
     overflow: auto;
     border-radius: 3px;
+}
 /** comment main **/
 .comments {
     padding: 10px 20px;
     max-width: 978px;
+}
 .comments .comment {
     border: 1px solid #ddd;
     margin-top: 10px;
     border-radius: 4px;
+}
 .comments .comment .meta {
     background: #f8f8f8;
     padding: 4px;
     border-bottom: 1px solid #ddd;
     min-height: 18px;
     overflow: auto;
+}
 .comments .comment .meta img {
     vertical-align: middle;
+}
 .comments .comment .meta .user {
     font-weight: bold;
     float: left;
     padding: 4px 2px 2px 2px;
+}
 .comments .comment .meta .date {
     float: left;
     padding: 4px 4px 0px 4px;
+}
 .comments .comment .text {
     background-color: #FAFAFA;
+}
 .comment .text div.rst-block p {
     margin: 0.5em 0px !important;
+}
 .comments .comments-number,
 .pr-comments-number {
 .comments-number {
     margin: 5px;
     padding: 0px 0px 10px 0px;
     font-weight: bold;
     color: #666;
     font-size: 16px;
+}
 .automatic-comment {
     font-style: italic;
+}
 /** comment form **/
 .status-block {
     margin: 5px;
     clear: both
+}
 div.comment-form {
     margin-top: 20px;
+}
 .comment-form textarea {
     width: 100%;
     height: 100px;
     font-family: Lucida Console, Consolas, Monaco, Inconsolata, Liberation Mono, monospace;
+}
 form.comment-form {
     margin-top: 10px;
     margin-left: 10px;
+}
 .comment-inline-form .comment-block-ta,
 .comment-form .comment-block-ta {
     border: 1px solid #ccc;
     border-radius: 3px;
     box-sizing: border-box;
+}
 .comment-form-submit {
     margin-top: 5px;
     margin-left: 525px;
+}
 .file-comments {
     display: none;
+}
 .comment-form .comment {
     margin-left: 10px;
+}
 .comment-form .comment-help {
     padding: 5px 5px 5px 5px;
     color: #666;
+}
 .comment-form .comment-help .preview-btn,
 .comment-form .comment-help .edit-btn {
     float: right;
     margin: -6px 0px 0px 0px;
+}
 .comment-form .preview-box.unloaded,
 .comment-inline-form .preview-box.unloaded {
     height: 50px;
     text-align: center;
     padding: 20px;
     background-color: #fafafa;
+}
 .comment-form .comment-button {
     padding-top: 5px;
+}
 .add-another-button {
     margin-left: 10px;
     margin-top: 10px;
     margin-bottom: 10px;
+}
 .comment .buttons {
     float: right;
     margin: -1px 0px 0px 0px;
+}
 .show-inline-comments {
     position: relative;
     top: 1px
+}
 /** comment inline form **/
 .comment-inline-form {
     margin: 4px;
     max-width: 978px;
+}
 .comment-inline-form .submitting-overlay {
     display: none;
     height: 0;
     text-align: center;
     font-size: 16px;
     opacity: 0.5;
+}
 .comment-inline-form .clearfix,
 .comment-form .clearfix {
     background: #EEE;
     border-radius: 4px;
     padding: 5px;
     margin: 0px;
+}
 div.comment-inline-form {
     padding: 4px 0px 6px 0px;
+}
 .comment-inline-form textarea {
     width: 100%;
     height: 100px;
     font-family: Lucida Console, Consolas, Monaco, Inconsolata, Liberation Mono, monospace;
+}
 form.comment-inline-form {
     margin-top: 10px;
     margin-left: 10px;
+}
 .comment-inline-form-submit {
     margin-top: 5px;
     margin-left: 525px;
+}
 .file-comments {
     display: none;
+}
 .comment-inline-form .comment {
     margin-left: 10px;
+}
 .comment-inline-form .comment-help {
     padding: 5px 5px 5px 5px;
     color: #666;
+}
 .comment-inline-form .comment-help .preview-btn,
 .comment-inline-form .comment-help .edit-btn {
     float: right;
     margin: -6px 0px 0px 0px;
+}
 .comment-inline-form .comment-button {
     padding-top: 5px;
+}
 /** comment inline **/
 .inline-comments {
-    padding: 10px 20px;
+    padding: 0 20px;
+}
 .inline-comments div.rst-block {
     clear: both;
     overflow: hidden;
     margin: 0;
     padding: 0 20px 0px;
+}
 .inline-comments .comment {
     max-width: 978px;
     border: 1px solid #ddd;
     border-radius: 4px;
     margin: 3px 3px 5px 5px;
     background-color: #FAFAFA;
+}
 .inline-comments .add-comment {
     padding: 2px 4px 8px 5px;
+}
 .inline-comments .comment-wrapp {
     padding: 1px;
+}
 .inline-comments .comment .meta {
     background: #f8f8f8;
     padding: 4px;
     border-bottom: 1px solid #ddd;
     min-height: 20px;
     overflow: auto;
+}
 .inline-comments .comment .meta img {
     vertical-align: middle;
+}
 .inline-comments .comment .meta .user {
     font-weight: bold;
     float: left;
     padding: 3px;
+}
 .inline-comments .comment .meta .date {
     float: left;
     padding: 3px;
+}
 .inline-comments .comment .text {
     background-color: #FAFAFA;
+}
 .inline-comments .comments-number {
     padding: 0px 0px 10px 0px;
     font-weight: bold;
     color: #666;
     font-size: 16px;
+}
 .inline-comments-button .add-comment {
     margin: 2px 0px 8px 5px !important
+}
 .notification-paginator {
     padding: 0px 0px 4px 16px;
+}
 #context-pages .pull-request span,
 .menu_link_notifications {
     padding: 4px 4px !important;
     text-align: center;
     color: #888 !important;
     background-color: #DEDEDE !important;
     border-radius: 4px !important;
+}
 #context-pages .forks span,
 .menu_link_notifications {
     padding: 4px 4px !important;
     text-align: center;
     color: #888 !important;
     background-color: #DEDEDE !important;
     border-radius: 4px !important;
+}
 .notification-header {
     padding-top: 6px;
+}
 .notification-header .desc {
     font-size: 16px;
     height: 24px;
     float: left
+}
 .notification-list .container.unread {
     background: none repeat scroll 0 0 rgba(255, 255, 180, 0.6);
+}
 .notification-header .gravatar {
     background: none repeat scroll 0 0 transparent;
     padding: 0px 0px 0px 8px;
+}
 .notification-list .container .notification-header .desc {
     font-weight: bold;
     font-size: 17px;
+}
 .notification-table {
     border: 1px solid #ccc;
     border-radius: 6px 6px 6px 6px;
     clear: both;
     margin: 0px 20px 0px 20px;
+}
 .notification-header .delete-notifications {
     float: right;
     padding-top: 8px;
     cursor: pointer;
+}
 .notification-header .read-notifications {
     float: right;
     padding-top: 8px;
     cursor: pointer;
+}
 .notification-subject {
     clear: both;
     border-bottom: 1px solid #eee;
     padding: 5px 0px 5px 38px;
+}
 .notification-body {
     clear: both;
     margin: 34px 2px 2px 8px
+}
 /****
 PULL REQUESTS
 *****/
 .pullrequests_section_head {
     padding: 10px 10px 10px 0px;
     margin: 0 20px;
     font-size: 16px;
     font-weight: bold;
+}
 div.pr-details-title.closed {
     color: #555;
     background: #eee;
+}
 div.pr-details-title {
     font-size: 1.6em;
     padding: 5px 0px 5px 10px;
+}
 div.pr {
     margin: 0px 20px;
     padding: 4px 4px;
+}
 div.pr-desc {
     margin: 0px 20px;
+}
 tr.pr-closed td {
     background-color: #eee !important;
     color: #555 !important;
+}
 span.pr-closed-tag {
     margin-bottom: 1px;
     margin-right: 1px;
     padding: 1px 3px;
     font-size: 10px;
     padding: 1px 3px 1px 3px;
     font-size: 10px;
     color: #577632;
     white-space: nowrap;
     border-radius: 4px;
     border: 1px solid #d9e8f8;
     line-height: 1.5em;
+}
 .pr-box {
     max-width: 978px;
+}
 #s2id_org_ref,
 #s2id_other_ref,
 #s2id_org_repo,
 #s2id_other_repo {
     min-width: 150px;
     margin: 5px;
+}
 #pr-summary .msg-div {
     margin: 5px 0;
+}
 /****
   PERMS

kallithea/public/js/base.js

➞

Show inline comments

@@ @@ -418,628 +418,538 @@ var show_more_event = function(){ @@
 /**
  * activate .lazy-cs mouseover for showing changeset tooltip
  */
 var show_changeset_tooltip = function(){
     $('.lazy-cs').mouseover(function(e){
         var $target = $(e.currentTarget);
         var rid = $target.attr('raw_id');
         var repo_name = $target.attr('repo_name');
         if(rid && !$target.hasClass('tooltip')){
             _show_tooltip(e, _TM['loading ...']);
             var url = pyroutes.url('changeset_info', {"repo_name": repo_name, "revision": rid});
             ajaxGET(url, function(json){
                     $target.addClass('tooltip')
                     _show_tooltip(e, json['message']);
                     _activate_tooltip($target);
                 });
+        }
     });
 };
 var _onSuccessFollow = function(target){
     var $target = $(target);
     var $f_cnt = $('#current_followers_count');
     if($target.hasClass('follow')){
         $target.attr('class', 'following');
         $target.attr('title', _TM['Stop following this repository']);
         if($f_cnt.html()){
             var cnt = Number($f_cnt.html())+1;
             $f_cnt.html(cnt);
+        }
+    }
     else{
         $target.attr('class', 'follow');
         $target.attr('title', _TM['Start following this repository']);
         if($f_cnt.html()){
             var cnt = Number($f_cnt.html())-1;
             $f_cnt.html(cnt);
+        }
+    }
+}
 var toggleFollowingRepo = function(target, follows_repo_id){
     var args = 'follows_repo_id=' + follows_repo_id;
     args += '&amp;_authentication_token=' + _authentication_token;
     $.post(TOGGLE_FOLLOW_URL, args, function(data){
             _onSuccessFollow(target);
         });
     return false;
 };
 var showRepoSize = function(target, repo_name){
     var args = '_authentication_token=' + _authentication_token;
     if(!$("#" + target).hasClass('loaded')){
         $("#" + target).html(_TM['Loading ...']);
         var url = pyroutes.url('repo_size', {"repo_name":repo_name});
         $.post(url, args, function(data) {
             $("#" + target).html(data);
             $("#" + target).addClass('loaded');
         });
+    }
     return false;
 };
 /**
  * tooltips
  */
 var tooltip_activate = function(){
     $(document).ready(_init_tooltip);
 };
 var _activate_tooltip = function($tt){
     $tt.mouseover(_show_tooltip);
     $tt.mousemove(_move_tooltip);
     $tt.mouseout(_close_tooltip);
 };
 var _init_tooltip = function(){
     var $tipBox = $('#tip-box');
     if(!$tipBox.length){
         $tipBox = $('<div id="tip-box"></div>')
         $(document.body).append($tipBox);
+    }
     $tipBox.hide();
     $tipBox.css('position', 'absolute');
     $tipBox.css('max-width', '600px');
     _activate_tooltip($('.tooltip'));
 };
 var _show_tooltip = function(e, tipText, safe){
     e.stopImmediatePropagation();
     var el = e.currentTarget;
     var $el = $(el);
     if(tipText){
         // just use it
     } else if(el.tagName.toLowerCase() === 'img'){
         tipText = el.alt ? el.alt : '';
     } else {
         tipText = el.title ? el.title : '';
         safe = safe || $el.hasClass("safe-html-title");
+    }
     if(tipText !== ''){
         // save org title
         $el.attr('tt_title', tipText);
         // reset title to not show org tooltips
         $el.attr('title', '');
         var $tipBox = $('#tip-box');
         if (safe) {
             $tipBox.html(tipText);
         } else {
             $tipBox.text(tipText);
+        }
         $tipBox.css('display', 'block');
+    }
 };
 var _move_tooltip = function(e){
     e.stopImmediatePropagation();
     var $tipBox = $('#tip-box');
     $tipBox.css('top', (e.pageY + 15) + 'px');
     $tipBox.css('left', (e.pageX + 15) + 'px');
 };
 var _close_tooltip = function(e){
     e.stopImmediatePropagation();
     var $tipBox = $('#tip-box');
     $tipBox.hide();
     var el = e.currentTarget;
     $(el).attr('title', $(el).attr('tt_title'));
 };
 /**
  * Quick filter widget
+ *
  * @param target: filter input target
  * @param nodes: list of nodes in html we want to filter.
  * @param display_element function that takes current node from nodes and
  *    does hide or show based on the node
  */
 var q_filter = (function() {
     var _namespace = {};
     var namespace = function (target) {
         if (!(target in _namespace)) {
             _namespace[target] = {};
+        }
         return _namespace[target];
     };
     return function (target, $nodes, display_element) {
         var $nodes = $nodes;
         var $q_filter_field = $('#' + target);
         var F = namespace(target);
         $q_filter_field.keyup(function (e) {
             clearTimeout(F.filterTimeout);
             F.filterTimeout = setTimeout(F.updateFilter, 600);
         });
         F.filterTimeout = null;
         F.updateFilter = function () {
             // Reset timeout
             F.filterTimeout = null;
             var obsolete = [];
             var req = $q_filter_field.val().toLowerCase();
             var showing = 0;
             $nodes.each(function () {
                 var n = this;
                 var target_element = display_element(n);
                 if (req && n.innerHTML.toLowerCase().indexOf(req) == -1) {
                     $(target_element).hide();
+                }
                 else {
                     $(target_element).show();
                     showing += 1;
+                }
             });
             $('#repo_count').html(showing);
             /* FIXME: don't hardcode */
+        }
+    }
 })();
 /* return jQuery expression with a tr with body in 3rd column and class cls and id named after the body */
 var _table_tr = function(cls, body){
     // like: <div class="comment" id="comment-8" line="o92"><div class="comment-wrapp">...
     // except new inlines which are different ...
     var comment_id = ($(body).attr('id') || 'comment-new').split('comment-')[1];
     var tr_id = 'comment-tr-{0}'.format(comment_id);
     return $(('<tr id="{0}" class="{1}">'+
                   '<td class="lineno-inline new-inline"></td>'+
                   '<td class="lineno-inline old-inline"></td>'+
                   '<td>{2}</td>'+
                  '</tr>').format(tr_id, cls, body));
 };
 /** return jQuery expression with new inline form based on template **/
 var _createInlineForm = function(parent_tr, f_path, line) {
     var $tmpl = $('#comment-inline-form-template').html().format(f_path, line);
     var $form = _table_tr('comment-form-inline', $tmpl)
     // create event for hide button
     $form.find('.hide-inline-form').click(function(e) {
         var newtr = e.currentTarget.parentNode.parentNode.parentNode.parentNode.parentNode;
         if($(newtr).next().hasClass('inline-comments-button')){
             $(newtr).next().show();
+        }
         $(newtr).remove();
         $(parent_tr).removeClass('form-open');
         $(parent_tr).removeClass('hl-comment');
     });
     return $form
 };
 /**
  * Inject inline comment for an given TR. This tr should always be a .line .
  * The form will be inject after any comments.
  * Comment handling
  */
 var injectInlineForm = function(tr){
     var $tr = $(tr);
     if(!$tr.hasClass('line')){
         return
 // move comments to their right location, inside new trs
 function move_comments($anchorcomments) {
     $anchorcomments.each(function(i, anchorcomment) {
         var $anchorcomment = $(anchorcomment);
         var target_id = $anchorcomment.data('target-id');
         var $comment_div = _get_add_comment_div(target_id);
         var f_path = $anchorcomment.data('f_path');
         var line_no = $anchorcomment.data('line_no');
         if ($comment_div[0]) {
             $comment_div.append($anchorcomment.children());
             _comment_div_append_add($comment_div, f_path, line_no);
         } else {
            $anchorcomment.before("Comment to {0} line {1} which is outside the diff context:".format(f_path || '?', line_no || '?'));
+    }
     var submit_url = AJAX_COMMENT_URL;
     var $td = $tr.find('.code');
     if($tr.hasClass('form-open') || $tr.hasClass('context') || $td.hasClass('no-comment')){
         return
     });
     linkInlineComments($('.firstlink'), $('.comment'));
+}
 // comment bubble was clicked - insert new tr and show form
 function show_comment_form($bubble) {
     var children = $bubble.closest('tr.line').children('[id]');
     var line_td_id = children[children.length - 1].id;
     var $comment_div = _get_add_comment_div(line_td_id);
     var f_path = $bubble.closest('div.full_f_path').data('f_path');
     var parts = line_td_id.split('_');
     var line_no = parts[parts.length-1];
     comment_div_state($comment_div, f_path, line_no, true);
+    }
     $tr.addClass('form-open hl-comment');
     var f_path = $tr.parent().closest('.full_f_path').data('f_path');
     var lineno = _getLineNo(tr);
     var $form = _createInlineForm(tr, f_path, lineno, submit_url);
 // return comment div for target_id - add it if it doesn't exist yet
 function _get_add_comment_div(target_id) {
     var comments_box_id = 'comments-' + target_id;
     var $comments_box = $('#' + comments_box_id);
     if (!$comments_box.length) {
         var html = '<tr><td id="{0}" colspan="3" class="inline-comments"></td></tr>'.format(comments_box_id);
         $('#' + target_id).closest('tr').after(html);
         $comments_box = $('#' + comments_box_id);
+    }
     return $comments_box;
+}
     var $parent = $tr;
     while ($parent.next().hasClass('inline-comments')){
         var $parent = $parent.next();
 // set $comment_div state - showing or not showing form and Add button
 function comment_div_state($comment_div, f_path, line_no, show_form) {
     var $forms = $comment_div.children('.comment-inline-form');
     var $buttons = $comment_div.children('.add-comment');
     var $comments = $comment_div.children('.comment');
     if (show_form) {
         if (!$forms.length) {
             _comment_div_append_form($comment_div, f_path, line_no);
+        }
     } else {
         $forms.remove();
+    }
     $buttons.remove();
     if ($comments.length && !show_form) {
         _comment_div_append_add($comment_div, f_path, line_no);
+    }
+    }
     $form.insertAfter($parent);
     var $overlay = $form.find('.submitting-overlay');
     var $inlineform = $form.find('.inline-form');
 // append an Add button to $comment_div and hook it up to show form
 function _comment_div_append_add($comment_div, f_path, line_no) {
     var addlabel = TRANSLATION_MAP['Add Another Comment'];
     var $add = $('<div class="add-comment"><span class="btn btn-mini">{0}</span></div>'.format(addlabel));
     $comment_div.append($add);
     $add.click(function(e) {
         comment_div_state($comment_div, f_path, line_no, true);
     });
+}
 // append a comment form to $comment_div
 function _comment_div_append_form($comment_div, f_path, line_no) {
     var $form_div = $($('#comment-inline-form-template').html().format(f_path, line_no));
     $comment_div.append($form_div);
     var $form = $comment_div.find("form");
     $form.submit(function(e){
         e.preventDefault();
         if(lineno === undefined){
             alert('Error submitting, line ' + lineno + ' not found.');
             return;
+        }
         if(f_path === undefined){
             alert('Error submitting, file path ' + f_path + ' not found.');
         var text = $('#text_'+line_no).val();
         if (!text){
             return;
+        }
         var text = $('#text_'+lineno).val();
         if(text == ""){
             return;
+        }
         $overlay.show();
         $form.find('.submitting-overlay').show();
         var success = function(json_data){
             $tr.removeClass('form-open');
             $form.remove();
             _renderInlineComment(json_data);
             $comment_div.append(json_data['rendered_text']);
             comment_div_state($comment_div, f_path, line_no, false);
             linkInlineComments($('.firstlink'), $('.comment'));
         };
         var postData = {
                 'text': text,
                 'f_path': f_path,
-                'line': lineno
+            'line': line_no
         };
-        ajaxPOST(submit_url, postData, success);
+        ajaxPOST(AJAX_COMMENT_URL, postData, success);
     });
     $('#preview-btn_'+lineno).click(function(e){
         var text = $('#text_'+lineno).val();
     $('#preview-btn_'+line_no).click(function(e){
         var text = $('#text_'+line_no).val();
         if(!text){
             return
+        }
         $('#preview-box_'+lineno).addClass('unloaded');
         $('#preview-box_'+lineno).html(_TM['Loading ...']);
         $('#edit-container_'+lineno).hide();
         $('#edit-btn_'+lineno).show();
         $('#preview-container_'+lineno).show();
         $('#preview-btn_'+lineno).hide();
         $('#preview-box_'+line_no).addClass('unloaded');
         $('#preview-box_'+line_no).html(_TM['Loading ...']);
         $('#edit-container_'+line_no).hide();
         $('#edit-btn_'+line_no).show();
         $('#preview-container_'+line_no).show();
         $('#preview-btn_'+line_no).hide();
         var url = pyroutes.url('changeset_comment_preview', {'repo_name': REPO_NAME});
         var post_data = {'text': text};
         ajaxPOST(url, post_data, function(html){
             $('#preview-box_'+lineno).html(html);
             $('#preview-box_'+lineno).removeClass('unloaded');
             $('#preview-box_'+line_no).html(html);
             $('#preview-box_'+line_no).removeClass('unloaded');
         })
     })
     $('#edit-btn_'+lineno).click(function(e){
         $('#edit-container_'+lineno).show();
         $('#edit-btn_'+lineno).hide();
         $('#preview-container_'+lineno).hide();
         $('#preview-btn_'+lineno).show();
     $('#edit-btn_'+line_no).click(function(e) {
         $('#edit-container_'+line_no).show();
         $('#edit-btn_'+line_no).hide();
         $('#preview-container_'+line_no).hide();
         $('#preview-btn_'+line_no).show();
     })
     // create event for hide button
     $form.find('.hide-inline-form').click(function(e) {
         comment_div_state($comment_div, f_path, line_no, false);
     });
     setTimeout(function(){
         // callbacks
         tooltip_activate();
-        MentionsAutoComplete('text_'+lineno, 'mentions_container_'+lineno,
+        MentionsAutoComplete('text_'+line_no, 'mentions_container_'+line_no,
                              _USERS_AC_DATA);
-        $('#text_'+lineno).focus();
+        $('#text_'+line_no).focus();
     },10)
-};
+}
 var deleteComment = function(comment_id){
 function deleteComment(comment_id) {
     var url = AJAX_COMMENT_DELETE_URL.replace('__COMMENT_ID__',comment_id);
     var postData = {'_method':'delete'};
     var success = function(o){
         var $deleted = $('#comment-tr-'+comment_id);
         var $prev = $deleted.prev('tr');
         while ($prev.hasClass('inline-comments')){
             $prev = $prev.prev('tr');
+        }
         $deleted.remove();
         _placeAddButton($prev);
         $('#comment-'+comment_id).remove();
         // Ignore that this might leave a stray Add button (or have a pending form with another comment) ...
+    }
     ajaxPOST(url,postData,success);
+}
 var _getLineNo = function(tr) {
     var line;
     var o = $(tr).children()[0].id.split('_');
     var n = $(tr).children()[1].id.split('_');
     if (n.length >= 2) {
         line = n[n.length-1];
     } else if (o.length >= 2) {
         line = o[o.length-1];
+    }
     return line
 };
 var _placeAddButton = function($line_tr){
     var $tr = $line_tr;
     while ($tr.next().hasClass('inline-comments')){
         $tr.find('.add-comment').remove();
         $tr = $tr.next();
+    }
     $tr.find('.add-comment').remove();
     var label = TRANSLATION_MAP['Add Another Comment'];
     var $html_el = $('<div class="add-comment"><span class="btn btn-mini">{0}</span></div>'.format(label));
     $html_el.click(function(e) {
         injectInlineForm($line_tr);
     });
     $tr.find('.comment').after($html_el);
 };
 /**
  * Places the inline comment into the changeset block in proper line position
  */
 var _placeInline = function(target_id, lineno, html){
     var $td = $("#{0}_{1}".format(target_id, lineno));
     if (!$td.length){
         return false;
+    }
     // check if there are comments already !
     var $line_tr = $td.parent(); // the tr
     var $after_tr = $line_tr;
     while ($after_tr.next().hasClass('inline-comments')){
         $after_tr = $after_tr.next();
+    }
     // put in the comment at the bottom
     var $tr = _table_tr('inline-comments', html)
     $tr.find('div.comment').addClass('inline-comment');
     $after_tr.after($tr);
     // scan nodes, and attach add button to last one
     _placeAddButton($line_tr);
     return true;
+}
 /**
  * make a single inline comment and place it inside
  */
 var _renderInlineComment = function(json_data){
     var html =  json_data['rendered_text'];
     var lineno = json_data['line_no'];
     var target_id = json_data['target_id'];
     return _placeInline(target_id, lineno, html);
+}
 /**
  * Iterates over all the inlines, and places them inside proper blocks of data
  */
 var renderInlineComments = function(file_comments){
     for (var f in file_comments){
         // holding all comments for a FILE
         var box = file_comments[f];
         var target_id = $(box).attr('target_id');
         // actual comments with line numbers
         var comments = box.children;
         var obsolete_comments = [];
         for(var i=0; i<comments.length; i++){
             var data = {
                 'rendered_text': comments[i].outerHTML,
                 'line_no': $(comments[i]).attr('line'),
                 'target_id': target_id
+            }
             if (_renderInlineComment(data)) {
                 obsolete_comments.push(comments[i]);
                 $(comments[i]).hide();
             }else{
                 var txt = document.createTextNode(
                         "Comment to " + YUD.getAttribute(comments[i].parentNode,'path') +
                         " line " + data.line_no +
                         " which is outside the diff context:");
                 comments[i].insertBefore(txt, comments[i].firstChild);
+            }
+        }
         // now remove all the obsolete comments that have been copied to their
         // respective locations.
         for (var i=0; i < obsolete_comments.length; i++) {
             obsolete_comments[i].parentNode.removeChild(obsolete_comments[i]);
+        }
         $(box).show();
+    }
+}
 /**
  * Double link comments
  */
 var linkInlineComments = function($firstlinks, $comments){
     if ($comments.length > 0) {
         $firstlinks.html('<a href="#{0}">First comment</a>'.format($comments.attr('id')));
+    }
     if ($comments.length <= 1) {
         return;
+    }
     $comments.each(function(i, e){
             var prev = '';
             if (i > 0){
                 var prev_anchor = $($comments.get(i-1)).attr('id');
                 prev = '<a href="#{0}">Previous comment</a>'.format(prev_anchor);
+            }
             var next = '';
             if (i+1 < $comments.length){
                 var next_anchor = $($comments.get(i+1)).attr('id');
                 next = '<a href="#{0}">Next comment</a>'.format(next_anchor);
+            }
             $(this).find('.comment-prev-next-links').html(
                 '<div class="prev-comment">{0}</div>'.format(prev) +
                 '<div class="next-comment">{0}</div>'.format(next));
         });
+}
 /* activate files.html stuff */
 var fileBrowserListeners = function(current_url, node_list_url, url_base){
     var current_url_branch = "?branch=__BRANCH__";
     $('#stay_at_branch').on('click',function(e){
         if(e.currentTarget.checked){
             var uri = current_url_branch;
             uri = uri.replace('__BRANCH__',e.currentTarget.value);
             window.location = uri;
+        }
         else{
             window.location = current_url;
+        }
     })
     var $node_filter = $('#node_filter');
     var filterTimeout = null;
     var nodes = null;
     var initFilter = function(){
         $('#node_filter_box_loading').show();
         $('#search_activate_id').hide();
         $('#add_node_id').hide();
         $.ajax({url: node_list_url, headers: {'X-PARTIAL-XHR': '1'}, cache: false})
             .done(function(json) {
                     nodes = json.nodes;
                     $('#node_filter_box_loading').hide();
                     $('#node_filter_box').show();
                     $node_filter.focus();
                     if($node_filter.hasClass('init')){
                         $node_filter.val('');
                         $node_filter.removeClass('init');
+                    }
                 })
             .fail(function() {
                     console.log('fileBrowserListeners initFilter failed to load');
                 })
+        ;
+    }
     var updateFilter = function(e) {
         return function(){
             // Reset timeout
             filterTimeout = null;
             var query = e.currentTarget.value.toLowerCase();
             var match = [];
             var matches = 0;
             var matches_max = 20;
             if (query != ""){
                 for(var i=0;i<nodes.length;i++){
                     var pos = nodes[i].name.toLowerCase().indexOf(query)
                     if(query && pos != -1){
                         matches++
                         //show only certain amount to not kill browser
                         if (matches > matches_max){
                             break;
+                        }
                         var n = nodes[i].name;
                         var t = nodes[i].type;
                         var n_hl = n.substring(0,pos)
                           +"<b>{0}</b>".format(n.substring(pos,pos+query.length))
                           +n.substring(pos+query.length)
                         var new_url = url_base.replace('__FPATH__',n);
                         match.push('<tr><td><a class="browser-{0}" href="{1}">{2}</a></td><td colspan="5"></td></tr>'.format(t,new_url,n_hl));
+                    }
                     if(match.length >= matches_max){
                         match.push('<tr><td>{0}</td><td colspan="5"></td></tr>'.format(_TM['Search truncated']));
                         break;
+                    }
+                }
+            }
             if(query != ""){
                 $('#tbody').hide();
                 $('#tbody_filtered').show();
                 if (match.length==0){
                   match.push('<tr><td>{0}</td><td colspan="5"></td></tr>'.format(_TM['No matching files']));
+                }
                 $('#tbody_filtered').html(match.join(""));
+            }
             else{
                 $('#tbody').show();
                 $('#tbody_filtered').hide();
+            }
+        }
     };
     $('#filter_activate').click(function(){
             initFilter();
         });
     $node_filter.click(function(){
             if($node_filter.hasClass('init')){
                 $node_filter.val('');
                 $node_filter.removeClass('init');
+            }
         });
     $node_filter.keyup(function(e){
             clearTimeout(filterTimeout);
             filterTimeout = setTimeout(updateFilter(e),600);
         });
 };
 var initCodeMirror = function(textarea_id, resetUrl){
     var myCodeMirror = CodeMirror.fromTextArea($('#' + textarea_id)[0], {
             mode: "null",
             lineNumbers: true,
             indentUnit: 4,
             autofocus: true
         });
     CodeMirror.modeURL = "/codemirror/mode/%N/%N.js";
     $('#reset').click(function(e){
             window.location=resetUrl;
         });
     $('#file_enable').click(function(){
             $('#editor_container').show();
             $('#upload_file_container').hide();
             $('#filename_container').show();
             $('#set_mode_header').show();
         });
     $('#upload_file_enable').click(function(){
             $('#editor_container').hide();
             $('#upload_file_container').show();
             $('#filename_container').hide();
             $('#set_mode_header').hide();
         });
     return myCodeMirror
 };
 var setCodeMirrorMode = function(codeMirrorInstance, mode) {
     CodeMirror.autoLoadMode(codeMirrorInstance, mode);
+}
 var _getIdentNode = function(n){
     //iterate thrugh nodes until matching interesting node
     if (typeof n == 'undefined'){
         return -1
+    }
     if(typeof n.id != "undefined" && n.id.match('L[0-9]+')){
         return n
+    }
     else{
         return _getIdentNode(n.parentNode);
+    }
 };
 /* generate links for multi line selects that can be shown by files.html page_highlights.
  * This is a mouseup handler for hlcode from CodeHtmlFormatter and pygmentize */
 var getSelectionLink = function(e) {
     //get selection from start/to nodes
     if (typeof window.getSelection != "undefined") {
         s = window.getSelection();

kallithea/templates/changeset/changeset.html

➞

Show inline comments

@@ @@ -34,294 +34,287 @@ ${self.repo_context_bar('changelog', c.c @@
             <div class="parents">
                 <div id="parent_link" class="changeset_hash">
                     <i style="color:#036185" class="icon-left-open"></i> <a href="#">${_('Parent rev.')}</a>
                 </div>
             </div>
             <div class="children">
                 <div id="child_link" class="changeset_hash">
                     <a href="#">${_('Child rev.')}</a> <i style="color:#036185" class="icon-right-open"></i>
                 </div>
             </div>
             <div class="code-header banner">
                 <div class="changeset-status-container">
                     %if c.statuses:
                         <span class="changeset-status-ico"><i class="icon-circle changeset-status-${c.statuses[0]}"></i></span>
                         <span title="${_('Changeset status')}" class="changeset-status-lbl">[${h.changeset_status_lbl(c.statuses[0])}]</span>
                     %endif
                 </div>
                 <div class="diff-actions">
                   <a href="${h.url('changeset_raw_home',repo_name=c.repo_name,revision=c.changeset.raw_id)}"  class="tooltip" title="${_('Raw diff')}">
                       <i class="icon-diff"></i>
                   </a>
                   <a href="${h.url('changeset_patch_home',repo_name=c.repo_name,revision=c.changeset.raw_id)}"  class="tooltip" title="${_('Patch diff')}">
                       <i class="icon-file-powerpoint"></i>
                   </a>
                   <a href="${h.url('changeset_download_home',repo_name=c.repo_name,revision=c.changeset.raw_id,diff='download')}" class="tooltip" title="${_('Download diff')}">
                       <i class="icon-floppy"></i>
                   </a>
                   ${c.ignorews_url(request.GET)}
                   ${c.context_url(request.GET)}
                 </div>
                 <div class="comments-number" style="float:right;padding-right:5px">
                     ${comment.comment_count(c.inline_cnt, len(c.comments))}
                 </div>
             </div>
         </div>
         <div id="changeset_content">
             <div class="container">
                 <div class="right">
                     <div class="changes">
                         % if (len(c.changeset.affected_files) <= c.affected_files_cut_off) or c.fulldiff:
                          <span class="removed" title="${_('Removed')}">${len(c.changeset.removed)}</span>
                          <span class="changed" title="${_('Changed')}">${len(c.changeset.changed)}</span>
                          <span class="added" title="${_('Added')}">${len(c.changeset.added)}</span>
                         % else:
                          <span class="removed" title="${_('Affected %s files') % len(c.changeset.affected_files)}">!</span>
                          <span class="changed" title="${_('Affected %s files') % len(c.changeset.affected_files)}">!</span>
                          <span class="added"   title="${_('Affected %s files') % len(c.changeset.affected_files)}">!</span>
                         % endif
                     </div>
                     <span class="logtags">
                         %if len(c.changeset.parents)>1:
                         <span class="merge">${_('Merge')}</span>
                         %endif
                         %if h.is_hg(c.db_repo_scm_instance):
                           %for book in c.changeset.bookmarks:
                           <span class="booktag" title="${_('Bookmark %s') % book}">
                              ${h.link_to(book,h.url('changeset_home',repo_name=c.repo_name,revision=c.changeset.raw_id))}
                           </span>
                           %endfor
                         %endif
                         %for tag in c.changeset.tags:
                          <span class="tagtag"  title="${_('Tag %s') % tag}">
                          ${h.link_to(tag,h.url('changeset_home',repo_name=c.repo_name,revision=c.changeset.raw_id))}</span>
                         %endfor
                         %if c.changeset.branch:
                          <span class="branchtag" title="${_('Branch %s') % c.changeset.branch}">
                          ${h.link_to(c.changeset.branch,h.url('changelog_home',repo_name=c.repo_name,branch=c.changeset.branch))}
                          </span>
                         %endif
                     </span>
                 </div>
                 <div class="left">
                      <div class="author">
                          <div class="gravatar">
                            ${h.gravatar(h.email_or_none(c.changeset.author), size=20)}
                          </div>
                          <span><b>${h.person(c.changeset.author,'full_name_and_username')}</b> - ${h.age(c.changeset.date,True)} ${h.fmt_date(c.changeset.date)}</span><br/>
                          <span>${h.email_or_none(c.changeset.author)}</span><br/>
                      </div>
                      <% rev = c.changeset.extra.get('source') %>
                      %if rev:
                      <div>
                        ${_('Grafted from:')} ${h.link_to(h.short_id(rev),h.url('changeset_home',repo_name=c.repo_name,revision=rev))}
                      </div>
                      %endif
                      <% rev = c.changeset.extra.get('transplant_source', '').encode('hex') %>
                      %if rev:
                      <div>
                        ${_('Transplanted from:')} ${h.link_to(h.short_id(rev),h.url('changeset_home',repo_name=c.repo_name,revision=rev))}
                      </div>
                      %endif
                      % if hasattr(c.changeset, 'successors') and c.changeset.successors:
                      <div class='successors'>
                        <span class='successors_header'>${_('Replaced by:')} </span>
                        % for i, s in enumerate(c.changeset.successors):
                            <%
                            comma = ""
                            if i != len(c.changeset.successors)-1:
                              comma = ", "
                            %>
                          <a class='successors_hash' href="${h.url('changeset_home',repo_name=c.repo_name, revision=s)}">${s}</a>${comma}
                        % endfor
                      </div>
                      % endif
                      % if hasattr(c.changeset, 'precursors') and c.changeset.precursors:
                      <div class='precursors'>
                        <span class='precursors_header'>${_('Preceded by:')} </span>
                        % for i, s in enumerate(c.changeset.precursors):
                            <%
                            comma = ""
                            if i != len(c.changeset.precursors)-1:
                              comma = ", "
                            %>
                            <a class="precursors_hash" href="${h.url('changeset_home',repo_name=c.repo_name, revision=s)}">${s}</a>${comma}
                        % endfor
                      </div>
                      % endif
                      <div class="message">${h.urlify_commit(c.changeset.message, c.repo_name)}</div>
                 </div>
             </div>
             <div class="changes_txt">
             % if c.limited_diff:
             ${ungettext('%s file changed','%s files changed',len(c.changeset.affected_files)) % (len(c.changeset.affected_files))}:
             % else:
             ${ungettext('%s file changed with %s insertions and %s deletions','%s files changed with %s insertions and %s deletions', len(c.changeset.affected_files)) % (len(c.changeset.affected_files),c.lines_added,c.lines_deleted)}:
             %endif
             </div>
             <div class="cs_files">
               %for FID, (cs1, cs2, change, path, diff, stats) in c.changes[c.changeset.raw_id].iteritems():
                   <div class="cs_${change}">
                         <div class="node">
                             <i class="icon-diff-${change}"></i>
                             <a href="#${FID}">${h.safe_unicode(path)}</a>
                         </div>
                     <div class="changes">${h.fancy_file_stats(stats)}</div>
                   </div>
               %endfor
               % if c.limited_diff:
                 <h5>${_('Changeset was too big and was cut off...')} <a href="${h.url.current(fulldiff=1, **request.GET.mixed())}">${_('Show full diff anyway')}</a></h5>
               % endif
             </div>
         </div>
     </div>
     ## diff block
     <div class="commentable-diff">
     <%namespace name="diff_block" file="/changeset/diff_block.html"/>
     ${diff_block.diff_block_js()}
     ${diff_block.diff_block(c.changes[c.changeset.raw_id])}
     % if c.limited_diff:
       <h4>${_('Changeset was too big and was cut off...')} <a href="${h.url.current(fulldiff=1, **request.GET.mixed())}">${_('Show full diff anyway')}</a></h4>
     % endif
     </div>
     ## template for inline comment form
     ${comment.comment_inline_form()}
     ## render comments and inlines
     ${comment.generate_comments()}
     ## main comment form and it status
     ${comment.comments(h.url('changeset_comment', repo_name=c.repo_name, revision=c.changeset.raw_id),
                        h.changeset_status(c.db_repo, c.changeset.raw_id))}
     ## FORM FOR MAKING JS ACTION AS CHANGESET COMMENTS
     <script type="text/javascript">
       $(document).ready(function(){
           $('.show-inline-comments').change(function(e){
               var target = e.currentTarget;
               if(target == null){
                   target = this;
+              }
               var boxid = $(target).attr('id_for');
               if(target.checked){
                   $('#{0} .inline-comments'.format(boxid)).show();
                   $('#{0} .inline-comments-button'.format(boxid)).show();
               }else{
                   $('#{0} .inline-comments'.format(boxid)).hide();
                   $('#{0} .inline-comments-button'.format(boxid)).hide();
+              }
           });
           $('.add-bubble').click(function(e){
               var tr = e.currentTarget;
               if(tr == null){
                   tr = this;
+              }
               injectInlineForm(tr.parentNode.parentNode);
               show_comment_form($(this));
           });
           // inject comments into they proper positions
           var file_comments = $('.inline-comment-placeholder').toArray();
           renderInlineComments(file_comments);
           linkInlineComments($('.firstlink'), $('.comment'));
           move_comments($(".comments .comments-list-chunk"));
           pyroutes.register('changeset_home',
                             "${h.url('changeset_home', repo_name='%(repo_name)s', revision='%(revision)s')}",
                             ['repo_name', 'revision']);
           //next links
           $('#child_link').on('click', function(e){
               //fetch via ajax what is going to be the next link, if we have
               //>1 links show them to user to choose
               if(!$('#child_link').hasClass('disabled')){
                   $.ajax({
                     url: '${h.url('changeset_children',repo_name=c.repo_name, revision=c.changeset.raw_id)}',
                     success: function(data) {
                       if(data.results.length === 0){
                           $('#child_link').addClass('disabled');
                           $('#child_link').html('${_('No revisions')}');
+                      }
                       if(data.results.length === 1){
                           var commit = data.results[0];
                           window.location = pyroutes.url('changeset_home', {'repo_name': '${c.repo_name}','revision': commit.raw_id});
+                      }
                       else if(data.results.length === 2){
                           $('#child_link').addClass('disabled');
                           $('#child_link').addClass('double');
                           var _html = '';
                           _html +='<a title="__title__" href="__url__">__rev__</a> <i style="color:#036185" class="icon-right-open"></i>'
                                   .replace('__rev__','r{0}:{1}'.format(data.results[0].revision, data.results[0].raw_id.substr(0,6)))
                                   .replace('__title__', data.results[0].message)
                                   .replace('__url__', pyroutes.url('changeset_home', {'repo_name': '${c.repo_name}','revision': data.results[0].raw_id}));
                           _html +='<br/>'
                           _html +='<a title="__title__" href="__url__">__rev__</a> <i style="color:#036185" class="icon-right-open"></i>'
                                   .replace('__rev__','r{0}:{1}'.format(data.results[1].revision, data.results[1].raw_id.substr(0,6)))
                                   .replace('__title__', data.results[1].message)
                                   .replace('__url__', pyroutes.url('changeset_home', {'repo_name': '${c.repo_name}','revision': data.results[1].raw_id}));
                           $('#child_link').html(_html);
+                      }
+                    }
                   });
               e.preventDefault();
+              }
           });
           //prev links
           $('#parent_link').on('click', function(e){
               //fetch via ajax what is going to be the next link, if we have
               //>1 links show them to user to choose
               if(!$('#parent_link').hasClass('disabled')){
                   $.ajax({
                     url: '${h.url('changeset_parents',repo_name=c.repo_name, revision=c.changeset.raw_id)}',
                     success: function(data) {
                       if(data.results.length === 0){
                           $('#parent_link').addClass('disabled');
                           $('#parent_link').html('${_('No revisions')}');
+                      }
                       if(data.results.length === 1){
                           var commit = data.results[0];
                           window.location = pyroutes.url('changeset_home', {'repo_name': '${c.repo_name}','revision': commit.raw_id});
+                      }
                       else if(data.results.length === 2){
                           $('#parent_link').addClass('disabled');
                           $('#parent_link').addClass('double');
                           var _html = '';
                           _html +='<i style="color:#036185" class="icon-left-open"></i> <a title="__title__" href="__url__">__rev__</a>'
                                   .replace('__rev__','r{0}:{1}'.format(data.results[0].revision, data.results[0].raw_id.substr(0,6)))
                                   .replace('__title__', data.results[0].message)
                                   .replace('__url__', pyroutes.url('changeset_home', {'repo_name': '${c.repo_name}','revision': data.results[0].raw_id}));
                           _html +='<br/>'
                           _html +='<i style="color:#036185" class="icon-left-open"></i> <a title="__title__" href="__url__">__rev__</a>'
                                   .replace('__rev__','r{0}:{1}'.format(data.results[1].revision, data.results[1].raw_id.substr(0,6)))
                                   .replace('__title__', data.results[1].message)
                                   .replace('__url__', pyroutes.url('changeset_home', {'repo_name': '${c.repo_name}','revision': data.results[1].raw_id}));
                           $('#parent_link').html(_html);
+                      }
+                    }
                   });
               e.preventDefault();
+              }
           });
           // hack: re-navigate to target after JS is done ... if a target is set and setting href thus won't reload
           if (window.location.hash != "") {
               window.location.href = window.location.href;
+          }
       });
     </script>
     </div>
 </%def>

kallithea/templates/changeset/changeset_file_comment.html

➞

Show inline comments

 ## -*- coding: utf-8 -*-
 ## usage:
 ## <%namespace name="comment" file="/changeset/changeset_file_comment.html"/>
 ## ${comment.comment_block(co)}
 ##
 <%def name="comment_block(co)">
   <div class="comment" id="comment-${co.comment_id}" line="${co.line_no}">
     <div class="comment-prev-next-links"></div>
     <div class="comment-wrapp">
       <div class="meta">
           <div style="float:left">
                ${h.gravatar(co.author.email, size=20)}
           </div>
           <div class="user">
               ${co.author.full_name_and_username}
           </div>
           <span>
               ${h.age(co.modified_at)}
               %if co.pull_request:
                 ${_('on pull request')}
                 <a href="${co.pull_request.url()}">"${co.pull_request.title or _("No title")}"</a>
               %else:
                 ${_('on this changeset')}
               %endif
               <a class="permalink" href="${co.url()}">&para;</a>
           </span>
           %if h.HasPermissionAny('hg.admin')() or h.HasRepoPermissionAny('repository.admin')(c.repo_name) or co.author.user_id == c.authuser.user_id:
             <div onClick="confirm('${_("Delete comment?")}') && deleteComment(${co.comment_id})" class="buttons delete-comment btn btn-mini">${_('Delete')}</div>
           %endif
       </div>
       <div class="text">
         %if co.status_change:
            <div class="rst-block automatic-comment">
              <p>
                <span title="${_('Changeset status')}" class="changeset-status-lbl">${_("Status change")}: ${co.status_change[0].status_lbl}</span>
                <span class="changeset-status-ico"><i class="icon-circle changeset-status-${co.status_change[0].status}"></i></span>
              </p>
            </div>
         %endif
         %if co.text:
           ${h.rst_w_mentions(co.text)|n}
         %endif
       </div>
     </div>
   </div>
 </%def>
 ## expanded with .format(f_path, line_no)
 ## TODO: don't assume line_no is globally unique ...
 <%def name="comment_inline_form()">
 <div id='comment-inline-form-template' style="display:none">
   <div class="comment-inline-form ac">
   %if c.authuser.username != 'default':
     ${h.form('#', class_='inline-form')}
       <div id="edit-container_{1}" class="clearfix">
         <div class="comment-help">${_('Commenting on line {1}.')}
           ${(_('Comments parsed using %s syntax with %s support.') % (
                  ('<a href="%s">RST</a>' % h.url('rst_help')),
                    ('<span style="color:#577632" class="tooltip" title="%s">@mention</span>' % _('Use @username inside this text to notify another user'))
+               )
             )|n
+           }
         </div>
         <div class="mentions-container" id="mentions_container_{1}"></div>
         <textarea id="text_{1}" name="text" class="comment-block-ta yui-ac-input"></textarea>
       </div>
       <div id="preview-container_{1}" class="clearfix" style="display:none">
         <div class="comment-help">
             ${_('Comment preview')}
         </div>
         <div id="preview-box_{1}" class="preview-box"></div>
       </div>
       <div class="comment-button">
         <div class="submitting-overlay">${_('Submitting ...')}</div>
         <input type="hidden" name="f_path" value="{0}">
         <input type="hidden" name="line" value="{1}">
         ${h.submit('save', _('Comment'), class_='btn btn-small save-inline-form')}
         ${h.reset('hide-inline-form', _('Cancel'), class_='btn btn-small hide-inline-form')}
         <div id="preview-btn_{1}" class="preview-btn btn btn-small">${_('Preview')}</div>
         <div id="edit-btn_{1}" class="edit-btn btn btn-small" style="display:none">${_('Edit')}</div>
       </div>
     ${h.end_form()}
   %else:
       ${h.form('')}
       <div class="clearfix">
           <div class="comment-help">
             ${_('You need to be logged in to comment.')} <a href="${h.url('login_home',came_from=h.url.current())}">${_('Login now')}</a>
           </div>
       </div>
       <div class="comment-button">
       ${h.reset('hide-inline-form', _('Hide'), class_='btn btn-small hide-inline-form')}
       </div>
       ${h.end_form()}
   %endif
   </div>
 </div>
 </%def>
 ## show comment count as "x comments (y inline, z general)"
 <%def name="comment_count(inline_cnt, general_cnt)">
     ${'%s (%s, %s)' % (
         ungettext("%d comment", "%d comments", inline_cnt + general_cnt) % (inline_cnt + general_cnt),
         ungettext("%d inline", "%d inline", inline_cnt) % inline_cnt,
         ungettext("%d general", "%d general", general_cnt) % general_cnt
     )}
     <span class="firstlink"></span>
 </%def>
 ## generate inline comments and the main ones
 <%def name="generate_comments()">
 <div class="comments">
   <div class="comments-number">
     ${comment_count(c.inline_cnt, len(c.comments))}
   </div>
   <div id="inline-comments-container">
     %for path, lines in c.inline_comments:
         %for line, comments in lines.iteritems():
           <div style="display:none" class="inline-comment-placeholder" path="${path}" target_id="${h.safeid(h.safe_unicode(path))}">
   %for f_path, lines in c.inline_comments:
     %for line_no, comments in lines.iteritems():
       <div class="comments-list-chunk" data-f_path="${f_path}" data-line_no="${line_no}" data-target-id="${h.safeid(h.safe_unicode(f_path))}_${line_no}">
             %for co in comments:
                 ${comment_block(co)}
             %endfor
           </div>
         %endfor
     %endfor
   <div class="comments-number">
     ${comment_count(c.inline_cnt, len(c.comments))}
   </div>
       <div class="comments-list-general">
   %for co in c.comments:
         <div id="comment-tr-${co.comment_id}">
           ${comment_block(co)}
         %endfor
         </div>
   %endfor
 </div>
 </%def>
 ## MAIN COMMENT FORM
 <%def name="comments(post_url, cur_status, is_pr=False, change_status=True)">
 <div class="comments">
     %if c.authuser.username != 'default':
     <div class="comment-form ac">
       ${h.form(post_url, id="main_form")}
         <div id="edit-container" class="clearfix">
             <div class="comment-help">
                 ${(_('Comments parsed using %s syntax with %s support.') % (('<a href="%s">RST</a>' % h.url('rst_help')),
                   '<span style="color:#577632" class="tooltip" title="%s">@mention</span>' %
                   _('Use @username inside this text to notify another user.')))|n}
             </div>
             <div class="mentions-container" id="mentions_container"></div>
             ${h.textarea('text', class_="comment-block-ta")}
             %if change_status:
               <div id="status_block_container" class="status-block">
                 %if is_pr:
                   ${_('Vote for pull request status')}:
                 %else:
                   ${_('Set changeset status')}:
                 %endif
                 <input type="radio" class="status_change_radio" name="changeset_status" id="changeset_status_unchanged" value="" checked="checked" />
                 <label for="changeset_status_unchanged">
                   ${_('No change')}
                 </label>
                 %for status,lbl in c.changeset_statuses:
                     <span style="margin-left: 15px;">
                         <input type="radio" class="status_change_radio" name="changeset_status" id="${status}" value="${status}">
                         <label for="${status}"><i class="icon-circle changeset-status-${status}" /></i>${lbl}</label>
                     </span>
                 %endfor
                 %if is_pr and ( \
                     h.HasPermissionAny('hg.admin')() or h.HasRepoPermissionAny('repository.admin')(c.repo_name) \
                     or c.pull_request.author.user_id == c.authuser.user_id):
                   <input id="save_close" type="checkbox" name="save_close">
                   <label id="save_close_label" for="save_close">${_("Close")}</label>
                 %endif
               </div>
             %endif
         </div>
         <div id="preview-container" class="clearfix" style="display:none">
             <div class="comment-help">
                 ${_('Comment preview')}
             </div>
             <div id="preview-box" class="preview-box"></div>
         </div>
         <div class="comment-button">
             ${h.submit('save', _('Comment'), class_="btn")}
             <div id="preview-btn" class="preview-btn btn">${_('Preview')}</div>
             <div id="edit-btn" class="edit-btn btn" style="display:none">${_('Edit')}</div>
         </div>
       ${h.end_form()}
     </div>
     %endif
 </div>
 <script>
 $(document).ready(function () {
    MentionsAutoComplete('text', 'mentions_container', _USERS_AC_DATA, _GROUPS_AC_DATA);
    $(window).on('beforeunload', function(){
       if($('.form-open').size() || $('textarea#text').val()){
          // this message will not be displayed on all browsers
          // (e.g. some versions of Firefox), but the user will still be warned
          return 'There are uncommitted comments.';
+      }
    });
    $('form#main_form').submit(function(){
       // if no open inline forms, disable the beforeunload check - it would
       // fail in the check for the textarea we are about to submit
       if(!$('.form-open').size()){
           $(window).off('beforeunload');
+      }
    });
    $('#preview-btn').click(function(){
        var _text = $('#text').val();
        if(!_text){
            return;
+       }
        var post_data = {'text': _text};
        $('#preview-box').addClass('unloaded');
        $('#preview-box').html(_TM['Loading ...']);
        $('#edit-container').hide();
        $('#edit-btn').show();
        $('#preview-container').show();
        $('#preview-btn').hide();
        var url = pyroutes.url('changeset_comment_preview', {'repo_name': '${c.repo_name}'});
        ajaxPOST(url,post_data,function(html){
            $('#preview-box').html(html);
            $('#preview-box').removeClass('unloaded');
        });
    });
    $('#edit-btn').click(function(){
        $('#edit-container').show();
        $('#edit-btn').hide();
        $('#preview-container').hide();
        $('#preview-btn').show();
    });
 });
 </script>
 </%def>

kallithea/templates/pullrequests/pullrequest_show.html

➞

Show inline comments

@@ @@ -188,235 +188,230 @@ ${self.repo_context_bar('showpullrequest @@
                       %else:
                         <td>
                           %if editable and cs.revision in c.avail_revs:
                             ${h.radio(name='updaterev', value=cs.raw_id)}
                           %endif
                         </td>
                         <td>${h.link_to(h.show_id(cs),h.url('changeset_home',repo_name=c.cs_repo.repo_name,revision=cs.raw_id))}</td>
                         <td><div class="message" style="white-space:normal; height:1.1em; max-width: 500px; padding:0">${h.urlify_commit(cs.message, c.repo_name)}</div></td>
                       %endif
                     </tr>
                   %endfor
                 </table>
               </div>
               %endif
               <div class="msg-div">${c.update_msg_other}</div>
             </div>
         </div>
       </div>
     </div>
     ## REVIEWERS
     <div style="float:left; border-left:1px dashed #eee">
         <div class="pr-details-title">${_('Pull Request Reviewers')}</div>
         <div id="reviewers" style="padding:0px 0px 5px 10px">
           ## members goes here !
           <div>
             <ul id="review_members" class="group_members">
             %for member,status in c.pull_request_reviewers:
               ## WARNING: the HTML below is duplicate with
               ## kallithea/public/js/base.js
               ## If you change something here it should be reflected in the template too.
               <li id="reviewer_${member.user_id}">
                 <div class="reviewers_member">
                     <div class="reviewer_status tooltip" title="${h.changeset_status_lbl(status.status if status else 'not_reviewed')}">
                       <i class="icon-circle changeset-status-${status.status if status else 'not_reviewed'}"></i>
                     </div>
                   <div class="reviewer_gravatar gravatar">
                     ${h.gravatar(member.email, size=14)}
                   </div>
                   <div style="float:left;">
                     ${member.full_name_and_username}
                     %if c.pull_request.user_id == member.user_id:
                       (${_('Owner')})
                     %endif
                   </div>
                   <input type="hidden" value="${member.user_id}" name="review_members" />
                   %if editable:
                   <div class="reviewer_member_remove action_button" onclick="removeReviewMember(${member.user_id})" title="${_('Remove reviewer')}">
                       <i class="icon-minus-circled"></i>
                   </div>
                   %endif
                 </div>
               </li>
             %endfor
             </ul>
           </div>
           %if editable:
           <div class='ac'>
             <div class="reviewer_ac">
                ${h.text('user', class_='yui-ac-input',placeholder=_('Type name of reviewer to add'))}
                <div id="reviewers_container"></div>
             </div>
           </div>
           %endif
         </div>
         %if not c.pull_request_reviewers:
         <div class="pr-details-title">${_('Potential Reviewers')}</div>
         <div style="margin: 10px 0 10px 10px; max-width: 250px">
           <div>
             ${_('Click to add the repository owner as reviewer:')}
           </div>
           <ul style="margin-top: 10px">
             %for u in [c.pull_request.other_repo.user]:
               <li>
                 <a class="missing_reviewer missing_reviewer_${u.user_id}"
                   user_id="${u.user_id}"
                   fname="${u.name}"
                   lname="${u.lastname}"
                   nname="${u.username}"
                   gravatar_lnk="${h.gravatar_url(u.email, size=28)}"
                   gravatar_size="14"
                   title="Click to add reviewer to the list, then Save Changes.">${u.full_name}</a>
               </li>
             %endfor
           </ul>
         </div>
         %endif
     </div>
     <div class="form" style="clear:both">
       <div class="fields">
         %if editable:
           <div class="buttons">
             ${h.submit('pr-form-save',_('Save Changes'),class_="btn btn-small")}
             ${h.submit('pr-form-clone',_('Save as New Pull Request'),class_="btn btn-small",disabled='disabled')}
             ${h.reset('pr-form-reset',_('Cancel Changes'),class_="btn btn-small")}
           </div>
         %endif
       </div>
     </div>
   ${h.end_form()}
 </div>
 <div class="box">
     <div class="title">
       <div class="breadcrumbs">${_('Pull Request Content')}</div>
     </div>
     <div class="table">
           <div id="changeset_compare_view_content">
               <div style="font-size:1.1em;font-weight: bold;clear:both;padding-top:10px">
                   ${comment.comment_count(c.inline_cnt, len(c.comments))}
               </div>
               ##CS
               <div style="font-size:1.1em;font-weight: bold;clear:both;padding-top:10px">
                 ${ungettext('Showing %s commit','Showing %s commits', len(c.cs_ranges)) % len(c.cs_ranges)}
               </div>
               <%include file="/compare/compare_cs.html" />
               <div style="font-size:1.1em;font-weight: bold;clear:both;padding-top:10px">
               ${_('Common ancestor')}:
               ${h.link_to(h.short_id(c.a_rev),h.url('changeset_home',repo_name=c.a_repo.repo_name,revision=c.a_rev))}
               </div>
               ## FILES
               <div style="font-size:1.1em;font-weight: bold;clear:both;padding-top:10px">
               % if c.limited_diff:
                   ${ungettext('%s file changed', '%s files changed', len(c.files)) % len(c.files)}
               % else:
                   ${ungettext('%s file changed with %s insertions and %s deletions','%s files changed with %s insertions and %s deletions', len(c.files)) % (len(c.files),c.lines_added,c.lines_deleted)}:
               %endif
               </div>
               <div class="cs_files">
                 %if not c.files:
                    <span class="empty_data">${_('No files')}</span>
                 %endif
                 %for fid, change, f, stat in c.files:
                     <div class="cs_${change}">
                       <div class="node">
                           <i class="icon-diff-${change}"></i>
                           ${h.link_to(h.safe_unicode(f),'#' + fid)}
                       </div>
                       <div class="changes">${h.fancy_file_stats(stat)}</div>
                     </div>
                 %endfor
               </div>
               % if c.limited_diff:
                 <h5>${_('Changeset was too big and was cut off...')} <a href="${h.url.current(fulldiff=1, **request.GET.mixed())}">${_('Show full diff anyway')}</a></h5>
               % endif
           </div>
     </div>
     <script>
     var _USERS_AC_DATA = ${c.users_array|n};
     var _GROUPS_AC_DATA = ${c.user_groups_array|n};
     // TODO: switch this to pyroutes
     AJAX_COMMENT_URL = "${url('pullrequest_comment',repo_name=c.repo_name,pull_request_id=c.pull_request.pull_request_id)}";
     AJAX_COMMENT_DELETE_URL = "${url('pullrequest_comment_delete',repo_name=c.repo_name,comment_id='__COMMENT_ID__')}";
     pyroutes.register('pullrequest_comment', "${url('pullrequest_comment',repo_name='%(repo_name)s',pull_request_id='%(pull_request_id)s')}", ['repo_name', 'pull_request_id']);
     pyroutes.register('pullrequest_comment_delete', "${url('pullrequest_comment_delete',repo_name='%(repo_name)s',comment_id='%(comment_id)s')}", ['repo_name', 'comment_id']);
     </script>
     ## diff block
     <div class="commentable-diff">
     <%namespace name="diff_block" file="/changeset/diff_block.html"/>
     ${diff_block.diff_block_js()}
     %for fid, change, f, stat in c.files:
       ${diff_block.diff_block_simple([c.changes[fid]])}
     %endfor
     % if c.limited_diff:
       <h4>${_('Changeset was too big and was cut off...')} <a href="${h.url.current(fulldiff=1, **request.GET.mixed())}">${_('Show full diff anyway')}</a></h4>
     % endif
     </div>
     ## template for inline comment form
     ${comment.comment_inline_form()}
     ## render comments and inlines
     ${comment.generate_comments()}
     ## main comment form and it status
     ${comment.comments(h.url('pullrequest_comment', repo_name=c.repo_name,
                               pull_request_id=c.pull_request.pull_request_id),
                        c.current_voting_result,
                        is_pr=True, change_status=c.allowed_to_change_status)}
     <script type="text/javascript">
       $(document).ready(function(){
           PullRequestAutoComplete('user', 'reviewers_container', _USERS_AC_DATA);
           $('.add-bubble').click(function(e){
               var tr = e.currentTarget;
               injectInlineForm(tr.parentNode.parentNode);
               show_comment_form($(this));
           });
           var avail_jsdata = ${c.avail_jsdata|n};
           var avail_r = new BranchRenderer('avail_graph_canvas', 'updaterevs-table', 'chg_available_');
           avail_r.render(avail_jsdata,40);
           // inject comments into they proper positions
           var file_comments = $('.inline-comment-placeholder').toArray();
           renderInlineComments(file_comments);
           linkInlineComments($('.firstlink'), $('.comment'));
           move_comments($(".comments .comments-list-chunk"));
           $('#updaterevs input').change(function(e){
               var update = !!e.target.value;
               $('#pr-form-save').prop('disabled',update);
               $('#pr-form-clone').prop('disabled',!update);
           });
           var $org_review_members = $('#review_members').clone();
           $('#pr-form-reset').click(function(e){
               $('#pr-edit-form').hide();
               $('.pr-not-edit').show();
               $('#pr-form-save').prop('disabled',false);
               $('#pr-form-clone').prop('disabled',true);
               $('#review_members').html($org_review_members);
           });
           // hack: re-navigate to target after JS is done ... if a target is set and setting href thus won't reload
           if (window.location.hash != "") {
               window.location.href = window.location.href;
+          }
           $('.missing_reviewer').click(function(){
             var $this = $(this);
             addReviewMember($this.attr('user_id'), $this.attr('fname'), $this.attr('lname'), $this.attr('nname'), $this.attr('gravatar_lnk'), $this.attr('gravatar_size'));
           });
       });
     </script>
 </div>
 </%def>

kallithea/tests/functional/test_changeset_comments.py

➞

Show inline comments

 from kallithea.tests import *
 from kallithea.model.db import ChangesetComment, Notification, \
     UserNotification
 from kallithea.model.meta import Session
 class TestChangeSetCommentsController(TestController):
     def setUp(self):
         for x in ChangesetComment.query().all():
             Session().delete(x)
         Session().commit()
         self.remove_all_notifications()
     def test_create(self):
         self.log_user()
         rev = '27cd5cce30c96924232dffcd24178a07ffeb5dfc'
         text = u'CommentOnRevision'
         params = {'text': text, '_authentication_token': self.authentication_token()}
         response = self.app.post(url(controller='changeset', action='comment',
                                      repo_name=HG_REPO, revision=rev),
                                      params=params)
         # Test response...
         self.assertEqual(response.status, '302 Found')
         response.follow()
         response = self.app.get(url(controller='changeset', action='index',
                                 repo_name=HG_REPO, revision=rev))
         # test DB
         self.assertEqual(ChangesetComment.query().count(), 1)
         response.mustcontain(
             '''<div class="comments-number">'''
             ''' 1 comment (0 inline, 1 general)'''
+        )
         self.assertEqual(Notification.query().count(), 1)
         self.assertEqual(ChangesetComment.query().count(), 1)
         notification = Notification.query().all()[0]
         ID = ChangesetComment.query().first().comment_id
         self.assertEqual(notification.type_,
                          Notification.TYPE_CHANGESET_COMMENT)
         sbj = (u'/%s/changeset/'
                '27cd5cce30c96924232dffcd24178a07ffeb5dfc#comment-%s' % (HG_REPO, ID))
         print "%s vs %s" % (sbj, notification.subject)
         self.assertTrue(sbj in notification.subject)
     def test_create_inline(self):
         self.log_user()
         rev = '27cd5cce30c96924232dffcd24178a07ffeb5dfc'
         text = u'CommentOnRevision'
         f_path = 'vcs/web/simplevcs/views/repository.py'
         line = 'n1'
         params = {'text': text, 'f_path': f_path, 'line': line, '_authentication_token': self.authentication_token()}
         response = self.app.post(url(controller='changeset', action='comment',
                                      repo_name=HG_REPO, revision=rev),
                                      params=params)
         # Test response...
         self.assertEqual(response.status, '302 Found')
         response.follow()
         response = self.app.get(url(controller='changeset', action='index',
                                 repo_name=HG_REPO, revision=rev))
         #test DB
         self.assertEqual(ChangesetComment.query().count(), 1)
         response.mustcontain(
             '''<div class="comments-number">'''
             ''' 1 comment (1 inline, 0 general)'''
+        )
         response.mustcontain(
             '''<div style="display:none" class="inline-comment-placeholder" '''
             '''path="vcs/web/simplevcs/views/repository.py" '''
             '''target_id="vcswebsimplevcsviewsrepositorypy">'''
             '''<div class="comments-list-chunk" '''
             '''data-f_path="vcs/web/simplevcs/views/repository.py" '''
             '''data-line_no="n1" data-target-id="vcswebsimplevcsviewsrepositorypy_n1">'''
+        )
         self.assertEqual(Notification.query().count(), 1)
         self.assertEqual(ChangesetComment.query().count(), 1)
         notification = Notification.query().all()[0]
         ID = ChangesetComment.query().first().comment_id
         self.assertEqual(notification.type_,
                          Notification.TYPE_CHANGESET_COMMENT)
         sbj = (u'/%s/changeset/'
                '27cd5cce30c96924232dffcd24178a07ffeb5dfc#comment-%s' % (HG_REPO, ID))
         print "%s vs %s" % (sbj, notification.subject)
         self.assertTrue(sbj in notification.subject)
     def test_create_with_mention(self):
         self.log_user()
         rev = '27cd5cce30c96924232dffcd24178a07ffeb5dfc'
         text = u'@%s check CommentOnRevision' % TEST_USER_REGULAR_LOGIN
         params = {'text': text, '_authentication_token': self.authentication_token()}
         response = self.app.post(url(controller='changeset', action='comment',
                                      repo_name=HG_REPO, revision=rev),
                                      params=params)
         # Test response...
         self.assertEqual(response.status, '302 Found')
         response.follow()
         response = self.app.get(url(controller='changeset', action='index',
                                 repo_name=HG_REPO, revision=rev))
         # test DB
         self.assertEqual(ChangesetComment.query().count(), 1)
         response.mustcontain(
             '''<div class="comments-number">'''
             ''' 1 comment (0 inline, 1 general)'''
+        )
         self.assertEqual(Notification.query().count(), 2)
         users = [x.user.username for x in UserNotification.query().all()]
         # test_regular gets notification by @mention
         self.assertEqual(sorted(users), [TEST_USER_ADMIN_LOGIN, TEST_USER_REGULAR_LOGIN])
     def test_delete(self):
         self.log_user()
         rev = '27cd5cce30c96924232dffcd24178a07ffeb5dfc'
         text = u'CommentOnRevision'
         params = {'text': text, '_authentication_token': self.authentication_token()}
         response = self.app.post(url(controller='changeset', action='comment',
                                      repo_name=HG_REPO, revision=rev),
                                      params=params)
         comments = ChangesetComment.query().all()
         self.assertEqual(len(comments), 1)
         comment_id = comments[0].comment_id
         self.app.delete(url(controller='changeset',
                                     action='delete_comment',
                                     repo_name=HG_REPO,
                                     comment_id=comment_id))
         comments = ChangesetComment.query().all()
         self.assertEqual(len(comments), 0)
         response = self.app.get(url(controller='changeset', action='index',
                                 repo_name=HG_REPO, revision=rev))
         response.mustcontain(
             '''<div class="comments-number">'''
             ''' 0 comments (0 inline, 0 general)'''
+        )

0 comments (0 inline, 0 general)