Skip to content

Commit

Permalink
Merge pull request #31 from Commentative/fix/commenting-fix1
Browse files Browse the repository at this point in the history 
add comment fix and comment bar ui update #16 #20
  • Loading branch information
@mbanerjeepalmer
mbanerjeepalmer authored May 25, 2020
2 parents 5832eee + 33075d7 commit 6e7b648
Show file tree
Hide file tree
Showing 5 changed files with 157 additions and 92 deletions.
Binary file added public/assets/commentativefavicon-32.ico
View file
Binary file not shown.
224 changes: 146 additions & 78 deletions public/scripts/newarticle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,114 +4,182 @@ let firstSubmit = true;
let url =
"https://8rj0xswzt3.execute-api.eu-west-1.amazonaws.com/dev/commentative";

// This is a one-off process that happens when an article is first added.
// TODO: Perhaps this should happen as part of the Readability parser process, rather than here.
function addIndexToParagraphs() {
articleParagraphs.forEach((element, index) => {
element.setAttribute("data-article-element-index", index + 1);
});
}

addIndexToParagraphs();

function updateVisibleComments(selectedParagraphReference) {
console.log("updatingComments");
const comments = document.querySelectorAll(".comment-block");
comments.forEach((commentBlock) => {
//commentParagraphReference is the id of the paragraph that the comment has been added to
let commentParagraphReference = commentBlock.getAttribute(
"data-article-element-index"
);
//if it matches the current selected paragraph then display the comment
if (commentParagraphReference === selectedParagraphReference) {
commentBlock.style.display = "block";
}
//else hide all comments that dont relate to the current paragraph
else {
commentBlock.style.display = "none";
}
});
}

// This is an ongoing check to see which element is in the middle of the screen.
// Then it adds a class 'selected'.
// .selected is the state used so styling knows what to highlight
// and so commenting functionality knows which paragraph index to set as the reference
window.addEventListener("scroll", event => {
// and so commenting functionality knows which paragraph index to set as the reference

//variable to keep track of the most recently selected paragraph, to avoid unnecessary updates
let selectedParagraphReference = 0;

window.addEventListener("scroll", (event) => {
let fromTop = window.scrollY;
articleParagraphs.forEach(para => {
articleParagraphs.forEach((para) => {
let currentParagraphReference = para.getAttribute(
"data-article-element-index"
);
let paragraphHeight = para.offsetHeight;
let middleOfWindow = window.innerHeight / 2;
let viewportTopOffset = para.getBoundingClientRect().top;
let topBoundary = middleOfWindow - paragraphHeight;
let bottomBoundary = middleOfWindow;
if (
viewportTopOffset <= bottomBoundary &&
viewportTopOffset >= topBoundary
viewportTopOffset >= topBoundary &&
selectedParagraphReference !== currentParagraphReference
) {
para.classList.add("selected");
} else {
//updates the comment box to show comments with the paragraph index of the currently highlighted paragraph
updateVisibleComments(currentParagraphReference);
selectedParagraphReference = currentParagraphReference;
} else if (selectedParagraphReference !== currentParagraphReference) {
para.classList.remove("selected");
}
});
});

// This is a one-off process that happens when an article is first added.
// TODO: Perhaps this should happen as part of the Readability parser process, rather than here.
function addIndexToParagraphs() {
articleParagraphs.forEach((element, index) => {
element.setAttribute("data-article-element-index", index + 1);
});
}
// function to submit comments to backend
function submitComment(e) {
e.preventDefault();
//reference is the id of the currently highlighted paragraph
const reference = document
.querySelector(".selected")
.getAttribute("data-article-element-index");
//body is the text content of the comment
const body = document.querySelector(".addCommentTextArea").value;
const user = "🖊️";
if (firstSubmit) {
//articleBody is a text only copy of the article(minus unnecessary html tags)
// const articleBody = document.querySelector(".articleBody").value;
const articleBody = document.querySelector(".article").textContent;

// TODO: This `firstSubmit` thing feels weird.
// Why does the user go through different journeys depending on whether they've submitted already?
// the first time the user posts a comment, the articleBody gets posted to the db, i.e, this is the first time the database creates an entry for this user
// the database then generates a unique url for this particular article(which will become our sharable link)
// the problem is that the express app is unaware of this, so currently the requests to the comment database are being done from the frontend. not ideal.
//the unique address for the database is being pulled from the address bar, but currently our app doesnt handle a refresh of this link
// ideally the "new article" process should involve submitting the article content to the comment api, and then the link that the frontend gets sent to, instead of "newarticle?=articlelink" will be the unique link generated by our api
// maybe the frontend talks only to the express app, and the express app communicates to the database - this seems to make more sense right now, may change this later
firstSubmit = false;
const params = { user, articleBody, commentData: [{ body, reference }] };

function addComment() {
document.querySelector(".addComment").addEventListener("click", function(e) {
e.preventDefault();
const reference = document
.querySelector(".selected")
.getAttribute("data-article-element-index");

const body = document.querySelector(".addCommentText").value;
const user = "🖊️";
if (firstSubmit) {

// TODO: Don't understand this. Please explain in documentation.
const articleBody = document.querySelector(".articleBody").value;

// TODO: This `firstSubmit` thing feels weird.
// Why does the user go through different journeys depending on whether they've submitted already?
firstSubmit = false;
const params = { user, articleBody, commentData: [{ body, reference }] };
fetch(url, {
method: "POST",
body: JSON.stringify(params),
headers: {
"Content-Type": "application/json"
}
})
.then(res => {
return res.text();
})
.then(res => {
const result = JSON.parse(res);
history.pushState(null, "", "/" + result.uuid);
addNewComment();
document.querySelector(".addCommentText").value = "";
});
} else {
const path = window.location.pathname.split("/");
const uuid = path[path.length - 1];
const params = { user, commentData: [{ body, reference }] };
console.log("hello", url + "/" + uuid);
fetch(url + "/" + uuid, {
method: "PUT",
body: JSON.stringify(params),
headers: {
"Content-Type": "application/json"
}
})
.then(res => {
console.log(res);
return res.text();
})
.then(res => {
console.log(res);
addNewComment();
document.querySelector(".addCommentText").value = "";
});
}
});
fetch(url, {
method: "POST",
body: JSON.stringify(params),
headers: {
"Content-Type": "application/json",
},
})
.then((res) => res.json())
.then((articleObj) => {
//TODO - move this step to backend, changing the url like this seems hackyyy
history.pushState(null, "", "/" + articleObj.uuid);
addNewComment(
articleObj.comments[0].body,
user,
articleObj.comments[0].reference
);
document.querySelector(".addCommentTextArea").value = "";
});
} else {
const path = window.location.pathname.split("/");
const uuid = path[path.length - 1];
const params = { user, commentData: [{ body, reference }] };
console.log("hello", url + "/" + uuid);
fetch(url + "/" + uuid, {
method: "PUT",
body: JSON.stringify(params),
headers: {
"Content-Type": "application/json",
},
})
.then((res) => res.json())
.then((commentObj) => {
//the api returns the body and the paragraph index(reference) of the newly created comment
addNewComment(commentObj[0].body, user, commentObj[0].reference);
document.querySelector(".addCommentTextArea").value = "";
});
}
}

function addNewComment(content = "This is a comment", name = "Jamie") {
const newCommentBox = document.querySelector(".new-comment");
//function to add a new comment to the frontend display
function addNewComment(
content = "This is a comment",
name = "Jamie",
reference
) {
const commentsBox = document.querySelector(".comments");

const newCommentBlock = document.createElement("div");
newCommentBlock.classList.add("comment-block");
newCommentBlock.setAttribute("data-article-element-index", reference);

const commentBlock = document.createElement("div");
commentBlock.classList.add("comment-block");
const commentName = document.createElement("div");
commentName.classList.add("comment-name");

const commentContent = document.createElement("div");
commentContent.classList.add("comment-content");

commentContent.innerHTML = content;
commentName.innerHTML = name;

commentBlock.appendChild(commentName);
commentBlock.appendChild(commentContent);
newCommentBlock.appendChild(commentName);
newCommentBlock.appendChild(commentContent);

newCommentBox.appendChild(commentBlock);
commentsBox.appendChild(newCommentBlock);
}

addIndexToParagraphs();
addComment();
document.querySelector(".addComment").addEventListener("click", submitComment);
//the following is to update the comment box as the user types multiple lines
function updateSize(e) {
let text = e.target.value;
//regex checks for return and newline, or return, or newline.
//different platforms have different character inputs for the enter key!!
//makes the number of rows in the text area the same as the number of new lines in the text.
e.target.rows = text.split(/\r\n|\r|\n/).length;
}

function keyDownUpdateSize(e) {
updateSize(e);
}

function keyUpUpdateSize(e) {
updateSize(e);
}

document
.querySelector(".addCommentTextArea")
.addEventListener("keydown", keyDownUpdateSize);
document
.querySelector(".addCommentTextArea")
.addEventListener("keyup", keyUpUpdateSize);
10 changes: 5 additions & 5 deletions public/styling/newarticle.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,8 +116,6 @@ footer strong {

.comment-box.expanded {
display: flex;
left: 0;
bottom: 0;
}

.comment-box.expanded .comment-block:first-child {
Expand Down Expand Up @@ -164,16 +162,18 @@ footer strong {
font-size: 1rem;
width: 100%;
position: relative;
min-height: 2rem;
height: auto;
}

.comment-input textarea {
.comment-input .addCommentTextArea {
width: 100%;
border: none;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 1.25rem;
resize: none;
outline: none;
min-height: 6rem;
text-align: left;
}

.button-send {
Expand Down
1 change: 1 addition & 0 deletions src/views/layouts/main.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" href="/assets/commentativefavicon-32.ico" sizes="32x32">
<link rel="stylesheet" href="https://use.typekit.net/tqi6cbz.css">
<link rel="stylesheet" href="./styling/{{page}}.css">
<title>Commentative</title>
Expand Down
14 changes: 5 additions & 9 deletions src/views/newarticle.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
</div> --}}

<div class="comment-box expanded">
<div class="new-comment">
<div class="comments">
{{#if articleObj.comments}}
{{#each articleObj.comments}}
<div class="comment-block">
Expand All @@ -43,22 +43,18 @@
{{/if}}
</div>
<div class="comment-input">
<input class="addCommentText" type="text" placeholder="Comment on this paragraph" />
<textarea class="addCommentTextArea" rows="1" placeholder="Comment on this paragraph.."></textarea>
<a href="#" class="addComment button-send active" title="Submit comment"></a>
</div>
{{!-- <div class="prev-next">
<a href="#" class="chevron prev inactive" title="previous comment"></a>
<a href="#" class="chevron next" title="next comment"></a>
</div> --}}
</div>
<input class="articleBody" type="hidden" value={{articleObj.content}}>

{{!--

<footer>
<div>
<strong>Commentative</strong><br />
Host a discussion about anything online.
<br /><br />Built at
<a href="https://hackthepress.org/" title="Hack the Press">Hack the Press</a>
<a target="_blank" href="https://hackthepress.org/" title="Hack the Press">Hack the Press</a>
</div>
</footer> --}}
</footer>

0 comments on commit 6e7b648

Please sign in to comment.