In-Video Subscribe for the Condé Nast Video Player

subscribe.js

/* JS + ERB */
/*jshint ignore:start*/
<%= raw @callback %>(
/*jshint ignore:end*/
  // README: The Form Popup is hardcoded here.
  '<%= j render(partial: "annotations/subscribe_form") %>',
  function($container, player) { // onLoad

    var destroyTimeoutInMilliseconds = 4500;

    var selectors = {
      annotation: '.js-annotation',
      closeButton: '.js-subscribe-close-button',
      input: '.js-subscribe-input',
      form: '.js-subscribe-form',
      bubble: '.js-subscribe-bubble',
      submitButton: '.js-subscribe-submit',
      success: '.js-subscribe-success'
    };

    var $annotation = $container.find(selectors.annotation);

    var buildUrl = function() {
      var url = [];

      url.push('<%= Playerservice::Application.config.api_uri %>');
      url.push('<%= Playerservice::Application.config.api_subscribe_path %>');

      return url.join('/');
    };

    var validateEmail = function(email) {
      return /^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/i.test(email);
    };

    var SubscribePanel = {
      durationInDays: 100,
      init: function() {

        // With Doug's new design updates for the Form design, require some JS
        // centering to work properly. This method does just that.
        if ($annotation.hasClass('cne-annotation--form')) {
          this.centerForm();
        }

        this.setupPanelEvents();
      },
      centerForm: function() {
        // This maxWidth is taken from the PSD.
        var maxWidth = 721;
        var $player = _cne.$(player.player.el());
        var playerWidth = $player.width();
        var formWidthAsPercentage = .9013;
        var formWidth = Math.round(playerWidth * formWidthAsPercentage);
        var $form = $annotation.find(selectors.form);

        if (formWidth < maxWidth) {
          $form.css({
            marginLeft: '-' + (Math.round(formWidth / 2)) + 'px'
          });
        }
      },
      subscribeEndpoint: buildUrl(),
      ajaxRequest: function(email, submitCallback) {
        var url = '//' + this.subscribeEndpoint;

        if (window.XDomainRequest) {
          // You have entered the MSHell. Please proceed with the caution that
          // drives your heart when walking on eggshells.

          // Let's begin with a new XDR since we didn't think we needed one.
          var xdr = new XDomainRequest();

          // Let's handle every SINGLE event thrown at us.
          xdr.onload = function() {
            var response = this.responseText;
            submitCallback();
          };
          // I mean all of them.
          xdr.onerror = function() {
            var response = this.responseText;
          };
          // No arguments being assigned? Oh, that's because MS doesn't think you
          // need them. Let's just lose scope how we're used to anyway...
          xdr.onprogress = function() {
            var response = this.responseText;
          };
          // This last one is helpful sometimes, so I take back my sarcasm.
          xdr.ontimeout = function() {
            var response = this.responseText;
            console.log('The XDR Response took longer than the expected ' + (xdr.timeout / 1000) + ' seconds allotted.');
          };

          // Let's let this thing wait a while, since time is an illusion anyway.
          xdr.timeout = 10000;

          // Finally we open it and stuff it's dirty little method with parameters.
          xdr.open('post', url + _cne.$.param({
            email: email,
            vars: {
              form_location: 'InVideoSubscribe',
              source: 'InVideo'
            }
          }));

          // Finally, again. Let's send this thing out of here.
          window.setTimeout(function() {
            // But let's not do it right away. MSHell is a strange place.
            xdr.send();
          }, 0);
        } else {
          _cne.$.ajax({
            url: url,
            type: 'POST',
            data: {
              email: email,
              vars: {
                form_location: 'InVideoSubscribe',
                source: 'InVideo'
              }
            },
            success: function(response) {
              if (!response.error) {
                submitCallback();
              }
            },
            error: function(response) {
              console.log(response.toString());
            }
          });
        }
      },
      submitEmail: function(email) {
        var self = this;
        var counter = 0;

        // README: There can be some network latency, so let's give the
        // user some feedback that the submit is happening.
        this.submitLoadingInterval = window.setInterval(function() {
          if (counter > 2) {
            counter = 0;
          }
          switch(counter) {
            case 0:
              _cne.$('.js-subscribe-submit').val('.');
              break;
            case 1:
              _cne.$('.js-subscribe-submit').val('..');
              break;
            case 2:
              _cne.$('.js-subscribe-submit').val('...');
          }
          counter++
        }, 200);

        this.ajaxRequest(email, function() {
          window.clearTimeout(self.submitLoadingInterval);
          self.subscribeSuccessful();
        });
      },
      setCookie: function() {
        _cne.util.CookieHelper.create('cne_invideo_subscribe', true, this.durationInDays);
      },
      subscribeSuccessful: function() {
        this.setCookie();

        player.sendAnalyticsEvent('InVideoSubscribe', 'Submit', {
          eventLabel: player.config.video.title
        });

        var self = this;
        if (player.isMobile()) {
          $annotation.find(selectors.form).remove();
        } else {
          $annotation.find(selectors.form).removeClass('is-active is-focused')
        }
        $annotation.addClass('subscribe-complete');
        player.play();

        window.setTimeout(function() {
          $annotation.fadeOut(300, function() {
            self.destroyPanel();
          });
        }, destroyTimeoutInMilliseconds);
      },
      setupPanelEvents: function() {
        var self = this;

        $annotation.on('click', selectors.closeButton, function(event) {
          event.stopPropagation();

          if (!player.isPlaying()) {
            player.play();
          }

          self.setCookie();

          self.destroyPanel();

        });

        $annotation.on('focus', selectors.input, function(event) {
          event.stopPropagation();
          event.preventDefault();
          if (player.isPlaying()) {
            player.pause();
          }
          $annotation.find(selectors.form).addClass('is-focused');
        });

        $annotation.on('blur', selectors.input, function(event) {
          event.stopPropagation();
          event.preventDefault();
          if (!player.isPlaying()) {
            player.play();
          }
          $annotation.find(selectors.form).removeClass('is-focused');
        });

        $annotation.on('submit', selectors.form, function(event) {
          event.stopPropagation();
          event.preventDefault();

          var email = $annotation.find(selectors.input).val();

          if (validateEmail(email)) {
            self.submitEmail(email);
          }
        });

        $annotation.on('keyup change', selectors.input, function(event) {
          var $el = _cne.$(this);
          if (validateEmail($el.val())) {
            $annotation.find(selectors.submitButton).removeAttr('disabled');
          } else {
            $annotation.find(selectors.submitButton).attr('disabled', 'disabled');
          }
        });

        $annotation.on('click', selectors.submitButton, function(event) {
          event.stopPropagation();
          event.preventDefault();
          $annotation.find(selectors.form).submit();
        });

        $annotation.on('click', selectors.bubble, function(event) {
          event.stopPropagation();

          var $el = _cne.$(this);
          $annotation.addClass('backdrop-active');

          player.pause();

          $el.hide();

          $annotation.find(selectors.form).addClass('is-active');
        });
      },
      destroyPanel: function() {
        player.annotationLoader.destroyAnnotations();
      }
    };


    SubscribePanel.init();

  }
);