diff --git a/assets/javascripts/discourse/components/google-adsense.js.es6 b/assets/javascripts/discourse/components/google-adsense.js.es6 index 0aa2959..ecd93f2 100644 --- a/assets/javascripts/discourse/components/google-adsense.js.es6 +++ b/assets/javascripts/discourse/components/google-adsense.js.es6 @@ -1,11 +1,7 @@ -import { withPluginApi } from 'discourse/lib/plugin-api'; -import PageTracker from 'discourse/lib/page-tracker'; import loadScript from 'discourse/lib/load-script'; var _loaded = false, _promise = null, - ad_width = '', - ad_height = '', ad_mobile_width = 320, ad_mobile_height = 50, currentUser = Discourse.User.current(), @@ -15,14 +11,14 @@ var _loaded = false, const mobileView = Discourse.Site.currentProp('mobileView'); -function splitWidthInt(value) { - var str = value.substring(0, 3); - return str.trim(); +function parseAdWidth(value) { + if (value === 'responsive') { return 'auto'; } + return `${parseInt( value.substring(0, 3).trim() )}px`; } -function splitHeightInt(value) { - var str = value.substring(4, 7); - return str.trim(); +function parseAdHeight(value) { + if (value === 'responsive') { return 'auto'; } + return `${parseInt( value.substring(4, 7).trim() )}px`; } function loadAdsense() { @@ -52,32 +48,32 @@ var data = { if (Discourse.SiteSettings.adsense_publisher_code) { if (!mobileView && Discourse.SiteSettings.adsense_topic_list_top_code) { data["topic-list-top"]["ad_code"] = Discourse.SiteSettings.adsense_topic_list_top_code; - data["topic-list-top"]["ad_width"] = parseInt(splitWidthInt(Discourse.SiteSettings.adsense_topic_list_top_ad_sizes)); - data["topic-list-top"]["ad_height"] = parseInt(splitHeightInt(Discourse.SiteSettings.adsense_topic_list_top_ad_sizes)); + data["topic-list-top"]["ad_width"] = parseAdWidth(Discourse.SiteSettings.adsense_topic_list_top_ad_sizes); + data["topic-list-top"]["ad_height"] = parseAdHeight(Discourse.SiteSettings.adsense_topic_list_top_ad_sizes); } if (mobileView && Discourse.SiteSettings.adsense_mobile_topic_list_top_code) { data["topic-list-top"]["ad_mobile_code"] = Discourse.SiteSettings.adsense_mobile_topic_list_top_code; } if (!mobileView && Discourse.SiteSettings.adsense_topic_above_post_stream_code) { data["topic-above-post-stream"]["ad_code"] = Discourse.SiteSettings.adsense_topic_above_post_stream_code; - data["topic-above-post-stream"]["ad_width"] = parseInt(splitWidthInt(Discourse.SiteSettings.adsense_topic_above_post_stream_ad_sizes)); - data["topic-above-post-stream"]["ad_height"] = parseInt(splitHeightInt(Discourse.SiteSettings.adsense_topic_above_post_stream_ad_sizes)); + data["topic-above-post-stream"]["ad_width"] = parseAdWidth(Discourse.SiteSettings.adsense_topic_above_post_stream_ad_sizes); + data["topic-above-post-stream"]["ad_height"] = parseAdHeight(Discourse.SiteSettings.adsense_topic_above_post_stream_ad_sizes); } if (mobileView && Discourse.SiteSettings.adsense_mobile_topic_above_post_stream_code) { data["topic-above-post-stream"]["ad_mobile_code"] = Discourse.SiteSettings.adsense_mobile_topic_above_post_stream_code; } if (!mobileView && Discourse.SiteSettings.adsense_topic_above_suggested_code) { data["topic-above-suggested"]["ad_code"] = Discourse.SiteSettings.adsense_topic_above_suggested_code; - data["topic-above-suggested"]["ad_width"] = parseInt(splitWidthInt(Discourse.SiteSettings.adsense_topic_above_suggested_ad_sizes)); - data["topic-above-suggested"]["ad_height"] = parseInt(splitHeightInt(Discourse.SiteSettings.adsense_topic_above_suggested_ad_sizes)); + data["topic-above-suggested"]["ad_width"] = parseAdWidth(Discourse.SiteSettings.adsense_topic_above_suggested_ad_sizes); + data["topic-above-suggested"]["ad_height"] = parseAdHeight(Discourse.SiteSettings.adsense_topic_above_suggested_ad_sizes); } if (mobileView && Discourse.SiteSettings.adsense_mobile_topic_above_suggested_code) { data["topic-above-suggested"]["ad_mobile_code"] = Discourse.SiteSettings.adsense_mobile_topic_above_suggested_code; } if (!mobileView && Discourse.SiteSettings.adsense_post_bottom_code) { data["post-bottom"]["ad_code"] = Discourse.SiteSettings.adsense_post_bottom_code; - data["post-bottom"]["ad_width"] = parseInt(splitWidthInt(Discourse.SiteSettings.adsense_post_bottom_ad_sizes)); - data["post-bottom"]["ad_height"] = parseInt(splitHeightInt(Discourse.SiteSettings.adsense_post_bottom_ad_sizes)); + data["post-bottom"]["ad_width"] = parseAdWidth(Discourse.SiteSettings.adsense_post_bottom_ad_sizes); + data["post-bottom"]["ad_height"] = parseAdHeight(Discourse.SiteSettings.adsense_post_bottom_ad_sizes); } if (mobileView && Discourse.SiteSettings.adsense_mobile_post_bottom_code) { data["post-bottom"]["ad_mobile_code"] = Discourse.SiteSettings.adsense_mobile_post_bottom_code; @@ -85,18 +81,20 @@ if (Discourse.SiteSettings.adsense_publisher_code) { } export default Ember.Component.extend({ - classNames: ['google-adsense'], + classNameBindings: [':google-adsense', 'classForSlot', 'isResponsive:adsense-responsive'], loadedGoogletag: false, publisher_id: publisher_id, - ad_width: ad_width, - ad_height: ad_height, + ad_width: null, + ad_height: null, ad_mobile_width: ad_mobile_width, ad_mobile_height: ad_mobile_height, mobile_width: mobile_width, mobile_height: mobile_height, + adRequested: false, + init() { this.set('ad_width', data[this.placement]["ad_width"] ); this.set('ad_height', data[this.placement]["ad_height"] ); @@ -106,6 +104,7 @@ export default Ember.Component.extend({ }, _triggerAds() { + this.set('adRequested', true); loadAdsense().then(function() { const adsbygoogle = window.adsbygoogle || []; @@ -120,27 +119,48 @@ export default Ember.Component.extend({ 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'), + + isResponsive: function() { + return this.get('ad_width') === 'auto'; + }.property('ad_width'), + + classForSlot: function() { + return `adsense-${this.get('placement')}`.htmlSafe(); + }.property('placement'), + + autoAdFormat: function() { + return this.get('isResponsive') ? 'auto'.htmlSafe() : false; + }.property('isResponsive'), + adWrapperStyle: function() { - return `width: ${this.get('ad_width')}px; height: ${this.get('ad_height')}px;`.htmlSafe(); + return (this.get('isResponsive') ? '' : `width: ${this.get('ad_width')}; height: ${this.get('ad_height')};`).htmlSafe(); }.property('ad_width', 'ad_height'), adInsStyle: function() { - return `display: inline-block; ${this.get('adWrapperStyle')}`.htmlSafe(); - }.property('adWrapperStyle'), + return `display: ${this.get('isResponsive') ? 'block' : 'inline-block'}; ${this.get('adWrapperStyle')}`.htmlSafe(); + }.property('adWrapperStyle', 'isResponsive'), adWrapperStyleMobile: function() { - return `width: ${this.get('ad_mobile_width')}px; height: ${this.get('ad_mobile_height')}px;`.htmlSafe(); + return (this.get('isResponsive') ? '' : `width: ${this.get('ad_mobile_width')}; height: ${this.get('ad_mobile_height')};`).htmlSafe(); }.property('ad_mobile_width', 'ad_mobile_height'), adTitleStyleMobile: function() { - return `width: ${this.get('ad_mobile_width')}px;`.htmlSafe(); + return `width: ${this.get('ad_mobile_width')};`.htmlSafe(); }.property('ad_mobile_width'), adInsStyleMobile: function() { - return `display: inline-block; ${this.get('adWrapperStyleMobile')}`.htmlSafe(); + return `display: ${this.get('isResponsive') ? 'block' : 'inline-block'}; ${this.get('adWrapperStyleMobile')}`.htmlSafe(); }.property('adWrapperStyleMobile'), checkTrustLevels: function() { diff --git a/assets/javascripts/discourse/templates/components/google-adsense.hbs b/assets/javascripts/discourse/templates/components/google-adsense.hbs index ee5e7d5..f243126 100644 --- a/assets/javascripts/discourse/templates/components/google-adsense.hbs +++ b/assets/javascripts/discourse/templates/components/google-adsense.hbs @@ -5,7 +5,8 @@ + data-ad-slot={{ad_mobile_code}} + data-ad-format={{autoAdFormat}}> {{else}} @@ -14,7 +15,8 @@ + data-ad-slot={{ad_code}} + data-ad-format={{autoAdFormat}}> {{/if}} diff --git a/assets/javascripts/discourse/templates/connectors/discovery-list-container-top/discourse-adplugin.hbs b/assets/javascripts/discourse/templates/connectors/discovery-list-container-top/discourse-adplugin.hbs index c89417d..a4217b1 100644 --- a/assets/javascripts/discourse/templates/connectors/discovery-list-container-top/discourse-adplugin.hbs +++ b/assets/javascripts/discourse/templates/connectors/discovery-list-container-top/discourse-adplugin.hbs @@ -1,21 +1,21 @@ {{#if site.mobileView}} {{#if siteSettings.adsense_mobile_topic_list_top_code}} - {{google-adsense placement="topic-list-top"}} + {{google-adsense placement="topic-list-top" listLoading=listLoading}} {{/if}} {{#if siteSettings.dfp_mobile_topic_list_top_code}} - {{google-dfp-ad placement="topic-list-top" refreshOnChange=loading category=category.slug}} + {{google-dfp-ad placement="topic-list-top" refreshOnChange=loading category=category.slug listLoading=listLoading}} {{/if}} {{#if siteSettings.amazon_mobile_topic_list_top_src_code}} - {{amazon-product-links placement="topic-list-top"}} + {{amazon-product-links placement="topic-list-top" listLoading=listLoading}} {{/if}} {{else}} {{#if siteSettings.adsense_topic_list_top_code}} - {{google-adsense placement="topic-list-top"}} + {{google-adsense placement="topic-list-top" listLoading=listLoading}} {{/if}} {{#if siteSettings.dfp_topic_list_top_code}} - {{google-dfp-ad placement="topic-list-top" refreshOnChange=loading category=category.slug}} + {{google-dfp-ad placement="topic-list-top" refreshOnChange=loading category=category.slug listLoading=listLoading}} {{/if}} {{#if siteSettings.amazon_topic_list_top_src_code}} - {{amazon-product-links placement="topic-list-top"}} + {{amazon-product-links placement="topic-list-top" listLoading=listLoading}} {{/if}} {{/if}} \ No newline at end of file diff --git a/config/settings.yml b/config/settings.yml index ae56df4..b4b765d 100755 --- a/config/settings.yml +++ b/config/settings.yml @@ -22,6 +22,7 @@ adsense_plugin: default: '728*90 - leaderboard' type: enum choices: + - responsive - 728*90 - leaderboard - 336*280 - large rectangle - 300*250 - medium rectangle @@ -53,6 +54,7 @@ adsense_plugin: default: '728*90 - leaderboard' type: enum choices: + - responsive - 728*90 - leaderboard - 336*280 - large rectangle - 300*250 - medium rectangle @@ -84,6 +86,7 @@ adsense_plugin: default: '728*90 - leaderboard' type: enum choices: + - responsive - 728*90 - leaderboard - 336*280 - large rectangle - 300*250 - medium rectangle @@ -115,6 +118,7 @@ adsense_plugin: default: '728*90 - leaderboard' type: enum choices: + - responsive - 728*90 - leaderboard - 336*280 - large rectangle - 300*250 - medium rectangle diff --git a/plugin.rb b/plugin.rb index bf6eee2..bbd2513 100755 --- a/plugin.rb +++ b/plugin.rb @@ -21,7 +21,34 @@ register_css <