https://www.szumao.com/assets/js/unit/social-list.js

1class ScriptSocialList extends Script {
2  constructor(params) {
3    super(params)
4    this.$dom = document.querySelector(`#${this.attrId}`)
5    if (!this.$dom) return
6    this.$mediaMore = this.$dom.querySelector('.unit-social-list__more')
7    this.mediaList = JSON.parse(this.utilts.htmlDecode(params.mediaList))
8    this.shareMedia = JSON.parse(this.utilts.htmlDecode(params.shareMedia))
9    this.$mediaShare = this.$dom.querySelectorAll('a.unit-social-list__item')
10    this.email = this.utilts.htmlDecode(params.email)
11    this.sharingType = params.sharingType
12    this.pageTarget = params.pageTarget
13
14  }
15
16  init() {
17    if (!this.$dom) return
18    this.bindModalEvent()
19  }
20
21  /**弹框事件 */
22  bindModalEvent() {
23    let mediaHtml = ''
24    let url = document.querySelector('[property="og:url"]')?.content || ''
25    let title = document.querySelector('[property="og:title"]')?.content || ''
26    let media = document.querySelector('[property="og:image"]')?.content || ''
27    let description = document.querySelector('[property="og:description"]')?.content || ''
28    let { email } = this
29    let linkType = {
30      'Facebook': `https://www.facebook.com/sharer.php?u=${url}&quote=${title}`,
31      'WhatsApp': `https://api.whatsapp.com/send?text=${title}%20${url}`,
32      'Twitter': `https://twitter.com/intent/tweet?text=${title}&url=${url}`,
33      // 'LinkedIn': `https://www.linkedin.com/shareArticle?mini=true&url=${url}&title=${title}`,
34      'LinkedIn': `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
35      'Pinterest': `https://pinterest.com/pin/create/button/?url=${url}&media=${media}&description=${description}`,
36      'Telegram': `https://t.me/share/url?url=${url}&text=${title}`,
37      'Reddit': `https://www.reddit.com/submit?url=${url}&title=${title}`,
38      'Mail': `mailto:${email}?subject=${title}&body=Check%20out%20this%20link`
39    }
40
41    if (this.sharingType === '1') {
42      this.mediaList.forEach(item => {
43        mediaHtml += `<a href="${item.link}" target="${this.pageTarget}" class="unit-social-list__item bg-${item.media.toLowerCase()} col-lg-2dot4">
44          <div class='unit-social-list__itemabox'>
45            <div class="unit-social-list__icon"><span class="iconfont icon-${item.icon}"></span></div>
46            <div class="unit-social-list__title">${item.media}</div>
47          </div>
48        </a>`
49      })
50    } else if (this.sharingType === '2') {
51      this.shareMedia.forEach(item => {
52        mediaHtml += `<a href="${linkType[item.media]}" target="${this.pageTarget}" data-type="${item.media}" target="_blank" class="unit-social-list__item bg-${item.media.toLowerCase()} col-lg-2dot4">
53          <div class='unit-social-list__itemabox'>
54            <div class="unit-social-list__icon"><span class="iconfont icon-${item.icon}"></span></div>
55            <div class="unit-social-list__title">${item.media}</div>
56          </div>
57        </a>`
58      })
59      if (!this.utilts.checkDesign()) {
60        this.$mediaShare.forEach((el) => {
61          el.addEventListener('click', (e) => {
62            e.preventDefault();
63            let { type } = el.dataset;
64            window.open(linkType[type], this.pageTarget);
65          });
66        });
67      }
68    }
69
70    if (this.$mediaMore) {
71      this.$mediaMore.addEventListener('click', () => {
72        new Modal().init({
73          title: window.app.utilts.$t('Social media sharing'),
74          className: 'new-modal-social',
75          content: '<div class="unit-social-list">' + mediaHtml + '</div>',
76          isHideCancel: true,
77          isHideSubmit: true
78        }).open()
79      })
80    }
81
82  }
83}