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>
|
||||
</head>
|
||||
<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">
|
||||
Set Iframe URL
|
||||
</button>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user