https://www.cablejn.com/assets/js/unit/social-share.js

1class ScriptSocialShare extends Script {
2  constructor(params) {
3    super(params)
4    this.$dom = document.querySelector(`#${this.attrId}`)
5  }
6
7  init() {
8    this.initBtn()
9  }
10
11  initBtn() {
12    this.$dom.querySelector('.unit-social-share-close').addEventListener('click', () => {
13      this.$dom.querySelector('.unit-share_pop').classList.add('d-none')
14    })
15    this.$dom.querySelector('#share_link').addEventListener('click', () => {
16      this.$dom.querySelector('.unit-share_link').classList.remove('d-none')
17      this.$dom.querySelector('.unit-share_social').classList.add('d-none')
18    })
19    this.$dom.querySelector('#share_social').addEventListener('click', () => {
20      this.$dom.querySelector('.unit-share_social').classList.remove('d-none')
21      this.$dom.querySelector('.unit-share_link').classList.add('d-none')
22    })
23    this.$dom.querySelector('.unit-share_link button').addEventListener('click', () => {
24      this.copyText(this.$dom.querySelector('.unit-share_link-text').value)
25    })
26
27    this.$dom.querySelectorAll('[data-social]').forEach(p => {
28      const socialName = p.getAttribute('data-social')
29      p.addEventListener('click', () => {
30        this.goShare(socialName)
31      })
32    })
33    
34    this.$dom.querySelector('.unit-share_link-text').setAttribute('value', window.location.href)
35  }
36
37  // 去分享
38  goShare(thirdLink = '') {
39    const shareUrl = this.$dom.querySelector('.unit-share_link-text').value
40    let shareLink = ''
41    switch(thirdLink) {
42      case 'facebook': 
43        shareLink = 'https://www.facebook.com/sharer/sharer.php?u=' + shareUrl
44        break
45      case 'pinterest': 
46        shareLink = 'https://pinterest.com/pin/create/button/?url=' + shareUrl
47        break
48      case 'twitter': 
49        shareLink = 'https://twitter.com/intent/tweet?url=' + shareUrl
50        break
51    }
52    if (shareLink) window.app.utilts.jupmLinkSave({ href: shareLink, target: '_blank', name: thirdLink })
53  }
54
55  copyText(text, tips = 'Copy successful') {
56    if (navigator.clipboard && navigator.clipboard.writeText) {
57      navigator.clipboard.writeText(text).then(()=> {
58        /* clipboard successfully set */
59        this.showTips(tips)
60        this.$dom.querySelector('.unit-share_pop').classList.add('d-none')
61      }, () => {
62        /* clipboard write failed */
63        this.showTips('Copy failed')
64      })
65    } else {
66      const textarea = document.createElement('textarea');
67      textarea.textContent = text
68      // Prevent scrolling to bottom of page in MS Edge
69      textarea.style.position = 'fixed'
70      textarea.style.opacity = 0
71      document.body.appendChild(textarea)
72      textarea.select()
73      try {
74        // Security exception may be thrown by some browsers
75        document.execCommand('copy')
76        this.showTips(tips)
77        this.$dom.querySelector('.unit-share_pop').classList.add('d-none')
78      } catch (ex) {
79        console.warn('Copy to clipboard failed.', ex)
80        this.showTips('Copy the failure')
81      } finally {
82        document.body.removeChild(textarea)
83      }
84    }
85  }
86  // 消息提示 type <info、warn、success、error>
87  showTips(tip,type = 'success') {
88    new Message()[type](window.app.utilts.$t(tip))
89  }
90}