tabbit

Thu Aug 18 2016
Copied to clipboard! Copy reply
<!-- USAGE: 
  Have Language and Email(from URL, etc.): showConsumerDemo('deu', true/*:hasemail*/) :: Shows Demo Immediately
  Have Language But No Email  showConsumerDemo('deu', null/*:hasemail*/) :: Shows Language Picker, with Lang Pr-Selected, then takes email, then shows demo
  Have Email But No Language showConsumerDemo(null, true/*:hasemail*/) :: Shows Language Picker (with cleared selection), on pick starts demo
  Have Neither:  showConsumerDemo(null, null/*:hasemail*/) :: Shows Language Picker (with cleared selection), then takes email, then shows demo
-->
<style>
  @font-face {
    font-family: 'effra';
    src: url("../assets/effra_std.woff") format("woff");
  }

  @font-face {
    font-family: 'efframedium';
    src: url("../assets/effra_md.woff") format("woff");
  }

  @font-face {
    font-family: 'effrareg';
    src: url("../assets/effra_rg.woff") format("woff");
  }

  .__Consumer_demooverlay {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2000;
      background-color: rgba(0,0,0,.7);
      box-sizing: border-box;
      max-height: 100vh;
      min-width: 100%;
      min-height: 100vh;
      overflow-y: scroll;
      overflow-x: hidden;
      padding: 5rem 0 5rem 0;
      cursor: pointer;
  }

  .__Consumer_demooverlay .__Consumer_demoiframe {
      height: 80vh;
      width: 80vw;
     
      display: block;
      margin: 0 auto;
      overflow: hidden;
  }

  .__Consumer_demooverlay .form-wrapper {
      background: #ffcb00;
      color: #222;
      font-family: effralight, Helvetica;
      font-weight: bold;
      position: relative;
      max-width: 85%;
      margin: 0 auto 0 auto;
      padding: 1rem;
  }

  .__Consumer_demooverlay .form-wrapper h2 {
      text-align: center;
      margin-top: 0;
      margin-bottom: .5rem;
      font-family: effra;
      font-weight: 100;
      font-size: 1.5rem;
  }

  .__Consumer_demooverlay .form-wrapper label {
      text-align: center;
      margin-top: 0;
      margin-bottom: .5rem;
      font-family: effrareg;
      font-weight: 100;
      font-size: 1rem;
      position: relative;
  }

  .__Consumer_demooverlay .form-wrapper label span{
      text-align: center;
      display: block;
  }

  .__Consumer_demooverlay .form-wrapper select {
      padding: .33rem;
      margin-top: .5rem;
      font-size: 1.33rem;
      font-family: effrareg;
      position: relative;
      width: 100%;
      background-size: 3em auto;
      background-position-x: calc(100% + 1.4em);
      background-position-y: .05em;
      background-repeat: no-repeat;
      background-image: url(http://m.rosettastone.com/assets/arrowcircles.png);
      border: none;
  }

  .__Consumer_demooverlay .form-wrapper input[type="text"]{
      padding: .33rem;
      margin-top: .5rem;
      font-size: 1.33rem;
      font-family: effrareg;
      position: relative;
      width: 100%;
      box-sizing: border-box;
      margin-bottom: .5rem;
      border: none;
  }

   .__Consumer_demooverlay .form-wrapper input[type="submit"]{
      padding: .33rem;
      margin-top: .5rem;
      font-size: 1.33rem;
      font-family: effrareg;
      position: relative;
      width: 100%;
      box-sizing: border-box;
      margin-bottom: .5rem;
      border: none;
      background-color: rgb(71, 120, 0);
      color: white;
  }

  .__Consumer_demooverlay .form-wrapper .input-text-wrapper {
      font-size: .8rem;
      font-family: effra;    
  }

  .__Consumer_demooverlay .form-wrapper .input-submit-wrapper {
      font-size: .8rem;
      font-family: effra;  
  }


  .__Consumer_demooverlay .form-wrapper .language-select {
     position: relative;

  }
  
</style>
<div class="__Consumer_demooverlay" style="display: none;">
  <img class="democlose" alt="close this form" src="../assets/close.png" style="width: 2em; position: absolute; top: 5px; right: 5px; cursor: pointer;"/>
  <div class="form-wrapper">
      <form>
          <div class="language-select">
              <h2>Ready for a <strong>FREE</strong> Demo?</h2>
              <label for="langselect">
                  <span>Please select a language below</span>
                  <select name="lang" id="langselect">
                    <option value="" disabled selected>Select Language</option>
                    <option value="esp">Spanish (Latin America)</option>
                    <option value="eng">English (American)</option>
                    <option value="fra">French</option>
                    <option value="ita">Italian</option>
                    <option value="deu">German</option>
                    <option value="esp">Spanish (Spain)</option>
                  </select>
              </label>
          </div>

          <div id="input-wrapper" style="display: none;">
              <div class="input-text-wrapper">
                  <input type="text" name="email" placeholder="Enter your email address">
                  <div style="color:red; display:none;" id="email_error_message">Please enter a valid email address.</div>
                  <div style="color:red; display:none;" id="spelling_error_message">Please check spelling and ensure this email exists.</div>
                  We guarantee 100% privacy.<br>
                  Your information will not be shared.
              </div>
              <div class="input-submit-wrapper">
                  <input type="submit" value="Start Your Free Demo">
                  *No credit card required.
              </div>
          </div> <!-- /input-wrapper -->

      </form> <!-- /form -->
  </div>  
</div>
<script defer>
 window.showConsumerDemo = function _showConsumerDemo(lang, gotemail) {
    var langtocode = {
      'deu': 'de',
      'ita': 'it',
      'fra': 'fr',
      'esp': 'es',
      'esc': 'es',
      'eng': 'en'
    };

    _lang = lang in langtocode ? langtocode[lang] : 'en';
    var _demosources = {
        "en": "http://resources.rosettastone.com/CDN/us/rs-i-demo-6/?lang=en-en",
        "fr": "http://resources.rosettastone.com/CDN/us/rs-i-demo-6/?lang=en-fr",
        "it": "http://resources.rosettastone.com/CDN/us/rs-i-demo-6/?lang=en-it" ,
        "de": "http://resources.rosettastone.com/CDN/us/rs-i-demo-6/?lang=en-de",
        "es": "http://resources.rosettastone.com/CDN/us/rs-i-demo-6/?lang=en-es"
    };
    var demosource = _demosources[_lang] || _demosources['en'];
    
    var overlay = $('.__Consumer_demooverlay');
    
    overlay.css('display','block');
    overlay.css('top', (window.scrollY || window.pageYOffset || 0) + 'px');
    $('html,body').css('overflowY', 'hidden');
    $('html,body').css('overflowX', 'hidden');

    //Clear & Reset Handlers
    var reslang = $.Deferred().resolve('eng');
    var ds = $.Callbacks('unique');
    var em_submit = $.Callbacks('unique');
    $('.__Consumer_demooverlay form').off('.ConsumerDemo');
    $('.__Consumer_demooverlay form').on('change.ConsumerDemo', function(e){
      //console.log('%O', e);
      //console.log(e.target.value);
      e.target && e.target.value && ds.fire(e.target.value);
    });
    $('.__Consumer_demooverlay form').on('submit.ConsumerDemo', function(e){
      //console.log('%O', e);
      var candidate_email = $(e.target).find('input[type="text"]').val() || '';
      if(!candidate_email.match(/.@.+\../ig)){
        $('#email_error_message').slideDown();
      }
      else {
        //console.log('verifying email');
        verify_real_email(candidate_email,
          function _verifysuccess(){
            console.log('verify succeeds');
            $('#email_error_message').slideUp();
            $('#spelling_error_message').slideUp();
            reslang.then(function(v){ submitEmail(candidate_email, v, em_submit); })
          },
          function _verifyfail(){
            console.log('verify fails');
            $('#email_error_message').slideUp();
            $('#spelling_error_message').slideDown();
          }
        );
      }
      return false; //preventDefault submit
    });
    

    function closeForms(){
      $('.__Consumer_demooverlay .form-wrapper').css('display','none');
    }

    function runDemo(demosource, overlay) {
      closeForms();
      if(window.innerWidth && window.innerWidth >= 900){
        var iframe = $('<iframe class="__Consumer_demoiframe" src="' + demosource + '" scrolling="no"></iframe>');
        overlay.append(iframe);
        $(document).trigger('demo_start');
      }
      else {
        $(document).trigger('demo_start');
        setTimeout((function(){ window.location.href = this.dest }).bind({dest: demosource}), 333);
        //Give UI 1/3 s to reports
      }
      
    }

    var src = _demosources['en'];
    if(!!gotemail && !!lang){
      runDemo(demosource, overlay);
    }
    else if(!!gotemail && !lang) {
      
      $('.__Consumer_demooverlay form option').removeProp('selected');
      $('.__Consumer_demooverlay form option[disabled]').prop('selected', true);

      ds.add(function(v){
        src = _demosources[langtocode[v] || 'en'];
        reslang = $.Deferred().resolve(v);
        runDemo(src, overlay);  
      });
    }
    else if(!gotemail && !!lang) {
      //console.log('!email & lang');
      src = demosource;
  
      $('.__Consumer_demooverlay form option').removeProp('selected');
      $('.__Consumer_demooverlay form option[value="' + lang + '"]').prop('selected', true);
      $('#input-wrapper').slideDown();

      ds.add(function(v){
        src = _demosources[langtocode[v] || 'en'];
        reslang = $.Deferred().resolve(v);
        $('#input-wrapper').slideDown();
      });

      em_submit.add(function(){
        runDemo(src, overlay);    
      });
    }
    else {
      $('.__Consumer_demooverlay form option').removeProp('selected');
      $('.__Consumer_demooverlay form option[disabled]').prop('selected', true);

      ds.add(function(v){
        src = _demosources[langtocode[v] || 'en'];
        reslang = $.Deferred().resolve(v);
        $('#input-wrapper').slideDown();
      });

      em_submit.add(function(v){
        if(v instanceof Error){
          
        }
        else {
          runDemo(src, overlay);
        }    
      });
        
    }


    //$('.democlose').css('top', $('.democlose').parent().find('iframe').offset().top - 20 + 'px');
    //
    //$('.democlose').css('top', 60 + 'px');
    //$('.democlose').css('left', $('.democlose').parent().find('iframe')[0].getBoundingClientRect().right - 10 + 'px');
    
  };

  window.hideConsumerDemo = function _hideConsumerDemo() {
    //console.log('hiding demo');
    $('.__Consumer_demoiframe').remove();
    $('.__Consumer_demooverlay').css('display','none');
    $('html,body').css({'overflowY': 'scroll', 'width': '100vw', 'overflowX': 'hidden', 'height': 'auto'});
    $(document).trigger('Consumer_closedemo');
  };

  $('.__Consumer_demooverlay').on('click.Consumer', function hidedemo(e){
    if( $(e.target).hasClass('__Consumer_demooverlay') || $(e.target).hasClass('democlose') ) {
      hideConsumerDemo();
    }
     
  });

  //*****EMAIL COLLECTION AND VALIDATION********

  //Engage Analytics Listeners for Demo:
  jQuery(document).ready(function engageanalytics() {
      jQuery(document).trigger('demo_events_version', {
          version: 1
          ,description: ''
          ,standard: 'http://tabbit.org/%E2%98%8D%E2%98%B9W'
      });
  });




  ///*****EMAIL COLLECTION AND VALIDATION********


  /**************************************************
  BRITEVERIFY EMAIL VERIFICATION
  ***************************************************/


  function get_token(){
      window.briteverifyToken = false;

      var form_token = '4047df1c-5078-4e96-b335-f61aa2b92891'; // public key
      var url = 'https://forms-api-v1.briteverify.com/api/submissions/view.json?callback=getBriteverifyToken&form_token='+form_token+'&_='+Date.now();

      // append script to body to get cross-domain jsonp data
      var script = document.createElement('script');
      script.src = url;
      document.body.appendChild(script);

      window.getBriteverifyToken = function(data){
          // console.log(data);
          // console.log('token: '+data.token);

          window.briteverifyToken = data.token;

          delete window.getBriteverifyToken;
          document.body.removeChild(script);
      }
  }
  // if the demo hasn't already been taken, get an email verification token
  if(!document.cookie.match(/demotaken/i)) {
      get_token();
  }

  function verify_real_email(email,success,failure){
      
      if(!success){success = function(){};}
      if(!failure){failure = function(){};}
      if(window.briteverifyToken){

          var token = window.briteverifyToken;
          var url = 'https://forms-api-v1.briteverify.com/api/submissions/verify.json?callback=briteverify&form_token=4047df1c-5078-4e96-b335-f61aa2b92891&token='+token+'&email='+email+'&_='+Date.now();

          var script = document.createElement('script');
          script.src = url;
          document.body.appendChild(script);

          // if the script url doesn't work (maybe they changed the api)
          script.onerror = function(e){
              // console.log('onerror');
              // console.log(e);

              // ignore verification and move on
              success();
          };
          // script.onload = function(){this.remove();}

          window.briteverify = function(data){
              try{
                  // console.log(data);
                  // console.log('validity status: '+data.status);

                  // if email is valid
                  if(data.status!=='invalid'){
                      success();
                  }
                  // if email is invalid
                  else{
                      // error handling
                      failure();
                  }

                  document.body.removeChild(script);
              }
              catch(e){
                  // if error, ignore verification and move on
                  // console.log('jsonp callback error');

                  success();
              }
              delete window.briteverify;
          }
      }
      else{
          // if no token, ignore verification and move on
          // console.log('no token');

          success();
      }
  }


  /**************************************************
  BRITEVERIFY EMAIL VERIFICATION
  ***************************************************/






/**************************************************
  EMAIL SUBMISSION
  ***************************************************/

  function submitEmail(email,lang,fireon){


    $(document).trigger('demo_email', {
      email: email,
      is_offer: false
    });

    var baseURL = (window.location.href.search(/(\.stg\.)|(local)/i)>-1 ?
          'http://www.stg' : 
          'http://www') 
          + '.rosettastone.com/?redirect2mobile=no&p_p_id=rosettaajaxsubmit_WAR_rosettaajaxsubmitportlet&p_p_lifecycle=2&data=';

    function grabUrlParam( name ) {
      name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
      var regexS = "[\\?&]"+name+"=([^&#]*)";
      var regex = new RegExp( regexS );
      var results = regex.exec( window.location.href );
      if( results == null )
      return null;
      else
      return results[1];
    }

    var data = {
        email : email,
        demo_lang : lang,
        cis_name : 'mobile demo',
        website: 'US_WEBSITE',
        form_type : 'demo',
        demo_type : 'PE',
        form_url : 'hub-rs',
        cid: grabUrlParam('cid') || '',
        newsletter_type : "DTC_mobile-demo"
    };

    var request = jQuery.ajax({
        contentType: "application/json; charset=utf-8",
        url: baseURL + encodeURIComponent(JSON.stringify(data)),
        type: "GET",
        data:data
    });

    
    request.done(function(msg) {
        if (/"cisFlag":"true"/.test(msg)) {
            // Doty's demo pixel
            $('body').append('<img height="1" width="1" style="border-style:none;" alt="" src="//www.googleadservices.com/pagead/conversion/1041440066/?label=WzGCCNzOy1gQwrrM8AM&amp;guid=ON&amp;script=0"/>')
            // record the email in a cookie that expires in 30 days
            document.cookie = 'curEmailIdsc='+email+'; max-age='+60*60*24*30+';';
            document.cookie = 'demotaken=1; max-age='+60*60*24*30+';';
            fireon && typeof fireon.fire == 'function' && fireon.fire('success');
        }else{
            fireon && typeof fireon.fire == 'function' && fireon.fire(new Error('Problem submitting email to: ' + baseURL));
        }

    })

    

  }

/**************************************************
  /EMAIL SUBMISSION
  ***************************************************/

</script>