FEATURE: add features for tag banner integration, clean up (#32)

javascripts/discourse/components/discourse-category-banners.hbs

@@ -2,32 +2,34 @@
   <div
     {{did-insert this.getCategory}}
     {{did-update this.getCategory this.isVisible}}
+    {{will-destroy this.teardownComponent}}
     class="category-title-header
       {{if this.category (concat 'category-banner-' this.category.slug)}}"
     style={{if this.category this.safeStyle}}
   >
-
-    <div class="category-title-contents">
-      <h1 class="category-title">
-        {{#if (and (theme-setting "show_category_icon") this.category)}}
-          {{#if this.hasIconComponent}}
-            {{! For compatibility with https://meta.discourse.org/t/category-icons/104683}}
-            <CategoryIcon @category={{this.category}} />
-          {{else}}
-            {{this.consoleWarn}}
+    {{#if this.category}}
+      <div class="category-title-contents">
+        <h1 class="category-title">
+          {{#if (and (theme-setting "show_category_icon") this.category)}}
+            {{#if this.hasIconComponent}}
+              {{! For compatibility with https://meta.discourse.org/t/category-icons/104683}}
+              <CategoryIcon @category={{this.category}} />
+            {{else}}
+              {{this.consoleWarn}}
+            {{/if}}
           {{/if}}
+          {{#if this.category.read_restricted}}
+            {{d-icon "lock"}}
+          {{/if}}
+          {{this.category.name}}
+          <PluginOutlet @name="category-banners-after-title" />
+        </h1>
+        {{#if (theme-setting "show_description")}}
+          <div class="category-title-description">
+            <div class="cooked" innerHTML={{this.category.description}}></div>
+          </div>
         {{/if}}
-        {{#if this.category.read_restricted}}
-          {{d-icon "lock"}}
-        {{/if}}
-        {{this.category.name}}
-      </h1>
-
-      {{#if (theme-setting "show_description")}}
-        <div class="category-title-description">
-          <div class="cooked" innerHTML={{this.category.description}}></div>
-        </div>
-      {{/if}}
-    </div>
+      </div>
+    {{/if}}
   </div>
 {{/if}}

javascripts/discourse/components/discourse-category-banners.js

@@ -9,6 +9,7 @@ import { getOwner } from "@ember/application";
 export default class DiscourseCategoryBanners extends Component {
   @service router;
   @service site;
+  @service categoryBannerPresence;
   @tracked category = null;
   @tracked keepDuringLoadingRoute = false;
 
@@ -16,38 +17,25 @@ export default class DiscourseCategoryBanners extends Component {
     return getOwner(this).hasRegistration("component:category-icon");
   }
 
-  get consoleWarn() {
-    // eslint-disable-next-line no-console
-    return console.warn(
-      "The category banners component is trying to use the category icons component, but it is not available. https://meta.discourse.org/t/category-icons/104683"
-    );
-  }
-
-  get isVisible() {
-    if (this.categorySlugPathWithID) {
-      this.keepDuringLoadingRoute = true;
-      return true;
-    } else {
-      if (this.router.currentRoute.name.includes("loading")) {
-        return this.keepDuringLoadingRoute;
-      } else {
-        this.keepDuringLoadingRoute = false;
-        return false;
-      }
-    }
-  }
-
   get categorySlugPathWithID() {
     return this.router?.currentRoute?.params?.category_slug_path_with_id;
   }
 
   get shouldRender() {
-    if (this.isVisible && this.keepDuringLoadingRoute) {
+    return (
+      this.categorySlugPathWithID ||
+      (this.keepDuringLoadingRoute &&
+        this.router.currentRoute.name.includes("loading"))
+    );
+  }
+
+  get isVisible() {
+    if (this.categorySlugPathWithID) {
       return true;
-    } else {
-      document.body.classList.remove("category-header");
-      return false;
+    } else if (this.router.currentRoute.name.includes("loading")) {
+      return this.keepDuringLoadingRoute;
     }
+    return false;
   }
 
   get safeStyle() {
@@ -56,6 +44,13 @@ export default class DiscourseCategoryBanners extends Component {
     );
   }
 
+  get consoleWarn() {
+    // eslint-disable-next-line no-console
+    return console.warn(
+      "The category banners component is trying to use the category icons component, but it is not available. https://meta.discourse.org/t/category-icons/104683"
+    );
+  }
+
   #parseCategories(categoriesStr) {
     const categories = {};
     categoriesStr.split("|").forEach((item) => {
@@ -78,8 +73,8 @@ export default class DiscourseCategoryBanners extends Component {
   }
 
   #checkTargetCategory(categories) {
-    const currentCategoryName = this.category.name.toLowerCase();
-    const parentCategoryName = this.category.parentCategory
+    const currentCategoryName = this.category?.name.toLowerCase();
+    const parentCategoryName = this.category?.parentCategory
       ? this.category.parentCategory.name.toLowerCase()
       : null;
 
@@ -87,12 +82,19 @@ export default class DiscourseCategoryBanners extends Component {
       Object.keys(categories).length === 0 ||
       categories[currentCategoryName] === "all" ||
       categories[currentCategoryName] === "no_sub" ||
-      (this.category.parentCategory &&
+      (this.category?.parentCategory &&
         (categories[parentCategoryName] === "all" ||
           categories[parentCategoryName] === "only_sub"))
     );
   }
 
+  @action
+  teardownComponent() {
+    document.body.classList.remove("category-header");
+    this.category = null;
+    this.categoryBannerPresence.setTo(false);
+  }
+
   @action
   getCategory() {
     if (!this.isVisible) {
@@ -103,18 +105,23 @@ export default class DiscourseCategoryBanners extends Component {
       this.category = Category.findBySlugPathWithID(
         this.categorySlugPathWithID
       );
+      this.categoryBannerPresence.setTo(true);
+      this.keepDuringLoadingRoute = true;
+    } else {
+      if (!this.router.currentRoute.name.includes("loading")) {
+        return (this.keepDuringLoadingRoute = false);
+      }
     }
 
     const categories = this.#parseCategories(settings.categories);
     const exceptions = this.#parseExceptions(settings.exceptions);
-
-    const isException = exceptions.includes(this.category.name.toLowerCase());
+    const isException = exceptions.includes(this.category?.name.toLowerCase());
     const isTarget = this.#checkTargetCategory(categories);
     const hideMobile = !settings.show_mobile && this.site.mobileView;
     const isSubCategory =
-      !settings.show_subcategory && this.category.parentCategory;
+      !settings.show_subcategory && this.category?.parentCategory;
     const hasNoCategoryDescription =
-      settings.hide_if_no_description && !this.category.description_text;
+      settings.hide_if_no_description && !this.category?.description_text;
 
     if (
       isTarget &&
@@ -126,6 +133,7 @@ export default class DiscourseCategoryBanners extends Component {
       document.body.classList.add("category-header");
     } else {
       document.body.classList.remove("category-header");
+      this.categoryBannerPresence.setTo(false);
     }
   }
 }

javascripts/discourse/services/category-banner-presence.js

@@ -0,0 +1,10 @@
+import Service from "@ember/service";
+import { tracked } from "@glimmer/tracking";
+
+export default class CategoryBannerPresence extends Service {
+  @tracked isPresent = false;
+
+  setTo(value) {
+    this.isPresent = value;
+  }
+}