Mon Jun 10 2019
Copied to clipboard! Copy reply
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320
  • 321
  • 322
  • 323
  • 324
  • 325
  • 326
  • 327
  • 328
  • 329
  • 330
  • 331
  • 332
  • 333
  • 334
  • 335
  • 336
  • 337
  • 338
  • 339
  • 340
  • 341
  • 342
  • 343
  • 344
  • 345
  • 346
  • 347
  • 348
  • 349
  • 350
  • 351
  • 352
  • 353
  • 354
  • 355
  • 356
  • 357
  • 358
  • 359
  • 360
  • 361
  • 362
  • 363
  • 364
  • 365
  • 366
  • 367
  • 368
  • 369
  • 370
  • 371
  • 372
  • 373
  • 374
  • 375
  • 376
  • 377
  • 378
  • 379
  • 380
<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>