tabbit

Mon Jun 10 2019
Copied to clipboard! Copy reply
<template>
  <div>
    <!-- <Overlay v-if='showOverlay' @overlayClick='handleOverlayClick' />-->
    <div class="freetrial-dialog">
      <div class="header">
        <a href='#' class="close" @click.prevent="$emit('closeFreeTrialDialog')">✖</a>
        <h2>What language do you want to learn?</h2>
        <div class="cards" :class="{showall: showall}">
          <a class="card" 
            :href="`${cartLink}/us_en_store_view/freetrial/web/add/sku/${sku}/category_id/${card.code}?pc=${pc}`"
            v-for="card in cards" 
            :key=card.code 
            @click.prevent='handleClick' 
            :data-code=card.code
            :style="{backgroundImage: 'url(/lp/img/freetrial-langs/small/' + card.code +'.png)'}">
            <div>{{  card.name }}</div>
            <div v-if='card.type'>({{ card.type }})</div>
          </a>
        </div>
        <select @change='handleChange'>
          <option 
            
            v-for="card in dropdownLanguages"
            :value=card.code
            :key=card.code>
              {{ card.fullname }}
          </option>
        </select>
      </div>
    </div>
  </div>
</template>

<script>

import Overlay from '~/components/Overlay.vue'
export default {
  components: {
    Overlay
  },
  data ()
  {
    return {
      cartLink: /\.stg|localhost/i.test(window.location.href) ? '//secure.stg.rosettastone.com' : '//secure.rosettastone.com',
      showOverlay: true,
      showall: false,
      sku: 91494,
      pc: 'rockywbt_3m',
      cards: [
        {
          name: 'Spanish',
          type: 'Latin America',
          code: 'esp'
        },
        {
          name: 'Italian',
          code: 'ita'
        },
        {
          name: 'French',
          code: 'fra'
        },
        {
          name: 'English',
          type: 'American',
          code: 'eng'
        },
        {
          name: 'German',
          code: 'deu'
        },
        {
          name: 'See all languages',
          code: 'seeall'
        },
        {
          name: 'Arabic',
          code: 'ara'
        },
        {
          name: 'Chinese',
          type: 'Mandarin',
          code: 'chi'
        },
        {
          name: 'Dutch',
          code: 'ned'
        },
        {
          name: 'English',
          type: 'British',
          code: 'ebr'
        },
        {
          name: 'Filipino',
          type: 'Tagalog',
          code: 'tgl'
        },
        {
          name: 'Greek',
          code: 'grk'
        },
        {
          name: 'Hebrew',
          code: 'heb',
          sku: '',
        },
        {
          name: 'Hindi',
          code: 'hin'
        },
        {
          name: 'Irish',
          code: 'gle'
        },
        {
          name: 'Japanese',
          code: 'jpn'
        },
        {
          name: 'Korean',
          code: 'kor'
        },
        {
          name: 'Persian',
          type: 'Farsi',
          code: 'far'
        },
        {
          name: 'Polish',
          code: 'pol'
        },
        {
          name: 'Portuguese',
          type: 'Brazil',
          code: 'por'
        },
        {
          name: 'Russian',
          code: 'rus'
        },
        {
          name: 'Spanish',
          type: 'Spain',
          code: 'esc'
        },
        {
          name: 'Swedish',
          code: 'sve'
        },
        {
          name: 'Turkish',
          code: 'tur'
        },
        {
          name: 'Vietnamese',
          code: 'vie'          
        },
      ]
    }
  },

  methods: {    
    handleClose (e)
    {
      this.$emit('closeDialog')
      this.showOverlay = false
    },

    /**
     * Handles mobile's <select> change
     */
    handleChange (e)
    {     
      
      let code = e.target.value
      if (!code)
      {
        return
      }

      let selectOption = [...this.dropdownLanguages].filter(c => c.code == code)[0]
      let language = selectOption.fullname
      let href = `${this.cartLink}/us_en_store_view/freetrial/web/add/sku/${this.sku}/category_id/${code}?pc=${this.pc}`
      let ampLanguage = `${selectOption.name} ${selectOption.type || ""}`.trim()
      amplitude.getInstance().logEvent('Learning Language Selected', {'Language' : ampLanguage });
      window.setTimeout(function() {
        window.location.href = e.target.href
      },200)
    },


    /**
     * Handle language selection by clicking on a card/square/etc
     */
    handleClick (e)
    {
      
      e.preventDefault()
      let code = e.target.dataset.code
      let href = e.target.href
      // IE11 doesn't support dataset
      if (typeof code == 'undefined')
      {
        code = (e.target || e.srcElement).getAttribute('code')
      }
      if (typeof href == 'undefined')
      {
        href = (e.target || e.srcElement).getAttribute('href')
      }

      if (code == 'seeall')
      {
        this.showall = true
        this.cards = [...this.cards.filter( o => o.code != 'seeall')]
      }
      else
      {
        let language = this.cards.filter(c => c.code == code)[0]
        let ampLanguage = language.name
        ampLanguage += language.type ? ` ${language.type}` : ''        
        amplitude.getInstance().logEvent('Learning Language Selected', {'Language' : ampLanguage });
        window.setTimeout(function() {
          window.location.href = e.target.href
        },100)
      }
    }
  },

  computed: {
    dropdownLanguages ()
    {     
      let langs= [...this.cards].slice().map(c => {        
        c.fullname = `${c.name}`
        c.fullname += c.type ? ` (${c.type})` : ''         
        return c
      })      
      .filter(c => c.code != 'seeall')
      
      langs.unshift({fullname: 'More languages...', code: ''})
      return langs
      
    }    
  }

}
</script>


<style lang="stylus" scoped>
  .freetrial-dialog
    max-width 340px
    position fixed
    left 0
    top 105px
    z-index 2
    font-smoothing subpixel-antialiased
    background #F4F4F4
    border-top 4px solid #F0C433
    padding 1.5em
    z-index 52
    left 50%
    top 50%
    width 90%
    transform translate(-50%, -50%)
    @media $tablet
      left 50%
      top 50%
      
      width 100%
      max-width 737px
      top 50%
    @media $desktop
      width 860px
       
    
  .header
    position relative
  a.close
    position absolute
    top -10px
    right 0
    font-size 2em
    color #262626
    text-decoration none
  
  
    
  .card:nth-child(n+7)
	  display none
	
  .showall
    .card
      &:nth-child(n+7)
        display block
  .cards
    display flex
    flex-wrap wrap
    justify-content space-between
    margin-top 2em
    
  .card
    width 131px
    height 122px
    text-decoration none
    color #262626
    text-align center
    margin 0 10px 10px 0
    font-size 14px
    height 135px
    padding-top 13px
    box-sizing border-box
    box-shadow 3px 3px 3px rgba(0,0,0,0.2)
    background-color #fff
    background-repeat no-repeat
    background-position bottom left 
    &[data-code='seeall']
      display none
      text-decoration none
      
    @media $tablet
      width 15%
      text-align center
      margin 0 10px 10px 0
      font-size 14px
      height 135px
      
  
      & > div
        pointer-events none
      &:nth-child(6n)
        margin-right 0
      // remove margin bottom from last 7 cards
      &:nth-last-child(-n+7)
        margin-bottom 0
      &[data-code='seeall']
        background #0098DB
        color #fff
        text-align left 
        font-weight bold
        padding 10px 0 0 10px
        box-sizing border-box
        display flex
        // Some card bgs require size handling because images aren't proportional...
        // &[data-code='fra'],
        // &[data-code='eng'],
        // &[data-code='esc'],
        // &[data-code='ebr'],
        // &[data-code='tgl'],
        // &[data-code='heb'],
        // &[data-code='gle'],
        // &[data-code='jpn'],
        // &[data-code='far'],
        // &[data-code='sve']
        //   background-size 60%
        // &[data-code='por']
        //   background-size 34% 70%
        // &[data-code='chi'],
        // &[data-code='ned']
        //   background-size 50%
      @media $desktop
        max-width 840px
  
      

  select
    background-color #fff
    padding 1em
    width 100%
    background url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDIxLjEuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzMCAzMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzAgMzA7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHRpdGxlPkFydGJvYXJkIDE8L3RpdGxlPgo8cG9seWdvbiBwb2ludHM9IjE1LDMwIDMwLDAgMCwwICIvPgo8L3N2Zz4K')
    background-repeat no-repeat
    background-size 2%
    background-position 95% center
    margin-top 1em
    appearance  none
    @media $tablet
      display none
</style>