tabbit

Wed Aug 30 2017
Copied to clipboard! Copy reply
var styl = `
<style id="lang_select_styles">
    #lang-menu {
        padding-top: 4rem;
        padding-bottom: 4rem;
        text-align: justify;
    }

    #simp_container {
        width: 65em;
        max-width: 90%;
        margin: 0 auto;
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
        position: relative;
    }

    #simp_container label span {
        text-align: left;
        color: white;
        font-size: 1vw;
        margin-top: 2em;
        padding-bottom: .25em;
        letter-spacing: .02em;
    }

    #lang-menu #simp_container button {
        -webkit-appearance: none;
        background: black;
        border: none;
        border-radius: 5px;
        padding: 1em .75em;
        color: white;
        text-transform: uppercase;
        font-family: GothamMedium;
        font-size: 1.05em;
        
        cursor: pointer;
        
        min-width: 17.5em;


        transition-property: all;
        transition-duration: 333ms;

        transform: translateZ(0);

    }

    #lang-menu #simp_container button:hover, #lang-menu #simp_container button:focus, #lang-menu #simp_container button.hangfocus {
        
        transition-property: all;
        transition-duration: 333ms;

        color: black;
        background: gold;

        transform: translateZ(0);
    }

    #simp_container h2 {
        font-family: GothamThin;
        font-size: 2em;
        font-size: 2vw;
        
        color: white;
        text-align: left;

    }

    #simp_container h2 strong {
        font-family: GothamBook;
    }

    #simp_container p {
        font-family: GothamThin;
        font-size: 1em;
        font-size: 1.5vw;
        max-width: 30em;
        color: white;
        text-align: left;
        margin-top: 1.5em;
        line-height: 1.25;
    }

    #simp_selectmenu {
        visibility: visible;
        position: absolute;
        width: 70.2em;
        left: 0em;
        top: 22.7em;
        background: gold;
        padding: 2em;
        z-index: 100;
        box-sizing: border-box;
        max-width: 98vw;
        border-radius: 5px;
        transform: scale(.8) translateY(-20%);
        opacity: 0;
        will-change: transform, opacity;
    }

    #simp_selectmenu.show {
        transition-property: opacity, transform;
        transition-duration: 200ms, 300ms;
        transition-timing-function: ease-out, ease-in;
        opacity: 1;
        transform: scale(1)  translateY(0);
        will-change: unset;
    }

    @media (max-width: 1400px){
        #simp_selectmenu {
            left: -2.5em;
        }
    }

    #simp_selectmenu ul {
        list-style: none;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-around;
        position: relative;
    }

    #simp_selectmenu ul li {
        width: 9.8em;
        cursor: pointer;
        font-weight: 700;
    }

    #simp_selectmenu ul li a {
        text-decoration: none;
        color: inherit;
    }

    #simp_selectmenu ul li small {
        font-size: .8em;
    }

    #simp_selectmenu ul li:nth-child(6n+1){
        width: 11em;
    }
    #simp_selectmenu ul li:nth-child(6n+2){
        width: 9em;
    }

    #simp_selectmenu ul li:nth-child(6n+4){
        width: 8em;
    }

    #simp_selectmenu ul li:nth-child(6n+3){
        width: 9.5em;
    }

    #simp_selectmenu ul li:nth-child(6n+6){
        width: 8em;
    }
    
    #simp_selectmenu ul li:nth-child(-n+6){
        
        margin-bottom: 1.5em;
    }

    #simp_selectmenu ul li:nth-child(n+7){
        font-weight: 100;
        margin: .55em 0;
    }

    #simp_selectmenu ul li:nth-child(6)::after{
        content: '';
        display: block;
        width: 100%;
        position: absolute;
        top: 2em;
        left: 0;
        border-bottom: 1px solid rgba(0,0,0,.1);
    }

    @media (max-width: 1000px){
        #simp_selectmenu ul li {
            width: 50%!important;
            text-align: center;
        }

        #simp_selectmenu ul li:nth-child(6)::after{
            top: 8em;
        }
    }


    



    /* Product Offering */
    .oct_2016_product_square {
        border-radius: 8px;
    }

    .oct_2016_product_info_square {
        text-align: center;
    }

    .oct_2016_product_square_content {
        padding: 0;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }

    .oct_2016_product_square_header{
        border-bottom: none;
        padding: 1.5em;
        background: #ddd;
        line-height: 1.2;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-bottom: 2px solid #ccc;
    }



    .oct_2016_product_square_middle {
        padding: 0 1.5rem 1.5rem 1.5rem;
    }

    .js_oct_2016_product.js_24_month .oct_2016_product_square_header {
        border-radius: 0;
    }

    .oct_2016_best_value {      
        text-transform: uppercase;
        font-family: gothambold;
        background: #000;
        color: #fff;
        padding: 15px;
        display: block;
        margin-bottom: 0;
        position: relative;
        line-height: 17px;

        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    
    }

    .oct_2016_best_value::after, .oct_2016_best_value::before {
        content: none;
    }

    .oct_2016_guarantee_vertical {
        margin-right: 0;
    }



    /* CD Offering */

    .oct_2016_gold_bg .oct_2016_product_square_header {
        display: none;
    }

    .oct_2016_price_container_square_cddl {
        margin-top: 0;
    }
    
    @media (min-width: 560px) {
        .oct_2016_cd_download_buttons {
            width: 241px;
        }
    }

    .oct_2016_gold_bg .oct_2016_msrp_square {
        display: inline-block;
    }

    .oct_2016_gold_bg .oct_2016_big_price_square {
        font-size: 31px;
        vertical-align: baseline;
        color: black;

        font-family: gothambook;
        display: inline-block;

        margin-left: .2em;
    }

    .oct_2016_gold_bg .oct_2016_msrp_square {
        margin-bottom: 0;
        vertical-align: middle;
    }
    .oct_2016_gold_bg .oct_2016_price_container_square_cddl {
       display: inline-block;
    }

    .oct_2016_product_square_middle {
        padding: 1.5rem 1.5rem 1.5rem 1.5rem;
    }

    /* Paring out the demo section */

    #tryit {
        display: none;
    }

    /* Bottom section */
    .container .counter {
        display: none;
    }

    .container .slide.macworld {
        display: none;
    }

    @media only screen and (min-width: 853px) {

        #stats .carousel {
            width: 100%;
            margin: 0;

        }
    }

    #stats {
        background-color: #4c4c4c;
        padding: 4em;
        background-image: url(//www.rosettastone.com/lp/assets/sbsrtest0930/macworld-faded.svg);
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
    }

    #stats .macworldlogo {
        width: auto;
        display: block;
        margin: 1em auto;
    }

    .macworldquote {
        text-align: center;
        color: white;
        font-size: 1.5em;
        font-family: gothamlight;
        margin: 0 auto;
        max-width: 50em;
    }

    .macworldquote strong {
        display: block;
    }



    #footer {
        background: #363534;
        border-top: solid 0.01px #ecc200;
    }



    /*** MOBILE ***/
    @media only screen and (max-width: 743px){
        #lang-menu {
            display: block!important;
        }
        #simp_container {
            padding: 1em;
        }
        #simp_container h2 {
            font-size: 2em;
        }
        #simp_container p {
            font-size: 1.5em;
        }

        #simp_container label span#simp_labl {
            font-size: 1.5em;
            text-align: center;
        }

        #lang-menu #simp_container button {
            margin: 0 auto;
            display: block;
            font-size: 1.5em;
        }

        #simp_selectmenu {
            left: 0;
            width: 100%;
        }

        #simp_selectmenu.show {
            height: 80vh;
            overflow-y: scroll;
        }

        #simp_selectmenu::after {
            content: "▼";
            position: absolute;
            bottom: 0;
            left: 0;
            box-sizing: border-box;
            padding-top: .25em;
            padding-bottom: .25em;
            width: 100%;
            text-align: center;
            font-size: 3em;
            background: linear-gradient(to top, gold, transparent);
        }

        #simp_selectmenu ul li {
            width: 90%!important;
            font-size: 1.5em;
            text-align: center;
        }
        
        #simp_selectmenu ul li:nth-child(6)::after {
            content: none;
        }

    }
</style>`;

var langmenumarkup = `
<div id="simp_container">
    <h2><strong>The only language software<br>with TruAccent&trade;&mdash;</strong>the world's<br>best speech recongition technology.</h2>
    <p>The most trusted language solution for 25 years is now accessible on any device, from anywhere in the world.</p>
    <label>
        <span id="simp_labl">Choose your next language</span>
        <button><strong id="simp_langname">Spanish (Latin America)</strong>&emsp;<b>&#x25bc;</b></button>
    </label>
    <div id="simp_selectmenu" style="visibility: hidden; position: absolute;" role="dialog" aria-labelledby="simp_labl">
        <ul class="top">
            <li tabindex="0" id="esp">Spanish <small>(Latin America)</small></li>
            <li tabindex="0" id="chi">Chinese <small>(Mandarin)</small></li>
            <li tabindex="0" id="eng">English <small>(American)</small></li>
            <li tabindex="0" id="fra">French</li>
            <li tabindex="0" id="deu">German</li>
            <li tabindex="0" id="ita">Italian</li>

            <li tabindex="0" id="ara">Arabic</li>
            <li tabindex="0" id="tgl">Filipino <small>(Tagalog)</small></li>
            <li tabindex="-1" id="ind"><a href="/learn-indonesian">Indonesian</a></li>
            <li tabindex="-1" id="lat"><a href="/learn-latin">Latin</a></li>
            <li tabindex="0" id="por">Portuguese <small>(Brazil)</small></li>
            <li tabindex="0" id="sve">Swedish</li>

            <li tabindex="-1" id="dar"><a href="/learn-dari">Dari</a></li>
            <li tabindex="0" id="grk">Greek</li>
            <li tabindex="0" id="gle">Irish</li>
            <li tabindex="-1" id="pas"><a href="/learn-pashto">Pashto</a></li>
            <li tabindex="0" id="rus">Russian</li>
            <li tabindex="0" id="tur">Turkish</li>

            <li tabindex="0" id="ned">Dutch</li>
            <li tabindex="0" id="heb">Hebrew</li>
            <li tabindex="0" id="jpn">Japanese</li>
            <li tabindex="0" id="far">Persian <small>(Farsi)</small></li>
            <li tabindex="0" id="esc">Spanish <small>(Spain)</small></li>
            <li tabindex="-1" id="uru"><a href="/learn-urdu">Urdu</a></li>
            
            <li tabindex="0" id="ebr">English <small>(British)</small></li>
            <li tabindex="0" id="hin">Hindi</li>
            <li tabindex="0" id="kor">Korean</li>
            <li tabindex="0" id="pol">Polish</li>
            <li tabindex="-1" id="kis"><a href="/learn-swahili">Swahili</a></li>
            <li tabindex="0" id="vie">Vietnamese</li>
            
        </ul>
    </div>
</div>`;

//Menu operations
$('#lang-menu').empty();
$('#violator,#masthead').remove();
$('head').append(styl);
$('#lang-menu').append(langmenumarkup);

//Subscription offering operations
var $offeringcontent = $('.zerofont').children('div:eq(0)').children('div');
    //truncate right side
$offeringcontent.eq(1).remove();
    //clear all copy but language & "Online Subscription"
$('.oct_2016_product_info_square').children(':not(.oct_2016_language_header,.oct_2016_language_subhead)').remove()
    //clear right side content:
$('.meclabs_guarantee_proof').remove();
    //remove border from 24 month
$('.js_oct_2016_product.js_24_month').css('border','none');

//Download/CD offering:
    //adjust headings
$('.meclabs_cd_title').html('<div class="oct_2016_language_header"> Learn <span class="js_langname_1">a language.</span></div>');
$('.oct_2016_gold_bg .oct_2016_product_square:eq(0)').css('display','none');
    //pare down select elements
$('label[for="oct_2016_download"]').text('download');
$('label[for="oct_2016_cd"]').text('cd');
    //swap price/description positions
$('.oct_2016_gold_bg .oct_2016_big_price_square').each(function(i,el){ var $el = $(el).parent(); var $span = $el.next(); $el.detach(); $span.after($el);});
    //Hide 3-month box when a language with a 5-month option is selected
var $lthreebox = $('.oct_2016_gold_bg .oct_2016_product_square:eq(1)');
$lthreebox.css('display','none');
var $lfivebox = $('.oct_2016_gold_bg .oct_2016_product_square:eq(2)');
$(document).on('lang_change', function(ev, data){
    var cddl_count = RSI({cat: data.lang, lvl: 'S5'}).length;
    var topbox = ( (cddl_count && cddl_count > 0) ? $lfivebox : $lthreebox );   
    return $lthreebox.css('display', (topbox == $lfivebox ? 'none' : 'inline-block'));    
});

//Bottom area
$('#stats').empty();
$('#stats').append('<img class="macworldlogo" src="//www.rosettastone.com/lp/assets/sbsrtest0930/macworld-logo.svg">');
$('#stats').append('<p class="macworldquote">With its excellent user interface, clear instructions, wide variety of games and challanges&hellip;<strong>Rosetta Stone has got it going on.&rdquo;</strong></p>');

$('#lang-menu button').on('click', function(e){
    var $t = $(this);
    var $b = $t.find('b');
    var show = !($t.hasClass('menushow'));
    if(!!show){
        $(document).trigger('langmenu_request');
        $b.get(0).innerHTML = 'X';
        $t.addClass('menushow');
    }
    else {
        $(document).trigger('langmenu_dismiss');
        $b.get(0).innerHTML = '&#x25bc;';
        $t.removeClass('menushow');
    }   
});

$(document).on('langmenu_request', function(e){
    var menu = document.getElementById('simp_selectmenu');
    menu.style.visibility = 'visible';
    setTimeout(function(){ menu.classList.add('show') }, 0);
    $('#lang-menu #simp_container button').addClass('hangfocus');
});

$(document).on('langmenu_dismiss', function(e){
    var menu = document.getElementById('simp_selectmenu');
    menu.style.visibility = 'hidden';
    menu.classList.remove('show');
    setTimeout(function(){ menu.classList.remove('show') }, 0);
    $('#lang-menu button').removeClass('menushow').find('b').html('&#x25bc;');
    $('#lang-menu #simp_container button').removeClass('hangfocus');
});

$('#lang-menu li').on('click keypress', function(e){
    
    var inhtml = $(this).html();
    var thisid = this.id;
    !!thisid && $(document).trigger('lang_change', {lang: thisid});
    $('#simp_langname').html(inhtml);
    $(document).trigger('langmenu_dismiss');
    
});

//$(document).trigger('langmenu_request');