1class ScriptDetailAlbum extends Script { 2 constructor(params) { 3 super(params) 4 this.$dom = document.querySelector(`#${this.attrId}`) 5 this.direction = params.direction 6 this.show_magnifier = Number(params.show_magnifier) || 0 7 this.isX = params.direction === 'left' || params.direction === 'right' 8 this.$v3dBox = this.$dom.querySelector('.unit-detail-album__3d-box') 9 this.$v3dSlide = this.$dom.querySelector('.swiper-slide-3d-item') 10 this.$vBox = this.$dom.querySelector('.unit-detail-album__video-box') 11 this.$vPlay = this.$dom.querySelector('.unit-detail-album__video-play') 12 this.$vClose = this.$dom.querySelector('.unit-detail-album__video-close') 13 this.$vBox = this.$dom.querySelector('.unit-detail-album__video-box') 14 this.$vAlbum = this.$dom.querySelector('.unit-detail-album__pattern') 15 this.$pic = this.$dom.querySelector('.unit-detail-album__picture') 16 this.videoConfig = params?.videoConfig ? JSON.parse(this.utilts.htmlDecode(params?.videoConfig)) : null 17 console.log('params', params) 18 console.log('videoConfig', this.videoConfig) 19 this.swiperThumb = null 20 this.swiperPicture = null 21 this.isM = window.innerWidth < 768 22 this.thumbLen = this.$dom.querySelectorAll(`.unit-detail-album__picture-item`).length 23 } 24 async init() { 25 if (this.$dom.ScriptDetailAlbum) { 26 return; 27 } 28 this.$dom.ScriptDetailAlbum = this; 29 // siwper 30 if (!window.Swiper) await new Load('/assets/plugins/swiper.min.js') 31 await new Load('/assets/plugins/image-zoom.js') 32 this._initRender() 33 /**åå§å缩ç¥å¾ */ 34 this._initSwiperThumb() 35 /**åå§åå¤§å¾ */ 36 this._initSwiperPicture() 37 /** æå è½½æ´æ°é«åº¦ */ 38 this._initLazyLoad() 39 /** 大å¾è½®æåæ¢ */ 40 this._initPicturSlideChange() 41 /** åå§åè§é¢ */ 42 if (this.$vBox) this._initVideo() 43 /** æ¾å¤§éåè½åå§å */ 44 if (this.show_magnifier && !this.isM) this.initImageZoom() 45 this.afterInit() 46 } 47 afterInit() { 48 const unit = document.querySelector(`#${this.attrId} .unit-detail-album`); 49 unit && unit.removeAttribute('before-init') 50 } 51 /**å次渲æ */ 52 _initRender() { 53 // å æ ¹æ®æ¹å渲ææ ·å¼ 54 if (this.isX) this.$dom.classList.add('unit-detail-album--x') 55 else this.$dom.classList.add('unit-detail-album--y') 56 this.$dom.classList.add(`unit-detail-album--${this.direction}`) 57 } 58 /**åå§å缩ç¥å¾ */ 59 _initSwiperThumb() { 60 //åå§å缩ç¥å¾ 61 const galleryThumbConfig = { 62 slidesPerView: 'auto', 63 spaceBetween: 10, 64 watchSlidesVisibility: true, 65 watchSlidesProgress: true, 66 mousewheel: true, 67 freeMode: true, 68 centerInsufficientSlides: true, 69 direction: this.isX ? 'vertical' : 'horizontal', 70 // navigation: { 71 // nextEl: `#${this.attrId} .unit-detail-album__thumb-next`, 72 // prevEl: `#${this.attrId} .unit-detail-album__thumb-prev`, 73 // }, 74 } 75 // å®ä¾å 76 document.querySelector(`#${this.attrId} .unit-detail-album__thumb-container`).classList.remove('swiper-container-vertical', 'swiper-container-horizontal') 77 this.swiperThumb = new Swiper(`#${this.attrId} .unit-detail-album__thumb-container`, galleryThumbConfig) 78 // 3d 79 this.isLoadJs = false 80 if (this.$v3dBox) { 81 this.$v3dBox.onclick = (e) => { 82 if (!this.isLoadJs) { 83 this._load3dJs() 84 this.isLoadJs = true 85 e.preventDefault ? e.preventDefault() : '' 86 } 87 if (document.body.clientWidth >= 768) { 88 this.$v3dSlide.classList.add('swiper-no-swiping') 89 } 90 } 91 // if (document.body.clientWidth < 768) { 92 // this.$v3dBox.addEventListener('touchmove',(e)=>{ 93 // if ( e && e.preventDefault ) e.preventDefault() 94 // }) 95 // } 96 } 97 document.querySelector(`#${this.attrId} .unit-detail-album__thumb-navigation`).style.display = 'block' 98 document.querySelector(`#${this.attrId} .unit-detail-album__thumb-navigation .unit-detail-album__thumb-prev`).classList.add('swiper-button-disabled') 99 setTimeout(() => { 100 document.querySelector(`#${this.attrId} .unit-detail-album__thumb .unit-detail-album__thumb-next`).addEventListener('click', () => { 101 this.swiperPicture.slideNext() 102 if (this.swiperPicture.activeIndex > 0) { 103 document.querySelector(`#${this.attrId} .unit-detail-album__thumb .unit-detail-album__thumb-prev`).classList.remove('swiper-button-disabled') 104 } 105 if (this.swiperPicture.activeIndex >= this.thumbLen - 1) { 106 document.querySelector(`#${this.attrId} .unit-detail-album__thumb .unit-detail-album__thumb-next`).classList.add('swiper-button-disabled') 107 } 108 }) 109 document.querySelector(`#${this.attrId} .unit-detail-album__thumb .unit-detail-album__thumb-prev`).addEventListener('click', () => { 110 this.swiperPicture.slidePrev() 111 if (this.swiperPicture.activeIndex == 0) { 112 document.querySelector(`#${this.attrId} .unit-detail-album__thumb .unit-detail-album__thumb-prev`).classList.add('swiper-button-disabled') 113 } 114 if (this.swiperPicture.activeIndex < this.thumbLen - 1) { 115 document.querySelector(`#${this.attrId} .unit-detail-album__thumb .unit-detail-album__thumb-next`).classList.remove('swiper-button-disabled') 116 } 117 }) 118 }, 0); 119 } 120 /** å è½½3d模åæ件 */ 121 _load3dJs() { 122 const s = document.createElement('script') 123 s.type = 'module' 124 // s.src = 'https://unpkg.com/@google/model-viewer/dist/model-viewer.js' 125 s.src = '/assets/plugins/model-viewer.min.js' 126 document.body.appendChild(s) 127 128 // const s1 = document.createElement('script') 129 // s1.setAttribute("nomodule", "") 130 // s1.src = 'https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js' 131 // document.body.appendChild(s1) 132 133 s.onload = () => { 134 setTimeout(() => { 135 const $v3dBoxBtn = this.$dom.querySelector('.unit-detail-album__3d-box #button-load') 136 $v3dBoxBtn.click() 137 }, 100) 138 } 139 // s1.onload = () => { 140 // setTimeout(() => { 141 // const $v3dBoxBtn = this.$dom.querySelector('.unit-detail-album__3d-box #button-load') 142 // $v3dBoxBtn.click() 143 // }, 100) 144 // } 145 } 146 /**åå§åå¤§å¾ */
147 _initSwiperPicture() { 148 const _this = this 149 const galleryPictureConfig = { 150 slidesPerView: 1, 151 autoHeight: true, 152 lazy: { 153 loadPrevNext: true, 154 loadOnTransitionStart: true 155 }, 156 thumbs: { 157 swiper: this.swiperThumb 158 }, 159 navigation: { 160 nextEl: `#${this.attrId} .unit-detail-album__picture-next`, 161 prevEl: `#${this.attrId} .unit-detail-album__picture-prev`, 162 }, 163 pagination: { 164 el: '.unit-detail-album__picture-pagination', 165 type: 'fraction' 166 }, 167 on: { 168 lazyImageReady: function (_slideEl, _imageEl) { 169 // å¾çå è½½å®åèªå¨æ´æ°é«åº¦ 170 _this.utilts.swiperUpdateSize(_this.swiperPicture) 171 }, 172 slideChange: function (e) { 173 if (e.activeIndex > 0) { 174 document.querySelector(`#${_this.attrId} .unit-detail-album__thumb .unit-detail-album__thumb-prev`).classList.remove('swiper-button-disabled') 175 } 176 if (e.activeIndex >= _this.thumbLen - 1) { 177 document.querySelector(`#${_this.attrId} .unit-detail-album__thumb .unit-detail-album__thumb-next`).classList.add('swiper-button-disabled') 178 } 179 180 if (e.activeIndex == 0) { 181 document.querySelector(`#${_this.attrId} .unit-detail-album__thumb .unit-detail-album__thumb-prev`).classList.add('swiper-button-disabled') 182 } 183 if (e.activeIndex < _this.thumbLen - 1) { 184 document.querySelector(`#${_this.attrId} .unit-detail-album__thumb .unit-detail-album__thumb-next`).classList.remove('swiper-button-disabled') 185 } 186 187 // åæ¢å¾çæ¶ï¼è§é¢éè 188 if (!!_this.$vBox) { 189 _this.$vBox.style.display = 'none' 190 if (_this.$vBox.children[0].children[1]) { 191 _this.$vBox.querySelector('.unit-detail-album__video').removeChild(_this.$vBox.children[0].children[1]) 192 } 193 _this.$vPlay.style.display = 'block' 194 } 195 _this.$vAlbum.classList.remove('active') 196 197 if (_this.$vPlay) { 198 if (parseInt(_this.swiperPicture.slides[_this.swiperPicture.activeIndex].getAttribute('album-type')) === 2) { 199 _this.$vPlay.style.display = 'block' 200 } else { 201 _this.$vPlay.style.display = 'none' 202 } 203 } 204 } 205 } 206 } 207 this.swiperPicture = new Swiper(`#${this.attrId} .unit-detail-album__picture-container`, galleryPictureConfig) 208 this.$dom.querySelector('[video-src]')?.addEventListener('click',() => { 209 console.log('click') 210 setTimeout(() => { 211 this._initLazyLoad() 212 },0) 213 }) 214 } 215 /** æå è½½æ´æ°é«åº¦ */ 216 _initLazyLoad() { 217 // æå è½½çé«åº¦æ´æ° 218 this.swiperPicture.on('slideChangeTransitionStart', () => Utilts.ins().swiperUpdateSize(this.swiperPicture)) 219 if (this.swiperPicture.lazy) { 220 this.swiperPicture.lazy.load() 221 } 222 Utilts.ins().swiperUpdateSize(this.swiperPicture) 223 } 224 /** 大å¾è½®æåæ¢ */ 225 _initPicturSlideChange() { 226 let _this = this 227 if (_this.$vPlay) { 228 this.swiperPicture.on('slideChange', () => { 229 if (parseInt(this.swiperPicture.slides[this.swiperPicture.activeIndex].getAttribute('album-type')) === 2) { 230 _this.$vPlay.style.display = 'block' 231 } else { 232 _this.$vPlay.style.display = 'none' 233 } 234 }) 235 } 236 this.swiperPicture.on('slideChange', () => { 237 console.log('slideChange') 238 this.swiperPicture.slides.forEach((slide, index) => { 239 const $baseVideo = slide.querySelector('.base-video'); 240 console.log('$baseVideo', $baseVideo) 241 console.log('videoConfig', this.videoConfig) 242 if($baseVideo) { 243 console.log('index', index, this.swiperPicture.activeIndex) 244 $baseVideo.resetVideo && $baseVideo.resetVideo() 245 console.log('tt', $baseVideo.playVideo) 246 if (index === this.swiperPicture.activeIndex && this.videoConfig?.autoplay && Number(this.videoConfig.autoplay) > 0 ) { 247 setTimeout(() => { 248 $baseVideo.playVideo && $baseVideo.playVideo(); 249 }); 250 } 251 } 252 }) 253 // if (parseInt(this.swiperPicture.slides[this.swiperPicture.activeIndex].getAttribute('album-type')) === 2) { 254 // _this.$vPlay.style.display = 'block' 255 // } else { 256 // _this.$vPlay.style.display = 'none' 257 // } 258 }) 259 } 260 /**è§é¢ææ¾ */ 261 _initVideo() { 262 // ææ¾æé® 263 const that = this 264 const albumPicture = this.$dom.querySelectorAll(`.unit-detail-album__picture-item`)[0].querySelector('img') 265 const releaseLock = function () { 266 if (that._videoInitLock) { 267 clearTimeout(that._videoInitLock) 268 } 269 that._videoInitLock = null 270 } 271 const lockInitVideo = function () { 272 if (!that._videoInitLock) { 273 that._videoInitLock = setTimeout(function () { 274 releaseLock() 275 }, 2000) 276 return true 277 } else { 278 return false 279 } 280 } 281 this.$vPlay.addEventListener('click', () => { 282 if (!lockInitVideo()) { 283 return false 284 } 285 this.$vPlay.style.display = 'none' 286 this.$vBox.style.display = 'block' 287 let video_type = this.$vPlay.dataset.type 288 if (video_type === 'video_inline') { 289 let iframe = document.createElement('iframe') 290 iframe.src = this.$vPlay.dataset.src 291 iframe.setAttribute('frameborder', 0) 292 iframe.setAttribute('allowfullscreen', true) 293 iframe.setAttribute('accelerometer', true) 294 iframe.setAttribute('autoplay', true) 295 iframe.setAttribute('allow', 'autoplay') 296 iframe.setAttribute('muted', 'muted') 297 iframe.setAttribute('height', parseInt(this.$vBox.offsetWidth / 16 * 9) + 1) 298 iframe.setAttribute('width', '100%') 299 iframe.setAttribute('marginheight', 0) 300 iframe.setAttribute('marginwidth', 0) 301 this.$vBox.children[0].appendChild(iframe) 302 } else if (video_type === 'url_inline' || video_type === 'local') { 303 let video = document.createElement('video') 304 video.src = this.$vPlay.dataset.src 305 if (albumPicture) video.poster = albumPicture.getAttribute('src') || albumPicture.getAttribute('lazy-src') 306 video.setAttribute('style', 'width:100%;height:auto;') 307 video.setAttribute('preload', 'metadata') 308 video.setAttribute('autoplay', 'autoplay') 309 video.setAttribute('muted', 'muted') 310 video.setAttribute('controls', true) 311 video.setAttribute('controlsList', 'nodownload') 312 video.setAttribute('webkit-playsinline', true) 313 video.setAttribute('playsinline', true) 314 this.$vBox.children[0].appendChild(video) 315 this.$vBox.children[0].querySelector('video').play() 316 } else this.$vPlay.style.display = 'none' 317 }) 318 // å ³éæé® 319 this.$vClose.addEventListener('click', () => { 320 releaseLock() 321 this.$vBox.style.display = 'none' 322 this.$vPlay.style.display = 'block' 323 this.$vBox.querySelector('.unit-detail-album__video').removeChild(this.$vBox.children[0].children[1]) 324 }) 325 } 326 327 /** åå§åæ¾å¤§éææ */ 328 initImageZoom() { 329 // è½®æå¾åå§å 330 const $pic = this.$pic.querySelectorAll('.unit-detail-album__picture-container img') 331 for (let $el of $pic) { 332 const zoom = new PluginImageZoom({ target: $el }) 333 zoom.init() 334 } 335 // 款å¼é项éåºçå¾çåå¼åå§å 336 this.vAlbumZoom = new PluginImageZoom({ target: this.$vAlbum.querySelector('img') }) 337 this.vAlbumZoom.init() 338 } 339 340 /** æ´æ°äº§åå¾ */ 341 render() { 342 const thumb = window.app.info.productDetail.thumb 343 if (thumb) { 344 this.$vAlbum.classList.add('active') 345 this.$vAlbum.querySelector('img').setAttribute('lazy-src', thumb) 346 this.$vAlbum.querySelector('img').setAttribute('src', thumb) 347 this.$vAlbum.querySelector('img').setAttribute('data-lazy', 2) 348 this.$pic.classList.add('has-pattern-img')
349 if (this.vAlbumZoom) this.vAlbumZoom.update() 350 } else { 351 this.$vAlbum.classList.remove('active') 352 this.$pic.classList.remove('has-pattern-img') 353 } 354 } 355}
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.