Add open source countdown and 30 second on-site ping (#645)

* Add open source countdown and 30 second on-site ping

* Add condition to not ping on first loop

app/assets/javascripts/base.js.erb

@@ -643,6 +643,13 @@ var instantClick
 //FUNCTIONAL CODE FOR PAGE
 
   function initializeBaseApp() {
+    var pingLoops = 0;
+    setInterval(function() {
+      if (window.ga && ga.create && pingLoops > 0) {
+        ga('send', 'event', 'ping', '30 second ping', location.pathname, null);
+      }
+      pingLoops++;
+    }, 30000);
     InstantClick.on('change', function() {
       initializePage();
     });

app/assets/stylesheets/sticky-nav.scss

@@ -47,6 +47,28 @@
       }
     }
   }
+  .primary-sticky-nav-countdown{
+    text-align: center;
+    padding-top: 15px !important;
+    padding-bottom: 20px !important;
+    .primary-sticky-nav-countdown-timer-element{
+      padding: 14px 2px;
+      height: 30px;
+      font-size:1.5em;
+      background: $yellow;
+      border-radius: 3px;
+    }
+    .primary-sticky-nav-countdown-headline{
+      font-size:1.4em;
+      font-family: $helvetica-condensed;
+      padding: 16px 2px 3px;
+    }
+    a{
+      display: block;
+      padding: 10px 0px 0px;
+      color: $bold-blue;
+    }
+  }
   .primary-sticky-nav-profile-image{
     height: 23px;
     width: 23px;

app/views/articles/_sticky_nav.html.erb

@@ -25,6 +25,12 @@
 </style>
 
 <div class="primary-sticky-nav">
+  <div class="primary-sticky-nav-element primary-sticky-nav-countdown">
+    <div id="countdown-timer" class="primary-sticky-nav-countdown-timer-element"></div>
+    <div class="primary-sticky-nav-countdown-headline">Countdown to open source!</div>
+    <a href="https://dev.to/ben/the-devto-codebase-will-go-open-source-on-august-8-2kia">Read Announcement Post</a>
+    <a href="https://github.com/thepracticaldev/dev.to" target="_blank" rel="noopener">View GitHub Repo</a>
+  </div>
   <div class="primary-sticky-nav-element primary-sticky-nav-author">
     <a href="<%= @actor.path %>"><img src="<%= ProfileImage.new(@actor).get(90) %>" class="primary-sticky-nav-author-top-profile-image" /></a>
     <span class="primary-sticky-nav-author-name">
@@ -99,3 +105,38 @@
 
   <% end %>
 </div>
+
+<script defer>
+// Remove this when we get open.
+// Set the date we're counting down to
+  var countDownDate = new Date("Aug 8, 2018 17:00:00 UTC").getTime();
+
+  // Update the count down every 1 second
+  var x = setInterval(function() {
+    if (!document.getElementById("countdown-timer")){
+      clearInterval(x);
+      return;
+    }
+    // Get todays date and time
+    var now = new Date().getTime();
+
+    // Find the distance between now and the count down date
+    var distance = countDownDate - now;
+
+    // Time calculations for days, hours, minutes and seconds
+    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
+    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+    // Display the result in the element with id="demo"
+    document.getElementById("countdown-timer").innerHTML = days + "d " + hours + "h "
+    + minutes + "m " + seconds + "s ";
+
+    // If the count down is finished, write some text 
+    if (distance < 0) {
+      clearInterval(x);
+      document.getElementById("countdown-timer").innerHTML = "It's Time!!!";
+    }
+  }, 1000);
+</script>