init() {
dom.event.on(window, 'resize', this.resize)
}
componentDidMount() {
this.slidePos = { y:0 }
this.lastScrollY = 0
const slideshowsEl = dom.select.all('.slideshow')
this.slidesHolder = dom.select('.all-slides-holder')
this.slideBlockEl = dom.select.all('.slide-block')
this.bottomSlide = dom.select('.bottom-slide')
this.bottomImg = dom.select('.bottom-slide .background')
this.arrowBtn = dom.select('.arrow-holder')
this.blobs = dom.select.all('#blob-container img')
this.blobsContainer = dom.select('#blob-container')
this.slideshows = []
this.slides = []
this.currentSlideIndex = Store.Detector.isMobile ? 1 : 0
this.totalSlides = Store.Detector.isMobile ? 5 : 19
this.slideshowIndex = 0
this.oldSlideshow = undefined
this.newSlideshow = undefined
this.readyToSlide = true
const dataSlideshows = Store.pageContent().slideshows
let slidesNum = 0
slideshowsEl.forEach((el, i) => {
const dataSlideshow = Store.Detector.isMobile ? dataSlideshows[i].imagesMobile : dataSlideshows[i].images
const s = slideshow(el)
s.id = i
this.slideshows[i] = s
for (var j = 0; j < dataSlideshow.length; j++) {
const dataS = dataSlideshow[j]
this.slides.push({
global: slidesNum,
local: j,
parent: i,
index: i + 1
})
slidesNum++
}
})
this.slides.unshift({
global: -1,
local: -1,
parent: -1,
index: 0
})
this.slides.push({
global: this.totalSlides - 1,
local: 0,
parent: this.slideshows.length,
index: this.slideshows.length + 1
})
$(window).on('mousewheel', this.didWheel)
inertia.addCallback(this.didInertia)
const videoEl = dom.select('.top-slide .video-holder')
const videoUrl = Store.Detector.isMobile ? Store.baseMediaPath() + 'media/Logo_III_01_1_1_mobile.mp4' : Store.baseMediaPath() + 'media/Logo_III_01_1.mp4'
this.mainLoader = dom.select('#main-loader')
if (!Store.Detector.isMobile) {
this.mVideo = miniVideo({
autoplay: Store.Detector.isMobile ? false : true,
loop: false,
volume: 1
})
this.mVideo.addTo(videoEl)
this.mVideo.load(videoUrl, ()=>{
dom.classes.add(this.mainLoader, 'remove')
dom.classes.add(this.arrowBtn, 'active')
setTimeout(() => {
this.spinnerTween.pause()
this.spinnerTween = undefined
dom.tree.remove(this.mainLoader)
}, 2000)
})
var $spinner = dom.select('.spinner-wrapper', this.mainLoader)
var $spinnerSvg = dom.select('svg', $spinner)
this.spinnerTween = TweenMax.to($spinnerSvg, 0.5, { rotation:'360deg', repeat:-1, ease:Linear.easeNone })
} else {
dom.tree.remove(this.mainLoader)
}
const hammertime = new Hammer(document)
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });
hammertime.on('swipe', (ev) => {
if (ev.deltaY < 0) this.changeIndexByDirection(-1)
else this.changeIndexByDirection(1)
})
dom.event.on(this.arrowBtn, 'click', (e) => {
e.preventDefault()
this.changeIndexByDirection(-1)
})
dom.event.on(document, 'scroll', this.onScroll)
Store.on(Constants.UPDATE_SLIDESHOW, this.onUpdateSlideshow)
this.animate()
super.componentDidMount()
}