From 7921ea3f71ca131300dce15ed65b2b2a1617c634 Mon Sep 17 00:00:00 2001
From: Leo McArdle <leomcardle@gmail.com>
Date: Thu, 27 Jul 2017 14:43:10 +0100
Subject: [PATCH] add nda nightly banner

---
 common/after_header.html | 11 +++++++++
 common/common.scss       | 51 ++++++++++++++++++++++++++++++++++++++++
 common/head_tag.html     | 47 ++++++++++++++++++++++++++++++++++++
 3 files changed, 109 insertions(+)
 create mode 100644 common/after_header.html

diff --git a/common/after_header.html b/common/after_header.html
new file mode 100644
index 0000000..719acab
--- /dev/null
+++ b/common/after_header.html
@@ -0,0 +1,11 @@
+<div class="row download-banner download-banner-nightly">
+  <div class="alert alert-info alert-dismissible" role="alert">
+    <button type="button" class="close" data-dismiss="alert" aria-label="Close" onclick="sad_mayo(); dataLayer.push({'event': 'download-banner-nightly-close'})"><span aria-hidden="true">&times;</span></button>
+    <strong>Want to help test Firefox?</strong>
+    Give Firefox Nightly a try:
+    <a href="https://nightly.mozilla.org/" class="alert-link">
+      <i class="fa fa-download"></i>
+      Download
+    </a>
+  </div>
+</div>
diff --git a/common/common.scss b/common/common.scss
index 4aafe93..66090b2 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -34,3 +34,54 @@ h1, h2, h3, h4, h5, h6 {
 .category-list tbody .category h3 {
     font-size: 1.4em;
 }
+
+.download-banner {
+    display: none;
+}
+
+.sad-mayo {
+  display: none;
+}
+
+.category-mozillians-nda .sad-mayo {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 99;
+  background: #fff;
+  text-align: center;
+  padding-top: 70px;
+
+  button {
+    display: block;
+    position: absolute;
+    top: 100px;
+    right: 30px;
+  }
+
+  a {
+    font-size: 2em;
+
+    img {
+      display: block;
+      margin: 30px auto;
+    }
+
+    #happy-mayo {
+      display: none;
+    }
+
+    &:hover {
+      #sad-mayo {
+        display: none;
+      }
+
+      #happy-mayo {
+        display: block;
+      }
+    }
+  }
+}
diff --git a/common/head_tag.html b/common/head_tag.html
index c02e74b..fe91133 100644
--- a/common/head_tag.html
+++ b/common/head_tag.html
@@ -9,3 +9,50 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
 })(window,document,'script','dataLayer','GTM-TMGHNBJ')};</script>
 
 <meta name="google-site-verification" content="aP7UsvdPFYnZnuMpZajdyuKWnwH798PnDHPME_vacOE" />
+
+<script>
+  var userAgent = (window.navigator && navigator.userAgent) || ""
+
+  displayBanner('nightly', 'chrome', 'mozillians-nda')
+
+  function displayBanner (banner, browsers, categories) {
+    if (detect(/Mobi/i)) return
+
+    if ($.type(browsers) === 'string') browsers = [ browsers ]
+    if ($.type(categories) === 'string') categories = [ categories ]
+
+    var display = false
+
+    for (var i = 0; i < browsers.length; i++) {
+      browser = browsers[i]
+
+      switch (browser) {
+        case 'chrome':
+          display = detect(/Chrome/)
+          break
+      }
+
+      if (display) break
+    }
+
+    if (display) {
+      categories.forEach(category => {
+        $('head').append(`<style> .category-${category} .download-banner-${banner} { display: block } </style>`)
+      })
+    }
+  }
+
+  function detect (pattern) {
+    return pattern.test(userAgent)
+  }
+</script>
+
+<script>
+  function sad_mayo () {
+    $('.category-mozillians-nda').append('<div class="sad-mayo"><button type="button" class="btn" aria-label="Close" onclick="very_sad_mayo()"><span aria-hidden="true">&times;</span></button><a href="https://nightly.mozilla.org/"><img id="sad-mayo" src="https://discourse-paas-production-content.s3.amazonaws.com/original/2X/1/1a0a730dc86ce17381a017e68c432759a6d038e9.jpg"><img id="happy-mayo" src="https://discourse-paas-production-content.s3.amazonaws.com/original/2X/8/8693b13c9e3f5bdb5ac251aa68657c6afe3ae6c6.jpg"><i class="fa fa-download"></i> Download</a></div>')
+  }
+
+  function very_sad_mayo () {
+    $('.category-mozillians-nda .sad-mayo').remove();
+  }
+</script>