Merge pull request #3895 from davidfischer/fixed-footer-ads-part-deux

Fixed footer ads again
readthedocs · Apr 4, 2018 · 91ba549 · 91ba549
2 parents 30342e2 + 53fd600
commit 91ba549
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 4 deletions.
diff --git a/media/css/readthedocs-doc-embed.css b/media/css/readthedocs-doc-embed.css
@@ -5,6 +5,8 @@
 /* Please keep RTD badge displayed on your site */
 .rst-versions.rst-badge {
     display: block;
+
+    bottom: 50px;
 }
 
 .rst-other-versions {
@@ -60,7 +62,7 @@ div.ethical-sidebar, div.ethical-footer {
     padding-top: 1em;
     clear: both;
 }
-.ethical-sidebar .ethical-pixel, .ethical-footer .ethical-pixel {
+.ethical-sidebar .ethical-pixel, .ethical-footer .ethical-pixel, .ethical-fixedfooter .ethical-pixel {
     display: none !important;
 }
 .ethical-sidebar .ethical-text, .ethical-footer .ethical-text {
@@ -88,6 +90,41 @@ div.ethical-sidebar, div.ethical-footer {
     text-align: right;
 }
 
+/* Fixed footer promotions */
+.ethical-fixedfooter {
+    box-sizing: border-box;
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 100;
+    background-color: #eee;
+    border-top: 1px solid #bfbfbf;
+    font-size: 12px;
+    line-height: 16px;
+    padding: 0.5em 2.5em;
+    text-align: center;
+    color: #404040;
+}
+.ethical-fixedfooter a,
+.ethical-fixedfooter a:hover,
+.ethical-fixedfooter a:active,
+.ethical-fixedfooter a:visited {
+    color: #004B6B;
+    text-decoration: underline;
+}
+.ethical-fixedfooter .ethical-close {
+    position: absolute;
+    top: 0;
+    right: 5px;
+    font-size: 15px;
+    line-height: 15px;
+}
+.ethical-fixedfooter .ethical-close a {
+    color: black;
+    text-decoration: none;
+}
+
 /* RTD Theme specific customizations */
 .ethical-rtd .ethical-sidebar {
     /* RTD theme doesn't set sidebar text color */

diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "description": "Read the Docs build dependencies",
   "author": "Anthony Johnson <anthony@readthedocs.com>",
   "dependencies": {
+    "bowser": "^1.9.3",
     "cssfilter": "0.0.8",
     "github-changelog": "git+https://github.com/agjohnson/github-changelog.git"
   },

diff --git a/readthedocs/core/static-src/core/js/doc-embed/constants.js b/readthedocs/core/static-src/core/js/doc-embed/constants.js
@@ -13,8 +13,9 @@ exports.PROMO_SUPPORTED_THEMES = [
 ];
 
 exports.PROMO_TYPES = {
-    LEFTNAV: 'doc',               // Left navigation on documentation pages
-    FOOTER: 'site-footer',        // Footer of documentation pages
+    LEFTNAV: 'doc',                 // Left navigation on documentation pages
+    FOOTER: 'site-footer',          // Footer of documentation pages
+    FIXED_FOOTER: 'fixed-footer'    // A footer ad fixed at the bottom fo the screen
 };
 
 module.exports = exports;
diff --git a/readthedocs/core/static-src/core/js/doc-embed/sponsorship.js b/readthedocs/core/static-src/core/js/doc-embed/sponsorship.js
@@ -3,6 +3,8 @@
 var constants = require('./constants');
 var rtddata = require('./rtd-data');
 
+var bowser = require('bowser');
+
 var rtd;
 
 /*
@@ -60,6 +62,23 @@ function create_footer_placement() {
     return null;
 }
 
+/*
+ *  Creates a fixed footer placmenet
+ *  Returns the ID of the div or none if a fixed footer ad shouldn't be used
+ */
+function create_fixed_footer_placement() {
+    var element_id = 'rtd-' + (Math.random() + 1).toString(36).substring(4);
+    var display_type = constants.PROMO_TYPES.FIXED_FOOTER;
+
+    // Only propose the fixed footer ad for mobile
+    if (bowser && bowser.mobile) {
+        $('<div />').attr('id', element_id).appendTo('body');
+        return {'div_id': element_id, 'display_type': display_type};
+    }
+
+    return null;
+}
+
 function Promo(data) {
     this.id = data.id;                              // analytics id
     this.div_id = data.div_id || '';
@@ -113,7 +132,11 @@ function init() {
     var request_data = {format: "jsonp"};
     var div_ids = [];
     var display_types = [];
-    var placement_funcs = [create_footer_placement, create_sidebar_placement];
+    var placement_funcs = [
+        create_footer_placement,
+        create_sidebar_placement,
+        create_fixed_footer_placement,
+    ];
     var params;
     var placement;