18 |
19 |
103 |
104 |
105 |
106 |
107 |
108 |
127 |
128 |
129 |
130 |
--------------------------------------------------------------------------------
/plugin/markdown/example.md:
--------------------------------------------------------------------------------
1 | # Markdown Demo
2 |
3 |
4 |
5 | ## External 1.1
6 |
7 | Content 1.1
8 |
9 | Note: This will only appear in the speaker notes window.
10 |
11 |
12 | ## External 1.2
13 |
14 | Content 1.2
15 |
16 |
17 |
18 | ## External 2
19 |
20 | Content 2.1
21 |
22 |
23 |
24 | ## External 3.1
25 |
26 | Content 3.1
27 |
28 |
29 | ## External 3.2
30 |
31 | Content 3.2
32 |
--------------------------------------------------------------------------------
/plugin/math/math.js:
--------------------------------------------------------------------------------
1 | /**
2 | * A plugin which enables rendering of math equations inside
3 | * of reveal.js slides. Essentially a thin wrapper for MathJax.
4 | *
5 | * @author Hakim El Hattab
6 | */
7 | var RevealMath = window.RevealMath || (function(){
8 |
9 | var options = Reveal.getConfig().math || {};
10 | options.mathjax = options.mathjax || 'https://cdn.mathjax.org/mathjax/latest/MathJax.js';
11 | options.config = options.config || 'TeX-AMS_HTML-full';
12 |
13 | loadScript( options.mathjax + '?config=' + options.config, function() {
14 |
15 | MathJax.Hub.Config({
16 | messageStyle: 'none',
17 | tex2jax: {
18 | inlineMath: [['$','$'],['\\(','\\)']] ,
19 | skipTags: ['script','noscript','style','textarea','pre']
20 | },
21 | skipStartupTypeset: true
22 | });
23 |
24 | // Typeset followed by an immediate reveal.js layout since
25 | // the typesetting process could affect slide height
26 | MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub ] );
27 | MathJax.Hub.Queue( Reveal.layout );
28 |
29 | // Reprocess equations in slides when they turn visible
30 | Reveal.addEventListener( 'slidechanged', function( event ) {
31 |
32 | MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, event.currentSlide ] );
33 |
34 | } );
35 |
36 | } );
37 |
38 | function loadScript( url, callback ) {
39 |
40 | var head = document.querySelector( 'head' );
41 | var script = document.createElement( 'script' );
42 | script.type = 'text/javascript';
43 | script.src = url;
44 |
45 | // Wrapper for callback to make sure it only fires once
46 | var finish = function() {
47 | if( typeof callback === 'function' ) {
48 | callback.call();
49 | callback = null;
50 | }
51 | }
52 |
53 | script.onload = finish;
54 |
55 | // IE
56 | script.onreadystatechange = function() {
57 | if ( this.readyState === 'loaded' ) {
58 | finish();
59 | }
60 | }
61 |
62 | // Normal browsers
63 | head.appendChild( script );
64 |
65 | }
66 |
67 | })();
68 |
--------------------------------------------------------------------------------
/plugin/multiplex/client.js:
--------------------------------------------------------------------------------
1 | (function() {
2 | var multiplex = Reveal.getConfig().multiplex;
3 | var socketId = multiplex.id;
4 | var socket = io.connect(multiplex.url);
5 |
6 | socket.on(multiplex.id, function(data) {
7 | // ignore data from sockets that aren't ours
8 | if (data.socketId !== socketId) { return; }
9 | if( window.location.host === 'localhost:1947' ) return;
10 |
11 | Reveal.setState(data.state);
12 | });
13 | }());
14 |
--------------------------------------------------------------------------------
/plugin/multiplex/index.js:
--------------------------------------------------------------------------------
1 | var http = require('http');
2 | var express = require('express');
3 | var fs = require('fs');
4 | var io = require('socket.io');
5 | var crypto = require('crypto');
6 |
7 | var app = express();
8 | var staticDir = express.static;
9 | var server = http.createServer(app);
10 |
11 | io = io(server);
12 |
13 | var opts = {
14 | port: process.env.PORT || 1948,
15 | baseDir : __dirname + '/../../'
16 | };
17 |
18 | io.on( 'connection', function( socket ) {
19 | socket.on('multiplex-statechanged', function(data) {
20 | if (typeof data.secret == 'undefined' || data.secret == null || data.secret === '') return;
21 | if (createHash(data.secret) === data.socketId) {
22 | data.secret = null;
23 | socket.broadcast.emit(data.socketId, data);
24 | };
25 | });
26 | });
27 |
28 | [ 'css', 'js', 'plugin', 'lib' ].forEach(function(dir) {
29 | app.use('/' + dir, staticDir(opts.baseDir + dir));
30 | });
31 |
32 | app.get("/", function(req, res) {
33 | res.writeHead(200, {'Content-Type': 'text/html'});
34 |
35 | var stream = fs.createReadStream(opts.baseDir + '/index.html');
36 | stream.on('error', function( error ) {
37 | res.write('reveal.js multiplex server.
Generate token'); 38 | res.end(); 39 | }); 40 | stream.on('readable', function() { 41 | stream.pipe(res); 42 | }); 43 | }); 44 | 45 | app.get("/token", function(req,res) { 46 | var ts = new Date().getTime(); 47 | var rand = Math.floor(Math.random()*9999999); 48 | var secret = ts.toString() + rand.toString(); 49 | res.send({secret: secret, socketId: createHash(secret)}); 50 | }); 51 | 52 | var createHash = function(secret) { 53 | var cipher = crypto.createCipher('blowfish', secret); 54 | return(cipher.final('hex')); 55 | }; 56 | 57 | // Actually listen 58 | server.listen( opts.port || null ); 59 | 60 | var brown = '\033[33m', 61 | green = '\033[32m', 62 | reset = '\033[0m'; 63 | 64 | console.log( brown + "reveal.js:" + reset + " Multiplex running on port " + green + opts.port + reset ); -------------------------------------------------------------------------------- /plugin/multiplex/master.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | // Don't emit events from inside of notes windows 4 | if ( window.location.search.match( /receiver/gi ) ) { return; } 5 | 6 | var multiplex = Reveal.getConfig().multiplex; 7 | 8 | var socket = io.connect( multiplex.url ); 9 | 10 | function post() { 11 | 12 | var messageData = { 13 | state: Reveal.getState(), 14 | secret: multiplex.secret, 15 | socketId: multiplex.id 16 | }; 17 | 18 | socket.emit( 'multiplex-statechanged', messageData ); 19 | 20 | }; 21 | 22 | // Monitor events that trigger a change in state 23 | Reveal.addEventListener( 'slidechanged', post ); 24 | Reveal.addEventListener( 'fragmentshown', post ); 25 | Reveal.addEventListener( 'fragmenthidden', post ); 26 | Reveal.addEventListener( 'overviewhidden', post ); 27 | Reveal.addEventListener( 'overviewshown', post ); 28 | Reveal.addEventListener( 'paused', post ); 29 | Reveal.addEventListener( 'resumed', post ); 30 | 31 | }()); -------------------------------------------------------------------------------- /plugin/multiplex/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reveal-js-multiplex", 3 | "version": "1.0.0", 4 | "description": "reveal.js multiplex server", 5 | "homepage": "http://lab.hakim.se/reveal-js", 6 | "scripts": { 7 | "start": "node index.js" 8 | }, 9 | "engines": { 10 | "node": "~4.1.1" 11 | }, 12 | "dependencies": { 13 | "express": "~4.13.3", 14 | "grunt-cli": "~0.1.13", 15 | "mustache": "~2.2.1", 16 | "socket.io": "~1.3.7" 17 | }, 18 | "license": "MIT" 19 | } 20 | -------------------------------------------------------------------------------- /plugin/notes-server/client.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | // don't emit events from inside the previews themselves 4 | if( window.location.search.match( /receiver/gi ) ) { return; } 5 | 6 | var socket = io.connect( window.location.origin ), 7 | socketId = Math.random().toString().slice( 2 ); 8 | 9 | console.log( 'View slide notes at ' + window.location.origin + '/notes/' + socketId ); 10 | 11 | window.open( window.location.origin + '/notes/' + socketId, 'notes-' + socketId ); 12 | 13 | /** 14 | * Posts the current slide data to the notes window 15 | */ 16 | function post() { 17 | 18 | var slideElement = Reveal.getCurrentSlide(), 19 | notesElement = slideElement.querySelector( 'aside.notes' ); 20 | 21 | var messageData = { 22 | notes: '', 23 | markdown: false, 24 | socketId: socketId, 25 | state: Reveal.getState() 26 | }; 27 | 28 | // Look for notes defined in a slide attribute 29 | if( slideElement.hasAttribute( 'data-notes' ) ) { 30 | messageData.notes = slideElement.getAttribute( 'data-notes' ); 31 | } 32 | 33 | // Look for notes defined in an aside element 34 | if( notesElement ) { 35 | messageData.notes = notesElement.innerHTML; 36 | messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string'; 37 | } 38 | 39 | socket.emit( 'statechanged', messageData ); 40 | 41 | } 42 | 43 | // When a new notes window connects, post our current state 44 | socket.on( 'new-subscriber', function( data ) { 45 | post(); 46 | } ); 47 | 48 | // When the state changes from inside of the speaker view 49 | socket.on( 'statechanged-speaker', function( data ) { 50 | Reveal.setState( data.state ); 51 | } ); 52 | 53 | // Monitor events that trigger a change in state 54 | Reveal.addEventListener( 'slidechanged', post ); 55 | Reveal.addEventListener( 'fragmentshown', post ); 56 | Reveal.addEventListener( 'fragmenthidden', post ); 57 | Reveal.addEventListener( 'overviewhidden', post ); 58 | Reveal.addEventListener( 'overviewshown', post ); 59 | Reveal.addEventListener( 'paused', post ); 60 | Reveal.addEventListener( 'resumed', post ); 61 | 62 | // Post the initial state 63 | post(); 64 | 65 | }()); 66 | -------------------------------------------------------------------------------- /plugin/notes-server/index.js: -------------------------------------------------------------------------------- 1 | var http = require('http'); 2 | var express = require('express'); 3 | var fs = require('fs'); 4 | var io = require('socket.io'); 5 | var Mustache = require('mustache'); 6 | 7 | var app = express(); 8 | var staticDir = express.static; 9 | var server = http.createServer(app); 10 | 11 | io = io(server); 12 | 13 | var opts = { 14 | port : 1947, 15 | baseDir : __dirname + '/../../' 16 | }; 17 | 18 | io.on( 'connection', function( socket ) { 19 | 20 | socket.on( 'new-subscriber', function( data ) { 21 | socket.broadcast.emit( 'new-subscriber', data ); 22 | }); 23 | 24 | socket.on( 'statechanged', function( data ) { 25 | delete data.state.overview; 26 | socket.broadcast.emit( 'statechanged', data ); 27 | }); 28 | 29 | socket.on( 'statechanged-speaker', function( data ) { 30 | delete data.state.overview; 31 | socket.broadcast.emit( 'statechanged-speaker', data ); 32 | }); 33 | 34 | }); 35 | 36 | [ 'css', 'js', 'images', 'plugin', 'lib' ].forEach( function( dir ) { 37 | app.use( '/' + dir, staticDir( opts.baseDir + dir ) ); 38 | }); 39 | 40 | app.get('/', function( req, res ) { 41 | 42 | res.writeHead( 200, { 'Content-Type': 'text/html' } ); 43 | fs.createReadStream( opts.baseDir + '/index.html' ).pipe( res ); 44 | 45 | }); 46 | 47 | app.get( '/notes/:socketId', function( req, res ) { 48 | 49 | fs.readFile( opts.baseDir + 'plugin/notes-server/notes.html', function( err, data ) { 50 | res.send( Mustache.to_html( data.toString(), { 51 | socketId : req.params.socketId 52 | })); 53 | }); 54 | 55 | }); 56 | 57 | // Actually listen 58 | server.listen( opts.port || null ); 59 | 60 | var brown = '\033[33m', 61 | green = '\033[32m', 62 | reset = '\033[0m'; 63 | 64 | var slidesLocation = 'http://localhost' + ( opts.port ? ( ':' + opts.port ) : '' ); 65 | 66 | console.log( brown + 'reveal.js - Speaker Notes' + reset ); 67 | console.log( '1. Open the slides at ' + green + slidesLocation + reset ); 68 | console.log( '2. Click on the link in your JS console to go to the notes page' ); 69 | console.log( '3. Advance through your slides and your notes will advance automatically' ); 70 | -------------------------------------------------------------------------------- /plugin/notes-server/notes.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |UPCOMING:
156 |
157 |
173 |
174 |
175 |
176 |
177 |
405 |
406 |
407 |
408 |
--------------------------------------------------------------------------------
/plugin/notes/notes.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
158 |
167 |
168 |
172 | Time
159 |
160 | 0:00 AM
161 |
162 |
163 | 00:00:00
164 |
165 |
166 | UPCOMING:
157 |
158 |
174 |
175 |
176 |
413 |
414 |
415 |
--------------------------------------------------------------------------------
/plugin/notes/notes.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Handles opening of and synchronization with the reveal.js
3 | * notes window.
4 | *
5 | * Handshake process:
6 | * 1. This window posts 'connect' to notes window
7 | * - Includes URL of presentation to show
8 | * 2. Notes window responds with 'connected' when it is available
9 | * 3. This window proceeds to send the current presentation state
10 | * to the notes window
11 | */
12 | var RevealNotes = (function() {
13 |
14 | function openNotes( notesFilePath ) {
15 |
16 | if( !notesFilePath ) {
17 | var jsFileLocation = document.querySelector('script[src$="notes.js"]').src; // this js file path
18 | jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, ''); // the js folder path
19 | notesFilePath = jsFileLocation + 'notes.html';
20 | }
21 |
22 | var notesPopup = window.open( notesFilePath, 'reveal.js - Notes', 'width=1100,height=700' );
23 |
24 | /**
25 | * Connect to the notes window through a postmessage handshake.
26 | * Using postmessage enables us to work in situations where the
27 | * origins differ, such as a presentation being opened from the
28 | * file system.
29 | */
30 | function connect() {
31 | // Keep trying to connect until we get a 'connected' message back
32 | var connectInterval = setInterval( function() {
33 | notesPopup.postMessage( JSON.stringify( {
34 | namespace: 'reveal-notes',
35 | type: 'connect',
36 | url: window.location.protocol + '//' + window.location.host + window.location.pathname + window.location.search,
37 | state: Reveal.getState()
38 | } ), '*' );
39 | }, 500 );
40 |
41 | window.addEventListener( 'message', function( event ) {
42 | var data = JSON.parse( event.data );
43 | if( data && data.namespace === 'reveal-notes' && data.type === 'connected' ) {
44 | clearInterval( connectInterval );
45 | onConnected();
46 | }
47 | } );
48 | }
49 |
50 | /**
51 | * Posts the current slide data to the notes window
52 | */
53 | function post() {
54 |
55 | var slideElement = Reveal.getCurrentSlide(),
56 | notesElement = slideElement.querySelector( 'aside.notes' );
57 |
58 | var messageData = {
59 | namespace: 'reveal-notes',
60 | type: 'state',
61 | notes: '',
62 | markdown: false,
63 | whitespace: 'normal',
64 | state: Reveal.getState()
65 | };
66 |
67 | // Look for notes defined in a slide attribute
68 | if( slideElement.hasAttribute( 'data-notes' ) ) {
69 | messageData.notes = slideElement.getAttribute( 'data-notes' );
70 | messageData.whitespace = 'pre-wrap';
71 | }
72 |
73 | // Look for notes defined in an aside element
74 | if( notesElement ) {
75 | messageData.notes = notesElement.innerHTML;
76 | messageData.markdown = typeof notesElement.getAttribute( 'data-markdown' ) === 'string';
77 | }
78 |
79 | notesPopup.postMessage( JSON.stringify( messageData ), '*' );
80 |
81 | }
82 |
83 | /**
84 | * Called once we have established a connection to the notes
85 | * window.
86 | */
87 | function onConnected() {
88 |
89 | // Monitor events that trigger a change in state
90 | Reveal.addEventListener( 'slidechanged', post );
91 | Reveal.addEventListener( 'fragmentshown', post );
92 | Reveal.addEventListener( 'fragmenthidden', post );
93 | Reveal.addEventListener( 'overviewhidden', post );
94 | Reveal.addEventListener( 'overviewshown', post );
95 | Reveal.addEventListener( 'paused', post );
96 | Reveal.addEventListener( 'resumed', post );
97 |
98 | // Post the initial state
99 | post();
100 |
101 | }
102 |
103 | connect();
104 |
105 | }
106 |
107 | if( !/receiver/i.test( window.location.search ) ) {
108 |
109 | // If the there's a 'notes' query set, open directly
110 | if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
111 | openNotes();
112 | }
113 |
114 | // Open the notes when the 's' key is hit
115 | document.addEventListener( 'keydown', function( event ) {
116 | // Disregard the event if the target is editable or a
117 | // modifier is present
118 | if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return;
119 |
120 | // Disregard the event if keyboard is disabled
121 | if ( Reveal.getConfig().keyboard === false ) return;
122 |
123 | if( event.keyCode === 83 ) {
124 | event.preventDefault();
125 | openNotes();
126 | }
127 | }, false );
128 |
129 | // Show our keyboard shortcut in the reveal.js help overlay
130 | if( window.Reveal ) Reveal.registerKeyboardShortcut( 'S', 'Speaker notes view' );
131 |
132 | }
133 |
134 | return { open: openNotes };
135 |
136 | })();
137 |
--------------------------------------------------------------------------------
/plugin/print-pdf/print-pdf.js:
--------------------------------------------------------------------------------
1 | /**
2 | * phantomjs script for printing presentations to PDF.
3 | *
4 | * Example:
5 | * phantomjs print-pdf.js "http://lab.hakim.se/reveal-js?print-pdf" reveal-demo.pdf
6 | *
7 | * By Manuel Bieh (https://github.com/manuelbieh)
8 | */
9 |
10 | // html2pdf.js
11 | var page = new WebPage();
12 | var system = require( 'system' );
13 |
14 | var slideWidth = system.args[3] ? system.args[3].split( 'x' )[0] : 960;
15 | var slideHeight = system.args[3] ? system.args[3].split( 'x' )[1] : 700;
16 |
17 | page.viewportSize = {
18 | width: slideWidth,
19 | height: slideHeight
20 | };
21 |
22 | // TODO
23 | // Something is wrong with these config values. An input
24 | // paper width of 1920px actually results in a 756px wide
25 | // PDF.
26 | page.paperSize = {
27 | width: Math.round( slideWidth * 2 ),
28 | height: Math.round( slideHeight * 2 ),
29 | border: 0
30 | };
31 |
32 | var inputFile = system.args[1] || 'index.html?print-pdf';
33 | var outputFile = system.args[2] || 'slides.pdf';
34 |
35 | if( outputFile.match( /\.pdf$/gi ) === null ) {
36 | outputFile += '.pdf';
37 | }
38 |
39 | console.log( 'Printing PDF (Paper size: '+ page.paperSize.width + 'x' + page.paperSize.height +')' );
40 |
41 | page.open( inputFile, function( status ) {
42 | window.setTimeout( function() {
43 | console.log( 'Printed successfully' );
44 | page.render( outputFile );
45 | phantom.exit();
46 | }, 1000 );
47 | } );
48 |
49 |
--------------------------------------------------------------------------------
/plugin/search/search.js:
--------------------------------------------------------------------------------
1 | /*
2 | * Handles finding a text string anywhere in the slides and showing the next occurrence to the user
3 | * by navigatating to that slide and highlighting it.
4 | *
5 | * By Jon Snyder
159 |
168 |
169 |
173 | Time
160 |
161 | 0:00 AM
162 |
163 |
164 | 00:00:00
165 |
166 |
167 | 
';
163 | dom.wrapper.appendChild( searchElement );
164 | }
165 |
166 | document.getElementById("searchbutton").addEventListener( 'click', function(event) {
167 | doSearch();
168 | }, false );
169 |
170 | document.getElementById("searchinput").addEventListener( 'keyup', function( event ) {
171 | switch (event.keyCode) {
172 | case 13:
173 | event.preventDefault();
174 | doSearch();
175 | searchboxDirty = false;
176 | break;
177 | default:
178 | searchboxDirty = true;
179 | }
180 | }, false );
181 |
182 | // Open the search when the 's' key is hit (yes, this conflicts with the notes plugin, disabling for now)
183 | /*
184 | document.addEventListener( 'keydown', function( event ) {
185 | // Disregard the event if the target is editable or a
186 | // modifier is present
187 | if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return;
188 |
189 | if( event.keyCode === 83 ) {
190 | event.preventDefault();
191 | openSearch();
192 | }
193 | }, false );
194 | */
195 | return { open: openSearch };
196 | })();
197 |
--------------------------------------------------------------------------------
/plugin/zoom-js/zoom.js:
--------------------------------------------------------------------------------
1 | // Custom reveal.js integration
2 | (function(){
3 | var isEnabled = true;
4 |
5 | document.querySelector( '.reveal .slides' ).addEventListener( 'mousedown', function( event ) {
6 | var modifier = ( Reveal.getConfig().zoomKey ? Reveal.getConfig().zoomKey : 'alt' ) + 'Key';
7 |
8 | var zoomPadding = 20;
9 | var revealScale = Reveal.getScale();
10 |
11 | if( event[ modifier ] && isEnabled ) {
12 | event.preventDefault();
13 |
14 | var bounds = event.target.getBoundingClientRect();
15 |
16 | zoom.to({
17 | x: ( bounds.left * revealScale ) - zoomPadding,
18 | y: ( bounds.top * revealScale ) - zoomPadding,
19 | width: ( bounds.width * revealScale ) + ( zoomPadding * 2 ),
20 | height: ( bounds.height * revealScale ) + ( zoomPadding * 2 ),
21 | pan: false
22 | });
23 | }
24 | } );
25 |
26 | Reveal.addEventListener( 'overviewshown', function() { isEnabled = false; } );
27 | Reveal.addEventListener( 'overviewhidden', function() { isEnabled = true; } );
28 | })();
29 |
30 | /*!
31 | * zoom.js 0.3 (modified for use with reveal.js)
32 | * http://lab.hakim.se/zoom-js
33 | * MIT licensed
34 | *
35 | * Copyright (C) 2011-2014 Hakim El Hattab, http://hakim.se
36 | */
37 | var zoom = (function(){
38 |
39 | // The current zoom level (scale)
40 | var level = 1;
41 |
42 | // The current mouse position, used for panning
43 | var mouseX = 0,
44 | mouseY = 0;
45 |
46 | // Timeout before pan is activated
47 | var panEngageTimeout = -1,
48 | panUpdateInterval = -1;
49 |
50 | // Check for transform support so that we can fallback otherwise
51 | var supportsTransforms = 'WebkitTransform' in document.body.style ||
52 | 'MozTransform' in document.body.style ||
53 | 'msTransform' in document.body.style ||
54 | 'OTransform' in document.body.style ||
55 | 'transform' in document.body.style;
56 |
57 | if( supportsTransforms ) {
58 | // The easing that will be applied when we zoom in/out
59 | document.body.style.transition = 'transform 0.8s ease';
60 | document.body.style.OTransition = '-o-transform 0.8s ease';
61 | document.body.style.msTransition = '-ms-transform 0.8s ease';
62 | document.body.style.MozTransition = '-moz-transform 0.8s ease';
63 | document.body.style.WebkitTransition = '-webkit-transform 0.8s ease';
64 | }
65 |
66 | // Zoom out if the user hits escape
67 | document.addEventListener( 'keyup', function( event ) {
68 | if( level !== 1 && event.keyCode === 27 ) {
69 | zoom.out();
70 | }
71 | } );
72 |
73 | // Monitor mouse movement for panning
74 | document.addEventListener( 'mousemove', function( event ) {
75 | if( level !== 1 ) {
76 | mouseX = event.clientX;
77 | mouseY = event.clientY;
78 | }
79 | } );
80 |
81 | /**
82 | * Applies the CSS required to zoom in, prefers the use of CSS3
83 | * transforms but falls back on zoom for IE.
84 | *
85 | * @param {Object} rect
86 | * @param {Number} scale
87 | */
88 | function magnify( rect, scale ) {
89 |
90 | var scrollOffset = getScrollOffset();
91 |
92 | // Ensure a width/height is set
93 | rect.width = rect.width || 1;
94 | rect.height = rect.height || 1;
95 |
96 | // Center the rect within the zoomed viewport
97 | rect.x -= ( window.innerWidth - ( rect.width * scale ) ) / 2;
98 | rect.y -= ( window.innerHeight - ( rect.height * scale ) ) / 2;
99 |
100 | if( supportsTransforms ) {
101 | // Reset
102 | if( scale === 1 ) {
103 | document.body.style.transform = '';
104 | document.body.style.OTransform = '';
105 | document.body.style.msTransform = '';
106 | document.body.style.MozTransform = '';
107 | document.body.style.WebkitTransform = '';
108 | }
109 | // Scale
110 | else {
111 | var origin = scrollOffset.x +'px '+ scrollOffset.y +'px',
112 | transform = 'translate('+ -rect.x +'px,'+ -rect.y +'px) scale('+ scale +')';
113 |
114 | document.body.style.transformOrigin = origin;
115 | document.body.style.OTransformOrigin = origin;
116 | document.body.style.msTransformOrigin = origin;
117 | document.body.style.MozTransformOrigin = origin;
118 | document.body.style.WebkitTransformOrigin = origin;
119 |
120 | document.body.style.transform = transform;
121 | document.body.style.OTransform = transform;
122 | document.body.style.msTransform = transform;
123 | document.body.style.MozTransform = transform;
124 | document.body.style.WebkitTransform = transform;
125 | }
126 | }
127 | else {
128 | // Reset
129 | if( scale === 1 ) {
130 | document.body.style.position = '';
131 | document.body.style.left = '';
132 | document.body.style.top = '';
133 | document.body.style.width = '';
134 | document.body.style.height = '';
135 | document.body.style.zoom = '';
136 | }
137 | // Scale
138 | else {
139 | document.body.style.position = 'relative';
140 | document.body.style.left = ( - ( scrollOffset.x + rect.x ) / scale ) + 'px';
141 | document.body.style.top = ( - ( scrollOffset.y + rect.y ) / scale ) + 'px';
142 | document.body.style.width = ( scale * 100 ) + '%';
143 | document.body.style.height = ( scale * 100 ) + '%';
144 | document.body.style.zoom = scale;
145 | }
146 | }
147 |
148 | level = scale;
149 |
150 | if( document.documentElement.classList ) {
151 | if( level !== 1 ) {
152 | document.documentElement.classList.add( 'zoomed' );
153 | }
154 | else {
155 | document.documentElement.classList.remove( 'zoomed' );
156 | }
157 | }
158 | }
159 |
160 | /**
161 | * Pan the document when the mosue cursor approaches the edges
162 | * of the window.
163 | */
164 | function pan() {
165 | var range = 0.12,
166 | rangeX = window.innerWidth * range,
167 | rangeY = window.innerHeight * range,
168 | scrollOffset = getScrollOffset();
169 |
170 | // Up
171 | if( mouseY < rangeY ) {
172 | window.scroll( scrollOffset.x, scrollOffset.y - ( 1 - ( mouseY / rangeY ) ) * ( 14 / level ) );
173 | }
174 | // Down
175 | else if( mouseY > window.innerHeight - rangeY ) {
176 | window.scroll( scrollOffset.x, scrollOffset.y + ( 1 - ( window.innerHeight - mouseY ) / rangeY ) * ( 14 / level ) );
177 | }
178 |
179 | // Left
180 | if( mouseX < rangeX ) {
181 | window.scroll( scrollOffset.x - ( 1 - ( mouseX / rangeX ) ) * ( 14 / level ), scrollOffset.y );
182 | }
183 | // Right
184 | else if( mouseX > window.innerWidth - rangeX ) {
185 | window.scroll( scrollOffset.x + ( 1 - ( window.innerWidth - mouseX ) / rangeX ) * ( 14 / level ), scrollOffset.y );
186 | }
187 | }
188 |
189 | function getScrollOffset() {
190 | return {
191 | x: window.scrollX !== undefined ? window.scrollX : window.pageXOffset,
192 | y: window.scrollY !== undefined ? window.scrollY : window.pageYOffset
193 | }
194 | }
195 |
196 | return {
197 | /**
198 | * Zooms in on either a rectangle or HTML element.
199 | *
200 | * @param {Object} options
201 | * - element: HTML element to zoom in on
202 | * OR
203 | * - x/y: coordinates in non-transformed space to zoom in on
204 | * - width/height: the portion of the screen to zoom in on
205 | * - scale: can be used instead of width/height to explicitly set scale
206 | */
207 | to: function( options ) {
208 |
209 | // Due to an implementation limitation we can't zoom in
210 | // to another element without zooming out first
211 | if( level !== 1 ) {
212 | zoom.out();
213 | }
214 | else {
215 | options.x = options.x || 0;
216 | options.y = options.y || 0;
217 |
218 | // If an element is set, that takes precedence
219 | if( !!options.element ) {
220 | // Space around the zoomed in element to leave on screen
221 | var padding = 20;
222 | var bounds = options.element.getBoundingClientRect();
223 |
224 | options.x = bounds.left - padding;
225 | options.y = bounds.top - padding;
226 | options.width = bounds.width + ( padding * 2 );
227 | options.height = bounds.height + ( padding * 2 );
228 | }
229 |
230 | // If width/height values are set, calculate scale from those values
231 | if( options.width !== undefined && options.height !== undefined ) {
232 | options.scale = Math.max( Math.min( window.innerWidth / options.width, window.innerHeight / options.height ), 1 );
233 | }
234 |
235 | if( options.scale > 1 ) {
236 | options.x *= options.scale;
237 | options.y *= options.scale;
238 |
239 | magnify( options, options.scale );
240 |
241 | if( options.pan !== false ) {
242 |
243 | // Wait with engaging panning as it may conflict with the
244 | // zoom transition
245 | panEngageTimeout = setTimeout( function() {
246 | panUpdateInterval = setInterval( pan, 1000 / 60 );
247 | }, 800 );
248 |
249 | }
250 | }
251 | }
252 | },
253 |
254 | /**
255 | * Resets the document zoom state to its default.
256 | */
257 | out: function() {
258 | clearTimeout( panEngageTimeout );
259 | clearInterval( panUpdateInterval );
260 |
261 | magnify( { x: 0, y: 0 }, 1 );
262 |
263 | level = 1;
264 | },
265 |
266 | // Alias
267 | magnify: function( options ) { this.to( options ) },
268 | reset: function() { this.out() },
269 |
270 | zoomLevel: function() {
271 | return level;
272 | }
273 | }
274 |
275 | })();
276 |
277 |
278 |
279 |
--------------------------------------------------------------------------------