From 54896ff1c39b1a77ab74c33f7bf28802096cab0a Mon Sep 17 00:00:00 2001 From: j Date: Fri, 9 Mar 2018 21:46:02 +0530 Subject: [PATCH] some form on presentation demo --- example/example.css | 56 ++++++++++++++++ example/example.js | 152 ++++++++++++++++++++++++++++++++++++++++++++ example/index.html | 45 +++++++++++++ index.html | 6 +- 4 files changed, 256 insertions(+), 3 deletions(-) create mode 100644 example/example.css create mode 100644 example/example.js create mode 100644 example/index.html diff --git a/example/example.css b/example/example.css new file mode 100644 index 0000000..f9ca359 --- /dev/null +++ b/example/example.css @@ -0,0 +1,56 @@ +body { + background-color: black; + color: white; + font-family: sans-serif; + font-size: 18px; + height: 100%; + margin: 0; + overflow: hidden; + width: 100%; +} + +.base { + z-index: 1; + background: black; + position: absolute; + width: 100%; + height: 100%; +} + +.slide { + z-index: 0; + position: absolute; + width: 100%; + height: 100%; + text-shadow: + -2px -2px 0 #000, + 2px -2px 0 #000, + -2px 2px 0 #000, + 2px 2px 0 #000; + +} +.title { + font-size: 48px; + margin-left: 16px; + margin-right: 16px; + margin-top: 30%; + text-align: center; + + position: fixed; + z-index: 10; + height: 56px; + width: 100%; +} + +.video { + position: fixed; + width: 100%; + height: 100%; +} +.video iframe { + width: 100%; + height: 100%; + border: 0; + margin: 0; + padding: 0; +} diff --git a/example/example.js b/example/example.js new file mode 100644 index 0000000..6554041 --- /dev/null +++ b/example/example.js @@ -0,0 +1,152 @@ +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) diff --git a/example/index.html b/example/index.html new file mode 100644 index 0000000..18490c3 --- /dev/null +++ b/example/index.html @@ -0,0 +1,45 @@ + + + +
+
+
+
FROM JANTA COLONY TO JANTA COLONY
+
+
+
+ At first, three stories from the year 1950 in Bombay +
+
+
+
+ ONE +
+
+
+
+ The "rationing" of living space +
+
+
+
+
+ The Times of India on 23rd July +
+
+
+
+
+
+
+
+
+ diff --git a/index.html b/index.html index 448fc2c..c91d586 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ Subscribe to events from pad.ma iframe embed - + @@ -50,7 +50,7 @@ document.getElementById('setUrl').addEventListener('click', function(e) { $iframe.addEventListener('load', () => { let timeout; - /* +/* We can't be sure that the JS inside the iframe will be fully loaded and ready to receive messages. Therefore, we need to keep resending the init event until we are sure we've received the acknowledgement reply from the embed. This function calls itself every 250ms until `isInit` on the iframe object is set to true. The listener above sets this to true once it received the init acknowledgement. */ function init() { @@ -72,4 +72,4 @@ $iframe.addEventListener('load', () => { - \ No newline at end of file +