Enabled editing comments and forum replies

graphjs · Jun 12, 2018 · 570de33 · 570de33
1 parent a34cbe7
commit 570de33
Show file tree

Hide file tree

Showing 10 changed files with 102 additions and 7 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,9 +1,5 @@
-dist/pho.js
 node_modules
 logs
 *.log
 npm-debug.log*
-
-test.html
-list.md
 .DS_Store
diff --git a/dist/graph.js b/dist/graph.js
diff --git a/dist/graph.js.gz b/dist/graph.js.gz
diff --git a/lib/scripts/editComment.js b/lib/scripts/editComment.js
@@ -0,0 +1,17 @@
+import apiCall from './api.js';
+
+function editCommentCall(args, callback) {
+	apiCall("editComment", {
+		"id": args[0],
+		"content": args[1]
+	},
+	function(response) {
+		callback(response.data);
+	});
+};
+
+export default function() {
+	let args = Array.from(arguments);
+	let callback = args.pop();
+	editCommentCall(args, callback);
+};
diff --git a/lib/scripts/editReply.js b/lib/scripts/editReply.js
@@ -0,0 +1,17 @@
+import apiCall from './api.js';
+
+function editReplyCall(args, callback) {
+	apiCall("editForumPost", {
+		"id": args[0],
+		"content": args[1]
+	},
+	function(response) {
+		callback(response.data);
+	});
+};
+
+export default function() {
+	let args = Array.from(arguments);
+	let callback = args.pop();
+	editReplyCall(args, callback);
+};
diff --git a/lib/styles/components/comments.less b/lib/styles/components/comments.less
@@ -54,6 +54,12 @@
                 .regular-font;
                 font-size: .95em;
                 line-height: 150%;
+                &.editable {
+                    padding: .75em 1em;
+                    border: 1px dashed fade(@default-color, 15%);
+                    background-color: @contrast-color;
+                    outline: none;
+                }
             }
         }
     }

diff --git a/lib/styles/components/forum-thread.less b/lib/styles/components/forum-thread.less
@@ -77,6 +77,12 @@
                         .regular-font;
                         font-size: 1em;
                         line-height: 150%;
+                        &.editable {
+                            padding: .75em 1em;
+                            border: 1px dashed fade(@default-color, 15%);
+                            background-color: @contrast-color;
+                            outline: none;
+                        }
                     }
                 }
             }

diff --git a/lib/styles/models/credit.less b/lib/styles/models/credit.less
@@ -29,8 +29,10 @@
             .regular-font;
         }
         a {
-            .text-color-states(@danger-color);
             .regular-font;
+            &:last-of-type {
+                .text-color-states(@danger-color);
+            }
             &::before {
                 content: '\00b7';
                 display: inline;

diff --git a/lib/tags/comments.tag b/lib/tags/comments.tag
@@ -33,6 +33,7 @@
                 <span>
                     <b>{authorsData[commentsData[comment].author].username || 'Unknown User'}</b>
                     <time data-timestamp={commentsData[comment].createTime}>{handleTime(commentsData[comment].createTime)}</time>
+                    <a if={commentsData[comment].author == userId} onclick={handleEdit} data-id={comment}>Edit</a>
                     <a if={commentsData[comment].author == userId} onclick={handleRemove} data-id={comment}>Delete</a>
                 </span>
             </div>
@@ -159,6 +160,30 @@
                 }
             });
         }
+        this.handleEdit = (event) => {
+            event.preventDefault();
+            let textBox = event.target.parentNode.parentNode.nextElementSibling;
+            let currentText = textBox.innerText;
+            if(textBox.hasAttribute('contenteditable')) {
+                textBox.removeAttribute('contenteditable');
+                textBox.classList.remove('editable');
+                event.target.innerText = 'Edit';
+                if(textBox.innerText != '') {
+                    editReply(event.target.dataset.id, textBox.innerText, function(response) {
+                        if(response.success) {
+                            self.handleContent();
+                        } else {
+                            //Handle error
+                        }
+                    });
+                }
+            } else {
+                textBox.contentEditable = true;
+                textBox.focus();
+                event.target.innerText = 'Save';
+                textBox.classList.add('editable');
+            }
+        }
         this.handleRemove = (event) => {
             event.preventDefault();
             let self = this;

diff --git a/lib/tags/forum-thread.tag b/lib/tags/forum-thread.tag
@@ -30,6 +30,7 @@
                         <span>
                             <b>{authorsData[entry.author].username || 'Unknown User'}</b>
                             <time data-timestamp={entry.timestamp}>{handleTime(entry.timestamp)}</time>
+                            <a if={entry.author == userId} onclick={handleEdit} data-id={entry.id}>Edit</a>
                             <a if={entry.author == userId} onclick={index == 0 ? handleDestroy : handleRemove} data-id={entry.id}>Delete</a>
                         </span>
                     </div>
@@ -126,6 +127,7 @@
         import replyThread from '../scripts/replyThread.js';
         import removeReply from '../scripts/removeReply.js';
         import showForumList from '../scripts/showForumList.js';
+        import editReply from '../scripts/editReply.js';
         import getProfile from '../scripts/getProfile.js';
         import showLogin from '../scripts/showLogin.js';
 
@@ -261,6 +263,30 @@
                     break;
             }
         }
+        this.handleEdit = (event) => {
+            event.preventDefault();
+            let textBox = event.target.parentNode.parentNode.nextElementSibling;
+            let currentText = textBox.innerText;
+            if(textBox.hasAttribute('contenteditable')) {
+                textBox.removeAttribute('contenteditable');
+                textBox.classList.remove('editable');
+                event.target.innerText = 'Edit';
+                if(textBox.innerText != '') {
+                    editReply(event.target.dataset.id, textBox.innerText, function(response) {
+                        if(response.success) {
+                            self.handleContent();
+                        } else {
+                            //Handle error
+                        }
+                    });
+                }
+            } else {
+                textBox.contentEditable = true;
+                textBox.focus();
+                event.target.innerText = 'Save';
+                textBox.classList.add('editable');
+            }
+        }
         this.handleRemove = (event) => {
             event.preventDefault();
             let self = this;