tabbit

Mon Oct 07 2019
Copied to clipboard! Copy reply
<template>  
  <div>
    <!-- Desktop -->
    <div class="lang-wrap">
      
        <div class="desktop-lang-button" @click="toggle">
          <span  v-html="langs[selected]"></span>
          
          <span class="icon-holder">
            <!-- svg arrow -->
            <svg class="lang-arrow"
              height="1em" version="1.1" 
              viewBox="35 26 25 20" 
              width="1em" 
              xmlns="http://www.w3.org/2000/svg" 
              xmlns:xlink="http://www.w3.org/1999/xlink" 
              :style="{display: showArrow ? 'inline-block' : 'none'}">
              <title>Triangle</title>
              <desc>Created with Sketch.</desc>
              <defs>
                <filter filterUnits="objectBoundingBox" height="394.0%" id="filter-1" width="115.0%" x="-7.5%" y="-123.0%">
                  <feOffset dx="0" dy="12" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
                  <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="22.5"></feGaussianBlur>
                  <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" type="matrix" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.318953804 0"></feColorMatrix>
                  <feMerge>
                    <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                    <feMergeNode in="SourceGraphic"></feMergeNode>
                  </feMerge>
                </filter>
              </defs>
              <g id="Page-1" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1">
                <g id="Spanish-->-Button-Hover" transform="translate(-1124.000000, -476.000000)" fill="#313131">
                  <g id="Select-a-language" transform="translate(0.000000, 447.000000)">
                    <g id="Text/CTA" transform="translate(229.000000, 41.000000)" filter="url(#filter-1)">
                      <g id="Language-Dropdown" transform="translate(706.000000, 0.000000)">
                        <polygon id="Triangle" points="237 19 247 32 227 32" transform="translate(237.000000, 25.500000) scale(1, -1) translate(-237.000000, -25.500000) "></polygon>
                      </g>
                    </g>
                  </g>
                </g>
              </g>
            </svg>
            
            <!-- svg x -->
            <svg class="lang-close"
              height="1em"
              version="1.1"
              viewBox="37 24 16 15"
              width="1em"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              :style="{display: showArrow ? 'none' : 'inline-block'}">
              >
              <title>cancel</title>
              <desc>Created with Sketch.</desc>
              <defs>
                <filter filterUnits="objectBoundingBox" height="146.4%" id="filter-1" width="113.5%" x="-6.8%" y="-19.4%">
                  <feOffset dx="0" dy="12" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
                  <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="22.5"></feGaussianBlur>
                  <feColorMatrix in="shadowBlurOuter1" result="shadowMatrixOuter1" type="matrix" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.318953804 0"></feColorMatrix>
                  <feMerge>
                    <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
                    <feMergeNode in="SourceGraphic"></feMergeNode>
                  </feMerge>
                </filter>
                <path d="M4.52177819,5.00153414 L0.0953552873,9.4588811 C-0.0276182663,9.58271378 -0.0276182663,9.78333215 0.0953552873,9.90716483 C0.156763936,9.96915984 0.237392086,10 0.317863979,10 C0.398492129,10 0.478964022,9.96915984 0.540372671,9.90716483 L5.00007813,5.4163028 L9.45978359,9.90716483 C9.52134849,9.96915984 9.60182038,10 9.68229228,10 C9.76276417,10 9.84339232,9.96915984 9.90480097,9.90716483 C10.0277745,9.78333215 10.0277745,9.58271378 9.90480097,9.4588811 L5.47853432,5.00153414 L9.90776983,0.541040226 C10.0307434,0.41720755 10.0307434,0.216589173 9.90776983,0.0927564965 C9.78479628,-0.0309188322 9.58556975,-0.0309188322 9.46275245,0.0927564965 L5.00023438,4.58676548 L0.537247549,0.0929138442 C0.414273995,-0.0307614844 0.215203719,-0.0307614844 0.0922301652,0.0929138442 C-0.0307433884,0.216746521 -0.0307433884,0.417364897 0.0922301652,0.541197574 L4.52177819,5.00153414 Z" id="path-2"></path>
              </defs>
              <g id="Page-1" fill-rule="evenodd" fill="none" stroke="none" stroke-width="1">
                <g id="Spanish-->-List-Expanded" transform="translate(-1126.000000, -481.000000)" fill-rule="nonzero">
                  <g id="Text/CTA" transform="translate(125.000000, 488.000000)" filter="url(#filter-1)">
                    <g id="Language-Dropdown" transform="translate(810.000000, 0.000000)">
                      <g id="cancel" transform="translate(232.000000, 21.000000)">
                        <g id="Shape">
                          <use fill="#313131" fill-rule="evenodd" xlink:href="#path-2"></use>
                          <path d="M3.81711385,5.00154035 L-0.262551781,0.893518124 C-0.579149406,0.574708672 -0.579149406,0.0594027455 -0.262327734,-0.259632175 C0.0561355226,-0.579912811 0.573342191,-0.579912811 0.89201716,-0.259419128 L5.00020954,3.87718439 L9.1079705,-0.259564054 C9.42629033,-0.580107737 9.94382711,-0.580107737 10.2625518,-0.259564054 C10.5791494,0.0592453978 10.5791494,0.574551325 10.2625642,0.893348261 L6.18317398,5.00152793 L10.2595829,9.10656055 C10.5761805,9.42537 10.5761805,9.94067593 10.2600303,10.2590343 C10.1054348,10.415106 9.89735367,10.5 9.68229228,10.5 C9.4673679,10.5 9.25964386,10.415208 9.10500164,10.2594854 L5.00007811,6.12588387 L0.895601991,10.2590343 C0.740991793,10.4151208 0.533054226,10.5 0.317863979,10.5 C0.102802588,10.5 -0.105278495,10.415106 -0.259426659,10.2594854 C-0.576024284,9.94067593 -0.576024284,9.42537 -0.259426659,9.10656055 L3.81711385,5.00154035 Z" stroke="#313131" stroke-width="1"></path>
                        </g>
                      </g>
                    </g>
                  </g>
                </g>
              </g>
            </svg>
          </span>
        </div>
        

      
      <!-- Desktop's language list - hidden initially -->
      <div class="lang-list-wrap container" :class="{open: visible}">
        <div class="language-list">
          <ul v-for="(arrays, i) in languageCols" :key=i>
            <li 
              v-for="lang in arrays" 
              :key="lang.code"
              :data-code="lang.code"
              @click='onLangClick'
              v-html="lang.name + (lang.region ? ' <span>(' + lang.region + ')</span>' : '')"
              tabindex="0">
          </li>
          </ul>
          <!-- <li 
            v-for="lang in languageCols" 
            :key="lang.code"
            :data-code="lang.code"
            @click='onLangClick'
            v-html="lang.name + (lang.region ? '(' + lang.region + ')' : '')"
            tabindex="0">
          </li> -->
        </div>
      </div>
    </div>

    <!-- Mobile language dropdown -->
    <div class="select-wrap">
      <select autocomplete="off" tabindex="0"  @change='onLangClick'>
        <option :value="k" v-for='(lang, k) in langs' :key="k" v-html="lang"></option>
      </select>
    </div>
  </div>  
</template>

<script>
export default {  
  props: ['onLangChange', 'selectedLang'],
  data ()
  {
    return {
      visible: false,  // Is desktop language list visible? 
      showArrow: true, // If true, show dropdown arrow. If not, show 'x' on language button
      selected: 'esp',
      langs: [          
          {
            name: 'Spanish',
            region: 'Latin America',
            code: 'esp',            
          },
          {
            name: 'Italian',
            code: 'ita',
          },
          {
            name: 'French',
            code: 'fra',            
          },
          {
            name: 'English',
            region: 'American',
            code: 'eng',            
          },
          {
            name: 'German',
            code: 'deu'            
          },
          {
            name: 'Arabic',
            code: 'ara',            
          },
          {
            name: 'Chinese',
            region: 'Mandarin',
            code: 'chi',            
          },
          {
            name: 'Dutch',
            code: 'ned',            
          },
          {
            name: 'English',
            region: 'British',
            code: 'ebr'            
          },
          {
            name: 'Filipino',
            region: 'Tagalog',
            code: 'tgl',            
          },
          {
            name: 'Greek',
            code: 'grk',            
          },
          {
            name: 'Hebrew',
            code: 'heb',            
          },
          {
            name: 'Hindi',
            code: 'hin',            
          },
          {
            name: 'Irish',
            code: 'gle',            
          },
          {
            name: 'Japanese',
            code: 'jpn',            
          },
          {
            name: 'Korean',
            code: 'kor',            
          },
          {
            name: 'Latin',
            code: 'lat',            
          },
          {
            name: 'Persian',
            region: 'Farsi',
            code: 'far',            
          },
          {
            name: 'Polish',
            code: 'pol',            
          },
          {
            name: 'Portuguese',
            region: 'Brazil',
            code: 'por',            
          },
          {
            name: 'Russian',
            code: 'rus',            
          },
          {
            name: 'Spanish',
            region: 'Spain',
            code: 'esc',            
          },
          {
            name: 'Swedish',
            code: 'sve',
          },
          {
            name: 'Turkish',
            code: 'tur',            
          },
          {
            name: 'Vietnamese',
            code: 'vie',            
          },
        ]
    }
  },
  
  methods: {
    
    /*
     * In desktop, toggles the container div holding
     * the languages UL's
     */
    toggle () {
      this.visible = !this.visible
      this.showArrow = !this.showArrow
    },

    onLangClick (e) {      
      this.visible = false
      this.showArrow = true
      this.selected = e.target.dataset.code || e.target.value
      
      // This component will call this function when a lang is clicked.
      // Parent must have this function if it wants
      // to handle the event. Something like this
      // <SelectLanguage v-bind={onLangChange} :selectedLang='selectedLang' />
      this.onLangChange(this.selected)
    },   
  },

   computed: {

     /*
      * Language columns. An array holding sub arrays. Each sub 
      * array will be a UL column in the html. This is needed simply
      * for Desktop language display
      */

      languageCols () {
        // extract top 5
        console.log(this.desktopLanguages)
        let top = this.langs.filter(l => /esp|eng|fra|deu|ita/gi.test(l.code))
        let remainder = this.langs.filter(l => !/esp|eng|ita|fra|deu/gi.test(l.code))       
        
        // Order the top 5
        let order = ['esp', 'eng', 'fra', 'deu', 'ita']
        top = top.sort( (a,b) => order.indexOf(a.code) - order.indexOf(b.code))  
        
        // Create the array of languages. [ [esp, fra, eng, deu, ita], [ara, chi...] ]

        let languages = []
        let tmp = []
        while (remainder.length) {
          // Remove first element from `remainder` and store it in `obj`
          let obj = remainder.shift()
          // Push that obj to the tmp array
          tmp.push(obj)

          // If the remainder array is divisible by 4, push it to 'cols' 
          // array and empty `tmp` so it's clear next loop
          if (remainder.length % 4 == 0) {
            tmp.unshift(top.shift())
            languages.push(tmp)
            tmp = []
          }
        }
        
        return languages
      }
    },

}
</script>

<style lang='stylus' scoped> 
  
  .lang-wrap
    position relative
    margin 0 auto
    max-width 1068px
    
  .desktop-lang-button
    background #262626
    display inline-block
    text-align center
    margin auto 0
    padding 1em 0
    border-radius 36px
    font-weight 700
    cursor: pointer
    min-width 311px
    text-transform uppercase
    color #fff 
    
    @media $phone
      display none
  
  li[data-code='esp'],
  li[data-code='eng'],
  li[data-code='ita'],
  li[data-code='deu'],
  li[data-code='fra']
    font-weight bold

  
  // The languages list div
  .lang-list-wrap
    padding 2em 2em 0.5em 2em
    box-sizing border-box
    background #262626
    color #fff
    z-index -1
    margin-top -4px
    transform scale(.8) translateY(-20%)
    transform scale(0.4) translateY(-80%) translateX(13%)
    opacity 0
    visibility hidden
    transition opacity,transform
    transition-duration .15s, .15s
    transition-timing-function ease-out,ease-in
    position absolute
    width 1048px
    left -471px
    &.open
      z-index 1
      opacity 1
      transform scale(1.0) translateY(0)
      visibility visible
  .language-list
      display flex
  ul
    display flex
    right 0
    top 0
    flex-flow row wrap      
    position relative
    margin 0
    padding 0      
    font-size 15px
    &:nth-of-type(3)
      width 170px
    li
      padding 0
      margin 0
      list-style none
      text-align left
      cursor pointer        
      small
        font-size 0.3em
      &:focus
        outline 2px dotted gold
      &:nth-child(-n+6)
        font-family gothammedium
        margin-bottom 1.5em
      &:nth-child(6)::after
        content ''
        display block
        width 100%
        position absolute
        top 2.4em
        left 0
        border-bottom 1px solid rgba(0,0,0,.1)
        border-bottom 1px solid #f1f1f140
      &:nth-child(n+7)
        font-weight 100
        margin .55em 0
        font-family: gothamlight
      &:nth-child(6n+1) { width: 231px; }
      &:nth-child(6n+2) { width: 160px; }
      &:nth-child(6n+3) { width: 161px; }
      &:nth-child(6n+4) { width: 110px; }
      &:nth-child(6n+4) { width: 150px; }
      &:nth-child(6n+5) { width: 160px; }
      &:nth-child(6n+6) { width: 114px; }

    
    @media (max-width: 870px)
      left -289px

    @media (max-width: 700px)
      width 473px
      left -162px
      font-size 14px
      ul
        li
          width 33.2%!important
          // this is the horizontal line diving top langs
          &:nth-child(6):after
            top 2.8em

    @media $phone
      display none


  .select-wrap
    display none
    background url(https://resources.rosettastone.com/assets/lp/1531324408/sbsr/assets/white-down-arrow.svg) no-repeat 96% center #262626
    
    border-radius 36px
    
    select
      background none
      color #fff
      border 1px solid transparent
      width 100%
      padding .8em
      margin 0 auto
      font-size 1.2em
      font-weight 700
      -webkit-appearance none
    @media $phone
      display block
      
  .icon-holder
    width 16px
    height 16px
    display inline-block  
    position relative
    top 2px
    right -7px  

  svg.lang-arrow *,
  svg.lang-close *
    display: inline-block;
    stroke: gold;
    fill: gold;
    -webkit-transition: -webkit-transform .4s ease-in-out;
    transition: transform .4s ease-in-out;

  
// Media Queries for language list
@media (max-width: 1080px)
  .lang-list-wrap
    width 690px
    border 1px solid red
    left -209px
  .language-list
    border 2px solid blue
    display flex
    flex-wrap wrap
  ul
    flex-direction column
    flex-basis 33%
    flex-wrap wrap
    li
      width 100%!important//33.2%!important
      // this is the horizontal line diving top langs
      &:nth-child(6):after
        top 2em
</style>