Range stepper for pagination.

assets/js/uploader.js

@@ -37,6 +37,28 @@
   const pageN2 = document.getElementById("paginationNext2");
   const pageE = document.getElementById("paginationEnd");
 
+  const pageRange = document.getElementById("paginationRange");
+  if (typeof pageRange !== "undefined" && pageRange != null) {
+    pageRange.addEventListener("change", function () {
+      const range = pageRange.value;
+      const url = new URL(window.location.href);
+      let path = url.pathname;
+      let paths = path.split("/");
+      const page = paths[paths.length - 1];
+      if (!isNaN(page) && typeof Number(page) === "number") {
+        paths[paths.length - 1] = range;
+      } else {
+        paths.push(range);
+      }
+      url.pathname = paths.join("/");
+      window.location.href = url.href;
+    });
+    const pageRangeLabel = document.getElementById("paginationRangeLabel");
+    pageRange.addEventListener("input", function () {
+      pageRangeLabel.textContent = "Jump to page " + pageRange.value;
+    });
+  }
+
   // Keyboard shortcuts event listener
   document.addEventListener("keydown", function (event) {
     if (event.ctrlKey && event.altKey) {

handler/app/asset.go

@@ -30,7 +30,7 @@ type Paths map[Asset]string
 // The strings are intended for href attributes in HTML link elements and
 // the src attribute in HTML script elements.
 func Hrefs() Paths {
-	// note, the js-dos (JS DOS v6) are minified files,
+	// note, the js-dos v6.22 are minified files,
 	// help: https://js-dos.com/6.22/examples/?arkanoid
 	return Paths{
 		Bootstrap5:      "/css/bootstrap.min.css",

handler/app/context.go

@@ -2349,13 +2349,14 @@ func files(logr *zap.SugaredLogger, c echo.Context, uri string, page int) error
 	}
 	const pages = 2
 	data["Pagination"] = model.Pagination{
-		TwoAfter: page + pages,
-		NextPage: page + 1,
-		CurrPage: page,
-		PrevPage: page - 1,
-		TwoBelow: page - pages,
-		SumPages: int(lastPage),
-		BaseURL:  "/files/" + uri,
+		TwoAfter:  page + pages,
+		NextPage:  page + 1,
+		CurrPage:  page,
+		PrevPage:  page - 1,
+		TwoBelow:  page - pages,
+		SumPages:  int(lastPage),
+		BaseURL:   "/files/" + uri,
+		RangeStep: steps(lastPage),
 	}
 	err = c.Render(http.StatusOK, name, data)
 	if err != nil {
@@ -2364,6 +2365,19 @@ func files(logr *zap.SugaredLogger, c echo.Context, uri string, page int) error
 	return nil
 }
 
+func steps(lastPage float64) int {
+	const one, two, four = 1, 2, 4
+	const skip2Pages, skip4Pages = 39, 99
+	switch {
+	case lastPage > skip4Pages:
+		return four
+	case lastPage > skip2Pages:
+		return two
+	default:
+		return one
+	}
+}
+
 // mag is the handler for the magazine page.
 func mag(logr *zap.SugaredLogger, c echo.Context, chronological bool) error {
 	const title, name = "Magazine", "magazine"

model/model.go

@@ -25,13 +25,14 @@ var (
 )
 
 type Pagination struct {
-	BaseURL  string // BaseURL is the base URL for the pagination links.
-	CurrPage int    // CurrPage is the current page number.
-	SumPages int    // SumPages is the total number of pages.
-	PrevPage int    // PrevPage is the previous page number.
-	NextPage int    // NextPage is the next page number.
-	TwoBelow int    // TwoBelow is the page number two below the current page.
-	TwoAfter int    // TwoAfter is the page number two after the current page.
+	BaseURL   string // BaseURL is the base URL for the pagination links.
+	CurrPage  int    // CurrPage is the current page number.
+	SumPages  int    // SumPages is the total number of pages.
+	PrevPage  int    // PrevPage is the previous page number.
+	NextPage  int    // NextPage is the next page number.
+	TwoBelow  int    // TwoBelow is the page number two below the current page.
+	TwoAfter  int    // TwoAfter is the page number two after the current page.
+	RangeStep int    // RangeStep is the number of pages to skip in the pagination range.
 }
 
 // From is the name of the table containing records of files.

view/app/layout.tmpl

@@ -269,6 +269,10 @@
   <ul class="pagination pagination-sm justify-content-end mb-0">
     {{ template "paginationList" . }}
   </ul>
+  <div>
+    <input type="range" class="form-range" id="paginationRange" name="paginationRange" min="1" max="{{ index .Pagination.SumPages }}" value="{{ index .Pagination.CurrPage }}" step="{{ index .Pagination.RangeStep }}" />
+    <label for="paginationRange" id="paginationRangeLabel" class="form-label">&nbsp;</label>
+  </div>
 </nav>
 {{- end }}
 <main>