Add CodeFund

assets/javascripts/discourse/components/codefund-ad.js.es6

@@ -0,0 +1,98 @@
+var _loaded = false,
+    _promise = null,
+    currentUser = Discourse.User.current(),
+    propertyId = Discourse.SiteSettings.codefund_property_code;
+
+function loadCodeFund() {
+  if (_loaded) {
+    return Ember.RSVP.resolve();
+  }
+
+  if (_promise) {
+    return _promise;
+  }
+
+  const url = 'https://codefund.io/t/s/' + propertyId + '/details.json';
+
+  _promise = new Promise(function(resolve, reject){
+    let xhr = new XMLHttpRequest();
+
+    xhr.open('GET', url);
+    xhr.onreadystatechange = handler;
+    xhr.responseType = 'json';
+    xhr.setRequestHeader('Accept', 'application/json');
+    xhr.send();
+
+    function handler() {
+      if (this.readyState === this.DONE) {
+        _loaded = true;
+        if (this.status === 200) {
+          resolve(this.response);
+        } else {
+          reject(new Error('getJSON: `' + url + '` failed with status: [' + this.status + ']'));
+        }
+      }
+    };
+  });
+
+  return _promise;
+}
+
+
+export default Ember.Component.extend({
+  classNameBindings: [':codefund-ad', 'classForSlot', 'isResponsive:codefund-responsive'],
+  propertyId: propertyId,
+  adRequested: false,
+  adDetails: {},
+
+  _triggerAds() {
+    this.set('adRequested', true);
+    loadCodeFund().then((data) => {
+      this.set('adDetails', data);
+      this.set('adRequested', false);
+      console.log('Loaded ad');
+    }).catch(error => console.log(error));
+  },
+
+  didInsertElement() {
+    this._super();
+
+    if (!this.get('showAd')) { return; }
+
+    if (this.get('listLoading')) { return; }
+
+    Ember.run.scheduleOnce('afterRender', this, this._triggerAds);
+  },
+
+  waitForLoad: function() {
+    if (this.get('adRequested')) { return; } // already requested that this ad unit be populated
+    if (!this.get('listLoading')) {
+      Ember.run.scheduleOnce('afterRender', this, this._triggerAds);
+    }
+  }.observes('listLoading'),
+
+  checkTrustLevels: function() {
+    return !((currentUser) && (currentUser.get('trust_level') > Discourse.SiteSettings.codefund_through_trust_level));
+  }.property('trust_level'),
+
+  showAd: function() {
+    return Discourse.SiteSettings.codefund_property_code && this.get('checkTrustLevels');
+  }.property('checkTrustLevels'),
+
+  displayPostBottom: function() {
+    return this.get('placement') === 'post-bottom';
+  }.property('placement'),
+
+  displayTopicAbovePostStream: function() {
+    return this.get('placement') === 'topic-above-post-stream';
+  }.property('placement'),
+
+  displayTopicAboveSuggested: function() {
+    return this.get('placement') === 'topic-above-suggested';
+  }.property('placement'),
+
+  displayTopicListTop: function() {
+    return this.get('placement') === 'topic-list-top';
+  }.property('placement')
+
+});

assets/javascripts/discourse/templates/components/adplugin-container.hbs

@@ -14,6 +14,11 @@
       {{amazon-product-links placement="post-bottom" postNumber=model.post_number}}
     {{/if}}
   {{/if}}
+  {{#if model.postSpecificCountCodeFund}}
+    {{#if siteSettings.codefund_below_post_enabled}}
+      {{codefund-ad placement="post-bottom" postNumber=model.post_number}}
+    {{/if}}
+  {{/if}}
 {{else}}
   {{#if model.postSpecificCountAdsense}}
     {{#if siteSettings.adsense_post_bottom_code}}
@@ -30,4 +35,9 @@
       {{amazon-product-links placement="post-bottom" postNumber=model.post_number}}
     {{/if}}
   {{/if}}
+  {{#if model.postSpecificCountCodeFund}}
+    {{#if siteSettings.codefund_below_post_enabled}}
+      {{codefund-ad placement="post-bottom" postNumber=model.post_number}}
+    {{/if}}
+  {{/if}}
 {{/if}}

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

@@ -0,0 +1,29 @@
+{{#if showAd}}
+  {{#if site.mobileView}}
+    {{#if displayPostBottom}}
+      {{partial "components/codefund/post-bottom"}}
+    {{/if}}
+    {{#if displayTopicAbovePostStream}}
+      {{partial "components/codefund/topic-above-post-stream"}}
+    {{/if}}
+    {{#if displayTopicAboveSuggested}}
+      {{partial "components/codefund/topic-above-suggested"}}
+    {{/if}}
+    {{#if displayTopicListTop}}
+      {{partial "components/codefund/topic-list-top"}}
+    {{/if}}
+  {{else}}
+    {{#if displayPostBottom}}
+      {{partial "components/codefund/post-bottom"}}
+    {{/if}}
+    {{#if displayTopicAbovePostStream}}
+      {{partial "components/codefund/topic-above-post-stream"}}
+    {{/if}}
+    {{#if displayTopicAboveSuggested}}
+      {{partial "components/codefund/topic-above-suggested"}}
+    {{/if}}
+    {{#if displayTopicListTop}}
+      {{partial "components/codefund/topic-list-top"}}
+    {{/if}}
+  {{/if}}
+{{/if}}

assets/javascripts/discourse/templates/components/codefund/post-bottom.hbs

@@ -0,0 +1,8 @@
+<span class="codefund-wrapper codefund-post-bottom">
+  <a href="{{adDetails.link}}" class="codefund-text" target="_blank" rel="noopener">
+    {{#if siteSettings.codefund_display_advertiser_labels}}
+      <span class="codefund-label">{{siteSettings.codefund_advertiser_short_label}}</span>
+    {{/if}}
+    <strong>{{adDetails.headline}}</strong> {{adDetails.description}}
+  </a>
+</span>

assets/javascripts/discourse/templates/components/codefund/topic-above-post-stream.hbs

@@ -0,0 +1,11 @@
+<span class="codefund-wrapper codefund-topic-above-post-stream">
+  <a href="{{adDetails.link}}" class="codefund-text" target="_blank" rel="noopener">
+    {{#if siteSettings.codefund_display_advertiser_labels}}
+      <span class="codefund-label">{{siteSettings.codefund_advertiser_label}}</span>
+    {{/if}}
+    <strong>{{adDetails.headline}}</strong> {{adDetails.description}}
+  </a>
+  <a href={{adDetails.poweredByLink}} class="codefund-powered-by" target="_blank" rel="noopener">
+    ads via codefund.io
+  </a>
+</span>

assets/javascripts/discourse/templates/components/codefund/topic-above-suggested.hbs

@@ -0,0 +1,11 @@
+<span class="codefund-wrapper codefund-topic-above-suggested">
+  <a href="{{adDetails.link}}" class="codefund-text" target="_blank" rel="noopener">
+    {{#if siteSettings.codefund_display_advertiser_labels}}
+      <span class="codefund-label">{{siteSettings.codefund_advertiser_label}}</span>
+    {{/if}}
+    <strong>{{adDetails.headline}}</strong> {{adDetails.description}}
+  </a>
+  <a href={{adDetails.poweredByLink}} class="codefund-powered-by" target="_blank" rel="noopener">
+    ads via codefund.io
+  </a>
+</span>

assets/javascripts/discourse/templates/components/codefund/topic-list-top.hbs

@@ -0,0 +1,11 @@
+<span class="codefund-wrapper codefund-topic-list-top">
+  <a href="{{adDetails.link}}" class="codefund-text" target="_blank" rel="noopener">
+    {{#if siteSettings.codefund_display_advertiser_labels}}
+      <span class="codefund-label">{{siteSettings.codefund_advertiser_label}}</span>
+    {{/if}}
+    <strong>{{adDetails.headline}}</strong> {{adDetails.description}}
+  </a>
+  <a href={{adDetails.poweredByLink}} class="codefund-powered-by" target="_blank" rel="noopener">
+    ads via codefund.io
+  </a>
+</span>

assets/javascripts/discourse/templates/connectors/discovery-list-container-top/discourse-adplugin.hbs

@@ -8,6 +8,9 @@
   {{#if siteSettings.amazon_mobile_topic_list_top_src_code}}
     {{amazon-product-links placement="topic-list-top" listLoading=listLoading}}
   {{/if}}
+  {{#if siteSettings.codefund_top_of_topic_list_enabled}}
+    {{codefund-ad placement="topic-list-top" listLoading=listLoading refreshOnChange=listLoading}}
+  {{/if}}
 {{else}}
   {{#if siteSettings.adsense_topic_list_top_code}}
     {{google-adsense placement="topic-list-top" listLoading=listLoading}}
@@ -18,4 +21,7 @@
   {{#if siteSettings.amazon_topic_list_top_src_code}}
     {{amazon-product-links placement="topic-list-top" listLoading=listLoading}}
   {{/if}}
+  {{#if siteSettings.codefund_top_of_topic_list_enabled}}
+    {{codefund-ad placement="topic-list-top" listLoading=listLoading refreshOnChange=listLoading}}
+  {{/if}}
 {{/if}}

assets/javascripts/discourse/templates/connectors/topic-above-post-stream/discourse-adplugin.hbs

@@ -8,6 +8,9 @@
   {{#if siteSettings.amazon_mobile_topic_above_post_stream_src_code}}
     {{amazon-product-links placement="topic-above-post-stream"}}
   {{/if}}
+  {{#if siteSettings.codefund_above_post_stream_enabled}}
+    {{codefund-ad placement="topic-above-post-stream"}}
+  {{/if}}
 {{else}}
   {{#if siteSettings.adsense_topic_above_post_stream_code}}
     {{google-adsense placement="topic-above-post-stream"}}
@@ -18,4 +21,7 @@
   {{#if siteSettings.amazon_topic_above_post_stream_src_code}}
     {{amazon-product-links placement="topic-above-post-stream"}}
   {{/if}}
+  {{#if siteSettings.codefund_above_post_stream_enabled}}
+    {{codefund-ad placement="topic-above-post-stream"}}
+  {{/if}}
 {{/if}}

assets/javascripts/discourse/templates/connectors/topic-above-suggested/discourse-adplugin.hbs

@@ -8,6 +8,9 @@
   {{#if siteSettings.amazon_mobile_topic_above_suggested_src_code}}
     {{amazon-product-links placement="topic-above-suggested"}}
   {{/if}}
+  {{#if siteSettings.codefund_above_suggested_enabled}}
+    {{codefund-ad placement="topic-above-suggested"}}
+  {{/if}}
 {{else}}
   {{#if siteSettings.adsense_topic_above_suggested_code}}
     {{google-adsense placement="topic-above-suggested"}}
@@ -18,4 +21,7 @@
   {{#if siteSettings.amazon_topic_above_suggested_src_code}}
     {{amazon-product-links placement="topic-above-suggested"}}
   {{/if}}
+  {{#if siteSettings.codefund_above_suggested_enabled}}
+    {{codefund-ad placement="topic-above-suggested"}}
+  {{/if}}
 {{/if}}

assets/javascripts/initializers/initialize-ad-plugin.js.es6

@@ -1,5 +1,7 @@
 import PostModel from 'discourse/models/post';
-import { withPluginApi } from 'discourse/lib/plugin-api';
+import {
+  withPluginApi
+} from 'discourse/lib/plugin-api';
 
 export default {
   name: 'initialize-ad-plugin',
@@ -19,6 +21,10 @@ export default {
         return this.isNthPost(parseInt(siteSettings.amazon_nth_post_code));
       }.property('post_number'),
 
+      postSpecificCountCodeFund: function () {
+        return this.isNthPost(parseInt(siteSettings.codefund_nth_post_code));
+      }.property('post_number'),
+
       isNthPost: function (n) {
         if (n && n > 0) {
           return (this.get('post_number') % n) === 0;
@@ -32,7 +38,10 @@ export default {
       api.decorateWidget('post:after', dec => {
 
         if (dec.canConnectComponent) {
-          return dec.connect({ component: 'adplugin-container', context: 'model' });
+          return dec.connect({
+            component: 'adplugin-container',
+            context: 'model'
+          });
         }
 
         // Old way for backwards compatibility

config/locales/client.en.yml

@@ -9,3 +9,4 @@ en:
           dfp_plugin: 'DFP'
           adsense_plugin: 'Adsense'
           amazon_plugin: 'Amazon'
+          codefund_plugin: 'CodeFund'

config/locales/server.en.yml

@@ -78,3 +78,14 @@ en:
     amazon_mobile_post_bottom_ad_width_code: "Input your ad width (mobile)"
     amazon_mobile_post_bottom_ad_height_code: "Input your ad height (mobile)"
     amazon_nth_post_code: "Show an ad after every N posts, where N is this value."
+
+    codefund_property_code: "Your CodeFund property ID"
+    codefund_advertiser_label: "Label that appears before the advertisement (e.g. Advertiser or Supporter)"
+    codefund_advertiser_short_label: "Abbreviated label that appears before the advertisement (e.g. Ad)"
+    codefund_display_advertiser_labels: "Show the advertiser label (e.g. 'Advertiser') on the ads"
+    codefund_through_trust_level: "Show your ads to users based on trust levels. Users with trust level higher than this value will not see ads"
+    codefund_nth_post_code: "Show an ad after every N posts, where N is this value"
+    codefund_below_post_enabled: "Show an ad below each blog post"
+    codefund_above_post_stream_enabled: "Show an ad above the post stream"
+    codefund_above_suggested_enabled: "Show an ad above the suggested topic list"
+    codefund_top_of_topic_list_enabled: "Show an ad above the topic list"

config/settings.yml

@@ -341,3 +341,38 @@ amazon_plugin:
   amazon_mobile_post_bottom_ad_height_code:
     client: true
     default: ''
+
+codefund_plugin:
+  codefund_property_code:
+    client: true
+    default: ''
+    regex: '^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$'
+  codefund_advertiser_label:
+    client: true
+    default: 'Advertiser'
+  codefund_advertiser_short_label:
+    client: true
+    default: 'Ad'
+  codefund_through_trust_level:
+    client: true
+    default: 2
+    enum: 'TrustLevelSetting'
+  codefund_nth_post_code:
+    client: true
+    default: 4
+    min: 1
+  codefund_display_advertiser_labels:
+    default: true
+    client: true
+  codefund_below_post_enabled:
+    default: true
+    client: true
+  codefund_above_post_stream_enabled:
+    default: true
+    client: true
+  codefund_above_suggested_enabled:
+    default: true
+    client: true
+  codefund_top_of_topic_list_enabled:
+    default: true
+    client: true

plugin.rb

@@ -6,6 +6,9 @@
 
 register_css <<CSS
 
+@import "common/foundation/variables";
+@import "common/foundation/mixins";
+
 .google-dfp-ad {
   padding: 3px 0;
   margin-bottom: 10px;
@@ -110,4 +113,67 @@ and (max-width : 775px) {
   }
 }
 
+.codefund-wrapper {
+  float: left;
+  position: relative;
+  z-index: 1;
+  font-family: system, "Helvetica Neue", Helvetica, Arial;
+  font-size: 13px;
+  box-sizing: border-box;
+  width: 100%;
+  line-height: 1.5;
+  display: block;
+  background-color: $primary-very-low;
+  padding: 12px 11px;
+  text-align: left;
+  margin: 12px 0;
+}
+
+.codefund-wrapper .codefund-text {
+  color: dark-light-choose($primary-medium, $secondary-medium);
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.codefund-wrapper .codefund-text:hover {
+  text-decoration: underline;
+}
+
+.codefund-wrapper .codefund-text strong {
+  color: $primary;
+}
+
+.codefund-wrapper .codefund-powered-by:hover {
+  text-decoration: underline;
+}
+
+.codefund-wrapper .codefund-label {
+  margin-right: 4px;
+  padding: 2px 6px;
+  border-radius: 3px;
+  background-color:  $tertiary;
+  color: $secondary;
+}
+
+.codefund-wrapper .codefund-label:hover {
+  text-decoration: none !important;
+}
+
+.codefund-wrapper .codefund-powered-by {
+  text-decoration: none;
+  color: dark-light-choose($primary-medium, $secondary-medium);
+  float: right;
+  font-size: 12px;
+}
+
+.codefund-wrapper .codefund-powered-by:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.codefund-wrapper.codefund-post-bottom {
+  width: 757px;
+  text-align: center;
+}
+
 CSS