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>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user