xobs/fossasia-22-renode
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/hakimel/reveal.js

Browse Source 
Conflicts:
	README.md
	index.html
	js/reveal.js
	package.json
	plugin/speakernotes/client.js
This commit is contained in:
David Banham
2013-03-08 10:29:54 +11:00
parent 26d5febd7f 7081f901da
commit 61c229a4f9
50 changed files with 5738 additions and 2716 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
plugin/highlight/highlight.js Normal file
View File

File diff suppressed because one or more lines are too long

97
plugin/markdown/example.html Normal file
View File

@ -0,0 +1,97 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - Markdown Demo</title>
<link rel="stylesheet" href="../../css/reveal.css">
<link rel="stylesheet" href="../../css/theme/default.css" id="theme">
</head>
<body>
<div class="reveal">
<div class="slides">
<!-- Use external markdown resource, and separate slides by three newlines; vertical slides by two newlines -->
<section data-markdown="example.md" data-separator="^\n\n\n" data-vertical="^\n\n"></section>
<!-- Slides are separated by three dashes (quick 'n dirty regular expression) -->
<section data-markdown data-separator="---">
<script type="text/template">
## Demo 1
Slide 1
---
## Demo 1
Slide 2
---
## Demo 1
Slide 3
</script>
</section>
<!-- Slides are separated by newline + three dashes + newline, vertical slides identical but two dashes -->
<section data-markdown data-separator="^\n---\n$" data-vertical="^\n--\n$">
<script type="text/template">
## Demo 2
Slide 1.1
--
## Demo 2
Slide 1.2
---
## Demo 2
Slide 2
</script>
</section>
<!-- No "extra" slides, since there are no separators defined (so they'll become horizontal rulers) -->
<section data-markdown>
<script type="text/template">
A
---
B
---
C
</script>
</section>
</div>
</div>
<script src="../../lib/js/head.min.js"></script>
<script src="../../js/reveal.js"></script>
<script>
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
theme: Reveal.getQueryHash().theme,
transition: Reveal.getQueryHash().transition || 'default',
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: '../../lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }
]
});
</script>
</body>
</html>

29
plugin/markdown/example.md Normal file
View File

@ -0,0 +1,29 @@
# Markdown Demo
## External 1.1
Content 1.1
## External 1.2
Content 1.2
## External 2
Content 2.1
## External 3.1
Content 3.1
## External 3.2
Content 3.2

147
plugin/markdown/markdown.js Normal file
View File

@ -0,0 +1,147 @@
// From https://gist.github.com/1343518
// Modified by Hakim to handle Markdown indented with tabs
(function(){
if( typeof Showdown === 'undefined' ) {
throw 'The reveal.js Markdown plugin requires Showdown to be loaded';
}
var stripLeadingWhitespace = function(section) {
var template = section.querySelector( 'script' );
// strip leading whitespace so it isn't evaluated as code
var text = ( template || section ).textContent;
var leadingWs = text.match(/^\n?(\s*)/)[1].length,
leadingTabs = text.match(/^\n?(\t*)/)[1].length;
if( leadingTabs > 0 ) {
text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}','g'), '\n' );
}
else if( leadingWs > 1 ) {
text = text.replace( new RegExp('\\n? {' + leadingWs + '}','g'), '\n' );
}
return text;
};
var slidifyMarkdown = function(markdown, separator, vertical) {
separator = separator || '^\n---\n$';
var reSeparator = new RegExp(separator + (vertical ? '|' + vertical : ''), 'mg'),
reHorSeparator = new RegExp(separator),
matches,
lastIndex = 0,
isHorizontal,
wasHorizontal = true,
content,
sectionStack = [],
markdownSections = '';
// iterate until all blocks between separators are stacked up
while( matches = reSeparator.exec(markdown) ) {
// determine direction (horizontal by default)
isHorizontal = reHorSeparator.test(matches[0]);
if( !isHorizontal && wasHorizontal ) {
// create vertical stack
sectionStack.push([]);
}
// pluck slide content from markdown input
content = markdown.substring(lastIndex, matches.index);
if( isHorizontal && wasHorizontal ) {
// add to horizontal stack
sectionStack.push(content);
} else {
// add to vertical stack
sectionStack[sectionStack.length-1].push(content);
}
lastIndex = reSeparator.lastIndex;
wasHorizontal = isHorizontal;
}
// add the remaining slide
(wasHorizontal ? sectionStack : sectionStack[sectionStack.length-1]).push(markdown.substring(lastIndex));
// flatten the hierarchical stack, and insert <section data-markdown> tags
for( var k = 0, klen = sectionStack.length; k < klen; k++ ) {
markdownSections += typeof sectionStack[k] === 'string'
? '<section data-markdown>' + sectionStack[k] + '</section>'
: '<section><section data-markdown>' + sectionStack[k].join('</section><section data-markdown>') + '</section></section>';
}
return markdownSections;
};
var querySlidingMarkdown = function() {
var sections = document.querySelectorAll( '[data-markdown]'),
section;
for( var j = 0, jlen = sections.length; j < jlen; j++ ) {
section = sections[j];
if( section.getAttribute('data-markdown').length ) {
var xhr = new XMLHttpRequest(),
url = section.getAttribute('data-markdown');
xhr.onreadystatechange = function () {
if( xhr.readyState === 4 ) {
section.outerHTML = slidifyMarkdown( xhr.responseText, section.getAttribute('data-separator'), section.getAttribute('data-vertical') );
}
};
xhr.open('GET', url, false);
xhr.send();
} else if( section.getAttribute('data-separator') ) {
var markdown = stripLeadingWhitespace(section);
section.outerHTML = slidifyMarkdown( markdown, section.getAttribute('data-separator'), section.getAttribute('data-vertical') );
}
}
};
var queryMarkdownSlides = function() {
var sections = document.querySelectorAll( '[data-markdown]');
for( var j = 0, jlen = sections.length; j < jlen; j++ ) {
makeHtml(sections[j]);
}
};
var makeHtml = function(section) {
var notes = section.querySelector( 'aside.notes' );
var markdown = stripLeadingWhitespace(section);
section.innerHTML = (new Showdown.converter()).makeHtml(markdown);
if( notes ) {
section.appendChild( notes );
}
};
querySlidingMarkdown();
queryMarkdownSlides();
})();

62
plugin/markdown/showdown.js Normal file
View File

File diff suppressed because one or more lines are too long

26
plugin/speakernotes/client.js → plugin/notes-server/client.js
View File

@ -2,11 +2,31 @@
// don't emit events from inside the previews themselves
if ( window.location.search.match( /receiver/gi ) ) { return; }
var socket = io.connect('127.0.0.1:1947');
var socket = io.connect(window.location.origin);
var socketId = Math.random().toString().slice(2);
console.log('View slide notes at ' + window.location.origin + '/notes/' + socketId);
window.open(window.location.origin + '/notes/' + socketId, 'notes-' + socketId);
// Fires when a fragment is shown
Reveal.addEventListener( 'fragmentshown', function( event ) {
var fragmentData = {
fragment : 'next',
socketId : socketId
};
socket.emit('fragmentchanged', fragmentData);
} );
// Fires when a fragment is hidden
Reveal.addEventListener( 'fragmenthidden', function( event ) {
var fragmentData = {
fragment : 'previous',
socketId : socketId
};
socket.emit('fragmentchanged', fragmentData);
} );
// Fires when slide is changed
Reveal.addEventListener( 'slidechanged', function( event ) {
var nextindexh;
var nextindexv;
@ -27,7 +47,9 @@
indexv : event.indexv,
nextindexh : nextindexh,
nextindexv : nextindexv,
socketId : socketId
socketId : socketId,
markdown : notes ? typeof notes.getAttribute('data-markdown') === 'string' : false
};
socket.emit('slidechanged', slideData);

13
plugin/speakernotes/index.js → plugin/notes-server/index.js
View File

@ -18,10 +18,13 @@ io.sockets.on('connection', function(socket) {
socket.on('slidechanged', function(slideData) {
socket.broadcast.emit('slidedata', slideData);
});
socket.on('fragmentchanged', function(fragmentData) {
socket.broadcast.emit('fragmentdata', fragmentData);
});
});
app.configure(function() {
[ 'css', 'js', 'plugin', 'lib' ].forEach(function(dir) {
[ 'css', 'js', 'images', 'plugin', 'lib' ].forEach(function(dir) {
app.use('/' + dir, staticDir(opts.baseDir + dir));
});
});
@ -32,19 +35,19 @@ app.get("/", function(req, res) {
app.get("/notes/:socketId", function(req, res) {
fs.readFile(opts.baseDir + 'plugin/speakernotes/notes.html', function(err, data) {
fs.readFile(opts.baseDir + 'plugin/notes-server/notes.html', function(err, data) {
res.send(Mustache.to_html(data.toString(), {
socketId : req.params.socketId
}));
});
// fs.createReadStream(opts.baseDir + 'speakernotes/notes.html').pipe(res);
// fs.createReadStream(opts.baseDir + 'notes-server/notes.html').pipe(res);
});
// Actually listen
app.listen(opts.port || null);
var brown = '\033[33m',
green = '\033[32m',
var brown = '\033[33m',
green = '\033[32m',
reset = '\033[0m';
var slidesLocation = "http://localhost" + ( opts.port ? ( ':' + opts.port ) : '' );

60
plugin/speakernotes/notes.html → plugin/notes-server/notes.html
View File

@ -27,17 +27,23 @@
width: 1280px;
height: 1024px;
border: none;
-moz-transform: scale(0.5);
-moz-transform-origin: 0 0;
-o-transform: scale(0.5);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.5);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
#wrap-next-slide {
width: 320px;
height: 256px;
width: 448px;
height: 358px;
float: left;
margin: 0 0 0 10px;
overflow: hidden;
@ -47,12 +53,18 @@
width: 1280px;
height: 1024px;
border: none;
-moz-transform: scale(0.25);
-moz-transform-origin: 0 0;
-o-transform: scale(0.25);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.25);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(0.35);
-moz-transform: scale(0.35);
-ms-transform: scale(0.35);
-o-transform: scale(0.35);
transform: scale(0.35);
}
.slides {
@ -87,6 +99,7 @@
<div id="notes"></div>
<script src="/socket.io/socket.io.js"></script>
<script src="/plugin/markdown/showdown.js"></script>
<script>
var socketId = '{{socketId}}';
@ -99,9 +112,26 @@
// ignore data from sockets that aren't ours
if (data.socketId !== socketId) { return; }
notes.innerHTML = data.notes;
currentSlide.contentWindow.Reveal.navigateTo(data.indexh, data.indexv);
nextSlide.contentWindow.Reveal.navigateTo(data.nextindexh, data.nextindexv);
if (data.markdown) {
notes.innerHTML = (new Showdown.converter()).makeHtml(data.notes);
}
else {
notes.innerHTML = data.notes;
}
currentSlide.contentWindow.Reveal.slide(data.indexh, data.indexv);
nextSlide.contentWindow.Reveal.slide(data.nextindexh, data.nextindexv);
});
socket.on('fragmentdata', function(data) {
// ignore data from sockets that aren't ours
if (data.socketId !== socketId) { return; }
if (data.fragment === 'next') {
currentSlide.contentWindow.Reveal.nextFragment();
}
else if (data.fragment === 'previous') {
currentSlide.contentWindow.Reveal.prevFragment();
}
});
</script>

252
plugin/notes/notes.html Normal file
View File

@ -0,0 +1,252 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - Slide Notes</title>
<style>
body {
font-family: Helvetica;
}
#notes {
font-size: 24px;
width: 640px;
margin-top: 5px;
}
#wrap-current-slide {
width: 640px;
height: 512px;
float: left;
overflow: hidden;
}
#current-slide {
width: 1280px;
height: 1024px;
border: none;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
}
#wrap-next-slide {
width: 448px;
height: 358px;
float: left;
margin: 0 0 0 10px;
overflow: hidden;
}
#next-slide {
width: 1280px;
height: 1024px;
border: none;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: scale(0.35);
-moz-transform: scale(0.35);
-ms-transform: scale(0.35);
-o-transform: scale(0.35);
transform: scale(0.35);
}
.slides {
position: relative;
margin-bottom: 10px;
border: 1px solid black;
border-radius: 2px;
background: rgb(28, 30, 32);
}
.slides span {
position: absolute;
top: 3px;
left: 3px;
font-weight: bold;
font-size: 14px;
color: rgba( 255, 255, 255, 0.9 );
}
.error {
font-weight: bold;
color: red;
font-size: 1.5em;
text-align: center;
margin-top: 10%;
}
.error code {
font-family: monospace;
}
.time {
width: 448px;
margin: 30px 0 0 10px;
float: left;
text-align: center;
opacity: 0;
-webkit-transition: opacity 0.4s;
-moz-transition: opacity 0.4s;
-o-transition: opacity 0.4s;
transition: opacity 0.4s;
}
.elapsed,
.clock {
color: #333;
font-size: 2em;
text-align: center;
display: inline-block;
padding: 0.5em;
background-color: #eee;
border-radius: 10px;
}
.elapsed h2,
.clock h2 {
font-size: 0.8em;
line-height: 100%;
margin: 0;
color: #aaa;
}
.elapsed .mute {
color: #ddd;
}
</style>
</head>
<body>
<div id="wrap-current-slide" class="slides">
<script>document.write( '<iframe width="1280" height="1024" id="current-slide" src="'+ window.opener.location.href +'"></iframe>' );</script>
</div>
<div id="wrap-next-slide" class="slides">
<script>document.write( '<iframe width="640" height="512" id="next-slide" src="'+ window.opener.location.href +'"></iframe>' );</script>
<span>UPCOMING:</span>
</div>
<div class="time">
<div class="clock">
<h2>Time</h2>
<span id="clock">0:00:00 AM</span>
</div>
<div class="elapsed">
<h2>Elapsed</h2>
<span id="hours">00</span><span id="minutes">:00</span><span id="seconds">:00</span>
</div>
</div>
<div id="notes"></div>
<script src="../../plugin/markdown/showdown.js"></script>
<script>
window.addEventListener( 'load', function() {
if( window.opener && window.opener.location && window.opener.location.href ) {
var notes = document.getElementById( 'notes' ),
currentSlide = document.getElementById( 'current-slide' ),
nextSlide = document.getElementById( 'next-slide' );
window.addEventListener( 'message', function( event ) {
var data = JSON.parse( event.data );
// No need for updating the notes in case of fragment changes
if ( data.notes !== undefined) {
if( data.markdown ) {
notes.innerHTML = (new Showdown.converter()).makeHtml( data.notes );
}
else {
notes.innerHTML = data.notes;
}
}
// Showing and hiding fragments
if( data.fragment === 'next' ) {
currentSlide.contentWindow.Reveal.nextFragment();
}
else if( data.fragment === 'prev' ) {
currentSlide.contentWindow.Reveal.prevFragment();
}
else {
// Update the note slides
currentSlide.contentWindow.Reveal.slide( data.indexh, data.indexv );
nextSlide.contentWindow.Reveal.slide( data.nextindexh, data.nextindexv );
}
}, false );
var start = new Date(),
timeEl = document.querySelector( '.time' ),
clockEl = document.getElementById( 'clock' ),
hoursEl = document.getElementById( 'hours' ),
minutesEl = document.getElementById( 'minutes' ),
secondsEl = document.getElementById( 'seconds' );
setInterval( function() {
timeEl.style.opacity = 1;
var diff, hours, minutes, seconds,
now = new Date();
diff = now.getTime() - start.getTime();
hours = parseInt( diff / ( 1000 * 60 * 60 ) );
minutes = parseInt( ( diff / ( 1000 * 60 ) ) % 60 );
seconds = parseInt( ( diff / 1000 ) % 60 );
clockEl.innerHTML = now.toLocaleTimeString();
hoursEl.innerHTML = zeroPadInteger( hours );
hoursEl.className = hours > 0 ? "" : "mute";
minutesEl.innerHTML = ":" + zeroPadInteger( minutes );
minutesEl.className = minutes > 0 ? "" : "mute";
secondsEl.innerHTML = ":" + zeroPadInteger( seconds );
}, 1000 );
// Navigate the main window when the notes slide changes
currentSlide.contentWindow.Reveal.addEventListener( 'slidechanged', function( event ) {
window.opener.Reveal.slide( event.indexh, event.indexv );
} );
}
else {
document.body.innerHTML = '<p class="error">Unable to access <code>window.opener.location</code>.<br>Make sure the presentation is running on a web server.</p>';
}
}, false );
function zeroPadInteger( num ) {
var str = "00" + parseInt( num );
return str.substring( str.length - 2 );
}
</script>
</body>
</html>

100
plugin/notes/notes.js Normal file
View File

@ -0,0 +1,100 @@
/**
* Handles opening of and synchronization with the reveal.js
* notes window.
*/
var RevealNotes = (function() {
function openNotes() {
var jsFileLocation = document.querySelector('script[src$="notes.js"]').src; // this js file path
jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, ''); // the js folder path
var notesPopup = window.open( jsFileLocation + 'notes.html', 'reveal.js - Notes', 'width=1120,height=850' );
// Fires when slide is changed
Reveal.addEventListener( 'slidechanged', function( event ) {
post('slidechanged');
} );
// Fires when a fragment is shown
Reveal.addEventListener( 'fragmentshown', function( event ) {
post('fragmentshown');
} );
// Fires when a fragment is hidden
Reveal.addEventListener( 'fragmenthidden', function( event ) {
post('fragmenthidden');
} );
/**
* Posts the current slide data to the notes window
*
* @param {String} eventType Expecting 'slidechanged', 'fragmentshown'
* or 'fragmenthidden' set in the events above to define the needed
* slideDate.
*/
function post( eventType ) {
var slideElement = Reveal.getCurrentSlide(),
messageData;
if( eventType === 'slidechanged' ) {
var notes = slideElement.querySelector( 'aside.notes' ),
indexh = Reveal.getIndices().h,
indexv = Reveal.getIndices().v,
nextindexh,
nextindexv;
if( slideElement.nextElementSibling && slideElement.parentNode.nodeName == 'SECTION' ) {
nextindexh = indexh;
nextindexv = indexv + 1;
} else {
nextindexh = indexh + 1;
nextindexv = 0;
}
messageData = {
notes : notes ? notes.innerHTML : '',
indexh : indexh,
indexv : indexv,
nextindexh : nextindexh,
nextindexv : nextindexv,
markdown : notes ? typeof notes.getAttribute( 'data-markdown' ) === 'string' : false
};
}
else if( eventType === 'fragmentshown' ) {
messageData = {
fragment : 'next'
};
}
else if( eventType === 'fragmenthidden' ) {
messageData = {
fragment : 'prev'
};
}
notesPopup.postMessage( JSON.stringify( messageData ), '*' );
}
// Navigate to the current slide when the notes are loaded
notesPopup.addEventListener( 'load', function( event ) {
post('slidechanged');
}, false );
}
// If the there's a 'notes' query set, open directly
if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
openNotes();
}
// Open the notes when the 's' key is hit
document.addEventListener( 'keydown', function( event ) {
// Disregard the event if the target is editable or a
// modifier is present
if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return;
if( event.keyCode === 83 ) {
event.preventDefault();
openNotes();
}
}, false );
return { open: openNotes };
})();

39
plugin/postmessage/example.html Normal file
View File

@ -0,0 +1,39 @@
<html>
<body>
<iframe id="reveal" src="../../index.html" style="border: 0;" width="500" height="500"></iframe>
<div>
<input id="back" type="button" value="go back"/>
<input id="ahead" type="button" value="go ahead"/>
<input id="slideto" type="button" value="slideto 2-2"/>
</div>
<script>
(function (){
var back = document.getElementById( 'back' ),
ahead = document.getElementById( 'ahead' ),
slideto = document.getElementById( 'slideto' ),
reveal = window.frames[0];
back.addEventListener( 'click', function () {
reveal.postMessage( JSON.stringify({method: 'prev', args: []}), '*' );
}, false );
ahead.addEventListener( 'click', function (){
reveal.postMessage( JSON.stringify({method: 'next', args: []}), '*' );
}, false );
slideto.addEventListener( 'click', function (){
reveal.postMessage( JSON.stringify({method: 'slide', args: [2,2]}), '*' );
}, false );
}());
</script>
</body>
</html>

42
plugin/postmessage/postmessage.js Normal file
View File

@ -0,0 +1,42 @@
/*
simple postmessage plugin
Useful when a reveal slideshow is inside an iframe.
It allows to call reveal methods from outside.
Example:
var reveal = window.frames[0];
// Reveal.prev();
reveal.postMessage(JSON.stringify({method: 'prev', args: []}), '*');
// Reveal.next();
reveal.postMessage(JSON.stringify({method: 'next', args: []}), '*');
// Reveal.slide(2, 2);
reveal.postMessage(JSON.stringify({method: 'slide', args: [2,2]}), '*');
Add to the slideshow:
dependencies: [
...
{ src: 'plugin/postmessage/postmessage.js', async: true, condition: function() { return !!document.body.classList; } }
]
*/
(function (){
window.addEventListener( "message", function ( event ) {
var data = JSON.parse( event.data ),
method = data.method,
args = data.args;
if( typeof Reveal[method] === 'function' ) {
Reveal[method].apply( Reveal, data.args );
}
}, false);
}());

39
plugin/print-pdf/print-pdf.js Normal file
View File

@ -0,0 +1,39 @@
/**
* phantomjs script for printing presentations to PDF.
*
* Example:
* phantomjs print-pdf.js "http://lab.hakim.se/reveal-js?print-pdf" reveal-demo.pdf
*
* By Manuel Bieh (https://github.com/manuelbieh)
*/
// html2pdf.js
var page = new WebPage();
var system = require( 'system' );
page.paperSize = {
format: 'A4',
orientation: 'landscape',
margin: {
left: '0',
right: '0',
top: '0',
bottom: '0'
}
};
page.zoomFactor = 1.5;
var revealFile = system.args[1] || 'index.html?print-pdf';
var slideFile = system.args[2] || 'slides.pdf';
if( slideFile.match( /\.pdf$/gi ) === null ) {
slideFile += '.pdf';
}
console.log( 'Printing PDF...' );
page.open( revealFile, function( status ) {
console.log( 'Printed succesfully' );
page.render( slideFile );
phantom.exit();
} );

30
plugin/remotes/remotes.js Normal file
View File

@ -0,0 +1,30 @@
/**
* Touch-based remote controller for your presentation courtesy
* of the folks at http://remotes.io
*/
(function(window){
/**
* Detects if we are dealing with a touch enabled device (with some false positives)
* Borrowed from modernizr: https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touch.js
*/
var hasTouch = (function(){
return ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
})();
if(!hasTouch){
head.ready( 'remotes.ne.min.js', function() {
new Remotes("preview")
.on("swipe-left", function(e){ Reveal.right(); })
.on("swipe-right", function(e){ Reveal.left(); })
.on("swipe-up", function(e){ Reveal.down(); })
.on("swipe-down", function(e){ Reveal.up(); })
.on("tap", function(e){
Reveal.toggleOverview();
});
} );
head.js('https://raw.github.com/Remotes/Remotes/master/dist/remotes.ne.min.js');
}
})(window);

256
plugin/zoom-js/zoom.js Normal file
View File

@ -0,0 +1,256 @@
// Custom reveal.js integration
(function(){
var isEnabled = true;
document.querySelector( '.reveal' ).addEventListener( 'mousedown', function( event ) {
if( event.altKey && isEnabled ) {
event.preventDefault();
zoom.to({ element: event.target, pan: false });
}
} );
Reveal.addEventListener( 'overviewshown', function() { isEnabled = false; } );
Reveal.addEventListener( 'overviewhidden', function() { isEnabled = true; } );
})();
/*!
* zoom.js 0.2 (modified version for use with reveal.js)
* http://lab.hakim.se/zoom-js
* MIT licensed
*
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/
var zoom = (function(){
// The current zoom level (scale)
var level = 1;
// The current mouse position, used for panning
var mouseX = 0,
mouseY = 0;
// Timeout before pan is activated
var panEngageTimeout = -1,
panUpdateInterval = -1;
var currentOptions = null;
// Check for transform support so that we can fallback otherwise
var supportsTransforms = 'WebkitTransform' in document.body.style ||
'MozTransform' in document.body.style ||
'msTransform' in document.body.style ||
'OTransform' in document.body.style ||
'transform' in document.body.style;
if( supportsTransforms ) {
// The easing that will be applied when we zoom in/out
document.body.style.transition = 'transform 0.8s ease';
document.body.style.OTransition = '-o-transform 0.8s ease';
document.body.style.msTransition = '-ms-transform 0.8s ease';
document.body.style.MozTransition = '-moz-transform 0.8s ease';
document.body.style.WebkitTransition = '-webkit-transform 0.8s ease';
}
// Zoom out if the user hits escape
document.addEventListener( 'keyup', function( event ) {
if( level !== 1 && event.keyCode === 27 ) {
zoom.out();
}
}, false );
// Monitor mouse movement for panning
document.addEventListener( 'mousemove', function( event ) {
if( level !== 1 ) {
mouseX = event.clientX;
mouseY = event.clientY;
}
}, false );
/**
* Applies the CSS required to zoom in, prioritizes use of CSS3
* transforms but falls back on zoom for IE.
*
* @param {Number} pageOffsetX
* @param {Number} pageOffsetY
* @param {Number} elementOffsetX
* @param {Number} elementOffsetY
* @param {Number} scale
*/
function magnify( pageOffsetX, pageOffsetY, elementOffsetX, elementOffsetY, scale ) {
if( supportsTransforms ) {
var origin = pageOffsetX +'px '+ pageOffsetY +'px',
transform = 'translate('+ -elementOffsetX +'px,'+ -elementOffsetY +'px) scale('+ scale +')';
document.body.style.transformOrigin = origin;
document.body.style.OTransformOrigin = origin;
document.body.style.msTransformOrigin = origin;
document.body.style.MozTransformOrigin = origin;
document.body.style.WebkitTransformOrigin = origin;
document.body.style.transform = transform;
document.body.style.OTransform = transform;
document.body.style.msTransform = transform;
document.body.style.MozTransform = transform;
document.body.style.WebkitTransform = transform;
}
else {
// Reset all values
if( scale === 1 ) {
document.body.style.position = '';
document.body.style.left = '';
document.body.style.top = '';
document.body.style.width = '';
document.body.style.height = '';
document.body.style.zoom = '';
}
// Apply scale
else {
document.body.style.position = 'relative';
document.body.style.left = ( - ( pageOffsetX + elementOffsetX ) / scale ) + 'px';
document.body.style.top = ( - ( pageOffsetY + elementOffsetY ) / scale ) + 'px';
document.body.style.width = ( scale * 100 ) + '%';
document.body.style.height = ( scale * 100 ) + '%';
document.body.style.zoom = scale;
}
}
level = scale;
if( level !== 1 && document.documentElement.classList ) {
document.documentElement.classList.add( 'zoomed' );
}
else {
document.documentElement.classList.remove( 'zoomed' );
}
}
/**
* Pan the document when the mosue cursor approaches the edges
* of the window.
*/
function pan() {
var range = 0.12,
rangeX = window.innerWidth * range,
rangeY = window.innerHeight * range,
scrollOffset = getScrollOffset();
// Up
if( mouseY < rangeY ) {
window.scroll( scrollOffset.x, scrollOffset.y - ( 1 - ( mouseY / rangeY ) ) * ( 14 / level ) );
}
// Down
else if( mouseY > window.innerHeight - rangeY ) {
window.scroll( scrollOffset.x, scrollOffset.y + ( 1 - ( window.innerHeight - mouseY ) / rangeY ) * ( 14 / level ) );
}
// Left
if( mouseX < rangeX ) {
window.scroll( scrollOffset.x - ( 1 - ( mouseX / rangeX ) ) * ( 14 / level ), scrollOffset.y );
}
// Right
else if( mouseX > window.innerWidth - rangeX ) {
window.scroll( scrollOffset.x + ( 1 - ( window.innerWidth - mouseX ) / rangeX ) * ( 14 / level ), scrollOffset.y );
}
}
function getScrollOffset() {
return {
x: window.scrollX !== undefined ? window.scrollX : window.pageXOffset,
y: window.scrollY !== undefined ? window.scrollY : window.pageXYffset
}
}
return {
/**
* Zooms in on either a rectangle or HTML element.
*
* @param {Object} options
* - element: HTML element to zoom in on
* OR
* - x/y: coordinates in non-transformed space to zoom in on
* - width/height: the portion of the screen to zoom in on
* - scale: can be used instead of width/height to explicitly set scale
*/
to: function( options ) {
// Due to an implementation limitation we can't zoom in
// to another element without zooming out first
if( level !== 1 ) {
zoom.out();
}
else {
options.x = options.x || 0;
options.y = options.y || 0;
// If an element is set, that takes precedence
if( !!options.element ) {
// Space around the zoomed in element to leave on screen
var padding = 20;
options.width = options.element.getBoundingClientRect().width + ( padding * 2 );
options.height = options.element.getBoundingClientRect().height + ( padding * 2 );
options.x = options.element.getBoundingClientRect().left - padding;
options.y = options.element.getBoundingClientRect().top - padding;
}
// If width/height values are set, calculate scale from those values
if( options.width !== undefined && options.height !== undefined ) {
options.scale = Math.max( Math.min( window.innerWidth / options.width, window.innerHeight / options.height ), 1 );
}
if( options.scale > 1 ) {
options.x *= options.scale;
options.y *= options.scale;
var scrollOffset = getScrollOffset();
if( options.element ) {
scrollOffset.x -= ( window.innerWidth - ( options.width * options.scale ) ) / 2;
}
magnify( scrollOffset.x, scrollOffset.y, options.x, options.y, options.scale );
if( options.pan !== false ) {
// Wait with engaging panning as it may conflict with the
// zoom transition
panEngageTimeout = setTimeout( function() {
panUpdateInterval = setInterval( pan, 1000 / 60 );
}, 800 );
}
}
currentOptions = options;
}
},
/**
* Resets the document zoom state to its default.
*/
out: function() {
clearTimeout( panEngageTimeout );
clearInterval( panUpdateInterval );
var scrollOffset = getScrollOffset();
if( currentOptions && currentOptions.element ) {
scrollOffset.x -= ( window.innerWidth - ( currentOptions.width * currentOptions.scale ) ) / 2;
}
magnify( scrollOffset.x, scrollOffset.y, 0, 0, 1 );
level = 1;
},
// Alias
magnify: function( options ) { this.to( options ) },
reset: function() { this.out() },
zoomLevel: function() {
return level;
}
}
})();