153 lines
3.4 KiB
JavaScript
153 lines
3.4 KiB
JavaScript
var slides = [],
|
|
slideData = [],
|
|
current = 0,
|
|
timeout;
|
|
|
|
|
|
init()
|
|
|
|
function init() {
|
|
document.querySelectorAll('.slide').forEach(function(slide) {
|
|
slides.push(slide)
|
|
var data = slideData[slides.length - 1] = load_slide(slide)
|
|
if (data.video && data.video.length) {
|
|
data.embed = init_embed(data)
|
|
}
|
|
})
|
|
go(0)
|
|
}
|
|
|
|
function go(idx) {
|
|
var old = current
|
|
slides[current].style.zIndex = 0
|
|
slides[idx].style.zIndex = 10
|
|
current = idx
|
|
if (timeout) {
|
|
clearTimeout(timeout)
|
|
timeout = null
|
|
}
|
|
timeout = setTimeout(next, Math.round(slides[current].dataset.duration) * 1000)
|
|
|
|
stop(old)
|
|
start(current)
|
|
}
|
|
|
|
function next() {
|
|
var idx = (current + 1) % slides.length
|
|
console.log(current, idx)
|
|
go(idx)
|
|
}
|
|
|
|
function previous() {
|
|
var idx = (current - 1) % slides.length
|
|
if (idx < 0) {
|
|
idx += slides.length
|
|
}
|
|
go(idx)
|
|
}
|
|
|
|
function start(idx) {
|
|
var data = slideData[idx]
|
|
console.log(current, data)
|
|
if (data.zoom_to) {
|
|
start_zoom(data)
|
|
} else if (data.video && data.video.length) {
|
|
start_video(data)
|
|
}
|
|
}
|
|
|
|
function stop(idx) {
|
|
var data = slideData[idx]
|
|
console.log(current, data)
|
|
if (data.zoom_to) {
|
|
reset_zoom(data)
|
|
} else if (data.video && data.video.length) {
|
|
pause_video(data)
|
|
}
|
|
}
|
|
|
|
function load_urls(dataset) {
|
|
var urls = [], idx = 0
|
|
while (dataset['url_' + idx]) {
|
|
urls.push(dataset['url_' + idx])
|
|
idx += 1
|
|
}
|
|
return urls
|
|
}
|
|
|
|
function load_slide(slide) {
|
|
var data = {}
|
|
data.duration = slide.dataset.duration
|
|
var video = slide.querySelector('.video')
|
|
if (video) {
|
|
data.video = load_urls(video.dataset)
|
|
data.container = video
|
|
// fixme only doucments
|
|
if (data.video.length == 2) {
|
|
data.zoom_from = data.video[0].split('/').pop().split('#')[0].split(',').map(a => Math.round(a))
|
|
data.zoom_to = data.video[1].split('/').pop().split('#')[0].split(',').map(a => Math.round(a))
|
|
}
|
|
}
|
|
return data
|
|
}
|
|
|
|
function init_embed(data) {
|
|
var embed = window.currentEmbed = new PandoraEmbed({
|
|
id: 'fixme',
|
|
url: data.video[0],
|
|
container: data.container
|
|
});
|
|
embed.on('init', function(data) {
|
|
});
|
|
return embed;
|
|
}
|
|
|
|
window.addEventListener('blur', function(){
|
|
setTimeout(function(){
|
|
// using the 'setTimout' to let the event pass the run loop
|
|
if (document.activeElement instanceof HTMLIFrameElement) {
|
|
window.focus();
|
|
}
|
|
},0);
|
|
}, false);
|
|
|
|
|
|
function reset_zoom(data) {
|
|
data.embed.postMessage('options', {
|
|
'area': data.zoom_from
|
|
})
|
|
}
|
|
|
|
function start_zoom(data) {
|
|
console.log('start zoon', Math.round(1000 * data.duration / 2))
|
|
setTimeout(function() {
|
|
console.log('now zoom')
|
|
data.embed.postMessage('options', {
|
|
'area': data.zoom_to
|
|
})
|
|
}, Math.round(1000 * data.duration / 2))
|
|
}
|
|
|
|
|
|
function start_video(data) {
|
|
data.embed.postMessage('options', {
|
|
'paused': false
|
|
})
|
|
}
|
|
|
|
function pause_video(data) {
|
|
data.embed.postMessage('options', {
|
|
'paused': true
|
|
})
|
|
}
|
|
|
|
document.addEventListener('keydown', function(event) {
|
|
if (event.key == 'ArrowRight') {
|
|
next()
|
|
event.preventDefault()
|
|
} else if (event.key == 'ArrowLeft') {
|
|
previous()
|
|
event.preventDefault()
|
|
}
|
|
}, false)
|