Diff: STRATO-apps/wordpress_03/app/wp-content/themes/blocksy/static/js/frontend/flexy.js
Keine Baseline-Datei – Diff nur gegen leer.
1
-
1
+
import $ from 'jquery'
2
+
import { Flexy } from '@creative-themes/flexy'
3
+
import ctEvents from 'ct-events'
4
+
import { getCurrentScreen } from '../frontend/helpers/current-screen'
5
+
import { isTouchDevice } from '../frontend/helpers/is-touch-device'
6
+
7
+
import { pauseVideo, maybePlayAutoplayedVideo } from './helpers/video'
8
+
9
+
import { getScalarOrCallback } from './helpers/get-scalar-or-callback'
10
+
11
+
export const mount = (sliderEl, args) => {
12
+
args = {
13
+
event: null,
14
+
flexyOptions: {},
15
+
16
+
...args,
17
+
}
18
+
19
+
let originalSliderEl = sliderEl
20
+
21
+
sliderEl = getScalarOrCallback(sliderEl)
22
+
23
+
if (sliderEl.flexy) {
24
+
return sliderEl.flexy
25
+
}
26
+
27
+
let maybePillsSlider = sliderEl.querySelector('.flexy-pills [data-flexy]')
28
+
29
+
let leftArrow = sliderEl.querySelector('.flexy .flexy-arrow-prev')
30
+
let rightArrow = sliderEl.querySelector('.flexy .flexy-arrow-next')
31
+
32
+
const maybeSuggested = sliderEl.closest('[class*="ct-suggested-products"]')
33
+
34
+
if (maybeSuggested) {
35
+
leftArrow = maybeSuggested.querySelector('.ct-arrow-prev')
36
+
rightArrow = maybeSuggested.querySelector('.ct-arrow-next')
37
+
}
38
+
39
+
const pillsSelector = '.flexy-pills > * > *'
40
+
41
+
const isPillsDragEvent =
42
+
args.event &&
43
+
args.event.type === 'touchstart' &&
44
+
args.event.target.closest(pillsSelector)
45
+
46
+
// On touch devices, if the mount occured on a click on a pill or arrows,
47
+
// simulate the click again.
48
+
if (args.event && args.event.type === 'mouseover' && isTouchDevice()) {
49
+
let maybeClickTarget = args.event.target.closest(pillsSelector)
50
+
51
+
const arrowSelector = '.flexy-arrow-prev, .flexy-arrow-next'
52
+
53
+
if (!maybeClickTarget) {
54
+
maybeClickTarget = args.event.target.closest(arrowSelector)
55
+
}
56
+
57
+
if (!maybeClickTarget && args.event.target.matches(arrowSelector)) {
58
+
maybeClickTarget = args.event.target
59
+
}
60
+
61
+
if (maybeClickTarget) {
62
+
setTimeout(() => {
63
+
maybeClickTarget.click()
64
+
})
65
+
}
66
+
}
67
+
68
+
const inst = new Flexy(
69
+
() => {
70
+
const sliderEl = getScalarOrCallback(originalSliderEl)
71
+
72
+
if (!sliderEl) {
73
+
return null
74
+
}
75
+
76
+
return sliderEl.querySelector('.flexy-items')
77
+
},
78
+
79
+
{
80
+
flexyAttributeEl: originalSliderEl,
81
+
elementsThatDoNotStartDrag: ['.twentytwenty-handle'],
82
+
83
+
...(args.event &&
84
+
args.event.type === 'touchstart' &&
85
+
!isPillsDragEvent
86
+
? { initialDragEvent: args.event }
87
+
: {}),
88
+
89
+
autoplay:
90
+
Object.keys(sliderEl.dataset).indexOf('autoplay') > -1 &&
91
+
parseInt(sliderEl.dataset.autoplay, 10)
92
+
? sliderEl.dataset.autoplay
93
+
: false,
94
+
95
+
...(sliderEl.querySelector('.flexy-pills')
96
+
? {
97
+
pillsContainerSelector:
98
+
sliderEl.querySelector('.flexy-pills')
99
+
.firstElementChild,
100
+
}
101
+
: {}),
102
+
leftArrow,
103
+
rightArrow,
104
+
scaleRotateEffect: false,
105
+
106
+
onDragStart: (e) => {
107
+
if (!e.target.closest('.flexy-items')) {
108
+
return
109
+
}
110
+
111
+
Array.from(
112
+
e.target
113
+
.closest('.flexy-items')
114
+
.querySelectorAll('.zoomImg')
115
+
).map((img) => {
116
+
$(img).stop().fadeTo(120, 0)
117
+
})
118
+
},
119
+
120
+
// viewport | container
121
+
wrapAroundMode:
122
+
sliderEl.dataset.wrap === 'viewport' ? 'viewport' : 'container',
123
+
124
+
...(maybePillsSlider
125
+
? {
126
+
pillsFlexyInstance: maybePillsSlider,
127
+
}
128
+
: {}),
129
+
130
+
onSlideChange: (instance, payload) => {
131
+
ctEvents.trigger('blocksy:frontend:flexy:slide-change', {
132
+
instance,
133
+
payload,
134
+
})
135
+
},
136
+
137
+
...(args.flexyOptions || {}),
138
+
}
139
+
)
140
+
141
+
if (maybePillsSlider) {
142
+
const inst = new Flexy(maybePillsSlider, {
143
+
elementsThatDoNotStartDrag: ['.twentytwenty-handle'],
144
+
// viewport | container
145
+
wrapAroundMode:
146
+
maybePillsSlider.dataset.wrap === 'viewport'
147
+
? 'viewport'
148
+
: 'container',
149
+
150
+
...(args.event &&
151
+
args.event.type === 'touchstart' &&
152
+
isPillsDragEvent
153
+
? { initialDragEvent: args.event }
154
+
: {}),
155
+
156
+
leftArrow:
157
+
maybePillsSlider.parentNode.querySelector('.flexy-arrow-prev'),
158
+
rightArrow:
159
+
maybePillsSlider.parentNode.querySelector('.flexy-arrow-next'),
160
+
161
+
...(maybePillsSlider.closest('.thumbs-left') &&
162
+
getCurrentScreen({ withTablet: true }) !== 'mobile'
163
+
? {
164
+
orientation: 'vertical',
165
+
}
166
+
: {}),
167
+
})
168
+
169
+
maybePillsSlider.flexy = inst
170
+
}
171
+
172
+
sliderEl.flexy = inst
173
+
174
+
return inst
175
+
}
176
+
177
+
export { Flexy } from '@creative-themes/flexy'
178
+