load more button

main.go

@@ -51,7 +51,7 @@ func init() {
 	md = goldmark.New(goldmark.WithExtensions(extension.Linkify))
 	templates = make(map[string]*template.Template)
 	if !*watch {
-		for _, name := range []string{"index.html", "login.html", "frontpage.html", "root.html", "settings.html"} {
+		for _, name := range []string{"index.html", "login.html", "frontpage.html", "root.html", "settings.html", "xhr.html"} {
 			t := template.New(name).Funcs(funcMap)
 			glob, err := t.ParseGlob("templates/*")
 			if err != nil {

public/style.css

@@ -121,6 +121,9 @@ code {
 [disabled] {
   cursor: not-allowed;
 }
+#loadmore [disabled] {
+  cursor: wait;
+}
 .post .title  {
   color: #888;
   font-size: 10px;
@@ -357,6 +360,7 @@ form.nsfw div {
 }
 .pager {
   margin: 10px;
+  display: none;
 }
 .pager a {
   padding: 1px 4px;
@@ -367,6 +371,9 @@ form.nsfw div {
   text-decoration: none;
   color: #369;
 }
+#loadmore {
+  margin: 10px 0px;
+}
 .buttons li {
   display: inline;
 }
@@ -457,14 +464,14 @@ form.nsfw div {
   display: inline-block;
   overflow: hidden;
   resize: both;
-  width: 100%;
+  max-width: 100%;
   background-repeat: no-repeat;
   background-size: contain;
   background-position: top left;
 }
 .expando .image img {
   visibility: hidden;
-  width: 100%;
+  max-width: 100%;
 }
 .expando .md {
   background-color: #fafafa;
@@ -712,6 +719,9 @@ nav .communities a.more {
   position: absolute;
   right: 0;
 }
+.dark nav .communities a.more {
+  background-color: #cccccc;
+}
 .orangered, .orangered b {
   color: orangered !important;
 }

public/utils.js

@@ -91,6 +91,24 @@ function commentClick(e) {
     return false
   }
 }
+function loadMore(e) {
+  e.preventDefault()
+  page = e.target.getAttribute("data-page")
+  e.target.disabled="disabled"
+  e.target.value="loading"
+  var urlParams = new URLSearchParams(window.location.search);
+  urlParams.set("xhr", "1")
+  urlParams.set("page", page)
+  request(window.location.origin+window.location.pathname+"?"+urlParams.toString(), "", function(res){
+    if (res.trim()) {
+    e.target.outerHTML = res + '<div id="loadmore"><input type="submit" data-page="'+(parseInt(page)+1)+'" value="load more" onclick="loadMore(event)"></div>'
+    }
+    else {
+      e.target.outerHTML = ""
+    }
+  })
+  return false;
+}
 function hideAllChildComments(e) {
   e.preventDefault()
   var comments = document.getElementsByClassName("comment")

routes.go

@@ -351,8 +351,12 @@ func GetFrontpage(w http.ResponseWriter, r *http.Request, ps httprouter.Params)
 	if state.Op == "" {
 		state.GetPosts()
 	}
+	if state.XHR {
+		Render(w, "xhr.html", state)
+	} else {
 		Render(w, "frontpage.html", state)
 	}
+}
 
 func GetPost(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
 	state, err := Initialize(ps.ByName("host"), r)
@@ -508,10 +512,11 @@ func Settings(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
 			setCookie(w, state.Host, name, r.FormValue(name))
 		}
 		if r.FormValue("darkmode") != "" {
-			setCookie(w, state.Host, "Dark", "1")
+			setCookie(w, "", "Dark", "1")
 			state.Dark = true
 		} else {
 			deleteCookie(w, state.Host, "Dark")
+			deleteCookie(w, "", "Dark")
 			state.Dark = false
 		}
 		if r.FormValue("shownsfw") != "" {
@@ -934,6 +939,8 @@ func UserOp(w http.ResponseWriter, r *http.Request, ps httprouter.Params) {
 		state.Client.CreatePostLike(context.Background(), post)
 		if r.FormValue("xhr") != "" {
 			state.GetPost(postid)
+			state.PostID = 0
+			state.Op = "vote_post"
 			state.XHR = true
 			Render(w, "index.html", state)
 			return

state.go

@@ -235,7 +235,7 @@ func (state *State) GetComment(commentid int) {
 		ParentID: types.NewOptional(state.CommentID),
 		Sort:     types.NewOptional(types.CommentSortType(state.Sort)),
 		Type:     types.NewOptional(types.ListingType("All")),
-		Limit:    types.NewOptional(int64(200)),
+		Limit:    types.NewOptional(int64(50)),
 	})
 	if err != nil {
 		fmt.Println(err)
@@ -266,17 +266,9 @@ func (state *State) GetComments() {
 		PostID: types.NewOptional(state.PostID),
 		Sort:   types.NewOptional(types.CommentSortType(state.Sort)),
 		Type:   types.NewOptional(types.ListingType("All")),
-		Limit:  types.NewOptional(int64(200)),
+		Limit:  types.NewOptional(int64(50)),
 		Page:   types.NewOptional(int64(state.Page)),
 	})
-	if err != nil && strings.Contains(fmt.Sprintf("%v", err), "couldnt_get_comments") {
-		cresp, err = state.Client.Comments(context.Background(), types.GetComments{
-			PostID: types.NewOptional(state.PostID),
-			Sort:   types.NewOptional(types.CommentSortType(state.Sort)),
-			Type:   types.NewOptional(types.ListingType("All")),
-			Page:   types.NewOptional(int64(state.Page)),
-		})
-	}
 	if err != nil {
 		state.Status = http.StatusInternalServerError
 		fmt.Println(err)

templates/frontpage.html

@@ -10,9 +10,13 @@
       <style>
       .expando-button,
       .minimize,
+      #loadmore,
       .hidechildren {
         display: none;
       }
+      div.pager {
+        display: block;
+      }
       .post .expando .image img {
         visibility: visible;
       }
@@ -45,11 +49,12 @@
       <div class="pager">
         view more: {{if gt .Page 1 }}<a href="{{ .PrevPage }}">‹ prev</a>{{ end }} <a href="{{ .NextPage }}">next ›</a>
       </div>
+      <div id="loadmore"><input type="submit" value="load more" onclick="loadMore(event)" data-page="2"></div>
   {{ end }}
 
       {{ template "sidebar.html" . }}
     </main>
 {{ end }}
-    <script src="/_/static/utils.js?2"></script>
+    <script src="/_/static/utils.js?v=3"></script>
   </body>
 </html>

templates/main.html

@@ -10,9 +10,13 @@
       <style>
       .expando-button,
       .minimize,
+      #loadmore,
       .hidechildren {
         display: none;
       }
+      div.pager {
+        display: block;
+      }
       .post .expando .image img {
         visibility: visible;
       }
@@ -116,13 +120,14 @@
   {{ end }}
 
 
-  {{ if or .Query (eq .SearchType "Communities") (eq (len .Posts) 25) (and .Comments (and (eq .CommentCount 200) (gt (index .Posts 0).Counts.Comments .CommentCount))) (and .User (or (gt .User.PersonView.Counts.CommentCount 10) (gt .User.PersonView.Counts.PostCount  10))) }}
+  {{ if or .Query (eq .SearchType "Communities") (eq (len .Posts) 25) (and .Comments (gt (index .Posts 0).Counts.Comments .CommentCount)) (and .User (or (gt .User.PersonView.Counts.CommentCount 10) (gt .User.PersonView.Counts.PostCount  10))) }}
     <div class="pager">
       view more: {{if gt .Page 1 }}<a href="{{ .PrevPage }}">‹ prev</a>{{ end }} <a href="{{ .NextPage }}">next ›</a>
     </div>
+    <div id="loadmore"><input type="submit" value="load more" onclick="loadMore(event)" data-page="2"></div>
   {{ end }}
 
-    <script src="/_/static/utils.js?2"></script>
+    <script src="/_/static/utils.js?v=3"></script>
     {{ template "sidebar.html" . }}
     </main>
 {{ end }}

templates/post.html

@@ -1,4 +1,4 @@
-{{ if not .State.XHR }}
+{{ if ne .State.Op "vote_post" }}
 <div class="post{{if .Post.Deleted}} deleted{{end}}{{ if or .Post.FeaturedCommunity .Post.FeaturedLocal }} distinguished{{end}}" onclick="postClick(event)">
   {{ if gt .Rank 0 }}
         <div class="rank"> {{ .Rank }} </div>
@@ -19,7 +19,7 @@
 {{ else }}
 <div style="margin-top: 19px;">{{ .Counts.Score }}</div>
 {{ end }}
-{{ if not .State.XHR}}
+{{ if ne .State.Op "vote_post" }}
         </div>
         <div class="thumb"><div {{ if and .Post.NSFW (not (and .State.Community .State.Community.CommunityView.Community.NSFW))}}class="img-blur"{{end}} style="background-image: url({{if .Post.ThumbnailURL.IsValid}}{{.Post.ThumbnailURL.String}}?format=jpg&thumbnail=96{{else if .Post.URL.IsValid}}/_/static/link.png{{else}}/_/static/text.png{{end}})"></div></div>
         <div class="entry">

templates/xhr.html

@@ -1,4 +1,4 @@
-{{ if .CommentID }}
+{{ if or .PostID .CommentID }}
   {{ range $i, $comment := .Comments }}
       {{ template "comment.html" $comment }}
   {{ end }}