Make page indicators links to the page they indicate. (#78)

Author: nullchristo

javascripts/discourse/components/featured-homepage-topics.gjs

@@ -1,6 +1,7 @@
 import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
-import { concat } from "@ember/helper";
+import { concat, fn } from "@ember/helper";
+import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import { service } from "@ember/service";
@@ -226,16 +227,30 @@ export default class FeaturedHomepageTopics extends Component {
     let pageProgressArray = [];
     for (let i = 0; i < this.numberOfPages; ++i) {
       if (i === this.currentPageIndex) {
-        pageProgressArray.push("--current-page");
+        pageProgressArray.push({ pageIndex: i, markerClass: "--current-page" });
       } else if (i < this.currentPageIndex) {
-        pageProgressArray.push("--previous-page");
+        pageProgressArray.push({
+          pageIndex: i,
+          markerClass: "--previous-page",
+        });
       } else {
-        pageProgressArray.push("");
+        pageProgressArray.push({ pageIndex: i, markerClass: "" });
       }
     }
     return pageProgressArray;
   }
 
+  @action
+  setPageIndex(pageIndex, event) {
+    this.currentPageIndex = pageIndex;
+    event?.preventDefault();
+    this.getBannerTopics();
+  }
+
+  pageNumberTitle(pageIndex) {
+    return i18n(themePrefix("page_number"), { pageNumber: pageIndex + 1 });
+  }
+
   <template>
     {{#if (and this.showFor this.showHere)}}
       <div
@@ -327,8 +342,21 @@ export default class FeaturedHomepageTopics extends Component {
 
               {{#if this.paginationEnabled}}
                 <div class="page-progress-container">
-                  {{#each this.pageProgressArray as |pageProgressClass|}}
-                    <div class="page-progress-marker {{pageProgressClass}}" />
+                  {{#each this.pageProgressArray as |pageProgressItem|}}
+                    <a
+                      href
+                      class="page-progress-marker-link"
+                      title={{this.pageNumberTitle pageProgressItem.pageIndex}}
+                      {{on
+                        "click"
+                        (fn this.setPageIndex pageProgressItem.pageIndex)
+                      }}
+                    >
+                      <div
+                        class="page-progress-marker
+                          {{pageProgressItem.markerClass}}"
+                      />
+                    </a>
                   {{/each}}
                 </div>
               {{/if}}

locales/en.yml

@@ -1,5 +1,6 @@
 en:
   featured_topic_title: ""
+  page_number: "Page %{pageNumber}"
   theme_metadata:
     settings:
       number_of_topics: Display up to 5 topics at max-width

spec/system/pagination_spec.rb

@@ -118,6 +118,33 @@
         expect(page).to have_css(".featured-topics-controls .left-page-button")
         expect_page_progress(2, 2)
       end
+
+      it "allows page switching by clicking page indicators" do
+        theme.update_setting(:number_of_topics, 3)
+        theme.update_setting(:max_number_of_topics, 8)
+        theme.save!
+
+        visit("/")
+        expect(page).to have_css(".featured-topics .featured-topic", count: 3)
+        expect_page_progress(1, 3)
+
+        expect(page).to have_css(".page-progress-container .page-progress-marker-link:nth-child(1)")
+        find(".page-progress-container .page-progress-marker-link:nth-child(1)").click
+        expect(page).to have_css(".featured-topics .featured-topic", count: 3)
+        expect_page_progress(1, 3)
+
+        find(".page-progress-container .page-progress-marker-link:nth-child(2)").click
+        expect(page).to have_css(".featured-topics .featured-topic", count: 3)
+        expect_page_progress(2, 3)
+
+        find(".page-progress-container .page-progress-marker-link:nth-child(3)").click
+        expect(page).to have_css(".featured-topics .featured-topic", count: 2)
+        expect_page_progress(3, 3)
+
+        find(".page-progress-container .page-progress-marker-link:nth-child(1)").click
+        expect(page).to have_css(".featured-topics .featured-topic", count: 3)
+        expect_page_progress(1, 3)
+      end
     end
 
     describe "with looping enabled" do