From b9646b48571f4ac6aa13f593d68db0810bdd3677 Mon Sep 17 00:00:00 2001 From: Maximilian Grundke Date: Wed, 23 Aug 2017 18:25:27 +0200 Subject: [PATCH] Refactor content creation --- app/views/request_for_comments/show.html.erb | 132 +++++++++++-------- 1 file changed, 75 insertions(+), 57 deletions(-) diff --git a/app/views/request_for_comments/show.html.erb b/app/views/request_for_comments/show.html.erb index 470dcf8f..92892b04 100644 --- a/app/views/request_for_comments/show.html.erb +++ b/app/views/request_for_comments/show.html.erb @@ -137,6 +137,7 @@ also, all settings from the rails model needed for the editor configuration in t currentEditor.getSession().setMode($(editor).data('mode')); currentEditor.getSession().setOption("useWorker", false); + currentEditor.annotationsByLine = {}; setAnnotations(currentEditor, $(editor).data('file-id')); currentEditor.on("guttermousedown", handleSidebarClick); }); @@ -147,73 +148,90 @@ also, all settings from the rails model needed for the editor configuration in t } function preprocess(commentText) { - // sanitize comments to deal with XSS attacks: - commentText = $('div.sanitizer').text(commentText).html(); - // display original line breaks: - return commentText.replace(/\n/g, '
'); + // sanitize comments to deal with XSS attacks: + commentText = $('div.sanitizer').text(commentText).html(); + // display original line breaks: + return commentText.replace(/\n/g, '
'); + } + + function clusterComments(comments) { + var clusters = {}; + // comments need to be sorted to cluster them per line + comments.sort(function (a, b) { + return a.row - b.row; + }); + while (comments.length > 0) { + // new cluster of comments + var cluster = []; + var clusterRow = comments[0].row; + // now collect all comments on this line + while (comments.length > 0 && comments[0].row === clusterRow) { + cluster.push(comments.shift()); + } + // sort the comments by creation date + cluster = cluster.sort(function (a, b) { + return a.id - b.id; + }); + clusters[clusterRow] = cluster; + } + return clusters; + } + + function generateCommentHtmlContent(comments) { + var htmlContent = ''; + comments.forEach(function(comment, index) { + if (index !== 0) { + htmlContent += '
' + } + htmlContent += '

'; + htmlContent += '

' + + '
' + preprocess(comment.username) + '
' + + '
' + comment.date + '
'; + if (comment.updated) { + htmlContent += '
' + + '' + + '<%= t('request_for_comments.comment_edited') %>' + + '
' + } + htmlContent += '
'; + htmlContent += '
' + preprocess(comment.text) + '
'; + htmlContent += '

'; + }); + return htmlContent; + } + + function buildPopover(fileid, line, htmlContent) { + // attach the popover to the ace sidebar (where the comment icon is displayed) + var icon = $('*[data-file-id="' + fileid + '"]') // the editor for this file + .find('.ace_gutter > .ace_gutter-layer') // the sidebar + .find('div:nth-child(' + (parseInt(line) + 1) + ')'); // the correct line + icon.popover({ + content: htmlContent, + html: true, // necessary to style comments. XSS is not possible due to comment pre-processing (sanitizing) + trigger: 'hover', + container: 'body' + }); } function setAnnotations(editor, fileid) { var session = editor.getSession(); var jqrequest = $.ajax({ - dataType: 'json', - method: 'GET', - url: '/comments', - data: { - file_id: fileid - } + dataType: 'json', + method: 'GET', + url: '/comments', + data: { + file_id: fileid + } }); jqrequest.done(function(response){ - // comments need to be sorted to cluster them per line - var comments = response.slice().sort(function (a, b) { - return a.row - b.row; - }); - while (comments.length > 0) { - // new cluster of comments - var cluster = []; - var clusterRow = comments[0].row; - // now collect all comments on this line - while (comments.length > 0 && comments[0].row === clusterRow) { - cluster.push(comments.shift()); + editor.annotationsByLine = clusterComments(response.slice()); + for (var line in editor.annotationsByLine) { + if (editor.annotationsByLine.hasOwnProperty(line)) { + var htmlContent = generateCommentHtmlContent(editor.annotationsByLine[line]); + buildPopover(fileid, line, htmlContent); } - // sort the comments by creation date - cluster = cluster.sort(function (a, b) { - return a.id - b.id; - }); - - // build the markup for the current line's popover - var popupContent = ''; - cluster.forEach(function(comment, index) { - if (index !== 0) { - popupContent += '
' - } - popupContent += '

'; - popupContent += '

' + - '
' + preprocess(comment.username) + '
' + - '
' + comment.date + '
'; - if (comment.updated) { - popupContent += '
' + - '' + - '<%= t('request_for_comments.comment_edited') %>' + - '
' - } - popupContent += '
'; - popupContent += '
' + preprocess(comment.text) + '
'; - popupContent += '

'; - }); - - // attach the popover to the ace sidebar (where the comment icon is displayed) - var icon = $('*[data-file-id="' + fileid + '"]') // the editor for this file - .find('.ace_gutter > .ace_gutter-layer') // the sidebar - .find('div:nth-child(' + (clusterRow + 1) + ')'); // the correct line - icon.popover({ - content: popupContent, - html: true, // necessary to style comments. XSS is not possible due to comment pre-processing (sanitizing) - trigger: 'hover', - container: 'body' - }); } $.each(response, function(index, comment) {