https://www.kmlled.com/assets/js/unit/header-language.js

1class ScriptHeaderLanguage extends Script {
2  constructor(params) {
3    super(params)
4    this.$dom = document.querySelector(`#${this.attrId}`)
5    this.$headerLanguage = this.$dom.querySelector('.unit-header-language')
6    this.target = this.$dom.querySelector('.unit-header-language__items')
7    this.language_mode = params.language_mode
8    params.language = this.utilts.htmlDecode(params.language)
9    this.lan_list = this.$dom.querySelectorAll('.unit-header-language__items .unit-header-language__item')
10    this.cur_lan = params.languageCode
11    this.config = {
12      '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'],
13      'Africa': ['af', 'am', 'ar', 'ha', 'ig', 'mg', 'sn', 'so', 'st', 'sw', 'xh', 'yo', 'zu'],
14      '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'],
15      'North America': ['en', 'da', 'eo', 'gd', 'haw', 'ht', 'sm'],
16      'Oceania': ['eo', 'hi', 'mi', 'sm'],
17      'South America': ['ny']
18    }
19    try {
20      this.language_config = JSON.parse(this.utilts.htmlDecode(params.language_config))
21    } catch (err) {
22      this.language_config = {}
23      console.warn(err)
24    }
25  }
26  init() {
27    this.initConfig()
28    if (!window.app.info.utilts.checkDesign()) {
29      this.initEvent()
30    }
31  }
32  initConfig() {
33    const codeArr = []
34    this.lan_list.forEach(_val => {
35      const lan_code = _val.querySelector('.unit-header-language__item--code').innerText
36      codeArr.push(lan_code)
37    })
38    Object.keys(this.config).forEach(key => {
39      this.config[key] = codeArr.filter(val => this.config[key].includes(val))
40    })
41  }
42  initEvent() {
43    let languageCodes = Array.from(this.$dom.querySelectorAll('.unit-header-language__item--code'))
44    let result_code = 'English'
45    if (languageCodes.length) {
46      languageCodes.forEach(item => {
47        if (item.classList[1].split('code-text--')[1] == window.app.info.site.language_code) {
48          result_code = item.innerHTML
49        }
50      })
51    }
52    // if (parseInt(this.language_mode) === 1) this.target = this.setLanguageModalbody()
53    this.target = this.setLanguageModalbody()
54    const modal = new Modal().init({
55      title: `<a href="${globalThis.Server.getRinseHref('/multi-language.html', window.app.info.site)}">${window.app.utilts.$t('Choose a different language')}</a>`,
56      isHideCancel: true,
57      isHideSubmit: true,
58      body: this.target,
59      className: 'unit-header-language__modal',
60      size: 'lg',
61      footerHtml: `${window.app.utilts.$t('Current language')}：${result_code}`
62    })
63    if (this.$headerLanguage) {
64      const languageListDoms = this.$headerLanguage.querySelector('.unit-header-language__items')
65      this.$headerLanguage.addEventListener('click', () => {
66        if (this.language_config.language_type === 1) {
67          const imgList = this.target.querySelectorAll('[data-src]')
68          imgList.forEach(item => {
69            if (!item.getAttribute('src')) {
70              item.setAttribute('src', item.getAttribute('data-src'))
71              item.setAttribute('data-lazy', 2)
72            }
73          })
74          modal.open()
75        } else {
76          if (languageListDoms.classList.contains('is-language-code')) {
77            languageListDoms.classList.remove('is-language-code')
78            languageListDoms.classList.add('hide')
79          } else {
80            languageListDoms.classList.add('is-language-code')
81            languageListDoms.classList.remove('hide')
82          }
83        }
84      })
85      if (this.language_config.language_type === 2) {
86        this.$headerLanguage.parentNode.addEventListener('mouseleave', () => {
87          languageListDoms.classList.remove('is-language-code')
88          languageListDoms.classList.add('hide')
89        })
90        // languageListDoms.addEventListener('mouseenter', (event) => {
91        //   languageListDoms.classList.add('is-language-code')
92        // })
93      }
94    }
95  }
96
97  createFlatIcon(code) {
98    const $icon = document.createElement('i')
99    $icon.classList.add('flag-icon', `flag-icon-${code}`)
100    return $icon
101  }
102
103  loadFlagsSprite(targetHtml) {
104    targetHtml.setAttribute('lazy-src', '/assets/images/flags-sprite.webp')
105    targetHtml.setAttribute('lazy-type', 'background')
106    targetHtml.classList.add('flags-sprite-loader')

107    this._lazyFlags = new LazyImg(targetHtml)
108  }
109
110  setLanguageModalbody() {
111    // 切换到非英文语种，加入英文
112    // if (this.cur_lan !== 'en') this.config['Europe'].unshift('en')
113    let targetHtml = document.createElement('div')
114    targetHtml.classList.add('unit-region-language__list')
115    this.loadFlagsSprite(targetHtml)
116    if (parseInt(this.language_mode) === 1) targetHtml.classList.add('unit-region-language__list-by-continent')
117    const setSonItem = ($title, $item, $sonItems, code, key) => {
118      this.lan_list.forEach((_val) => {
119        if (code === '' || _val.querySelector('.unit-header-language__item--code').innerText === code) {
120          // if (code === '') {
121          //   code = _val.querySelector('.unit-header-language__item--code').innerText
122          // }
123          const langCode = _val.querySelector('.unit-header-language__item--code').innerText
124          const $sonItem = document.createElement('div')
125          $sonItem.classList.add('unit-header-language__item')
126          const $a = document.createElement('a')
127          const $img = document.createElement('img')
128          const $span = document.createElement('span')
129
130          $span.classList.add('unit-header-language__item--code', 'code-text--sm')
131          // $img.setAttribute('data-src', _val.querySelector('img').getAttribute('data-src'))
132          // $img.setAttribute('data-lazy', 2)
133          $a.setAttribute('href', _val.querySelector('a').getAttribute('href'))
134          const lang =_val.querySelector('.unit-header-language__item--title').innerText
135          $img.setAttribute('alt', lang)
136          $img.style.setProperty('display', 'none')
137          $a.setAttribute('title', lang)
138          $a.append(this.createFlatIcon(langCode))
139          $span.innerText = _val.querySelector('.unit-header-language__item--title').innerText
140          if ($title && parseInt(this.language_mode) === 1) $title.innerText = key
141          $a.append($img)
142          $a.append($span)
143          if ($title && parseInt(this.language_mode) === 1) $item.append($title)
144          $sonItem.append($a)
145          $sonItems.append($sonItem)
146          $item.append($sonItems)
147        }
148      })
149      if ($item.childNodes.length) targetHtml.append($item)
150    }
151    if (parseInt(this.language_mode) !== 1) {
152      const $item = document.createElement('div')
153      const $sonItems = document.createElement('div')
154      $item.classList.add('unit-region-language__item')
155      $sonItems.classList.add('unit-header-language__items')
156      setSonItem(null, $item, $sonItems, '')
157    } else {
158      Object.keys(this.config).forEach(key => {
159        const $item = document.createElement('div')
160        const $title = document.createElement('div')
161        const $sonItems = document.createElement('div')
162        $item.classList.add('unit-region-language__item')
163        $title.classList.add('unit-region-language__title')
164        $sonItems.classList.add('unit-header-language__items')
165        // 遍历地区语言
166        this.config[key].forEach(code => {
167          // 根据站点语种匹配地区
168          setSonItem($title, $item, $sonItems, code, key)
169        })
170      })
171    }
172    return targetHtml
173  }
174}