some form on presentation demo
This commit is contained in:
parent
d7864c6d36
commit
54896ff1c3
56
example/example.css
Normal file
56
example/example.css
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
152
example/example.js
Normal file
152
example/example.js
Normal file
|
|
@ -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)
|
||||||
45
example/index.html
Normal file
45
example/index.html
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<script src="../lib/PandoraEmbed.js"></script>
|
||||||
|
<link type="text/css" href="example.css" rel="stylesheet" />
|
||||||
|
<div class="base">
|
||||||
|
</div>
|
||||||
|
<div class="slide" data-duration="5">
|
||||||
|
<div class="title">FROM JANTA COLONY TO JANTA COLONY</div>
|
||||||
|
</div>
|
||||||
|
<div class="slide" data-duration="5">
|
||||||
|
<div class="title">
|
||||||
|
At first, three stories from the year 1950 in Bombay
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slide" data-duration="10">
|
||||||
|
<div class="title">
|
||||||
|
ONE
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="slide" data-duration="60">
|
||||||
|
<div class="title">
|
||||||
|
The "rationing" of living space
|
||||||
|
</div>
|
||||||
|
<div class="video"
|
||||||
|
data-url_0="https://pad.ma/documents/AFL/0,0,6580,3763#embed"
|
||||||
|
data-url_1="https://pad.ma/documents/AFL/1568,1461,3352,2401#embed"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<div class="slide" data-duration="10">
|
||||||
|
<div class="title">
|
||||||
|
The Times of India on 23rd July
|
||||||
|
</div>
|
||||||
|
<div class="video"
|
||||||
|
data-url_0="https://pad.ma/documents/ADZ/0,0,6554,5409#embed",
|
||||||
|
data-url_1="https://pad.ma/documents/ADZ/3836,2088,6401,3440#embed"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<div class="slide" data-duration="15">
|
||||||
|
<div class="video" data-url_0="https://pad.ma/BVF/editor/F#embed"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<div class="slide" data-duration="15">
|
||||||
|
<div class="video" data-url_0="https://indiancine.ma/AKDP/editor/BFR#embed"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<script src="example.js"></script>
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<title>Subscribe to events from pad.ma iframe embed</title>
|
<title>Subscribe to events from pad.ma iframe embed</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<iframe width="640" height="360" src="http://10.0.3.230/A/editor/C#embed" frameborder="0" allowfullscreen id="padembed"></iframe>
|
<iframe width="640" height="360" src="http://pandora/documents/I/649,254,1289,723#embed" frameborder="0" allowfullscreen id="padembed"></iframe>
|
||||||
<button id="setUrl">
|
<button id="setUrl">
|
||||||
Set Iframe URL
|
Set Iframe URL
|
||||||
</button>
|
</button>
|
||||||
|
|
@ -50,7 +50,7 @@ document.getElementById('setUrl').addEventListener('click', function(e) {
|
||||||
$iframe.addEventListener('load', () => {
|
$iframe.addEventListener('load', () => {
|
||||||
let timeout;
|
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.
|
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() {
|
function init() {
|
||||||
|
|
@ -72,4 +72,4 @@ $iframe.addEventListener('load', () => {
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user