https://uflgame.com/wp-content/themes/theme/blocks/gallery/gallery.js?ver=1789650020

1document.querySelectorAll('.gallery, .gallery__content').forEach(gallery => {
2  const galleryID = gallery.id
3
4  if(!galleryID) return
5
6  if(gallery.querySelectorAll('.gallery__general .gallery__item').length < 2) {
7    gallery.querySelector('.gallery__thumbnails')?.remove()
8    gallery.querySelector('.gallery__controls')?.remove()
9    return
10  }
11
12  if(gallery.querySelectorAll('.gallery__thumbnails .gallery__item').length < 2) {
13    gallery.querySelector('.gallery__thumbnails')?.remove()
14    return
15  }
16
17  const galleryGeneralGlide = new Glide(`#${galleryID} .gallery__general`, {
18    type: 'slider',
19    startAt: 0,
20    perView: 1,
21    gap: 48,
22    bound: true,
23    rewind: false
24  })
25
26  const galleryThumbnailsGlide = new Glide(`#${galleryID} .gallery__thumbnails`, {
27    type: 'slider',
28    startAt: 0,
29    perView: 4,
30    gap: 48,
31    peek: 0,
32    bound: true,
33    rewind: false,
34    breakpoints: {
35      1000: {
36        perView: 4,
37        gap: 12,
38        peek: 0
39      },
40      600: {
41        gap: 12,
42        perView: 3,
43        peek: {
44          before: 0,
45          after: 64
46        }
47      },
48      500: {
49        gap: 12,
50        perView: 3,
51        peek: {
52          before: 0,
53          after: 32
54        }
55      }
56    }
57  })
58
59
60
61  let ytPlayers = []
62
63
64
65  function checkIframeState() {
66    if(ytPlayers.length > 0) {
67      ytPlayers.forEach(item => {
68        if([ 1, 2, 3 ].includes(item.getPlayerState())) {
69          item.stopVideo()
70        }
71      })
72    }
73  }
74
75
76
77  function onYouTubeIframeAPIReady() {
78    document.querySelectorAll(`#${galleryID} .gallery__general .gallery__item iframe[id]`).forEach(item => {
79      const player = new YT.Player(item.id)
80      ytPlayers.push(player)
81    })
82  }
83
84
85
86  let generalSlides, thumbnailsSlides, index
87
88
89
90  function checkActive(index) {
91    const k = document.documentElement.getBoundingClientRect().width > 600 ? 4 : 3
92    if(index > thumbnailsSlides.length - k) {
93      galleryThumbnailsGlide.update({ focusAt: k - (thumbnailsSlides.length - index) })
94    } else {
95      if(index == 0) {
96        galleryThumbnailsGlide.update({ focusAt: 0 })
97      }
98      galleryThumbnailsGlide.update({ focusAt: 1 })
99    }
100  }
101
102
103
104  galleryThumbnailsGlide.on('mount.after', () => {
105    thumbnailsSlides = Array.from(document.querySelectorAll(`#${galleryID} .gallery__thumbnails .gallery__item`)).sort(function (a, b) {
106      if (a === b) return 0
107      return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
108    })
109  })
110
111
112
113  galleryGeneralGlide.on('mount.after', () => {
114    generalSlides = Array.from(document.querySelectorAll(`#${galleryID} .gallery__general .gallery__item`)).sort(function (a, b) {
115      if (a === b) return 0
116      return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1
117    })
118
119    let k = 0
120
121    thumbnailsSlides.forEach(item => {
122      item.setAttribute('data-gallery-anchor', k)
123      item.addEventListener('click', function() {
124        index = item.getAttribute('data-gallery-anchor')
125        checkActive(index)
126        galleryGeneralGlide.go('=' + index)
127        galleryThumbnailsGlide.go('=' + index)
128      })
129      k++
130    })
131
132    generalSlides.forEach((item, index) => {
133      const _iframe = item.querySelector('.gallery-item__image-wrapper iframe')
134      if(_iframe) _iframe.id = `gallery-anchor-${index}`
135      item.setAttribute('data-gallery-anchor', index)
136    })
137
138    const galleryLightbox = GLightbox()
139  })
140
141
142
143  galleryGeneralGlide.on('run', () => {
144    galleryThumbnailsGlide.go('=' + galleryGeneralGlide.index)
145    checkIframeState()
146  })
147
148
149
150  galleryThumbnailsGlide.on('run', () => {
151    checkIframeState()
152    if(galleryThumbnailsGlide.index == 0) {
153      galleryThumbnailsGlide.update({ focusAt: 0 })
154    }
155  })
156
157
158
159  galleryThumbnailsGlide.on('run.after', () => {
160    galleryGeneralGlide.go('=' + galleryThumbnailsGlide.index)
161  })
162
163
164
165  galleryThumbnailsGlide.mount()
166  galleryGeneralGlide.mount()
167})