diff --git a/page_image_detail.go b/page_image_detail.go index 5f7fa7002d4c9b3cfea20889a2de0bb214942fb1..4ed19b4fef9c708174373d07789b360ef4a6d18a 100644 --- a/page_image_detail.go +++ b/page_image_detail.go @@ -43,9 +43,12 @@ func pageImageDetail(ctx PageContext) http.Handler { panic(err) } + println("Post data begin") + println(r.PostForm.Encode()) for key, value := range r.PostForm { fmt.Printf("%s: %s", key, value) } + println("Post data end") switch r.PostFormValue("action") { case "update": diff --git a/templates/image_detail.html b/templates/image_detail.html index a6fa91ca248321c411ba6100f14cc9ed798e570c..530cf065ddc17d5ce8aeabe768efee5b2d6ddc9c 100644 --- a/templates/image_detail.html +++ b/templates/image_detail.html @@ -1,7 +1,6 @@ {{define "title"}}{{.Image.Title}} | i.k8r{{end}} {{define "content"}} -<form class="detail" method="post"> - <input type="hidden" name="action" value="update"> +<div class="detail"> {{if .IsMine}} <h2 class="title fake-input" contenteditable="true" placeholder="Title">{{.Image.Title}}</h2> {{else}} @@ -18,23 +17,45 @@ <input type="hidden" name="id" value="{{.Image.Id}}"> <input type="submit" value="Delete"> </form> + <form class="update-form" method="post"> + <input type="hidden" name="action" value="update"> + <input type="hidden" name="id" value="{{.Image.Id}}"> + <input type="hidden" name="title" value="{{.Image.Title}}"> + <input type="hidden" name="description" value="{{.Image.Description}}"> + <input type="submit" value="Save"> + </form> </div> {{else}} <div class="description">{{.Image.Description}}</div> {{end}} -</form> +</div> {{if .IsMine}} <script> - const listener = (event) => { + const fakeTitle = document.querySelector(".title.fake-input[contenteditable]"); + const fakeDescription = document.querySelector(".description.fake-input[contenteditable]"); + + const actualTitle = document.querySelector(".update-form input[name=title]"); + const actualDescription = document.querySelector(".update-form input[name=description]"); + + const fakeTitleListener = (event) => { requestAnimationFrame(() => { - document.title = event.target.innerText + " | i.k8r" + document.title = event.target.innerText + " | i.k8r"; + actualTitle.value = fakeTitle.innerText; }) + + }; + const fakeDescriptionListener = (event) => { + requestAnimationFrame(() => { + actualDescription.value = fakeDescription.innerText; + }) + }; - const element = document.querySelector(".title.fake-input[contenteditable]"); + fakeTitle.addEventListener("input", fakeTitleListener); + fakeTitle.addEventListener("keypress", fakeTitleListener); - element.addEventListener("input", listener); - element.addEventListener("keypress", listener); + fakeDescription.addEventListener("input", fakeDescriptionListener); + fakeDescription.addEventListener("keypress", fakeDescriptionListener); </script> {{end}} {{end}}