From 9b7a8830b87f8ad548ad52ee02ea98e5b2109064 Mon Sep 17 00:00:00 2001
From: Neil Lalonde <neillalonde@gmail.com>
Date: Fri, 22 Feb 2019 12:10:39 -0500
Subject: [PATCH] FIX: resizing of ad units when they're rendered

---
 .../discourse/components/google-dfp-ad.js.es6 | 41 ++++++++++++++-----
 1 file changed, 30 insertions(+), 11 deletions(-)

diff --git a/assets/javascripts/discourse/components/google-dfp-ad.js.es6 b/assets/javascripts/discourse/components/google-dfp-ad.js.es6
index 052b93f..baf9c50 100755
--- a/assets/javascripts/discourse/components/google-dfp-ad.js.es6
+++ b/assets/javascripts/discourse/components/google-dfp-ad.js.es6
@@ -108,12 +108,28 @@ const MOBILE_SETTINGS = {
   }
 };
 
+function getWidthAndHeight(placement, settings, isMobile) {
+  let config;
+
+  if (isMobile) {
+    config = MOBILE_SETTINGS[placement];
+  } else {
+    config = DESKTOP_SETTINGS[placement];
+  }
+
+  return {
+    width: parseInt(splitWidthInt(settings[config.sizes])),
+    height: parseInt(splitHeightInt(settings[config.sizes]))
+  };
+}
+
 function defineSlot(divId, placement, settings, isMobile) {
   if (!settings.dfp_publisher_id) {
     return;
   }
 
-  let ad, width, height, config;
+  let ad, config;
+  let size = getWidthAndHeight(placement, settings, isMobile);
 
   if (ads[divId]) {
     return ads[divId];
@@ -125,12 +141,10 @@ function defineSlot(divId, placement, settings, isMobile) {
     config = DESKTOP_SETTINGS[placement];
   }
 
-  width = parseInt(splitWidthInt(settings[config.sizes]));
-  height = parseInt(splitHeightInt(settings[config.sizes]));
   ad = window.googletag
     .defineSlot(
       "/" + settings.dfp_publisher_id + "/" + settings[config.code],
-      [width, height],
+      [size.width, size.height],
       divId
     )
     .addService(window.googletag.pubads());
@@ -141,7 +155,7 @@ function defineSlot(divId, placement, settings, isMobile) {
   );
 
   if (ad) {
-    ads[divId] = { ad: ad, width: width, height: height };
+    ads[divId] = { ad: ad, width: size.width, height: size.height };
     return ads[divId];
   }
 }
@@ -184,11 +198,7 @@ function loadGoogle() {
   return _promise;
 }
 
-// Ember component - the class is the adblock and css
 export default Ember.Component.extend({
-  width: 728,
-  height: 90,
-
   classNameBindings: ["adUnitClass"],
   classNames: ["google-dfp-ad"],
   loadedGoogletag: false,
@@ -272,8 +282,6 @@ export default Ember.Component.extend({
             "discourse-category",
             self.get("category") ? self.get("category") : "0"
           );
-          self.set("width", slot.width);
-          self.set("height", slot.height);
           window.googletag.display(self.get("divId"));
           window.googletag.pubads().refresh([slot.ad]);
         }
@@ -281,6 +289,17 @@ export default Ember.Component.extend({
     });
   }.on("didInsertElement"),
 
+  willRender() {
+    this._super(...arguments);
+    let size = getWidthAndHeight(
+      this.get("placement"),
+      this.siteSettings,
+      this.site.mobileView
+    );
+    this.set("width", size.width);
+    this.set("height", size.height);
+  },
+
   cleanup: function() {
     destroySlot(this.get("divId"));
   }.on("willDestroyElement")