Fix double image request

Use official framework for the "custom" ad design integration.

docs/_static/custom.css

@@ -50,29 +50,21 @@ body > div.document > div.sphinxsidebar > div > form > table > tbody > tr:nth-ch
 
 /* Native CPC by BuySellAds */
 
-.native-js {
-  visibility: hidden;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-  Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial,
-  sans-serif;
-  opacity: 0;
+#native-ribbon #_custom_ {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  box-shadow: 0 -1px 4px 1px hsla(0, 0%, 0%, .15);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
+    Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
   transition: all .25s ease-in-out;
   transform: translateY(calc(100% - 35px));
 
   flex-flow: column nowrap;
 }
 
-.native-js[data-state=visible] {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  visibility: visible;
-  box-shadow: 0 -1px 4px 1px hsla(0, 0%, 0%, .15);
-  opacity: 1;
-}
-
-.native-js[data-state=visible]:hover {
+#native-ribbon #_custom_:hover {
   transform: translateY(0);
 }
 
@@ -92,7 +84,7 @@ body > div.document > div.sphinxsidebar > div > form > table > tbody > tr:nth-ch
   transform-origin: left;
 }
 
-.native-js[data-state=visible]:hover .native-sponsor {
+#native-ribbon #_custom_:hover .native-sponsor {
   margin: 0 20px;
   opacity: 0;
   transform: scaleY(0);
@@ -100,17 +92,14 @@ body > div.document > div.sphinxsidebar > div > form > table > tbody > tr:nth-ch
 
 .native-flex {
   display: flex;
-  padding: 0 20px 30px;
+  padding: 10px 20px 25px;
   text-decoration: none;
 
   flex-flow: row nowrap;
+  justify-content: center;
   align-items: center;
 }
 
-.native-flex:hover {
-  text-decoration: none;
-}
-
 .native-main {
   display: flex;
 
@@ -135,6 +124,7 @@ body > div.document > div.sphinxsidebar > div > form > table > tbody > tr:nth-ch
 .native-desc {
   letter-spacing: 1px;
   font-weight: 300;
+  font-size: 14px;
   line-height: 1.4;
 }
 
@@ -158,6 +148,7 @@ body > div.document > div.sphinxsidebar > div > form > table > tbody > tr:nth-ch
 
 @media only screen and (min-width: 320px) and (max-width: 759px) {
   .native-flex {
+    padding: 5px 5px 15px;
     flex-direction: column;
 
     flex-wrap: wrap;
@@ -165,6 +156,7 @@ body > div.document > div.sphinxsidebar > div > form > table > tbody > tr:nth-ch
 
   .native-img {
     margin: 0;
+    display: none;
   }
 
   .native-details {
@@ -173,10 +165,13 @@ body > div.document > div.sphinxsidebar > div > form > table > tbody > tr:nth-ch
 
   .native-main {
     flex-direction: column;
-    margin-bottom: 20px;
-    text-align: center;
+    text-align: left;
 
     flex-wrap: wrap;
     align-content: center;
   }
+
+  .native-cta {
+    display: none;
+  }
 }

docs/_static/native.js

@@ -1,131 +0,0 @@
-var _native = (function () {
-  var _options = {}
-  var _construct = function (e) {
-    var defaultOptions = {
-      carbonZoneKey: '',
-      fallback: '',
-      ignore: 'false',
-      placement: '',
-      prefix: 'native',
-      targetClass: 'native-ad'
-    }
-
-    if (typeof e === 'undefined') return defaultOptions
-    Object.keys(defaultOptions).forEach((key, index) => {
-      if (typeof e[key] === 'undefined') {
-        e[key] = defaultOptions[key]
-      }
-    })
-    return e
-  }
-
-  var init = function (zone, options) {
-    _options = _construct(options)
-
-    let jsonUrl = `https://srv.buysellads.com/ads/${zone}.json?callback=_native_go`
-    if (_options['placement'] !== '') {
-      jsonUrl += '&segment=placement:' + _options['placement']
-    }
-    if (_options['ignore'] === 'true') {
-      jsonUrl += '&ignore=yes'
-    }
-
-    let srv = document.createElement('script')
-    srv.src = jsonUrl
-    document.getElementsByTagName('head')[0].appendChild(srv)
-  }
-
-  var carbon = function (e) {
-    let srv = document.createElement('script')
-    srv.src = '//cdn.carbonads.com/carbon.js?serve=' + e['carbonZoneKey'] + '&placement=' + e['placement']
-    srv.id = '_carbonads_js'
-
-    return srv
-  }
-
-  var sanitize = function (ads) {
-    return ads
-      .filter(ad => {
-        return Object.keys(ad).length > 0
-      })
-      .filter(ad => {
-        return ad.hasOwnProperty('statlink')
-      })
-  }
-
-  var pixel = function (p, timestamp) {
-    let c = ''
-    if (p) {
-      p.split('||').forEach((pixel, index) => {
-        c += `<img src="${pixel.replace('[timestamp]', timestamp)}" style="display:none;" height="0" width="0" />`
-      })
-    }
-    return c
-  }
-
-  var options = function () {
-    return _options
-  }
-
-  return {
-    carbon: carbon,
-    init: init,
-    options: options,
-    pixel: pixel,
-    sanitize: sanitize
-  }
-})({})
-
-var _native_go = function (json) {
-  let options = _native.options()
-  let ads = _native.sanitize(json['ads'])
-  let selectedClass = document.querySelectorAll('.' + options['targetClass'])
-
-  if (ads.length < 1) {
-    selectedClass.forEach((className, index) => {
-      let selectedTarget = document.getElementsByClassName(options['targetClass'])[index]
-
-      if (options['fallback'] !== '' || options['carbonZoneKey'] !== '') selectedTarget.setAttribute('data-state', 'visible')
-      selectedTarget.innerHTML = options['fallback']
-      if (options['carbonZoneKey'] !== '') selectedTarget.appendChild(_native.carbon(options))
-    })
-
-    // End at this line if no ads are found, avoiding unnecessary steps
-    return
-  }
-
-  selectedClass.forEach((className, index) => {
-    let selectedTarget = document.getElementsByClassName(options['targetClass'])[index]
-    let adElement = selectedTarget.innerHTML
-    let prefix = options['prefix']
-    let ad = ads[index]
-
-    if (ad && className) {
-      let adInnerHtml = adElement
-        .replace(new RegExp('#' + prefix + '_bg_color#', 'g'), ad['backgroundColor'])
-        .replace(new RegExp('#' + prefix + '_bg_color_hover#', 'g'), ad['backgroundHoverColor'])
-        .replace(new RegExp('#' + prefix + '_company#', 'g'), ad['company'])
-        .replace(new RegExp('#' + prefix + '_cta#', 'g'), ad['callToAction'])
-        .replace(new RegExp('#' + prefix + '_cta_bg_color#', 'g'), ad['ctaBackgroundColor'])
-        .replace(new RegExp('#' + prefix + '_cta_bg_color_hover#', 'g'), ad['ctaBackgroundHoverColor'])
-        .replace(new RegExp('#' + prefix + '_cta_color#', 'g'), ad['ctaTextColor'])
-        .replace(new RegExp('#' + prefix + '_cta_color_hover#', 'g'), ad['ctaTextColorHover'])
-        .replace(new RegExp('#' + prefix + '_desc#', 'g'), ad['description'])
-        .replace(new RegExp('#' + prefix + '_index#', 'g'), prefix + '-' + ad['i'])
-        .replace(new RegExp('#' + prefix + '_img#', 'g'), ad['image'])
-        .replace(new RegExp('#' + prefix + '_small_img#', 'g'), ad['smallImage'])
-        .replace(new RegExp('#' + prefix + '_link#', 'g'), ad['statlink'])
-        .replace(new RegExp('#' + prefix + '_logo#', 'g'), ad['logo'])
-        .replace(new RegExp('#' + prefix + '_color#', 'g'), ad['textColor'])
-        .replace(new RegExp('#' + prefix + '_color_hover#', 'g'), ad['textColorHover'])
-        .replace(new RegExp('#' + prefix + '_title#', 'g'), ad['title'])
-
-      selectedTarget.innerHTML = null
-      selectedTarget.innerHTML += adInnerHtml + _native.pixel(ad['pixel'], ad['timestamp'])
-      selectedTarget.setAttribute('data-state', 'visible')
-    } else {
-      selectedTarget.innerHTML = null
-      selectedTarget.style.display = 'none'
-    }
-  })
-}

docs/_templates/hacks.html

@@ -57,47 +57,54 @@
 
 <!-- Native CPC by BuySellAds -->
 
-<script src="{{ pathto('_static/', 1) }}/native.js"></script>
+<script type="text/javascript" src="//m.servedby-buysellads.com/monetization.js"></script>
+
+<div id="native-ribbon">
+</div>
+
 <script>
-  _native.init("CK7D62JU", {
-    targetClass: 'native-js'
-  });
-</script>
-
-<div class="native-js">
-  <div class="native-sponsor">Sponsored Ad by #native_company# — Learn More</div>
-  <a href="#native_link#" class="native-flex">
+_bsa.init('custom', 'CK7D62JU', 'placement:pythonrequestsorg',
+    {
+      target: '#native-ribbon',
+      template: `
+<div class="native-sponsor">Sponsored by ##company## — Learn More</div>
+  <a href="##link##" class="native-flex">
     <style>
-      .native-js {
-        background: linear-gradient(-30deg, #native_bg_color#E5, #native_bg_color#E5 45%, #native_bg_color# 45%) #fff;
-      }
+    #native-ribbon #_custom_ {
+      background: linear-gradient(-30deg, ##backgroundColor##E5, ##backgroundColor##E5 45%, ##backgroundColor## 45%) #fff;
+    }
 
-      .native-details,
-      .native-sponsor {
-        color: #native_color# !important;
-      }
+    .native-details,
+    .native-sponsor,
+    .native-bsa {
+      color: ##textColor## !important;
+    }
 
-      .native-details:hover {
-        color: #native_color_hover# !important;
-      }
+    .native-details:hover {
+      color: ##textColorHover## !important;
+    }
 
-      .native-cta {
-        color: #native_cta_color#;
-        background-color: #native_cta_bg_color#;
-      }
+    .native-cta {
+      color: ##ctaTextColor##;
+      background-color: ##ctaBackgroundColor##;
+    }
 
-      .native-cta:hover {
-        color: #native_cta_color_hover;
-        background-color: #native_cta_bg_color_hover#;
-      }
+    .native-cta:hover {
+      color: ##ctaTextColorHover##;
+      background-color: ##ctaBackgroundColorHover##;
+    }
     </style>
     <div class="native-main">
-      <img class="native-img" src="#native_logo#">
+      <img class="native-img" src="##logo##">
       <div class="native-details">
-        <span class="native-company">#native_title#</span>
-        <span class="native-desc">#native_desc#</span>
+        <span class="native-company">##title##</span>
+        <span class="native-desc">##description##</span>
       </div>
-      <span class="native-cta">#native_cta#</span>
     </div>
+    <span class="native-cta">##callToAction##</span>
   </a>
 </div>
+`
+    }
+  );
+</script>

docs/_templates/sidebarintro.html

@@ -69,41 +69,5 @@
   <li><a href="http://es.python-requests.org/">Spanish</a></li>
 </ul>
 
-<div class="native-js">
-  <div class="native-sponsor">Sponsored by #native_company# — Learn More</div>
-  <a href="#native_link#" class="native-flex">
-    <style>
-      .native-js {
-        background: linear-gradient(-30deg, #native_bg_color#E5, #native_bg_color#E5 45%, #native_bg_color# 45%) #fff;
-      }
-
-      .native-details,
-      .native-sponsor,
-      .native-bsa {
-        color: #native_color# !important;
-      }
-
-      .native-details:hover {
-        color: #native_color_hover# !important;
-      }
-
-      .native-cta {
-        color: #native_cta_color#;
-        background-color: #native_cta_bg_color#;
-      }
-
-      .native-cta:hover {
-        color: #native_cta_color_hover;
-        background-color: #native_cta_bg_color_hover#;
-      }
-    </style>
-    <div class="native-main">
-      <img class="native-img" src="#native_logo#">
-      <div class="native-details">
-        <span class="native-company">#native_title#</span>
-        <span class="native-desc">#native_desc#</span>
-      </div>
-    </div>
-    <span class="native-cta">#native_cta#</span>
-  </a>
+<div id="native-ribbon">
 </div>