Skip to content
This repository has been archived by the owner on Sep 5, 2020. It is now read-only.

Question Comments #167

Merged
merged 8 commits into from
Jan 13, 2015
Merged

Question Comments #167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
beba07d
Start question IDs at 1
bjb568 Jan 10, 2015
b8c92da
`Invalid upgrade URL` err added to sockets
bjb568 Jan 10, 2015
899f930
Q&A Comments
bjb568 Jan 10, 2015
810c474
Space between comment score and comment body
bjb568 Jan 10, 2015
0b853e7
Put .score class and hidden .scrtrls into main.css
bjb568 Jan 10, 2015
380ef26
Merge pull request #165 from bjb568/Q&A-Comments
bjb568 Jan 10, 2015
af9770f
Fixed language suggestions on ask page
bjb568 Jan 11, 2015
6ea3c11
Fix submit button on question preview
bjb568 Jan 11, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
50 changes: 38 additions & 12 deletions buildpage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -429,18 +429,44 @@ http.createServer(function(req, res) {
respondPage(question.lang + ': ' + question.title, user, req, res, function() {
dbcs.users.findOne({name: question.user}, function(err, op) {
if (err) throw err;
fs.readFile('./html/qa/question.html', function(err, data) {
var commentstr = '';
dbcs.comments.find({question: question._id}).sort({_id: 1}).each(function(err, comment) {
if (err) throw err;
res.write(data.toString()
.replaceAll(
['$title', '$lang', '$description', '$rawdesc', '$question', '$rawq', '$code', '$type'],
[html(question.title), question.lang, markdown(question.description), html(question.description), markdown(question.question), html(question.question), html(question.code), question.type]
).replace('$cat', question.cat || '<span title="Plain, without any frameworks or libraries">(vanilla)</span>').replaceAll(
['$op-name', '$op-rep', '$op-pic'],
[op.name, op.rep.toString(), '//gravatar.com/avatar/' + op.mailhash + '?s=576&amp;d=identicon']
)
);
respondPageFooter(res);
if (comment) {
var votes = comment.votes || [],
voted;
for (var i in votes) if (votes[i].user == user.name) voted = true;
commentstr +=
'<div id="c' + comment._id + '" class="comment">' +
'<span class="score" data-score="' + (comment.votes || []).length + '">' + (comment.votes || []).length + '</span> ' +
(
user && user.rep >= 50 ?
(
'<span class="sctrls">' +
'<svg class="up' + (voted ? ' clkd' : '') + '" xmlns="http://www.w3.org/2000/svg"><polygon points="7,-1 0,11 5,11 5,16 9,16 9,11 14,11" /></svg>' +
'<svg class="fl" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 13,0 13,8 4,8 4,16 0,16" /></svg>' +
'</span>'
) :
''
) + markdown(comment.body) + '<span class="c-sig">-<a href="/user/' + comment.user + '">' + comment.user + '</a>, <a href="#c' + comment._id + '" title="Permalink"><time datetime="' + new Date(comment.time).toISOString() + '"></time></a></span></div>';
} else {
fs.readFile('./html/qa/question.html', function(err, data) {
if (err) throw err;
res.write(data.toString()
.replaceAll(
['$id', '$title', '$lang', '$description', '$rawdesc', '$question', '$rawq', '$code', '$type'],
[question._id.toString(), html(question.title), question.lang, markdown(question.description), html(question.description), markdown(question.question), html(question.question), html(question.code), question.type]
).replaceAll(
['$qcommentstr', '$rep'],
[commentstr, user.rep.toString()]
).replace('$cat', question.cat || '<span title="Plain, without any frameworks or libraries">(vanilla)</span>').replaceAll(
['$op-name', '$op-rep', '$op-pic'],
[op.name, op.rep.toString(), '//gravatar.com/avatar/' + op.mailhash + '?s=576&amp;d=identicon']
)
);
respondPageFooter(res);
});
}
});
});
});
Expand Down Expand Up @@ -665,7 +691,7 @@ http.createServer(function(req, res) {
dbcs.users.findOne({name: program.user}, function(err, op) {
if (err) throw err;
var commentstr = '';
dbcs.comments.find({program: program._id}).sort({_id: -1}).each(function(err, comment) {
dbcs.comments.find({program: program._id}).sort({_id: 1}).each(function(err, comment) {
if (err) throw err;
if (comment) {
var votes = comment.votes || [],
Expand Down
4 changes: 2 additions & 2 deletions front.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -448,7 +448,7 @@ http.createServer(function(req, res) {
}
dbcs.questions.find().sort({_id: -1}).limit(1).nextObject(function(err, last) {
if (err) throw err;
var id = last ? last._id + 1 : 0;
var id = last ? last._id + 1 : 1;
dbcs.questions.insert({
_id: id,
title: post.title,
Expand Down Expand Up @@ -732,7 +732,7 @@ http.createServer(function(req, res) {
for (var i in post) {
if (i.substr(0, 2) == 'ck') cat.push(i.substr(2));
}
res.write('<button onclick="request(\'/api/qa/newquestion\', function(res) { if (res.substr(0, 7) == \'Error: \') alert(res); elseif (res.substr(0, 10) == \'Location: \') location.href = res; else alert(\'Unknown error. Response was: \' + res) }, ' + html(JSON.stringify(
res.write('<button onclick="request(\'/api/qa/newquestion\', function(res) { if (res.substr(0, 7) == \'Error: \') alert(res); else if (res.substr(0, 10) == \'Location: \') location.href = res.substr(10); else alert(\'Unknown error. Response was: \' + res) }, ' + html(JSON.stringify(
'title=' + encodeURIComponent(post.title) +
'&lang=' + encodeURIComponent(post.lang) +
'&description=' + encodeURIComponent(post.description) +
Expand Down
42 changes: 1 addition & 41 deletions html/dev/canvas.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,46 +149,6 @@ <h1><span id="title">$title</span> <input type="text" id="edit-title" hidden=""
transition: fill 0.1s;
fill: #c00;
}
#content > .sctrls { display: none }
.score {
float: left;
display: block;
margin-right: 4px;
color: #f00;
padding: 0 4px;
}
.score[data-score="0"] { display: none }
.score[data-score="1"] { color: #888 }
.score[data-score="2"] { color: #666 }
.score[data-score="3"] { color: #444 }
.score[data-score="4"] { color: #222 }
.score[data-score="5"] { color: #000 }
.score[data-score="6"] { color: #001 }
.score[data-score="7"] { color: #002 }
.score[data-score="8"] { color: #003 }
.score[data-score="9"] { color: #004 }
.score[data-score="10"] { color: #005 }
.score[data-score="11"] { color: #006 }
.score[data-score="12"] { color: #007 }
.score[data-score="13"] { color: #008 }
.score[data-score="14"] { color: #009 }
.score[data-score="15"] { color: #00a }
.score[data-score="16"] { color: #00b }
.score[data-score="17"] { color: #00c }
.score[data-score="18"] { color: #00d }
.score[data-score="19"] { color: #00e }
.score[data-score="20"] { color: #00f }
.score[data-score="21"] { color: #33f }
.score[data-score="22"] { color: #66f }
.score[data-score="23"] { color: #f90 }
.score[data-score="24"] { color: #f80 }
.score[data-score="25"] { color: #f70 }
.score[data-score="26"] { color: #f60 }
.score[data-score="27"] { color: #f50 }
.score[data-score="28"] { color: #f40 }
.score[data-score="29"] { color: #f30 }
.score[data-score="30"] { color: #f20 }
.score[data-score="31"] { color: #f10 }
</style>
<script>
var footerOff = true,
Expand Down Expand Up @@ -416,7 +376,7 @@ <h1><span id="title">$title</span> <input type="text" id="edit-title" hidden=""
if (data.event == 'add') {
var div = document.createElement('div');
div.classList.add('comment');
div.innerHTML = markdown(data.body);
div.innerHTML = ' ' + markdown(data.body);
if ($rep >= 50) {
div.insertBefore(document.getElementById('content').children[2].cloneNode(true), div.firstChild);
div.firstChild.firstChild.onclick = upvoteComment;
Expand Down
42 changes: 1 addition & 41 deletions html/dev/html.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,46 +152,6 @@ <h1><span id="title">$title</span> <input type="text" id="edit-title" hidden=""
transition: fill 0.1s;
fill: #c00;
}
#content > .sctrls { display: none }
.score {
float: left;
display: block;
margin-right: 4px;
color: #f00;
padding: 0 4px;
}
.score[data-score="0"] { display: none }
.score[data-score="1"] { color: #888 }
.score[data-score="2"] { color: #666 }
.score[data-score="3"] { color: #444 }
.score[data-score="4"] { color: #222 }
.score[data-score="5"] { color: #000 }
.score[data-score="6"] { color: #001 }
.score[data-score="7"] { color: #002 }
.score[data-score="8"] { color: #003 }
.score[data-score="9"] { color: #004 }
.score[data-score="10"] { color: #005 }
.score[data-score="11"] { color: #006 }
.score[data-score="12"] { color: #007 }
.score[data-score="13"] { color: #008 }
.score[data-score="14"] { color: #009 }
.score[data-score="15"] { color: #00a }
.score[data-score="16"] { color: #00b }
.score[data-score="17"] { color: #00c }
.score[data-score="18"] { color: #00d }
.score[data-score="19"] { color: #00e }
.score[data-score="20"] { color: #00f }
.score[data-score="21"] { color: #33f }
.score[data-score="22"] { color: #66f }
.score[data-score="23"] { color: #f90 }
.score[data-score="24"] { color: #f80 }
.score[data-score="25"] { color: #f70 }
.score[data-score="26"] { color: #f60 }
.score[data-score="27"] { color: #f50 }
.score[data-score="28"] { color: #f40 }
.score[data-score="29"] { color: #f30 }
.score[data-score="30"] { color: #f20 }
.score[data-score="31"] { color: #f10 }
</style>
<script>
var footerOff = true,
Expand Down Expand Up @@ -389,7 +349,7 @@ <h1><span id="title">$title</span> <input type="text" id="edit-title" hidden=""
if (data.event == 'add') {
var div = document.createElement('div');
div.classList.add('comment');
div.innerHTML = markdown(data.body);
div.innerHTML = ' ' + markdown(data.body);
if ($rep >= 50) {
div.insertBefore(document.getElementById('content').children[2].cloneNode(true), div.firstChild);
div.firstChild.firstChild.onclick = upvoteComment;
Expand Down
5 changes: 3 additions & 2 deletions html/qa/ask.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,11 +190,12 @@ <h3>Options</h3>
used = [];
while (used.length &lt; 2) {
for (var j = 0; j &lt; langs.length; j++) {
if (used.indexOf(langs[j]) == -1 &amp;&amp; langs[j].substr(0, i) == this.value.substr(0, i)) {
if (used.indexOf(langs[j]) == -1 &amp;&amp; langs[j].substr(0, i).toLowerCase() == this.value.substr(0, i).toLowerCase()) {
used.push(langs[j]);
var span = document.createElement('span');
span.appendChild(document.createTextNode(langs[j]));
span.onclick = function() {
span.onmousedown = function(e) {
e.preventDefault();
document.getElementById('lang').value = this.textContent;
this.parentNode.hidden = true;
};
Expand Down
82 changes: 77 additions & 5 deletions html/qa/question.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<h1><span id="title">$lang: $title</span><input id="title-edit" value="$title" style="font-size: 0.8em; width: 100%;" hidden="" /></h1>
<span class="sctrls"><svg class="up" xmlns="http://www.w3.org/2000/svg"><polygon points="7,-1 0,11 5,11 5,16 9,16 9,11 14,11" /></svg><svg class="fl" xmlns="http://www.w3.org/2000/svg"><polygon points="0,0 13,0 13,8 4,8 4,16 0,16" /></svg></span>
<div class="pad vote lft">
<svg id="mup" class="blk up" xmlns="http://www.w3.org/2000/svg"><polygon points="10,1 1,19 19,19" /></svg>
<svg id="mdn" class="blk dn" xmlns="http://www.w3.org/2000/svg"><polygon points="10,19 1,1 19,1" /></svg>
Expand All @@ -22,7 +23,7 @@ <h1><span id="title">$lang: $title</span><input id="title-edit" value="$title" s
<small class="blk sumar lft" style="clear: left"><a href="#edit" class="grey">Edit</a> <line /> <a class="grey">Delete</a></small>
</div>
</div>
<form id="q-edit" action="javascript:editSubmit()" style="margin-left: 32px" hidden="">
<form id="q-edit" style="margin-left: 32px" hidden="">
<textarea id="q-desc-edit" rows="24">$rawdesc</textarea>
<textarea id="q-code-edit" rows="24" class="umar">$code</textarea>
<input id="q-question-edit" value="$rawq" class="fullwidth bmar" />
Expand All @@ -35,12 +36,12 @@ <h1><span id="title">$lang: $title</span><input id="title-edit" value="$title" s
<div class="indt umar">
<hr class="nomar" />
<div id="comments">$qcommentstr</div>
<form id="comment" class="target" action="javascript:addComment()">
<textarea id="commentta" class="fullwidth" placeholder="Ask for clarification or suggest improvements for the question." rows="4"></textarea>
<form id="comment" class="target umar">
<textarea id="commentta" placeholder="Ask for clarification or suggest improvements." class="fullwidth" rows="4"></textarea>
<button type="submit">Post</button>
<button type="reset" onclick="location.hash='';history.replaceState('', document.title, window.location.pathname)">Cancel</button>
<button type="reset" id="reset">Cancel</button>
</form>
<a id="addcomment" href="#comment" onclick="setTimeout(function(){document.getElementById('commentta').focus()},0);" style="font-weight: normal;" class="small">Add comment</a>
<a id="addcomment" href="#comment" style="font-weight: normal;" class="small">Add comment</a>
</div>
<hr class="nomar bumar" />
<!-- <h2 class="sumar">1 Answer</h2>
Expand Down Expand Up @@ -152,4 +153,75 @@ <h3>Thanks for answering!</h3>
document.getElementById('title-edit').hidden = 1;
document.getElementById('q-content').hidden = 0;
}
document.getElementById('addcomment').onclick = function() {
setTimeout(function() {
document.getElementById('commentta').focus();
}, 0);
};
var socket = new WebSocket('ws://' + location.hostname + ':81/q/$id');
document.getElementById('comment').onsubmit = function(e) {
socket.send(JSON.stringify({
event: 'post',
body: document.getElementById('commentta').value
}));
document.getElementById('commentta').value = '';
document.getElementById('reset').onclick();
e.preventDefault();
};
document.getElementById('reset').onclick = function() {
location.hash = '';
history.replaceState('', document.title, window.location.pathname);
document.body.scrollTop = innerHeight;
};
socket.onmessage = function(e) {
console.log(e.data);
try {
var data = JSON.parse(e.data);
} catch(err) {
console.log(err);
return alert('JSON Error. Response was: ' + e.data);
}
if (data.event == 'add') {
var div = document.createElement('div');
div.classList.add('comment');
div.innerHTML = ' ' + markdown(data.body);
if ($rep >= 50) {
div.insertBefore(document.getElementById('content').children[1].cloneNode(true), div.firstChild);
div.firstChild.firstChild.onclick = upvoteComment;
var score = document.createElement('span');
score.classList.add('score');
score.appendChild(document.createTextNode(score.dataset.score = 0));
div.insertBefore(score, div.firstChild);
}
var sig = document.createElement('span');
sig.classList.add('c-sig');
sig.appendChild(document.createTextNode('-'));
var a = document.createElement('a');
a.href = '/user/' + data.user;
a.appendChild(document.createTextNode(data.user))
sig.appendChild(a);
sig.appendChild(document.createTextNode(', '));
var permalink = document.createElement('a');
if (!data.time) data.time = new Date().getTime();
permalink.appendChild(agot(data.time));
permalink.href = '#' + (div.id = 'c' + data.id);
sig.appendChild(permalink);
div.appendChild(sig);
document.getElementById('comments').appendChild(div);
} else if (data.event == 'scorechange') {
var c = document.getElementById('c' + data.id);
if (c) c.getElementsByClassName('score')[0].dataset.score = c.getElementsByClassName('score')[0].textContent = data.score;
} else if (data.event == 'err') alert('Error: ' + data.body);
};
function upvoteComment() {
this.classList.toggle('clkd');
socket.send(JSON.stringify({
event: this.classList.contains('clkd') ? 'vote' : 'unvote',
id: parseInt(this.parentNode.parentNode.id.substr(1))
}));
}
var comments = document.getElementsByClassName('comment');
for (var i = 0; i &lt; comments.length; i++) {
comments[i].getElementsByClassName('sctrls')[0].firstChild.onclick = upvoteComment;
}
</script>
41 changes: 40 additions & 1 deletion http/a/clean.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ body {
}
.blk { display: block }
.ib { display: inline-block }
[hidden], .target:not(:target) { display: none }
[hidden], .target:not(:target), #content > .sctrls { display: none }
.rel, .comment { position: relative }
.abs, .ctrls { position: absolute }
.fullwidth { width: 100% }
Expand Down Expand Up @@ -256,6 +256,45 @@ textarea {
margin: 3em;
color: #fff;
}
.score {
float: left;
display: block;
margin-right: 4px;
color: #f00;
padding: 0 4px;
}
.score[data-score="0"] { display: none }
.score[data-score="1"] { color: #888 }
.score[data-score="2"] { color: #666 }
.score[data-score="3"] { color: #444 }
.score[data-score="4"] { color: #222 }
.score[data-score="5"] { color: #000 }
.score[data-score="6"] { color: #001 }
.score[data-score="7"] { color: #002 }
.score[data-score="8"] { color: #003 }
.score[data-score="9"] { color: #004 }
.score[data-score="10"] { color: #005 }
.score[data-score="11"] { color: #006 }
.score[data-score="12"] { color: #007 }
.score[data-score="13"] { color: #008 }
.score[data-score="14"] { color: #009 }
.score[data-score="15"] { color: #00a }
.score[data-score="16"] { color: #00b }
.score[data-score="17"] { color: #00c }
.score[data-score="18"] { color: #00d }
.score[data-score="19"] { color: #00e }
.score[data-score="20"] { color: #00f }
.score[data-score="21"] { color: #33f }
.score[data-score="22"] { color: #66f }
.score[data-score="23"] { color: #f90 }
.score[data-score="24"] { color: #f80 }
.score[data-score="25"] { color: #f70 }
.score[data-score="26"] { color: #f60 }
.score[data-score="27"] { color: #f50 }
.score[data-score="28"] { color: #f40 }
.score[data-score="29"] { color: #f30 }
.score[data-score="30"] { color: #f20 }
.score[data-score="31"] { color: #f10 }
#nav {
padding: 0 2px 6px 2px;
font-size: 0;
Expand Down