Add a bar that advertises the community survey

static/canjs.js

@@ -5,6 +5,7 @@ $ = require("jquery");
 var debounce = require("lodash/debounce");
 var loader = new LoadingBar('blue');
 var SearchControl = require('./search');
+var SurveyAdControl = require('./survey-ad');
 
 // state
 var $articleContainer,
@@ -23,6 +24,7 @@ var $articleContainer,
 	scrollPositionInterval,
 	currentHref,
 	searchControl,
+	surveyAdControl,
 	hasShownSearch;
 
 (function() {
@@ -120,6 +122,14 @@ function init() {
 		});
 	}
 
+	if (!surveyAdControl) {
+		// Set up the survey ad control
+		surveyAdControl = new SurveyAdControl("survey-ad");
+	} else {
+		// Notify the survey ad control that the user loaded a page
+		surveyAdControl.didEngage();
+	}
+
 	hasShownSearch = true;
 }
 

static/canjs.less

@@ -22,3 +22,4 @@
 @import "screenshots.less";
 @import "loading-bar.less";
 @import "search.less";
+@import "survey-ad.less";

static/layout.less

@@ -6,7 +6,19 @@
   flex-wrap: nowrap;
   box-sizing: border-box;
   height: 100%;
-  -webkit-overflow-scrolling: touch
+  -webkit-overflow-scrolling: touch;
+  padding-bottom: 0;
+  transition: padding-bottom @transition-speed ease;
+
+  @media screen and (min-width: @breakpoint) {
+    // Make some space for the survey-ad
+    &.survey-ad-showing {
+      padding-bottom: 3rem;
+      .search-results-container {
+        padding-bottom: 3rem;
+      }
+    }
+  }
 }
 #left {
   -ms-flex-wrap: wrap;

static/survey-ad.js

@@ -0,0 +1,106 @@
+var Control = require("can-control");
+
+module.exports = Control.extend({
+  defaults: {
+    engagementCountKey: 'survey-ad-engagement-count',
+    engagementCountMinimum: 3,
+    userDidCloseKey: 'survey-ad-closed'
+  }
+}, {
+
+  /* This should only happen once */
+  init: function() {
+    var surveyAdElement = this.element;
+
+    // Always show the close button since JS is active
+    var closeButton = surveyAdElement.querySelector('.close');
+    if (closeButton.classList) {// Only enable the close button in IE10+
+      closeButton.style.display = 'inline-block';
+    }
+
+    try {
+
+      // Look up the user’s preference in localStorage
+      var didClose = window.localStorage.getItem(this.options.userDidCloseKey);
+
+      // Get how many times the user has engaged
+      var engagementCount = window.localStorage.getItem(this.options.engagementCountKey);
+
+      // If the user hasn’t closed the control and their engagement count is
+      // greater than the minimum, show the control
+      if (!didClose && engagementCount >= this.options.engagementCountMinimum) {
+        this.show();
+      }
+
+    } catch (error) {
+      console.info('Caught localStorage error:', error);
+    }
+  },
+
+  /* This should happen whenever a new page is loaded */
+  didEngage: function() {
+    try {
+      var storageKey = this.options.engagementCountKey;
+      var engagementCount = parseInt(window.localStorage.getItem(storageKey) || '0', 10);
+      var newEngagementCount = 1 + engagementCount;
+
+      // Store the new engagement count
+      window.localStorage.setItem(storageKey, newEngagementCount);
+
+      // Potentially show the control
+      if (newEngagementCount >= this.options.engagementCountMinimum) {
+
+        // Look up the user’s preference in localStorage
+        var didClose = window.localStorage.getItem(this.options.userDidCloseKey);
+        if (!didClose) {
+          this.show();
+        }
+
+      }
+    } catch (error) {
+      console.info('Caught localStorage error:', error);
+    }
+  },
+
+  hide: function(immediately) {
+
+    // Remove .showing to animate the control out of view
+    if (this.element.classList) {
+      this.element.classList.remove('showing');
+    }
+
+    // .survey-ad-showing is used to change padding-bottom on the rest of the content
+    document.getElementById('everything').classList.remove('survey-ad-showing');
+  },
+
+  show: function() {
+
+    // Add a class to animate the control into view
+    if (this.element.classList) {
+      this.element.classList.add('showing');
+    }
+
+    // .survey-ad-showing is used to change padding-bottom on the rest of the content
+    document.getElementById('everything').classList.add('survey-ad-showing');
+  },
+
+  /* This event will fire when the user clicks the X button */
+  '{element} .close click': function() {
+
+    // Hide the control
+    this.hide();
+
+    // Try to remember the user’s preference in localStorage
+    try {
+      // Get the current time; we don’t make use of this right now,
+      // but in the future if we want to re-enable the link after a
+      // certain amount of time or for a particular event, we can
+      // more easily do that :)
+      var currentTime = (new Date()).getTime();
+      var storageKey = this.options.userDidCloseKey;
+      window.localStorage.setItem(storageKey, currentTime);
+    } catch (error) {
+      console.info('Caught localStorage error:', error);
+    }
+  }
+});

static/survey-ad.less

@@ -0,0 +1,42 @@
+survey-ad {
+  background: white;
+  border-top: 1px solid @border-color;
+  bottom: -3.1rem;// 3 rem + a little bit for the top border
+  position: absolute;
+  text-align: center;
+  transition: bottom @transition-speed ease;
+  width: 100%;
+  z-index: 90;// This matches #right’s z-index
+
+  a {
+    display: block;
+    line-height: 3rem;
+    width: 100%;
+  }
+
+  .close {
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: none;
+    font-size: 1.5rem;
+    line-height: 3rem;
+    margin: 0;
+    outline: none;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    width: 3rem;
+  }
+
+  &.showing {
+    bottom: 0;
+  }
+}
+
+// Hide this component on mobile
+@media screen and (max-width: @breakpoint) {
+  survey-ad {
+    display: none;
+  }
+}

templates/content.mustache

@@ -29,3 +29,4 @@
     </div>
   </div>
 </div>
+{{> survey-ad.mustache}}

templates/survey-ad.mustache

@@ -0,0 +1,8 @@
+<survey-ad>
+  <button aria-label="Close" class="close" type="button">
+    <span aria-hidden="true">&times;</span>
+  </button>
+  <a href="https://donejs.com/survey.html" target="_blank">
+    Help us improve CanJS by signing up for our community survey
+  </a>
+</survey-ad>