From 16d7ffa19a876d493aff865b796d65025484a494 Mon Sep 17 00:00:00 2001 From: Sanjay Bhangar Date: Sat, 17 Mar 2018 14:42:14 +0530 Subject: [PATCH 1/2] refactor to a Slide class --- example/example.js | 315 ++++++++++++++++++++++++--------------------- 1 file changed, 168 insertions(+), 147 deletions(-) diff --git a/example/example.js b/example/example.js index e815238..065f6ec 100644 --- a/example/example.js +++ b/example/example.js @@ -1,3 +1,163 @@ +class Slide { + constructor(slide, idx) { + this.isInit = false + this.el = slide + this.idx = idx + this.duration = slide.dataset.duration + const video = slide.querySelector('.video') + if (video) { + this.video = load_urls(video.dataset) + this.videoVolume = video.dataset.volume ? parseFloat(video.dataset.volume) : 1 + this.videoContainer = video + if (this.video.length > 1) { + this.zooms = this.video.map(url => url.split('/').pop().split('#')[0].split(',').map(a => Math.round(a))) + } + } + const audio = slide.querySelector('.audio') + if (audio) { + this.audio = audio.dataset.url // audio does not need to be an array + this.audioVolume = audio.dataset.volume ? parseFloat(audio.dataset.volume) : 1 + this.audioContainer = audio + this.audioContinue = !!audio.dataset.continue + } + this.initEmbeds() + return this + } + + initEmbeds() { + if (this.video) { + const videoEmbed = this.videoEmbed = new PandoraEmbed({ + id: 'slide-' + this.idx, + url: this.video[0], + container: this.videoContainer + }) + + videoEmbed.on('init', (data) => { + this.isVideoInit = true + }) + + videoEmbed.on('playing', (positionData) => { + if (!this.videoStart) { + this.videoStart = positionData.position + } + }) + } + + if (this.audio) { + const audioEmbed = this.audioEmbed = new PandoraEmbed({ + id: 'audio-' + this.idx, + url: this.audio, + container: this.audioContainer + }) + + audioEmbed.on('init', (data) => { + this.isAudioInit = true + }) + + audioEmbed.on('playing', (positionData) => { + if (!this.audioStart) { + this.audioStart = positionData.position + } + }) + } + + return this; + } + + sendToBack() { + this.el.style.zIndex = 0 + return this + } + + bringToFront() { + this.el.style.zIndex = 10 + return this + } + + start() { + if (this.zooms) { + this.startZoom() + } else if (this.video && this.video.length) { + this.startVideo() + } + if (this.audioContainer) { // if there is an audio container, we always stop current audio + reset_active_audio() + } + if (this.audio) { + this.startAudio() + } + return this + } + + stop() { + if (this.zooms) { + this.resetZoom() + } else if (this.video && this.video.length) { + this.resetVideo() + } + if (this.audio && !this.audioContinue) { + this.resetAudio() + } + return this + } + + startZoom() { + for (var i=1; i { + this.zoomTimeouts.push(setTimeout(() => { + this.videoEmbed.postMessage('options', { + 'area': this.zooms[j] + }) + }, Math.round(1000 * (this.duration / this.zooms.length) * j))) + })(i); + } + return this + } + + startVideo() { + this.videoEmbed.postMessage('options', { + 'paused': false, + 'volume': this.videoVolume + }) + return this + } + + startAudio() { + this.audioEmbed.postMessage('options', { + 'paused': false, + 'volume': this.audioVolume + }) + activeAudio = this + return this + } + + resetZoom() { + this.zoomTimeouts.forEach(timeout => clearTimeout(timeout)) + this.videoEmbed.postMessage('options', { + 'area': this.zooms[0] + }) + return this + } + + resetVideo() { + this.videoEmbed.postMessage('options', { + 'paused': true, + 'position': this.start || 0 + }) + return this + } + + resetAudio() { + this.audioEmbed.postMessage('options', { + 'paused': true, + 'position': 0 //FIXME: figure correct audio reset + }) + activeAudio = null; + return this + } +} + var slides = [], slideData = [], current = 0, @@ -8,33 +168,25 @@ var slides = [], init() function init() { - document.querySelectorAll('.slide').forEach(function(slide) { - slides.push(slide) - var data = slideData[slides.length - 1] = load_slide(slide); - data.idx = slides.length - 1; - if (data.video && data.video.length) { - data.embed = init_embed(data) - } - if (data.audio) { - data.audioEmbed = init_audio_embed(data) - } + document.querySelectorAll('.slide').forEach(function(slide, idx) { + slides.push(new Slide(slide, idx)) }) go(0) } function go(idx) { var old = current - slides[current].style.zIndex = 0 - slides[idx].style.zIndex = 10 + slides[current].sendToBack() + slides[idx].bringToFront() current = idx if (timeout) { clearTimeout(timeout) timeout = null } - timeout = setTimeout(next, Math.round(slides[current].dataset.duration) * 1000) + timeout = setTimeout(next, Math.round(slides[current].duration) * 1000) - stop(old) - start(current) + slides[old].stop() + slides[current].start() } function next() { @@ -51,34 +203,6 @@ function previous() { go(idx) } -function start(idx) { - var data = slideData[idx] - console.log('start', current, data) - if (data.zooms) { - start_zoom(data) - } else if (data.video && data.video.length) { - start_video(data) - } - if (data.audioContainer) { // if there is an audio container, we always stop current audio - reset_active_audio(); - } - if (data.audio) { - start_audio(data) - } -} - -function stop(idx) { - var data = slideData[idx] - console.log(current, data) - if (data.zooms) { - reset_zoom(data) - } else if (data.video && data.video.length) { - reset_video(data) - } - if (data.audio && !data.audioContinue) { - reset_audio(data) - } -} function load_urls(dataset) { var urls = [], idx = 0 @@ -89,56 +213,6 @@ function load_urls(dataset) { 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.videoVolume = video.dataset.volume ? parseFloat(video.dataset.volume) : 1 - data.container = video - - // assumes documents if length > 1 - if (data.video.length > 1) { - data.zooms = data.video.map(url => url.split('/').pop().split('#')[0].split(',').map(a => Math.round(a))) - } - } - var audio = slide.querySelector('.audio') - if (audio) { - data.audio = audio.dataset.url // audio does not need to be an array - data.audioVolume = audio.dataset.volume ? parseFloat(audio.dataset.volume) : 1 - data.audioContainer = audio - console.log('continue', audio.dataset.continue) - data.audioContinue = !!audio.dataset.continue - } - return data -} - -function init_embed(data) { - var embed = window.currentEmbed = new PandoraEmbed({ - id: 'slide-' + data.idx, - url: data.video[0], - container: data.container - }); - embed.on('init', function(data) { - - }); - embed.on('playing', function(positionData) { - if (!slideData[data.idx].start) { - slideData[data.idx].start = positionData.position; - } - }); - - return embed; -} - -function init_audio_embed(data) { - return new PandoraEmbed({ - id: 'slide-audio-' + data.idx, - url: data.audio, - container: data.audioContainer - }) -} window.addEventListener('blur', function(){ setTimeout(function(){ @@ -150,62 +224,9 @@ window.addEventListener('blur', function(){ }, false); -function reset_zoom(data) { - data.zoomTimeouts.forEach(timeout => clearTimeout(timeout)) - data.embed.postMessage('options', { - 'area': data.zooms[0] - }) -} - -function start_zoom(data) { - // console.log('start zoon', Math.round(1000 * data.duration / 2)) - - for (var i=1; i Date: Sat, 17 Mar 2018 15:14:24 +0530 Subject: [PATCH 2/2] remove unused slideData variable --- example/example.js | 1 - 1 file changed, 1 deletion(-) diff --git a/example/example.js b/example/example.js index 065f6ec..e8955b4 100644 --- a/example/example.js +++ b/example/example.js @@ -159,7 +159,6 @@ class Slide { } var slides = [], - slideData = [], current = 0, activeAudio, timeout; -- 2.17.1