Skip to content

Commit 7433c5e

Browse files
MartiiMartii
authored
Embed the comment editor (#1204)
* Few minor HTML fixes * Rewrote client side script to not be in jQuery. Polyfill for older browsers.. applies to #904 * Reference FAQ and GFM Closes #1197 Auto-merge
1 parent c91be85 commit 7433c5e

9 files changed

+97
-95
lines changed

‎views/includes/commentEditor.html

+6-4
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,16 @@
2121
</div>
2222
<div class="topic-post-contents row">
2323
<div class="user-data">
24-
<textarea name="comment-content" data-provide="markdown" data-iconlibrary="fa" class="col-xs-12" placeholder="Type here using Markdown." required></textarea>
24+
<textarea name="comment-content" data-provide="markdown" data-iconlibrary="fa" class="col-xs-12" placeholder="Type here using Markdown." required="required"></textarea>
2525
</div>
2626
<section class="post-menu-area">
27-
<nav class="post-controls text-right">
28-
<button class="btn btn-sm btn-success" title="submit your comment" type="submit">
27+
<div class="submit-panel btn-toolbar">
28+
<a href="/about/Frequently-Asked-Questions"><i class="fa fa-book"></i></a>
29+
<a href="https://guides.github.com/features/mastering-markdown/" title="GitHub Flavor Markdown compatible"><i class="octicon octicon-markdown"></i></a>
30+
<button class="btn btn-sm btn-success pull-right" title="submit your comment" type="submit">
2931
<i class="fa fa-fw fa-reply"></i> Submit
3032
</button>
31-
</nav>
33+
</div>
3234
</section>
3335
</div>
3436
</div>

‎views/includes/commentForm.html

+34-8
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,37 @@
1-
<div id="reply-control" class="collapse">
2-
<form action="{{{discussion.discussionPageUrl}}}" method="post">
3-
<div class="container-fluid row user-content">
4-
<div class="submit-panel pull-right btn-toolbar">
5-
<button class="btn btn-sm btn-danger" type="button" data-toggle="collapse" data-target="#reply-control"><i class="fa fa-close"></i> Cancel</button>
6-
<button class="btn btn-sm btn-success" type="submit"><i class="fa fa-reply"></i> Reply</button>
1+
<div class="topic-post list-group-item">
2+
<article>
3+
<div class="row">
4+
<div class="topic-avatar col-sm-2">
5+
<a href="{{{authedUser.userPageUrl}}}">
6+
<i class="fa fa-user"></i>
7+
</a>
8+
</div>
9+
<div class="topic-body col-sm-10 container-fluid">
10+
<div class="topic-meta-data row">
11+
<div class="names pull-left">
12+
<span>
13+
<a href="{{{authedUser.userPageUrl}}}" class="username">{{authedUser.name}}</a> <span class="label label-default">{{authedUser.roleName}}</span>
14+
</span>
15+
</div>
16+
<div class="post-info pull-right">
17+
<a class="post-date">
18+
<time datetime="" title=""></time>
19+
</a>
20+
</div>
21+
</div>
22+
<div class="topic-post-contents row">
23+
<form action="{{{discussion.discussionPageUrl}}}" method="post">
24+
<div class="container-fluid row user-content">
25+
<textarea name="comment-content" data-provide="markdown" data-iconlibrary="fa" class="col-xs-12" placeholder="Type here using Markdown." required="required"></textarea>
26+
<div class="submit-panel btn-toolbar">
27+
<a href="/about/Frequently-Asked-Questions"><i class="fa fa-book"></i></a>
28+
<a href="https://guides.github.com/features/mastering-markdown/"><i class="octicon octicon-markdown" title="GitHub Flavor Markdown compatible"></i></a>
29+
<button class="btn-sm btn btn-success pull-right" type="submit"><i class="fa fa-reply"></i> Reply</button>
30+
</div>
31+
</div>
32+
</form>
33+
</div>
734
</div>
8-
<textarea name="comment-content" data-provide="markdown" data-iconlibrary="fa" class="col-xs-12" placeholder="Type here using Markdown."></textarea>
935
</div>
10-
</form>
36+
</article>
1137
</div>

‎views/includes/scripts/commentReplyScript.html

+23-56
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,47 @@
11
<script type="text/javascript">
22
(function () {
3+
'use strict';
34

4-
var events = 'DOMContentLoaded load resize scroll';
5-
var handler = null;
6-
var didCallback = false;
5+
{{> includes/scripts/polyfillElementClosest.js }}
76

8-
$('#reply-control').on('show.bs.collapse', function () {
9-
// Show spacer div
10-
$('#show-reply-form-when-visible').css({
11-
height:
12-
{{#paginationRendered}}'210px'{{/paginationRendered}}
13-
{{^paginationRendered}}'268px'{{/paginationRendered}}
14-
});
15-
});
16-
17-
$('#reply-control').on('hide.bs.collapse', function () {
18-
// Hide spacer div
19-
$('#show-reply-form-when-visible').css({
20-
height: '0'
21-
});
22-
23-
// Clear text value from reply box
24-
$('#reply-control textarea[name="comment-content"]').val('');
25-
});
26-
27-
$('.btn-comment-reply').click(function (aE) {
28-
var $comment = $(aE.target).closest('.topic-post');
29-
var $author = $comment.find('.topic-meta-data .names .username').first();
30-
var $replyTextarea = $('#reply-control textarea[name="comment-content"]');
7+
function onClick(aEv) {
8+
var commentNode = document.querySelector('textarea[name="comment-content"]');
9+
var containerNode = aEv.target.closest('.topic-post');
10+
var authorNode = containerNode.querySelector('.topic-meta-data .names .username');
3111
var value = null;
32-
var reUrl = null;
12+
var url = null;
3313

34-
$('#reply-control').collapse('show');
14+
document.location.hash = containerNode.id;
3515

36-
document.location.hash = $comment.attr('id');
16+
url = document.location.pathname + document.location.search + document.location.hash;
17+
url = url.replace(/\(/g, '%28').replace(/\)/g, '%29');
3718

38-
reUrl = document.location.pathname +
39-
document.location.search +
40-
document.location.hash;
41-
reUrl = reUrl.replace(/\(/g, '%28').replace(/\)/g, '%29');
19+
value = commentNode.value;
4220

43-
value = $replyTextarea.val();
4421
if (!/^\s*$/.test(value)) {
4522
// Add linebreaks if reply already started.
4623
value += '\n\n';
4724
}
48-
value += '[Re](' + reUrl + '): ';
49-
value += '@' + $author.text() + ': ';
50-
value += ' \n';
51-
$replyTextarea.val(value);
52-
$replyTextarea.focus();
53-
});
5425

55-
function callback(aEl) {
56-
if (!didCallback) {
57-
didCallback = true;
26+
value += '[Re](' + url + '): ';
27+
value += '@' + authorNode.textContent + ': ';
28+
value += ' \n';
5829

59-
$('#reply-control').collapse('show');
60-
$('#reply-control textarea[name="comment-content"]').focus();
61-
}
30+
commentNode.value = value;
31+
commentNode.focus();
6232
}
6333

64-
{{> includes/scripts/isElementInViewport.js }}
65-
66-
function fireIfElementVisible(aEl, aCallback) {
67-
return function () {
68-
if (isElementInViewport(aEl)) {
69-
$(window).off(events, handler);
34+
function onDOMContentLoaded(aEv) {
35+
var i = null;
36+
var thisNode = null;
37+
var replyNodes = document.querySelectorAll('.btn-comment-reply');
7038

71-
aCallback(aEl);
72-
}
39+
for (i = 0; thisNode = replyNodes[i++];) {
40+
thisNode.addEventListener('click', onClick);
7341
}
7442
}
7543

76-
handler = fireIfElementVisible($('#show-reply-form-when-visible'), callback);
77-
$(window).on(events, handler);
44+
document.addEventListener('DOMContentLoaded', onDOMContentLoaded);
7845

7946
})();
8047
</script>

‎views/includes/scripts/polyfillElementClosest.js

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
// IE8+, Opera Presto, and older browser Element.Polyfill
2+
3+
if (window.Element && !Element.prototype.closest) {
4+
Element.prototype.closest =
5+
function(aSelector) {
6+
var matches = (this.document || this.ownerDocument).querySelectorAll(aSelector);
7+
var i;
8+
var el = this;
9+
10+
do {
11+
i = matches.length;
12+
while (--i >= 0 && matches.item(i) !== el) {
13+
};
14+
} while ((i < 0) && (el = el.parentElement));
15+
16+
return el;
17+
};
18+
}

‎views/pages/discussionPage.html

+6-11
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,6 @@
44
<title>{{title}}</title>
55
{{> includes/head.html }}
66
<link rel="stylesheet" type="text/css" media="all" href="/redist/npm/bootstrap-markdown/css/bootstrap-markdown.min.css">
7-
<style>
8-
#show-reply-form-when-visible {
9-
-moz-transition: height 1s ease;
10-
-ms-transition: height 1s ease;
11-
-o-transition: height 1s ease;
12-
-webkit-transition: height 1s ease;
13-
transition: height 1s ease;
14-
}
15-
</style>
167
</head>
178
<body>
189
{{> includes/header.html }}
@@ -45,6 +36,11 @@
4536
</div>
4637
{{/paginationRendered}}
4738
</section>
39+
{{#authedUser}}
40+
<section class="topic-area list-group">
41+
{{> includes/commentForm.html }}
42+
</section>
43+
{{/authedUser}}
4844
</div>
4945
</div>
5046
</div>
@@ -54,8 +50,7 @@
5450
</div>
5551
</div>
5652
</div>
57-
<div id="show-reply-form-when-visible"></div>
58-
{{> includes/commentForm.html }}
53+
5954
{{> includes/footer.html }}
6055
{{#paginationRendered}}
6156
{{> includes/scripts/showTopPagination.html }}

‎views/pages/newDiscussionPage.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<ol class="breadcrumb col-xs-12">
1818
<li><a href="/forum">Forum</a></li>
1919
<li><a href="{{{category.categoryPageUrl}}}">{{category.name}}</a></li>
20-
<li><input type="text" id="discussion-topic" name="discussion-topic" size="60" placeholder="Topic" required></li>
20+
<li><input type="text" id="discussion-topic" name="discussion-topic" size="60" placeholder="Topic" required="required"></li>
2121
</ol>
2222
</div>
2323
<div class="container-fluid comments">

‎views/pages/scriptIssuePage.html

+7-13
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,6 @@
55
{{> includes/head.html }}
66
<link rel="stylesheet" type="text/css" media="all" href="/redist/npm/bootstrap-markdown/css/bootstrap-markdown.min.css">
77
<link rel="stylesheet" type="text/css" media="all" href="/css/scriptPage.css">
8-
<style>
9-
#show-reply-form-when-visible {
10-
-moz-transition: height 1s ease;
11-
-ms-transition: height 1s ease;
12-
-o-transition: height 1s ease;
13-
-webkit-transition: height 1s ease;
14-
transition: height 1s ease;
15-
}
16-
</style>
178
</head>
189
<body>
1910
{{> includes/header.html }}
@@ -53,6 +44,11 @@
5344
</div>
5445
{{/paginationRendered}}
5546
</section>
47+
{{#authedUser}}
48+
<section class="topic-area list-group">
49+
{{> includes/commentForm.html }}
50+
</section>
51+
{{/authedUser}}
5652
</div>
5753
</div>
5854
</div>
@@ -63,16 +59,14 @@
6359
</div>
6460
</div>
6561

66-
<div id="show-reply-form-when-visible"></div>
67-
{{> includes/commentForm.html }}
6862
{{> includes/footer.html }}
6963
{{#paginationRendered}}
7064
{{> includes/scripts/showTopPagination.html }}
7165
{{/paginationRendered}}
7266
{{> includes/scripts/lazyIconScript.html }}
7367
{{#authedUser}}
74-
{{> includes/scripts/markdownEditor.html }}
75-
{{> includes/scripts/commentReplyScript.html }}
68+
{{> includes/scripts/markdownEditor.html }}
69+
{{> includes/scripts/commentReplyScript.html }}
7670
{{/authedUser}}
7771
{{^authedUser}}
7872
{{> includes/scripts/commentReplyTooltip.html }}

‎views/pages/scriptNewIssuePage.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
<li><a href="{{{script.scriptPageUrl}}}">{{script.name}}</a></li>
1919
<li><a href="{{{category.categoryPageUrl}}}">{{category.name}}</a></li>
2020
<li class="col-xs-12">
21-
<input type="text" id="discussion-topic" name="discussion-topic" size="60" placeholder="Topic" required>
21+
<input type="text" id="discussion-topic" name="discussion-topic" size="60" placeholder="Topic" required="required">
2222
</li>
2323
</ol>
2424
</div>

‎views/pages/scriptViewSourcePage.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
<div class="pull-left">
3535
{{#isLib}}
3636
{{#newScript}}
37-
<strong>Library Name:</strong> <input type="text" name="script_name" value="" required>
37+
<strong>Library Name:</strong> <input type="text" name="script_name" value="" required="required">
3838
{{/newScript}}
3939
{{^newScript}}
4040
<input type="hidden" name="script_name" value="{{scriptName}}" />

0 commit comments

Comments
 (0)