Update AdsenseController to show ads to fit space

src/coffee/constants.coffee

@@ -7,7 +7,7 @@ All rights reserved.
 
 exports.Adsense  = Adsense = {}
 Adsense.clientId = 'ca-pub-6593013914878730'
-Adsense.slotId   = '7613920409'
+Adsense.slotIds  = ['7613920409', '9574673605', '3388539204']
 
 # Minecraft must be first
 exports.DefaultMods =

src/coffee/controllers/adsense_controller.coffee

@@ -7,6 +7,7 @@ All rights reserved.
 
 BaseController   = require './base_controller'
 {Adsense}        = require '../constants'
+{Duration}       = require '../constants'
 {ProductionEnvs} = require '../constants'
 
 ########################################################################################################################
@@ -14,32 +15,64 @@ BaseController   = require './base_controller'
 module.exports = class AdsenseController extends BaseController
 
     constructor: (options={})->
-        options.model        ?= 'skyscraper_sidebar'
-        options.tagName       = 'ins'
-        options.templateName  = "adsense_#{options.model}"
+        options.templateName = "adsense_sidebar_skyscraper"
         super options
 
-        @_adsEnabled = global.env in ProductionEnvs
+        @_adsEnabled  = global.env in ProductionEnvs
+        @_adHeight    = 630
+        @_adCount     = 0
+        @_waiting     = false
+
+    # Public Methods ###############################################################################
+
+    fillAdPositions: ->
+        if @_adCount > 0
+            return unless @_adCount < Adsense.slotIds.length
+            return unless @$sidebar? and @$mainBody?
+            return unless @$sidebar.height() + @_adHeight < @$mainBody.height()
+
+        $adContainer = $('<div class="sidebar_skyscraper"></div>')
+        @$el.append $adContainer
+
+        if @_adsEnabled
+            $ad = $('<ins class="adsbygoogle"></ins>')
+            $ad.attr 'data-ad-client', Adsense.clientId
+            $ad.attr 'data-ad-slot', Adsense.slotIds[@_adCount]
+            $ad.css 'height':'600px', 'width':'160px'
+            $adContainer.append $ad
+            @_loadAds()
+
+        @_adCount += 1
+        _.defer => @fillAdPositions()
 
     # BaseController Overrides #####################################################################
 
-    render: ->
-        if @_adsEnabled
-            super
-
-            @$el.attr 'data-ad-client', Adsense.clientId
-            @$el.attr 'data-ad-slot', Adsense.slotId
-        else
-            @$el.addClass 'placeholder'
-            @_rendered = true
-
-        @$el.addClass @model
+    onDidRender: ->
+        @$mainBody = $('.mainBody')
+        @$sidebar = $('.sidebar')
+        super
 
     refresh: ->
+        @_waitForPageReadiness()
+        super
+
+    # Private Methods #############################################################################
+
+    _loadAds: ->
         return unless @_adsEnabled
 
+        logger.info "Loading #{@_adCount} Google AdSense ads"
         try
             global.adsbygoogle ||= []
             global.adsbygoogle.push {}
         catch e
             logger.warning "Could not load Adsense ad: #{e}"
+
+    _waitForPageReadiness: ->
+        return if @_waiting
+
+        if @$mainBody.height() < @_adHeight / 2
+            @_waiting = true
+            _.delay (=> @_waiting = false; @_waitForPageReadiness()), Duration.normal
+        else
+            @fillAdPositions()

src/coffee/controllers/browse_page_controller.coffee

@@ -31,11 +31,13 @@ module.exports = class BrowsePageController extends PageController
     # BaseController Overrides #####################################################################
 
     onDidRender: ->
-        @adsenseController = @addChild AdsenseController, '.view__adsense', model:'sidebar_skyscraper'
+        @adsenseController = @addChild AdsenseController, '.view__adsense'
         @$modContainer     = @$('.mods')
         super
 
     refresh: ->
+        @adsenseController.fillAdPositions()
+
         @_controllers ?= []
         controllerIndex = 0
 

src/coffee/controllers/configure_page_controller.coffee

@@ -30,6 +30,10 @@ module.exports = class ConfigurePageController extends PageController
     # BaseController Overrides #####################################################################
 
     onDidRender: ->
-        @adsenseController = @addChild AdsenseController, '.view__adsense', model:'sidebar_skyscraper'
+        @adsenseController = @addChild AdsenseController, '.view__adsense'
         @modPackController = @addChild ModPackController, '.view__mod_pack', model:@modPack, storage:@storage
         super
+
+    refresh: ->
+        @adsenseController.fillAdPositions()
+        super

src/coffee/controllers/craft_page_controller.coffee

@@ -133,6 +133,7 @@ module.exports = class CraftPageController extends PageController
     refresh: ->
         @_refreshSectionVisibility()
         @_refreshSteps()
+        @adsenseController.fillAdPositions()
         super
 
     # Backbone.View Overrides ########################################################################

src/coffee/controllers/home_page_controller.coffee

@@ -19,7 +19,7 @@ module.exports = class HomeController extends PageController
     # BaseController Overrides #####################################################################
 
     onDidRender: ->
-        @adsenseController = @addChild AdsenseController, '.view__adsense', model:'sidebar_skyscraper'
+        @adsenseController = @addChild AdsenseController, '.view__adsense'
         super
 
     # Backbone.View Overrides ######################################################################

src/coffee/controllers/mod_page_controller.coffee

@@ -66,7 +66,7 @@ module.exports = class ModPageController extends PageController
     # BaseController Overrides #####################################################################
 
     onDidRender: ->
-        @adsenseController = @addChild AdsenseController, '.view__adsense', model:'sidebar_skyscraper'
+        @adsenseController = @addChild AdsenseController, '.view__adsense'
 
         @$name                = @$('.name')
         @$byline              = @$('.byline p')
@@ -84,6 +84,8 @@ module.exports = class ModPageController extends PageController
         super
 
     refresh: ->
+        @adsenseController.fillAdPositions()
+
         if @model?.isLoaded and @effectiveModVersion?.isLoaded
             @$byline.html "by #{@model.author}"
             @$description.html @model.description

src/jade/templates/adsense_sidebar_skyscraper.jade

@@ -5,4 +5,4 @@
 //- All rights reserved.
 //-
 
-.adsbygoogle.sidebar_skyscraper
+.view__adsense

src/jade/templates/configure_page.jade

@@ -7,7 +7,7 @@
 
 .view__configure_page
     .sidebar
-        ins.view__adsense
+        .view__adsense
 
     .mainBody
         .view__mod_pack

src/jade/templates/home_page.jade

@@ -7,7 +7,7 @@
 
 .view__home_page
     .sidebar
-        ins.view__adsense
+        .view__adsense
 
     .mainBody
         .section

src/jade/templates/mod_page.jade

@@ -13,7 +13,7 @@
         a.documentation.externalLink.hideable.hidden(target="new"): p Documentation
         a.download.externalLink.hideable.hidden(target="new"): p Download
 
-        ins.view__adsense
+        .view__adsense
 
     .mainBody
         h1.name

src/scss/classes.scss

@@ -65,7 +65,7 @@ All rights reserved.
 }
 
 .sidebar {
-    position: relative; width: 18.75%;
+    position: relative; width: 18.75%; height: 100%;
 
     display: inline-block;
     padding: 1em;

src/scss/templates/adsense.scss

@@ -6,19 +6,14 @@ All rights reserved.
 */
 
 .view__adsense {
-    display: inline-block;
-    margin: 3em 0;
 
-    &:first-child {
-        margin-top: 0;
-    }
+    .sidebar_skyscraper  {
+        position: relative; width: 160px; height: 600px;
+        border: 0.1em solid $color-gray-faint;
+        margin: 3em 0;
 
-    &.sidebar_skyscraper  {
-        position: relative; width: 160px !important; height: 600px !important;
-    }
-
-    &.placeholder {
-        background: rgba(192, 192, 255, 0.5);
-        border: 0.1em solid $color-gray-medium;
+        &:first-child {
+            margin-top: 0;
+        }
     }
 }