https://www.minuitexpress.com/res/js/template/social-wall/displaced/ui.js?q=1790590195899

1let swdContainer = null
2let swdTrack = null
3let swdIsHover = false
4let swdDestination = null
5let swdHandlers = null
6
7var initSocialWallDisplaced = async (container) => {
8  if (typeof doT != 'object') {
9    await lazy.loadScript('/res/js/social-wall/doT.js')
10  }
11
12  if(typeof socialFeed != 'function') {
13    await lazy.loadScript('/res/js/social-wall/social-wall.js')
14  }
15
16  socialWallDisplaced(container)
17}
18
19const socialWallDisplaced = (container) => {
20  const mediaQuery = window.matchMedia('(min-width: 768px) and (hover: hover) and (pointer: fine)')
21
22  socialFeed([{
23    elem: container.querySelector('.social-feed-container'),
24    opt: {
25      instagram: {
26        limit: 6,
27        accounts: [container.dataset.name],
28        publicToken: '9a6db5a1c42e0fe6730125016fb32bba',
29      },
30      template: '/res/js/social-wall/templates/displaced.html',
31      callback: () => {
32        if(mediaQuery.matches) {
33          swMoveToCenter(container)
34        }
35      },
36    }
37  }])
38
39  swdContainer = container.querySelector('.social-feed-container')
40  swdTrack = container.querySelector('.progress-track')
41  swdDestination = 0
42  swdHandlers = {
43    mouseenter: swDisplacedMouseEnter,
44    mouseleave: swDisplacedMouseLeave,
45    mousemove: swDisplacedMouseMove,
46  }
47
48  mediaQuery.addEventListener('change', (e) => swDisplacedMediaListener(e, container))
49  swDisplacedMediaListener(mediaQuery, container)
50}
51
52const swTick = () => {
53  const transform = swdContainer.style.transform == '' ? 'translateX(0px)' : swdContainer.style.transform
54  const current = parseFloat(transform.replace('translateX(', '').replace('px)', ''))
55  const delta = (swdDestination - current) * 0.1
56  swdContainer.style.transform = `translateX(${current + delta}px)`
57
58  if(swdIsHover) {
59    requestAnimationFrame(swTick)
60  }
61}
62
63const swDisplacedMediaListener = (e, container) => {
64  if(e.matches) {
65    container.addEventListener('mouseenter', swdHandlers.mouseenter)
66    container.addEventListener('mouseleave', swdHandlers.mouseleave)
67    container.addEventListener('mousemove', swdHandlers.mousemove)
68    swMoveToCenter(container)
69  }
70  else {
71    swdIsHover = false
72    swdDestination = 0
73    container.removeEventListener('mouseenter', swdHandlers.mouseenter)
74    container.removeEventListener('mouseleave', swdHandlers.mouseleave)
75    container.removeEventListener('mousemove', swdHandlers.mousemove)
76    swdContainer.style.transform = 'translateX(0px)'
77
78    if(swdTrack) {
79      swdTrack.style.transform = 'scaleX(0)'
80    }
81  }
82}
83
84const swDisplacedMouseEnter = () => {
85  swdIsHover = true
86  swTick()
87}
88
89const swDisplacedMouseLeave = () => {
90  swdIsHover = false
91}
92
93const swDisplacedMouseMove = (e) => {
94  const container = e.currentTarget
95  const bounds = container.getBoundingClientRect()
96  const progress = Math.min(1, Math.max(0, (e.clientX - bounds.left) / bounds.width))
97  const maxShift = Math.max(0, swdContainer.offsetWidth - container.clientWidth)
98  swdDestination = -maxShift * progress
99
100  if(swdTrack) {
101    swdTrack.style.transform = `scaleX(${progress})`
102  }
103}
104
105const swMoveToCenter = (container) => {
106  const progress = 0.5
107  const maxShift = Math.max(0, swdContainer.offsetWidth - container.clientWidth)
108  swdDestination = -maxShift * progress
109  swdContainer.style.transform = `translateX(${swdDestination}px)`
110
111  if(swdTrack) {
112    swdTrack.style.transform = `scaleX(${progress})`
113  }
114}