tabbit

Thu Jun 08 2017
Copied to clipboard! Copy reply
#set ($velocity_templates_path = "velocity-templates-theme_SERVLET_CONTEXT_/templates")
#parse("$velocity_templates_path/init.vm")

#set($cid = $parameters.get('cid'))

## Get masthead template from 'video' param, else default to first template
#set($video = $parameters.get('video'))
#set($tpl = $template.getSiblings().get(0))
#foreach ($t in $template.getSiblings())
#if ($t.data == $video) #set($tpl = $t) <!-- $t --> #end
#end

<script src="http://www.rosettastone.com/lp/liferay/blueapron/jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="http://www.rosettastone.com/lp/liferay/blueapron/colorbox.css">
<link rel="stylesheet" href="http://www.rosettastone.com/lp/liferay/blueapron/mobile.css" media="screen and (max-width:767px)">

<div class="mh-wrap">
  <div class="mobile-masthead">
    <img src="${tpl.mobile-masthead.data}">
    <a class="play-video" href="javascript:void"></a>
  </div>
  <div class="mh-maxwidth">
    <div class="play-video">
      <div class="play-btn">
        <img src="http://www.rosettastone.com/lp/liferay/blueapron/play-arrow.svg">
      </div>
      <div class="play-desc">
        ${tpl.play-button-copy.data}
      </div>
    </div>
    <div class="mh-demo-box">
      <h1>Ready for a <span>FREE</span> Demo?</h1>
      <div class="mh-lang-dropdown"><span id="sel-lang">Select a language</span>
        <div class="mh-lang-dropdown-list">
          <ul id="lang-list">
            <li><a class="en-en" data-code="ENG" href="javascript:void(0)">English (American)</a></li>
            <li><a class="en-fr" data-code="FRA" href="javascript:void(0)">French</a></li>
            <li><a class="en-de" data-code="DEU" href="javascript:void(0)">German</a></li>
            <li><a class="en-it" data-code="ITA" href="javascript:void(0)">Italian</a></li>
            <li><a class="en-es" data-code="ESP" href="javascript:void(0)">Spanish (Latin America)</a></li>
          </ul>
        </div>
      </div>
      
      <input name="email" type="email" placeholder="Enter your email address"></input><!--
      --><a href="javascript:void(0)" id="start-demo-btn">Start Demo</a>
      <div class="error">Please enter a valid email address</div>
      <div class="terms">
        <div class="terms-left">
          We guarantee 100% privacy.<br />
          Your information will not be shared.
        </div><!--
        --><div class="terms-right">
          No credit card required.
        </div>
      </div>
    </div>
  </div>
</div>

## Media queries - global font size:
<style>
@media screen and (min-width:1280px) {
  body {
    font-size: 14px;
  } 
}
@media screen and (min-width:1024px) and (max-width:1279px) {
  body {
    font-size: 13px;
  } 
}
@media only screen and (min-width:960px) and (max-width:1023px) {
  body {
    font-size: 12px;
  } 
}
@media only screen and (min-width:768px) and (max-width:959px) {
  body {
    font-size: 11px;
  } 
}
</style>

<style>
.mh-wrap {
    background: url("${tpl.masthead.data}") no-repeat center;
    background-size: cover;
    background-position: 40% 50%;
    padding: 4% 0;
    font-family: "GothamBook";
}
.mobile-masthead {
  position: relative;
  margin-bottom: 1em;
  display:none;
}
.mobile-masthead a {
  display: block !important;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.mobile-masthead img {
  width:100%;
}
.mh-maxwidth {
  width:97%;
  max-width: 1280px;
  margin:0 auto;
  position:relative;
}
div.play-video {
  position:absolute;
  max-width: 290px;
  right:46%;
  width:25%;
  font-size: 1.3em;
  cursor: pointer;
}
div.play-video > div {
  display: inline-block;
  vertical-align: middle;
}
.play-btn {
    width: 25%;
    padding-bottom: 25%;
    background: #0098db;
    border-radius: 392px;
    text-align: center;
    position: relative;
    opacity: 0.8;
    transition: opacity 0.3s, box-shadow 0.3s;
}
div.play-video:hover .play-btn {
  opacity: 1;
  box-shadow:0 0 0px 0.3em #fff inset;
}
.play-btn img {
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    width: 33%;
}
.play-desc {
    width: 69%;
    margin-left: 2%;
}
.mh-demo-box {
  width:38%;
  max-width: 330px;
  margin-left:auto;
  background:rgba(255,255,255,0.75);
  padding: 2%;
}
.mh-demo-box h1 {
  text-align: center;
  margin-bottom: 1em;
}
.mh-demo-box h1 span {
  color:#0098db;
  font-family: "GothamBold";

}
.mh-lang-dropdown {
  background: #fff;
  border:1px solid #bbb;
  line-height: 1;
    padding: 0.8em;
  font-family: "GothamMedium";
  margin-bottom: 0.8em;
  position: relative;
  cursor: pointer;
}
.mh-lang-dropdown::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    right: 1em;
    margin-top: 0.25em;
    border: 0.5em solid transparent;
    border-top: 0.5em solid #363636;
}
.mh-lang-dropdown-list {
  display:none;
  position: absolute;
  top:2.6em;
  left:0;
  width:100%;
  background: #fff;
  z-index: 1;
}
.mh-lang-dropdown-list ul li {
  list-style-type: none;
  padding-left: 1em;
  
}
.mh-lang-dropdown-list ul li a {
  text-decoration: none;
  display: block;
  padding: 0.8em 0;
  color: #363636;
}
.mh-lang-dropdown-list ul li:hover {
  background:#0098db;
}
.mh-lang-dropdown-list ul li:hover a {
  color:#fff;
}
.mh-demo-box input[type="email"] {
  width: 60%;
    margin-right: 3%;
    font-family: "GothamBook";
    padding: 0.8em;
    font-size:1em;
    background: #fff;
    border: 1px solid #bbb;
    box-sizing: border-box;
}
#start-demo-btn {
  background: #0098db;
    border: 1px solid #0098db;
    border-radius: 3px;
    display: inline-block;
    width: 37%;
    color: #fff;
    transition: background 0.3s;
    padding: 0.8em;
    line-height: 1;
    font-family: "GothamMedium";
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
}
#start-demo-btn:hover {
  background:#0088cb;
}
.error {
    color: #B20000;
    line-height: 1;
    font-size: 0.8em;
    padding: 0.3em 0;
    font-family: GothamMedium;
    display: none;
    position: absolute;
}
.terms {
  padding-top: 1.5em;
}
.terms > div {
  font-size: 0.8em;
  vertical-align: top;
  display: inline-block;
  line-height: 1.5;
  box-sizing:border-box;
}
.terms-left {
  width:66%;
}
.terms-right {
  width: 34%;
  text-align: right;
}
</style>


<style>
## Custom masthead CSS from webcontent
${tpl.custom-css.data}
</style>

<script>

var demoLang = "en-es";


$(document).ready(function(){

    if (mobileCheck()) {
    $("li a.en-en").parent().remove() //no english on mdot demo
    }
  // Query String lang select 
    function getLang() {
      var qs = window.location.search;
      var lang = qs.substr(qs.indexOf("lang=")+5,3);
      var langMap = {"eng":"en-en","esp":"en-es","deu":"en-de","fra":"en-fr","ita":"en-it"};

      lang = langMap[lang];
      demoLang = typeof lang !== 'undefined' ? lang : 'en-es';
      $("#sel-lang").html($("."+lang).html());
      $("#sel-lang").attr("data-code", $("."+lang).attr("data-code"));
    }
    getLang();
  // Dropdown functionality
    function dropdown(e) {
      var container = $(".mh-lang-dropdown");
        if (container.is(e.target)||container.children().first().is(e.target)) {
          $(".mh-lang-dropdown-list").toggle(); //toggle dropdown
          e.preventDefault();
        } else if (container.has(e.target).length === 0) {
            $(".mh-lang-dropdown-list").hide(); //close on click outside
        }
    }
    document.addEventListener('touchstart',function(e){dropdown(e)});
    document.addEventListener('click',function(e){dropdown(e)});

  // Select lang from dropdown
    function selectLang(e) {
      e.preventDefault()
      $("#sel-lang").html(e.target.innerHTML);
      $("#sel-lang").attr("data-code", $(e.target).attr("data-code"));
      $(".mh-lang-dropdown-list").hide();
      demoLang = e.target.className;
      return false;
    }
    document.getElementById("lang-list").addEventListener('touchstart',function(e){selectLang(e)});
    document.getElementById("lang-list").addEventListener('click',function(e){selectLang(e)});

  // Submit form
    function demoSubmit(e) {

      e.preventDefault();
      $(document).trigger('demo_events_version', {
        version: 1
        ,description: ''
        ,standard: 'http://tabbit.org/%E2%98%8D%E2%98%B9W'
      });
      var email = $("input[name=email]").val();
      var error = $(".error");
      if ($("#sel-lang").text()=="Select a language") {
        $(".mh-lang-dropdown").effect( "pulsate", {times:1}, 300);
        return false;
      }
      //don't check email if it's already in cookies
      if (RSUI.util.getCookie("rsDemoEmail") || (parameterExists("noemail") && parameterMatches("noemail","true"))) { 
        return openDemo(demoLang);
      }
      if (!validateEmail(email)) {
        invalidEmail();
        return false;
      }
      verify_real_email(email, validEmail, invalidEmail);
    }

    function invalidEmail() {
        var error = $(".error");
        error.text("Please enter a valid email address");
        error.slideDown();
        return false;
    }
    function validEmail() {
      var email = $("input[name=email]").val();
      jQuery.when(submitEmailToEC(email, demoLang)).then(openDemo(demoLang));  
    }
    document.getElementById("start-demo-btn").addEventListener('touchstart',function(e){demoSubmit(e)});
    document.getElementById("start-demo-btn").addEventListener('click',function(e){demoSubmit(e)});

  // Validate Email
    function validateEmail(email) {
      var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(email);
    }

  /**************************************************
  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(!RSUI.util.getCookie('demotaken')) {
    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();
    }
  }

  // Submit email to EC
  function submitEmailToEC(email, langCode) {
      var defer = jQuery.Deferred()
        var baseURL = (window.location.href.search(/(\.stg\.)|(local)/i)>-1 ?
            'http://www.stg' : 
            'https://www') 
            + '.rosettastone.com/?redirect2mobile=no&p_p_id=rosettaajaxsubmit_WAR_rosettaajaxsubmitportlet&p_p_lifecycle=2&data=';

        var cid = window.location.href.search(/cid/i)>=1 ?
            window.location.href.replace(/cid/i,'cid').split('cid=')[1].split('&')[0]
            :'';
        var demo_type = "${cid}".match(/-rd-/) ? "radio" : "Demo_Desktop";

      var map = {
          'en-fr' : 'fra',
          'en-de' : 'deu',
          'en-it' : 'ita',
          'en-en' : 'eng',
          'en-es' : 'esp'
      }
      var data = {
          email : email,
          demo_lang : map[langCode],
          cis_name : 'mobile demo',
          website: 'US_WEBSITE',
          form_type : 'demo',
          demo_type : demo_type,
          form_url : window.location.pathname,
          newsletter_type : "Top_Landing_FreeDemo",
          cid : cid
      }

      var request = jQuery.ajax({
          contentType: "application/json; charset=utf-8",
          url: baseURL + encodeURIComponent(JSON.stringify(data)),
          type: "GET",
          data:data,
          dataType: "jsonp"
      });
      $(document).trigger('demo_email', {
          email: email
          ,is_offer: false
      });

      request.done(function(msg) {
          if (msg[0].cisFlag == true) {
              // 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
              RSUI.util.setCookie('rsDemoEmail', email, 1, 30 * 1000 * 60 * 60 * 24);

              $('#email-demo').hide()

              defer.resolve('success')
          }

      })
      return defer.promise()
  }

  // Launch Demo
    function openDemo(lang) {
        lang = typeof lang !== 'undefined' ? lang : 'en-es';
        $(document).trigger('demo_language', {language: $(".sel-lang").text(), lang_code: $(".sel-lang").attr("data-code")});
        if ($("html").hasClass("mobile")) {

            $(document).trigger('demo_start', {
                version: 'm1'
                ,version_description: 'mobile_demo_2015'
                ,start_time: new Date()
            });
              var lang_name = {
            'en-fr' : 'french',
            'en-de' : 'german',
            'en-it' : 'italian',
            'en-en' : 'spanish', // no english on new demo
            'en-es' : 'spanish'
          }
          setTimeout(function() {
              window.location.href = 'http://m'+(~window.location.host.indexOf('stg')?'.stg':'')+'.rosettastone.com/demo/?lang=' + lang_name[lang];
          }, 1500);
        } else {
            $(document).trigger('demo_start', {
                version: 'd4'
                ,version_description: 'desktop_demo'
                ,start_time: new Date()
            });
            var demoFrame = ""
            + "<iframe "
            + " id='demoframe'"
            + " src='http://resources"+(~window.location.host.indexOf("stg")?".stg":"")+".rosettastone.com/CDN/us/rs-i-demo-6/?lang=" + lang + "'"
            + " width='100%'"
            + " height='100%'"
            + " frameborder='0'"
            + " scrolling='no'"
            + "></iframe>";
            window.setTimeout(function(){
              jQuery.colorbox({
                  iframe: false,
                  html: demoFrame,
                  innerWidth: '90%',
                  innerHeight: '90%',
                  onCleanup: function() {
                    console.log("close");
                      $('#demoframe').attr('src', 'foo');
                      $('#demoframe').remove();
                  }
              });
            },1);

        }
    }
  // Open Video
    $(".play-video").click(function(){
      if (mobileCheck()) {
            setTimeout(function() {
                window.location.href = '${tpl.video.data}'
            }, 1500);
            return false;
        }
      var yt = '<iframe width="760" height="428" src="${tpl.video.data}" frameborder="0" allowfullscreen></iframe>'
      jQuery.colorbox({
                iframe: false,
                html: yt,
                innerWidth: '760',
                innerHeight: '428',

        });
    });

  //Check if mobile device
    function mobileCheck() {
      var check = false;
      (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
      return check;
    }
});

function parameterMatches(param,val){
  var reg = new RegExp('[?&]'+param+'='+val+'(?=[&]|$)','i');
  return !!window.location.search.match(reg);
}

function parameterExists(param){
  var reg = new RegExp('[?&]'+param+'=','i');
  return !!window.location.search.match(reg);
}

function getParameter(param){
  var reg = new RegExp('[?&]'+param+'=([^&]+)','i');
  return parameterExists(param) ? window.location.search.match(reg)[1] : '';
}

// bypass email submission
$(document).ready(function(){
  if(parameterExists("noemail") && parameterMatches("noemail","true")){
    $('input[name=email]').remove();
    $('#start-demo-btn').css('width','100%')
  }
})
</script>