Mon Oct 21 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
<template>

  <div class="language-container">
    <h4>Select a Language</h4>
    <div class="languages">
      <ul>
        <li><a href="/buy-spanish">Buy Spanish <span>(Latin America)</span></a></li>
        <li><a href="/buy-french">Buy French</a></li>
        <li><a href="/buy-italian">Buy Italian</a></li>
        <li><a href="/buy-german">Buy German</a></li>
        <li><a href="/buy-english">Buy English <span>(American)</span></a></li>
      </ul>
      <div class="mobile-select">
        <!-- <div>More languages...</div> -->
        <select @change="handleChange">
          <option 
            :value=lang.code
            v-for="(lang, key) in languages.filter(c => !/esp|fra|ita|deu|eng/i.test(c.code))"             
            :key=key>
              {{ lang.name + (lang.region? ` (${lang.region})` : '') }}
          </option>
        </select>
      </div>
      <ul>                  
        <li><a href="/buy-arabic">Arabic</a></li>
        <li><a href="/buy-chinese">Chinese <span>(Mandarin)</span></a></li>              
        <li><a href="/buy-dutch">Dutch</a></li>
        <li><a href="/buy-english-british">English <span>(British)</span></a></li>
        <li><a href="/buy-tagalog">Filipino <span>(Tagalog)</span></a></li>
        
      </ul>
      <ul>
        <li><a href="/buy-greek">Greek</a></li>
        <li><a href="/buy-hebrew">Hebrew</a></li>
        <li><a href="/buy-hindi">Hindi</a></li>
        <li><a href="/buy-irish">Irish</a></li>
        <li><a href="/buy-japanese">Japanese</a></li>
      </ul>
      <ul>                  
        <li><a href="/buy-korean">Korean</a></li>
        <li><a href="/buy-latin">Latin</a></li>
        <li><a href="/buy-farsi">Persian <span>(Farsi)</span></a></li>
        <li><a href="/buy-polish">Polish</a></li>
        <li><a href="/buy-portuguese">Portuguese <span>(Brazil)</span></a></li>
      </ul>
      <ul>
        <li><a href="/buy-russian">Russian</a></li>
        <li><a href="/buy-spanish-spain">Spanish <span>(Spain)</span></a></li>
        <li><a href="/buy-swedish">Swedish</a></li>
        <li><a href="/buy-turkish">Turkish</a></li>
        <li><a href="/buy-vietnamese">Vietnamese</a></li>
      </ul>
    </div>      
    <div class="languages secondary-links">
      <ul>
        <li><a href="/homeschool/">Rosetta Stone <span>Homeschool</span></a></li>
      </ul>                
    </div> 
  </div>  
</template>

<script>
  export default {
    data () {
      return {
        languages: [
          {
            name: 'More languages...',
            region: '',
            code: 'null',                        
          },
          {
            name: 'Spanish',
            region: 'Latin America',
            code: 'esp',
            dst: 'buy-spanish'      
          },
          {
            name: 'Italian',
            code: 'ita',
            dst: 'buy-italian'
          },
          {
            name: 'French',
            code: 'fra',
            dst: 'buy-french'
          },
          {
            name: 'English',
            region: 'American',
            code: 'eng',
            dst: 'buy-english'
          },
          {
            name: 'German',
            code: 'deu',
            dst: 'buy-german'
          },
          {
            name: 'Arabic',
            code: 'ara',
            dst: 'buy-arabic'
          },
          {
            name: 'Chinese',
            region: 'Mandarin',
            code: 'chi',
            dst: 'buy-chinese'
          },
          {
            name: 'Dutch',
            code: 'ned',
            dst: 'buy-dutch'
          },
          {
            name: 'English',
            region: 'British',
            code: 'ebr',
            dst: 'buy-english-british'
          },
          {
            name: 'Filipino',
            region: 'Tagalog',
            code: 'tgl',
            dst: 'buy-tagalog'
          },
          {
            name: 'Greek',
            code: 'grk',
            dst: 'buy-greek'
          },
          {
            name: 'Hebrew',
            code: 'heb',
            dst: 'buy-hebrew'
          },
          {
            name: 'Hindi',
            code: 'hin',
            dst: 'buy-hindi'
          },
          {
            name: 'Irish',
            code: 'gle',
            dst: 'buy-irish'
          },
          {
            name: 'Japanese',
            code: 'jpn',
            dst: 'buy-japanese'
          },
          {
            name: 'Korean',
            code: 'kor',
            dst: 'buy-korean'
          },
          {
            name: 'Persian',
            region: 'Farsi',
            code: 'far',
            dst: 'buy-farsi'
          },
          {
            name: 'Polish',
            code: 'pol',
            dst: 'buy-polish'
          },
          {
            name: 'Portuguese',
            region: 'Brazil',
            code: 'por',
            dst: 'buy-portuguese'
          },
          {
            name: 'Russian',
            code: 'rus',
            dst: 'buy-russian'
          },
          {
            name: 'Spanish',
            region: 'Spain',
            code: 'esc',
            dst: 'buy-spanish-spain'
          },
          {
            name: 'Swedish',
            code: 'sve',
            dst: 'buy-swedish'
          },
          {
            name: 'Turkish',
            code: 'tur',
            dst: 'buy-turkish'
          },
          {
            name: 'Vietnamese',
            code: 'vie',
            dst: 'buy-vietnamese'
          },
        ]
      }
    },

    methods:  {
      handleChange (e) {
        let code = e.target.value
        
        // Probably clicked 'more languages...'
        if (!code) {
          return
        }
        
        let [ dst ]  = this.languages.filter(e => e.code == code)[0]
        window.location.href = '//rosettastone.com/' + dst
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .language-container
    background #0098db
    top 100px
    left 0
    z-index 2
    width 820px
    font-family effra
    padding 24px
    color #fff
  h4
    font-size 28px
    margin 0 0 11px 0px
  a
    color #fff
    text-decoration none
  .mobile-select
    display none
  .languages
    display flex    
    width 100%    
    justify-content space-between
    ul
      margin 0
      padding 0
      font-weight 100
      &:first-of-type
        font-weight bold        
        span
          font-weight 100
      li
        list-style none
        margin 0        
        a
          display block
          color #fff
          padding  8px
          text-decoration none
          &:hover
            background $yellow
            border-radius 5px
    &.secondary-links
      ul    
        &:first-of-type
          border-top 1px solid #fff
          margin-top 1em
          padding-top 0.8em
          padding-bottom 0
          
  ul, li
    margin 0
    padding 0
    list-style none
  
  @media $tablet
    .language-container
      width 710px
      padding 14px 10px
  @media $phone
    .language-container
      width 315px      
    h4
      text-align center
    .mobile-select
      display block
      margin 1em 0
      position relative
      select
        background #0098db
        border 1px solid #fff
        padding 5px
        width 100%
        color #fff
        margin 10px 0
        appearance none
      &:after
        content '▾'
        position absolute
        top 27%
        right 10px
    .languages
      flex-direction column
      ul li a
        padding 4px
    // &.secondary-links
    //   display none
    ul:not(:first-of-type)
      display none

</style>