FEATURE: support placing ads between topic list for house ads (#143)

* init

* more

* Pass td and colspan to component

* various fixes for house ads between n topics and add a test

* Make adComponents condition easier to read

Co-authored-by: Jordan Vidrine <jordan@jordanvidrine.com>
Co-authored-by: Penar Musaraj <pmusaraj@gmail.com>
Co-authored-by: romanrizzi <rizziromanalejandro@gmail.com>

assets/javascripts/discourse/components/ad-component.js

@@ -99,4 +99,14 @@ export default Component.extend({
       return false;
     }
   },
+
+  isNthTopicListItem(n) {
+    let indexNumber = this.get("indexNumber");
+    indexNumber = indexNumber + 1;
+    if (n && n > 0 && indexNumber > 0) {
+      return indexNumber % n === 0;
+    } else {
+      return false;
+    }
+  },
 });

assets/javascripts/discourse/components/ad-slot.js

@@ -68,13 +68,14 @@ const displayCounts = {
 
 export default AdComponent.extend({
   needsUpdate: false,
+  tagName: "",
 
   /**
    * For a given ad placement and optionally a post number if in between posts,
    * list all ad network names that are configured to show there.
    */
-  @discourseComputed("placement", "postNumber")
-  availableAdTypes(placement, postNumber) {
+  @discourseComputed("placement", "postNumber", "indexNumber")
+  availableAdTypes(placement, postNumber, indexNumber) {
     let types = [];
     const houseAds = this.site.get("house_creatives"),
       placeUnderscored = placement.replace(/-/g, "_");
@@ -82,11 +83,24 @@ export default AdComponent.extend({
     if (houseAds && houseAds.settings) {
       const adsForSlot = houseAds.settings[placeUnderscored];
 
+      const adAvailable =
+        Object.keys(houseAds.creatives).length > 0 && !isBlank(adsForSlot);
+
+      // postNumber and indexNumber are both null for topic-list-top, topic-above-post-stream,
+      // and topic-above-suggested placements. Assume we want to place an ad outside the topic list.
+      const notPlacingBetweenTopics = !postNumber && !indexNumber;
+
+      const canBePlacedInBetweenTopics =
+        placeUnderscored === "topic_list_between" &&
+        this.isNthTopicListItem(
+          parseInt(houseAds.settings.after_nth_topic, 10)
+        );
+
       if (
-        Object.keys(houseAds.creatives).length > 0 &&
-        !isBlank(adsForSlot) &&
-        (!postNumber ||
-          this.isNthPost(parseInt(houseAds.settings.after_nth_post, 10)))
+        adAvailable &&
+        (notPlacingBetweenTopics ||
+          this.isNthPost(parseInt(houseAds.settings.after_nth_post, 10)) ||
+          canBePlacedInBetweenTopics)
       ) {
         types.push("house-ad");
       }
@@ -98,12 +112,8 @@ export default AdComponent.extend({
         name;
 
       if (
-        ((config.enabledSetting &&
-          !isBlank(this.siteSettings[config.enabledSetting])) ||
-          config.enabledSetting === false) &&
-        (!postNumber ||
-          !config.nthPost ||
-          this.isNthPost(parseInt(this.siteSettings[config.nthPost], 10)))
+        this._isNetworkAvailable(config.enabledSetting) &&
+        this._shouldPlaceAdInSlot(postNumber, config.nthPost)
       ) {
         if (this.site.mobileView) {
           settingNames = config.mobile || config.desktop;
@@ -195,4 +205,25 @@ export default AdComponent.extend({
 
     return networkNames;
   },
+
+  _isNetworkAvailable(enabledNetworkSettingName) {
+    // False means there's no setting to enable or disable this ad network.
+    // Assume it's always enabled.
+    if (enabledNetworkSettingName === false) {
+      return true;
+    } else {
+      return (
+        enabledNetworkSettingName &&
+        !isBlank(this.siteSettings[enabledNetworkSettingName])
+      );
+    }
+  },
+
+  _shouldPlaceAdInSlot(currentPostNumber, positionToPlace) {
+    return (
+      !currentPostNumber ||
+      !positionToPlace ||
+      this.isNthPost(parseInt(this.siteSettings[positionToPlace], 10))
+    );
+  },
 });

assets/javascripts/discourse/components/house-ad.js

@@ -7,26 +7,47 @@ const adIndex = {
   topic_above_post_stream: null,
   topic_above_suggested: null,
   post_bottom: null,
+  topic_list_between: null,
 };
 
 export default AdComponent.extend({
   classNames: ["house-creative"],
   classNameBindings: ["adUnitClass"],
+  attributeBindings: ["colspanAttribute:colspan"],
   adHtml: "",
 
+  @discourseComputed
+  colspanAttribute() {
+    return this.tagName === "td" ? "5" : null;
+  },
+
   @discourseComputed("placement", "showAd")
   adUnitClass(placement, showAd) {
     return showAd ? `house-${placement}` : "";
   },
 
-  @discourseComputed("showToGroups", "showAfterPost", "showOnCurrentPage")
-  showAd(showToGroups, showAfterPost, showOnCurrentPage) {
-    return showToGroups && showAfterPost && showOnCurrentPage;
+  @discourseComputed(
+    "showToGroups",
+    "showAfterPost",
+    "showAfterTopicListItem",
+    "showOnCurrentPage"
+  )
+  showAd(
+    showToGroups,
+    showAfterPost,
+    showAfterTopicListItem,
+    showOnCurrentPage
+  ) {
+    return (
+      showToGroups &&
+      (showAfterPost || showAfterTopicListItem) &&
+      showOnCurrentPage
+    );
   },
 
-  @discourseComputed("postNumber")
-  showAfterPost(postNumber) {
-    if (!postNumber) {
+  @discourseComputed("postNumber", "placement")
+  showAfterPost(postNumber, placement) {
+    if (!postNumber && placement !== "topic-list-between") {
       return true;
     }
 
@@ -35,6 +56,17 @@ export default AdComponent.extend({
     );
   },
 
+  @discourseComputed("placement")
+  showAfterTopicListItem(placement) {
+    if (placement !== "topic-list-between") {
+      return true;
+    }
+
+    return this.isNthTopicListItem(
+      parseInt(this.site.get("house_creatives.settings.after_nth_topic"), 10)
+    );
+  },
+
   chooseAdHtml() {
     const houseAds = this.site.get("house_creatives"),
       placement = this.get("placement").replace(/-/g, "_"),

assets/javascripts/discourse/templates/admin/plugins-house-ads-index.hbs

@@ -7,6 +7,7 @@
       {{house-ads-list-setting name="topic_above_post_stream" value=adSettings.topic_above_post_stream allAds=houseAds adSettings=adSettings}}
       {{house-ads-list-setting name="topic_above_suggested" value=adSettings.topic_above_suggested allAds=houseAds adSettings=adSettings}}
       {{house-ads-list-setting name="post_bottom" value=adSettings.post_bottom allAds=houseAds adSettings=adSettings}}
+      {{house-ads-list-setting name="topic_list_between" value=adSettings.topic_list_between allAds=houseAds adSettings=adSettings}}
 
       {{d-button label="admin.adplugin.house_ads.more_settings"
          icon="cog"

assets/javascripts/discourse/templates/components/ad-slot.hbs

@@ -4,5 +4,8 @@
     refreshOnChange=refreshOnChange
     category=category
     listLoading=listLoading
-    postNumber=postNumber}}
+    postNumber=postNumber
+    indexNumber=indexNumber
+    tagName=childTagName
+  }}
 {{/each}}

assets/javascripts/discourse/templates/connectors/after-topic-list-item/discourse-adplugin.hbs

@@ -0,0 +1,8 @@
+{{ad-slot
+  placement="topic-list-between"
+  refreshOnChange=listLoading
+  category=category.slug
+  listLoading=listLoading
+  indexNumber=index
+  childTagName="td"
+}}