Better pagination code

handler/template.go

@@ -110,6 +110,40 @@ func ParseTime(date time.Time) string {
 	return date.Format("2006-01-02 15:04")
 }
 
+func CreatePaginator(base, ending string, current_page, max_page int) template.HTML {
+	peek := 2
+	limit := peek*peek + 1
+	count := 0
+	pages := ""
+
+	pages += fmt.Sprintf(`<a href="%s1%s" class="pagination-button">&laquo;</a>`, base, ending)
+	pages += fmt.Sprintf(`<a href="%s%d%s" class="pagination-button">&lsaquo;</a>`, base, max(1, current_page-1), ending)
+
+	for i := current_page - peek; (i <= max_page || max_page == -1) && count < limit; i++ {
+		if i < 1 {
+			continue
+		}
+		if i == current_page {
+			pages += fmt.Sprintf(`<a href="%s%d%s" class="pagination-button" id="highlight">%d</a>`, base, i, ending, i)
+
+		} else {
+			pages += fmt.Sprintf(`<a href="%s%d%s" class="pagination-button">%d</a>`, base, i, ending, i)
+
+		}
+		count++
+	}
+
+	pages += fmt.Sprintf(`<a href="%s%d%s" class="pagination-button">&rsaquo;</a>`, base, min(max_page, current_page+1), ending)
+
+	if max_page == -1 {
+		pages += fmt.Sprintf(`<a href="%s%d%s" class="pagination-button" id="disabled">&raquo;</a>`, base, max_page, ending)
+	} else {
+		pages += fmt.Sprintf(`<a href="%s%d%s" class="pagination-button">&raquo;</a>`, base, max_page, ending)
+	}
+
+	return template.HTML(pages)
+}
+
 func GetTemplateFunctions() template.FuncMap {
 	return template.FuncMap{
 		"toInt": func(s string) int {
@@ -151,5 +185,8 @@ func GetTemplateFunctions() template.FuncMap {
 		"parseTime": func(date time.Time) string {
 			return ParseTime(date)
 		},
+		"createPaginator": func(base, ending string, current_page, max_page int) template.HTML {
+			return CreatePaginator(base, ending, current_page, max_page)
+		},
 	}
 }

template/css/style.css

@@ -125,15 +125,15 @@ input[type=submit],
 
 button:active,
 input[type=submit]:active,
-.switch-button,
-.pagination-button {
+.switch-button:active,
+.pagination-button:active {
   filter: brightness(0.85);
 }
 
 button:hover,
 input[type=submit]:hover,
-.switch-button,
-.pagination-button {
+.switch-button:hover,
+.pagination-button:hover {
   cursor: pointer;
   filter: brightness(1.2);
 }
@@ -161,6 +161,17 @@ input[type=submit][hidden] {
 .pagination {
   text-align: center;
 }
+.pagination .pagination-button {
+  margin-right: 5px;
+}
+.pagination #highlight {
+  filter: brightness(1.2);
+}
+.pagination #disabled {
+  pointer-events: none;
+  background-color: #222;
+  filter: brightness(1);
+}
 
 nav {
   margin-top: 15px;

template/css/style.scss

@@ -145,15 +145,15 @@ input[type="submit"],
 
 button:active,
 input[type="submit"]:active,
-.switch-button,
-.pagination-button {
+.switch-button:active,
+.pagination-button:active {
   filter: brightness($active-brightness);
 }
 
 button:hover,
 input[type="submit"]:hover,
-.switch-button,
-.pagination-button {
+.switch-button:hover,
+.pagination-button:hover {
   cursor: pointer;
   filter: brightness($hover-brightness);
 }
@@ -180,6 +180,20 @@ input[type="submit"][hidden] {
 
 .pagination {
   text-align: center;
+
+  .pagination-button {
+    margin-right: 5px;
+  }
+
+  #highlight {
+    filter: brightness($hover-brightness);
+  }
+
+  #disabled {
+    pointer-events: none;
+    background-color: $bg-secondary;
+    filter: brightness(1);
+  }
 }
 
 nav {

template/pages/following.jet.html

@@ -8,17 +8,9 @@
   </div>
   <div>{{ include "components/small-tn" Artworks }}</div>
   <div class="pagination">
-    {{ url := "/self/following_works" + "?mode=" + Queries.Mode + "&page=" }} {{
-    if Page == 1 }}
-    <a href="#" class="pagination-button disabled">First</a>
-    <a href="#" class="pagination-button disabled">Previous</a>
-    {{ else }}
-    <a href="{{url}}1" class="pagination-button">First</a>
-    <a href="{{url}}{{ Page - 1 }}" class="pagination-button">Previous</a>
-    {{ end }}
-
-    <a href="#" class="pagination-button disabled">{{ Page }}</a>
-
-    <a href="{{url}}{{ Page + 1 }}" class="pagination-button">Next</a>
+    {{ url := "/self/following_works" + "?mode=" + Queries.Mode + "&page=" }}
+    <small>Page {{ Page }}</small>
+    <br />
+    {{ raw: createPaginator(url, "#checkpoint", Page, -1) }}
   </div>
 </div>

template/pages/rank.jet.html

@@ -72,22 +72,9 @@
 
   <div class="pagination">
     {{ url := "/ranking?content=" + Queries.Content +"&date=" + Data.CurrentDate
-    + "&mode=" + Queries.Mode + "&page=" }} {{ if Page <= 1 }}
-    <a href="#" class="pagination-button disabled">First</a>
-    <a href="#" class="pagination-button disabled">Previous</a>
-    {{ else }}
-    <a href="{{ url }}1" class="pagination-button">First</a>
-    <a href="{{ url }}{{ Page - 1 }}" class="pagination-button">Previous</a>
-    {{ end }}
-
-    <a href="#" class="pagination-button disabled">{{ Page }}</a>
-
-    {{ if Page == 10 }}
-    <a href="#" class="pagination-button disabled">Next</a>
-    <a href="#" class="pagination-button disabled">Last</a>
-    {{ else }}
-    <a href="{{ url }}{{ Page + 1 }}" class="pagination-button">Next</a>
-    <a href="{{ url }}10" class="pagination-button">Last</a>
-    {{ end }}
+    + "&mode=" + Queries.Mode + "&page=" }}
+    <small>Page {{ Page }}/10</small>
+    <br />
+    {{ raw: createPaginator(url, "#checkpoint", Page, 10) }}
   </div>
 </div>

template/pages/tag.jet.html

@@ -70,16 +70,9 @@
 
   <div class="pagination">
     {{ url := "/tags/" + Tag.Name + "?category=" + Queries.Category + "&order="
-    + Queries.Order + "&mode=" + Queries.Mode + "&page=" }} {{ if Page == 1 }}
-    <a href="#" class="pagination-button disabled">First</a>
-    <a href="#" class="pagination-button disabled">Previous</a>
-    {{ else }}
-    <a href="{{url}}1" class="pagination-button">First</a>
-    <a href="{{url}}{{ Page - 1 }}" class="pagination-button">Previous</a>
-    {{ end }}
-
-    <a href="#" class="pagination-button disabled">{{ Page }}</a>
-
-    <a href="{{url}}{{ Page + 1 }}" class="pagination-button">Next</a>
+    + Queries.Order + "&mode=" + Queries.Mode + "&page=" }}
+    <small>Page {{ Page }}</small>
+    <br />
+    {{ raw: createPaginator(url, "#checkpoint", Page, -1) }}
   </div>
 </div>

template/pages/user.jet.html

@@ -55,29 +55,9 @@
     </div>
   </div>
   <div class="pagination">
-    {{ url := "/users/" + User.ID + "/" + Category + "?page="}} {{ if Page == 1
-    }}
-    <a href="#" class="pagination-button disabled">First</a>
-    <a href="#" class="pagination-button disabled">Previous</a>
-    {{ else }}
-    <a href="{{ url }}1#checkpoint" class="pagination-button">First</a>
-    <a href="{{ url }}{{ Page - 1 }}#checkpoint" class="pagination-button"
-      >Previous</a
-    >
-    {{ end }}
-
-    <a href="#" class="pagination-button disabled">{{ Page }}</a>
-
-    {{ if Page == PageLimit - 1 }}
-    <a href="#" class="pagination-button disabled">Next</a>
-    <a href="#" class="pagination-button disabled">Last</a>
-    {{ else }}
-    <a href="{{ url }}{{ Page + 1 }}#checkpoint" class="pagination-button"
-      >Next</a
-    >
-    <a href="{{ url }}{{ PageLimit - 1 }}#checkpoint" class="pagination-button"
-      >Last</a
-    >
-    {{ end }}
+    {{ url := "/users/" + User.ID + "/" + Category + "?page="}}
+    <small>Page {{ Page }}/{{ PageLimit }}</small>
+    <br />
+    {{ raw: createPaginator(url, "#checkpoint", Page, PageLimit) }}
   </div>
 </div>

views/pages.go

@@ -120,7 +120,7 @@ func user_page(c *fiber.Ctx) error {
 	var worksCount int
 
 	worksCount = user.ArtworksCount
-	pageLimit := math.Ceil(float64(worksCount)/30.0) + 1.0
+	pageLimit := math.Ceil(float64(worksCount) / 30.0)
 
 	return c.Render("pages/user", fiber.Map{"Title": user.Name, "User": user, "Category": category, "PageLimit": int(pageLimit), "Page": pageInt})
 }