Survey Modal v2

modal.js

/*jshint jquery:true, browser:true*//*global navigator:true, console:true */
/**
 * Survey Modal JavaScript
 *
 * Depends on jQuery 1.7.1+
 * Replace $.on with $.delegate if need to backport
 *
 * Usage:
 * Call with surveyModal.init();
 *
 * Parameters
 * surveyModal.init({
 *  debug: true,
 *  ab: true
 * });
 */

jQuery(document).ready(function ($) {

  var surveyModal = (function () {
    var m = this; // self reference

    /**
     * default options
     */
    this.options = {
      debug:       false,
      ab:          false,
      percentage:  50,
      desktopUrl:  'http://surveyanalytics.com/t/SOMETHING',
      mobileUrl:   'http://surveyanalytics.com/t/SOMETHING'
    };

    /**
     * detect mobile browsers, case insensitive
     * @return bool true if user agent matches mobile device UA
     */
    this.isMobile = function () {
      if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/Kindle/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone|iPod|iPad/i) || navigator.userAgent.match(/Blackberry|Rim|WebOS/i) || navigator.userAgent.match(/mobile/i)) { // is mobile UA
        return true;
      }
      return false;
    };

    /**
     * set cookie so lightbox never pops up again
     * set when user clicks yes or no
     */
    this.done = function (e) {
      var expires = new Date();
      expires.setTime(expires.getTime() + (3600 * 1000 * 24 * 365 * 10)); // 10 years

      document.cookie = 'isSurveyDone=1;expires=' + expires.toGMTString() + ';path=/'; // unexpiring root cookie
      m.hide();
    };

    /**
     * read cookie determining if lightbox should popup
     * read before opening popup on init
     * @return bool true if isSurveyDone cookie value is 1
     */
    this.isSurveyDone = function () {
      var cookieValue = document.cookie.match('(^|;) ?isSurveyDone=([^;]*)(;|$)');
      return cookieValue && cookieValue[2] ? !0 : !1;
    };

    /**
     * create and show the popup
     * can be called at any time
     */
    this.show = function () {
      if ($('#survey_modal').length) { // already open
        return;
      }
      m.debug();

      var modalHtml = '';
      modalHtml += '<div id="survey_modal"';
      if (m.isMobile()) {
        modalHtml += ' class="mobile"';
      }
      modalHtml += '>';
      modalHtml += '<p>Will you answer a few questions?</p>';
      modalHtml += '<a href="';
      if (m.isMobile()) { // mobile link open same window
        modalHtml += m.options.mobileUrl + '" ';
      }
      else { // desktop link, open new window
        modalHtml += m.options.desktopUrl + '" target="_blank" ';
      }
      modalHtml += 'id="survey_modal-yes">Yes</a>';
      modalHtml += '<a id="survey_modal-no">No</a>';
      modalHtml += '</div>';
      $(modalHtml).appendTo('body');
      $("#survey_modal-yes").unbind("click").on("click", function(e) {
        e.preventDefault();
        window.open($(this).attr("href"), "survey", "resizable=1,scrollbars=yes,width=770,height=830").blur();
        window.focus();
        m.done();
      });
    };

    /**
     * completely remove popup from DOM
     */
    this.hide = function (e) {
      $('#survey_modal').remove();
      m.debug();
    };

    // show mobile detection status and lightbox cookie
    this.debug = function () {
      if (!m.options.debug) {
        return;
      }
      console.log('isMobile? ' + m.isMobile());
      console.log('isSurveyDone? ' + m.isSurveyDone());
    };

    // debugging method to unset cookie
    this.undo = function (e) {
      document.cookie = 'isSurveyDone=0'; // unexpiring cookie
      m.debug();
    };

    /**
     * @param options object
     *  debug: bool   - debug to console?
     *  ab:    bool   - only open for 50% of people?
     */
    this.init = function () {
      if (arguments.length) {
        m.options = $.extend(m.options, arguments[0]);
      }
      if (m.options.debug) { // show options
        console.log(m.options);
      }

      // set cookie after click yes or no, so popup only appears once ever
      $('body').on('click', '#survey_modal-yes, #survey_modal-no', m.done);

      // determine sample group, show if in 50% or percentage
      var isInSampleGroup = true;
      var pool = 2;

      if (m.options.ab) {
        isInSampleGroup = Math.floor(Math.random() * pool);
      }
      else if (m.options.percentage) {
        m.options.percentage = parseInt(m.options.percentage, 10);
        pool = 100 / m.options.percentage;
        isInSampleGroup = !Math.floor(Math.random() * pool);
      }

      if (isInSampleGroup) {
        if (m.options.debug || (!m.isSurveyDone())) {
          m.show();
        }
      }
      else {
        if (m.options.debug) {
          console.log('Not in sample group');
        }
      }
    };

    // expose methods
    return this;

  }).call({});

  if (!window.surveyDisabled) {
    surveyModal.init({
      ab: false,
      percentage: 25,
      desktopUrl:  'http://surveyanalytics.com/t/SOMETHING',
      mobileUrl:   'http://surveyanalytics.com/t/SOMETHING'
    });
  }

});