FEATURE: Add a page progress indicator and optional page looping (#76)

Adds a page progress indicator and optional page looping when pagination enabled.

Author: nullchristo

common/common.scss

@@ -240,6 +240,34 @@ html.homepage-featured-topics {
       }
     }
   }
+
+  .page-progress-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--progress-bar-circle-size);
+    margin-bottom: 1.2rem;
+
+    .page-progress-marker {
+      width: var(--progress-bar-circle-size);
+      height: var(--progress-bar-circle-size);
+      border: var(--progress-bar-line-width) solid var(--primary-low-mid);
+      background-color: var(--secondary);
+      border-radius: 50%;
+
+      &.--previous-page {
+        background-color: var(--primary-medium);
+        border-color: var(--primary-medium);
+      }
+
+      &.--current-page {
+        background-color: var(--primary-medium);
+        border-color: var(--primary-medium);
+        box-shadow: 0 0 1px calc(var(--progress-bar-circle-size) / 2)
+          var(--primary-low);
+      }
+    }
+  }
 }
 
 body:not(.staff) {

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

@@ -28,7 +28,7 @@ export default class FeaturedHomepageTopics extends Component {
   toggleTopics =
     this.keyValueStore.getItem("toggleTopicsState") === "true" || false;
 
-  @tracked currentFeaturedTopic = 0;
+  @tracked currentPageIndex = 0;
   @tracked featuredTopicsAvailable = 0;
   @tracked actualTopicsDisplayed = 0;
 
@@ -160,48 +160,82 @@ export default class FeaturedHomepageTopics extends Component {
 
     this.featuredTopicsAvailable = filteredTopics.length;
 
+    const firstFeaturedTopicIndex =
+      this.currentPageIndex * this.actualTopicsDisplayed;
+    const lastFeaturedTopicIndex =
+      firstFeaturedTopicIndex + this.actualTopicsDisplayed;
+
     this.featuredTagTopics = filteredTopics.slice(
-      this.currentFeaturedTopic,
-      this.currentFeaturedTopic + this.actualTopicsDisplayed
+      firstFeaturedTopicIndex,
+      lastFeaturedTopicIndex
     );
   }
 
-  get showPageArrows() {
+  get paginationEnabled() {
     return (
       settings.max_number_of_topics > settings.number_of_topics &&
       this.featuredTopicsAvailable > settings.number_of_topics
     );
   }
 
+  get numberOfPages() {
+    return Math.ceil(this.featuredTopicsAvailable / this.actualTopicsDisplayed);
+  }
+
+  get currentPageNumber() {
+    return this.currentPageIndex + 1;
+  }
+
   get showLeftArrow() {
-    return this.currentFeaturedTopic > 0;
+    return settings.pages_loop || this.currentPageIndex > 0;
   }
 
   get showRightArrow() {
     return (
-      this.currentFeaturedTopic <
-      this.featuredTopicsAvailable - this.actualTopicsDisplayed
+      settings.pages_loop || this.currentPageIndex < this.numberOfPages - 1
     );
   }
 
   @action
   pageLeft() {
-    this.currentFeaturedTopic = Math.max(
-      this.currentFeaturedTopic - this.actualTopicsDisplayed,
-      0
-    );
+    if (this.currentPageIndex === 0) {
+      if (settings.pages_loop) {
+        this.currentPageIndex = this.numberOfPages - 1;
+      }
+    } else {
+      this.currentPageIndex -= 1;
+    }
+
     this.getBannerTopics();
   }
 
   @action
   pageRight() {
-    this.currentFeaturedTopic = Math.min(
-      this.currentFeaturedTopic + this.actualTopicsDisplayed,
-      this.featuredTopicsAvailable - 1
-    );
+    if (this.currentPageIndex === this.numberOfPages - 1) {
+      if (settings.pages_loop) {
+        this.currentPageIndex = 0;
+      }
+    } else {
+      this.currentPageIndex += 1;
+    }
+
     this.getBannerTopics();
   }
 
+  get pageProgressArray() {
+    let pageProgressArray = [];
+    for (let i = 0; i < this.numberOfPages; ++i) {
+      if (i === this.currentPageIndex) {
+        pageProgressArray.push("--current-page");
+      } else if (i < this.currentPageIndex) {
+        pageProgressArray.push("--previous-page");
+      } else {
+        pageProgressArray.push("");
+      }
+    }
+    return pageProgressArray;
+  }
+
   <template>
     {{#if (and this.showFor this.showHere)}}
       <div
@@ -242,7 +276,7 @@ export default class FeaturedHomepageTopics extends Component {
               {{/if}}
 
               <div class="featured-topics-controls">
-                {{#if this.showPageArrows}}
+                {{#if this.paginationEnabled}}
                   <div class="page-button-container">
                     {{#if this.showLeftArrow}}
                       <DButton
@@ -278,7 +312,7 @@ export default class FeaturedHomepageTopics extends Component {
                     </div>
                   {{/each}}
                 </div>
-                {{#if this.showPageArrows}}
+                {{#if this.paginationEnabled}}
                   <div class="page-button-container">
                     {{#if this.showRightArrow}}
                       <DButton
@@ -290,6 +324,14 @@ export default class FeaturedHomepageTopics extends Component {
                   </div>
                 {{/if}}
               </div>
+
+              {{#if this.paginationEnabled}}
+                <div class="page-progress-container">
+                  {{#each this.pageProgressArray as |pageProgressClass|}}
+                    <div class="page-progress-marker {{pageProgressClass}}" />
+                  {{/each}}
+                </div>
+              {{/if}}
             </div>
           </div>
         {{/if}}

locales/en.yml

@@ -4,6 +4,7 @@ en:
     settings:
       number_of_topics: Display up to 5 topics at max-width
       max_number_of_topics: Maximum number of featured topics. If set higher than number_of_topics then arrows will be displayed for paging through the topics.
+      pages_loop: If pagination is enabled (max_number_of_topics > number_of_topics), pages continue back to the first page after the last.
       hide_featured_tag: When enabled the tag "featured tag" set above will be invisible to normal users when viewing topics.
       show_on: top_menu refers to pages set in the <a href="%{base_path}/admin/site_settings/category/all_results?filter=top_menu">top menu site setting</a>
       make_collapsible: Make the entire component collapsible

settings.yml

@@ -11,6 +11,9 @@ max_number_of_topics:
   min: 0
   max: 25
 
+pages_loop:
+  default: false
+
 hide_featured_tag:
   default: false