109 lines
2.6 KiB
JavaScript
109 lines
2.6 KiB
JavaScript
import $ from 'jquery'
|
|
import { Flexy, adjustContainerHeightFor } from 'flexy'
|
|
import ctEvents from 'ct-events'
|
|
import { getCurrentScreen } from '../frontend/helpers/current-screen'
|
|
|
|
import { pauseVideo, maybePlayAutoplayedVideo } from './helpers/video'
|
|
|
|
export const mount = (sliderEl, args) => {
|
|
// sliderEl = sliderEl.parentNode
|
|
|
|
if (sliderEl.flexy) {
|
|
return
|
|
}
|
|
|
|
let maybePillsSlider = sliderEl.querySelector('.flexy-pills [data-flexy]')
|
|
|
|
const inst = new Flexy(sliderEl.querySelector('.flexy-items'), {
|
|
flexyAttributeEl: sliderEl,
|
|
elementsThatDoNotStartDrag: ['.twentytwenty-handle'],
|
|
adjustHeight: !!sliderEl.querySelector('.flexy-items').dataset.height,
|
|
|
|
...(args.event ? { initialDragEvent: args.event } : {}),
|
|
|
|
autoplay:
|
|
Object.keys(sliderEl.dataset).indexOf('autoplay') > -1 &&
|
|
parseInt(sliderEl.dataset.autoplay, 10)
|
|
? sliderEl.dataset.autoplay
|
|
: false,
|
|
|
|
...(sliderEl.querySelector('.flexy-pills')
|
|
? {
|
|
pillsContainerSelector:
|
|
sliderEl.querySelector('.flexy-pills')
|
|
.firstElementChild,
|
|
}
|
|
: {}),
|
|
leftArrow: sliderEl.querySelector('.flexy .flexy-arrow-prev'),
|
|
rightArrow: sliderEl.querySelector('.flexy .flexy-arrow-next'),
|
|
scaleRotateEffect: false,
|
|
|
|
onDragStart: (e) => {
|
|
if (!e.target.closest('.flexy-items')) {
|
|
return
|
|
}
|
|
|
|
Array.from(
|
|
e.target.closest('.flexy-items').querySelectorAll('.zoomImg')
|
|
).map((img) => {
|
|
$(img).stop().fadeTo(120, 0)
|
|
})
|
|
},
|
|
|
|
// viewport | container
|
|
wrapAroundMode:
|
|
sliderEl.dataset.wrap === 'viewport' ? 'viewport' : 'container',
|
|
|
|
...(maybePillsSlider
|
|
? {
|
|
pillsFlexyInstance: maybePillsSlider,
|
|
}
|
|
: {}),
|
|
|
|
onSlideChange: (instance, payload) => {
|
|
ctEvents.trigger('blocksy:frontend:flexy:slide-change', {
|
|
instance,
|
|
payload,
|
|
})
|
|
},
|
|
})
|
|
|
|
if (maybePillsSlider) {
|
|
const inst = new Flexy(maybePillsSlider, {
|
|
elementsThatDoNotStartDrag: ['.twentytwenty-handle'],
|
|
// viewport | container
|
|
wrapAroundMode:
|
|
maybePillsSlider.dataset.wrap === 'viewport'
|
|
? 'viewport'
|
|
: 'container',
|
|
|
|
leftArrow:
|
|
maybePillsSlider.parentNode.querySelector('.flexy-arrow-prev'),
|
|
rightArrow:
|
|
maybePillsSlider.parentNode.querySelector('.flexy-arrow-next'),
|
|
hasDragAndDrop: false,
|
|
|
|
...(maybePillsSlider.closest('.thumbs-left') &&
|
|
getCurrentScreen({ withTablet: true }) !== 'mobile'
|
|
? {
|
|
orientation: 'vertical',
|
|
}
|
|
: {}),
|
|
})
|
|
|
|
maybePillsSlider.flexy = inst
|
|
}
|
|
|
|
sliderEl.flexy = inst
|
|
}
|
|
|
|
ctEvents.on('ct:flexy:update-height', () => {
|
|
;[...document.querySelectorAll('.flexy-container')].map((el) => {
|
|
if (!el.flexy) {
|
|
return
|
|
}
|
|
|
|
adjustContainerHeightFor(el.flexy)
|
|
})
|
|
})
|