Skip to content

Commit

Permalink
Allow promos to be placed in the docs footer (readthedocs#3267)
Browse files Browse the repository at this point in the history 
- this is in addition to the normal left navigation
- works on the RTD and Alabaster themes
  • Loading branch information
@davidfischer @agjohnson
davidfischer authored and agjohnson committed Nov 20, 2017
1 parent e737d78 commit 02cc08f
Show file tree
Hide file tree
Showing 5 changed files with 146 additions and 82 deletions.
38 changes: 33 additions & 5 deletions media/css/readthedocs-doc-embed.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,21 +8,21 @@
}

.rst-other-versions {
text-align: left;
text-align: left;
}

.rst-other-versions a {
border: 0;
border: 0;
}

.rst-other-versions dl {
margin: 0;
margin: 0;
}


/* Fix RTD theme bottom margin */
.rst-content .line-block {
margin-bottom: 24px
margin-bottom: 24px
}

/* Fix for nav bottom padding with flyout */
Expand Down Expand Up @@ -134,11 +134,39 @@ div.rtd-pro.alabaster div.rtd-pro-about a {
border-bottom: 0px;
}

div.rtd-pro.alabaster div.rtd-pro-about i.fa-info-circle:before {
div.rtd-pro.alabaster div.rtd-pro-about i.fa-info-circle:before,
div.rtd-pro.rtd-pro-footer div.rtd-pro-about i.fa-info-circle:before {
content: "";
color: #a3a3a3;
}

/* Hide the "sponsored" note in the left navigation */
div.rtd-pro-about span {
display: none;
}

/* Footer promos */
div.rtd-pro.rtd-pro-footer div.rtd-pro-about span {
display: inline;
}
div.rtd-pro.rtd-pro-footer div.rtd-pro-about {
float: none;
}
div.rtd-pro.rtd-pro-footer div.rtd-pro-about a {
text-decoration: none;
}
div.rtd-pro.rtd-pro-footer {
text-align: left;
}
div.rtd-pro.rtd-pro-footer a.rtd-pro-image-wrapper {
float: right;
margin-left: 25px;
}

div.rtd-pro-wrapper {
clear: both;
}

@media (max-width: 768px) {
div.rst-pro.wy-menu {
display: none;
Expand Down
5 changes: 5 additions & 0 deletions readthedocs/core/static-src/core/js/doc-embed/constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,9 @@ exports.PROMO_SUPPORTED_THEMES = [
exports.THEME_ALABASTER
]

exports.PROMO_TYPES = {
LEFTNAV: 'doc', // Left navigation on documentation pages
FOOTER: 'site-footer' // Footer of documentation pages
};

module.exports = exports;
3 changes: 2 additions & 1 deletion readthedocs/core/static-src/core/js/doc-embed/footer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,8 @@ function injectFooter(data) {
data.promo_data.text,
data.promo_data.link,
data.promo_data.image,
config.theme
config.theme,
data.promo_data.display_type
)
if (promo) {
promo.display();
Expand Down
180 changes: 105 additions & 75 deletions readthedocs/core/static-src/core/js/sponsorship.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,107 +6,137 @@ module.exports = {
Promo: Promo
};

function Promo (id, text, link, image, theme) {
function Promo (id, text, link, image, theme, display_type) {
this.id = id;
this.text = text;
this.link = link;
this.image = image;
this.theme = theme || constants.THEME_RTD;
this.display_type = display_type || constants.PROMO_TYPES.LEFTNAV;
this.promo = null;

// Handler when a promo receives a click
this.click_handler = function () {
if (_gaq) {
_gaq.push(
['rtfd._setAccount', 'UA-17997319-1'],
['rtfd._trackEvent', 'Promo', 'Click', self.id]
);
}
};
}

Promo.prototype.create = function () {
var self = this,
menu,
promo_class;
if (this.theme == constants.THEME_RTD) {
menu = this.get_sphinx_rtd_theme_menu();
promo_class = 'wy-menu';
menu = this.get_sphinx_rtd_theme_promo_selector();
promo_class = this.display_type === constants.PROMO_TYPES.FOOTER ? 'rtd-pro-footer' : 'wy-menu';
}
else if (this.theme == constants.THEME_ALABASTER) {
menu = this.get_alabaster_menu();
promo_class = 'alabaster';
menu = this.get_alabaster_promo_selector();
promo_class = this.display_type === constants.PROMO_TYPES.FOOTER ? 'rtd-pro-footer' : 'alabaster';
}
if (typeof(menu) != 'undefined') {
// Add elements
promo = $('<div />')
.attr('class', 'rtd-pro ' + promo_class);

// Promo info
var promo_about = $('<div />')
.attr('class', 'rtd-pro-about');
var promo_about_link = $('<a />')
.attr('href', 'https://readthedocs.org/sustainability/advertising/')
.appendTo(promo_about);
var promo_about_icon = $('<i />')
.attr('class', 'fa fa-info-circle')
.appendTo(promo_about_link);
promo_about.appendTo(promo);

// On Click handler
function promo_click() {
if (_gaq) {
_gaq.push(
['rtfd._setAccount', 'UA-17997319-1'],
['rtfd._trackEvent', 'Promo', 'Click', self.id]
);
}
}

// Promo image
if (self.image) {
var promo_image_link = $('<a />')
.attr('class', 'rtd-pro-image-wrapper')
.attr('href', self.link)
.attr('target', '_blank')
.on('click', promo_click);
var promo_image = $('<img />')
.attr('class', 'rtd-pro-image')
.attr('src', self.image)
.appendTo(promo_image_link);
promo.append(promo_image_link);
}

// Create link with callback
var promo_text = $('<span />')
.html(self.text);
$(promo_text).find('a').each(function () {
$(this)
.attr('class', 'rtd-pro-link')
.attr('href', self.link)
.attr('target', '_blank')
.on('click', promo_click);
});
promo.append(promo_text);

promo.appendTo(menu);

promo.wrapper = $('<div />')
.attr('class', 'rtd-pro-wrapper')
.appendTo(menu);

return promo;
if (typeof(menu) != 'undefined') {
this.place_promo(menu, promo_class);
}
}

Promo.prototype.get_alabaster_menu = function () {
Promo.prototype.place_promo = function (selector, promo_class) {
var self = this;

// Add elements
var promo = $('<div />')
.attr('class', 'rtd-pro ' + promo_class);

// Promo info
var promo_about = $('<div />')
.attr('class', 'rtd-pro-about');
var promo_about_link = $('<a />')
.attr('href', 'https://readthedocs.org/sustainability/advertising/')
.appendTo(promo_about);
$('<span />').text('Sponsored ').appendTo(promo_about_link);
var promo_about_icon = $('<i />')
.attr('class', 'fa fa-info-circle')
.appendTo(promo_about_link);
promo_about.appendTo(promo);

// Promo image
if (self.image) {
var promo_image_link = $('<a />')
.attr('class', 'rtd-pro-image-wrapper')
.attr('href', self.link)
.attr('target', '_blank')
.on('click', this.click_handler);
var promo_image = $('<img />')
.attr('class', 'rtd-pro-image')
.attr('src', self.image)
.appendTo(promo_image_link);
promo.append(promo_image_link);
}

// Create link with callback
var promo_text = $('<span />')
.html(self.text);
$(promo_text).find('a').each(function () {
$(this)
.attr('class', 'rtd-pro-link')
.attr('href', self.link)
.attr('target', '_blank')
.on('click', this.click_handler);
});
promo.append(promo_text);

promo.appendTo(selector);

promo.wrapper = $('<div />')
.attr('class', 'rtd-pro-wrapper')
.appendTo(selector);

return promo;
};

Promo.prototype.get_alabaster_promo_selector = function () {
// Return a jQuery selector where the promo goes on the Alabaster theme
var self = this,
nav_side = $('div.sphinxsidebar > div.sphinxsidebarwrapper');
selector;

if (self.display_type === constants.PROMO_TYPES.FOOTER) {
selector = $('<div />')
.attr('class', 'rtd-pro-footer-wrapper body')
.appendTo('div.bodywrapper');
$('<hr />').insertBefore(selector);
$('<hr />').insertAfter(selector);
} else {
selector = $('div.sphinxsidebar > div.sphinxsidebarwrapper');
}

if (nav_side.length) {
return nav_side;
if (selector.length) {
return selector;
}
}
};


Promo.prototype.get_sphinx_rtd_theme_menu = function () {
Promo.prototype.get_sphinx_rtd_theme_promo_selector = function () {
// Return a jQuery selector where the promo goes on the RTD theme
var self = this,
nav_side = $('nav.wy-nav-side > div.wy-side-scroll');
selector;

if (self.display_type === constants.PROMO_TYPES.FOOTER) {
selector = $('<div />')
.attr('class', 'rtd-pro-footer-wrapper')
.insertBefore('footer hr');
$('<hr />').insertBefore(selector);
} else {
selector = $('nav.wy-nav-side > div.wy-side-scroll');
}

if (nav_side.length) {
return nav_side;
if (selector.length) {
return selector;
}
}
};

// Position promo
Promo.prototype.display = function () {
Expand All @@ -121,10 +151,10 @@ Promo.prototype.display = function () {
if (promo) {
promo.show();
}
}
};

Promo.prototype.disable = function () {
}
};

// Variant factory method
Promo.from_variants = function (variants) {
Expand Down
2 changes: 1 addition & 1 deletion readthedocs/core/static/core/js/readthedocs-doc-embed.js
View file

Large diffs are not rendered by default.

0 comments on commit 02cc08f

Please sign in to comment.