Update Adsense to place ads on all devices

The current adsense implementation only places ads on desktop-sized
screens.  This change allows ads of the appropriate size to be
displayed on any device.

fixes #224

src/client/site/browse_page/browse_page.jade

@@ -7,7 +7,6 @@
 
 .content.view__browse_page
     .left
-        .view__adsense
 
     .right
         .tile_container

src/client/site/browse_page/browse_page.scss

@@ -10,8 +10,8 @@
 
     .right {
         .tile_container {
-            display     : flex;
+            display   : flex;
-            flex-wrap   : wrap;
+            flex-wrap : wrap;
 
             .view__mod_tile {
                 flex          : 1 1 calc(50% - 12px); // $size-margin-large / 2

src/client/site/browse_page/browse_page_controller.coffee

@@ -5,7 +5,6 @@
 # All rights reserved.
 #
 
-AdsenseController = require '../common/adsense/adsense_controller'
 ModTileController = require './mod_tile/mod_tile_controller'
 PageController    = require '../page_controller'
 
@@ -32,8 +31,6 @@ module.exports = class BrowsePageController extends PageController
     # BaseController Overrides #####################################################################
 
     onDidRender: ->
-        @_adsenseController = @addChild AdsenseController, '.view__adsense', model:'skyscraper'
-
         @$tileContainer = @$('.tile_container')
 
     refresh: ->

src/client/site/browse_page/mod_tile/mod_tile.scss

@@ -8,13 +8,11 @@
 .view__mod_tile {
     min-width : $size-minecraft-block * 9;
 
-    display         : flex;
+    display: flex;
-    justify-content : stretch;
-    align-items     : stretch;
 
     a {
         @include floating-panel;
-        width : 100%;
+        flex: 1 1 100%;
 
         border          : $size-border-medium solid $color-background-panel;
         color           : $color-text;

src/client/site/browse_page/mod_tile/mod_tile_controller.coffee

@@ -12,6 +12,7 @@ BaseController = require '../../base_controller'
 module.exports = class ModTileController extends BaseController
 
     constructor: (options={})->
+        options.tagName      = 'section'
         options.templateName = 'browse_page/mod_tile'
         super options
 

src/client/site/common/adsense/adsense.scss

@@ -6,20 +6,64 @@
 //
 
 .view__adsense {
-    .skyscraper  {
+    left      : 50%;
-        height   : $size-skyscraper-height;
+    margin    : $size-margin-large 0;
-        width    : $size-skyscraper-width;
+    position  : relative;
-        position : relative;
+    transform : translate(-50%);
 
-        border : 0.1em solid $color-gray-faint;
+    ins {
-        margin : $size-margin-large 0;
+        position: absolute; top: 0; right: 0; bottom: 0; left: 0;
+    }
+
+    &.large-mobile-banner {
+        height : $size-ad-large-mobile-banner-height;
+        width  : $size-ad-large-mobile-banner-width;
+
+        &.placeholder:before {
+            font-size : $font-size-large;
+        }
+    }
+
+    &.leaderboard {
+        height : $size-ad-leaderboard-height;
+        width  : $size-ad-leaderboard-width;
+
+        &.placeholder:before {
+            font-size : $font-size-xxlarge;
+        }
+    }
+
+    &.skyscraper  {
+        height : $size-ad-skyscraper-height;
+        width  : $size-ad-skyscraper-width;
+
+        &.placeholder:before {
+            transform : rotate(90deg);
+            font-size : $font-size-xxlarge;
+        }
 
         &:first-child {
             margin-top : 0;
         }
+    }
 
-        ins {
+    &.placeholder {
-            position: absolute; top: 0; right: 0; bottom: 0; left: 0;
+        border : $size-border-small solid $color-gray-faint;
+
+        display         : flex;
+        align-items     : center;
+        justify-content : center;
+
+        &:before {
+            color          : $color-gray-faint;
+            content        : "GOOGLE ADSENSE";
+            font-family    : $font-family-control;
+            letter-spacing : $size-margin-small;
+            white-space    : nowrap;
         }
     }
 }
+
+.view__mod_tile + .view__adsense {
+    margin-top : 0;
+}

src/client/site/common/adsense/adsense_controller.coffee

@@ -5,63 +5,132 @@
 # All rights reserved.
 #
 
-BaseController = require '../../base_controller'
-
 ########################################################################################################################
 
-module.exports = class AdsenseController extends BaseController
+module.exports = class AdsenseController
-
-    constructor: (options={})->
-        options.templateName = 'common/adsense'
-        super options
 
+    constructor: ->
         @_adsEnabled = global.env in c.productionEnvs
-        @_adCount    = 0
+        @_adsPlaced  = 0
         @_waiting    = false
 
     # Public Methods ###############################################################################
 
     fillAdPositions: ->
-        if @_adCount > 0
+        adType = @_computeAdType()
-            return unless @$sidebar and @$mainBody
+        maxAds = c.adsense[adType].slotIds.length - @_adsPlaced
-            return unless @_adCount < @_computeMaxAds()
+        return if maxAds is 0
-            return unless @_adCount < c.adsense.slotIds.length
 
-        $adContainer = $('<div class="skyscraper"></div>')
+        logger.verbose => "Looking to place #{maxAds} more #{adType} ads..."
-        @$el.append $adContainer
 
-        if @_adsEnabled
+        if adType is 'skyscraper'
-            $ad = $('<ins class="adsbygoogle"></ins>')
+            placedNewAd = @_createSkyscraperPositions()
-            $ad.attr 'data-ad-client', c.adsense.clientId
+        else
-            $ad.attr 'data-ad-slot', c.adsense.slotIds[@_adCount]
+            placedNewAd = @_createBannerPositions adType
-            $adContainer.append $ad
-            @_loadAds()
 
-        @_adCount += 1
+        if @_adsPlaced < c.adsense[adType].slotIds.length
-        _.defer => @fillAdPositions()
+            duration = if placedNewAd then 0 else c.adsense.readinessCheckInterval
+            _.delay (=> @fillAdPositions()), duration
+        else
+            logger.verbose => "All #{adType} ad positions filled"
 
-    # BaseController Overrides #####################################################################
+    reset: ->
-
+        @_adsPlaced = 0
-    onDidRender: ->
-        @$mainBody = $('.page > .content > .right')
-        @$sidebar = $('.page > .content > .left')
-        super
-
-    refresh: ->
         @_waitForPageReadiness()
-        super
 
     # Private Methods #############################################################################
 
-    _computeMaxAds: ->
+    _computeAdType: ->
-        return null unless @$sidebar
+        return c.adsense.adTypeMap[c.screen.type.compute()]
-        result = Math.floor @$sidebar.height() / (c.adsense.skyscraper.height + c.adsense.skyscraper.margin)
+
+    _computeAdCount: (adType)->
+        result = c.adsense[adType].slotIds.length
+        if c.screen.type.compute() is c.screen.type.desktop
+            $sidebar = $('.page > .content > .left')
+            return 0 unless $sidebar?.length
+
+            available = $sidebar.height() + c.adsense.skyscraper.margin
+            available = Math.floor available / (c.adsense.skyscraper.height + c.adsense.skyscraper.margin)
+            result = Math.min available, result
+
         return result
 
-    _loadAds: ->
+    _createSkyscraperPositions: ->
+        $sidebar = $('.page > .content > .left')
+        remaining = @_computeAdCount 'skyscraper'
+        remaining -= @_adsPlaced
+        placedNewAd = false
+
+        while remaining > 0
+            $el = $('<div class="view__adsense"></div>')
+            $el.addClass c.adsense.skyscraper.cssClass
+
+            if @_adsEnabled
+                $ad = $('<ins class="adsbygoogle"></ins>')
+                $ad.attr 'data-ad-client', c.adsense.clientId
+                $ad.attr 'data-ad-slot', c.adsense.skyscraper.slotIds[@_adsPlaced]
+                $el.append $ad
+            else
+                $el.addClass 'placeholder'
+
+            $sidebar.append $el
+            placedNewAd = true
+            @_adsPlaced += 1
+            remaining -= 1
+            logger.info => "Placed skyscraper ad ##{@_adsPlaced}"
+            @_loadAd()
+
+        return placedNewAd
+
+    _createBannerPositions: (adType)->
+        $pageContent = $('.page > .content > .right')
+        remaining = @_computeAdCount adType
+        remaining -= @_adsPlaced
+        sectionIndex = 0
+        placedNewAd = false
+
+        for sectionEl in $pageContent.find('section')
+            break unless remaining > 0
+
+            $section = $(sectionEl)
+            continue unless $section.is ':visible'
+
+            sectionIndex += 1
+            continue if sectionIndex % 2 is 0
+            continue if $section.next().hasClass 'view__adsense'
+
+            $el = $('<div class="view__adsense"></div>')
+            $el.addClass c.adsense[adType].cssClass
+
+            if @_adsEnabled
+                $ad = $('<ins class="adsbygoogle"></ins>')
+                $ad.attr 'data-ad-client', c.adsense.clientId
+                $ad.attr 'data-ad-slot', c.adsense[adType].slotIds[@_adsPlaced]
+                $el.append $ad
+            else
+                $el.addClass 'placeholder'
+
+            $section.after $el
+            placedNewAd = true
+            @_adsPlaced += 1
+            remaining -= 1
+            logger.info => "Placed #{adType} ad ##{@_adsPlaced}"
+            @_loadAd()
+
+        return placedNewAd
+
+    _isTooClose: ($priorEl, $el)->
+        return false if c.screen.type.compute() is c.screen.type.desktop
+        return false if not $priorEl?
+
+        priorBottom = $priorEl.position().top + $priorEl.height()
+        currentTop = $el.position().top
+        return priorBottom + c.adsense.minimumDistance > currentTop
+
+    _loadAd: ->
         return unless @_adsEnabled
 
-        logger.info "Loading #{@_adCount} Google AdSense ads"
+        logger.info "Loading Google AdSense ads"
         try
             global.adsbygoogle ||= []
             global.adsbygoogle.push {}
@@ -70,11 +139,12 @@ module.exports = class AdsenseController extends BaseController
 
     _waitForPageReadiness: ->
         return if @_waiting
+        adCount = @_computeAdCount @_computeAdType()
 
-        if @$sidebar.height() < c.adsense[@model].height / 2
+        if adCount is 0
             logger.verbose "Adsense is waiting for room to insert ads"
             @_waiting = true
-            _.delay (=> @_waiting = false; @_waitForPageReadiness()), c.duration.normal
+            _.delay (=> @_waiting = false; @_waitForPageReadiness()), c.adsense.readinessCheckInterval
         else
             logger.verbose "Adsense is ready to fill ads"
             @fillAdPositions()

src/client/site/craft_page/craft_page.jade

@@ -5,16 +5,8 @@
 //- All rights reserved.
 //-
 
-- var quarryHref = '/craft/quarry'
-- var quarry
-- var quantumSuitHref = '/craft/quantumsuit_bodyarmor:quantumsuit_boots:quantumsuit_helmet:quantumsuit_leggings'
-- var ic2Href = '/browse/industrial_craft_2'
-- var solarPanelHref = '/craft/solar_panel_vi'
-- var solarFluxHref = '/browse/solar_flux'
-
 .content.view__craft_page
     .left
-        .view__adsense
 
     .right
         section.instructions
@@ -60,4 +52,4 @@
             h2 Steps
             .panel
 
-        section.view__craftsman_working
+        section.view__craftsman_working

src/client/site/craft_page/craft_page_controller.coffee

@@ -5,7 +5,6 @@
 # All rights reserved.
 #
 
-AdsenseController          = require '../common/adsense/adsense_controller'
 BaseController             = require '../base_controller'
 CraftPage                  = require '../../models/site/craft_page'
 Craftsman                  = require '../../models/crafting/craftsman'
@@ -67,8 +66,6 @@ module.exports = class CraftPageController extends PageController
     # BaseController Overrides #####################################################################
 
     onDidRender: ->
-        @_adsenseController = @addChild AdsenseController, '.view__adsense', model:'skyscraper'
-
         @_wantInventoryController = @addChild InventoryController, '.want .view__inventory',
             firstButtonType: 'remove'
             imageLoader:     @_imageLoader
@@ -125,7 +122,6 @@ module.exports = class CraftPageController extends PageController
         @_refreshOutdated()
         @_refreshSectionVisibility()
         @_refreshSteps()
-        @_adsenseController.fillAdPositions()
         super
 
     # Backbone.View Overrides ########################################################################

src/client/site/item_page/item_page.jade

@@ -7,7 +7,6 @@
 
 .content.view__item_page
     .left
-        .view__adsense
 
     .right
         .about

src/client/site/item_page/item_page_controller.coffee

@@ -5,7 +5,6 @@
 # All rights reserved.
 #
 
-AdsenseController          = require '../common/adsense/adsense_controller'
 EditableFile               = require '../../models/site/editable_file'
 Item                       = require '../../models/game/item'
 ItemGroupController        = require '../common/item_group/item_group_controller'
@@ -84,8 +83,6 @@ module.exports = class ItemPageController extends PageController
     # BaseController Overrides #####################################################################
 
     onDidRender: ->
-        @_adsenseController = @addChild AdsenseController, '.view__adsense', model:'skyscraper', router: @_router
-
         options                      = imageLoader:@_imageLoader, modPack:@_modPack, router:@_router, show:false
         @_multiblockController       = @addChild MultiblockViewerController, '.view__multiblock_viewer', options
         @_similarItemsController     = @addChild ItemGroupController, '.view__item_group.similar', options

src/client/site/mod_page/mod_page.jade

@@ -7,7 +7,6 @@
 
 .content.view__mod_page
     .left
-        .view__adsense
 
     .right
         .about

src/client/site/mod_page/mod_page_controller.coffee

@@ -5,7 +5,6 @@
 # All rights reserved.
 #
 
-AdsenseController   = require '../common/adsense/adsense_controller'
 BaseController      = require '../base_controller'
 Item                = require '../../models/game/item'
 ItemGroupController = require '../common/item_group/item_group_controller'
@@ -66,8 +65,6 @@ module.exports = class ModPageController extends BaseController
     # BaseController Overrides #####################################################################
 
     onDidRender: ->
-        @_adsenseController = @addChild AdsenseController, '.view__adsense', model: 'skyscraper'
-
         @$author             = @$('.about .author')
         @$description        = @$('.about .description')
         @$documentationLink  = @$('.about .documentation')

src/client/site/news_page/news_page.jade

@@ -7,7 +7,6 @@
 
 .content.view__news_page
     .left
-        .view__adsense
 
     .right
         section

src/client/site/news_page/news_page_controller.coffee

@@ -5,8 +5,7 @@
 # All rights reserved.
 #
 
-AdsenseController = require '../common/adsense/adsense_controller'
+PageController = require '../page_controller'
-PageController    = require '../page_controller'
 
 ########################################################################################################################
 
@@ -24,11 +23,6 @@ module.exports = class NewsPageController extends PageController
     getTitle: ->
         return "News"
 
-    # BaseController Overrides #####################################################################
-
-    onDidRender: ->
-        @_adsenseController = @addChild AdsenseController, '.view__adsense', model:'skyscraper'
-
     # Backbone.View Overrides ######################################################################
 
     events: ->

src/client/site/site_controller.coffee

@@ -5,6 +5,7 @@
 # All rights reserved.
 #
 
+AdsenseController  = require './common/adsense/adsense_controller'
 BaseController     = require './base_controller'
 FeedbackController = require './feedback/feedback_controller'
 FileCache          = require '../models/site/file_cache'
@@ -33,6 +34,7 @@ module.exports = class SiteController extends BaseController
         @router      = new Router this
         @storage     = options.storage
 
+        @_adsenseController     = new AdsenseController
         @_currentPage           = null
         @_currentPageController = null
         @_user                  = null
@@ -156,6 +158,8 @@ module.exports = class SiteController extends BaseController
         @_currentPageController.$el = $pageContent
         @_currentPageController.render()
 
+        @_adsenseController.reset()
+
     _resetGlobals: ->
         if global.env in c.productionEnvs
             for key, value of global

src/client/site/tutorial_page/tutorial_page.jade

@@ -7,7 +7,6 @@
 
 .view__tutorial_page
     .left
-        .view__adsense
 
     .right
         .about

src/client/site/tutorial_page/tutorial_page_controller.coffee

@@ -5,7 +5,6 @@
 # All rights reserved.
 #
 
-AdsenseController         = require '../common/adsense/adsense_controller'
 PageController            = require '../page_controller'
 MarkdownSectionController = require '../common/markdown_section/markdown_section_controller'
 VideoController           = require '../common/video/video_controller'
@@ -60,8 +59,6 @@ module.exports = class TutorialPageController extends PageController
     # BaseController Overrides #####################################################################
 
     onDidRender: ->
-        @_adsenseController = @addChild AdsenseController, '.view__adsense', model:'skyscraper'
-
         @$sourceModLink      = @$('.sourceMod a')
         @$officialLink       = @$('.officialLink a')
         @$officialLinkPanel  = @$('.officialLink')

src/client/styles/classes.scss

@@ -74,14 +74,7 @@
 }
 
 .page > .content {
-    min-height: $size-skyscraper-height;
+    min-height: $size-ad-skyscraper-height;
-}
-
-.skyscraper {
-    height : $size-skyscraper-height - 2px;
-    width  : $size-skyscraper-width - 2px;
-
-    border : 1px solid $color-gray-medium;
 }
 
 .scrollDisabled {

src/client/styles/mixins.scss

@@ -27,54 +27,58 @@
     display: flex;
 
     & > .left {
-        flex: 0 0 $size-skyscraper-width + $size-margin-medium;
+        flex       : 0 0 $size-ad-skyscraper-width + $size-margin-medium;
-        padding-right: $size-margin-medium;
+        min-height : $size-ad-skyscraper-height;
+
+        padding-right : $size-margin-medium;
 
         @include screen-size(tablet) {
-            display: none;
+            display : none;
         }
         @include screen-size(mobile) {
-            display: none;
+            display : none;
         }
     }
 
     & > .right {
-        flex: 1 1 auto;
+        flex : 1 1 100%;
 
         @include screen-size(tablet) {
-            margin: 0 $size-margin-xlarge;
+            margin : 0 $size-margin-xlarge;
+            max-width: calc(100% - 2 * 48px); // 2 * $size-margin-xlarge
         }
         @include screen-size(mobile) {
-            margin: 0;
+            margin : 0;
+            max-width: 100%;
         }
 
         section {
-            margin-bottom: $size-margin-large;
+            margin-bottom : $size-margin-large;
         }
     }
 }
 
 @mixin layout-link-list {
-    display: flex;
+    display         : flex;
-    flex-direction: column;
+    flex-direction  : column;
-    justify-content: center;
+    justify-content : center;
 
     p {
-        margin-bottom: $size-margin-small;
+        margin-bottom : $size-margin-small;
 
-        font-family: $font-family-text;
+        font-family : $font-family-text;
-        font-size: $font-size-large;
+        font-size   : $font-size-large;
     }
 
     a {
-        margin-left: $size-margin-medium;
+        margin-left : $size-margin-medium;
 
-        font-family: $font-family-text;
+        font-family     : $font-family-text;
-        font-size: $font-size-medium;
+        font-size       : $font-size-medium;
-        text-decoration: underline;
+        text-decoration : underline;
 
         &:not(:last-child) {
-            margin-bottom: $size-margin-medium;
+            margin-bottom : $size-margin-medium;
         }
     }
 }

src/client/styles/sizes.scss

@@ -25,5 +25,9 @@ $size-minecraft-block : 32px;
 
 $size-page-width : $size-rem * 80;
 
-$size-skyscraper-height : 600px;
+$size-ad-large-mobile-banner-height : 100px;
-$size-skyscraper-width  : 160px;
+$size-ad-large-mobile-banner-width  : 320px;
+$size-ad-leaderboard-height         : 90px;
+$size-ad-leaderboard-width          : 728px;
+$size-ad-skyscraper-height          : 600px;
+$size-ad-skyscraper-width           : 160px;

src/common/constants.coffee

@@ -7,13 +7,27 @@
 
 ########################################################################################################################
 
-exports.adsense           = adsense = {}
+exports.adsense                    = adsense = {}
-adsense.clientId          = 'ca-pub-6593013914878730'
+adsense.adTypeMap                  = desktop:'skyscraper', tablet:'leaderboard', mobile:'largeMobileBanner'
-adsense.skyscraper        = {}
+adsense.clientId                   = 'ca-pub-6593013914878730'
-adsense.skyscraper.height = 600
+adsense.largeMobileBanner          = {}
-adsense.skyscraper.width  = 160
+adsense.largeMobileBanner.cssClass = 'large-mobile-banner'
-adsense.skyscraper.margin = 24
+adsense.largeMobileBanner.height   = 100 # px
-adsense.slotIds           = ['7613920409', '9574673605', '3388539204']
+adsense.largeMobileBanner.slotIds  = ['6651071600', '2081271209', '3558004401']
+adsense.largeMobileBanner.width    = 320 # px
+adsense.leaderboard                = {}
+adsense.leaderboard.cssClass       = 'leaderboard'
+adsense.leaderboard.height         = 90 # px
+adsense.leaderboard.slotIds        = ['6790672401', '8267405609', '5174338406']
+adsense.leaderboard.width          = 728 # px
+adsense.minimumDistance            = 100 # px
+adsense.readinessCheckInterval     = 1000 # ms
+adsense.skyscraper                 = {}
+adsense.skyscraper.cssClass        = 'skyscraper'
+adsense.skyscraper.height          = 600 # px
+adsense.skyscraper.margin          = 24 # px
+adsense.skyscraper.slotIds         = ['7613920409', '9574673605', '3388539204']
+adsense.skyscraper.width           = 160 # px
 
 exports.defaultMods   = defaultMods = {}
 defaultMods.minecraft = { defaultVersion: '1.7.10' } # Minecraft must be first
@@ -114,6 +128,20 @@ exports.productionEnvs = [ 'staging', 'production' ]
 
 exports.requiredMods = [ 'minecraft' ]
 
+exports.screen = screen = {}
+screen.mobileMaxWidth = 568 # px
+screen.tabletMaxWidth = 960 # px
+screen.type = {}
+screen.type.desktop = 'desktop'
+screen.type.mobile = 'mobile'
+screen.type.tablet = 'tablet'
+
+screen.type.compute = ->
+    width = $(document).width()
+    return screen.type.mobile if width <= screen.mobileMaxWidth
+    return screen.type.tablet if width <= screen.tabletMaxWidth
+    return screen.type.desktop
+
 exports.server             = {}
 exports.server.defaultPort = 8080