Integrate Native CPC by BuySellAds

Replacing Carbon zone key with the direct key and install CPC ad unit on the site.

2 files changed, 269 insertions, 3 deletions

diff --git a/docs/_static/custom.css b/docs/_static/custom.css
index 54def686..0012d353 100644
--- a/docs/_static/custom.css
+++ b/docs/_static/custom.css
@@ -6,15 +6,16 @@ body > div.document > div.sphinxsidebar > div > form > table > tbody > tr:nth-ch
   color: white;
 }
 
+/* Carbon by BuySellAds */
 #carbonads {
   display: block;
   overflow: hidden;
+  margin: 1.5em 0 2em;
   padding: 1em;
-  background-color: #eeeeee;
-  text-align: center;
   border: solid 1px #cccccc;
-  margin: 1.5em 0 2em;
   border-radius: 2px;
+  background-color: #eeeeee;
+  text-align: center;
   line-height: 1.5;
 }
 
@@ -42,6 +43,140 @@ body > div.document > div.sphinxsidebar > div > form > table > tbody > tr:nth-ch
   display: block;
   text-transform: uppercase;
   letter-spacing: 1px;
+  font-size: 10px;
   line-height: 1;
+}
+
+
+/* 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;
+  transition: all .25s ease-in-out;
+  transform: translateY(calc(100% - 35px));
+
+  flex-flow: column nowrap;
+}
+
+.native-js[data-state=visible] {
+  position: fixed;
+  bottom: 0;
+  visibility: visible;
+  width: 100%;
+  box-shadow: 0 -1px 4px 1px hsla(0, 0%, 0%, .15);
+  opacity: 1;
+}
+
+.native-js[data-state=visible]:hover {
+  transform: translateY(0);
+}
+
+.native-img {
+  margin-right: 20px;
+  max-height: 50px;
+  border-radius: 3px;
+}
+
+.native-sponsor {
+  margin: 10px 20px;
+  text-align: center;
+  text-transform: uppercase;
+  letter-spacing: .5px;
+  font-size: 12px;
+  transition: all .3s ease-in-out;
+  transform-origin: left;
+}
+
+.native-js[data-state=visible]:hover .native-sponsor {
+  margin: 0 20px;
+  opacity: 0;
+  transform: scaleY(0);
+}
+
+.native-flex {
+  display: flex;
+  padding: 20px 20px 40px;
+  text-decoration: none;
+
+  flex-flow: row nowrap;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.native-flex:hover {
+  text-decoration: none;
+}
+
+.native-main {
+  display: flex;
+
+  flex-flow: row nowrap;
+  align-items: center;
+}
+
+.native-details {
+  display: flex;
+  margin-right: 30px;
+
+  flex-flow: column nowrap;
+}
+
+.native-company {
+  margin-bottom: 4px;
+  text-transform: uppercase;
+  letter-spacing: 2px;
   font-size: 10px;
 }
+
+.native-desc {
+  letter-spacing: 1px;
+  font-weight: 300;
+  line-height: 1.4;
+}
+
+.native-cta {
+  padding: 10px 14px;
+  border-radius: 3px;
+  box-shadow: 0 6px 13px 0 hsla(0, 0%, 0%, .15);
+  text-transform: uppercase;
+  white-space: nowrap;
+  letter-spacing: 1px;
+  font-weight: 400;
+  font-size: 12px;
+  transition: all .3s ease-in-out;
+  transform: translateY(-1px);
+}
+
+.native-cta:hover {
+  box-shadow: none;
+  transform: translateY(1px);
+}
+
+@media only screen and (min-width: 320px) and (max-width: 759px) {
+  .native-flex {
+    flex-direction: column;
+
+    flex-wrap: wrap;
+  }
+
+  .native-img {
+    margin: 0;
+  }
+
+  .native-details {
+    margin: 0;
+  }
+
+  .native-main {
+    flex-direction: column;
+    margin-bottom: 20px;
+    text-align: center;
+
+    flex-wrap: wrap;
+    align-content: center;
+  }
+}
diff --git a/docs/_static/native.js b/docs/_static/native.js
new file mode 100644
index 00000000..65aebecf
--- /dev/null
+++ b/docs/_static/native.js
@@ -0,0 +1,131 @@
+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'
+    }
+  })
+}