1var cgkit_load_swiper = false; 2var cgkit_gal_width = 0; 3var swiper = undefined; 4var swiper2 = undefined; 5var cgkit_first_slide = null; 6var cgkit_first_slide_x = 0; 7var cgkit_first_slide_y = 0; 8function loadGallery() { 9 10 var cg_layout = 'horizontal'; 11 var is_grid_layout = false; 12 var win_width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 13 if( commercekit_pdp.pdp_gallery_layout == 'vertical-left' || commercekit_pdp.pdp_gallery_layout == 'vertical-right' ){ 14 cg_layout = 'vertical'; 15 cgkitResizeThumbsHeight(0); 16 } 17 if( commercekit_pdp.pdp_gallery_layout == 'horizontal' || commercekit_pdp.pdp_gallery_layout == 'vertical-left' || commercekit_pdp.pdp_gallery_layout == 'vertical-right' ){ 18 cgkit_load_swiper = true; 19 } 20 if( ( commercekit_pdp.pdp_gallery_layout == 'grid-2-4' || commercekit_pdp.pdp_gallery_layout == 'grid-3-1-2' || commercekit_pdp.pdp_gallery_layout == 'grid-1-2-2' || commercekit_pdp.pdp_gallery_layout == 'vertical-scroll' || commercekit_pdp.pdp_gallery_layout == 'simple-scroll' ) && win_width <= 770 ){ 21 cgkit_load_swiper = true; 22 is_grid_layout = false; 23 } 24 if( ( commercekit_pdp.pdp_gallery_layout == 'grid-2-4' || commercekit_pdp.pdp_gallery_layout == 'grid-3-1-2' || commercekit_pdp.pdp_gallery_layout == 'grid-1-2-2' || commercekit_pdp.pdp_gallery_layout == 'vertical-scroll' || commercekit_pdp.pdp_gallery_layout == 'simple-scroll' ) && win_width > 770 ){ 25 cgkit_load_swiper = false;
26 is_grid_layout = true; 27 } 28 var mb10 = document.querySelector('#commercegurus-pdp-gallery'); 29 if( mb10 ){ 30 mb10.classList.remove('cgkit-mb10'); 31 mb10.classList.remove('cgkit-layout-'+commercekit_pdp.pdp_thumbnails); 32 mb10.style.visibility = 'visible'; 33 var layout_class = mb10.getAttribute('data-layout-class'); 34 if( layout_class ){ 35 if( is_grid_layout ){ 36 if( cgkit_load_swiper ){ 37 mb10.classList.remove(layout_class); 38 mb10.classList.add('cg-layout-horizontal'); 39 } else { 40 mb10.classList.remove('cg-layout-horizontal'); 41 mb10.classList.add(layout_class); 42 cgkitClearSwiperSlides(); 43 } 44 } else { 45 if( win_width <= 770 ){ 46 mb10.classList.remove(layout_class); 47 mb10.classList.add('cg-layout-horizontal'); 48 cg_layout = 'horizontal'; 49 } else { 50 mb10.classList.add(layout_class); 51 mb10.classList.remove('cg-layout-horizontal'); 52 } 53 cgkitClearSwiperSlides(); 54 } 55 } 56 } else { 57 return; 58 } 59 var pictures = document.querySelectorAll('#commercegurus-pdp-gallery .cg-main-swiper .swiper-slide picture source'); 60 pictures.forEach(function(picture){ 61 var srcset = picture.getAttribute('srcset'); 62 var dsrcset = picture.getAttribute('data-srcset'); 63 if( srcset && dsrcset && srcset.indexOf('spacer.png') >= 0 ){ 64 picture.setAttribute('srcset', dsrcset); 65 } 66 }); 67 var imgs = document.querySelectorAll('#commercegurus-pdp-gallery .cg-main-swiper .swiper-slide img'); 68 var gal_main = document.querySelector('#commercegurus-pdp-gallery .cg-main-swiper'); 69 if( gal_main ){ 70 cgkit_gal_width = gal_main.clientWidth; 71 } 72 imgs.forEach(function(img){ 73 cgkitUpdateSwiperImageHeight(img); 74 }); 75 if( commercekit_pdp.pdp_gallery_layout == 'vertical-scroll' || commercekit_pdp.pdp_gallery_layout == 'simple-scroll' ) { 76 var main_lis = document.querySelectorAll('#commercegurus-pdp-gallery .cg-main-swiper li'); 77 var main_index = 0; 78 main_lis.forEach(function(main_li){ 79 main_li.setAttribute('data-index', main_index++); 80 }); 81 if( commercekit_pdp.pdp_gallery_layout == 'vertical-scroll' ) { 82 var thumb_lis = document.querySelectorAll('#commercegurus-pdp-gallery .cg-thumb-swiper li'); 83 var thumb_index = 0; 84 thumb_lis.forEach(function(thumb_li){ 85 if( win_width > 770 ){ 86 thumb_li.classList.add('cgkit-vertical-scroll-thumb'); 87 } else { 88 thumb_li.classList.remove('cgkit-vertical-scroll-thumb'); 89 } 90 if( thumb_index == 0 ){ 91 thumb_li.classList.add('active'); 92 } 93 thumb_li.setAttribute('data-index', thumb_index++); 94 }); 95 } 96 } 97 if( commercekit_pdp.pdp_gallery_layout == 'vertical-scroll' || commercekit_pdp.pdp_gallery_layout == 'simple-scroll' ) { 98 var main_imgs = document.querySelectorAll('#commercegurus-pdp-gallery .cg-main-swiper .swiper-slide img'); 99 main_imgs.forEach(function(main_img){ 100 var src = main_img.getAttribute('src'); 101 var dsrc = main_img.getAttribute('data-src'); 102 var dsset = main_img.getAttribute('data-srcset'); 103 if( src && src.indexOf('spacer.png') >= 0 && dsrc ){ 104 main_img.setAttribute('src', dsrc); 105 main_img.setAttribute('srcset', dsset); 106 } 107 }); 108 var vs_thumbs = document.querySelector('#commercegurus-pdp-gallery .cg-thumb-swiper'); 109 var cgkit_sticky_nav = document.querySelector('body.sticky-d .col-full-nav'); 110 if( vs_thumbs && cgkit_sticky_nav && commercekit_pdp.pdp_sticky_atc != 1 ){ 111 if( window.innerWidth > 992 ){ 112 var old_top = vs_thumbs.getAttribute('data-top'); 113 if( !old_top ){ 114 old_top = parseInt(getComputedStyle(vs_thumbs).getPropertyValue('top')); 115 vs_thumbs.setAttribute('data-top', old_top); 116 } 117 var new_top = parseInt(old_top) + cgkit_sticky_nav.clientHeight; 118 vs_thumbs.setAttribute('style', 'top: ' + new_top + 'px;' ); 119 } else { 120 vs_thumbs.setAttribute('style', 'top: unset;' ); 121 } 122 } 123 } 124 var pdp_thumbnails = commercekit_pdp.pdp_thumbnails; 125 if( win_width <= 770 ){ 126 pdp_thumbnails = commercekit_pdp.pdp_m_thumbs; 127 } 128 if( commercekit_pdp.pdp_gallery_layout == 'vertical-left' || commercekit_pdp.pdp_gallery_layout == 'vertical-right' ){ 129 if( mb10 ){ 130 mb10.classList.remove('cgkit-vlayout-'+commercekit_pdp.pdp_v_thumbs); 131 } 132 if( win_width > 770 ){ 133 pdp_thumbnails = 'auto'; 134 } 135 cgkitUpdateVerticalThumbsHeight(); 136 } 137 if( cgkit_load_swiper ) { 138 var items = document.querySelectorAll('.cg-main-swiper .swiper-slide');
139 items.forEach(function(item){ 140 item.classList.remove('less-images'); 141 item.classList.remove('more-images'); 142 }); 143 var load_more = document.querySelector('.cg-main-swiper .load-more-images'); 144 if( load_more ){ 145 load_more.style.display = 'none'; 146 load_more.classList.add('more'); 147 load_more.classList.remove('less'); 148 load_more.innerHTML = load_more.getAttribute('data-more'); 149 } 150 // Swiper init. 151 if( cg_layout == 'vertical1' ){ 152 // Vertical 153 swiper = new Swiper662(".cg-thumb-swiper", { 154 lazy: true, 155 preloadImages: false, 156 slidesPerView: pdp_thumbnails, 157 grabCursor: true, 158 cssmode: true, 159 watchSlidesVisibility: true, 160 watchSlidesProgress: true, 161 spaceBetween: 10, 162 direction: cg_layout, 163 keyboard: { 164 enabled: true, 165 }, 166 }); 167 } else { 168 // Horizontal 169 swiper = new Swiper662(".cg-thumb-swiper", { 170 lazy: true, 171 preloadImages: false, 172 threshold: 2, 173 slidesPerView: pdp_thumbnails, 174 centerInsufficientSlides: true, 175 grabCursor: true, 176 cssmode: true, 177 watchSlidesVisibility: true, 178 watchSlidesProgress: true, 179 direction: cg_layout, 180 keyboard: { 181 enabled: true, 182 }, 183 }); 184 } 185 186 var space_between = 0; 187 var slides_per_view = 1; 188 var gall_lis = document.querySelectorAll('#commercegurus-pdp-gallery .cg-main-swiper li'); 189 if( commercekit_pdp.pdp_mobile_layout == 'show-edge' && win_width <= 770 && gall_lis.length > 1 ){ 190 space_between = 10; 191 slides_per_view = commercekit_pdp.pdp_showedge_percent; 192 } 193 swiper2 = new Swiper662(".cg-main-swiper", { 194 autoHeight: true, 195 lazy: { 196 loadPrevNext: true, 197 preloaderClass: 'cg-swiper-preloader', 198 loadPrevNextAmount: 1, 199 }, 200 preloadImages: false, 201 threshold: 2, 202 cssmode: true, 203 spaceBetween: space_between, 204 slidesPerView: slides_per_view, 205 navigation: { 206 nextEl: ".swiper-button-next", 207 prevEl: ".swiper-button-prev", 208 }, 209 thumbs: { 210 swiper: swiper, 211 }, 212 watchOverflow: true, 213 observer: true, 214 observeParents: true, 215 keyboard: { 216 enabled: true, 217 }, 218 }); 219 220 swiper2.on('slideChangeTransitionEnd', function (){ 221 setTimeout(function(){cgkitPausePlayedVideos();}, 200); 222 setTimeout(function(){cgkitLoadMissingSwiperImages();}, 2000); 223 }); 224 225 if( cg_layout == 'vertical1' ){ 226 swiper2.on('slideChangeTransitionStart', function() { 227 swiper.slideTo(swiper2.activeIndex); 228 }); 229 swiper.on('transitionStart', function(){ 230 swiper2.slideTo(swiper.activeIndex); 231 }); 232 swiper2.on('slideChangeTransitionEnd', function() { 233 cgkitResizeThumbsHeight(1); 234 }); 235 } 236 } else { 237 var grid_count = 8; 238 if( commercekit_pdp.pdp_gallery_layout == 'grid-3-1-2' ) { 239 grid_count = 6 240 } 241 if( commercekit_pdp.pdp_gallery_layout == 'grid-1-2-2' ) { 242 grid_count = 5 243 } 244 var item_count = 0; 245 var items = document.querySelectorAll('.cg-main-swiper .swiper-slide'); 246 items.forEach(function(item){ 247 item_count++; 248 item.classList.remove('less-images'); 249 item.classList.remove('more-images'); 250 if( item_count <= grid_count ){ 251 item.classList.add('less-images'); 252 } else { 253 item.classList.add('more-images'); 254 } 255 }); 256 var load_more = document.querySelector('.cg-main-swiper .load-more-images'); 257 if( load_more ){ 258 if( items.length > grid_count ){ 259 load_more.style.display = 'block'; 260 } else { 261 load_more.style.display = 'none'; 262 } 263 } 264 265 var items = document.querySelectorAll('.cg-main-swiper .swiper-slide.less-images .swiper-lazy'); 266 items.forEach(function(item){ 267 if( !item.classList.contains('loaded') ){ 268 var dsrc = item.getAttribute('data-src'); 269 if( dsrc ){ 270 item.setAttribute('src', dsrc); 271 item.classList.add('loaded'); 272 } 273 } 274 }); 275 } 276 // Photoswipe init. 277 var initPhotoSwipeFromDOM = function(gallerySelector) { 278 // parse slide data (url, title, size ...) from DOM elements 279 // (children of gallerySelector) 280 var parseThumbnailElements = function(el) { 281 var thumbElements = el.childNodes, 282 numNodes = thumbElements.length, 283 items = [], 284 figureEl, 285 linkEl, 286 size, 287 item; 288 289 for (var i = 0; i < numNodes; i++) { 290 figureEl = thumbElements[i]; // <figure> element 291 292 // include only element nodes 293 if (figureEl.nodeType !== 1) { 294 continue; 295 } 296 297 linkEl = figureEl.children[0]; // <a> element 298 299 size = linkEl.getAttribute("data-size").split("x"); 300 301 if( linkEl.classList.contains('cgkit-video') ){ 302 // create video slide object 303 var video_html = linkEl.getAttribute('data-html'); 304 video_html = video_html.replace(/</g, '<'); 305 video_html = video_html.replace(/>/g, '>'); 306 video_html = video_html.replace(/"/g, '"'); 307 item = { 308 html: video_html 309 } 310 } else { 311 // create slide object 312 var img_alt = ''; 313 var img_title = ''; 314 var imgEl = linkEl.querySelector('img'); 315 if( imgEl ){ 316 img_alt = imgEl.getAttribute('alt'); 317 if( commercekit_pdp.pdp_lightbox_cap ){ 318 img_title = imgEl.getAttribute('data-caption') ? imgEl.getAttribute('data-caption') : imgEl.getAttribute('title'); 319 } 320 } 321 item = { 322 src: linkEl.getAttribute("href"), 323 w: parseInt(size[0], 10), 324 h: parseInt(size[1], 10), 325 alt: img_alt, 326 title: img_title 327 }; 328 329 if (figureEl.children.length > 1) { 330 // <figcaption> content 331 item.title = figureEl.children[1].innerHTML; 332 } 333 334 if (linkEl.children.length > 0) { 335 // <img> thumbnail element, retrieving thumbnail url 336 item.msrc = linkEl.children[0].getAttribute("src"); 337 } 338 } 339 340 item.el = figureEl; // save link to element for getThumbBoundsFn 341 items.push(item); 342 } 343 344 return items; 345 }; 346 347 // find nearest parent element 348 var closest = function closest(el, fn) { 349 return el && (fn(el) ? el : closest(el.parentNode, fn)); 350 }; 351 352 // triggers when user clicks on thumbnail 353 var onThumbnailsClick = function(e) { 354 e = e || window.event; 355 e.preventDefault ? e.preventDefault() : (e.returnValue = false); 356 357 var eTarget = e.target || e.srcElement; 358 359 var input = e.target; 360 var inputp = input.closest('.cgkit-video-play'); 361 if( input.classList.contains('cgkit-video-play') || inputp ){ 362 return; 363 } 364 365 // find root element of slide 366 var clickedListItem = closest(eTarget, function(el) { 367 return el.tagName && el.tagName.toUpperCase() === "LI"; 368 }); 369 370 if (!clickedListItem) { 371 return; 372 } 373 374 // find index of clicked item by looping through all child nodes 375 // alternatively, you may define index via data- attribute 376 var clickedGallery = clickedListItem.parentNode, 377 childNodes = clickedListItem.parentNode.childNodes, 378 numChildNodes = childNodes.length, 379 nodeIndex = 0, 380 index; 381 382 for (var i = 0; i < numChildNodes; i++) { 383 if (childNodes[i].nodeType !== 1) { 384 continue; 385 } 386 387 if (childNodes[i] === clickedListItem) { 388 index = nodeIndex; 389 break; 390 } 391 nodeIndex++; 392 } 393 394 if (index >= 0 && commercekit_pdp.pdp_lightbox) {
395 // open PhotoSwipe if valid index found 396 openPhotoSwipe(index, clickedGallery); 397 } 398 return false; 399 }; 400 401 // parse picture index and gallery index from URL (#&pid=1&gid=2) 402 var photoswipeParseHash = function() { 403 var hash = window.location.hash.substring(1), 404 params = {}; 405 406 if (hash.length < 5) { 407 return params; 408 } 409 410 var vars = hash.split("&"); 411 for (var i = 0; i < vars.length; i++) { 412 if (!vars[i]) { 413 continue; 414 } 415 var pair = vars[i].split("="); 416 if (pair.length < 2) { 417 continue; 418 } 419 params[pair[0]] = pair[1]; 420 } 421 422 if (params.gid) { 423 params.gid = parseInt(params.gid, 10); 424 } 425 426 return params; 427 }; 428 429 var openPhotoSwipe = function( 430 index, 431 galleryElement, 432 disableAnimation, 433 fromURL 434 ) { 435 var pswpElement = document.querySelectorAll(".pswp")[0], 436 gallery, 437 options, 438 items; 439 440 items = parseThumbnailElements(galleryElement); 441 442 // Photoswipe options. 443 options = { 444 /* "showHideOpacity" uncomment this If dimensions of your small thumbnail don't match dimensions of large image */ 445 //showHideOpacity:true, 446 447 // Buttons/elements 448 closeEl: true, 449 captionEl: true, 450 fullscreenEl: true, 451 zoomEl: true, 452 shareEl: false, 453 counterEl: false, 454 arrowEl: true, 455 preloaderEl: true, 456 // define gallery index (for URL) 457 galleryUID: galleryElement.getAttribute("data-pswp-uid"), 458 getThumbBoundsFn: function(index) { 459 // See Options -> getThumbBoundsFn section of documentation for more info 460 var thumbnail = items[index].el.getElementsByTagName("img")[0]; // find thumbnail 461 if( !thumbnail ){ 462 thumbnail = items[index].el.getElementsByTagName("video")[0]; // find thumbnail 463 if( !thumbnail ){ 464 thumbnail = items[index].el.getElementsByTagName("iframe")[0]; // find thumbnail 465 } 466 } 467 pageYScroll = window.pageYOffset || document.documentElement.scrollTop; 468 rect = thumbnail.getBoundingClientRect(); 469 470 return { x: rect.left, y: rect.top + pageYScroll, w: rect.width }; 471 } 472 }; 473 474 // PhotoSwipe opened from URL 475 if (fromURL) { 476 if (options.galleryPIDs) { 477 // parse real index when custom PIDs are used 478 // http://photoswipe.com/documentation/faq.html#custom-pid-in-url 479 for (var j = 0; j < items.length; j++) { 480 if (items[j].pid == index) { 481 options.index = j; 482 break; 483 } 484 } 485 } else { 486 // in URL indexes start from 1 487 options.index = parseInt(index, 10) - 1; 488 } 489 } else { 490 options.index = parseInt(index, 10); 491 } 492 493 // exit if index not found 494 if (isNaN(options.index)) { 495 return; 496 } 497 498 if (disableAnimation) { 499 options.showAnimationDuration = 0; 500 } 501 502 // Pass data to PhotoSwipe and initialize it 503 gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options); 504 gallery.init(); 505 506 /* Additional swiperjs/photoswipe integration - 507 1/2. UPDATE SWIPER POSITION TO THE CURRENT ZOOM_IN IMAGE (BETTER UI) */ 508 // photoswipe event: Gallery unbinds events 509 // (triggers before closing animation) 510 gallery.listen("unbindEvents", function() { 511 // The index of the current photoswipe slide 512 var getCurrentIndex = gallery.getCurrentIndex(); 513 // Update position of the slider 514 if( cgkit_load_swiper ){ 515 swiper2.slideTo(getCurrentIndex, 0, false); 516 } 517 // 2/2. Start swiper autoplay (on close - if swiper autoplay is true) 518 //swiper2.autoplay.start(); 519 }); 520 // 2/2. swiper autoplay stop when image in zoom mode (When lightbox is open) */ 521 gallery.listen('initialZoomIn', function() { 522 if( cgkit_load_swiper ) { 523 if(swiper2.autoplay.running){ 524 swiper2.autoplay.stop(); 525 } 526 } 527 }); 528 gallery.listen('beforeChange', function () { 529 cgkitAddPhotoSwiperEvents(); 530 }); 531 gallery.listen('afterChange', function () { 532 cgkitAddPhotoSwiperEvents(); 533 }); 534 gallery.listen('close', function () { 535 setTimeout(function(){ 536 var pswp = document.querySelector('#pswp'); 537 if( pswp ){ 538 pswp.className = 'pswp'; 539 } 540 }, 400); 541 }); 542 cgkitAddPhotoSwiperEvents(); 543 }; 544 545 var videos2 = document.querySelectorAll('.cgkit-video-wrap video'); 546 videos2.forEach(function(video){ 547 video.addEventListener('loadeddata', function(e){ 548 var input = e.target; 549 var parent = input.closest('.cgkit-video-wrap'); 550 cgkitVideoResizeHeight(parent, input, this.videoWidth, this.videoHeight); 551 }); 552 video.addEventListener('play', function(e){ 553 var input = e.target; 554 var parent = input.closest('.cgkit-video-wrap'); 555 cgkitVideoResizeHeight(parent, input, this.videoWidth, this.videoHeight); 556 }); 557 video.addEventListener('pause', function(e){ 558 var input = e.target; 559 var parent = input.closest('.cgkit-video-wrap'); 560 cgkitVideoResizeHeight(parent, input, this.videoWidth, this.videoHeight); 561 }); 562 }); 563 564 // loop through all gallery elements and bind events 565 var galleryElements = document.querySelectorAll(gallerySelector); 566 567 for (var i = 0, l = galleryElements.length; i < l; i++) { 568 galleryElements[i].setAttribute("data-pswp-uid", i + 1); 569 galleryElements[i].onclick = onThumbnailsClick; 570 } 571 572 // Parse URL and open gallery if it contains #&pid=3&gid=1 573 var hashData = photoswipeParseHash(); 574 if (hashData.pid && hashData.gid && commercekit_pdp.pdp_lightbox) { 575 openPhotoSwipe(hashData.pid, galleryElements[hashData.gid - 1], true, true); 576 } 577 }; 578 579 // execute above function. 580 initPhotoSwipeFromDOM(".cg-psp-gallery"); 581 var thbImage = document.querySelector("ul.swiper-wrapper.flex-control-nav li:first-child img"); 582 if( thbImage ) { 583 observer = new MutationObserver((changes) => {
584 changes.forEach(change => { 585 if(change.attributeName.includes('src')){ 586 var img = document.querySelector('#commercegurus-pdp-gallery .cg-main-swiper .swiper-slide:first-child img'); 587 if( img ) { 588 cgkitUpdateSwiperImageHeight(img); 589 } 590 if( cgkit_load_swiper ) { 591 swiper2.slideTo(0, 500, false); 592 } 593 } 594 }); 595 }); 596 observer.observe(thbImage, {attributes : true}); 597 } 598 599 var thbForm = document.querySelector("form.variations_form"); 600 if( thbForm ) { 601 observer2 = new MutationObserver((changes) => { 602 changes.forEach(change => { 603 if(change.attributeName.includes('current-image')){ 604 var vid = thbForm.getAttribute('current-image'); 605 if( vid == '' || vid == undefined ) { 606 if( cgkit_load_swiper ) { 607 swiper2.slideTo(0, 500, false); 608 } 609 } else { 610 var thumb = document.querySelector('li.swiper-slide[data-variation-id="'+vid+'"]'); 611 if( thumb ){ 612 var index = thumb.getAttribute('data-index'); 613 if( cgkit_load_swiper ) { 614 swiper2.slideTo(index, 500, false); 615 } 616 } 617 } 618 var thbImage2 = document.querySelector("ul.swiper-wrapper.flex-control-nav li:first-child img"); 619 if( thbImage2 ) { 620 thbImage2.setAttribute('srcset', ''); 621 thbImage2.setAttribute('sizes', ''); 622 } 623 } 624 }); 625 }); 626 observer2.observe(thbForm, {attributes : true}); 627 } 628 if( cg_layout == 'vertical' ){ 629 var mainWrap = document.querySelector('ul.swiper-wrapper.cg-psp-gallery'); 630 if( mainWrap ) { 631 observer = new MutationObserver((changes) => {
632 changes.forEach(change => { 633 if(change.attributeName.includes('style')){ 634 if( cgkit_load_swiper ) { 635 var curobj = document.querySelector('ul.swiper-wrapper.cg-psp-gallery'); 636 if( curobj ){ 637 var parent = curobj.closest('.cg-main-swiper'); 638 if( parent ){ 639 parent.style.height = curobj.offsetHeight+'px'; 640 } 641 } 642 } 643 } 644 }); 645 }); 646 observer.observe(mainWrap, {attributes : true}); 647 } 648 } 649 cgkit_prepare_clone_arrows(); 650 cgkitLazyVideosObserver(); 651} 652 653const galleryUserInteractionEvents = ["mouseover", "keydown", "touchstart", "touchmove", "wheel"]; 654galleryUserInteractionEvents.forEach(function(event) { 655 window.addEventListener(event, triggerGalleryScriptLoader, { 656 passive: !0 657 }) 658}); 659 660function triggerGalleryScriptLoader() { 661 loadGalleryScripts(); 662 galleryUserInteractionEvents.forEach(function(event) { 663 window.removeEventListener(event, triggerGalleryScriptLoader, { 664 passive: !0 665 }) 666 }) 667} 668 669function loadGalleryScripts() { 670 loadGallery(); 671 if( cgkit_first_slide ){ 672 cgkit_first_slide.removeEventListener('touchstart', cgkit_trigger_first_slide_start, !0); 673 cgkit_first_slide.removeEventListener('touchmove', cgkit_trigger_first_slide_move, !0); 674 } 675} 676function cgkitPausePlayedVideos(){ 677 var cgkit_videos = document.querySelectorAll('.swiper-slide-prev video, .swiper-slide-next video'); 678 cgkit_videos.forEach(function(cgkit_video){ 679 var parent = cgkit_video.closest('.cgkit-video-wrap'); 680 if( parent ){ 681 var iconPlay = parent.querySelector('svg.play'); 682 var iconPause = parent.querySelector('svg.pause'); 683 if( iconPlay && iconPause ){ 684 iconPlay.style.display = 'block'; 685 iconPause.style.display = 'none'; 686 cgkit_video.pause(); 687 } 688 } 689 }); 690 cgkit_video2 = document.querySelector('.swiper-slide-active video'); 691 if( cgkit_video2 ){ 692 if( cgkit_video2.classList.contains('cgkit-autoplay') ){ 693 var parent = cgkit_video2.closest('.cgkit-video-wrap'); 694 if( parent ){ 695 var iconPlay = parent.querySelector('svg.play'); 696 var iconPause = parent.querySelector('svg.pause'); 697 if( iconPlay && iconPause ){ 698 iconPlay.style.display = 'none'; 699 iconPause.style.display = 'block'; 700 cgkit_video2.play(); 701 } 702 } 703 } 704 } 705} 706function cgkitVideoTogglePlay(parent){ 707 var video = parent.querySelector('video'); 708 var iconPlay = parent.querySelector('svg.play'); 709 var iconPause = parent.querySelector('svg.pause'); 710 if( video && iconPlay && iconPause ){ 711 if( video.paused ) { 712 iconPlay.style.display = 'none'; 713 iconPause.style.display = 'block'; 714 video.play(); 715 } else { 716 iconPlay.style.display = 'block'; 717 iconPause.style.display = 'none'; 718 video.pause(); 719 } 720 } 721 var videoIcon = parent.querySelector('.cgkit-play'); 722 if( videoIcon ){ 723 videoIcon.classList.remove('not-autoplay'); 724 } 725} 726function cgkitVideoResizeHeight(parent, input, videoWidth, videoHeight){ 727 if( input.style.display != 'none' ){ 728 var pswp = input.closest('div.pswp__scroll-wrap'); 729 if( pswp ){ 730 var parentHeight = parent.offsetHeight; 731 var parentWidth = ( parentHeight / videoHeight ) * videoWidth; 732 parent.style.width = parentWidth+'px'; 733 input.style.width = parentWidth+'px'; 734 } else { 735 var parentWidth = parent.offsetWidth; 736 var parentHeight = ( parentWidth / videoWidth ) * videoHeight; 737 parent.style.height = parentHeight+'px'; 738 input.style.height = parentHeight+'px'; 739 var activeSlide = parent.closest('li.swiper-slide.swiper-slide-active'); 740 if( activeSlide ){ 741 document.querySelector('#cgkit-pdp-gallery-outside').click(); 742 } 743 } 744 } 745} 746function cgkitResizeThumbsHeight(active){ 747 return true; 748 var win_width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 749 if( win_width <= 770 ){ 750 return; 751 } 752 var thumbs = document.querySelector('.cg-thumb-swiper'); 753 var thumb_limit = commercekit_pdp.pdp_thumbnails; 754 var thumb_count = 0; 755 var total_height = 0; 756 if( active ){ 757 var item = document.querySelector('.cg-thumb-swiper .swiper-slide.swiper-slide-active'); 758 if( item ){ 759 var oitem = item; 760 var previus = false;
761 do { 762 thumb_count++; 763 total_height += item.offsetHeight; 764 var nitem = item.nextElementSibling; 765 if( nitem && !previus ){ 766 item = nitem; 767 } else { 768 if( !previus ){ 769 item = oitem; 770 } 771 var pitem = item.previousElementSibling; 772 if( pitem ){ 773 item = pitem; 774 previus = true; 775 } 776 } 777 } while ( thumb_count < thumb_limit ); 778 } 779 } else { 780 var items = document.querySelectorAll('.cg-thumb-swiper .swiper-slide'); 781 items.forEach(function(item){ 782 thumb_count++; 783 if( thumb_count <= thumb_limit ){ 784 total_height += item.offsetHeight; 785 } 786 }); 787 } 788 if( thumbs && total_height ){ 789 var margin_height = ( thumb_limit - 1 ) * 10; 790 thumbs.style.height = (total_height+margin_height)+'px'; 791 } 792} 793function cgkitUpdateSwiperImageHeight(img){ 794 var dsrc = img.getAttribute('data-src'); 795 var dosrc = img.getAttribute('data-opt-src'); 796 if( dosrc && dosrc.indexOf('spacer.png') >= 0 && dsrc ){ 797 img.setAttribute('data-opt-src', dsrc); 798 } 799 if( cgkit_gal_width && cgkit_load_swiper ){ 800 var img_width = parseInt(img.getAttribute('width')); 801 var img_height = parseInt(img.getAttribute('height')); 802 if( ! isNaN(img_width) && ! isNaN(img_width) ){ 803 var max_height = ( cgkit_gal_width / img_width ) * img_height; 804 img.style.height = max_height + 'px'; 805 } 806 } else { 807 img.style.height = ''; 808 } 809} 810function cgkitAddPhotoSwiperEvents(){ 811 var video2 = document.querySelector('.pswp__scroll-wrap .cgkit-video-wrap video'); 812 if( video2 ){ 813 var parent2 = video2.closest('.cgkit-video-wrap'); 814 cgkitVideoResizeHeight(parent2, video2, video2.videoWidth, video2.videoHeight); 815 } 816 var videos2 = document.querySelectorAll('.pswp__scroll-wrap .cgkit-video-wrap video'); 817 videos2.forEach(function(video){ 818 video.addEventListener('loadeddata', function(e){ 819 var input = e.target; 820 var parent = input.closest('.cgkit-video-wrap'); 821 cgkitVideoResizeHeight(parent, input, this.videoWidth, this.videoHeight); 822 }); 823 video.addEventListener('play', function(e){ 824 var input = e.target; 825 var parent = input.closest('.cgkit-video-wrap'); 826 cgkitVideoResizeHeight(parent, input, this.videoWidth, this.videoHeight); 827 }); 828 video.addEventListener('pause', function(e){ 829 var input = e.target; 830 var parent = input.closest('.cgkit-video-wrap'); 831 cgkitVideoResizeHeight(parent, input, this.videoWidth, this.videoHeight); 832 }); 833 }); 834} 835function cgkitClearSwiperSlides(){ 836 if( swiper != undefined && swiper2 != undefined ){ 837 swiper.destroy(); 838 swiper2.destroy(); 839 swiper = undefined; 840 swiper2 = undefined; 841 var swpwraps = document.querySelectorAll('#commercegurus-pdp-gallery ul.swiper-wrapper'); 842 swpwraps.forEach(function(swpwrap){ 843 swpwrap.removeAttribute('style'); 844 }); 845 var swpslds = document.querySelectorAll('#commercegurus-pdp-gallery li.swiper-slide'); 846 swpslds.forEach(function(swpsld){ 847 swpsld.removeAttribute('style'); 848 }); 849 } 850} 851function cgkitLoadMissingSwiperImages(){ 852 var cg_li = document.querySelector('.cg-main-swiper .swiper-slide.swiper-slide-active'); 853 if( cg_li ){ 854 var cg_imgs = cg_li.querySelectorAll('img'); 855 var rm_spin = false; 856 cg_imgs.forEach(function(cg_img){ 857 var src = cg_img.getAttribute('src'); 858 var dsrc = cg_img.getAttribute('data-src'); 859 var dsset = cg_img.getAttribute('data-srcset'); 860 if( cg_img.classList.contains('swiper-lazy-loading') && src && src.indexOf('spacer.png') >= 0 && dsrc ){ 861 cg_img.setAttribute('src', dsrc); 862 cg_img.setAttribute('srcset', dsset); 863 cg_img.classList.remove('swiper-lazy-loading'); 864 cg_img.classList.add('swiper-lazy-loaded'); 865 cg_img.addEventListener('load', function(e){ 866 document.querySelector('#cgkit-pdp-gallery-outside').click(); 867 }); 868 rm_spin = true; 869 } 870 }); 871 var cg_spin = cg_li.querySelector('.cg-swiper-preloader'); 872 if( cg_spin && rm_spin ){ 873 cg_spin.remove(); 874 } 875 } 876} 877function cgkitUpdateVerticalThumbsHeight(){ 878 var win_width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 879 var thumb_lis = document.querySelectorAll('#commercegurus-pdp-gallery .cg-thumb-swiper .swiper-slide'); 880 var thumb_wrap = document.querySelector('#commercegurus-pdp-gallery .cg-thumb-swiper'); 881 if( thumb_wrap && thumb_lis.length > 0 ){ 882 var thumb_width = thumb_lis[0].clientWidth; 883 if( win_width > 770 ){ 884 var thumbs_height = thumb_width * thumb_lis.length; 885 var vert_first_slide = document.querySelector('#commercegurus-pdp-gallery .cg-main-swiper li.swiper-slide:first-child img'); 886 if( vert_first_slide ){ 887 var vertical_height = vert_first_slide.clientHeight; 888 if( vertical_height ){
889 thumbs_height = Math.min(vertical_height, thumbs_height); 890 } 891 } 892 thumb_wrap.style.height = thumbs_height + 'px'; 893 } else { 894 thumb_wrap.style.height = ''; 895 } 896 } 897} 898if( document.querySelector('#commercegurus-pdp-gallery') ){ 899 var cgkit_win_width = window.innerWidth; 900 window.addEventListener('resize', function(e){ 901 if( cgkit_win_width == window.innerWidth ){ 902 return; 903 } 904 cgkit_win_width = window.innerWidth; 905 loadGallery(); 906 var videos2 = document.querySelectorAll('.cgkit-video-wrap video'); 907 videos2.forEach(function(video){ 908 var parent = video.closest('.cgkit-video-wrap'); 909 cgkitVideoResizeHeight(parent, video, video.videoWidth, video.videoHeight); 910 }); 911 if( commercekit_pdp.pdp_gallery_layout == 'vertical-left' || commercekit_pdp.pdp_gallery_layout == 'vertical-right' ){ 912 cgkitResizeThumbsHeight(1); 913 } 914 }); 915 document.addEventListener('click', function(e){ 916 var input = e.target; 917 if( input.classList.contains('load-more-images') ){ 918 if( input.classList.contains('more') ){ 919 input.classList.remove('more'); 920 input.classList.add('less'); 921 input.innerHTML = input.getAttribute('data-less'); 922 var items = document.querySelectorAll('.cg-main-swiper .swiper-slide.more-images .swiper-lazy'); 923 items.forEach(function(item){ 924 if( !item.classList.contains('loaded') ){ 925 var dsrc = item.getAttribute('data-src'); 926 if( dsrc ){ 927 item.setAttribute('src', dsrc); 928 item.classList.add('loaded'); 929 } 930 } 931 }); 932 var items = document.querySelectorAll('.cg-main-swiper .swiper-slide.more-images'); 933 items.forEach(function(item){ 934 item.style.display = 'block'; 935 }); 936 } else { 937 input.classList.add('more'); 938 input.classList.remove('less'); 939 input.innerHTML = input.getAttribute('data-more'); 940 var items = document.querySelectorAll('.cg-main-swiper .swiper-slide.more-images'); 941 items.forEach(function(item){ 942 item.style.display = 'none'; 943 }); 944 document.querySelector('#commercegurus-pdp-gallery').scrollIntoView({block:'end'}); 945 } 946 } 947 }); 948 document.addEventListener('click', function(e){ 949 var input = e.target; 950 var inputp = input.closest('.cgkit-video-play'); 951 if( input.classList.contains('cgkit-video-play') || inputp ){ 952 if( inputp ){ 953 input = inputp; 954 } 955 e.preventDefault(); 956 e.stopPropagation(); 957 var parent = input.closest('.cgkit-video-wrap'); 958 var image = parent.querySelector('img'); 959 var video = parent.querySelector('video'); 960 if( image && video ){ 961 image.style.display = 'none'; 962 video.style.display = 'block'; 963 } 964 cgkitVideoTogglePlay(parent); 965 return false; 966 } 967 }); 968 var cgkit_var_image = false; 969 var thbImage2 = document.querySelector("ul.swiper-wrapper.flex-control-nav li:first-child img"); 970 if( thbImage2 ) { 971 observer2 = new MutationObserver((changes) => {
972 changes.forEach(change => { 973 if(change.attributeName.includes('src')){ 974 if( !cgkit_var_image ){ 975 loadGallery(); 976 cgkit_var_image = true; 977 } 978 } 979 }); 980 }); 981 observer2.observe(thbImage2, {attributes : true}); 982 } 983 var thbImage3 = document.querySelector("ul.swiper-wrapper.cg-psp-gallery li:first-child img"); 984 if( thbImage3 ) { 985 observer3 = new MutationObserver((changes) => { 986 changes.forEach(change => { 987 if(change.attributeName.includes('src')){ 988 if( !cgkit_var_image ){ 989 loadGallery(); 990 cgkit_var_image = true; 991 } 992 } 993 }); 994 }); 995 observer3.observe(thbImage3, {attributes : true}); 996 } 997 var thbImage4 = document.querySelector("form.variations_form"); 998 if( thbImage4 ) { 999 observer4 = new MutationObserver((changes) => { 1000 changes.forEach(change => { 1001 if(change.attributeName.includes('current-image')){ 1002 if( !cgkit_var_image ){ 1003 loadGallery(); 1004 cgkit_var_image = true; 1005 } 1006 } 1007 }); 1008 }); 1009 observer4.observe(thbImage4, {attributes : true}); 1010 } 1011 var mb11 = document.querySelector('#commercegurus-pdp-gallery'); 1012 if( mb11 ){ 1013 var win_width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 1014 var layout_class = mb11.getAttribute('data-layout-class'); 1015 if( layout_class ){ 1016 if( win_width <= 770 ){ 1017 mb11.classList.remove(layout_class); 1018 mb11.classList.add('cg-layout-horizontal'); 1019 } else { 1020 mb11.classList.add(layout_class); 1021 mb11.classList.remove('cg-layout-horizontal'); 1022 } 1023 } 1024 } 1025 function cgkit_gal_image_activate( li_thumb ) { 1026 if ( li_thumb ) { 1027 if ( li_thumb.classList.contains('active') ) { 1028 return; 1029 } 1030 } 1031 li_thumb.classList.add('active'); 1032 cgkit_vertical_scroll_thumb_galery(li_thumb); 1033 var thumb_lis = document.querySelectorAll('#commercegurus-pdp-gallery .cg-thumb-swiper li'); 1034 thumb_lis.forEach(function(thumb_li){ 1035 if( thumb_li !== li_thumb ){ 1036 thumb_li.classList.remove('active'); 1037 } 1038 }); 1039 } 1040 function cgkit_vertical_scroll_thumb_galery(li_thumb) { 1041 if( commercekit_pdp.pdp_gallery_layout == 'vertical-left' || commercekit_pdp.pdp_gallery_layout == 'vertical-right' ){ 1042 var win_width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 1043 if( win_width > 770 ){ 1044 var topPos = li_thumb.offsetTop; 1045 var divContainer = document.querySelectorAll('.cg-thumb-swiper')[0]; 1046 divContainer.scrollTo({top: topPos, behavior: 'smooth'}); 1047 } 1048 } 1049 } 1050 function cgkit_gal_image_offset_top( elem ) { 1051 var offsetTop = 0; 1052 while ( elem ) { 1053 offsetTop += elem.offsetTop; 1054 elem = elem.offsetParent; 1055 } 1056 if ( window.innerWidth <= 992 ) { 1057 var cgkit_sticky_hdr = document.querySelector( commercekit_pdp.cgkit_sticky_hdr_class ); 1058 if ( cgkit_sticky_hdr ) { 1059 offsetTop = offsetTop - cgkit_sticky_hdr.clientHeight; 1060 } 1061 } else { 1062 var cgkit_sticky_nav = document.querySelector( 'body.sticky-d .col-full-nav' ); 1063 var cgkit_body = document.querySelector( 'body' ); 1064 if ( cgkit_sticky_nav && ! cgkit_body.classList.contains('ckit_stickyatc_active') ) { 1065 offsetTop = offsetTop - cgkit_sticky_nav.clientHeight; 1066 } 1067 } 1068 var difTop = 90; 1069 var summary = document.querySelector('#page div.product .summary'); 1070 if( summary ) { 1071 var sum_style = getComputedStyle(summary) 1072 difTop = sum_style.top; 1073 difTop = parseInt(difTop.replace('px',''))-30; 1074 } 1075 return offsetTop - difTop; 1076 } 1077 function cgkit_scroll_to_top_image() { 1078 if( commercekit_pdp.pdp_gallery_layout == 'vertical-scroll' || commercekit_pdp.pdp_gallery_layout == 'simple-scroll' ) { 1079 var main_li = document.querySelector('#commercegurus-pdp-gallery .cg-main-swiper li[data-index="0"]'); 1080 if( main_li ){ 1081 window.scroll( { 1082 behavior: 'smooth', 1083 left: 0, 1084 top: cgkit_gal_image_offset_top(main_li), 1085 } ); 1086 } 1087 } 1088 } 1089 if( commercekit_pdp.pdp_gallery_layout == 'vertical-scroll' ) { 1090 var cgkit_vsgal_click = false; 1091 var cgkit_vsgal_click_id = 0; 1092 document.addEventListener('click', function(e){ 1093 var input = e.target; 1094 var inputp = input.closest('.cgkit-vertical-scroll-thumb'); 1095 if( input.classList.contains('cgkit-vertical-scroll-thumb') || inputp ){ 1096 if( inputp ){ 1097 input = inputp; 1098 } 1099 e.preventDefault(); 1100 e.stopPropagation(); 1101 if( input.classList.contains('active') ){ 1102 return false;
1103 } 1104 cgkit_gal_image_activate(input); 1105 cgkit_vsgal_click = true; 1106 if ( ! cgkit_vsgal_click_id ) { 1107 cgkit_vsgal_click_id = setTimeout( function(){ cgkit_vsgal_click = false; cgkit_vsgal_click_id = 0; }, 1000 ); 1108 } else { 1109 clearTimeout( cgkit_vsgal_click_id ); 1110 cgkit_vsgal_click_id = setTimeout( function(){ cgkit_vsgal_click = false; cgkit_vsgal_click_id = 0; }, 1000 ); 1111 } 1112 var index = input.getAttribute('data-index'); 1113 var main_li = document.querySelector('#commercegurus-pdp-gallery .cg-main-swiper li[data-index="'+index+'"]'); 1114 if( main_li ){ 1115 window.scroll( { 1116 behavior: 'smooth', 1117 left: 0, 1118 top: cgkit_gal_image_offset_top(main_li), 1119 } ); 1120 } 1121 return false; 1122 } 1123 }); 1124 document.addEventListener('scroll', function(e) { 1125 if ( cgkit_vsgal_click ) { 1126 return 1127 } 1128 var cgkit_lis = document.querySelectorAll( '#commercegurus-pdp-gallery .cg-main-swiper li' ); 1129 cgkit_lis.forEach( function( cgkit_li ) { 1130 var li_start = cgkit_gal_image_offset_top( cgkit_li ); 1131 var li_end = cgkit_li.clientHeight + li_start; 1132 var index = cgkit_li.getAttribute('data-index'); 1133 var li_thumb = document.querySelector('#commercegurus-pdp-gallery .cg-thumb-swiper li[data-index="'+index+'"]'); 1134 if ( ! li_thumb ) { 1135 return; 1136 } 1137 if ( window.pageYOffset >= li_start && window.pageYOffset < li_end ) { 1138 cgkit_gal_image_activate( li_thumb ); 1139 return; 1140 } 1141 } ); 1142 } ); 1143 } 1144 document.addEventListener('DOMContentLoaded', function(){ 1145 var win_width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; 1146 var items = document.querySelectorAll('#commercegurus-pdp-gallery .cg-main-swiper .swiper-slide.less-images .swiper-lazy'); 1147 items.forEach(function(item){ 1148 if( !item.classList.contains('loaded') ){ 1149 if( item.classList.contains('pdp-video') ){ 1150 if( win_width > 770 ){ 1151 var dsrc = item.getAttribute('data-src'); 1152 if( dsrc ){ 1153 item.setAttribute('src', dsrc); 1154 item.classList.add('loaded'); 1155 } 1156 } 1157 } 1158 } 1159 }); 1160 cgkit_first_slide = document.querySelector('#commercegurus-pdp-gallery .cg-main-swiper li.swiper-slide:first-child'); 1161 if( cgkit_first_slide ){ 1162 cgkit_first_slide.addEventListener('touchstart', cgkit_trigger_first_slide_start, !0); 1163 cgkit_first_slide.addEventListener('touchmove', cgkit_trigger_first_slide_move, !0); 1164 } 1165 if( commercekit_pdp.pdp_mobile_layout == 'show-edge' && win_width <= 770 ){ 1166 var second_img = document.querySelector('#commercegurus-pdp-gallery .cg-main-swiper .swiper-slide:nth-child(2) img'); 1167 if( second_img ){ 1168 var src = second_img.getAttribute('src'); 1169 var dsrc = second_img.getAttribute('data-src'); 1170 var dsset = second_img.getAttribute('data-srcset'); 1171 if( src && src.indexOf('spacer.png') >= 0 && dsrc ){ 1172 second_img.setAttribute('src', dsrc); 1173 second_img.setAttribute('srcset', dsset); 1174 } 1175 } 1176 } 1177 if( commercekit_pdp.pdp_gallery_layout == 'vertical-left' || commercekit_pdp.pdp_gallery_layout == 'vertical-right' ){ 1178 cgkitUpdateVerticalThumbsHeight(); 1179 } 1180 }); 1181 function cgkit_trigger_first_slide_start(e){ 1182 triggerGalleryScriptLoader(); 1183 cgkit_first_slide_x = e.touches[0].clientX; 1184 cgkit_first_slide_y = e.touches[0].clientY; 1185 } 1186 function cgkit_trigger_first_slide_move(e){ 1187 const moveX = e.touches[0].clientX; 1188 const moveY = e.touches[0].clientY; 1189 const diffX = moveX - cgkit_first_slide_x; 1190 const diffY = moveY - cgkit_first_slide_y; 1191 if( Math.abs(diffX) > Math.abs(diffY) ){ 1192 setTimeout(function(){ 1193 if( swiper != undefined && swiper2 != undefined ){ 1194 swiper.slideTo(1); 1195 swiper2.slideTo(1); 1196 } 1197 }, 200); 1198 e.preventDefault(); 1199 e.stopImmediatePropagation(); 1200 } 1201 if( cgkit_first_slide ){ 1202 cgkit_first_slide.removeEventListener('touchstart', cgkit_trigger_first_slide_start, !0); 1203 cgkit_first_slide.removeEventListener('touchmove', cgkit_trigger_first_slide_move, !0); 1204 } 1205 } 1206 function cgkit_prepare_clone_arrows(){ 1207 var main_next = document.querySelector('.cg-main-swiper .swiper-button-next'); 1208 var next_button = document.querySelector('.cg-thumb-swiper .swiper-button-next'); 1209 if( main_next && next_button ) { 1210 cgkit_update_clone_arrows( main_next, next_button ); 1211 next_observer = new MutationObserver((changes) => {
1212 changes.forEach(change => { 1213 if(change.attributeName.includes('class')){ 1214 cgkit_update_clone_arrows( main_next, next_button ); 1215 } 1216 }); 1217 }); 1218 next_observer.observe(main_next, {attributes : true}); 1219 } 1220 var main_prev = document.querySelector('.cg-main-swiper .swiper-button-prev'); 1221 var prev_button = document.querySelector('.cg-thumb-swiper .swiper-button-prev'); 1222 if( main_prev && prev_button ) { 1223 cgkit_update_clone_arrows( main_prev, prev_button ); 1224 prev_observer = new MutationObserver((changes) => { 1225 changes.forEach(change => { 1226 if(change.attributeName.includes('class')){ 1227 cgkit_update_clone_arrows( main_prev, prev_button ); 1228 } 1229 }); 1230 }); 1231 prev_observer.observe(main_prev, {attributes : true}); 1232 } 1233 } 1234 function cgkit_update_clone_arrows( $main, $button ){ 1235 if( $main.classList.contains('swiper-button-disabled') ){ 1236 $button.classList.add('swiper-button-disabled'); 1237 } else { 1238 $button.classList.remove('swiper-button-disabled'); 1239 } 1240 } 1241 document.addEventListener('click', function(e){ 1242 var input = e.target; 1243 var inputp = input.closest('.cg-thumb-swiper'); 1244 if( input.classList.contains('swiper-button-next') && inputp ){ 1245 e.preventDefault(); 1246 e.stopPropagation(); 1247 var main_next = document.querySelector('.cg-main-swiper .swiper-button-next'); 1248 if( main_next ){ 1249 main_next.click(); 1250 } 1251 } 1252 if( input.classList.contains('swiper-button-prev') && inputp ){ 1253 e.preventDefault(); 1254 e.stopPropagation(); 1255 var main_prev = document.querySelector('.cg-main-swiper .swiper-button-prev'); 1256 if( main_prev ){ 1257 main_prev.click(); 1258 } 1259 } 1260 }); 1261 function cgkitLazyVideosObserver(){ 1262 var lazyVideos = [].slice.call(document.querySelectorAll('video.cgkit-lazy, img.cgkit-lazy')); 1263 if( "IntersectionObserver" in window ){ 1264 var lazyVideoObserver = new IntersectionObserver(function(entries, observer) { 1265 entries.forEach(function(entry){ 1266 if( entry.isIntersecting ){ 1267 var video = null; 1268 if( typeof entry.target.tagName === 'string' && entry.target.tagName === 'IMG' ){ 1269 var videoWrap = entry.target.closest('.cgkit-video-wrap'); 1270 if( videoWrap ){ 1271 video = videoWrap.querySelector('video'); 1272 } 1273 } else { 1274 video = entry.target; 1275 } 1276 if( video ){ 1277 for( var source in video.children ){ 1278 var videoSource = video.children[source]; 1279 if( typeof videoSource.tagName === 'string' && videoSource.tagName === 'SOURCE') { 1280 videoSource.src = videoSource.dataset.src; 1281 } 1282 } 1283 video.load(); 1284 } 1285 entry.target.classList.remove('cgkit-lazy'); 1286 lazyVideoObserver.unobserve(entry.target); 1287 } 1288 }); 1289 }); 1290 lazyVideos.forEach(function(lazyVideo) { 1291 lazyVideoObserver.observe(lazyVideo); 1292 }); 1293 } 1294 } 1295}
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.