comment preview, image upload, versioned assets

rystaf · Jul 27, 2023 · 6c80f67 · 6c80f67
1 parent 463b3fe
commit 6c80f67
Show file tree

Hide file tree

Showing 9 changed files with 179 additions and 92 deletions.
diff --git a/public/style.css b/public/style.css
@@ -219,6 +219,27 @@ summary {
   font-size: 10px;
   margin-bottom: 6px;
 }
+.preview h3 {
+  background-color: #f0f3fc;
+  border: 0px solid #e6e6e6;
+  border-bottom-width: 1px;
+  color: black;
+  margin: 0px;
+  padding: 10px;
+  font-size: 14px;
+}
+.dark .preview h3 {
+  background-color: #333;
+  border-color: #333;
+  color: #ccc;
+}
+.preview .comment {
+  margin-top: 5px;
+  padding: 0px;
+}
+.preview .comment .content {
+  padding: 5px 10px;
+}
 .meta a, .activity .meta a {
   color: #369;
   text-decoration: none;
@@ -262,6 +283,7 @@ summary {
 }
 form.savecomment {
   margin: 0px 0px 10px 0px;
+  width: 500px;
 }
 .comment > .children > form.savecomment {
   margin: 0px 0px 10px 20px;
@@ -270,9 +292,34 @@ form.savecomment {
   margin: 5px 0px 10px 15px;
 }
 .savecomment textarea {
-  width: 500px;
+  margin: 5px 0px;
+  width: 100%;
   height: 100px;
 }
+
+.savecomment .upload label div {
+  display: inline-block;
+  border: 1px solid #ccc;
+  height: 20px;
+  line-height: 20px;
+  width: 32px;
+  position: relative;
+  background-color: #999;
+  color: #000;
+  text-align: center;
+  cursor: pointer;
+}
+.savecomment .upload input {
+  display: none;
+}
+.savecomment .right {
+  float:right;
+}
+.savecomment .right a {
+  line-height: 28px;
+  font-size: 10px;
+}
+
 .comment .meta a.minimize {
   color: #369;
   font-size: 10px;
@@ -956,11 +1003,11 @@ nav .right a.mailbox {
   top: 4px;
   color: gray;
 }
-nav .right a, .right input[type=submit] {
+nav .right a, nav .right input[type=submit] {
   color: #369;
   text-decoration: none;
 }
-.dark nav .right a, .dark .right input[type=submit]{
+.dark nav .right a, .dark nav .right input[type=submit]{
   color: #dadada;
 }
 nav .right form, .comment form, form.link-btn {

diff --git a/public/utils.js b/public/utils.js
@@ -10,8 +10,6 @@ function request(url, params, callback, errorcallback = function(){}) {
   var method = "GET"
   if (params) method = "POST"
   xmlHttp.open(method, url, true);
-  if (method = "POST")
-    xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
   xmlHttp.send(params);
 }
 function postClick(e) {
@@ -34,25 +32,31 @@ function postClick(e) {
     }
   }
 }
+function uptil (el, f) { 
+  if (el) return f(el) ? el : uptil(el.parentNode, f) 
+}
 function commentClick(e) {
   e = e || window.event;
   var targ = e.currentTarget || e.srcElement || e;
   if (targ.nodeType == 3) targ = targ.parentNode;
   if (e.target.name=="submit") {
     e.preventDefault()
-    var form = e.target.parentNode
+    var form = uptil(e.target, function(el){ return el.tagName == "FORM" })
     if (form) {
       data = new FormData(form)
+      data.set(e.target.name, e.target.value)
+      data.set("xhr", 1)
       if (("c"+data.get("commentid")) == targ.id) {
-
+        targ.action = form.action
+        if (e.target.value == "preview") {
+          targ = form
+        }
+        console.log("ok")
       } else if (("c"+data.get("parentid")) == targ.id) {
         targ = form
       } else { return }
-      params = new URLSearchParams(data).toString()
-      params += "&" + e.target.name + "=" + e.target.value
-      params += "&xhr=1"
       e.target.disabled = "disabled"
-      request(targ.target || "", params,
+      request(targ.action || "", data,
         function(res){
           targ.outerHTML = res
           setup()
@@ -217,11 +221,10 @@ function formSubmit(e) {
   var targ = e.currentTarget || e.srcElement || e;
   e.preventDefault()
   var data = new FormData(targ)
-  params = new URLSearchParams(data).toString()
-  params += "&" + e.submitter.name + "=" + e.submitter.value
-  params += "&xhr=1"
+  data.set(e.submitter.name, e.submitter.value)
+  data.set("xhr", "1")
   e.submitter.disabled = "disabled"
-  request(targ.target, params,
+  request(targ.target, data,
     function(res){
       if (data.get("op") == "read_post") {
         document.getElementById("p"+data.get("postid")).remove()
@@ -349,6 +352,16 @@ function toggleImages(open) {
   }
 }
 
+function insertImg(e) {
+  e = e || window.event;
+  var form = uptil(e.target, function(el){ return el.tagName == "FORM" })
+  form.querySelector("input[value=preview]").click()
+  var inputs = form.getElementsByTagName("input")
+  for (var i = 0; i < inputs.length; i++) {
+    inputs[i].disabled = "disabled"
+  }
+}
+
 function setup() {
   if (showimages = document.getElementById("se")) {
     showimages.addEventListener("click", showImages)
@@ -369,6 +382,10 @@ function setup() {
     }
     lmc.addEventListener("click", loadMoreComments)
   }
+  var imgUpload = document.getElementsByClassName("imgupload")
+  for (var i = 0; i < imgUpload.length; i++) {
+    imgUpload[i].addEventListener("change", insertImg)
+  }
   var posts = document.getElementsByClassName("post")
   for (var i = 0; i < posts.length; i++) {
     posts[i].addEventListener("click", postClick)

diff --git a/routes.go b/routes.go
@@ -507,6 +507,9 @@ func GetPost(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
 		state.Op = "edit_post"
 		state.GetSite()
 	}
+	if len(m["content"]) > 0 {
+		state.Content = m["content"][0]
+	}
 	postid, _ := strconv.Atoi(ps.ByName("postid"))
 	state.GetPost(postid)
 	state.GetComments()
@@ -551,6 +554,9 @@ func GetComment(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
 	if len(m["edit"]) > 0 {
 		state.Op = "edit"
 	}
+	if r.Method == "POST" && len(m["content"]) > 0 {
+		state.Content = m["content"][0]
+	}
 	if len(m["source"]) > 0 {
 		state.Op = "source"
 	}
@@ -560,6 +566,10 @@ func GetComment(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
 	}
 	commentid, _ := strconv.Atoi(ps.ByName("commentid"))
 	state.GetComment(commentid)
+	if state.XHR && len(m["content"]) > 0 {
+		Render(w, "create_comment.html", state)
+		return
+	}
 	state.GetPost(state.PostID)
 	Render(w, "index.html", state)
 }
@@ -1201,9 +1211,20 @@ func UserOp(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
 			parentid, _ := strconv.Atoi(r.FormValue("parentid"))
 			state.GetComment(parentid)
 		}
+		content := r.FormValue("content")
+		file, handler, err := r.FormFile("file")
+		if err == nil {
+			pres, err := state.UploadImage(file, handler)
+			if err != nil {
+				state.Error = err
+				Render(w, "index.html", state)
+				return
+			}
+			content += ("![](https://" + state.Host + "/pictrs/image/" + pres.Files[0].Filename + ")")
+		}
 		if r.FormValue("submit") == "save" {
 			createComment := types.CreateComment{
-				Content: r.FormValue("content"),
+				Content: content,
 				PostID:  state.PostID,
 			}
 			if state.CommentID > 0 {
@@ -1225,6 +1246,22 @@ func UserOp(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
 			} else {
 				fmt.Println(err)
 			}
+		} else if r.FormValue("submit") == "preview" {
+			q := r.URL.Query()
+			q.Set("content", content)
+			q.Set("reply", "")
+			if r.FormValue("xhr") != "" {
+				q.Set("xhr", "1")
+			}
+			r.URL.RawQuery = q.Encode()
+			if ps.ByName("postid") != "" {
+				GetPost(w, r, ps)
+				return
+			}
+			if ps.ByName("commentid") != "" {
+				GetComment(w, r, ps)
+				return
+			}
 		} else if r.FormValue("xhr") != "" {
 			w.Write([]byte{})
 			return
@@ -1234,10 +1271,23 @@ func UserOp(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
 		}
 	case "edit_comment":
 		commentid, _ := strconv.Atoi(r.FormValue("commentid"))
+		q := r.URL.Query()
+		content := r.FormValue("content")
+		file, handler, err := r.FormFile("file")
+		if err == nil {
+			pres, err := state.UploadImage(file, handler)
+			if err != nil {
+				state.Error = err
+				Render(w, "index.html", state)
+				return
+			}
+			content += ("![](https://" + state.Host + "/pictrs/image/" + pres.Files[0].Filename + ")")
+		}
+
 		if r.FormValue("submit") == "save" {
 			resp, err := state.Client.EditComment(context.Background(), types.EditComment{
 				CommentID: commentid,
-				Content:   types.NewOptional(r.FormValue("content")),
+				Content:   types.NewOptional(content),
 			})
 			if err != nil {
 				fmt.Println(err)
@@ -1246,6 +1296,29 @@ func UserOp(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
 				r.URL.Fragment = "c" + commentid
 				r.URL.RawQuery = ""
 			}
+		} else if r.FormValue("submit") == "preview" {
+			q.Set("content", content)
+			q.Set("edit", "")
+			if r.FormValue("xhr") != "" {
+				q.Set("xhr", "1")
+			}
+			r.URL.RawQuery = q.Encode()
+			if ps.ByName("commentid") != "" {
+				GetComment(w, r, ps)
+				return
+			}
+		} else if r.FormValue("submit") == "cancel" {
+			if ps.ByName("commentid") != "" {
+				if r.FormValue("xhr") != "" {
+					q.Set("xhr", "1")
+				}
+				r.URL.RawQuery = q.Encode()
+				GetComment(w, r, ps)
+				return
+			}
+		} else if r.FormValue("xhr") != "" {
+			w.Write([]byte{})
+			return
 		}
 		if r.FormValue("xhr") != "" {
 			state.XHR = true

diff --git a/state.go b/state.go
@@ -98,6 +98,7 @@ type State struct {
 	Op                string
 	Site              *types.GetSiteResponse
 	Query             string
+	Content           string
 	SearchType        string
 	Captcha           *types.CaptchaResponse
 	Dark              bool

diff --git a/templates/comment.html b/templates/comment.html
@@ -15,11 +15,11 @@
 {{ end }}
     <div class="meta">
       <a class="minimize" href="" for="c{{.P.Comment.ID}}">
-{{if or (lt .P.Counts.Score -5) .P.Comment.Deleted }}
+{{- if or (lt .P.Counts.Score -5) .P.Comment.Deleted -}}
         [+]
-{{ else }}
+{{- else -}}
         [-]
-{{ end }}
+{{- end -}}
       </a>
       <a {{ if .P.Comment.Distinguished}}class="{{if .P.Creator.Admin}}admin {{end}}distinguished"{{ else if .Submitter }}class="submitter"{{end}} href="/{{.State.Host}}/u/{{fullname .P.Creator}}">
         {{- if .State.HideInstanceNames -}}
@@ -33,26 +33,17 @@
             * (last edited <span title="{{.P.Comment.Updated.Time}}">{{ humanize .P.Comment.Updated.Time }}</span>)
             {{ end }}
     </div>
-{{ if eq .Op "edit" }}
     <div class="content">
-      <form class="savecomment" method="POST">
-        <div>
-          <textarea required name="content">{{ .P.Comment.Content }}</textarea>
-        </div>
-        <input type="hidden" name="commentid" value="{{.P.Comment.ID}}">
-        <input type="hidden" name="op" value="edit_comment">
-        <input name="submit" type="submit" value="save">
-        <input name="submit" type="submit" value="cancel">
-      </form>
+{{ if eq .Op "edit" }}
+  {{ template "create_comment.html" .State }}
 {{ else }}
-    <div class="content">
-      {{if .P.Comment.Deleted}}
+    {{if .P.Comment.Deleted}}
       [removed]
-      {{else}}
+    {{else}}
       <div {{ if and .Selected (not .State.XHR) (ne .State.Op "reply")}}class="highlight" {{end}}>
         {{ markdown .State.Host .P.Comment.Content }}
       </div>
-      {{end}}
+    {{end}}
   {{ if eq .Op "source" }}
       <div><textarea>{{.P.Comment.Content}}</textarea></div>
   {{end}}
@@ -93,7 +84,7 @@
           </a>
         </li>
 {{ end }}
-{{ if and .ParentID .State.CommentID }}
+{{ if and .ParentID .State.CommentID (not .State.XHR) }}
         <li>
           <a href="/{{.State.Host}}/comment/{{.ParentID}}">parent</a>
         </li>
@@ -110,15 +101,7 @@
     </div>
     <div class="children">
 {{ if and (eq .State.Op "reply") (eq .State.CommentID .P.Comment.ID)}}
-      <form class="savecomment" method="POST">
-        <div>
-          <textarea name="content"></textarea>
-        </div>
-        <input type="hidden" name="parentid" value="{{.P.Comment.ID}}">
-        <input type="hidden" name="op" value="create_comment">
-        <input type="submit" name="submit" value="save">
-        <input type="submit" name="submit" value="cancel">
-      </form>
+  {{ template "create_comment.html" .State }}
 {{ end}}
       {{ range $ci, $child := .C }}{{ template "comment.html" $child }}{{end}}
 {{ if and (ne .P.Counts.ChildCount .ChildCount) (not .State.Activities) (not .State.Query) }}
@@ -128,4 +111,4 @@
       </div>
 {{end}}
     </div>
-  </div>
+</div>