1class ScriptSocialInfo extends Script { 2 constructor(params) { 3 super(params) 4 this.$dom = document.querySelector(`#${this.attrId}`) 5 if (!this.$dom) return 6 this.list_config = JSON.parse(this.utilts.htmlDecode(params.list_config)) 7 this.sociala_config = JSON.parse(this.utilts.htmlDecode(params.sociala_config)) 8 this.site_social_status = { 9 summary: {}, 10 list: [], 11 website: {} 12 } 13 this.pageTarget = params.pageTarget 14 this.description = params.description 15 // å·¥å · 16 this.utilts = window.app.utilts 17 this.$t = window.app.utilts.$t 18 } 19 20 async init() { 21 if (!this.$dom) return 22 await this.initSocialStats() 23 this.renderContent() 24 this.bindModalEvent() 25 } 26 /** è·åç¤¾åª */ 27 async initSocialStats() { 28 const site_id = window.app.info.site.site_id 29 const client_id = window.app.info.site.client_id 30 if (!site_id || !client_id) return 31 32 const params = { site_id: site_id, client_id: client_id} 33 try { 34 const res = await window.app.utilts.request({ 35 url: '/data-overview/social-stats', 36 method: 'GET', 37 params 38 }) 39 40 this.site_social_status.summary = res.data?.summary || {} 41 this.site_social_status.list = res.data?.list || [] 42 this.site_social_status.list.forEach(item => { 43 if (!item.english_name) item.english_name = '' 44 const name = item.english_name.toLowerCase() 45 item.icon = name 46 if (['facebook', 'instagram', 'linkedin', 'pinterest', 'reddit', 'tiktok', 'tumblr', 'twitter', 'youtube', 'vimeo', 'okru'].indexOf(name) > -1) { 47 item.icon = 'media-' + name 48 } 49 }) 50 this.site_social_status.website = res.data.website 51 } catch (error) { 52 console.error(`initSocialStats error:`, error); 53 } 54 55 } 56 renderContent() { 57 const sociala_config = this.sociala_config 58 const list_config = this.list_config 59 let show_icon = sociala_config.show_icon 60 let show_views = sociala_config.show_views 61 let show_likes = sociala_config.show_likes 62 let show_followers = sociala_config.show_followers 63 let show_content = sociala_config.show_content 64 let social_summary = this.site_social_status.summary 65 let social_list = this.site_social_status.list || [] 66 let first_link = social_list.find(item => item.link)?.link 67 68 let html = '' 69 let count_list_html = [] 70 if (show_views) { 71 count_list_html.push(`<span class="unit-social-info__sum-browse-count">${globalThis.Server.transformNumber(social_summary.sum_browse_count)} ${this.$t('views')}</span>`) 72 } 73 if (show_likes) { 74 count_list_html.push(`<span class="unit-social-info__sum-like-count">${globalThis.Server.transformNumber(social_summary.sum_like_count)} ${this.$t('likes')}</span>`) 75 } 76 if (show_followers) { 77 count_list_html.push(`<span class="unit-social-info__sum-follower-count">${globalThis.Server.transformNumber(social_summary.sum_follower_count)} ${this.$t('followers')}</span>`) 78 } 79 if (show_content) { 80 count_list_html.push(`<span class="unit-social-info__sum-content-count">${globalThis.Server.transformNumber(social_summary.count)}
80 ${this.$t('content')}</span>`) 81 } 82 83 html += `<div class="unit-social-info__count" text-style="${sociala_config.style_type_count}"> 84 ${count_list_html.map((item, i) => { 85 if (i < count_list_html.length - 1) { 86 return item + `<span class="unit-social-info__count-split"></span>` 87 } 88 return item 89 }).join('')} 90 </div>` 91 92 if (show_icon && social_list?.length) { 93 html += `<div class="unit-social-info__icon-list"> 94 ${social_list.slice(0, list_config.quantity).map((item) => { 95 return `<a rel="nofollow" href="${list_config.target==='block'?'javascript:;' : item.link}" target="${ (list_config.target==='block'?'_self':list_config.target) || '_self' }" class="unit-social-info__item custom-color bg-${item.english_name.toLowerCase()}"> 96 <div class="unit-social-info__icon"><span class="iconfont icon-${item.icon}"></span></div> 97 </a>` 98 }).join('')} 99 ${(social_list.length > list_config.quantity) ? 100 `<div class="unit-social-info__item bg-more"> 101 <div class="unit-social-info__more unit-social-info__more--icon"><span class="iconfont icon-base-dot"></span></div> 102 </div>` : '' 103 } 104 </div>` 105 } 106 107 if (!social_list?.length && globalThis.Server.checkDesign()) { 108 html += `<div style="width: 100%;" class="d-flex justify-content-center"> 109 <div class="alert alert-light border d-inline-block" role="alert"> 110 请å¨åå°â设置-详ç»ä¿¡æ¯âå¡«åä¸ç¤¾åªä¿¡æ¯ 111 </div> 112 </div>` 113 } 114 115 if (this.description) { 116 html += `<div class="unit-social-info__description" text-style="${sociala_config.style_type_description}"> 117 <div class="text_ellipsis">${this.description}</div> 118 <div class="unit-social-info__more unit-social-info__more--text">${this.$t('More')}</div> 119 </div>` 120 } 121 if (first_link) { 122 html += `<div class="unit-social-info__link" text-style="${sociala_config.style_type_link}"> 123 <div class="text_ellipsis">${first_link}</div> 124 <div class="unit-social-info__more unit-social-info__more--text">${this.$t('More')}</div> 125 </div>` 126 } 127 128 const $box = this.$dom.querySelector('.unit-social-info') 129 $box.innerHTML = html 130 return html 131 } 132 /**å¼¹æ¡äºä»¶ */ 133 bindModalEvent() { 134 this.$mediaMore = this.$dom.querySelectorAll('.unit-social-info__more') 135 if (!this.$mediaMore?.length) return 136 let mediaHtml = `<div class="unit-social-info__modal-subtitle">${this.$t('Brief Introduction')}</div> 137 <div class="unit-social-info__modal-panel"> 138 <div class="unit-social-info__description">${this.description}</div> 139 </div> 140 <div class="unit-social-info__modal-subtitle">${this.$t('Data Overview')}<span class="unit-social-info__modal-subtitle-tip"> (${this.$t('Home page links and data')})</span></div> 141 <div class="unit-social-info__modal-panel unit-social-info__data"> 142 <div class="unit-social-info__data-item"><div class="count">${globalThis.Server.transformNumber(this.site_social_status.summary.sum_browse_count)}</div><div class="count-title">${this.$t('views')}</div></div> 143 <div class="unit-social-info__data-item"><div class="count">${globalThis.Server.transformNumber(this.site_social_status.summary.sum_like_count)}</div><div class="count-title">${this.$t('likes')}</div></div> 144 <div class="unit-social-info__data-item"><div class="count">${globalThis.Server.transformNumber(this.site_social_status.summary.sum_follower_count)}</div><div class="count-title">${this.$t('followers')}</div></div> 145 <div class="unit-social-info__data-item"><div class="count">${globalThis.Server.transformNumber(this.site_social_status.summary.count)}
145</div><div class="count-title">${this.$t('content')}</div></div> 146 </div> 147 <div class="unit-social-info__modal-subtitle">${this.$t("Website")}</div> 148 <div class="unit-social-info__modal-panel unit-social-info__data-detail"> 149 <div class="unit-social-info__single-data-item"> 150 <div class="unit-social-info__item" style="--social-icon: #f1f1f1;"> 151 <div class="unit-social-info__icon"> 152 <img src="${this.site_social_status.website?.icon}" alt="" /> 153 </div> 154 </div> 155 <div class="unit-social-info__social-data-wrap"> 156 <div class="unit-social-info__social-data-name">${this.$t(this.site_social_status.website?.english_name)}</div> 157 <div class="unit-social-info__social-data-count">${globalThis.Server.transformNumber(this.site_social_status.website?.sum_browse_count)} <span class="count-title">${this.$t('views')}</span> · ${globalThis.Server.transformNumber(this.site_social_status.website?.count)} <span class="count-title">${this.$t('content')}</span></div> 158 <div class="unit-social-info__social-data-link"><a class="text_ellipsis" href="${this.site_social_status.website?.link}" target="_blank">${this.site_social_status.website?.link}</a></div> 159 </div> 160 </div> 161 </div> 162 <div class="unit-social-info__modal-subtitle">${this.$t('Associated social media')}</div> 163 <div class="unit-social-info__modal-panel unit-social-info__data-detail"> 164 ${this.site_social_status.list.map(item => { 165 return `<div class="unit-social-info__single-data-item"> 166 <div class="unit-social-info__item bg-${item.english_name.toLowerCase()}"> 167 <div class="unit-social-info__icon"> 168 <span class=" iconfont icon-${item.icon}"></span> 169 </div> 170 </div> 171 <div class="unit-social-info__social-data-wrap"> 172 <div class="unit-social-info__social-data-name">${this.$t(item.english_name)}</div> 173 <div class="unit-social-info__social-data-count">${globalThis.Server.transformNumber(item.sum_browse_count)} <span class="count-title">${this.$t('views')}</span> · ${globalThis.Server.transformNumber(item.sum_like_count)} <span class="count-title">${this.$t('likes')}</span> · ${globalThis.Server.transformNumber(item.sum_follower_count)} <span class="count-title">${this.$t('followers')}</span> · ${globalThis.Server.transformNumber(item.count)} <span class="count-title">${this.$t('content')}</span></div> 174 <div class="unit-social-info__social-data-link"><a class="text_ellipsis" href="${item.link}" target="_blank">${item.link}</a></div> 175 </div> 176 </div>` 177 }).join('')} 178 </div>` 179 let drawer = new Drawer() 180 this.$mediaMore.forEach(item => { 181 let modalInstance = new Modal() 182 modalInstance.init({ 183 // title: this.$t('Social media sharing'), 184 title: window.app.info.site.site_name, 185 className: 'modal-social-info', 186 content: '<div class="unit-social-info unit-social-info__modal-content">' + mediaHtml + '</div>', 187 isHideCancel: true, 188 isHideSubmit: true 189 }) 190 item.addEventListener('click', () => { 191 if (this.utilts.getScreen() === 'xl') { 192 modalInstance.open() 193 } else { 194 drawer.setOptions({ 195 // title: this.$t('Social media sharing'), 196 title: window.app.info.site.site_name, 197 className: 'modal-social-info', 198 content: '<div class="unit-social-info unit-social-info__modal-content">' + mediaHtml + '</div>', 199 }) 200 drawer.open() 201 } 202 }) 203 }) 204 // } 205 } 206}
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.