Add pagination only if max_number_of_topics > number_of_topics (#65)

Adds a new theme component setting called max_number_of_topics, defaulting to 0.

Unless this is set to a number greater than the number_of_topics setting, behavior should be unchanged.

If it's set to a higher number AND there are enough featured topics to have more than one page, page arrows will appear allowing the user to cycle through pages of featured topics with each page having number_of_topics topics displayed. The left/right arrow buttons should only display if there are additional pages in that direction.

Tries to play nicely with the show_all_always setting and handles small screen sizes in the same way (lowering the number of displayed topics as the screen shrinks, but still allowing all topics included by max_number_of_topics to be paged through).

Author: nullchristo

common/common.scss

@@ -33,97 +33,121 @@ html.homepage-featured-topics {
     margin-bottom: 1.5em;
   }
 
-  .featured-topics {
+  .featured-topics-controls {
     display: flex;
-    justify-content: center;
-    align-items: flex-start;
+    align-items: center;
+    justify-content: space-between;
 
-    .featured-topic {
-      flex: 1 1 30%;
-      max-width: 500px;
+    .page-button-container {
+      flex: 0 0 2.2em;
+    }
+
+    .page-button {
+      height: min-content;
+      padding: 0.3em;
+    }
+
+    .left-page-button {
+      margin-right: 0.4em;
+    }
+
+    .right-page-button {
+      margin-left: 0.4em;
+    }
+
+    .featured-topics {
+      flex: 1;
       display: flex;
-      flex-wrap: wrap;
-      align-items: center;
       justify-content: center;
+      align-items: flex-start;
 
-      @media screen and (width >= 451px) {
-        margin: 0 1.25em;
+      .featured-topic {
+        flex: 1 1 30%;
+        max-width: 500px;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: center;
 
-        &:first-of-type:not(:last-of-type) {
-          margin-left: 0;
-        }
+        @media screen and (width >= 451px) {
+          margin: 0 1.25em;
 
-        &:last-of-type:not(:first-of-type) {
-          margin-right: 0;
-        }
-      }
+          &:first-of-type:not(:last-of-type) {
+            margin-left: 0;
+          }
 
-      @media screen and (width <= 999px) {
-        &:nth-of-type(4) {
-          margin-right: 0;
+          &:last-of-type:not(:first-of-type) {
+            margin-right: 0;
+          }
         }
 
-        &:nth-of-type(n + 5) {
-          display: none;
-        }
-      }
+        @media screen and (width <= 999px) {
+          &:nth-of-type(4) {
+            margin-right: 0;
+          }
 
-      @media screen and (width <= 800px) {
-        &:nth-of-type(3) {
-          margin-right: 0;
+          &:nth-of-type(n + 5) {
+            display: none;
+          }
         }
 
-        &:nth-of-type(n + 4) {
-          display: none;
+        @media screen and (width <= 800px) {
+          &:nth-of-type(3) {
+            margin-right: 0;
+          }
+
+          &:nth-of-type(n + 4) {
+            display: none;
+          }
         }
-      }
 
-      @media screen and (width <= 600px) {
-        width: 100%;
+        @media screen and (width <= 600px) {
+          width: 100%;
 
-        &:nth-of-type(2) {
-          margin-right: 0;
-        }
+          &:nth-of-type(2) {
+            margin-right: 0;
+          }
 
-        &:nth-of-type(n + 3) {
-          display: none;
+          &:nth-of-type(n + 3) {
+            display: none;
+          }
         }
-      }
 
-      @media screen and (width <= 450px) {
-        width: 100%;
+        @media screen and (width <= 450px) {
+          width: 100%;
 
-        &:nth-of-type(n + 2) {
-          display: none;
+          &:nth-of-type(n + 2) {
+            display: none;
+          }
         }
-      }
 
-      h3 {
-        margin: 0;
-        font-size: var(--font-up-2);
-        padding: 0.5em 1em 1em 1em;
-
-        a {
-          display: -webkit-box;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          word-wrap: break-word;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
+        h3 {
+          margin: 0;
+          font-size: var(--font-up-2);
+          padding: 0.5em 1em 1em 1em;
+
+          a {
+            display: -webkit-box;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            word-wrap: break-word;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+          }
         }
-      }
-
-      .featured-topic-image {
-        height: 200px;
-        max-width: 450px;
-        width: 100%;
-        background-size: cover;
-        background-position: center center;
 
-        a {
-          display: block;
+        .featured-topic-image {
+          height: 200px;
+          max-width: 450px;
           width: 100%;
-          height: 100%;
+          background-size: cover;
+          background-position: center center;
+
+          a {
+            display: block;
+            width: 100%;
+            height: 100%;
+          }
         }
       }
     }

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

@@ -28,14 +28,20 @@ export default class FeaturedHomepageTopics extends Component {
   toggleTopics =
     this.keyValueStore.getItem("toggleTopicsState") === "true" || false;
 
+  @tracked currentFeaturedTopic = 0;
+  @tracked featuredTopicsAvailable = 0;
+  @tracked actualTopicsDisplayed = 0;
+
   constructor() {
     super(...arguments);
     this.router.on("routeDidChange", this.checkShowHere);
+    window.addEventListener("resize", this.getBannerTopics);
   }
 
   willDestroy() {
     super.willDestroy(...arguments);
     this.router.off("routeDidChange", this.checkShowHere);
+    window.removeEventListener("resize", this.getBannerTopics);
   }
 
   @action
@@ -119,6 +125,20 @@ export default class FeaturedHomepageTopics extends Component {
       return;
     }
 
+    this.actualTopicsDisplayed = settings.number_of_topics;
+    if (!settings.show_all_always) {
+      // Sizes here are based on the existing resize boundaries in the CSS
+      if (window.innerWidth <= 450) {
+        this.actualTopicsDisplayed = Math.min(this.actualTopicsDisplayed, 1);
+      } else if (window.innerWidth <= 600) {
+        this.actualTopicsDisplayed = Math.min(this.actualTopicsDisplayed, 2);
+      } else if (window.innerWidth <= 800) {
+        this.actualTopicsDisplayed = Math.min(this.actualTopicsDisplayed, 3);
+      } else if (window.innerWidth <= 999) {
+        this.actualTopicsDisplayed = Math.min(this.actualTopicsDisplayed, 4);
+      }
+    }
+
     const sortOrder = settings.sort_by_created ? "created" : "activity";
     const topicList = await this.store.findFiltered("topicList", {
       filter: "latest",
@@ -128,12 +148,58 @@ export default class FeaturedHomepageTopics extends Component {
       },
     });
 
-    this.featuredTagTopics = topicList.topics
+    const filteredTopics = topicList.topics
       .filter(
         (topic) =>
           topic.image_url && (!settings.hide_closed_topics || !topic.closed)
       )
-      .slice(0, settings.number_of_topics);
+      .slice(
+        0,
+        Math.max(settings.number_of_topics, settings.max_number_of_topics)
+      );
+
+    this.featuredTopicsAvailable = filteredTopics.length;
+
+    this.featuredTagTopics = filteredTopics.slice(
+      this.currentFeaturedTopic,
+      this.currentFeaturedTopic + this.actualTopicsDisplayed
+    );
+  }
+
+  get showPageArrows() {
+    return (
+      settings.max_number_of_topics > settings.number_of_topics &&
+      this.featuredTopicsAvailable > settings.number_of_topics
+    );
+  }
+
+  get showLeftArrow() {
+    return this.currentFeaturedTopic > 0;
+  }
+
+  get showRightArrow() {
+    return (
+      this.currentFeaturedTopic <
+      this.featuredTopicsAvailable - this.actualTopicsDisplayed - 1
+    );
+  }
+
+  @action
+  pageLeft() {
+    this.currentFeaturedTopic = Math.max(
+      this.currentFeaturedTopic - this.actualTopicsDisplayed,
+      0
+    );
+    this.getBannerTopics();
+  }
+
+  @action
+  pageRight() {
+    this.currentFeaturedTopic = Math.min(
+      this.currentFeaturedTopic + this.actualTopicsDisplayed,
+      this.featuredTopicsAvailable - 1
+    );
+    this.getBannerTopics();
   }
 
   <template>
@@ -175,30 +241,54 @@ export default class FeaturedHomepageTopics extends Component {
                 </h2>
               {{/if}}
 
-              <div class="featured-topics">
-                {{#each this.featuredTagTopics as |t|}}
-                  <div class="featured-topic">
-                    <div
-                      class="featured-topic-image"
-                      style={{htmlSafe
-                        (concat "background-image: url(" t.image_url ")")
-                      }}
-                    >
-                      {{! template-lint-disable no-invalid-link-text }}
-                      <a href={{this.topicHref t}}></a>
-                    </div>
-                    <h3>
-                      <a
-                        href={{this.topicHref t}}
-                        role="heading"
-                        aria-level="2"
-                        data-topic-id={{t.id}}
+              <div class="featured-topics-controls">
+                {{#if this.showPageArrows}}
+                  <div class="page-button-container">
+                    {{#if this.showLeftArrow}}
+                      <DButton
+                        class="page-button left-page-button"
+                        @action={{this.pageLeft}}
+                        @icon="angle-left"
+                      />
+                    {{/if}}
+                  </div>
+                {{/if}}
+                <div class="featured-topics">
+                  {{#each this.featuredTagTopics as |t|}}
+                    <div class="featured-topic">
+                      <div
+                        class="featured-topic-image"
+                        style={{htmlSafe
+                          (concat "background-image: url(" t.image_url ")")
+                        }}
                       >
-                        {{htmlSafe (this.emojiTitle t.fancy_title)}}
-                      </a>
-                    </h3>
+                        {{! template-lint-disable no-invalid-link-text }}
+                        <a href={{this.topicHref t}}></a>
+                      </div>
+                      <h3>
+                        <a
+                          href={{this.topicHref t}}
+                          role="heading"
+                          aria-level="2"
+                          data-topic-id={{t.id}}
+                        >
+                          {{htmlSafe (this.emojiTitle t.fancy_title)}}
+                        </a>
+                      </h3>
+                    </div>
+                  {{/each}}
+                </div>
+                {{#if this.showPageArrows}}
+                  <div class="page-button-container">
+                    {{#if this.showRightArrow}}
+                      <DButton
+                        class="page-button right-page-button"
+                        @action={{this.pageRight}}
+                        @icon="angle-right"
+                      />
+                    {{/if}}
                   </div>
-                {{/each}}
+                {{/if}}
               </div>
             </div>
           </div>

locales/en.yml

@@ -3,6 +3,7 @@ en:
   theme_metadata:
     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.
       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