comment preview, image upload, versioned assets

This commit is contained in:
Ryan Stafford 2023-07-26 21:07:39 -04:00
parent 463b3fe49d
commit 6c80f67535
9 changed files with 179 additions and 92 deletions

View file

@ -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 {

View file

@ -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)

View file

@ -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

View file

@ -98,6 +98,7 @@ type State struct {
Op string
Site *types.GetSiteResponse
Query string
Content string
SearchType string
Captcha *types.CaptchaResponse
Dark bool

View file

@ -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,19 +33,10 @@
* (last edited <span title="{{.P.Comment.Updated.Time}}">{{ humanize .P.Comment.Updated.Time }}</span>)
{{ end }}
</div>
<div class="content">
{{ 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>
{{ template "create_comment.html" .State }}
{{ else }}
<div class="content">
{{if .P.Comment.Deleted}}
[removed]
{{else}}
@ -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) }}

View file

@ -2,26 +2,12 @@
<head>
<title>{{ if and .Community (ne .Community.CommunityView.Community.Title "")}}{{.Community.CommunityView.Community.Title}}{{else if ne .CommunityName ""}}/c/{{.CommunityName}}{{ else if .User}}overview for {{.User.PersonView.Person.Name}}{{else}}{{ host .Host }}{{end}}</title>
<link rel="shortcut icon" href="/{{.Host}}/icon.jpg">
<link rel="stylesheet" href="/_/static/style.css?v=28">
<link rel="stylesheet" href="/_/static/style.css?v={{ .Version }}">
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body {{ if .Dark }}class="dark"{{end}}>
<noscript>
<style>
.expando-button,
.minimize,
#loadmore,
#showimages,
.hidechildren {
display: none;
}
div.pager {
display: block;
}
.post .expando .image img {
visibility: visible;
}
</style>
<link rel="stylesheet" href="/_/static/noscript.css?v={{ .Version }}">
</noscript>
{{ template "nav.html" . -}}
@ -59,6 +45,6 @@
{{ template "sidebar.html" . }}
</main>
{{ end }}
<script src="/_/static/utils.js?v=22"></script>
<script src="/_/static/utils.js?v={{ .Version }}"></script>
</body>
</html>

View file

@ -2,7 +2,7 @@
<head>
<title>{{ host .Host }}: sign up or log in</title>
<link rel="shortcut icon" href="/{{.Host}}/icon.jpg">
<link rel="stylesheet" href="/_/static/style.css?v=28">
<link rel="stylesheet" href="/_/static/style.css?v={{ .Version }}">
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body {{ if .Dark }}class="dark"{{end}}>

View file

@ -3,23 +3,11 @@
<title>{{if and .Posts .PostID }}{{ (index .Posts 0).Post.Name}} : {{.CommunityName}}{{else if and .Community (ne .Community.CommunityView.Community.Title "")}}{{.Community.CommunityView.Community.Title}}{{else if ne .CommunityName ""}}/c/{{.CommunityName}}{{ else if .User}}overview for {{.User.PersonView.Person.Name}}{{else}}{{ host .Host }}{{end}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="shortcut icon" href="/{{.Host}}/icon.jpg">
<link rel="stylesheet" href="/_/static/style.css?v=28">
<link rel="stylesheet" href="/_/static/style.css?v={{ .Version }}">
</head>
<body{{ if .Dark }} class="dark"{{end}}>
<noscript>
<style>
.scripting,
.expando-button,
.minimize,
#showimages,
#lmc,
.hidechildren {
display: none !important;
}
.post .expando .image img {
visibility: visible;
}
</style>
<link rel="stylesheet" href="/_/static/noscript.css?v={{ .Version }}">
</noscript>
{{ template "nav.html" . -}}
@ -99,13 +87,9 @@
</div>
</div>
{{ if and .Session (ne .Op "edit_post") }}
<form class="savecomment" method="POST">
<div>
<textarea required name="content" {{ if (index .Posts 0).Post.Deleted }} disabled {{end}}></textarea>
<div class="create_comment">
{{ template "create_comment.html" .}}
</div>
<input type="hidden" name="op" value="create_comment">
<input type="submit" name="submit" value="save"{{ if (index .Posts 0).Post.Deleted }} disabled {{end}}>
</form>
{{ end }}
{{ end }}
{{ end}}
@ -140,7 +124,7 @@
{{ end }}
{{ end }}
<script src="/_/static/utils.js?v=22"></script>
<script src="/_/static/utils.js?v={{ .Version }}"></script>
{{ if .Watch }}
<script src="/_/static/ws.js"></script>
{{ end }}

View file

@ -3,16 +3,12 @@
<head>
<title>{{ host .Host }}: preferences</title>
<link rel="shortcut icon" href="/{{.Host}}/icon.jpg">
<link rel="stylesheet" href="/_/static/style.css?v=28">
<link rel="stylesheet" href="/_/static/style.css?v={{ .Version }}">
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body {{ if .Dark}}class="dark"{{end}}>
<noscript>
<style>
.scripting {
display: none;
}
</style>
<link rel="stylesheet" href="/_/static/noscript.css?v={{ .Version }}">
</noscript>
<nav>
<div class="communities">
@ -135,7 +131,7 @@
</div>
</form>
{{ if not .XHR}}
<script src="/_/static/utils.js?v=8"></script>
<script src="/_/static/utils.js?v={{ .Version }}"></script>
</body>
</html>
{{ end }}