https://www.sinoevsetech.com/assets/js/unit/multi-language.js

1
2class ScriptMultiLanguage extends Script {
3  constructor(params) {
4    super(params)
5    params.language = this.utilts.htmlDecode(params.language)
6    this.lan_list = JSON.parse(params.language)
7
8    this.cur_lan = params.languageCode
9    this.$dom = document.querySelector('.unit-multi-language__items')
10    this.config = {
11      'Asia': ['ar','az','bn','ceb','eo','fa','gu','hi','hmn','hy','id','iw','ja','jw','ka','kk','km','kn','ko','ku','ky','lo','mi','ml','mn','mr','ms','my','ne','or','pa','ps','sd','si','su','ta','te','tg','th','tl','tr','ug','ur','uz','vi','zh','zh-tw'],
12      'Africa': ['af','am','ar','ha','ig','mg','sn','so','st','sw','xh','yo','zu'],
13      'Europe': ['en', 'az','be','bg','bs','ca','co','cs','cy','da','de','el','eo','es','et','eu','fi','fr','fy','ga','gd','gl','hu','hy','is','it','la','lb','lt','lv','mg','mk','mt','nl','no','pl','pt','ro','ru','sk','sl','sq','sr','sv','tr','uk','yi','hr'],
14      'North America': ['en', 'da','eo','gd','haw','ht','sm'],
15      'Oceania': ['eo','hi','mi','sm'],
16      'South America': ['ny']
17    }
18  }
19  loadFlagsSprite(targetHtml) {
20    // 兼容cdn错误配置导致图片地址无效问题 /assets/plugins/flags-sprite/flags-sprite.webp
21    targetHtml.style.setProperty('--lazy-src', 'url(/assets/images/flags-sprite.webp)')
22    targetHtml.style.setProperty('background-image', 'none')
23    targetHtml.classList.add('flags-sprite-loader')
24  }
25  async init() {
26    this.initConfig()
27    this.initEvent()
28    this.loadFlagsSprite(this.$dom)
29  }
30  initConfig() {
31    const codeArr = []
32    this.lan_list.forEach(_val => {
33      codeArr.push(_val.code)
34    })
35    Object.keys(this.config).forEach(key => {
36      this.config[key] = codeArr.filter(val => this.config[key].includes(val))
37    })
38  }
39  createFlatIcon(code) {
40    const $icon = document.createElement('i')
41    $icon.classList.add('flag-icon', `flag-icon-${code}`)
42    return $icon
43  }
44  initEvent() {
45    // 切换到非英文语种，加入英文
46    // if(this.cur_lan !== 'en') this.config['Europe'].unshift('en')
47    var url = sessionStorage.getItem('languageUrl')
48    Object.keys(this.config).forEach(key => {
49      const $ul = document.createElement('ul')
50      const $item = document.createElement('div')
51      const $title = document.createElement('div')
52      const $flag = document.createElement('div')
53      $item.classList.add('unit-multi-language__item')
54      $title.classList.add('unit-multi-language__title')
55      // 遍历地区语言
56      this.config[key].forEach(code => {
57        // 根据站点语种匹配地区
58        this.lan_list.forEach(item => {
59          if(item.code === code) {
60            const $li = document.createElement('li')
61            const $a = document.createElement('a')
62            // const $img = document.createElement('img')
63            const $span = document.createElement('span')
64            // $img.setAttribute('src', '/assets/images/flags/' + code + '.gif')
65            // $img.setAttribute('height', 22)
66            const $icon = this.createFlatIcon(code)
67            $icon.style.setProperty('--flag-height', '22')
68            var href = item.href.split(/multi[_-]language\.html/)[0];
69            $a.setAttribute('href', href)
70            $span.innerText = ' ' + item.title
71            $title.innerText = key
72            // $a.append($img)
73            $a.append($icon)
74            $a.append($span)
75            $item.append($title)
76            $li.append($a)
77            $ul.append($li)
78            $item.append($ul)
79            if(url&&url!='/multi-language.html'){
80              url = url.replace(/\//, '');
81              href = href + url 
82            }
83            $a.addEventListener('click',(e)=>{
84              e.preventDefault();
85              window.location.href =  href
86            })
87          }
88        })
89        if($item.childNodes.length) this.$dom.append($item)
90
91      })
92    })
93  }
94}