bumping to reveal.js v3.9.2

This commit is contained in:
jcraitz 2021-01-22 12:38:55 -05:00
parent 646476b0fb
commit d2ededfefb
100 changed files with 19179 additions and 5771 deletions

View File

@ -33,7 +33,7 @@
{% endif %} {% endif %}
<!-- Code syntax highlighting --> <!-- Code syntax highlighting -->
<link rel="stylesheet" href="{{ "/reveal.js/lib/css/zenburn.css" | prepend: site.github.url }}"/> <link rel="stylesheet" href="{{ "/reveal.js/lib/css/monokai.css" | prepend: site.github.url }}"/>
<!-- Printing and PDF exports --> <!-- Printing and PDF exports -->
<script> <script>
@ -61,7 +61,6 @@
</div> </div>
</div> </div>
<script src="{{ "/reveal.js/lib/js/head.min.js" | prepend: site.github.url }}"></script>
<script src="{{ "/reveal.js/js/reveal.js" | prepend: site.github.url }}"></script> <script src="{{ "/reveal.js/js/reveal.js" | prepend: site.github.url }}"></script>
<script> <script>
// Full list of configuration options available at: // Full list of configuration options available at:
@ -79,7 +78,6 @@
// Optional reveal.js plugins // Optional reveal.js plugins
dependencies: [ dependencies: [
{ src: '{{ "/reveal.js/lib/js/classList.js" | prepend: site.github.url }}', condition: function() { return !document.body.classList; } },
{ src: '{{ "/reveal.js/plugin/markdown/marked.js" | prepend: site.github.url }}', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: '{{ "/reveal.js/plugin/markdown/marked.js" | prepend: site.github.url }}', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: '{{ "/reveal.js/plugin/markdown/markdown.js" | prepend: site.github.url }}', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: '{{ "/reveal.js/plugin/markdown/markdown.js" | prepend: site.github.url }}', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: '{{ "/reveal.js/plugin/highlight/highlight.js" | prepend: site.github.url }}', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } }, { src: '{{ "/reveal.js/plugin/highlight/highlight.js" | prepend: site.github.url }}', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },

13
reveal.js/.gitignore vendored Normal file
View File

@ -0,0 +1,13 @@
.idea/
*.iml
*.iws
*.eml
out/
.DS_Store
.svn
log/*.log
tmp/**
node_modules/
.sass-cache
css/reveal.min.css
js/reveal.min.js

5
reveal.js/.travis.yml Normal file
View File

@ -0,0 +1,5 @@
language: node_js
node_js:
- 11
after_script:
- npm run build -- retire

View File

@ -1,10 +1,10 @@
## Contributing ## Contributing
Please keep the [issue tracker](https://github.com/hakimel/reveal.js/issues) limited to **bug reports**, **feature requests** and **pull requests**. Please keep the [issue tracker](http://github.com/hakimel/reveal.js/issues) limited to **bug reports**, **feature requests** and **pull requests**.
### Personal Support ### Personal Support
If you have personal support or setup questions the best place to ask those are [StackOverflow](https://stackoverflow.com/questions/tagged/reveal.js). If you have personal support or setup questions the best place to ask those are [StackOverflow](http://stackoverflow.com/questions/tagged/reveal.js).
### Bug Reports ### Bug Reports

View File

@ -1,7 +1,13 @@
/* global module:false */ const sass = require('node-sass');
module.exports = function(grunt) {
var port = grunt.option('port') || 8000; module.exports = grunt => {
var base = grunt.option('base') || '.';
require('load-grunt-tasks')(grunt);
let port = grunt.option('port') || 8000;
let root = grunt.option('root') || '.';
if (!Array.isArray(root)) root = [root];
// Project configuration // Project configuration
grunt.initConfig({ grunt.initConfig({
@ -10,10 +16,10 @@ module.exports = function(grunt) {
banner: banner:
'/*!\n' + '/*!\n' +
' * reveal.js <%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd, HH:MM") %>)\n' + ' * reveal.js <%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd, HH:MM") %>)\n' +
' * https://lab.hakim.se/reveal-js\n' + ' * http://revealjs.com\n' +
' * MIT licensed\n' + ' * MIT licensed\n' +
' *\n' + ' *\n' +
' * Copyright (C) 2016 Hakim El Hattab, https://hakim.se\n' + ' * Copyright (C) 2020 Hakim El Hattab, http://hakim.se\n' +
' */' ' */'
}, },
@ -23,7 +29,8 @@ module.exports = function(grunt) {
uglify: { uglify: {
options: { options: {
banner: '<%= meta.banner %>\n' banner: '<%= meta.banner %>\n',
ie8: true
}, },
build: { build: {
src: 'js/reveal.js', src: 'js/reveal.js',
@ -32,35 +39,36 @@ module.exports = function(grunt) {
}, },
sass: { sass: {
options: {
implementation: sass,
sourceMap: false
},
core: { core: {
files: { src: 'css/reveal.scss',
'css/reveal.css': 'css/reveal.scss', dest: 'css/reveal.css'
}
}, },
themes: { themes: {
files: [
{
expand: true, expand: true,
cwd: 'css/theme/source', cwd: 'css/theme/source',
src: ['*.scss'], src: ['*.sass', '*.scss'],
dest: 'css/theme', dest: 'css/theme',
ext: '.css' ext: '.css'
} }
]
}
}, },
autoprefixer: { autoprefixer: {
dist: { core: {
src: 'css/reveal.css' src: 'css/reveal.css'
} }
}, },
cssmin: { cssmin: {
options: {
compatibility: 'ie9'
},
compress: { compress: {
files: { src: 'css/reveal.css',
'css/reveal.min.css': [ 'css/reveal.css' ] dest: 'css/reveal.min.css'
}
} }
}, },
@ -69,7 +77,8 @@ module.exports = function(grunt) {
curly: false, curly: false,
eqeqeq: true, eqeqeq: true,
immed: true, immed: true,
latedef: true, esnext: true,
latedef: 'nofunc',
newcap: true, newcap: true,
noarg: true, noarg: true,
sub: true, sub: true,
@ -77,31 +86,35 @@ module.exports = function(grunt) {
eqnull: true, eqnull: true,
browser: true, browser: true,
expr: true, expr: true,
loopfunc: true,
globals: { globals: {
head: false, head: false,
module: false, module: false,
console: false, console: false,
unescape: false, unescape: false,
define: false, define: false,
exports: false exports: false,
require: false
} }
}, },
files: [ 'Gruntfile.js', 'js/reveal.js' ] files: [ 'gruntfile.js', 'js/reveal.js' ]
}, },
connect: { connect: {
server: { server: {
options: { options: {
port: port, port: port,
base: base, base: root,
livereload: true, livereload: true,
open: true open: true,
useAvailablePort: true
} }
} }
}, },
zip: { zip: {
'reveal-js-presentation.zip': [ bundle: {
src: [
'index.html', 'index.html',
'css/**', 'css/**',
'js/**', 'js/**',
@ -109,46 +122,46 @@ module.exports = function(grunt) {
'images/**', 'images/**',
'plugin/**', 'plugin/**',
'**.md' '**.md'
] ],
dest: 'reveal-js-presentation.zip'
}
}, },
watch: { watch: {
options: {
livereload: true
},
js: { js: {
files: [ 'Gruntfile.js', 'js/reveal.js' ], files: [ 'gruntfile.js', 'js/reveal.js' ],
tasks: 'js' tasks: 'js'
}, },
theme: { theme: {
files: [ 'css/theme/source/*.scss', 'css/theme/template/*.scss' ], files: [
'css/theme/source/*.sass',
'css/theme/source/*.scss',
'css/theme/template/*.sass',
'css/theme/template/*.scss'
],
tasks: 'css-themes' tasks: 'css-themes'
}, },
css: { css: {
files: [ 'css/reveal.scss' ], files: [ 'css/reveal.scss' ],
tasks: 'css-core' tasks: 'css-core'
}, },
test: {
files: [ 'test/*.html' ],
tasks: 'test'
},
html: { html: {
files: [ 'index.html'] files: root.map(path => path + '/*.html')
}, },
markdown: { markdown: {
files: [ './*.md' ] files: root.map(path => path + '/*.md')
},
options: {
livereload: true
} }
} }
}); });
// Dependencies
grunt.loadNpmTasks( 'grunt-contrib-qunit' );
grunt.loadNpmTasks( 'grunt-contrib-jshint' );
grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
grunt.loadNpmTasks( 'grunt-contrib-uglify' );
grunt.loadNpmTasks( 'grunt-contrib-watch' );
grunt.loadNpmTasks( 'grunt-sass' );
grunt.loadNpmTasks( 'grunt-contrib-connect' );
grunt.loadNpmTasks( 'grunt-autoprefixer' );
grunt.loadNpmTasks( 'grunt-zip' );
// Default task // Default task
grunt.registerTask( 'default', [ 'css', 'js' ] ); grunt.registerTask( 'default', [ 'css', 'js' ] );

View File

@ -1,4 +1,4 @@
Copyright (C) 2016 Hakim El Hattab, https://hakim.se Copyright (C) 2020 Hakim El Hattab, http://hakim.se, and reveal.js contributors
Permission is hereby granted, free of charge, to any person obtaining a copy Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal of this software and associated documentation files (the "Software"), to deal

File diff suppressed because it is too large Load Diff

View File

@ -1,19 +1,16 @@
{ {
"name": "reveal.js", "name": "reveal.js",
"version": "3.2.0", "version": "3.9.2",
"main": [ "main": [
"js/reveal.js", "js/reveal.js",
"css/reveal.css" "css/reveal.css"
], ],
"homepage": "https://lab.hakim.se/reveal-js/", "homepage": "http://revealjs.com",
"license": "MIT", "license": "MIT",
"description": "The HTML Presentation Framework", "description": "The HTML Presentation Framework",
"authors": [ "authors": [
"Hakim El Hattab <hakim.elhattab@gmail.com>" "Hakim El Hattab <hakim.elhattab@gmail.com>"
], ],
"dependencies": {
"headjs": "~1.0.3"
},
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git://github.com/hakimel/reveal.js.git" "url": "git://github.com/hakimel/reveal.js.git"

View File

@ -38,7 +38,8 @@
.share-reveal, .share-reveal,
.state-background, .state-background,
.reveal .progress, .reveal .progress,
.reveal .backgrounds { .reveal .backgrounds,
.reveal .slide-number {
display: none !important; display: none !important;
} }

View File

@ -60,8 +60,9 @@ ul, ol, div, p {
} }
.reveal .slides { .reveal .slides {
position: static; position: static;
width: 100%; width: 100% !important;
height: auto; height: auto !important;
zoom: 1 !important;
left: auto; left: auto;
top: auto; top: auto;
@ -71,24 +72,22 @@ ul, ol, div, p {
overflow: visible; overflow: visible;
display: block; display: block;
-webkit-perspective: none;
-moz-perspective: none;
-ms-perspective: none;
perspective: none; perspective: none;
-webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%; perspective-origin: 50% 50%;
} }
.reveal .slides section { .reveal .slides .pdf-page {
page-break-after: always !important; position: relative;
overflow: hidden;
z-index: 1;
page-break-after: always;
}
.reveal .slides section {
visibility: visible !important; visibility: visible !important;
position: relative !important;
display: block !important; display: block !important;
position: relative !important; position: absolute !important;
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
@ -97,18 +96,12 @@ ul, ol, div, p {
opacity: 1 !important; opacity: 1 !important;
-webkit-transform-style: flat !important;
-moz-transform-style: flat !important;
-ms-transform-style: flat !important;
transform-style: flat !important; transform-style: flat !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
transform: none !important; transform: none !important;
} }
.reveal section.stack { .reveal section.stack {
position: relative !important;
margin: 0 !important; margin: 0 !important;
padding: 0 !important; padding: 0 !important;
page-break-after: avoid !important; page-break-after: avoid !important;
@ -126,35 +119,46 @@ ul, ol, div, p {
} }
/* Slide backgrounds are placed inside of their slide when exporting to PDF */ /* Slide backgrounds are placed inside of their slide when exporting to PDF */
.reveal section .slide-background { .reveal .slide-background {
display: block !important; display: block !important;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
z-index: -1; height: 100%;
} z-index: auto !important;
/* All elements should be above the slide-background */
.reveal section>* {
position: relative;
z-index: 1;
} }
/* Display slide speaker notes when 'showNotes' is enabled */ /* Display slide speaker notes when 'showNotes' is enabled */
.reveal.show-notes {
max-width: none;
max-height: none;
}
.reveal .speaker-notes-pdf { .reveal .speaker-notes-pdf {
display: block; display: block;
width: 100%; width: 100%;
height: auto;
max-height: none; max-height: none;
left: auto;
top: auto; top: auto;
right: auto;
bottom: auto;
left: auto;
z-index: 100; z-index: 100;
} }
/* Layout option which makes notes appear on a separate page */
.reveal .speaker-notes-pdf[data-layout="separate-page"] {
position: relative;
color: inherit;
background-color: transparent;
padding: 20px;
page-break-after: always;
border: 0;
}
/* Display slide numbers when 'slideNumber' is enabled */ /* Display slide numbers when 'slideNumber' is enabled */
.reveal .slide-number-pdf { .reveal .slide-number-pdf {
display: block; display: block;
position: absolute; position: absolute;
font-size: 14px; font-size: 14px;
} }

30
reveal.js/css/reset.css Normal file
View File

@ -0,0 +1,30 @@
/* http://meyerweb.com/eric/tools/css/reset/
v4.0 | 20180602
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
main, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
display: block;
}

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@ -1,10 +1,10 @@
## Dependencies ## Dependencies
Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Make sure that you have the reveal.js development environment including the Grunt dependencies installed before proceding: https://github.com/hakimel/reveal.js#full-setup Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Make sure that you have the reveal.js development environment including the Grunt dependencies installed before proceeding: https://github.com/hakimel/reveal.js#full-setup
## Creating a Theme ## Creating a Theme
To create your own theme, start by duplicating a ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). It will be automatically compiled by Grunt from Sass to CSS (see the [Gruntfile](https://github.com/hakimel/reveal.js/blob/master/Gruntfile.js)) when you run `grunt css-themes`. To create your own theme, start by duplicating a ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). It will be automatically compiled by Grunt from Sass to CSS (see the [Gruntfile](https://github.com/hakimel/reveal.js/blob/master/gruntfile.js)) when you run `npm run build -- css-themes`.
Each theme file does four things in the following order: Each theme file does four things in the following order:

View File

@ -1,7 +1,7 @@
/** /**
* Beige theme for reveal.js. * Beige theme for reveal.js.
* *
* Copyright (C) 2011-2012 Hakim El Hattab, https://hakim.se * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/ */
@import url(../../lib/font/league-gothic/league-gothic.css); @import url(../../lib/font/league-gothic/league-gothic.css);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
@ -20,7 +20,7 @@ body {
.reveal { .reveal {
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif;
font-size: 36px; font-size: 40px;
font-weight: normal; font-weight: normal;
color: #333; } color: #333; }
@ -29,8 +29,13 @@ body {
background: rgba(79, 64, 28, 0.99); background: rgba(79, 64, 28, 0.99);
text-shadow: none; } text-shadow: none; }
.reveal .slides > section, ::-moz-selection {
.reveal .slides > section > section { color: #fff;
background: rgba(79, 64, 28, 0.99);
text-shadow: none; }
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3; line-height: 1.3;
font-weight: inherit; } font-weight: inherit; }
@ -121,10 +126,6 @@ body {
.reveal dd { .reveal dd {
margin-left: 40px; } margin-left: 40px; }
.reveal q,
.reveal blockquote {
quotes: none; }
.reveal blockquote { .reveal blockquote {
display: block; display: block;
position: relative; position: relative;
@ -152,10 +153,11 @@ body {
font-family: monospace; font-family: monospace;
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
.reveal code { .reveal code {
font-family: monospace; } font-family: monospace;
text-transform: none; }
.reveal pre code { .reveal pre code {
display: block; display: block;
@ -186,14 +188,17 @@ body {
.reveal table td[align="right"] { .reveal table td[align="right"] {
text-align: right; } text-align: right; }
.reveal table tr:last-child td { .reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none; } border-bottom: none; }
.reveal sup { .reveal sup {
vertical-align: super; } vertical-align: super;
font-size: smaller; }
.reveal sub { .reveal sub {
vertical-align: sub; } vertical-align: sub;
font-size: smaller; }
.reveal small { .reveal small {
display: inline-block; display: inline-block;
@ -210,9 +215,9 @@ body {
.reveal a { .reveal a {
color: #8b743d; color: #8b743d;
text-decoration: none; text-decoration: none;
-webkit-transition: color 0.15s ease; -webkit-transition: color .15s ease;
-moz-transition: color 0.15s ease; -moz-transition: color .15s ease;
transition: color 0.15s ease; } transition: color .15s ease; }
.reveal a:hover { .reveal a:hover {
color: #c0a86e; color: #c0a86e;
@ -237,9 +242,9 @@ body {
box-shadow: none; } box-shadow: none; }
.reveal a img { .reveal a img {
-webkit-transition: all 0.15s linear; -webkit-transition: all .15s linear;
-moz-transition: all 0.15s linear; -moz-transition: all .15s linear;
transition: all 0.15s linear; } transition: all .15s linear; }
.reveal a:hover img { .reveal a:hover img {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
@ -249,42 +254,24 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls .navigate-left, .reveal .controls {
.reveal .controls .navigate-left.enabled { color: #8b743d; }
border-right-color: #8b743d; }
.reveal .controls .navigate-right,
.reveal .controls .navigate-right.enabled {
border-left-color: #8b743d; }
.reveal .controls .navigate-up,
.reveal .controls .navigate-up.enabled {
border-bottom-color: #8b743d; }
.reveal .controls .navigate-down,
.reveal .controls .navigate-down.enabled {
border-top-color: #8b743d; }
.reveal .controls .navigate-left.enabled:hover {
border-right-color: #c0a86e; }
.reveal .controls .navigate-right.enabled:hover {
border-left-color: #c0a86e; }
.reveal .controls .navigate-up.enabled:hover {
border-bottom-color: #c0a86e; }
.reveal .controls .navigate-down.enabled:hover {
border-top-color: #c0a86e; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); } background: rgba(0, 0, 0, 0.2);
color: #8b743d; }
.reveal .progress span { .reveal .progress span {
background: #8b743d;
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: #f7f3de; } }

View File

@ -1,7 +1,7 @@
/** /**
* Black theme for reveal.js. This is the opposite of the 'white' theme. * Black theme for reveal.js. This is the opposite of the 'white' theme.
* *
* By Hakim El Hattab, https://hakim.se * By Hakim El Hattab, http://hakim.se
*/ */
@import url(../../lib/font/source-sans-pro/source-sans-pro.css); @import url(../../lib/font/source-sans-pro/source-sans-pro.css);
section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 { section.has-light-background, section.has-light-background h1, section.has-light-background h2, section.has-light-background h3, section.has-light-background h4, section.has-light-background h5, section.has-light-background h6 {
@ -11,12 +11,12 @@ section.has-light-background, section.has-light-background h1, section.has-light
* GLOBAL STYLES * GLOBAL STYLES
*********************************************/ *********************************************/
body { body {
background: #222; background: #191919;
background-color: #222; } background-color: #191919; }
.reveal { .reveal {
font-family: "Source Sans Pro", Helvetica, sans-serif; font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 38px; font-size: 42px;
font-weight: normal; font-weight: normal;
color: #fff; } color: #fff; }
@ -25,8 +25,13 @@ body {
background: #bee4fd; background: #bee4fd;
text-shadow: none; } text-shadow: none; }
.reveal .slides > section, ::-moz-selection {
.reveal .slides > section > section { color: #fff;
background: #bee4fd;
text-shadow: none; }
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3; line-height: 1.3;
font-weight: inherit; } font-weight: inherit; }
@ -117,10 +122,6 @@ body {
.reveal dd { .reveal dd {
margin-left: 40px; } margin-left: 40px; }
.reveal q,
.reveal blockquote {
quotes: none; }
.reveal blockquote { .reveal blockquote {
display: block; display: block;
position: relative; position: relative;
@ -148,10 +149,11 @@ body {
font-family: monospace; font-family: monospace;
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
.reveal code { .reveal code {
font-family: monospace; } font-family: monospace;
text-transform: none; }
.reveal pre code { .reveal pre code {
display: block; display: block;
@ -182,14 +184,17 @@ body {
.reveal table td[align="right"] { .reveal table td[align="right"] {
text-align: right; } text-align: right; }
.reveal table tr:last-child td { .reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none; } border-bottom: none; }
.reveal sup { .reveal sup {
vertical-align: super; } vertical-align: super;
font-size: smaller; }
.reveal sub { .reveal sub {
vertical-align: sub; } vertical-align: sub;
font-size: smaller; }
.reveal small { .reveal small {
display: inline-block; display: inline-block;
@ -206,9 +211,9 @@ body {
.reveal a { .reveal a {
color: #42affa; color: #42affa;
text-decoration: none; text-decoration: none;
-webkit-transition: color 0.15s ease; -webkit-transition: color .15s ease;
-moz-transition: color 0.15s ease; -moz-transition: color .15s ease;
transition: color 0.15s ease; } transition: color .15s ease; }
.reveal a:hover { .reveal a:hover {
color: #8dcffc; color: #8dcffc;
@ -233,9 +238,9 @@ body {
box-shadow: none; } box-shadow: none; }
.reveal a img { .reveal a img {
-webkit-transition: all 0.15s linear; -webkit-transition: all .15s linear;
-moz-transition: all 0.15s linear; -moz-transition: all .15s linear;
transition: all 0.15s linear; } transition: all .15s linear; }
.reveal a:hover img { .reveal a:hover img {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
@ -245,42 +250,24 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls .navigate-left, .reveal .controls {
.reveal .controls .navigate-left.enabled { color: #42affa; }
border-right-color: #42affa; }
.reveal .controls .navigate-right,
.reveal .controls .navigate-right.enabled {
border-left-color: #42affa; }
.reveal .controls .navigate-up,
.reveal .controls .navigate-up.enabled {
border-bottom-color: #42affa; }
.reveal .controls .navigate-down,
.reveal .controls .navigate-down.enabled {
border-top-color: #42affa; }
.reveal .controls .navigate-left.enabled:hover {
border-right-color: #8dcffc; }
.reveal .controls .navigate-right.enabled:hover {
border-left-color: #8dcffc; }
.reveal .controls .navigate-up.enabled:hover {
border-bottom-color: #8dcffc; }
.reveal .controls .navigate-down.enabled:hover {
border-top-color: #8dcffc; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); } background: rgba(0, 0, 0, 0.2);
color: #42affa; }
.reveal .progress span { .reveal .progress span {
background: #42affa;
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: #191919; } }

View File

@ -1,6 +1,6 @@
/** /**
* Blood theme for reveal.js * Blood theme for reveal.js
* Author: Walther https://github.com/Walther * Author: Walther http://github.com/Walther
* *
* Designed to be used with highlight.js theme * Designed to be used with highlight.js theme
* "monokai_sublime.css" available from * "monokai_sublime.css" available from
@ -19,7 +19,7 @@ body {
.reveal { .reveal {
font-family: Ubuntu, "sans-serif"; font-family: Ubuntu, "sans-serif";
font-size: 36px; font-size: 40px;
font-weight: normal; font-weight: normal;
color: #eee; } color: #eee; }
@ -28,8 +28,13 @@ body {
background: #a23; background: #a23;
text-shadow: none; } text-shadow: none; }
.reveal .slides > section, ::-moz-selection {
.reveal .slides > section > section { color: #fff;
background: #a23;
text-shadow: none; }
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3; line-height: 1.3;
font-weight: inherit; } font-weight: inherit; }
@ -120,10 +125,6 @@ body {
.reveal dd { .reveal dd {
margin-left: 40px; } margin-left: 40px; }
.reveal q,
.reveal blockquote {
quotes: none; }
.reveal blockquote { .reveal blockquote {
display: block; display: block;
position: relative; position: relative;
@ -151,10 +152,11 @@ body {
font-family: monospace; font-family: monospace;
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
.reveal code { .reveal code {
font-family: monospace; } font-family: monospace;
text-transform: none; }
.reveal pre code { .reveal pre code {
display: block; display: block;
@ -185,14 +187,17 @@ body {
.reveal table td[align="right"] { .reveal table td[align="right"] {
text-align: right; } text-align: right; }
.reveal table tr:last-child td { .reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none; } border-bottom: none; }
.reveal sup { .reveal sup {
vertical-align: super; } vertical-align: super;
font-size: smaller; }
.reveal sub { .reveal sub {
vertical-align: sub; } vertical-align: sub;
font-size: smaller; }
.reveal small { .reveal small {
display: inline-block; display: inline-block;
@ -209,9 +214,9 @@ body {
.reveal a { .reveal a {
color: #a23; color: #a23;
text-decoration: none; text-decoration: none;
-webkit-transition: color 0.15s ease; -webkit-transition: color .15s ease;
-moz-transition: color 0.15s ease; -moz-transition: color .15s ease;
transition: color 0.15s ease; } transition: color .15s ease; }
.reveal a:hover { .reveal a:hover {
color: #dd5566; color: #dd5566;
@ -236,9 +241,9 @@ body {
box-shadow: none; } box-shadow: none; }
.reveal a img { .reveal a img {
-webkit-transition: all 0.15s linear; -webkit-transition: all .15s linear;
-moz-transition: all 0.15s linear; -moz-transition: all .15s linear;
transition: all 0.15s linear; } transition: all .15s linear; }
.reveal a:hover img { .reveal a:hover img {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
@ -248,46 +253,28 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls .navigate-left, .reveal .controls {
.reveal .controls .navigate-left.enabled { color: #a23; }
border-right-color: #a23; }
.reveal .controls .navigate-right,
.reveal .controls .navigate-right.enabled {
border-left-color: #a23; }
.reveal .controls .navigate-up,
.reveal .controls .navigate-up.enabled {
border-bottom-color: #a23; }
.reveal .controls .navigate-down,
.reveal .controls .navigate-down.enabled {
border-top-color: #a23; }
.reveal .controls .navigate-left.enabled:hover {
border-right-color: #dd5566; }
.reveal .controls .navigate-right.enabled:hover {
border-left-color: #dd5566; }
.reveal .controls .navigate-up.enabled:hover {
border-bottom-color: #dd5566; }
.reveal .controls .navigate-down.enabled:hover {
border-top-color: #dd5566; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); } background: rgba(0, 0, 0, 0.2);
color: #a23; }
.reveal .progress span { .reveal .progress span {
background: #a23;
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: #222; } }
.reveal p { .reveal p {
font-weight: 300; font-weight: 300;
text-shadow: 1px 1px #222; } text-shadow: 1px 1px #222; }

View File

@ -3,7 +3,7 @@
* *
* This was the default theme pre-3.0.0. * This was the default theme pre-3.0.0.
* *
* Copyright (C) 2011-2012 Hakim El Hattab, https://hakim.se * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/ */
@import url(../../lib/font/league-gothic/league-gothic.css); @import url(../../lib/font/league-gothic/league-gothic.css);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
@ -22,7 +22,7 @@ body {
.reveal { .reveal {
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif;
font-size: 36px; font-size: 40px;
font-weight: normal; font-weight: normal;
color: #eee; } color: #eee; }
@ -31,8 +31,13 @@ body {
background: #FF5E99; background: #FF5E99;
text-shadow: none; } text-shadow: none; }
.reveal .slides > section, ::-moz-selection {
.reveal .slides > section > section { color: #fff;
background: #FF5E99;
text-shadow: none; }
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3; line-height: 1.3;
font-weight: inherit; } font-weight: inherit; }
@ -123,10 +128,6 @@ body {
.reveal dd { .reveal dd {
margin-left: 40px; } margin-left: 40px; }
.reveal q,
.reveal blockquote {
quotes: none; }
.reveal blockquote { .reveal blockquote {
display: block; display: block;
position: relative; position: relative;
@ -154,10 +155,11 @@ body {
font-family: monospace; font-family: monospace;
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
.reveal code { .reveal code {
font-family: monospace; } font-family: monospace;
text-transform: none; }
.reveal pre code { .reveal pre code {
display: block; display: block;
@ -188,14 +190,17 @@ body {
.reveal table td[align="right"] { .reveal table td[align="right"] {
text-align: right; } text-align: right; }
.reveal table tr:last-child td { .reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none; } border-bottom: none; }
.reveal sup { .reveal sup {
vertical-align: super; } vertical-align: super;
font-size: smaller; }
.reveal sub { .reveal sub {
vertical-align: sub; } vertical-align: sub;
font-size: smaller; }
.reveal small { .reveal small {
display: inline-block; display: inline-block;
@ -212,9 +217,9 @@ body {
.reveal a { .reveal a {
color: #13DAEC; color: #13DAEC;
text-decoration: none; text-decoration: none;
-webkit-transition: color 0.15s ease; -webkit-transition: color .15s ease;
-moz-transition: color 0.15s ease; -moz-transition: color .15s ease;
transition: color 0.15s ease; } transition: color .15s ease; }
.reveal a:hover { .reveal a:hover {
color: #71e9f4; color: #71e9f4;
@ -239,9 +244,9 @@ body {
box-shadow: none; } box-shadow: none; }
.reveal a img { .reveal a img {
-webkit-transition: all 0.15s linear; -webkit-transition: all .15s linear;
-moz-transition: all 0.15s linear; -moz-transition: all .15s linear;
transition: all 0.15s linear; } transition: all .15s linear; }
.reveal a:hover img { .reveal a:hover img {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
@ -251,42 +256,24 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls .navigate-left, .reveal .controls {
.reveal .controls .navigate-left.enabled { color: #13DAEC; }
border-right-color: #13DAEC; }
.reveal .controls .navigate-right,
.reveal .controls .navigate-right.enabled {
border-left-color: #13DAEC; }
.reveal .controls .navigate-up,
.reveal .controls .navigate-up.enabled {
border-bottom-color: #13DAEC; }
.reveal .controls .navigate-down,
.reveal .controls .navigate-down.enabled {
border-top-color: #13DAEC; }
.reveal .controls .navigate-left.enabled:hover {
border-right-color: #71e9f4; }
.reveal .controls .navigate-right.enabled:hover {
border-left-color: #71e9f4; }
.reveal .controls .navigate-up.enabled:hover {
border-bottom-color: #71e9f4; }
.reveal .controls .navigate-down.enabled:hover {
border-top-color: #71e9f4; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); } background: rgba(0, 0, 0, 0.2);
color: #13DAEC; }
.reveal .progress span { .reveal .progress span {
background: #13DAEC;
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: #2b2b2b; } }

View File

@ -20,7 +20,7 @@ body {
.reveal { .reveal {
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif;
font-size: 36px; font-size: 40px;
font-weight: normal; font-weight: normal;
color: #93a1a1; } color: #93a1a1; }
@ -29,8 +29,13 @@ body {
background: #d33682; background: #d33682;
text-shadow: none; } text-shadow: none; }
.reveal .slides > section, ::-moz-selection {
.reveal .slides > section > section { color: #fff;
background: #d33682;
text-shadow: none; }
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3; line-height: 1.3;
font-weight: inherit; } font-weight: inherit; }
@ -121,10 +126,6 @@ body {
.reveal dd { .reveal dd {
margin-left: 40px; } margin-left: 40px; }
.reveal q,
.reveal blockquote {
quotes: none; }
.reveal blockquote { .reveal blockquote {
display: block; display: block;
position: relative; position: relative;
@ -152,10 +153,11 @@ body {
font-family: monospace; font-family: monospace;
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
.reveal code { .reveal code {
font-family: monospace; } font-family: monospace;
text-transform: none; }
.reveal pre code { .reveal pre code {
display: block; display: block;
@ -186,14 +188,17 @@ body {
.reveal table td[align="right"] { .reveal table td[align="right"] {
text-align: right; } text-align: right; }
.reveal table tr:last-child td { .reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none; } border-bottom: none; }
.reveal sup { .reveal sup {
vertical-align: super; } vertical-align: super;
font-size: smaller; }
.reveal sub { .reveal sub {
vertical-align: sub; } vertical-align: sub;
font-size: smaller; }
.reveal small { .reveal small {
display: inline-block; display: inline-block;
@ -210,9 +215,9 @@ body {
.reveal a { .reveal a {
color: #268bd2; color: #268bd2;
text-decoration: none; text-decoration: none;
-webkit-transition: color 0.15s ease; -webkit-transition: color .15s ease;
-moz-transition: color 0.15s ease; -moz-transition: color .15s ease;
transition: color 0.15s ease; } transition: color .15s ease; }
.reveal a:hover { .reveal a:hover {
color: #78b9e6; color: #78b9e6;
@ -237,9 +242,9 @@ body {
box-shadow: none; } box-shadow: none; }
.reveal a img { .reveal a img {
-webkit-transition: all 0.15s linear; -webkit-transition: all .15s linear;
-moz-transition: all 0.15s linear; -moz-transition: all .15s linear;
transition: all 0.15s linear; } transition: all .15s linear; }
.reveal a:hover img { .reveal a:hover img {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
@ -249,42 +254,24 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls .navigate-left, .reveal .controls {
.reveal .controls .navigate-left.enabled { color: #268bd2; }
border-right-color: #268bd2; }
.reveal .controls .navigate-right,
.reveal .controls .navigate-right.enabled {
border-left-color: #268bd2; }
.reveal .controls .navigate-up,
.reveal .controls .navigate-up.enabled {
border-bottom-color: #268bd2; }
.reveal .controls .navigate-down,
.reveal .controls .navigate-down.enabled {
border-top-color: #268bd2; }
.reveal .controls .navigate-left.enabled:hover {
border-right-color: #78b9e6; }
.reveal .controls .navigate-right.enabled:hover {
border-left-color: #78b9e6; }
.reveal .controls .navigate-up.enabled:hover {
border-bottom-color: #78b9e6; }
.reveal .controls .navigate-down.enabled:hover {
border-top-color: #78b9e6; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); } background: rgba(0, 0, 0, 0.2);
color: #268bd2; }
.reveal .progress span { .reveal .progress span {
background: #268bd2;
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: #002b36; } }

View File

@ -1,7 +1,7 @@
/** /**
* Black theme for reveal.js. * Black theme for reveal.js.
* *
* Copyright (C) 2011-2012 Hakim El Hattab, https://hakim.se * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/ */
@import url(https://fonts.googleapis.com/css?family=Montserrat:700); @import url(https://fonts.googleapis.com/css?family=Montserrat:700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
@ -14,7 +14,7 @@ body {
.reveal { .reveal {
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
font-size: 30px; font-size: 40px;
font-weight: normal; font-weight: normal;
color: #eee; } color: #eee; }
@ -23,8 +23,13 @@ body {
background: #e7ad52; background: #e7ad52;
text-shadow: none; } text-shadow: none; }
.reveal .slides > section, ::-moz-selection {
.reveal .slides > section > section { color: #fff;
background: #e7ad52;
text-shadow: none; }
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3; line-height: 1.3;
font-weight: inherit; } font-weight: inherit; }
@ -115,10 +120,6 @@ body {
.reveal dd { .reveal dd {
margin-left: 40px; } margin-left: 40px; }
.reveal q,
.reveal blockquote {
quotes: none; }
.reveal blockquote { .reveal blockquote {
display: block; display: block;
position: relative; position: relative;
@ -146,10 +147,11 @@ body {
font-family: monospace; font-family: monospace;
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
.reveal code { .reveal code {
font-family: monospace; } font-family: monospace;
text-transform: none; }
.reveal pre code { .reveal pre code {
display: block; display: block;
@ -180,14 +182,17 @@ body {
.reveal table td[align="right"] { .reveal table td[align="right"] {
text-align: right; } text-align: right; }
.reveal table tr:last-child td { .reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none; } border-bottom: none; }
.reveal sup { .reveal sup {
vertical-align: super; } vertical-align: super;
font-size: smaller; }
.reveal sub { .reveal sub {
vertical-align: sub; } vertical-align: sub;
font-size: smaller; }
.reveal small { .reveal small {
display: inline-block; display: inline-block;
@ -204,9 +209,9 @@ body {
.reveal a { .reveal a {
color: #e7ad52; color: #e7ad52;
text-decoration: none; text-decoration: none;
-webkit-transition: color 0.15s ease; -webkit-transition: color .15s ease;
-moz-transition: color 0.15s ease; -moz-transition: color .15s ease;
transition: color 0.15s ease; } transition: color .15s ease; }
.reveal a:hover { .reveal a:hover {
color: #f3d7ac; color: #f3d7ac;
@ -231,9 +236,9 @@ body {
box-shadow: none; } box-shadow: none; }
.reveal a img { .reveal a img {
-webkit-transition: all 0.15s linear; -webkit-transition: all .15s linear;
-moz-transition: all 0.15s linear; -moz-transition: all .15s linear;
transition: all 0.15s linear; } transition: all .15s linear; }
.reveal a:hover img { .reveal a:hover img {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
@ -243,42 +248,24 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls .navigate-left, .reveal .controls {
.reveal .controls .navigate-left.enabled { color: #e7ad52; }
border-right-color: #e7ad52; }
.reveal .controls .navigate-right,
.reveal .controls .navigate-right.enabled {
border-left-color: #e7ad52; }
.reveal .controls .navigate-up,
.reveal .controls .navigate-up.enabled {
border-bottom-color: #e7ad52; }
.reveal .controls .navigate-down,
.reveal .controls .navigate-down.enabled {
border-top-color: #e7ad52; }
.reveal .controls .navigate-left.enabled:hover {
border-right-color: #f3d7ac; }
.reveal .controls .navigate-right.enabled:hover {
border-left-color: #f3d7ac; }
.reveal .controls .navigate-up.enabled:hover {
border-bottom-color: #f3d7ac; }
.reveal .controls .navigate-down.enabled:hover {
border-top-color: #f3d7ac; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); } background: rgba(0, 0, 0, 0.2);
color: #e7ad52; }
.reveal .progress span { .reveal .progress span {
background: #e7ad52;
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: #111; } }

View File

@ -2,7 +2,7 @@
* A simple theme for reveal.js presentations, similar * A simple theme for reveal.js presentations, similar
* to the default theme. The accent color is brown. * to the default theme. The accent color is brown.
* *
* This theme is Copyright (C) 2012-2013 Owen Versteeg, https://owenversteeg.com - it is MIT licensed. * This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed.
*/ */
.reveal a { .reveal a {
line-height: 1.3em; } line-height: 1.3em; }
@ -16,7 +16,7 @@ body {
.reveal { .reveal {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
font-size: 36px; font-size: 40px;
font-weight: normal; font-weight: normal;
color: #000; } color: #000; }
@ -25,8 +25,13 @@ body {
background: #26351C; background: #26351C;
text-shadow: none; } text-shadow: none; }
.reveal .slides > section, ::-moz-selection {
.reveal .slides > section > section { color: #fff;
background: #26351C;
text-shadow: none; }
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3; line-height: 1.3;
font-weight: inherit; } font-weight: inherit; }
@ -117,10 +122,6 @@ body {
.reveal dd { .reveal dd {
margin-left: 40px; } margin-left: 40px; }
.reveal q,
.reveal blockquote {
quotes: none; }
.reveal blockquote { .reveal blockquote {
display: block; display: block;
position: relative; position: relative;
@ -148,10 +149,11 @@ body {
font-family: monospace; font-family: monospace;
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
.reveal code { .reveal code {
font-family: monospace; } font-family: monospace;
text-transform: none; }
.reveal pre code { .reveal pre code {
display: block; display: block;
@ -182,14 +184,17 @@ body {
.reveal table td[align="right"] { .reveal table td[align="right"] {
text-align: right; } text-align: right; }
.reveal table tr:last-child td { .reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none; } border-bottom: none; }
.reveal sup { .reveal sup {
vertical-align: super; } vertical-align: super;
font-size: smaller; }
.reveal sub { .reveal sub {
vertical-align: sub; } vertical-align: sub;
font-size: smaller; }
.reveal small { .reveal small {
display: inline-block; display: inline-block;
@ -206,9 +211,9 @@ body {
.reveal a { .reveal a {
color: #51483D; color: #51483D;
text-decoration: none; text-decoration: none;
-webkit-transition: color 0.15s ease; -webkit-transition: color .15s ease;
-moz-transition: color 0.15s ease; -moz-transition: color .15s ease;
transition: color 0.15s ease; } transition: color .15s ease; }
.reveal a:hover { .reveal a:hover {
color: #8b7c69; color: #8b7c69;
@ -233,9 +238,9 @@ body {
box-shadow: none; } box-shadow: none; }
.reveal a img { .reveal a img {
-webkit-transition: all 0.15s linear; -webkit-transition: all .15s linear;
-moz-transition: all 0.15s linear; -moz-transition: all .15s linear;
transition: all 0.15s linear; } transition: all .15s linear; }
.reveal a:hover img { .reveal a:hover img {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
@ -245,42 +250,24 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls .navigate-left, .reveal .controls {
.reveal .controls .navigate-left.enabled { color: #51483D; }
border-right-color: #51483D; }
.reveal .controls .navigate-right,
.reveal .controls .navigate-right.enabled {
border-left-color: #51483D; }
.reveal .controls .navigate-up,
.reveal .controls .navigate-up.enabled {
border-bottom-color: #51483D; }
.reveal .controls .navigate-down,
.reveal .controls .navigate-down.enabled {
border-top-color: #51483D; }
.reveal .controls .navigate-left.enabled:hover {
border-right-color: #8b7c69; }
.reveal .controls .navigate-right.enabled:hover {
border-left-color: #8b7c69; }
.reveal .controls .navigate-up.enabled:hover {
border-bottom-color: #8b7c69; }
.reveal .controls .navigate-down.enabled:hover {
border-top-color: #8b7c69; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); } background: rgba(0, 0, 0, 0.2);
color: #51483D; }
.reveal .progress span { .reveal .progress span {
background: #51483D;
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: #F0F1EB; } }

View File

@ -3,10 +3,13 @@
* to the default theme. The accent color is darkblue. * to the default theme. The accent color is darkblue.
* *
* This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
* reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, https://hakim.se * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/ */
@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700); @import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
color: #fff; }
/********************************************* /*********************************************
* GLOBAL STYLES * GLOBAL STYLES
*********************************************/ *********************************************/
@ -16,7 +19,7 @@ body {
.reveal { .reveal {
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif;
font-size: 36px; font-size: 40px;
font-weight: normal; font-weight: normal;
color: #000; } color: #000; }
@ -25,8 +28,13 @@ body {
background: rgba(0, 0, 0, 0.99); background: rgba(0, 0, 0, 0.99);
text-shadow: none; } text-shadow: none; }
.reveal .slides > section, ::-moz-selection {
.reveal .slides > section > section { color: #fff;
background: rgba(0, 0, 0, 0.99);
text-shadow: none; }
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3; line-height: 1.3;
font-weight: inherit; } font-weight: inherit; }
@ -117,10 +125,6 @@ body {
.reveal dd { .reveal dd {
margin-left: 40px; } margin-left: 40px; }
.reveal q,
.reveal blockquote {
quotes: none; }
.reveal blockquote { .reveal blockquote {
display: block; display: block;
position: relative; position: relative;
@ -148,10 +152,11 @@ body {
font-family: monospace; font-family: monospace;
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
.reveal code { .reveal code {
font-family: monospace; } font-family: monospace;
text-transform: none; }
.reveal pre code { .reveal pre code {
display: block; display: block;
@ -182,14 +187,17 @@ body {
.reveal table td[align="right"] { .reveal table td[align="right"] {
text-align: right; } text-align: right; }
.reveal table tr:last-child td { .reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none; } border-bottom: none; }
.reveal sup { .reveal sup {
vertical-align: super; } vertical-align: super;
font-size: smaller; }
.reveal sub { .reveal sub {
vertical-align: sub; } vertical-align: sub;
font-size: smaller; }
.reveal small { .reveal small {
display: inline-block; display: inline-block;
@ -204,14 +212,14 @@ body {
* LINKS * LINKS
*********************************************/ *********************************************/
.reveal a { .reveal a {
color: #CC0000; color: #00008B;
text-decoration: none; text-decoration: none;
-webkit-transition: color 0.15s ease; -webkit-transition: color .15s ease;
-moz-transition: color 0.15s ease; -moz-transition: color .15s ease;
transition: color 0.15s ease; } transition: color .15s ease; }
.reveal a:hover { .reveal a:hover {
color: #990000; color: #0000f1;
text-shadow: none; text-shadow: none;
border: none; } border: none; }
@ -225,61 +233,44 @@ body {
.reveal section img { .reveal section img {
margin: 15px 0px; margin: 15px 0px;
background: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.12);
} border: 4px solid #000;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
.reveal section img.plain { .reveal section img.plain {
border: 0; border: 0;
box-shadow: none; } box-shadow: none; }
.reveal a img { .reveal a img {
-webkit-transition: all 0.15s linear; -webkit-transition: all .15s linear;
-moz-transition: all 0.15s linear; -moz-transition: all .15s linear;
transition: all 0.15s linear; } transition: all .15s linear; }
.reveal a:hover img { .reveal a:hover img {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
border-color: #CC0000; border-color: #00008B;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls .navigate-left, .reveal .controls {
.reveal .controls .navigate-left.enabled { color: #00008B; }
border-right-color: #CC0000; }
.reveal .controls .navigate-right,
.reveal .controls .navigate-right.enabled {
border-left-color: #CC0000; }
.reveal .controls .navigate-up,
.reveal .controls .navigate-up.enabled {
border-bottom-color: #CC0000; }
.reveal .controls .navigate-down,
.reveal .controls .navigate-down.enabled {
border-top-color: #CC0000; }
.reveal .controls .navigate-left.enabled:hover {
border-right-color: #990000; }
.reveal .controls .navigate-right.enabled:hover {
border-left-color: #990000; }
.reveal .controls .navigate-up.enabled:hover {
border-bottom-color: #990000; }
.reveal .controls .navigate-down.enabled:hover {
border-top-color: #990000; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); } background: rgba(0, 0, 0, 0.2);
color: #00008B; }
.reveal .progress span { .reveal .progress span {
background: #CC0000;
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: #fff; } }

View File

@ -1,7 +1,7 @@
/** /**
* Sky theme for reveal.js. * Sky theme for reveal.js.
* *
* Copyright (C) 2011-2012 Hakim El Hattab, https://hakim.se * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/ */
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); @import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
@ -23,7 +23,7 @@ body {
.reveal { .reveal {
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
font-size: 36px; font-size: 40px;
font-weight: normal; font-weight: normal;
color: #333; } color: #333; }
@ -32,8 +32,13 @@ body {
background: #134674; background: #134674;
text-shadow: none; } text-shadow: none; }
.reveal .slides > section, ::-moz-selection {
.reveal .slides > section > section { color: #fff;
background: #134674;
text-shadow: none; }
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3; line-height: 1.3;
font-weight: inherit; } font-weight: inherit; }
@ -124,10 +129,6 @@ body {
.reveal dd { .reveal dd {
margin-left: 40px; } margin-left: 40px; }
.reveal q,
.reveal blockquote {
quotes: none; }
.reveal blockquote { .reveal blockquote {
display: block; display: block;
position: relative; position: relative;
@ -155,10 +156,11 @@ body {
font-family: monospace; font-family: monospace;
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
.reveal code { .reveal code {
font-family: monospace; } font-family: monospace;
text-transform: none; }
.reveal pre code { .reveal pre code {
display: block; display: block;
@ -189,14 +191,17 @@ body {
.reveal table td[align="right"] { .reveal table td[align="right"] {
text-align: right; } text-align: right; }
.reveal table tr:last-child td { .reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none; } border-bottom: none; }
.reveal sup { .reveal sup {
vertical-align: super; } vertical-align: super;
font-size: smaller; }
.reveal sub { .reveal sub {
vertical-align: sub; } vertical-align: sub;
font-size: smaller; }
.reveal small { .reveal small {
display: inline-block; display: inline-block;
@ -213,9 +218,9 @@ body {
.reveal a { .reveal a {
color: #3b759e; color: #3b759e;
text-decoration: none; text-decoration: none;
-webkit-transition: color 0.15s ease; -webkit-transition: color .15s ease;
-moz-transition: color 0.15s ease; -moz-transition: color .15s ease;
transition: color 0.15s ease; } transition: color .15s ease; }
.reveal a:hover { .reveal a:hover {
color: #74a7cb; color: #74a7cb;
@ -240,9 +245,9 @@ body {
box-shadow: none; } box-shadow: none; }
.reveal a img { .reveal a img {
-webkit-transition: all 0.15s linear; -webkit-transition: all .15s linear;
-moz-transition: all 0.15s linear; -moz-transition: all .15s linear;
transition: all 0.15s linear; } transition: all .15s linear; }
.reveal a:hover img { .reveal a:hover img {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
@ -252,42 +257,24 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls .navigate-left, .reveal .controls {
.reveal .controls .navigate-left.enabled { color: #3b759e; }
border-right-color: #3b759e; }
.reveal .controls .navigate-right,
.reveal .controls .navigate-right.enabled {
border-left-color: #3b759e; }
.reveal .controls .navigate-up,
.reveal .controls .navigate-up.enabled {
border-bottom-color: #3b759e; }
.reveal .controls .navigate-down,
.reveal .controls .navigate-down.enabled {
border-top-color: #3b759e; }
.reveal .controls .navigate-left.enabled:hover {
border-right-color: #74a7cb; }
.reveal .controls .navigate-right.enabled:hover {
border-left-color: #74a7cb; }
.reveal .controls .navigate-up.enabled:hover {
border-bottom-color: #74a7cb; }
.reveal .controls .navigate-down.enabled:hover {
border-top-color: #74a7cb; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); } background: rgba(0, 0, 0, 0.2);
color: #3b759e; }
.reveal .progress span { .reveal .progress span {
background: #3b759e;
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: #f7fbfc; } }

View File

@ -20,7 +20,7 @@ body {
.reveal { .reveal {
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif;
font-size: 36px; font-size: 40px;
font-weight: normal; font-weight: normal;
color: #657b83; } color: #657b83; }
@ -29,8 +29,13 @@ body {
background: #d33682; background: #d33682;
text-shadow: none; } text-shadow: none; }
.reveal .slides > section, ::-moz-selection {
.reveal .slides > section > section { color: #fff;
background: #d33682;
text-shadow: none; }
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3; line-height: 1.3;
font-weight: inherit; } font-weight: inherit; }
@ -121,10 +126,6 @@ body {
.reveal dd { .reveal dd {
margin-left: 40px; } margin-left: 40px; }
.reveal q,
.reveal blockquote {
quotes: none; }
.reveal blockquote { .reveal blockquote {
display: block; display: block;
position: relative; position: relative;
@ -152,10 +153,11 @@ body {
font-family: monospace; font-family: monospace;
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
.reveal code { .reveal code {
font-family: monospace; } font-family: monospace;
text-transform: none; }
.reveal pre code { .reveal pre code {
display: block; display: block;
@ -186,14 +188,17 @@ body {
.reveal table td[align="right"] { .reveal table td[align="right"] {
text-align: right; } text-align: right; }
.reveal table tr:last-child td { .reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none; } border-bottom: none; }
.reveal sup { .reveal sup {
vertical-align: super; } vertical-align: super;
font-size: smaller; }
.reveal sub { .reveal sub {
vertical-align: sub; } vertical-align: sub;
font-size: smaller; }
.reveal small { .reveal small {
display: inline-block; display: inline-block;
@ -210,9 +215,9 @@ body {
.reveal a { .reveal a {
color: #268bd2; color: #268bd2;
text-decoration: none; text-decoration: none;
-webkit-transition: color 0.15s ease; -webkit-transition: color .15s ease;
-moz-transition: color 0.15s ease; -moz-transition: color .15s ease;
transition: color 0.15s ease; } transition: color .15s ease; }
.reveal a:hover { .reveal a:hover {
color: #78b9e6; color: #78b9e6;
@ -237,9 +242,9 @@ body {
box-shadow: none; } box-shadow: none; }
.reveal a img { .reveal a img {
-webkit-transition: all 0.15s linear; -webkit-transition: all .15s linear;
-moz-transition: all 0.15s linear; -moz-transition: all .15s linear;
transition: all 0.15s linear; } transition: all .15s linear; }
.reveal a:hover img { .reveal a:hover img {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
@ -249,42 +254,24 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls .navigate-left, .reveal .controls {
.reveal .controls .navigate-left.enabled { color: #268bd2; }
border-right-color: #268bd2; }
.reveal .controls .navigate-right,
.reveal .controls .navigate-right.enabled {
border-left-color: #268bd2; }
.reveal .controls .navigate-up,
.reveal .controls .navigate-up.enabled {
border-bottom-color: #268bd2; }
.reveal .controls .navigate-down,
.reveal .controls .navigate-down.enabled {
border-top-color: #268bd2; }
.reveal .controls .navigate-left.enabled:hover {
border-right-color: #78b9e6; }
.reveal .controls .navigate-right.enabled:hover {
border-left-color: #78b9e6; }
.reveal .controls .navigate-up.enabled:hover {
border-bottom-color: #78b9e6; }
.reveal .controls .navigate-down.enabled:hover {
border-top-color: #78b9e6; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); } background: rgba(0, 0, 0, 0.2);
color: #268bd2; }
.reveal .progress span { .reveal .progress span {
background: #268bd2;
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: #fdf6e3; } }

View File

@ -1,7 +1,7 @@
/** /**
* Beige theme for reveal.js. * Beige theme for reveal.js.
* *
* Copyright (C) 2011-2012 Hakim El Hattab, https://hakim.se * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/ */

View File

@ -1,7 +1,7 @@
/** /**
* Black theme for reveal.js. This is the opposite of the 'white' theme. * Black theme for reveal.js. This is the opposite of the 'white' theme.
* *
* By Hakim El Hattab, https://hakim.se * By Hakim El Hattab, http://hakim.se
*/ */
@ -16,12 +16,12 @@
// Override theme settings (see ../template/settings.scss) // Override theme settings (see ../template/settings.scss)
$backgroundColor: #222; $backgroundColor: #191919;
$mainColor: #fff; $mainColor: #fff;
$headingColor: #fff; $headingColor: #fff;
$mainFontSize: 38px; $mainFontSize: 42px;
$mainFont: 'Source Sans Pro', Helvetica, sans-serif; $mainFont: 'Source Sans Pro', Helvetica, sans-serif;
$headingFont: 'Source Sans Pro', Helvetica, sans-serif; $headingFont: 'Source Sans Pro', Helvetica, sans-serif;
$headingTextShadow: none; $headingTextShadow: none;

View File

@ -1,6 +1,6 @@
/** /**
* Blood theme for reveal.js * Blood theme for reveal.js
* Author: Walther https://github.com/Walther * Author: Walther http://github.com/Walther
* *
* Designed to be used with highlight.js theme * Designed to be used with highlight.js theme
* "monokai_sublime.css" available from * "monokai_sublime.css" available from
@ -28,7 +28,6 @@ $backgroundColor: $coal;
// Main text // Main text
$mainFont: Ubuntu, 'sans-serif'; $mainFont: Ubuntu, 'sans-serif';
$mainFontSize: 36px;
$mainColor: #eee; $mainColor: #eee;
// Headings // Headings

View File

@ -3,7 +3,7 @@
* *
* This was the default theme pre-3.0.0. * This was the default theme pre-3.0.0.
* *
* Copyright (C) 2011-2012 Hakim El Hattab, https://hakim.se * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/ */

View File

@ -1,7 +1,7 @@
/** /**
* Black theme for reveal.js. * Black theme for reveal.js.
* *
* Copyright (C) 2011-2012 Hakim El Hattab, https://hakim.se * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/ */
@ -27,7 +27,6 @@ $headingTextShadow: none;
$headingLetterSpacing: -0.03em; $headingLetterSpacing: -0.03em;
$headingTextTransform: none; $headingTextTransform: none;
$selectionBackgroundColor: #e7ad52; $selectionBackgroundColor: #e7ad52;
$mainFontSize: 30px;
// Theme template ------------------------------ // Theme template ------------------------------

View File

@ -2,7 +2,7 @@
* A simple theme for reveal.js presentations, similar * A simple theme for reveal.js presentations, similar
* to the default theme. The accent color is brown. * to the default theme. The accent color is brown.
* *
* This theme is Copyright (C) 2012-2013 Owen Versteeg, https://owenversteeg.com - it is MIT licensed. * This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed.
*/ */

View File

@ -3,7 +3,7 @@
* to the default theme. The accent color is darkblue. * to the default theme. The accent color is darkblue.
* *
* This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
* reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, https://hakim.se * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/ */
@ -31,6 +31,11 @@ $linkColor: #00008B;
$linkColorHover: lighten( $linkColor, 20% ); $linkColorHover: lighten( $linkColor, 20% );
$selectionBackgroundColor: rgba(0, 0, 0, 0.99); $selectionBackgroundColor: rgba(0, 0, 0, 0.99);
section.has-dark-background {
&, h1, h2, h3, h4, h5, h6 {
color: #fff;
}
}
// Theme template ------------------------------ // Theme template ------------------------------

View File

@ -1,7 +1,7 @@
/** /**
* Sky theme for reveal.js. * Sky theme for reveal.js.
* *
* Copyright (C) 2011-2012 Hakim El Hattab, https://hakim.se * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/ */

View File

@ -1,7 +1,7 @@
/** /**
* White theme for reveal.js. This is the opposite of the 'black' theme. * White theme for reveal.js. This is the opposite of the 'black' theme.
* *
* By Hakim El Hattab, https://hakim.se * By Hakim El Hattab, http://hakim.se
*/ */
@ -21,7 +21,7 @@ $backgroundColor: #fff;
$mainColor: #222; $mainColor: #222;
$headingColor: #222; $headingColor: #222;
$mainFontSize: 38px; $mainFontSize: 42px;
$mainFont: 'Source Sans Pro', Helvetica, sans-serif; $mainFont: 'Source Sans Pro', Helvetica, sans-serif;
$headingFont: 'Source Sans Pro', Helvetica, sans-serif; $headingFont: 'Source Sans Pro', Helvetica, sans-serif;
$headingTextShadow: none; $headingTextShadow: none;

View File

@ -6,7 +6,7 @@ $backgroundColor: #2b2b2b;
// Primary/body text // Primary/body text
$mainFont: 'Lato', sans-serif; $mainFont: 'Lato', sans-serif;
$mainFontSize: 36px; $mainFontSize: 40px;
$mainColor: #eee; $mainColor: #eee;
// Vertical spacing between blocks of text // Vertical spacing between blocks of text
@ -28,6 +28,8 @@ $heading2Size: 2.11em;
$heading3Size: 1.55em; $heading3Size: 1.55em;
$heading4Size: 1.00em; $heading4Size: 1.00em;
$codeFont: monospace;
// Links and actions // Links and actions
$linkColor: #13DAEC; $linkColor: #13DAEC;
$linkColorHover: lighten( $linkColor, 20% ); $linkColorHover: lighten( $linkColor, 20% );

View File

@ -22,8 +22,14 @@ body {
text-shadow: none; text-shadow: none;
} }
.reveal .slides>section, ::-moz-selection {
.reveal .slides>section>section { color: $selectionColor;
background: $selectionBackgroundColor;
text-shadow: none;
}
.reveal .slides section,
.reveal .slides section>section {
line-height: 1.3; line-height: 1.3;
font-weight: inherit; font-weight: inherit;
} }
@ -128,11 +134,6 @@ body {
margin-left: 40px; margin-left: 40px;
} }
.reveal q,
.reveal blockquote {
quotes: none;
}
.reveal blockquote { .reveal blockquote {
display: block; display: block;
position: relative; position: relative;
@ -161,15 +162,17 @@ body {
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;
font-family: monospace; font-family: $codeFont;
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0px 0px 6px rgba(0,0,0,0.3); box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
} }
.reveal code { .reveal code {
font-family: monospace; font-family: $codeFont;
text-transform: none;
} }
.reveal pre code { .reveal pre code {
@ -207,15 +210,18 @@ body {
text-align: right; text-align: right;
} }
.reveal table tr:last-child td { .reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none; border-bottom: none;
} }
.reveal sup { .reveal sup {
vertical-align: super; vertical-align: super;
font-size: smaller;
} }
.reveal sub { .reveal sub {
vertical-align: sub; vertical-align: sub;
font-size: smaller;
} }
.reveal small { .reveal small {
@ -290,40 +296,8 @@ body {
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls .navigate-left, .reveal .controls {
.reveal .controls .navigate-left.enabled { color: $linkColor;
border-right-color: $linkColor;
}
.reveal .controls .navigate-right,
.reveal .controls .navigate-right.enabled {
border-left-color: $linkColor;
}
.reveal .controls .navigate-up,
.reveal .controls .navigate-up.enabled {
border-bottom-color: $linkColor;
}
.reveal .controls .navigate-down,
.reveal .controls .navigate-down.enabled {
border-top-color: $linkColor;
}
.reveal .controls .navigate-left.enabled:hover {
border-right-color: $linkColorHover;
}
.reveal .controls .navigate-right.enabled:hover {
border-left-color: $linkColorHover;
}
.reveal .controls .navigate-up.enabled:hover {
border-bottom-color: $linkColorHover;
}
.reveal .controls .navigate-down.enabled:hover {
border-top-color: $linkColorHover;
} }
@ -333,13 +307,19 @@ body {
.reveal .progress { .reveal .progress {
background: rgba(0,0,0,0.2); background: rgba(0,0,0,0.2);
color: $linkColor;
} }
.reveal .progress span { .reveal .progress span {
background: $linkColor;
-webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
} }
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: $backgroundColor;
}
}

View File

@ -1,7 +1,7 @@
/** /**
* White theme for reveal.js. This is the opposite of the 'black' theme. * White theme for reveal.js. This is the opposite of the 'black' theme.
* *
* By Hakim El Hattab, https://hakim.se * By Hakim El Hattab, http://hakim.se
*/ */
@import url(../../lib/font/source-sans-pro/source-sans-pro.css); @import url(../../lib/font/source-sans-pro/source-sans-pro.css);
section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 { section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 {
@ -16,7 +16,7 @@ body {
.reveal { .reveal {
font-family: "Source Sans Pro", Helvetica, sans-serif; font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 38px; font-size: 42px;
font-weight: normal; font-weight: normal;
color: #222; } color: #222; }
@ -25,8 +25,13 @@ body {
background: #98bdef; background: #98bdef;
text-shadow: none; } text-shadow: none; }
.reveal .slides > section, ::-moz-selection {
.reveal .slides > section > section { color: #fff;
background: #98bdef;
text-shadow: none; }
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3; line-height: 1.3;
font-weight: inherit; } font-weight: inherit; }
@ -117,10 +122,6 @@ body {
.reveal dd { .reveal dd {
margin-left: 40px; } margin-left: 40px; }
.reveal q,
.reveal blockquote {
quotes: none; }
.reveal blockquote { .reveal blockquote {
display: block; display: block;
position: relative; position: relative;
@ -148,10 +149,11 @@ body {
font-family: monospace; font-family: monospace;
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); }
.reveal code { .reveal code {
font-family: monospace; } font-family: monospace;
text-transform: none; }
.reveal pre code { .reveal pre code {
display: block; display: block;
@ -182,14 +184,17 @@ body {
.reveal table td[align="right"] { .reveal table td[align="right"] {
text-align: right; } text-align: right; }
.reveal table tr:last-child td { .reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none; } border-bottom: none; }
.reveal sup { .reveal sup {
vertical-align: super; } vertical-align: super;
font-size: smaller; }
.reveal sub { .reveal sub {
vertical-align: sub; } vertical-align: sub;
font-size: smaller; }
.reveal small { .reveal small {
display: inline-block; display: inline-block;
@ -206,9 +211,9 @@ body {
.reveal a { .reveal a {
color: #2a76dd; color: #2a76dd;
text-decoration: none; text-decoration: none;
-webkit-transition: color 0.15s ease; -webkit-transition: color .15s ease;
-moz-transition: color 0.15s ease; -moz-transition: color .15s ease;
transition: color 0.15s ease; } transition: color .15s ease; }
.reveal a:hover { .reveal a:hover {
color: #6ca0e8; color: #6ca0e8;
@ -233,9 +238,9 @@ body {
box-shadow: none; } box-shadow: none; }
.reveal a img { .reveal a img {
-webkit-transition: all 0.15s linear; -webkit-transition: all .15s linear;
-moz-transition: all 0.15s linear; -moz-transition: all .15s linear;
transition: all 0.15s linear; } transition: all .15s linear; }
.reveal a:hover img { .reveal a:hover img {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
@ -245,42 +250,24 @@ body {
/********************************************* /*********************************************
* NAVIGATION CONTROLS * NAVIGATION CONTROLS
*********************************************/ *********************************************/
.reveal .controls .navigate-left, .reveal .controls {
.reveal .controls .navigate-left.enabled { color: #2a76dd; }
border-right-color: #2a76dd; }
.reveal .controls .navigate-right,
.reveal .controls .navigate-right.enabled {
border-left-color: #2a76dd; }
.reveal .controls .navigate-up,
.reveal .controls .navigate-up.enabled {
border-bottom-color: #2a76dd; }
.reveal .controls .navigate-down,
.reveal .controls .navigate-down.enabled {
border-top-color: #2a76dd; }
.reveal .controls .navigate-left.enabled:hover {
border-right-color: #6ca0e8; }
.reveal .controls .navigate-right.enabled:hover {
border-left-color: #6ca0e8; }
.reveal .controls .navigate-up.enabled:hover {
border-bottom-color: #6ca0e8; }
.reveal .controls .navigate-down.enabled:hover {
border-top-color: #6ca0e8; }
/********************************************* /*********************************************
* PROGRESS BAR * PROGRESS BAR
*********************************************/ *********************************************/
.reveal .progress { .reveal .progress {
background: rgba(0, 0, 0, 0.2); } background: rgba(0, 0, 0, 0.2);
color: #2a76dd; }
.reveal .progress span { .reveal .progress span {
background: #2a76dd;
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: #fff; } }

425
reveal.js/demo.html Normal file
View File

@ -0,0 +1,425 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js The HTML Presentation Framework</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css" id="theme">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/monokai.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h1>Reveal.js</h1>
<h3>The HTML Presentation Framework</h3>
<p>
<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> and <a href="https://github.com/hakimel/reveal.js/graphs/contributors">contributors</a></small>
</p>
</section>
<section>
<h2>Hello There</h2>
<p>
reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
</p>
</section>
<!-- Example of nested vertical slides -->
<section>
<section>
<h2>Vertical Slides</h2>
<p>Slides can be nested inside of each other.</p>
<p>Use the <em>Space</em> key to navigate through all slides.</p>
<br>
<a href="#" class="navigate-down">
<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a>
</section>
<section>
<h2>Basement Level 1</h2>
<p>Nested slides are useful for adding additional detail underneath a high level horizontal slide.</p>
</section>
<section>
<h2>Basement Level 2</h2>
<p>That's it, time to go back up.</p>
<br>
<a href="#/2">
<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="transform: rotate(180deg); -webkit-transform: rotate(180deg);">
</a>
</section>
</section>
<section>
<h2>Slides</h2>
<p>
Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at <a href="https://slides.com" target="_blank">https://slides.com</a>.
</p>
</section>
<section>
<h2>Point of View</h2>
<p>
Press <strong>ESC</strong> to enter the slide overview.
</p>
<p>
Hold down the <strong>alt</strong> key (<strong>ctrl</strong> in Linux) and click on any element to zoom towards it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>. Click again to zoom back out.
</p>
<p>
(NOTE: Use ctrl + click in Linux.)
</p>
</section>
<section>
<h2>Touch Optimized</h2>
<p>
Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
</p>
</section>
<section data-markdown>
<script type="text/template">
## Markdown support
Write content using inline or external Markdown.
Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
```
<section data-markdown>
## Markdown support
Write content using inline or external Markdown.
Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
</section>
```
</script>
</section>
<section>
<section id="fragments">
<h2>Fragments</h2>
<p>Hit the next arrow...</p>
<p class="fragment">... to step through ...</p>
<p><span class="fragment">... a</span> <span class="fragment">fragmented</span> <span class="fragment">slide.</span></p>
<aside class="notes">
This slide has fragments which are also stepped through in the notes window.
</aside>
</section>
<section>
<h2>Fragment Styles</h2>
<p>There's different types of fragments, like:</p>
<p class="fragment grow">grow</p>
<p class="fragment shrink">shrink</p>
<p class="fragment fade-out">fade-out</p>
<p>
<span style="display: inline-block;" class="fragment fade-right">fade-right, </span>
<span style="display: inline-block;" class="fragment fade-up">up, </span>
<span style="display: inline-block;" class="fragment fade-down">down, </span>
<span style="display: inline-block;" class="fragment fade-left">left</span>
</p>
<p class="fragment fade-in-then-out">fade-in-then-out</p>
<p class="fragment fade-in-then-semi-out">fade-in-then-semi-out</p>
<p>Highlight <span class="fragment highlight-red">red</span> <span class="fragment highlight-blue">blue</span> <span class="fragment highlight-green">green</span></p>
</section>
</section>
<section id="transitions">
<h2>Transition Styles</h2>
<p>
You can select from different transitions, like: <br>
<a href="?transition=none#/transitions">None</a> -
<a href="?transition=fade#/transitions">Fade</a> -
<a href="?transition=slide#/transitions">Slide</a> -
<a href="?transition=convex#/transitions">Convex</a> -
<a href="?transition=concave#/transitions">Concave</a> -
<a href="?transition=zoom#/transitions">Zoom</a>
</p>
</section>
<section id="themes">
<h2>Themes</h2>
<p>
reveal.js comes with a few themes built in: <br>
<!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/black.css'); return false;">Black (default)</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/white.css'); return false;">White</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/league.css'); return false;">League</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/sky.css'); return false;">Sky</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/beige.css'); return false;">Beige</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/simple.css'); return false;">Simple</a> <br>
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/serif.css'); return false;">Serif</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/blood.css'); return false;">Blood</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/night.css'); return false;">Night</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/moon.css'); return false;">Moon</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/solarized.css'); return false;">Solarized</a>
</p>
</section>
<section>
<section data-background="#dddddd">
<h2>Slide Backgrounds</h2>
<p>
Set <code>data-background="#dddddd"</code> on a slide to change the background color. All CSS color formats are supported.
</p>
<a href="#" class="navigate-down">
<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a>
</section>
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png">
<h2>Image Backgrounds</h2>
<pre><code class="hljs html">&lt;section data-background="image.png"&gt;</code></pre>
</section>
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
<h2>Tiled Backgrounds</h2>
<pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
</section>
<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-color="#000000">
<div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
<h2>Video Backgrounds</h2>
<pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre>
</div>
</section>
<section data-background="http://i.giphy.com/90F8aUepslB84.gif">
<h2>... and GIFs!</h2>
</section>
</section>
<section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">
<h2>Background Transitions</h2>
<p>
Different background transitions are available via the backgroundTransition option. This one's called "zoom".
</p>
<pre><code class="hljs javascript">Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
</section>
<section data-transition="slide" data-background="#b5533c" data-background-transition="zoom">
<h2>Background Transitions</h2>
<p>
You can override background transitions per-slide.
</p>
<pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-transition="zoom"&gt;</code></pre>
</section>
<section data-background-iframe="https://hakim.se" data-background-interactive>
<div style="position: absolute; width: 40%; right: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.5), 0 5px 25px rgba(0,0,0,0.2); background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px; font-size: 20px; text-align: left;">
<h2>Iframe Backgrounds</h2>
<p>Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.</p>
</div>
</section>
<section>
<h2>Pretty Code</h2>
<pre><code class="hljs" data-trim data-line-numbers="4|9|4,8-11">
import React, { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
&lt;div&gt;
&lt;p&gt;You clicked {count} times&lt;/p&gt;
&lt;button onClick={() =&gt; setCount(count + 1)}&gt;
Click me
&lt;/button&gt;
&lt;/div&gt;
);
}
</code></pre>
<p>Code syntax highlighting courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
</section>
<section>
<h2>Marvelous List</h2>
<ul>
<li>No order here</li>
<li>Or here</li>
<li>Or here</li>
<li>Or here</li>
</ul>
</section>
<section>
<h2>Fantastic Ordered List</h2>
<ol>
<li>One is smaller than...</li>
<li>Two is smaller than...</li>
<li>Three!</li>
</ol>
</section>
<section>
<h2>Tabular Tables</h2>
<table>
<thead>
<tr>
<th>Item</th>
<th>Value</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apples</td>
<td>$1</td>
<td>7</td>
</tr>
<tr>
<td>Lemonade</td>
<td>$2</td>
<td>18</td>
</tr>
<tr>
<td>Bread</td>
<td>$3</td>
<td>2</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2>Clever Quotes</h2>
<p>
These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">The nice thing about standards is that there are so many to choose from</q> and block:
</p>
<blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
&ldquo;For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.&rdquo;
</blockquote>
</section>
<section>
<h2>Intergalactic Interconnections</h2>
<p>
You can link between slides internally,
<a href="#/2/3">like this</a>.
</p>
</section>
<section>
<h2>Speaker View</h2>
<p>There's a <a href="https://github.com/hakimel/reveal.js#speaker-notes">speaker view</a>. It includes a timer, preview of the upcoming slide as well as your speaker notes.</p>
<p>Press the <em>S</em> key to try it out.</p>
<aside class="notes">
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
</aside>
</section>
<section>
<h2>Export to PDF</h2>
<p>Presentations can be <a href="https://github.com/hakimel/reveal.js#pdf-export">exported to PDF</a>, here's an example:</p>
<iframe data-src="https://www.slideshare.net/slideshow/embed_code/42840540" width="445" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:3px solid #666; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
</section>
<section>
<h2>Global State</h2>
<p>
Set <code>data-state="something"</code> on a slide and <code>"something"</code>
will be added as a class to the document element when the slide is open. This lets you
apply broader style changes, like switching the page background.
</p>
</section>
<section data-state="customevent">
<h2>State Events</h2>
<p>
Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
</p>
<pre><code class="javascript" data-trim contenteditable style="font-size: 18px;">
Reveal.addEventListener( 'customevent', function() {
console.log( '"customevent" has fired' );
} );
</code></pre>
</section>
<section>
<h2>Take a Moment</h2>
<p>
Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.
</p>
</section>
<section>
<h2>Much more</h2>
<ul>
<li>Right-to-left support</li>
<li><a href="https://github.com/hakimel/reveal.js#api">Extensive JavaScript API</a></li>
<li><a href="https://github.com/hakimel/reveal.js#auto-sliding">Auto-progression</a></li>
<li><a href="https://github.com/hakimel/reveal.js#parallax-background">Parallax backgrounds</a></li>
<li><a href="https://github.com/hakimel/reveal.js#keyboard-bindings">Custom keyboard bindings</a></li>
</ul>
</section>
<section style="text-align: left;">
<h1>THE END</h1>
<p>
- <a href="https://slides.com">Try the online editor</a> <br>
- <a href="https://github.com/hakimel/reveal.js">Source code &amp; documentation</a>
</p>
</section>
</div>
</div>
<script src="js/reveal.js"></script>
<script>
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
center: true,
hash: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// More info https://github.com/hakimel/reveal.js#dependencies
dependencies: [
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js' },
{ src: 'plugin/search/search.js', async: true },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});
</script>
</body>
</html>

View File

@ -1,24 +1,17 @@
<!doctype html> <!doctype html>
<html lang="en"> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>reveal.js The HTML Presentation Framework</title> <title>reveal.js</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/reveal.css"> <link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css" id="theme"> <link rel="stylesheet" href="css/theme/black.css">
<!-- Code syntax highlighting --> <!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/zenburn.css"> <link rel="stylesheet" href="lib/css/monokai.css">
<!-- Printing and PDF exports --> <!-- Printing and PDF exports -->
<script> <script>
@ -28,384 +21,30 @@
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css'; link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link ); document.getElementsByTagName( 'head' )[0].appendChild( link );
</script> </script>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head> </head>
<body> <body>
<div class="reveal"> <div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides"> <div class="slides">
<section> <section>Slide 1</section>
<h1>Reveal.js</h1> <section>Slide 2</section>
<h3>The HTML Presentation Framework</h3>
<p>
<small>Created by <a href="https://hakim.se">Hakim El Hattab</a> / <a href="https://twitter.com/hakimel">@hakimel</a></small>
</p>
</section>
<section>
<h2>Hello There</h2>
<p>
reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.
</p>
</section>
<!-- Example of nested vertical slides -->
<section>
<section>
<h2>Vertical Slides</h2>
<p>Slides can be nested inside of each other.</p>
<p>Use the <em>Space</em> key to navigate through all slides.</p>
<br>
<a href="#" class="navigate-down">
<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a>
</section>
<section>
<h2>Basement Level 1</h2>
<p>Nested slides are useful for adding additional detail underneath a high level horizontal slide.</p>
</section>
<section>
<h2>Basement Level 2</h2>
<p>That's it, time to go back up.</p>
<br>
<a href="#/2">
<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="transform: rotate(180deg); -webkit-transform: rotate(180deg);">
</a>
</section>
</section>
<section>
<h2>Slides</h2>
<p>
Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at <a href="https://slides.com" target="_blank">https://slides.com</a>.
</p>
</section>
<section>
<h2>Point of View</h2>
<p>
Press <strong>ESC</strong> to enter the slide overview.
</p>
<p>
Hold down alt and click on any element to zoom in on it using <a href="https://lab.hakim.se/zoom-js">zoom.js</a>. Alt + click anywhere to zoom back out.
</p>
</section>
<section>
<h2>Touch Optimized</h2>
<p>
Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.
</p>
</section>
<section data-markdown>
<script type="text/template">
## Markdown support
Write content using inline or external Markdown.
Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
```
<section data-markdown>
## Markdown support
Write content using inline or external Markdown.
Instructions and more info available in the [readme](https://github.com/hakimel/reveal.js#markdown).
</section>
```
</script>
</section>
<section>
<section id="fragments">
<h2>Fragments</h2>
<p>Hit the next arrow...</p>
<p class="fragment">... to step through ...</p>
<p><span class="fragment">... a</span> <span class="fragment">fragmented</span> <span class="fragment">slide.</span></p>
<aside class="notes">
This slide has fragments which are also stepped through in the notes window.
</aside>
</section>
<section>
<h2>Fragment Styles</h2>
<p>There's different types of fragments, like:</p>
<p class="fragment grow">grow</p>
<p class="fragment shrink">shrink</p>
<p class="fragment fade-out">fade-out</p>
<p class="fragment current-visible">current-visible</p>
<p class="fragment highlight-red">highlight-red</p>
<p class="fragment highlight-blue">highlight-blue</p>
</section>
</section>
<section id="transitions">
<h2>Transition Styles</h2>
<p>
You can select from different transitions, like: <br>
<a href="?transition=none#/transitions">None</a> -
<a href="?transition=fade#/transitions">Fade</a> -
<a href="?transition=slide#/transitions">Slide</a> -
<a href="?transition=convex#/transitions">Convex</a> -
<a href="?transition=concave#/transitions">Concave</a> -
<a href="?transition=zoom#/transitions">Zoom</a>
</p>
</section>
<section id="themes">
<h2>Themes</h2>
<p>
reveal.js comes with a few themes built in: <br>
<!-- Hacks to swap themes after the page has loaded. Not flexible and only intended for the reveal.js demo deck. -->
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/black.css'); return false;">Black (default)</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/white.css'); return false;">White</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/league.css'); return false;">League</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/sky.css'); return false;">Sky</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/beige.css'); return false;">Beige</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/simple.css'); return false;">Simple</a> <br>
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/serif.css'); return false;">Serif</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/blood.css'); return false;">Blood</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/night.css'); return false;">Night</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/moon.css'); return false;">Moon</a> -
<a href="#" onclick="document.getElementById('theme').setAttribute('href','css/theme/solarized.css'); return false;">Solarized</a>
</p>
</section>
<section>
<section data-background="#dddddd">
<h2>Slide Backgrounds</h2>
<p>
Set <code>data-background="#dddddd"</code> on a slide to change the background color. All CSS color formats are supported.
</p>
<a href="#" class="navigate-down">
<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
</a>
</section>
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png">
<h2>Image Backgrounds</h2>
<pre><code class="hljs">&lt;section data-background="image.png"&gt;</code></pre>
</section>
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
<h2>Tiled Backgrounds</h2>
<pre><code class="hljs" style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
</section>
<section data-background-video="https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.mp4,https://s3.amazonaws.com/static.slid.es/site/homepage/v1/homepage-video-editor.webm" data-background-color="#000000">
<div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
<h2>Video Backgrounds</h2>
<pre><code class="hljs" style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre>
</div> </div>
</section>
<section data-background="https://i.giphy.com/90F8aUepslB84.gif">
<h2>... and GIFs!</h2>
</section>
</section>
<section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">
<h2>Background Transitions</h2>
<p>
Different background transitions are available via the backgroundTransition option. This one's called "zoom".
</p>
<pre><code class="hljs">Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
</section>
<section data-transition="slide" data-background="#b5533c" data-background-transition="zoom">
<h2>Background Transitions</h2>
<p>
You can override background transitions per-slide.
</p>
<pre><code class="hljs" style="word-wrap: break-word;">&lt;section data-background-transition="zoom"&gt;</code></pre>
</section>
<section>
<h2>Pretty Code</h2>
<pre><code class="hljs" data-trim contenteditable>
function linkify( selector ) {
if( supports3DTransforms ) {
var nodes = document.querySelectorAll( selector );
for( var i = 0, len = nodes.length; i &lt; len; i++ ) {
var node = nodes[i];
if( !node.className ) {
node.className += ' roll';
}
}
}
}
</code></pre>
<p>Code syntax highlighting courtesy of <a href="https://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
</section>
<section>
<h2>Marvelous List</h2>
<ul>
<li>No order here</li>
<li>Or here</li>
<li>Or here</li>
<li>Or here</li>
</ul>
</section>
<section>
<h2>Fantastic Ordered List</h2>
<ol>
<li>One is smaller than...</li>
<li>Two is smaller than...</li>
<li>Three!</li>
</ol>
</section>
<section>
<h2>Tabular Tables</h2>
<table>
<thead>
<tr>
<th>Item</th>
<th>Value</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apples</td>
<td>$1</td>
<td>7</td>
</tr>
<tr>
<td>Lemonade</td>
<td>$2</td>
<td>18</td>
</tr>
<tr>
<td>Bread</td>
<td>$3</td>
<td>2</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2>Clever Quotes</h2>
<p>
These guys come in two forms, inline: <q cite="https://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
&ldquo;The nice thing about standards is that there are so many to choose from&rdquo;</q> and block:
</p>
<blockquote cite="https://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
&ldquo;For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.&rdquo;
</blockquote>
</section>
<section>
<h2>Intergalactic Interconnections</h2>
<p>
You can link between slides internally,
<a href="#/2/3">like this</a>.
</p>
</section>
<section>
<h2>Speaker View</h2>
<p>There's a <a href="https://github.com/hakimel/reveal.js#speaker-notes">speaker view</a>. It includes a timer, preview of the upcoming slide as well as your speaker notes.</p>
<p>Press the <em>S</em> key to try it out.</p>
<aside class="notes">
Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
</aside>
</section>
<section>
<h2>Export to PDF</h2>
<p>Presentations can be <a href="https://github.com/hakimel/reveal.js#pdf-export">exported to PDF</a>, here's an example:</p>
<iframe src="https://www.slideshare.net/slideshow/embed_code/42840540" width="445" height="355" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:3px solid #666; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe>
</section>
<section>
<h2>Global State</h2>
<p>
Set <code>data-state="something"</code> on a slide and <code>"something"</code>
will be added as a class to the document element when the slide is open. This lets you
apply broader style changes, like switching the page background.
</p>
</section>
<section data-state="customevent">
<h2>State Events</h2>
<p>
Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
</p>
<pre><code class="javascript" data-trim contenteditable style="font-size: 18px;">
Reveal.addEventListener( 'customevent', function() {
console.log( '"customevent" has fired' );
} );
</code></pre>
</section>
<section>
<h2>Take a Moment</h2>
<p>
Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.
</p>
</section>
<section>
<h2>Much more</h2>
<ul>
<li>Right-to-left support</li>
<li><a href="https://github.com/hakimel/reveal.js#api">Extensive JavaScript API</a></li>
<li><a href="https://github.com/hakimel/reveal.js#auto-sliding">Auto-progression</a></li>
<li><a href="https://github.com/hakimel/reveal.js#parallax-background">Parallax backgrounds</a></li>
<li><a href="https://github.com/hakimel/reveal.js#keyboard-bindings">Custom keyboard bindings</a></li>
</ul>
</section>
<section style="text-align: left;">
<h1>THE END</h1>
<p>
- <a href="https://slides.com">Try the online editor</a> <br>
- <a href="https://github.com/hakimel/reveal.js">Source code &amp; documentation</a>
</p>
</section>
</div> </div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script> <script src="js/reveal.js"></script>
<script> <script>
// More info about config & dependencies:
// Full list of configuration options available at: // - https://github.com/hakimel/reveal.js#configuration
// https://github.com/hakimel/reveal.js#configuration // - https://github.com/hakimel/reveal.js#dependencies
Reveal.initialize({ Reveal.initialize({
controls: true, hash: true,
progress: true,
history: true,
center: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [ dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } }, { src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: 'plugin/markdown/markdown.js' },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: 'plugin/highlight/highlight.js' },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true } { src: 'plugin/notes/notes.js', async: true }
] ]
}); });
</script> </script>
</body> </body>
</html> </html>

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,71 @@
/*
Monokai style - ported by Luigi Maselli - http://grigio.org
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #272822;
color: #ddd;
}
.hljs-tag,
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-strong,
.hljs-name {
color: #f92672;
}
.hljs-code {
color: #66d9ef;
}
.hljs-class .hljs-title {
color: white;
}
.hljs-attribute,
.hljs-symbol,
.hljs-regexp,
.hljs-link {
color: #bf79db;
}
.hljs-string,
.hljs-bullet,
.hljs-subst,
.hljs-title,
.hljs-section,
.hljs-emphasis,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
color: #a6e22e;
}
.hljs-comment,
.hljs-quote,
.hljs-deletion,
.hljs-meta {
color: #75715e;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-doctag,
.hljs-title,
.hljs-section,
.hljs-type,
.hljs-selector-id {
font-weight: bold;
}

View File

@ -1,6 +1,8 @@
/* /*
Zenburn style from voldmar.ru (c) Vladimir Epifanov <voldmar@voldmar.ru> Zenburn style from voldmar.ru (c) Vladimir Epifanov <voldmar@voldmar.ru>
based on dark.css by Ivan Sagalaev based on dark.css by Ivan Sagalaev
*/ */
.hljs { .hljs {
@ -9,107 +11,70 @@ based on dark.css by Ivan Sagalaev
padding: 0.5em; padding: 0.5em;
background: #3f3f3f; background: #3f3f3f;
color: #dcdcdc; color: #dcdcdc;
-webkit-text-size-adjust: none;
} }
.hljs-keyword, .hljs-keyword,
.hljs-tag, .hljs-selector-tag,
.css .hljs-class, .hljs-tag {
.css .hljs-id,
.lisp .hljs-title,
.nginx .hljs-title,
.hljs-request,
.hljs-status,
.clojure .hljs-attribute {
color: #e3ceab; color: #e3ceab;
} }
.django .hljs-template_tag, .hljs-template-tag {
.django .hljs-variable,
.django .hljs-filter .hljs-argument {
color: #dcdcdc; color: #dcdcdc;
} }
.hljs-number, .hljs-number {
.hljs-date {
color: #8cd0d3; color: #8cd0d3;
} }
.dos .hljs-envvar,
.dos .hljs-stream,
.hljs-variable, .hljs-variable,
.apache .hljs-sqbracket, .hljs-template-variable,
.hljs-name { .hljs-attribute {
color: #efdcbc; color: #efdcbc;
} }
.dos .hljs-flow, .hljs-literal {
.diff .hljs-change,
.python .exception,
.python .hljs-built_in,
.hljs-literal,
.tex .hljs-special {
color: #efefaf; color: #efefaf;
} }
.diff .hljs-chunk,
.hljs-subst { .hljs-subst {
color: #8f8f8f; color: #8f8f8f;
} }
.dos .hljs-keyword,
.hljs-decorator,
.hljs-title, .hljs-title,
.hljs-type, .hljs-name,
.diff .hljs-header, .hljs-selector-id,
.ruby .hljs-class .hljs-parent, .hljs-selector-class,
.apache .hljs-tag, .hljs-section,
.nginx .hljs-built_in, .hljs-type {
.tex .hljs-command,
.hljs-prompt {
color: #efef8f; color: #efef8f;
} }
.dos .hljs-winutils, .hljs-symbol,
.ruby .hljs-symbol, .hljs-bullet,
.ruby .hljs-symbol .hljs-string, .hljs-link {
.ruby .hljs-string {
color: #dca3a3; color: #dca3a3;
} }
.diff .hljs-deletion, .hljs-deletion,
.hljs-string, .hljs-string,
.hljs-tag .hljs-value,
.hljs-preprocessor,
.hljs-pragma,
.hljs-built_in, .hljs-built_in,
.smalltalk .hljs-class, .hljs-builtin-name {
.smalltalk .hljs-localvars,
.smalltalk .hljs-array,
.css .hljs-rule .hljs-value,
.hljs-attr_selector,
.hljs-pseudo,
.apache .hljs-cbracket,
.tex .hljs-formula,
.coffeescript .hljs-attribute {
color: #cc9393; color: #cc9393;
} }
.hljs-shebang, .hljs-addition,
.diff .hljs-addition,
.hljs-comment, .hljs-comment,
.hljs-annotation, .hljs-quote,
.hljs-pi, .hljs-meta {
.hljs-doctype {
color: #7f9f7f; color: #7f9f7f;
} }
.coffeescript .javascript,
.javascript .xml, .hljs-emphasis {
.tex .hljs-formula, font-style: italic;
.xml .javascript, }
.xml .vbscript,
.xml .css, .hljs-strong {
.xml .hljs-cdata { font-weight: bold;
opacity: 0.5;
} }

View File

@ -1,2 +1,2 @@
SIL Open Font License (OFL) SIL Open Font License (OFL)
https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL

View File

@ -1,9 +1,9 @@
SIL Open Font License SIL Open Font License
Copyright 2010, 2012 Adobe Systems Incorporated (https://www.adobe.com/), with Reserved Font Name Source. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries. Copyright 2010, 2012 Adobe Systems Incorporated (http://www.adobe.com/), with Reserved Font Name Source. All Rights Reserved. Source is a trademark of Adobe Systems Incorporated in the United States and/or other countries.
This Font Software is licensed under the SIL Open Font License, Version 1.1. This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at: https://scripts.sil.org/OFL This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL
—————————————————————————————- —————————————————————————————-
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007

View File

@ -1,2 +0,0 @@
/*! @source https://purl.eligrey.com/github/classList.js/blob/master/classList.js*/
if(typeof document!=="undefined"&&!("classList" in document.createElement("a"))){(function(j){var a="classList",f="prototype",m=(j.HTMLElement||j.Element)[f],b=Object,k=String[f].trim||function(){return this.replace(/^\s+|\s+$/g,"")},c=Array[f].indexOf||function(q){var p=0,o=this.length;for(;p<o;p++){if(p in this&&this[p]===q){return p}}return -1},n=function(o,p){this.name=o;this.code=DOMException[o];this.message=p},g=function(p,o){if(o===""){throw new n("SYNTAX_ERR","An invalid or illegal string was specified")}if(/\s/.test(o)){throw new n("INVALID_CHARACTER_ERR","String contains an invalid character")}return c.call(p,o)},d=function(s){var r=k.call(s.className),q=r?r.split(/\s+/):[],p=0,o=q.length;for(;p<o;p++){this.push(q[p])}this._updateClassName=function(){s.className=this.toString()}},e=d[f]=[],i=function(){return new d(this)};n[f]=Error[f];e.item=function(o){return this[o]||null};e.contains=function(o){o+="";return g(this,o)!==-1};e.add=function(o){o+="";if(g(this,o)===-1){this.push(o);this._updateClassName()}};e.remove=function(p){p+="";var o=g(this,p);if(o!==-1){this.splice(o,1);this._updateClassName()}};e.toggle=function(o){o+="";if(g(this,o)===-1){this.add(o)}else{this.remove(o)}};e.toString=function(){return this.join(" ")};if(b.defineProperty){var l={get:i,enumerable:true,configurable:true};try{b.defineProperty(m,a,l)}catch(h){if(h.number===-2146823252){l.enumerable=false;b.defineProperty(m,a,l)}}}else{if(b[f].__defineGetter__){m.__defineGetter__(a,i)}}}(self))};

View File

@ -1,8 +0,0 @@
/**
Head JS The only script in your <HEAD>
Copyright Tero Piirainen (tipiirai)
License MIT / https://bit.ly/mit-license
Version 0.96
https://headjs.com
*/(function(a){function z(){d||(d=!0,s(e,function(a){p(a)}))}function y(c,d){var e=a.createElement("script");e.type="text/"+(c.type||"javascript"),e.src=c.src||c,e.async=!1,e.onreadystatechange=e.onload=function(){var a=e.readyState;!d.done&&(!a||/loaded|complete/.test(a))&&(d.done=!0,d())},(a.body||b).appendChild(e)}function x(a,b){if(a.state==o)return b&&b();if(a.state==n)return k.ready(a.name,b);if(a.state==m)return a.onpreload.push(function(){x(a,b)});a.state=n,y(a.url,function(){a.state=o,b&&b(),s(g[a.name],function(a){p(a)}),u()&&d&&s(g.ALL,function(a){p(a)})})}function w(a,b){a.state===undefined&&(a.state=m,a.onpreload=[],y({src:a.url,type:"cache"},function(){v(a)}))}function v(a){a.state=l,s(a.onpreload,function(a){a.call()})}function u(a){a=a||h;var b;for(var c in a){if(a.hasOwnProperty(c)&&a[c].state!=o)return!1;b=!0}return b}function t(a){return Object.prototype.toString.call(a)=="[object Function]"}function s(a,b){if(!!a){typeof a=="object"&&(a=[].slice.call(a));for(var c=0;c<a.length;c++)b.call(a,a[c],c)}}function r(a){var b;if(typeof a=="object")for(var c in a)a[c]&&(b={name:c,url:a[c]});else b={name:q(a),url:a};var d=h[b.name];if(d&&d.url===b.url)return d;h[b.name]=b;return b}function q(a){var b=a.split("/"),c=b[b.length-1],d=c.indexOf("?");return d!=-1?c.substring(0,d):c}function p(a){a._done||(a(),a._done=1)}var b=a.documentElement,c,d,e=[],f=[],g={},h={},i=a.createElement("script").async===!0||"MozAppearance"in a.documentElement.style||window.opera,j=window.head_conf&&head_conf.head||"head",k=window[j]=window[j]||function(){k.ready.apply(null,arguments)},l=1,m=2,n=3,o=4;i?k.js=function(){var a=arguments,b=a[a.length-1],c={};t(b)||(b=null),s(a,function(d,e){d!=b&&(d=r(d),c[d.name]=d,x(d,b&&e==a.length-2?function(){u(c)&&p(b)}:null))});return k}:k.js=function(){var a=arguments,b=[].slice.call(a,1),d=b[0];if(!c){f.push(function(){k.js.apply(null,a)});return k}d?(s(b,function(a){t(a)||w(r(a))}),x(r(a[0]),t(d)?d:function(){k.js.apply(null,b)})):x(r(a[0]));return k},k.ready=function(b,c){if(b==a){d?p(c):e.push(c);return k}t(b)&&(c=b,b="ALL");if(typeof b!="string"||!t(c))return k;var f=h[b];if(f&&f.state==o||b=="ALL"&&u()&&d){p(c);return k}var i=g[b];i?i.push(c):i=g[b]=[c];return k},k.ready(a,function(){u()&&s(g.ALL,function(a){p(a)}),k.feature&&k.feature("domloaded",!0)});if(window.addEventListener)a.addEventListener("DOMContentLoaded",z,!1),window.addEventListener("load",z,!1);else if(window.attachEvent){a.attachEvent("onreadystatechange",function(){a.readyState==="complete"&&z()});var A=1;try{A=window.frameElement}catch(B){}!A&&b.doScroll&&function(){try{b.doScroll("left"),z()}catch(a){setTimeout(arguments.callee,1);return}}(),window.attachEvent("onload",z)}!a.readyState&&a.addEventListener&&(a.readyState="loading",a.addEventListener("DOMContentLoaded",handler=function(){a.removeEventListener("DOMContentLoaded",handler,!1),a.readyState="complete"},!1)),setTimeout(function(){c=!0,s(f,function(a){a()})},300)})(document)

View File

@ -0,0 +1,2 @@
/* MIT | https://github.com/taylorhakes/promise-polyfill */
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n():"function"==typeof define&&define.amd?define(n):n()}(0,function(){"use strict";function e(e){var n=this.constructor;return this.then(function(t){return n.resolve(e()).then(function(){return t})},function(t){return n.resolve(e()).then(function(){return n.reject(t)})})}function n(){}function t(e){if(!(this instanceof t))throw new TypeError("Promises must be constructed via new");if("function"!=typeof e)throw new TypeError("not a function");this._state=0,this._handled=!1,this._value=undefined,this._deferreds=[],u(e,this)}function o(e,n){for(;3===e._state;)e=e._value;0!==e._state?(e._handled=!0,t._immediateFn(function(){var t=1===e._state?n.onFulfilled:n.onRejected;if(null!==t){var o;try{o=t(e._value)}catch(f){return void i(n.promise,f)}r(n.promise,o)}else(1===e._state?r:i)(n.promise,e._value)})):e._deferreds.push(n)}function r(e,n){try{if(n===e)throw new TypeError("A promise cannot be resolved with itself.");if(n&&("object"==typeof n||"function"==typeof n)){var o=n.then;if(n instanceof t)return e._state=3,e._value=n,void f(e);if("function"==typeof o)return void u(function(e,n){return function(){e.apply(n,arguments)}}(o,n),e)}e._state=1,e._value=n,f(e)}catch(r){i(e,r)}}function i(e,n){e._state=2,e._value=n,f(e)}function f(e){2===e._state&&0===e._deferreds.length&&t._immediateFn(function(){e._handled||t._unhandledRejectionFn(e._value)});for(var n=0,r=e._deferreds.length;r>n;n++)o(e,e._deferreds[n]);e._deferreds=null}function u(e,n){var t=!1;try{e(function(e){t||(t=!0,r(n,e))},function(e){t||(t=!0,i(n,e))})}catch(o){if(t)return;t=!0,i(n,o)}}var c=setTimeout;t.prototype["catch"]=function(e){return this.then(null,e)},t.prototype.then=function(e,t){var r=new this.constructor(n);return o(this,new function(e,n,t){this.onFulfilled="function"==typeof e?e:null,this.onRejected="function"==typeof n?n:null,this.promise=t}(e,t,r)),r},t.prototype["finally"]=e,t.all=function(e){return new t(function(n,t){function o(e,f){try{if(f&&("object"==typeof f||"function"==typeof f)){var u=f.then;if("function"==typeof u)return void u.call(f,function(n){o(e,n)},t)}r[e]=f,0==--i&&n(r)}catch(c){t(c)}}if(!e||"undefined"==typeof e.length)throw new TypeError("Promise.all accepts an array");var r=Array.prototype.slice.call(e);if(0===r.length)return n([]);for(var i=r.length,f=0;r.length>f;f++)o(f,r[f])})},t.resolve=function(e){return e&&"object"==typeof e&&e.constructor===t?e:new t(function(n){n(e)})},t.reject=function(e){return new t(function(n,t){t(e)})},t.race=function(e){return new t(function(n,t){for(var o=0,r=e.length;r>o;o++)e[o].then(n,t)})},t._immediateFn="function"==typeof setImmediate&&function(e){setImmediate(e)}||function(e){c(e,0)},t._unhandledRejectionFn=function(e){void 0!==console&&console&&console.warn("Possible Unhandled Promise Rejection:",e)};var l=function(){if("undefined"!=typeof self)return self;if("undefined"!=typeof window)return window;if("undefined"!=typeof global)return global;throw Error("unable to locate global object")}();"Promise"in l?l.Promise.prototype["finally"]||(l.Promise.prototype["finally"]=e):l.Promise=t});

5703
reveal.js/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -1,45 +1,44 @@
{ {
"name": "reveal.js", "name": "reveal.js",
"version": "3.2.0", "version": "3.9.2",
"description": "The HTML Presentation Framework", "description": "The HTML Presentation Framework",
"homepage": "https://lab.hakim.se/reveal-js", "homepage": "http://revealjs.com",
"subdomain": "revealjs", "subdomain": "revealjs",
"main": "js/reveal.js", "main": "js/reveal.js",
"scripts": { "scripts": {
"test": "grunt test", "test": "grunt test",
"start": "grunt serve" "start": "grunt serve",
"build": "grunt"
}, },
"author": { "author": {
"name": "Hakim El Hattab", "name": "Hakim El Hattab",
"email": "hakim.elhattab@gmail.com", "email": "hakim.elhattab@gmail.com",
"web": "https://hakim.se" "web": "http://hakim.se"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git://github.com/hakimel/reveal.js.git" "url": "git://github.com/hakimel/reveal.js.git"
}, },
"engines": { "engines": {
"node": "~4.1.1" "node": ">=9.0.0"
},
"dependencies": {
"express": "~4.13.3",
"grunt-cli": "^0.1.13",
"mustache": "~2.2.1",
"socket.io": "~1.3.7",
"underscore": "~1.8.3"
}, },
"devDependencies": { "devDependencies": {
"grunt-contrib-qunit": "~0.7.0", "express": "^4.16.2",
"grunt-contrib-jshint": "~0.11.3", "grunt": "^1.0.4",
"grunt-contrib-cssmin": "~0.14.0", "grunt-autoprefixer": "^3.0.4",
"grunt-contrib-uglify": "~0.9.2", "grunt-cli": "^1.3.2",
"grunt-contrib-watch": "~0.6.1", "grunt-contrib-connect": "^2.0.0",
"grunt-sass": "~1.1.0-beta", "grunt-contrib-cssmin": "^3.0.0",
"grunt-contrib-connect": "~0.11.2", "grunt-contrib-jshint": "^2.0.0",
"grunt-autoprefixer": "~3.0.3", "grunt-contrib-qunit": "^3.1.0",
"grunt-contrib-uglify": "^3.3.0",
"grunt-contrib-watch": "^1.1.0",
"grunt-sass": "^3.0.2",
"grunt-zip": "~0.17.1", "grunt-zip": "~0.17.1",
"grunt": "~0.4.5", "load-grunt-tasks": "^4.0.0",
"node-sass": "~4.14.1" "mustache": "^2.3.0",
"node-sass": "^4.13.1",
"socket.io": "^2.2.0"
}, },
"license": "MIT" "license": "MIT"
} }

File diff suppressed because one or more lines are too long

View File

@ -9,7 +9,7 @@
<link rel="stylesheet" href="../../css/reveal.css"> <link rel="stylesheet" href="../../css/reveal.css">
<link rel="stylesheet" href="../../css/theme/white.css" id="theme"> <link rel="stylesheet" href="../../css/theme/white.css" id="theme">
<link rel="stylesheet" href="../../lib/css/zenburn.css"> <link rel="stylesheet" href="../../lib/css/monokai.css">
</head> </head>
<body> <body>
@ -99,10 +99,16 @@
</script> </script>
</section> </section>
<!-- Images -->
<section data-markdown>
<script type="text/template">
![Sample image](https://s3.amazonaws.com/static.slid.es/logo/v2/slides-symbol-512x512.png)
</script>
</section>
</div> </div>
</div> </div>
<script src="../../lib/js/head.min.js"></script>
<script src="../../js/reveal.js"></script> <script src="../../js/reveal.js"></script>
<script> <script>
@ -115,7 +121,6 @@
// Optional libraries used to extend on reveal.js // Optional libraries used to extend on reveal.js
dependencies: [ dependencies: [
{ src: '../../lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: 'marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { src: 'markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: '../highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, { src: '../highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },

View File

@ -29,3 +29,8 @@ Content 3.1
## External 3.2 ## External 3.2
Content 3.2 Content 3.2
## External 3.3
![External Image](https://s3.amazonaws.com/static.slid.es/logo/v2/slides-symbol-512x512.png)

View File

@ -4,30 +4,19 @@
* of external markdown documents. * of external markdown documents.
*/ */
(function( root, factory ) { (function( root, factory ) {
if( typeof exports === 'object' ) { if (typeof define === 'function' && define.amd) {
root.marked = require( './marked' );
root.RevealMarkdown = factory( root.marked );
} else if( typeof exports === 'object' ) {
module.exports = factory( require( './marked' ) ); module.exports = factory( require( './marked' ) );
} } else {
else {
// Browser globals (root is window) // Browser globals (root is window)
root.RevealMarkdown = factory( root.marked ); root.RevealMarkdown = factory( root.marked );
root.RevealMarkdown.initialize();
} }
}( this, function( marked ) { }( this, function( marked ) {
if( typeof marked === 'undefined' ) {
throw 'The reveal.js Markdown plugin requires marked to be loaded';
}
if( typeof hljs !== 'undefined' ) {
marked.setOptions({
highlight: function( lang, code ) {
return hljs.highlightAuto( lang, code ).value;
}
});
}
var DEFAULT_SLIDE_SEPARATOR = '^\r?\n---\r?\n$', var DEFAULT_SLIDE_SEPARATOR = '^\r?\n---\r?\n$',
DEFAULT_NOTES_SEPARATOR = 'note:', DEFAULT_NOTES_SEPARATOR = 'notes?:',
DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$', DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$',
DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '\\\.slide:\\\s*?(\\\S.+?)$'; DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '\\\.slide:\\\s*?(\\\S.+?)$';
@ -40,7 +29,8 @@
*/ */
function getMarkdownFromSlide( section ) { function getMarkdownFromSlide( section ) {
var template = section.querySelector( 'script' ); // look for a <script> or <textarea data-template> wrapper
var template = section.querySelector( '[data-template]' ) || section.querySelector( 'script' );
// strip leading whitespace so it isn't evaluated as code // strip leading whitespace so it isn't evaluated as code
var text = ( template || section ).textContent; var text = ( template || section ).textContent;
@ -117,7 +107,7 @@
var notesMatch = content.split( new RegExp( options.notesSeparator, 'mgi' ) ); var notesMatch = content.split( new RegExp( options.notesSeparator, 'mgi' ) );
if( notesMatch.length === 2 ) { if( notesMatch.length === 2 ) {
content = notesMatch[0] + '<aside class="notes" data-markdown>' + notesMatch[1].trim() + '</aside>'; content = notesMatch[0] + '<aside class="notes">' + marked(notesMatch[1].trim()) + '</aside>';
} }
// prevent script end tags in the content from interfering // prevent script end tags in the content from interfering
@ -207,58 +197,36 @@
*/ */
function processSlides() { function processSlides() {
var sections = document.querySelectorAll( '[data-markdown]'), return new Promise( function( resolve ) {
section;
for( var i = 0, len = sections.length; i < len; i++ ) { var externalPromises = [];
section = sections[i]; [].slice.call( document.querySelectorAll( '[data-markdown]') ).forEach( function( section, i ) {
if( section.getAttribute( 'data-markdown' ).length ) { if( section.getAttribute( 'data-markdown' ).length ) {
var xhr = new XMLHttpRequest(), externalPromises.push( loadExternalMarkdown( section ).then(
url = section.getAttribute( 'data-markdown' );
datacharset = section.getAttribute( 'data-charset' );
// see https://developer.mozilla.org/en-US/docs/Web/API/element.getAttribute#Notes
if( datacharset != null && datacharset != '' ) {
xhr.overrideMimeType( 'text/html; charset=' + datacharset );
}
xhr.onreadystatechange = function() {
if( xhr.readyState === 4 ) {
// file protocol yields status code 0 (useful for local debug, mobile applications etc.)
if ( ( xhr.status >= 200 && xhr.status < 300 ) || xhr.status === 0 ) {
// Finished loading external file
function( xhr, url ) {
section.outerHTML = slidify( xhr.responseText, { section.outerHTML = slidify( xhr.responseText, {
separator: section.getAttribute( 'data-separator' ), separator: section.getAttribute( 'data-separator' ),
verticalSeparator: section.getAttribute( 'data-separator-vertical' ), verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
notesSeparator: section.getAttribute( 'data-separator-notes' ), notesSeparator: section.getAttribute( 'data-separator-notes' ),
attributes: getForwardedAttributes( section ) attributes: getForwardedAttributes( section )
}); });
},
} // Failed to load markdown
else { function( xhr, url ) {
section.outerHTML = '<section data-state="alert">' + section.outerHTML = '<section data-state="alert">' +
'ERROR: The attempt to fetch ' + url + ' failed with HTTP status ' + xhr.status + '.' + 'ERROR: The attempt to fetch ' + url + ' failed with HTTP status ' + xhr.status + '.' +
'Check your browser\'s JavaScript console for more details.' + 'Check your browser\'s JavaScript console for more details.' +
'<p>Remember that you need to serve the presentation HTML from a HTTP server.</p>' + '<p>Remember that you need to serve the presentation HTML from a HTTP server.</p>' +
'</section>'; '</section>';
}
} ) );
}
};
xhr.open( 'GET', url, false );
try {
xhr.send();
}
catch ( e ) {
alert( 'Failed to get the Markdown file ' + url + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + e );
}
} }
else if( section.getAttribute( 'data-separator' ) || section.getAttribute( 'data-separator-vertical' ) || section.getAttribute( 'data-separator-notes' ) ) { else if( section.getAttribute( 'data-separator' ) || section.getAttribute( 'data-separator-vertical' ) || section.getAttribute( 'data-separator-notes' ) ) {
@ -274,18 +242,67 @@
else { else {
section.innerHTML = createMarkdownSlide( getMarkdownFromSlide( section ) ); section.innerHTML = createMarkdownSlide( getMarkdownFromSlide( section ) );
} }
});
Promise.all( externalPromises ).then( resolve );
} );
} }
function loadExternalMarkdown( section ) {
return new Promise( function( resolve, reject ) {
var xhr = new XMLHttpRequest(),
url = section.getAttribute( 'data-markdown' );
datacharset = section.getAttribute( 'data-charset' );
// see https://developer.mozilla.org/en-US/docs/Web/API/element.getAttribute#Notes
if( datacharset != null && datacharset != '' ) {
xhr.overrideMimeType( 'text/html; charset=' + datacharset );
}
xhr.onreadystatechange = function( section, xhr ) {
if( xhr.readyState === 4 ) {
// file protocol yields status code 0 (useful for local debug, mobile applications etc.)
if ( ( xhr.status >= 200 && xhr.status < 300 ) || xhr.status === 0 ) {
resolve( xhr, url );
}
else {
reject( xhr, url );
}
}
}.bind( this, section, xhr );
xhr.open( 'GET', url, true );
try {
xhr.send();
}
catch ( e ) {
alert( 'Failed to get the Markdown file ' + url + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + e );
resolve( xhr, url );
}
} );
} }
/** /**
* Check if a node value has the attributes pattern. * Check if a node value has the attributes pattern.
* If yes, extract it and add that value as one or several attributes * If yes, extract it and add that value as one or several attributes
* the the terget element. * to the target element.
* *
* You need Cache Killer on Chrome to see the effect on any FOM transformation * You need Cache Killer on Chrome to see the effect on any FOM transformation
* directly on refresh (F5) * directly on refresh (F5)
* https://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development/7000899#answer-11786277 * http://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development/7000899#answer-11786277
*/ */
function addAttributeInElement( node, elementTarget, separator ) { function addAttributeInElement( node, elementTarget, separator ) {
@ -350,14 +367,9 @@
*/ */
function convertSlides() { function convertSlides() {
var sections = document.querySelectorAll( '[data-markdown]'); var sections = document.querySelectorAll( '[data-markdown]:not([data-markdown-parsed])');
for( var i = 0, len = sections.length; i < len; i++ ) { [].slice.call( sections ).forEach( function( section ) {
var section = sections[i];
// Only parse the same slide once
if( !section.getAttribute( 'data-markdown-parsed' ) ) {
section.setAttribute( 'data-markdown-parsed', true ) section.setAttribute( 'data-markdown-parsed', true )
@ -378,18 +390,44 @@
section.appendChild( notes ); section.appendChild( notes );
} }
} } );
} return Promise.resolve();
} }
// API // API
return { var RevealMarkdown = {
/**
* Starts processing and converting Markdown within the
* current reveal.js deck.
*
* @param {function} callback function to invoke once
* we've finished loading and parsing Markdown
*/
init: function( callback ) {
if( typeof marked === 'undefined' ) {
throw 'The reveal.js Markdown plugin requires marked to be loaded';
}
if( typeof hljs !== 'undefined' ) {
marked.setOptions({
highlight: function( code, lang ) {
return hljs.highlightAuto( code, [lang] ).value;
}
});
}
// marked can be configured via reveal.js config options
var options = Reveal.getConfig().markdown;
if( options ) {
marked.setOptions( options );
}
return processSlides().then( convertSlides );
initialize: function() {
processSlides();
convertSlides();
}, },
// TODO: Do these belong in the API? // TODO: Do these belong in the API?
@ -399,4 +437,10 @@
}; };
// Register our plugin so that reveal.js will call our
// plugin 'init' method as part of the initialization
Reveal.registerPlugin( 'markdown', RevealMarkdown );
return RevealMarkdown;
})); }));

File diff suppressed because one or more lines are too long

View File

@ -7,33 +7,28 @@
var RevealMath = window.RevealMath || (function(){ var RevealMath = window.RevealMath || (function(){
var options = Reveal.getConfig().math || {}; var options = Reveal.getConfig().math || {};
options.mathjax = options.mathjax || 'https://cdn.mathjax.org/mathjax/latest/MathJax.js'; var mathjax = options.mathjax || 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js';
options.config = options.config || 'TeX-AMS_HTML-full'; var config = options.config || 'TeX-AMS_HTML-full';
var url = mathjax + '?config=' + config;
loadScript( options.mathjax + '?config=' + options.config, function() { var defaultOptions = {
MathJax.Hub.Config({
messageStyle: 'none', messageStyle: 'none',
tex2jax: { tex2jax: {
inlineMath: [['$','$'],['\\(','\\)']] , inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ],
skipTags: ['script','noscript','style','textarea','pre'] skipTags: [ 'script', 'noscript', 'style', 'textarea', 'pre' ]
}, },
skipStartupTypeset: true skipStartupTypeset: true
}); };
// Typeset followed by an immediate reveal.js layout since function defaults( options, defaultOptions ) {
// the typesetting process could affect slide height
MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub ] );
MathJax.Hub.Queue( Reveal.layout );
// Reprocess equations in slides when they turn visible for ( var i in defaultOptions ) {
Reveal.addEventListener( 'slidechanged', function( event ) { if ( !options.hasOwnProperty( i ) ) {
options[i] = defaultOptions[i];
}
}
MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, event.currentSlide ] ); }
} );
} );
function loadScript( url, callback ) { function loadScript( url, callback ) {
@ -64,4 +59,34 @@ var RevealMath = window.RevealMath || (function(){
} }
return {
init: function() {
defaults( options, defaultOptions );
defaults( options.tex2jax, defaultOptions.tex2jax );
options.mathjax = options.config = null;
loadScript( url, function() {
MathJax.Hub.Config( options );
// Typeset followed by an immediate reveal.js layout since
// the typesetting process could affect slide height
MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub ] );
MathJax.Hub.Queue( Reveal.layout );
// Reprocess equations in slides when they turn visible
Reveal.addEventListener( 'slidechanged', function( event ) {
MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub, event.currentSlide ] );
} );
} );
}
}
})(); })();
Reveal.registerPlugin( 'math', RevealMath );

View File

@ -31,7 +31,15 @@ io.on( 'connection', function( socket ) {
app.get("/", function(req, res) { app.get("/", function(req, res) {
res.writeHead(200, {'Content-Type': 'text/html'}); res.writeHead(200, {'Content-Type': 'text/html'});
fs.createReadStream(opts.baseDir + '/index.html').pipe(res);
var stream = fs.createReadStream(opts.baseDir + '/index.html');
stream.on('error', function( error ) {
res.write('<style>body{font-family: sans-serif;}</style><h2>reveal.js multiplex server.</h2><a href="/token">Generate token</a>');
res.end();
});
stream.on('readable', function() {
stream.pipe(res);
});
}); });
app.get("/token", function(req,res) { app.get("/token", function(req,res) {

View File

@ -19,6 +19,9 @@
}; };
// post once the page is loaded, so the client follows also on "open URL".
window.addEventListener( 'load', post );
// Monitor events that trigger a change in state // Monitor events that trigger a change in state
Reveal.addEventListener( 'slidechanged', post ); Reveal.addEventListener( 'slidechanged', post );
Reveal.addEventListener( 'fragmentshown', post ); Reveal.addEventListener( 'fragmentshown', post );

View File

@ -0,0 +1,19 @@
{
"name": "reveal-js-multiplex",
"version": "1.0.0",
"description": "reveal.js multiplex server",
"homepage": "http://revealjs.com",
"scripts": {
"start": "node index.js"
},
"engines": {
"node": "~4.1.1"
},
"dependencies": {
"express": "~4.13.3",
"grunt-cli": "~0.1.13",
"mustache": "~2.2.1",
"socket.io": "~1.3.7"
},
"license": "MIT"
}

View File

@ -2,7 +2,6 @@ var http = require('http');
var express = require('express'); var express = require('express');
var fs = require('fs'); var fs = require('fs');
var io = require('socket.io'); var io = require('socket.io');
var _ = require('underscore');
var Mustache = require('mustache'); var Mustache = require('mustache');
var app = express(); var app = express();
@ -23,10 +22,12 @@ io.on( 'connection', function( socket ) {
}); });
socket.on( 'statechanged', function( data ) { socket.on( 'statechanged', function( data ) {
delete data.state.overview;
socket.broadcast.emit( 'statechanged', data ); socket.broadcast.emit( 'statechanged', data );
}); });
socket.on( 'statechanged-speaker', function( data ) { socket.on( 'statechanged-speaker', function( data ) {
delete data.state.overview;
socket.broadcast.emit( 'statechanged-speaker', data ); socket.broadcast.emit( 'statechanged-speaker', data );
}); });
@ -60,9 +61,9 @@ var brown = '\033[33m',
green = '\033[32m', green = '\033[32m',
reset = '\033[0m'; reset = '\033[0m';
var slidesLocation = 'https://localhost' + ( opts.port ? ( ':' + opts.port ) : '' ); var slidesLocation = 'http://localhost' + ( opts.port ? ( ':' + opts.port ) : '' );
console.log( brown + 'reveal.js - Speaker Notes' + reset ); console.log( brown + 'reveal.js - Speaker Notes' + reset );
console.log( '1. Open the slides at ' + green + slidesLocation + reset ); console.log( '1. Open the slides at ' + green + slidesLocation + reset );
console.log( '2. Click on the link your JS console to go to the notes page' ); console.log( '2. Click on the link in your JS console to go to the notes page' );
console.log( '3. Advance through your slides and your notes will advance automatically' ); console.log( '3. Advance through your slides and your notes will advance automatically' );

View File

@ -8,6 +8,7 @@
<style> <style>
body { body {
font-family: Helvetica; font-family: Helvetica;
font-size: 18px;
} }
#current-slide, #current-slide,
@ -30,15 +31,26 @@
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 10px; left: 10px;
font-weight: bold;
font-size: 14px;
z-index: 2; z-index: 2;
color: rgba( 255, 255, 255, 0.9 ); }
.overlay-element {
height: 34px;
line-height: 34px;
padding: 0 10px;
text-shadow: none;
background: rgba( 220, 220, 220, 0.8 );
color: #222;
font-size: 14px;
}
.overlay-element.interactive:hover {
background: rgba( 220, 220, 220, 1 );
} }
#current-slide { #current-slide {
position: absolute; position: absolute;
width: 65%; width: 60%;
height: 100%; height: 100%;
top: 0; top: 0;
left: 0; left: 0;
@ -47,19 +59,20 @@
#upcoming-slide { #upcoming-slide {
position: absolute; position: absolute;
width: 35%; width: 40%;
height: 40%; height: 40%;
right: 0; right: 0;
top: 0; top: 0;
} }
/* Speaker controls */
#speaker-controls { #speaker-controls {
position: absolute; position: absolute;
top: 40%; top: 40%;
right: 0; right: 0;
width: 35%; width: 40%;
height: 60%; height: 60%;
overflow: auto;
font-size: 18px; font-size: 18px;
} }
@ -124,26 +137,108 @@
font-size: 1.2em; font-size: 1.2em;
} }
/* Layout selector */
#speaker-layout {
position: absolute;
top: 10px;
right: 10px;
color: #222;
z-index: 10;
}
#speaker-layout select {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 0;
box-shadow: 0;
cursor: pointer;
opacity: 0;
font-size: 1em;
background-color: transparent;
-moz-appearance: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#speaker-layout select:focus {
outline: none;
box-shadow: none;
}
.clear { .clear {
clear: both; clear: both;
} }
@media screen and (max-width: 1080px) { /* Speaker layout: Wide */
#speaker-controls { body[data-speaker-layout="wide"] #current-slide,
font-size: 16px; body[data-speaker-layout="wide"] #upcoming-slide {
} width: 50%;
height: 45%;
padding: 6px;
} }
@media screen and (max-width: 900px) { body[data-speaker-layout="wide"] #current-slide {
#speaker-controls { top: 0;
font-size: 14px; left: 0;
}
} }
@media screen and (max-width: 800px) { body[data-speaker-layout="wide"] #upcoming-slide {
#speaker-controls { top: 0;
font-size: 12px; left: 50%;
} }
body[data-speaker-layout="wide"] #speaker-controls {
top: 45%;
left: 0;
width: 100%;
height: 50%;
font-size: 1.25em;
}
/* Speaker layout: Tall */
body[data-speaker-layout="tall"] #current-slide,
body[data-speaker-layout="tall"] #upcoming-slide {
width: 45%;
height: 50%;
padding: 6px;
}
body[data-speaker-layout="tall"] #current-slide {
top: 0;
left: 0;
}
body[data-speaker-layout="tall"] #upcoming-slide {
top: 50%;
left: 0;
}
body[data-speaker-layout="tall"] #speaker-controls {
padding-top: 40px;
top: 0;
left: 45%;
width: 55%;
height: 100%;
font-size: 1.25em;
}
/* Speaker layout: Notes only */
body[data-speaker-layout="notes-only"] #current-slide,
body[data-speaker-layout="notes-only"] #upcoming-slide {
display: none;
}
body[data-speaker-layout="notes-only"] #speaker-controls {
padding-top: 40px;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 1.25em;
} }
</style> </style>
@ -152,7 +247,7 @@
<body> <body>
<div id="current-slide"></div> <div id="current-slide"></div>
<div id="upcoming-slide"><span class="label">UPCOMING:</span></div> <div id="upcoming-slide"><span class="overlay-element label">Upcoming</span></div>
<div id="speaker-controls"> <div id="speaker-controls">
<div class="speaker-controls-time"> <div class="speaker-controls-time">
<h4 class="label">Time <span class="reset-button">Click to Reset</span></h4> <h4 class="label">Time <span class="reset-button">Click to Reset</span></h4>
@ -170,6 +265,10 @@
<div class="value"></div> <div class="value"></div>
</div> </div>
</div> </div>
<div id="speaker-layout" class="overlay-element interactive">
<span class="speaker-layout-label"></span>
<select class="speaker-layout-dropdown"></select>
</div>
<script src="/socket.io/socket.io.js"></script> <script src="/socket.io/socket.io.js"></script>
<script src="/plugin/markdown/marked.js"></script> <script src="/plugin/markdown/marked.js"></script>
@ -182,11 +281,20 @@
currentState, currentState,
currentSlide, currentSlide,
upcomingSlide, upcomingSlide,
layoutLabel,
layoutDropdown,
connected = false; connected = false;
var socket = io.connect( window.location.origin ), var socket = io.connect( window.location.origin ),
socketId = '{{socketId}}'; socketId = '{{socketId}}';
var SPEAKER_LAYOUTS = {
'default': 'Default',
'wide': 'Wide',
'tall': 'Tall',
'notes-only': 'Notes only'
};
socket.on( 'statechanged', function( data ) { socket.on( 'statechanged', function( data ) {
// ignore data from sockets that aren't ours // ignore data from sockets that aren't ours
@ -205,6 +313,8 @@
} ); } );
setupLayout();
// Load our presentation iframes // Load our presentation iframes
setupIframes(); setupIframes();
@ -362,6 +472,74 @@
} }
/**
* Sets up the speaker view layout and layout selector.
*/
function setupLayout() {
layoutDropdown = document.querySelector( '.speaker-layout-dropdown' );
layoutLabel = document.querySelector( '.speaker-layout-label' );
// Render the list of available layouts
for( var id in SPEAKER_LAYOUTS ) {
var option = document.createElement( 'option' );
option.setAttribute( 'value', id );
option.textContent = SPEAKER_LAYOUTS[ id ];
layoutDropdown.appendChild( option );
}
// Monitor the dropdown for changes
layoutDropdown.addEventListener( 'change', function( event ) {
setLayout( layoutDropdown.value );
}, false );
// Restore any currently persisted layout
setLayout( getLayout() );
}
/**
* Sets a new speaker view layout. The layout is persisted
* in local storage.
*/
function setLayout( value ) {
var title = SPEAKER_LAYOUTS[ value ];
layoutLabel.innerHTML = 'Layout' + ( title ? ( ': ' + title ) : '' );
layoutDropdown.value = value;
document.body.setAttribute( 'data-speaker-layout', value );
// Persist locally
if( window.localStorage ) {
window.localStorage.setItem( 'reveal-speaker-layout', value );
}
}
/**
* Returns the ID of the most recently set speaker layout
* or our default layout if none has been set.
*/
function getLayout() {
if( window.localStorage ) {
var layout = window.localStorage.getItem( 'reveal-speaker-layout' );
if( layout ) {
return layout;
}
}
// Default to the first record in the layouts hash
for( var id in SPEAKER_LAYOUTS ) {
return id;
}
}
function zeroPadInteger( num ) { function zeroPadInteger( num ) {
var str = '00' + parseInt( num ); var str = '00' + parseInt( num );

View File

@ -8,6 +8,7 @@
<style> <style>
body { body {
font-family: Helvetica; font-family: Helvetica;
font-size: 18px;
} }
#current-slide, #current-slide,
@ -30,15 +31,42 @@
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 10px; left: 10px;
font-weight: bold;
font-size: 14px;
z-index: 2; z-index: 2;
color: rgba( 255, 255, 255, 0.9 ); }
#connection-status {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 20;
padding: 30% 20% 20% 20%;
font-size: 18px;
color: #222;
background: #fff;
text-align: center;
box-sizing: border-box;
line-height: 1.4;
}
.overlay-element {
height: 34px;
line-height: 34px;
padding: 0 10px;
text-shadow: none;
background: rgba( 220, 220, 220, 0.8 );
color: #222;
font-size: 14px;
}
.overlay-element.interactive:hover {
background: rgba( 220, 220, 220, 1 );
} }
#current-slide { #current-slide {
position: absolute; position: absolute;
width: 65%; width: 60%;
height: 100%; height: 100%;
top: 0; top: 0;
left: 0; left: 0;
@ -47,20 +75,20 @@
#upcoming-slide { #upcoming-slide {
position: absolute; position: absolute;
width: 35%; width: 40%;
height: 40%; height: 40%;
right: 0; right: 0;
top: 0; top: 0;
} }
/* Speaker controls */
#speaker-controls { #speaker-controls {
position: absolute; position: absolute;
top: 40%; top: 40%;
right: 0; right: 0;
width: 35%; width: 40%;
height: 60%; height: 60%;
overflow: auto; overflow: auto;
font-size: 18px; font-size: 18px;
} }
@ -70,6 +98,7 @@
} }
.speaker-controls-time .label, .speaker-controls-time .label,
.speaker-controls-pace .label,
.speaker-controls-notes .label { .speaker-controls-notes .label {
text-transform: uppercase; text-transform: uppercase;
font-weight: normal; font-weight: normal;
@ -78,7 +107,7 @@
margin: 0; margin: 0;
} }
.speaker-controls-time { .speaker-controls-time, .speaker-controls-pace {
border-bottom: 1px solid rgba( 200, 200, 200, 0.5 ); border-bottom: 1px solid rgba( 200, 200, 200, 0.5 );
margin-bottom: 10px; margin-bottom: 10px;
padding: 10px 16px; padding: 10px 16px;
@ -99,6 +128,13 @@
.speaker-controls-time .timer, .speaker-controls-time .timer,
.speaker-controls-time .clock { .speaker-controls-time .clock {
width: 50%; width: 50%;
}
.speaker-controls-time .timer,
.speaker-controls-time .clock,
.speaker-controls-time .pacing .hours-value,
.speaker-controls-time .pacing .minutes-value,
.speaker-controls-time .pacing .seconds-value {
font-size: 1.9em; font-size: 1.9em;
} }
@ -112,7 +148,23 @@
} }
.speaker-controls-time span.mute { .speaker-controls-time span.mute {
color: #bbb; opacity: 0.3;
}
.speaker-controls-time .pacing-title {
margin-top: 5px;
}
.speaker-controls-time .pacing.ahead {
color: blue;
}
.speaker-controls-time .pacing.on-track {
color: green;
}
.speaker-controls-time .pacing.behind {
color: red;
} }
.speaker-controls-notes { .speaker-controls-notes {
@ -125,24 +177,124 @@
font-size: 1.2em; font-size: 1.2em;
} }
/* Layout selector */
#speaker-layout {
position: absolute;
top: 10px;
right: 10px;
color: #222;
z-index: 10;
}
#speaker-layout select {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 0;
box-shadow: 0;
cursor: pointer;
opacity: 0;
font-size: 1em;
background-color: transparent;
-moz-appearance: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#speaker-layout select:focus {
outline: none;
box-shadow: none;
}
.clear { .clear {
clear: both; clear: both;
} }
/* Speaker layout: Wide */
body[data-speaker-layout="wide"] #current-slide,
body[data-speaker-layout="wide"] #upcoming-slide {
width: 50%;
height: 45%;
padding: 6px;
}
body[data-speaker-layout="wide"] #current-slide {
top: 0;
left: 0;
}
body[data-speaker-layout="wide"] #upcoming-slide {
top: 0;
left: 50%;
}
body[data-speaker-layout="wide"] #speaker-controls {
top: 45%;
left: 0;
width: 100%;
height: 50%;
font-size: 1.25em;
}
/* Speaker layout: Tall */
body[data-speaker-layout="tall"] #current-slide,
body[data-speaker-layout="tall"] #upcoming-slide {
width: 45%;
height: 50%;
padding: 6px;
}
body[data-speaker-layout="tall"] #current-slide {
top: 0;
left: 0;
}
body[data-speaker-layout="tall"] #upcoming-slide {
top: 50%;
left: 0;
}
body[data-speaker-layout="tall"] #speaker-controls {
padding-top: 40px;
top: 0;
left: 45%;
width: 55%;
height: 100%;
font-size: 1.25em;
}
/* Speaker layout: Notes only */
body[data-speaker-layout="notes-only"] #current-slide,
body[data-speaker-layout="notes-only"] #upcoming-slide {
display: none;
}
body[data-speaker-layout="notes-only"] #speaker-controls {
padding-top: 40px;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 1.25em;
}
@media screen and (max-width: 1080px) { @media screen and (max-width: 1080px) {
#speaker-controls { body[data-speaker-layout="default"] #speaker-controls {
font-size: 16px; font-size: 16px;
} }
} }
@media screen and (max-width: 900px) { @media screen and (max-width: 900px) {
#speaker-controls { body[data-speaker-layout="default"] #speaker-controls {
font-size: 14px; font-size: 14px;
} }
} }
@media screen and (max-width: 800px) { @media screen and (max-width: 800px) {
#speaker-controls { body[data-speaker-layout="default"] #speaker-controls {
font-size: 12px; font-size: 12px;
} }
} }
@ -152,8 +304,10 @@
<body> <body>
<div id="connection-status">Loading speaker view...</div>
<div id="current-slide"></div> <div id="current-slide"></div>
<div id="upcoming-slide"><span class="label">UPCOMING:</span></div> <div id="upcoming-slide"><span class="overlay-element label">Upcoming</span></div>
<div id="speaker-controls"> <div id="speaker-controls">
<div class="speaker-controls-time"> <div class="speaker-controls-time">
<h4 class="label">Time <span class="reset-button">Click to Reset</span></h4> <h4 class="label">Time <span class="reset-button">Click to Reset</span></h4>
@ -164,6 +318,11 @@
<span class="hours-value">00</span><span class="minutes-value">:00</span><span class="seconds-value">:00</span> <span class="hours-value">00</span><span class="minutes-value">:00</span><span class="seconds-value">:00</span>
</div> </div>
<div class="clear"></div> <div class="clear"></div>
<h4 class="label pacing-title" style="display: none">Pacing Time to finish current slide</h4>
<div class="pacing" style="display: none">
<span class="hours-value">00</span><span class="minutes-value">:00</span><span class="seconds-value">:00</span>
</div>
</div> </div>
<div class="speaker-controls-notes hidden"> <div class="speaker-controls-notes hidden">
@ -171,6 +330,10 @@
<div class="value"></div> <div class="value"></div>
</div> </div>
</div> </div>
<div id="speaker-layout" class="overlay-element interactive">
<span class="speaker-layout-label"></span>
<select class="speaker-layout-dropdown"></select>
</div>
<script src="../../plugin/markdown/marked.js"></script> <script src="../../plugin/markdown/marked.js"></script>
<script> <script>
@ -182,12 +345,37 @@
currentState, currentState,
currentSlide, currentSlide,
upcomingSlide, upcomingSlide,
layoutLabel,
layoutDropdown,
pendingCalls = {},
lastRevealApiCallId = 0,
connected = false; connected = false;
var SPEAKER_LAYOUTS = {
'default': 'Default',
'wide': 'Wide',
'tall': 'Tall',
'notes-only': 'Notes only'
};
setupLayout();
var connectionStatus = document.querySelector( '#connection-status' );
var connectionTimeout = setTimeout( function() {
connectionStatus.innerHTML = 'Error connecting to main window.<br>Please try closing and reopening the speaker view.';
}, 5000 );
window.addEventListener( 'message', function( event ) { window.addEventListener( 'message', function( event ) {
clearTimeout( connectionTimeout );
connectionStatus.style.display = 'none';
var data = JSON.parse( event.data ); var data = JSON.parse( event.data );
// The overview mode is only useful to the reveal.js instance
// where navigation occurs so we don't sync it
if( data.state ) delete data.state.overview;
// Messages sent by the notes plugin inside of the main window // Messages sent by the notes plugin inside of the main window
if( data && data.namespace === 'reveal-notes' ) { if( data && data.namespace === 'reveal-notes' ) {
if( data.type === 'connect' ) { if( data.type === 'connect' ) {
@ -196,6 +384,10 @@
else if( data.type === 'state' ) { else if( data.type === 'state' ) {
handleStateMessage( data ); handleStateMessage( data );
} }
else if( data.type === 'return' ) {
pendingCalls[data.callId](data.result);
delete pendingCalls[data.callId];
}
} }
// Messages sent by the reveal.js inside of the current slide preview // Messages sent by the reveal.js inside of the current slide preview
else if( data && data.namespace === 'reveal' ) { else if( data && data.namespace === 'reveal' ) {
@ -203,13 +395,32 @@
// Send a message back to notify that the handshake is complete // Send a message back to notify that the handshake is complete
window.opener.postMessage( JSON.stringify({ namespace: 'reveal-notes', type: 'connected'} ), '*' ); window.opener.postMessage( JSON.stringify({ namespace: 'reveal-notes', type: 'connected'} ), '*' );
} }
else if( /slidechanged|fragmentshown|fragmenthidden|overviewshown|overviewhidden|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) { else if( /slidechanged|fragmentshown|fragmenthidden|paused|resumed/.test( data.eventName ) && currentState !== JSON.stringify( data.state ) ) {
window.opener.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ]} ), '*' ); window.opener.postMessage( JSON.stringify({ method: 'setState', args: [ data.state ]} ), '*' );
} }
} }
} ); } );
/**
* Asynchronously calls the Reveal.js API of the main frame.
*/
function callRevealApi( methodName, methodArguments, callback ) {
var callId = ++lastRevealApiCallId;
pendingCalls[callId] = callback;
window.opener.postMessage( JSON.stringify( {
namespace: 'reveal-notes',
type: 'call',
callId: callId,
methodName: methodName,
arguments: methodArguments
} ), '*' );
}
/** /**
* Called when the main window is trying to establish a * Called when the main window is trying to establish a
* connection. * connection.
@ -265,10 +476,17 @@
* Forward keyboard events to the current slide window. * Forward keyboard events to the current slide window.
* This enables keyboard events to work even if focus * This enables keyboard events to work even if focus
* isn't set on the current slide iframe. * isn't set on the current slide iframe.
*
* Block F5 default handling, it reloads and disconnects
* the speaker notes window.
*/ */
function setupKeyboard() { function setupKeyboard() {
document.addEventListener( 'keydown', function( event ) { document.addEventListener( 'keydown', function( event ) {
if( event.keyCode === 116 || ( event.metaKey && event.keyCode === 82 ) ) {
event.preventDefault();
return false;
}
currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'triggerKey', args: [ event.keyCode ] }), '*' ); currentSlide.contentWindow.postMessage( JSON.stringify({ method: 'triggerKey', args: [ event.keyCode ] }), '*' );
} ); } );
@ -288,9 +506,10 @@
'backgroundTransition=none' 'backgroundTransition=none'
].join( '&' ); ].join( '&' );
var urlSeparator = /\?/.test(data.url) ? '&' : '?';
var hash = '#/' + data.state.indexh + '/' + data.state.indexv; var hash = '#/' + data.state.indexh + '/' + data.state.indexv;
var currentURL = data.url + '?' + params + '&postMessageEvents=true' + hash; var currentURL = data.url + urlSeparator + params + '&postMessageEvents=true' + hash;
var upcomingURL = data.url + '?' + params + '&controls=false' + hash; var upcomingURL = data.url + urlSeparator + params + '&controls=false' + hash;
currentSlide = document.createElement( 'iframe' ); currentSlide = document.createElement( 'iframe' );
currentSlide.setAttribute( 'width', 1280 ); currentSlide.setAttribute( 'width', 1280 );
@ -316,6 +535,73 @@
} }
function getTimings( callback ) {
callRevealApi( 'getSlidesAttributes', [], function ( slideAttributes ) {
callRevealApi( 'getConfig', [], function ( config ) {
var totalTime = config.totalTime;
var minTimePerSlide = config.minimumTimePerSlide || 0;
var defaultTiming = config.defaultTiming;
if ((defaultTiming == null) && (totalTime == null)) {
callback(null);
return;
}
// Setting totalTime overrides defaultTiming
if (totalTime) {
defaultTiming = 0;
}
var timings = [];
for ( var i in slideAttributes ) {
var slide = slideAttributes[ i ];
var timing = defaultTiming;
if( slide.hasOwnProperty( 'data-timing' )) {
var t = slide[ 'data-timing' ];
timing = parseInt(t);
if( isNaN(timing) ) {
console.warn("Could not parse timing '" + t + "' of slide " + i + "; using default of " + defaultTiming);
timing = defaultTiming;
}
}
timings.push(timing);
}
if ( totalTime ) {
// After we've allocated time to individual slides, we summarize it and
// subtract it from the total time
var remainingTime = totalTime - timings.reduce( function(a, b) { return a + b; }, 0 );
// The remaining time is divided by the number of slides that have 0 seconds
// allocated at the moment, giving the average time-per-slide on the remaining slides
var remainingSlides = (timings.filter( function(x) { return x == 0 }) ).length
var timePerSlide = Math.round( remainingTime / remainingSlides, 0 )
// And now we replace every zero-value timing with that average
timings = timings.map( function(x) { return (x==0 ? timePerSlide : x) } );
}
var slidesUnderMinimum = timings.filter( function(x) { return (x < minTimePerSlide) } ).length
if ( slidesUnderMinimum ) {
message = "The pacing time for " + slidesUnderMinimum + " slide(s) is under the configured minimum of " + minTimePerSlide + " seconds. Check the data-timing attribute on individual slides, or consider increasing the totalTime or minimumTimePerSlide configuration options (or removing some slides).";
alert(message);
}
callback( timings );
} );
} );
}
/**
* Return the number of seconds allocated for presenting
* all slides up to and including this one.
*/
function getTimeAllocated( timings, callback ) {
callRevealApi( 'getSlidePastCount', [], function ( currentSlide ) {
var allocated = 0;
for (var i in timings.slice(0, currentSlide + 1)) {
allocated += timings[i];
}
callback( allocated );
} );
}
/** /**
* Create the timer and clock and start updating them * Create the timer and clock and start updating them
* at an interval. * at an interval.
@ -327,25 +613,20 @@
clockEl = timeEl.querySelector( '.clock-value' ), clockEl = timeEl.querySelector( '.clock-value' ),
hoursEl = timeEl.querySelector( '.hours-value' ), hoursEl = timeEl.querySelector( '.hours-value' ),
minutesEl = timeEl.querySelector( '.minutes-value' ), minutesEl = timeEl.querySelector( '.minutes-value' ),
secondsEl = timeEl.querySelector( '.seconds-value' ); secondsEl = timeEl.querySelector( '.seconds-value' ),
pacingTitleEl = timeEl.querySelector( '.pacing-title' ),
pacingEl = timeEl.querySelector( '.pacing' ),
pacingHoursEl = pacingEl.querySelector( '.hours-value' ),
pacingMinutesEl = pacingEl.querySelector( '.minutes-value' ),
pacingSecondsEl = pacingEl.querySelector( '.seconds-value' );
function _updateTimer() { var timings = null;
getTimings( function ( _timings ) {
var diff, hours, minutes, seconds,
now = new Date();
diff = now.getTime() - start.getTime();
hours = Math.floor( diff / ( 1000 * 60 * 60 ) );
minutes = Math.floor( ( diff / ( 1000 * 60 ) ) % 60 );
seconds = Math.floor( ( diff / 1000 ) % 60 );
clockEl.innerHTML = now.toLocaleTimeString( 'en-US', { hour12: true, hour: '2-digit', minute:'2-digit' } );
hoursEl.innerHTML = zeroPadInteger( hours );
hoursEl.className = hours > 0 ? '' : 'mute';
minutesEl.innerHTML = ':' + zeroPadInteger( minutes );
minutesEl.className = minutes > 0 ? '' : 'mute';
secondsEl.innerHTML = ':' + zeroPadInteger( seconds );
timings = _timings;
if (_timings !== null) {
pacingTitleEl.style.removeProperty('display');
pacingEl.style.removeProperty('display');
} }
// Update once directly // Update once directly
@ -354,12 +635,178 @@
// Then update every second // Then update every second
setInterval( _updateTimer, 1000 ); setInterval( _updateTimer, 1000 );
timeEl.addEventListener( 'click', function() { } );
function _resetTimer() {
if (timings == null) {
start = new Date(); start = new Date();
_updateTimer(); _updateTimer();
}
else {
// Reset timer to beginning of current slide
getTimeAllocated( timings, function ( slideEndTimingSeconds ) {
var slideEndTiming = slideEndTimingSeconds * 1000;
callRevealApi( 'getSlidePastCount', [], function ( currentSlide ) {
var currentSlideTiming = timings[currentSlide] * 1000;
var previousSlidesTiming = slideEndTiming - currentSlideTiming;
var now = new Date();
start = new Date(now.getTime() - previousSlidesTiming);
_updateTimer();
} );
} );
}
}
timeEl.addEventListener( 'click', function() {
_resetTimer();
return false; return false;
} ); } );
function _displayTime( hrEl, minEl, secEl, time) {
var sign = Math.sign(time) == -1 ? "-" : "";
time = Math.abs(Math.round(time / 1000));
var seconds = time % 60;
var minutes = Math.floor( time / 60 ) % 60 ;
var hours = Math.floor( time / ( 60 * 60 )) ;
hrEl.innerHTML = sign + zeroPadInteger( hours );
if (hours == 0) {
hrEl.classList.add( 'mute' );
}
else {
hrEl.classList.remove( 'mute' );
}
minEl.innerHTML = ':' + zeroPadInteger( minutes );
if (hours == 0 && minutes == 0) {
minEl.classList.add( 'mute' );
}
else {
minEl.classList.remove( 'mute' );
}
secEl.innerHTML = ':' + zeroPadInteger( seconds );
}
function _updateTimer() {
var diff, hours, minutes, seconds,
now = new Date();
diff = now.getTime() - start.getTime();
clockEl.innerHTML = now.toLocaleTimeString( 'en-US', { hour12: true, hour: '2-digit', minute:'2-digit' } );
_displayTime( hoursEl, minutesEl, secondsEl, diff );
if (timings !== null) {
_updatePacing(diff);
}
}
function _updatePacing(diff) {
getTimeAllocated( timings, function ( slideEndTimingSeconds ) {
var slideEndTiming = slideEndTimingSeconds * 1000;
callRevealApi( 'getSlidePastCount', [], function ( currentSlide ) {
var currentSlideTiming = timings[currentSlide] * 1000;
var timeLeftCurrentSlide = slideEndTiming - diff;
if (timeLeftCurrentSlide < 0) {
pacingEl.className = 'pacing behind';
}
else if (timeLeftCurrentSlide < currentSlideTiming) {
pacingEl.className = 'pacing on-track';
}
else {
pacingEl.className = 'pacing ahead';
}
_displayTime( pacingHoursEl, pacingMinutesEl, pacingSecondsEl, timeLeftCurrentSlide );
} );
} );
}
}
/**
* Sets up the speaker view layout and layout selector.
*/
function setupLayout() {
layoutDropdown = document.querySelector( '.speaker-layout-dropdown' );
layoutLabel = document.querySelector( '.speaker-layout-label' );
// Render the list of available layouts
for( var id in SPEAKER_LAYOUTS ) {
var option = document.createElement( 'option' );
option.setAttribute( 'value', id );
option.textContent = SPEAKER_LAYOUTS[ id ];
layoutDropdown.appendChild( option );
}
// Monitor the dropdown for changes
layoutDropdown.addEventListener( 'change', function( event ) {
setLayout( layoutDropdown.value );
}, false );
// Restore any currently persisted layout
setLayout( getLayout() );
}
/**
* Sets a new speaker view layout. The layout is persisted
* in local storage.
*/
function setLayout( value ) {
var title = SPEAKER_LAYOUTS[ value ];
layoutLabel.innerHTML = 'Layout' + ( title ? ( ': ' + title ) : '' );
layoutDropdown.value = value;
document.body.setAttribute( 'data-speaker-layout', value );
// Persist locally
if( supportsLocalStorage() ) {
window.localStorage.setItem( 'reveal-speaker-layout', value );
}
}
/**
* Returns the ID of the most recently set speaker layout
* or our default layout if none has been set.
*/
function getLayout() {
if( supportsLocalStorage() ) {
var layout = window.localStorage.getItem( 'reveal-speaker-layout' );
if( layout ) {
return layout;
}
}
// Default to the first record in the layouts hash
for( var id in SPEAKER_LAYOUTS ) {
return id;
}
}
function supportsLocalStorage() {
try {
localStorage.setItem('test', 'test');
localStorage.removeItem('test');
return true;
}
catch( e ) {
return false;
}
} }
function zeroPadInteger( num ) { function zeroPadInteger( num ) {

View File

@ -11,10 +11,27 @@
*/ */
var RevealNotes = (function() { var RevealNotes = (function() {
function openNotes() { var notesPopup = null;
function openNotes( notesFilePath ) {
if (notesPopup && !notesPopup.closed) {
notesPopup.focus();
return;
}
if( !notesFilePath ) {
var jsFileLocation = document.querySelector('script[src$="notes.js"]').src; // this js file path var jsFileLocation = document.querySelector('script[src$="notes.js"]').src; // this js file path
jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, ''); // the js folder path jsFileLocation = jsFileLocation.replace(/notes\.js(\?.*)?$/, ''); // the js folder path
var notesPopup = window.open( jsFileLocation + 'notes.html', 'reveal.js - Notes', 'width=1100,height=700' ); notesFilePath = jsFileLocation + 'notes.html';
}
notesPopup = window.open( notesFilePath, 'reveal.js - Notes', 'width=1100,height=700' );
if( !notesPopup ) {
alert( 'Speaker view popup failed to open. Please make sure popups are allowed and reopen the speaker view.' );
return;
}
/** /**
* Connect to the notes window through a postmessage handshake. * Connect to the notes window through a postmessage handshake.
@ -39,16 +56,36 @@ var RevealNotes = (function() {
clearInterval( connectInterval ); clearInterval( connectInterval );
onConnected(); onConnected();
} }
if( data && data.namespace === 'reveal-notes' && data.type === 'call' ) {
callRevealApi( data.methodName, data.arguments, data.callId );
}
} ); } );
} }
/**
* Calls the specified Reveal.js method with the provided argument
* and then pushes the result to the notes frame.
*/
function callRevealApi( methodName, methodArguments, callId ) {
var result = Reveal[methodName].apply( Reveal, methodArguments );
notesPopup.postMessage( JSON.stringify( {
namespace: 'reveal-notes',
type: 'return',
result: result,
callId: callId
} ), '*' );
}
/** /**
* Posts the current slide data to the notes window * Posts the current slide data to the notes window
*/ */
function post() { function post( event ) {
var slideElement = Reveal.getCurrentSlide(), var slideElement = Reveal.getCurrentSlide(),
notesElement = slideElement.querySelector( 'aside.notes' ); notesElement = slideElement.querySelector( 'aside.notes' ),
fragmentElement = slideElement.querySelector( '.current-fragment' );
var messageData = { var messageData = {
namespace: 'reveal-notes', namespace: 'reveal-notes',
@ -65,6 +102,21 @@ var RevealNotes = (function() {
messageData.whitespace = 'pre-wrap'; messageData.whitespace = 'pre-wrap';
} }
// Look for notes defined in a fragment
if( fragmentElement ) {
var fragmentNotes = fragmentElement.querySelector( 'aside.notes' );
if( fragmentNotes ) {
notesElement = fragmentNotes;
}
else if( fragmentElement.hasAttribute( 'data-notes' ) ) {
messageData.notes = fragmentElement.getAttribute( 'data-notes' );
messageData.whitespace = 'pre-wrap';
// In case there are slide notes
notesElement = null;
}
}
// Look for notes defined in an aside element // Look for notes defined in an aside element
if( notesElement ) { if( notesElement ) {
messageData.notes = notesElement.innerHTML; messageData.notes = notesElement.innerHTML;
@ -96,8 +148,12 @@ var RevealNotes = (function() {
} }
connect(); connect();
} }
return {
init: function() {
if( !/receiver/i.test( window.location.search ) ) { if( !/receiver/i.test( window.location.search ) ) {
// If the there's a 'notes' query set, open directly // If the there's a 'notes' query set, open directly
@ -106,22 +162,17 @@ var RevealNotes = (function() {
} }
// Open the notes when the 's' key is hit // Open the notes when the 's' key is hit
document.addEventListener( 'keydown', function( event ) { Reveal.addKeyBinding({keyCode: 83, key: 'S', description: 'Speaker notes view'}, function() {
// 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;
// Disregard the event if keyboard is disabled
if ( Reveal.getConfig().keyboard === false ) return;
if( event.keyCode === 83 ) {
event.preventDefault();
openNotes(); openNotes();
} } );
}, false );
} }
return { open: openNotes }; },
open: openNotes
};
})(); })();
Reveal.registerPlugin( 'notes', RevealNotes );

View File

@ -2,32 +2,18 @@
* phantomjs script for printing presentations to PDF. * phantomjs script for printing presentations to PDF.
* *
* Example: * Example:
* phantomjs print-pdf.js "https://lab.hakim.se/reveal-js?print-pdf" reveal-demo.pdf * phantomjs print-pdf.js "http://revealjs.com?print-pdf" reveal-demo.pdf
* *
* By Manuel Bieh (https://github.com/manuelbieh) * @author Manuel Bieh (https://github.com/manuelbieh)
* @author Hakim El Hattab (https://github.com/hakimel)
* @author Manuel Riezebosch (https://github.com/riezebosch)
*/ */
// html2pdf.js // html2pdf.js
var page = new WebPage();
var system = require( 'system' ); var system = require( 'system' );
var slideWidth = system.args[3] ? system.args[3].split( 'x' )[0] : 960; var probePage = new WebPage();
var slideHeight = system.args[3] ? system.args[3].split( 'x' )[1] : 700; var printPage = new WebPage();
page.viewportSize = {
width: slideWidth,
height: slideHeight
};
// TODO
// Something is wrong with these config values. An input
// paper width of 1920px actually results in a 756px wide
// PDF.
page.paperSize = {
width: Math.round( slideWidth * 2 ),
height: Math.round( slideHeight * 2 ),
border: 0
};
var inputFile = system.args[1] || 'index.html?print-pdf'; var inputFile = system.args[1] || 'index.html?print-pdf';
var outputFile = system.args[2] || 'slides.pdf'; var outputFile = system.args[2] || 'slides.pdf';
@ -36,13 +22,46 @@ if( outputFile.match( /\.pdf$/gi ) === null ) {
outputFile += '.pdf'; outputFile += '.pdf';
} }
console.log( 'Printing PDF (Paper size: '+ page.paperSize.width + 'x' + page.paperSize.height +')' ); console.log( 'Export PDF: Reading reveal.js config [1/4]' );
page.open( inputFile, function( status ) { probePage.open( inputFile, function( status ) {
window.setTimeout( function() {
console.log( 'Printed successfully' ); console.log( 'Export PDF: Preparing print layout [2/4]' );
page.render( outputFile );
var config = probePage.evaluate( function() {
return Reveal.getConfig();
} );
if( config ) {
printPage.paperSize = {
width: Math.floor( config.width * ( 1 + config.margin ) ),
height: Math.floor( config.height * ( 1 + config.margin ) ),
border: 0
};
printPage.open( inputFile, function( status ) {
console.log( 'Export PDF: Preparing pdf [3/4]')
printPage.evaluate( function() {
Reveal.isReady() ? window.callPhantom() : Reveal.addEventListener( 'pdf-ready', window.callPhantom );
} );
} );
printPage.onCallback = function( data ) {
// For some reason we need to "jump the queue" for syntax highlighting to work.
// See: http://stackoverflow.com/a/3580132/129269
setTimeout( function() {
console.log( 'Export PDF: Writing file [4/4]' );
printPage.render( outputFile );
console.log( 'Export PDF: Finished successfully!' );
phantom.exit(); phantom.exit();
}, 1000 ); }, 0 );
} ); };
}
else {
console.log( 'Export PDF: Unable to read reveal.js config. Make sure the input address points to a reveal.js page.' );
phantom.exit( 1 );
}
} );

View File

@ -21,7 +21,7 @@ function Hilitor(id, tag)
var targetNode = document.getElementById(id) || document.body; var targetNode = document.getElementById(id) || document.body;
var hiliteTag = tag || "EM"; var hiliteTag = tag || "EM";
var skipTags = new RegExp("^(?:" + hiliteTag + "|SCRIPT|FORM|SPAN)$"); var skipTags = new RegExp("^(?:" + hiliteTag + "|SCRIPT|FORM)$");
var colors = ["#ff6", "#a0ffff", "#9f9", "#f99", "#f6f"]; var colors = ["#ff6", "#a0ffff", "#9f9", "#f99", "#f6f"];
var wordColor = []; var wordColor = [];
var colorIdx = 0; var colorIdx = 0;
@ -53,8 +53,8 @@ function Hilitor(id, tag)
if(node.nodeType == 3) { // NODE_TEXT if(node.nodeType == 3) { // NODE_TEXT
if((nv = node.nodeValue) && (regs = matchRegex.exec(nv))) { if((nv = node.nodeValue) && (regs = matchRegex.exec(nv))) {
//find the slide's section element and save it in our list of matching slides //find the slide's section element and save it in our list of matching slides
var secnode = node.parentNode; var secnode = node;
while (secnode.nodeName != 'SECTION') { while (secnode != null && secnode.nodeName != 'SECTION') {
secnode = secnode.parentNode; secnode = secnode.parentNode;
} }
@ -110,20 +110,26 @@ function Hilitor(id, tag)
function openSearch() { function openSearch() {
//ensure the search term input dialog is visible and has focus: //ensure the search term input dialog is visible and has focus:
var inputboxdiv = document.getElementById("searchinputdiv");
var inputbox = document.getElementById("searchinput"); var inputbox = document.getElementById("searchinput");
inputbox.style.display = "inline"; inputboxdiv.style.display = "inline";
inputbox.focus(); inputbox.focus();
inputbox.select(); inputbox.select();
} }
function closeSearch() {
var inputboxdiv = document.getElementById("searchinputdiv");
inputboxdiv.style.display = "none";
if(myHilitor) myHilitor.remove();
}
function toggleSearch() { function toggleSearch() {
var inputbox = document.getElementById("searchinput"); var inputboxdiv = document.getElementById("searchinputdiv");
if (inputbox.style.display !== "inline") { if (inputboxdiv.style.display !== "inline") {
openSearch(); openSearch();
} }
else { else {
inputbox.style.display = "none"; closeSearch();
myHilitor.remove();
} }
} }
@ -132,12 +138,19 @@ function Hilitor(id, tag)
if (searchboxDirty) { if (searchboxDirty) {
var searchstring = document.getElementById("searchinput").value; var searchstring = document.getElementById("searchinput").value;
if (searchstring === '') {
if(myHilitor) myHilitor.remove();
matchedSlides = null;
}
else {
//find the keyword amongst the slides //find the keyword amongst the slides
myHilitor = new Hilitor("slidecontent"); myHilitor = new Hilitor("slidecontent");
matchedSlides = myHilitor.apply(searchstring); matchedSlides = myHilitor.apply(searchstring);
currentMatchedIndex = 0; currentMatchedIndex = 0;
} }
}
if (matchedSlides) {
//navigate to the next slide that has the keyword, wrapping to the first if necessary //navigate to the next slide that has the keyword, wrapping to the first if necessary
if (matchedSlides.length && (matchedSlides.length <= currentMatchedIndex)) { if (matchedSlides.length && (matchedSlides.length <= currentMatchedIndex)) {
currentMatchedIndex = 0; currentMatchedIndex = 0;
@ -147,6 +160,7 @@ function Hilitor(id, tag)
currentMatchedIndex++; currentMatchedIndex++;
} }
} }
}
var dom = {}; var dom = {};
dom.wrapper = document.querySelector( '.reveal' ); dom.wrapper = document.querySelector( '.reveal' );
@ -157,17 +171,18 @@ function Hilitor(id, tag)
searchElement.classList.add( 'searchdiv' ); searchElement.classList.add( 'searchdiv' );
searchElement.style.position = 'absolute'; searchElement.style.position = 'absolute';
searchElement.style.top = '10px'; searchElement.style.top = '10px';
searchElement.style.left = '10px'; searchElement.style.right = '10px';
//embedded base64 search icon Designed by Sketchdock - https://www.sketchdock.com/: searchElement.style.zIndex = 10;
//embedded base64 search icon Designed by Sketchdock - http://www.sketchdock.com/:
searchElement.innerHTML = '<span><input type="search" id="searchinput" class="searchinput" style="vertical-align: top;"/><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJiSURBVHjatFZNaxNBGH5md+Mmu92NVdKDRipSAyqCghgQD4L4cRe86UUtAQ+eFCxoa4/25EXBFi8eBE+eRPoDhB6KgiiixdAPCEkx2pjvTXadd9yNsflwuyUDD/O+u8PzzDPvzOwyx3EwyCZhwG3gAkp7MnpjgbopjsltcD4gjuXZZKeAR348MYLYTm3LzOs/y3j3JTfZxgXWXmTuwPHIc4VmoOmv5IrI53+AO2DdHLjkDWQ3GoEEVFXtXQOvkSnPWcyUceviLhwbDYv8/XIVj97kse7TodLvZXxYxrPUHkQ1ufXs3FEdybEIxucySOesoNvUgWU1cP3MkCBfTFdw9fGaAMVmRELq7LBw2Q3/FaAxxWIRpw+ZIr/7IouPqzUBiqmdHAv7EuhRAwf1er2Vy4x1jW3b2d5Jfvu5IPp7l2LYbcgCFFNb+FoJ7oBqEAqFMPNqFcmEgVMJDfMT+1tvN0pNjERlMS6QA5pFOKxiKVPFhakPeL3It+WGJUDxt2wFR+JhzI7v5ctkd8DXOZAkCYYxhO+lKm4+Xfqz/rIixBuNBl7eOYzkQQNzqX249mRl6zUgEcYkaJrGhUwBinVdh6IouPzwE6/DL5w4oLkH8y981aDf+uq6hlKpJESiUdNfDZi7/ehG9K6KfiA3pml0PLcsq+cSMTj2NL9ukc4UOmz7AZ3+crkC4mHujFvXNaMFB3bEr8xPS6p5O+jXxq4VZtaen7/PwzrntjcLUE0iHPS1Ud1cdiEJl/8WivZk0wXd7zWOMkeF8s0CcAmkNrC2nvXZDbbbN73ccYnZoH9bfgswAFzAe9/h3dbKAAAAAElFTkSuQmCC" id="searchbutton" class="searchicon" style="vertical-align: top; margin-top: -1px;"/></span>'; searchElement.innerHTML = '<span><input type="search" id="searchinput" class="searchinput" style="vertical-align: top;"/><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAJiSURBVHjatFZNaxNBGH5md+Mmu92NVdKDRipSAyqCghgQD4L4cRe86UUtAQ+eFCxoa4/25EXBFi8eBE+eRPoDhB6KgiiixdAPCEkx2pjvTXadd9yNsflwuyUDD/O+u8PzzDPvzOwyx3EwyCZhwG3gAkp7MnpjgbopjsltcD4gjuXZZKeAR348MYLYTm3LzOs/y3j3JTfZxgXWXmTuwPHIc4VmoOmv5IrI53+AO2DdHLjkDWQ3GoEEVFXtXQOvkSnPWcyUceviLhwbDYv8/XIVj97kse7TodLvZXxYxrPUHkQ1ufXs3FEdybEIxucySOesoNvUgWU1cP3MkCBfTFdw9fGaAMVmRELq7LBw2Q3/FaAxxWIRpw+ZIr/7IouPqzUBiqmdHAv7EuhRAwf1er2Vy4x1jW3b2d5Jfvu5IPp7l2LYbcgCFFNb+FoJ7oBqEAqFMPNqFcmEgVMJDfMT+1tvN0pNjERlMS6QA5pFOKxiKVPFhakPeL3It+WGJUDxt2wFR+JhzI7v5ctkd8DXOZAkCYYxhO+lKm4+Xfqz/rIixBuNBl7eOYzkQQNzqX249mRl6zUgEcYkaJrGhUwBinVdh6IouPzwE6/DL5w4oLkH8y981aDf+uq6hlKpJESiUdNfDZi7/ehG9K6KfiA3pml0PLcsq+cSMTj2NL9ukc4UOmz7AZ3+crkC4mHujFvXNaMFB3bEr8xPS6p5O+jXxq4VZtaen7/PwzrntjcLUE0iHPS1Ud1cdiEJl/8WivZk0wXd7zWOMkeF8s0CcAmkNrC2nvXZDbbbN73ccYnZoH9bfgswAFzAe9/h3dbKAAAAAElFTkSuQmCC" id="searchbutton" class="searchicon" style="vertical-align: top; margin-top: -1px;"/></span>';
dom.wrapper.appendChild( searchElement ); dom.wrapper.appendChild( searchElement );
} }
document.getElementById("searchbutton").addEventListener( 'click', function(event) { document.getElementById( 'searchbutton' ).addEventListener( 'click', function(event) {
doSearch(); doSearch();
}, false ); }, false );
document.getElementById("searchinput").addEventListener( 'keyup', function( event ) { document.getElementById( 'searchinput' ).addEventListener( 'keyup', function( event ) {
switch (event.keyCode) { switch (event.keyCode) {
case 13: case 13:
event.preventDefault(); event.preventDefault();
@ -179,18 +194,13 @@ function Hilitor(id, tag)
} }
}, false ); }, false );
// Open the search when the 's' key is hit (yes, this conflicts with the notes plugin, disabling for now)
/*
document.addEventListener( 'keydown', function( event ) { document.addEventListener( 'keydown', function( event ) {
// Disregard the event if the target is editable or a if( event.key == "F" && (event.ctrlKey || event.metaKey) ) { //Control+Shift+f
// modifier is present
if ( document.querySelector( ':focus' ) !== null || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey ) return;
if( event.keyCode === 83 ) {
event.preventDefault(); event.preventDefault();
openSearch(); toggleSearch();
} }
}, false ); }, false );
*/ if( window.Reveal ) Reveal.registerKeyboardShortcut( 'CTRL + Shift + F', 'Search' );
closeSearch();
return { open: openSearch }; return { open: openSearch };
})(); })();

View File

@ -1,38 +1,40 @@
// Custom reveal.js integration // Custom reveal.js integration
(function(){ var RevealZoom = (function(){
var isEnabled = true;
document.querySelector( '.reveal .slides' ).addEventListener( 'mousedown', function( event ) { return {
var modifier = ( Reveal.getConfig().zoomKey ? Reveal.getConfig().zoomKey : 'alt' ) + 'Key'; init: function() {
var zoomPadding = 20; Reveal.getRevealElement().addEventListener( 'mousedown', function( event ) {
var revealScale = Reveal.getScale(); var defaultModifier = /Linux/.test( window.navigator.platform ) ? 'ctrl' : 'alt';
if( event[ modifier ] && isEnabled ) { var modifier = ( Reveal.getConfig().zoomKey ? Reveal.getConfig().zoomKey : defaultModifier ) + 'Key';
var zoomLevel = ( Reveal.getConfig().zoomLevel ? Reveal.getConfig().zoomLevel : 2 );
if( event[ modifier ] && !Reveal.isOverview() ) {
event.preventDefault(); event.preventDefault();
var bounds = event.target.getBoundingClientRect();
zoom.to({ zoom.to({
x: ( bounds.left * revealScale ) - zoomPadding, x: event.clientX,
y: ( bounds.top * revealScale ) - zoomPadding, y: event.clientY,
width: ( bounds.width * revealScale ) + ( zoomPadding * 2 ), scale: zoomLevel,
height: ( bounds.height * revealScale ) + ( zoomPadding * 2 ),
pan: false pan: false
}); });
} }
} ); } );
Reveal.addEventListener( 'overviewshown', function() { isEnabled = false; } ); }
Reveal.addEventListener( 'overviewhidden', function() { isEnabled = true; } ); }
})(); })();
Reveal.registerPlugin( 'zoom', RevealZoom );
/*! /*!
* zoom.js 0.3 (modified for use with reveal.js) * zoom.js 0.3 (modified for use with reveal.js)
* https://lab.hakim.se/zoom-js * http://lab.hakim.se/zoom-js
* MIT licensed * MIT licensed
* *
* Copyright (C) 2011-2014 Hakim El Hattab, https://hakim.se * Copyright (C) 2011-2014 Hakim El Hattab, http://hakim.se
*/ */
var zoom = (function(){ var zoom = (function(){
@ -273,6 +275,3 @@ var zoom = (function(){
} }
})(); })();

View File

@ -0,0 +1 @@
window.externalScriptSequence += 'A';

View File

@ -0,0 +1 @@
window.externalScriptSequence += 'B';

View File

@ -0,0 +1 @@
window.externalScriptSequence += 'C';

View File

@ -0,0 +1 @@
window.externalScriptSequence += 'D';

View File

@ -0,0 +1,2 @@
Source: https://freesound.org/people/fennelliott/sounds/379419/
License: CC0 (public domain)

Binary file not shown.

View File

@ -23,18 +23,22 @@
</section> </section>
<section> <section>
<iframe data-autoplay width="420" height="345" src="https://www.youtube.com/embed/l3RQZ4mcr1c"></iframe> <iframe data-autoplay width="420" height="345" src="http://www.youtube.com/embed/l3RQZ4mcr1c"></iframe>
</section> </section>
<section> <section>
<h2>Empty Slide</h2> <h2>Empty Slide</h2>
</section> </section>
<section>
<h2>Auto-playing audio</h2>
<audio src="assets/beeping.wav" data-autoplay></audio>
</section>
</div> </div>
</div> </div>
<script src="../../lib/js/head.min.js"></script>
<script src="../../js/reveal.js"></script> <script src="../../js/reveal.js"></script>
<script> <script>

View File

@ -82,6 +82,14 @@
\] \]
</section> </section>
<section>
<h3>TeX Macros</h3>
Here is a common vector space:
\[L^2(\R) = \set{u : \R \to \R}{\int_\R |u|^2 &lt; +\infty}\]
used in functional analysis.
</section>
<section> <section>
<section> <section>
<h3>The Lorenz Equations</h3> <h3>The Lorenz Equations</h3>
@ -153,13 +161,20 @@
\] \]
</div> </div>
</section> </section>
<section>
<h3>TeX Macros</h3>
Here is a common vector space:
\[L^2(\R) = \set{u : \R \to \R}{\int_\R |u|^2 &lt; +\infty}\]
used in functional analysis.
</section>
</section> </section>
</div> </div>
</div> </div>
<script src="../../lib/js/head.min.js"></script>
<script src="../../js/reveal.js"></script> <script src="../../js/reveal.js"></script>
<script> <script>
@ -169,12 +184,17 @@
transition: 'linear', transition: 'linear',
math: { math: {
// mathjax: 'https://cdn.mathjax.org/mathjax/latest/MathJax.js', // mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js',
config: 'TeX-AMS_HTML-full' config: 'TeX-AMS_HTML-full',
TeX: {
Macros: {
R: '\\mathbb{R}',
set: [ '\\left\\{#1 \\; ; \\; #2\\right\\}', 2 ]
}
}
}, },
dependencies: [ dependencies: [
{ src: '../../lib/js/classList.js' },
{ src: '../../plugin/math/math.js', async: true } { src: '../../plugin/math/math.js', async: true }
] ]
}); });

View File

@ -93,7 +93,7 @@
<h2>Video background</h2> <h2>Video background</h2>
</section> </section>
<section data-background-iframe="https://slides.com"> <section data-background-iframe="https://slides.com/news/make-better-presentations/embed?style=hidden&autoSlide=4000">
<h2>Iframe background</h2> <h2>Iframe background</h2>
</section> </section>
@ -122,7 +122,6 @@
</div> </div>
<script src="../../lib/js/head.min.js"></script>
<script src="../../js/reveal.js"></script> <script src="../../js/reveal.js"></script>
<script> <script>

View File

@ -81,7 +81,6 @@
</div> </div>
<script src="../../lib/js/head.min.js"></script>
<script src="../../js/reveal.js"></script> <script src="../../js/reveal.js"></script>
<script> <script>

View File

@ -1,244 +0,0 @@
/**
* QUnit v1.12.0 - A JavaScript Unit Testing Framework
*
* https://qunitjs.com
*
* Copyright 2012 jQuery Foundation and other contributors
* Released under the MIT license.
* https://jquery.org/license
*/
/** Font Family and Sizes */
#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
}
#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
#qunit-tests { font-size: smaller; }
/** Resets */
#qunit-tests, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
margin: 0;
padding: 0;
}
/** Header */
#qunit-header {
padding: 0.5em 0 0.5em 1em;
color: #8699a4;
background-color: #0d3349;
font-size: 1.5em;
line-height: 1em;
font-weight: normal;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-top-right-radius: 5px;
-webkit-border-top-left-radius: 5px;
}
#qunit-header a {
text-decoration: none;
color: #c2ccd1;
}
#qunit-header a:hover,
#qunit-header a:focus {
color: #fff;
}
#qunit-testrunner-toolbar label {
display: inline-block;
padding: 0 .5em 0 .1em;
}
#qunit-banner {
height: 5px;
}
#qunit-testrunner-toolbar {
padding: 0.5em 0 0.5em 2em;
color: #5E740B;
background-color: #eee;
overflow: hidden;
}
#qunit-userAgent {
padding: 0.5em 0 0.5em 2.5em;
background-color: #2b81af;
color: #fff;
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
}
#qunit-modulefilter-container {
float: right;
}
/** Tests: Pass/Fail */
#qunit-tests {
list-style-position: inside;
}
#qunit-tests li {
padding: 0.4em 0.5em 0.4em 2.5em;
border-bottom: 1px solid #fff;
list-style-position: inside;
}
#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running {
display: none;
}
#qunit-tests li strong {
cursor: pointer;
}
#qunit-tests li a {
padding: 0.5em;
color: #c2ccd1;
text-decoration: none;
}
#qunit-tests li a:hover,
#qunit-tests li a:focus {
color: #000;
}
#qunit-tests li .runtime {
float: right;
font-size: smaller;
}
.qunit-assert-list {
margin-top: 0.5em;
padding: 0.5em;
background-color: #fff;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.qunit-collapsed {
display: none;
}
#qunit-tests table {
border-collapse: collapse;
margin-top: .2em;
}
#qunit-tests th {
text-align: right;
vertical-align: top;
padding: 0 .5em 0 0;
}
#qunit-tests td {
vertical-align: top;
}
#qunit-tests pre {
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
}
#qunit-tests del {
background-color: #e0f2be;
color: #374e0c;
text-decoration: none;
}
#qunit-tests ins {
background-color: #ffcaca;
color: #500;
text-decoration: none;
}
/*** Test Counts */
#qunit-tests b.counts { color: black; }
#qunit-tests b.passed { color: #5E740B; }
#qunit-tests b.failed { color: #710909; }
#qunit-tests li li {
padding: 5px;
background-color: #fff;
border-bottom: none;
list-style-position: inside;
}
/*** Passing Styles */
#qunit-tests li li.pass {
color: #3c510c;
background-color: #fff;
border-left: 10px solid #C6E746;
}
#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
#qunit-tests .pass .test-name { color: #366097; }
#qunit-tests .pass .test-actual,
#qunit-tests .pass .test-expected { color: #999999; }
#qunit-banner.qunit-pass { background-color: #C6E746; }
/*** Failing Styles */
#qunit-tests li li.fail {
color: #710909;
background-color: #fff;
border-left: 10px solid #EE5757;
white-space: pre;
}
#qunit-tests > li:last-child {
border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
}
#qunit-tests .fail { color: #000000; background-color: #EE5757; }
#qunit-tests .fail .test-name,
#qunit-tests .fail .module-name { color: #000000; }
#qunit-tests .fail .test-actual { color: #EE5757; }
#qunit-tests .fail .test-expected { color: green; }
#qunit-banner.qunit-fail { background-color: #EE5757; }
/** Result */
#qunit-testresult {
padding: 0.5em 0.5em 0.5em 2.5em;
color: #2b81af;
background-color: #D2E0E6;
border-bottom: 1px solid white;
}
#qunit-testresult .module-name {
font-weight: bold;
}
/** Fixture */
#qunit-fixture {
position: absolute;
top: -10000px;
left: -10000px;
width: 1000px;
height: 1000px;
}

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,436 @@
/*!
* QUnit 2.5.0
* https://qunitjs.com/
*
* Copyright jQuery Foundation and other contributors
* Released under the MIT license
* https://jquery.org/license
*
* Date: 2018-01-10T02:56Z
*/
/** Font Family and Sizes */
#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult {
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
}
#qunit-testrunner-toolbar, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
#qunit-tests { font-size: smaller; }
/** Resets */
#qunit-tests, #qunit-header, #qunit-banner, #qunit-filteredTest, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
margin: 0;
padding: 0;
}
/** Header (excluding toolbar) */
#qunit-header {
padding: 0.5em 0 0.5em 1em;
color: #8699A4;
background-color: #0D3349;
font-size: 1.5em;
line-height: 1em;
font-weight: 400;
border-radius: 5px 5px 0 0;
}
#qunit-header a {
text-decoration: none;
color: #C2CCD1;
}
#qunit-header a:hover,
#qunit-header a:focus {
color: #FFF;
}
#qunit-banner {
height: 5px;
}
#qunit-filteredTest {
padding: 0.5em 1em 0.5em 1em;
color: #366097;
background-color: #F4FF77;
}
#qunit-userAgent {
padding: 0.5em 1em 0.5em 1em;
color: #FFF;
background-color: #2B81AF;
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
}
/** Toolbar */
#qunit-testrunner-toolbar {
padding: 0.5em 1em 0.5em 1em;
color: #5E740B;
background-color: #EEE;
}
#qunit-testrunner-toolbar .clearfix {
height: 0;
clear: both;
}
#qunit-testrunner-toolbar label {
display: inline-block;
}
#qunit-testrunner-toolbar input[type=checkbox],
#qunit-testrunner-toolbar input[type=radio] {
margin: 3px;
vertical-align: -2px;
}
#qunit-testrunner-toolbar input[type=text] {
box-sizing: border-box;
height: 1.6em;
}
.qunit-url-config,
.qunit-filter,
#qunit-modulefilter {
display: inline-block;
line-height: 2.1em;
}
.qunit-filter,
#qunit-modulefilter {
float: right;
position: relative;
margin-left: 1em;
}
.qunit-url-config label {
margin-right: 0.5em;
}
#qunit-modulefilter-search {
box-sizing: border-box;
width: 400px;
}
#qunit-modulefilter-search-container:after {
position: absolute;
right: 0.3em;
content: "\25bc";
color: black;
}
#qunit-modulefilter-dropdown {
/* align with #qunit-modulefilter-search */
box-sizing: border-box;
width: 400px;
position: absolute;
right: 0;
top: 50%;
margin-top: 0.8em;
border: 1px solid #D3D3D3;
border-top: none;
border-radius: 0 0 .25em .25em;
color: #000;
background-color: #F5F5F5;
z-index: 99;
}
#qunit-modulefilter-dropdown a {
color: inherit;
text-decoration: none;
}
#qunit-modulefilter-dropdown .clickable.checked {
font-weight: bold;
color: #000;
background-color: #D2E0E6;
}
#qunit-modulefilter-dropdown .clickable:hover {
color: #FFF;
background-color: #0D3349;
}
#qunit-modulefilter-actions {
display: block;
overflow: auto;
/* align with #qunit-modulefilter-dropdown-list */
font: smaller/1.5em sans-serif;
}
#qunit-modulefilter-dropdown #qunit-modulefilter-actions > * {
box-sizing: border-box;
max-height: 2.8em;
display: block;
padding: 0.4em;
}
#qunit-modulefilter-dropdown #qunit-modulefilter-actions > button {
float: right;
font: inherit;
}
#qunit-modulefilter-dropdown #qunit-modulefilter-actions > :last-child {
/* insert padding to align with checkbox margins */
padding-left: 3px;
}
#qunit-modulefilter-dropdown-list {
max-height: 200px;
overflow-y: auto;
margin: 0;
border-top: 2px groove threedhighlight;
padding: 0.4em 0 0;
font: smaller/1.5em sans-serif;
}
#qunit-modulefilter-dropdown-list li {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#qunit-modulefilter-dropdown-list .clickable {
display: block;
padding-left: 0.15em;
}
/** Tests: Pass/Fail */
#qunit-tests {
list-style-position: inside;
}
#qunit-tests li {
padding: 0.4em 1em 0.4em 1em;
border-bottom: 1px solid #FFF;
list-style-position: inside;
}
#qunit-tests > li {
display: none;
}
#qunit-tests li.running,
#qunit-tests li.pass,
#qunit-tests li.fail,
#qunit-tests li.skipped,
#qunit-tests li.aborted {
display: list-item;
}
#qunit-tests.hidepass {
position: relative;
}
#qunit-tests.hidepass li.running,
#qunit-tests.hidepass li.pass:not(.todo) {
visibility: hidden;
position: absolute;
width: 0;
height: 0;
padding: 0;
border: 0;
margin: 0;
}
#qunit-tests li strong {
cursor: pointer;
}
#qunit-tests li.skipped strong {
cursor: default;
}
#qunit-tests li a {
padding: 0.5em;
color: #C2CCD1;
text-decoration: none;
}
#qunit-tests li p a {
padding: 0.25em;
color: #6B6464;
}
#qunit-tests li a:hover,
#qunit-tests li a:focus {
color: #000;
}
#qunit-tests li .runtime {
float: right;
font-size: smaller;
}
.qunit-assert-list {
margin-top: 0.5em;
padding: 0.5em;
background-color: #FFF;
border-radius: 5px;
}
.qunit-source {
margin: 0.6em 0 0.3em;
}
.qunit-collapsed {
display: none;
}
#qunit-tests table {
border-collapse: collapse;
margin-top: 0.2em;
}
#qunit-tests th {
text-align: right;
vertical-align: top;
padding: 0 0.5em 0 0;
}
#qunit-tests td {
vertical-align: top;
}
#qunit-tests pre {
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
}
#qunit-tests del {
color: #374E0C;
background-color: #E0F2BE;
text-decoration: none;
}
#qunit-tests ins {
color: #500;
background-color: #FFCACA;
text-decoration: none;
}
/*** Test Counts */
#qunit-tests b.counts { color: #000; }
#qunit-tests b.passed { color: #5E740B; }
#qunit-tests b.failed { color: #710909; }
#qunit-tests li li {
padding: 5px;
background-color: #FFF;
border-bottom: none;
list-style-position: inside;
}
/*** Passing Styles */
#qunit-tests li li.pass {
color: #3C510C;
background-color: #FFF;
border-left: 10px solid #C6E746;
}
#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
#qunit-tests .pass .test-name { color: #366097; }
#qunit-tests .pass .test-actual,
#qunit-tests .pass .test-expected { color: #999; }
#qunit-banner.qunit-pass { background-color: #C6E746; }
/*** Failing Styles */
#qunit-tests li li.fail {
color: #710909;
background-color: #FFF;
border-left: 10px solid #EE5757;
white-space: pre;
}
#qunit-tests > li:last-child {
border-radius: 0 0 5px 5px;
}
#qunit-tests .fail { color: #000; background-color: #EE5757; }
#qunit-tests .fail .test-name,
#qunit-tests .fail .module-name { color: #000; }
#qunit-tests .fail .test-actual { color: #EE5757; }
#qunit-tests .fail .test-expected { color: #008000; }
#qunit-banner.qunit-fail { background-color: #EE5757; }
/*** Aborted tests */
#qunit-tests .aborted { color: #000; background-color: orange; }
/*** Skipped tests */
#qunit-tests .skipped {
background-color: #EBECE9;
}
#qunit-tests .qunit-todo-label,
#qunit-tests .qunit-skipped-label {
background-color: #F4FF77;
display: inline-block;
font-style: normal;
color: #366097;
line-height: 1.8em;
padding: 0 0.5em;
margin: -0.4em 0.4em -0.4em 0;
}
#qunit-tests .qunit-todo-label {
background-color: #EEE;
}
/** Result */
#qunit-testresult {
color: #2B81AF;
background-color: #D2E0E6;
border-bottom: 1px solid #FFF;
}
#qunit-testresult .clearfix {
height: 0;
clear: both;
}
#qunit-testresult .module-name {
font-weight: 700;
}
#qunit-testresult-display {
padding: 0.5em 1em 0.5em 1em;
width: 85%;
float:left;
}
#qunit-testresult-controls {
padding: 0.5em 1em 0.5em 1em;
width: 10%;
float:left;
}
/** Fixture */
#qunit-fixture {
position: absolute;
top: -10000px;
left: -10000px;
width: 1000px;
height: 1000px;
}

File diff suppressed because it is too large Load Diff

12
reveal.js/test/simple.md Normal file
View File

@ -0,0 +1,12 @@
## Slide 1.1
```js
var a = 1;
```
## Slide 1.2
## Slide 2

View File

@ -0,0 +1,78 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - Test Async Dependencies</title>
<link rel="stylesheet" href="../css/reveal.css">
<link rel="stylesheet" href="qunit-2.5.0.css">
</head>
<body style="overflow: auto;">
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<div class="reveal" style="display: none;">
<div class="slides">
<section>Slide content</section>
</div>
</div>
<script src="../js/reveal.js"></script>
<script src="qunit-2.5.0.js"></script>
<script>
var externalScriptSequence = '';
var scriptCount = 0;
QUnit.config.autostart = false;
QUnit.module( 'Async Dependencies' );
QUnit.test( 'Async scripts are loaded', function( assert ) {
assert.expect( 5 );
var done = assert.async( 5 );
function callback( event ) {
if( externalScriptSequence.length === 1 ) {
assert.ok( externalScriptSequence === 'A', 'first callback was sync script' );
done();
}
else {
assert.ok( true, 'async script loaded' );
done();
}
if( externalScriptSequence.length === 4 ) {
assert.ok( externalScriptSequence.indexOf( 'A' ) !== -1 &&
externalScriptSequence.indexOf( 'B' ) !== -1 &&
externalScriptSequence.indexOf( 'C' ) !== -1 &&
externalScriptSequence.indexOf( 'D' ) !== -1, 'four unique scripts were loaded' );
done();
}
scriptCount ++;
}
Reveal.initialize({
dependencies: [
{ src: 'assets/external-script-a.js', async: false, callback: callback },
{ src: 'assets/external-script-b.js', async: true, callback: callback },
{ src: 'assets/external-script-c.js', async: true, callback: callback },
{ src: 'assets/external-script-d.js', async: true, callback: callback }
]
});
});
QUnit.start();
</script>
</body>
</html>

View File

@ -0,0 +1,54 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - Test Dependencies</title>
<link rel="stylesheet" href="../css/reveal.css">
<link rel="stylesheet" href="qunit-2.5.0.css">
</head>
<body style="overflow: auto;">
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<div class="reveal" style="display: none;">
<div class="slides">
<section>Slide content</section>
</div>
</div>
<script src="../js/reveal.js"></script>
<script src="qunit-2.5.0.js"></script>
<script>
window.externalScriptSequence = '';
Reveal.addEventListener( 'ready', function() {
QUnit.module( 'Dependencies' );
QUnit.test( 'Load synchronous scripts', function( assert ) {
assert.strictEqual( window.externalScriptSequence, 'ABC', 'Loaded and executed in order' );
});
} );
Reveal.initialize({
dependencies: [
{ src: 'assets/external-script-a.js' },
{ src: 'assets/external-script-b.js' },
{ src: 'assets/external-script-c.js' }
]
});
</script>
</body>
</html>

View File

@ -0,0 +1,74 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - Test Grid</title>
<link rel="stylesheet" href="../css/reveal.css">
<link rel="stylesheet" href="qunit-2.5.0.css">
</head>
<body style="overflow: auto;">
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<div class="reveal" style="display: none;">
<div class="slides">
<section>0</section>
<section>
<section>1.1</section>
<section>1.2</section>
<section>1.3</section>
<section>1.4</section>
</section>
<section>
<section>2.1</section>
<section>2.2</section>
<section>2.3</section>
<section>2.4</section>
</section>
</div>
</div>
<script src="../js/reveal.js"></script>
<script src="qunit-2.5.0.js"></script>
<script>
Reveal.addEventListener( 'ready', function() {
QUnit.module( 'Grid Navigation' );
QUnit.test( 'Disabled', function( assert ) {
Reveal.right();
Reveal.down();
Reveal.down();
assert.deepEqual( Reveal.getIndices(), { h: 1, v: 2, f: undefined }, 'Correct starting point' );
Reveal.right();
assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: undefined }, 'Moves to top when going to adjacent stack' );
});
QUnit.test( 'Enabled', function( assert ) {
Reveal.configure({ navigationMode: 'grid' });
Reveal.slide( 0, 0 );
Reveal.right();
Reveal.down();
Reveal.down();
assert.deepEqual( Reveal.getIndices(), { h: 1, v: 2, f: undefined }, 'Correct starting point' );
Reveal.right();
assert.deepEqual( Reveal.getIndices(), { h: 2, v: 2, f: undefined }, 'Remains at same vertical index when going to adjacent stack' );
});
} );
Reveal.initialize();
</script>
</body>
</html>

View File

@ -0,0 +1,104 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - Test Iframe Backgrounds</title>
<link rel="stylesheet" href="../css/reveal.css">
<link rel="stylesheet" href="qunit-2.5.0.css">
</head>
<body style="overflow: auto;">
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<div class="reveal" style="display: none;">
<div class="slides">
<section data-background-iframe="#1">1</section>
<section data-background-iframe="#2">2</section>
<section data-background-iframe="#3" data-preload>3</section>
<section data-background-iframe="#4">4</section>
<section data-background-iframe="#5">5</section>
<section data-background-iframe="#6">6</section>
</div>
</div>
<script src="../js/reveal.js"></script>
<script src="qunit-2.5.0.js"></script>
<script>
Reveal.addEventListener( 'ready', function() {
function getIframe( index ) {
return document.querySelectorAll( '.slide-background' )[index].querySelector( 'iframe' );
}
QUnit.module( 'Iframe' );
QUnit.test( 'Using default settings', function( assert ) {
Reveal.slide(0);
assert.strictEqual( getIframe(1).hasAttribute( 'src' ), false, 'not preloaded when within viewDistance' );
Reveal.slide(1);
assert.strictEqual( getIframe(1).hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
Reveal.slide(0);
assert.strictEqual( getIframe(1).hasAttribute( 'src' ), false, 'unloaded when slide becomes invisible' );
});
QUnit.test( 'Using data-preload', function( assert ) {
Reveal.slide(1);
assert.strictEqual( getIframe(2).hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
assert.strictEqual( getIframe(1).hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
Reveal.slide(0);
assert.strictEqual( getIframe(3).hasAttribute( 'src' ), false, 'unloads outside of viewDistance' );
});
QUnit.test( 'Using preloadIframes: true', function( assert ) {
Reveal.configure({ preloadIframes: true });
Reveal.slide(1);
assert.strictEqual( getIframe(0).hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
assert.strictEqual( getIframe(1).hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
assert.strictEqual( getIframe(2).hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
});
QUnit.test( 'Using preloadIframes: false', function( assert ) {
Reveal.configure({ preloadIframes: false });
Reveal.slide(0);
assert.strictEqual( getIframe(1).hasAttribute( 'src' ), false, 'not preloaded within viewDistance' );
assert.strictEqual( getIframe(2).hasAttribute( 'src' ), false, 'not preloaded within viewDistance' );
Reveal.slide(1);
assert.strictEqual( getIframe(1).hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
});
} );
Reveal.initialize({
viewDistance: 3
});
</script>
</body>
</html>

View File

@ -0,0 +1,108 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - Test Iframes</title>
<link rel="stylesheet" href="../css/reveal.css">
<link rel="stylesheet" href="qunit-2.5.0.css">
</head>
<body style="overflow: auto;">
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<div class="reveal" style="display: none;">
<div class="slides">
<section>1</section>
<section>2</section>
<section>
<iframe class="default-iframe" data-src="#"></iframe>
<iframe class="preload-iframe" data-src="#" data-preload></iframe>
</section>
</div>
</div>
<script src="../js/reveal.js"></script>
<script src="qunit-2.5.0.js"></script>
<script>
Reveal.addEventListener( 'ready', function() {
var defaultIframe = document.querySelector( '.default-iframe' ),
preloadIframe = document.querySelector( '.preload-iframe' );
QUnit.module( 'Iframe' );
QUnit.test( 'Using default settings', function( assert ) {
Reveal.slide(1);
assert.strictEqual( defaultIframe.hasAttribute( 'src' ), false, 'not preloaded when within viewDistance' );
Reveal.slide(2);
assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
Reveal.slide(1);
assert.strictEqual( defaultIframe.hasAttribute( 'src' ), false, 'unloaded when slide becomes invisible' );
});
QUnit.test( 'Using data-preload', function( assert ) {
Reveal.slide(1);
assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
Reveal.slide(2);
assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'loaded when slide becoems visible' );
Reveal.slide(0);
assert.strictEqual( preloadIframe.hasAttribute( 'src' ), false, 'unloads outside of viewDistance' );
});
QUnit.test( 'Using preloadIframes: true', function( assert ) {
Reveal.configure({ preloadIframes: true });
Reveal.slide(1);
assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'preloaded within viewDistance' );
Reveal.slide(2);
assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
});
QUnit.test( 'Using preloadIframes: false', function( assert ) {
Reveal.configure({ preloadIframes: false });
Reveal.slide(0);
assert.strictEqual( defaultIframe.hasAttribute( 'src' ), false, 'not preloaded within viewDistance' );
assert.strictEqual( preloadIframe.hasAttribute( 'src' ), false, 'not preloaded within viewDistance' );
Reveal.slide(2);
assert.strictEqual( defaultIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
assert.strictEqual( preloadIframe.hasAttribute( 'src' ), true, 'loaded when slide becomes visible' );
});
} );
Reveal.initialize({
viewDistance: 2
});
</script>
</body>
</html>

View File

@ -7,7 +7,7 @@
<title>reveal.js - Test Markdown Element Attributes</title> <title>reveal.js - Test Markdown Element Attributes</title>
<link rel="stylesheet" href="../css/reveal.css"> <link rel="stylesheet" href="../css/reveal.css">
<link rel="stylesheet" href="qunit-1.12.0.css"> <link rel="stylesheet" href="qunit-2.5.0.css">
</head> </head>
<body style="overflow: auto;"> <body style="overflow: auto;">
@ -66,8 +66,7 @@
Test Test
![Example Picture](examples/assets/image2.png) ![Example Picture](examples/assets/image2.png) <!-- {_class="reveal stretch"} -->
<!-- {_class="reveal stretch"} -->
</script> </script>
</section> </section>
@ -122,11 +121,10 @@
</div> </div>
<script src="../lib/js/head.min.js"></script>
<script src="../js/reveal.js"></script> <script src="../js/reveal.js"></script>
<script src="../plugin/markdown/marked.js"></script> <script src="../plugin/markdown/marked.js"></script>
<script src="../plugin/markdown/markdown.js"></script> <script src="../plugin/markdown/markdown.js"></script>
<script src="qunit-1.12.0.js"></script> <script src="qunit-2.5.0.js"></script>
<script src="test-markdown-element-attributes.js"></script> <script src="test-markdown-element-attributes.js"></script>

View File

@ -1,46 +1,44 @@
Reveal.addEventListener( 'ready', function() { Reveal.addEventListener( 'ready', function() {
QUnit.module( 'Markdown' ); QUnit.module( 'Markdown' );
test( 'Vertical separator', function() { QUnit.test( 'Vertical separator', function( assert ) {
strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 4, 'found four slides' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 4, 'found four slides' );
}); });
QUnit.test( 'Attributes on element header in vertical slides', function( assert ) {
test( 'Attributes on element header in vertical slides', function() { assert.strictEqual( document.querySelectorAll( '.reveal .slides section>section h2.fragment.fade-out' ).length, 1, 'found one vertical slide with class fragment.fade-out on header' );
strictEqual( document.querySelectorAll( '.reveal .slides section>section h2.fragment.fade-out' ).length, 1, 'found one vertical slide with class fragment.fade-out on header' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides section>section h2.fragment.shrink' ).length, 1, 'found one vertical slide with class fragment.shrink on header' );
strictEqual( document.querySelectorAll( '.reveal .slides section>section h2.fragment.shrink' ).length, 1, 'found one vertical slide with class fragment.shrink on header' );
}); });
test( 'Attributes on element paragraphs in vertical slides', function() { QUnit.test( 'Attributes on element paragraphs in vertical slides', function( assert ) {
strictEqual( document.querySelectorAll( '.reveal .slides section>section p.fragment.grow' ).length, 2, 'found a vertical slide with two paragraphs with class fragment.grow' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides section>section p.fragment.grow' ).length, 2, 'found a vertical slide with two paragraphs with class fragment.grow' );
}); });
test( 'Attributes on element list items in vertical slides', function() { QUnit.test( 'Attributes on element list items in vertical slides', function( assert ) {
strictEqual( document.querySelectorAll( '.reveal .slides section>section li.fragment.grow' ).length, 3, 'found a vertical slide with three list items with class fragment.grow' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides section>section li.fragment.grow' ).length, 3, 'found a vertical slide with three list items with class fragment.grow' );
}); });
test( 'Attributes on element paragraphs in horizontal slides', function() { QUnit.test( 'Attributes on element paragraphs in horizontal slides', function( assert ) {
strictEqual( document.querySelectorAll( '.reveal .slides section p.fragment.highlight-red' ).length, 4, 'found a horizontal slide with four paragraphs with class fragment.grow' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides section p.fragment.highlight-red' ).length, 4, 'found a horizontal slide with four paragraphs with class fragment.grow' );
});
test( 'Attributes on element list items in horizontal slides', function() {
strictEqual( document.querySelectorAll( '.reveal .slides section li.fragment.highlight-green' ).length, 5, 'found a horizontal slide with five list items with class fragment.roll-in' );
});
test( 'Attributes on element list items in horizontal slides', function() {
strictEqual( document.querySelectorAll( '.reveal .slides section img.reveal.stretch' ).length, 1, 'found a horizontal slide with stretched image, class img.reveal.stretch' );
}); });
test( 'Attributes on elements in vertical slides with default element attribute separator', function() { QUnit.test( 'Attributes on element list items in horizontal slides', function( assert ) {
strictEqual( document.querySelectorAll( '.reveal .slides section h2.fragment.highlight-red' ).length, 2, 'found two h2 titles with fragment highlight-red in vertical slides with default element attribute separator' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides section li.fragment.highlight-green' ).length, 5, 'found a horizontal slide with five list items with class fragment.roll-in' );
}); });
test( 'Attributes on elements in single slides with default element attribute separator', function() { QUnit.test( 'Attributes on element image in horizontal slides', function( assert ) {
strictEqual( document.querySelectorAll( '.reveal .slides section p.fragment.highlight-blue' ).length, 3, 'found three elements with fragment highlight-blue in single slide with default element attribute separator' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides section img.reveal.stretch' ).length, 1, 'found a horizontal slide with stretched image, class img.reveal.stretch' );
});
QUnit.test( 'Attributes on elements in vertical slides with default element attribute separator', function( assert ) {
assert.strictEqual( document.querySelectorAll( '.reveal .slides section h2.fragment.highlight-red' ).length, 2, 'found two h2 titles with fragment highlight-red in vertical slides with default element attribute separator' );
});
QUnit.test( 'Attributes on elements in single slides with default element attribute separator', function( assert ) {
assert.strictEqual( document.querySelectorAll( '.reveal .slides section p.fragment.highlight-blue' ).length, 3, 'found three elements with fragment highlight-blue in single slide with default element attribute separator' );
}); });
} ); } );
Reveal.initialize(); Reveal.initialize();

View File

@ -0,0 +1,37 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - Test Markdown</title>
<link rel="stylesheet" href="../css/reveal.css">
<link rel="stylesheet" href="qunit-2.5.0.css">
</head>
<body style="overflow: auto;">
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<div class="reveal" style="display: none;">
<div class="slides">
<!-- <section data-markdown="simple.md" data-separator="^\r?\n\r?\n\r?\n" data-separator-vertical="^\r?\n\r?\n"></section> -->
</div>
</div>
<script src="../js/reveal.js"></script>
<script src="../plugin/highlight/highlight.js"></script>
<script src="../plugin/markdown/marked.js"></script>
<script src="../plugin/markdown/markdown.js"></script>
<script src="qunit-2.5.0.js"></script>
<!-- <script src="test-markdown-external.js"></script> -->
<!-- Test disabled 28/2/2019 by Hakim Markdown plugin needs to be updated to load extenal files asycnhronously -->
</body>
</html>

View File

@ -0,0 +1,20 @@
Reveal.addEventListener( 'ready', function() {
QUnit.module( 'Markdown' );
QUnit.test( 'Vertical separator', function( assert ) {
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 2, 'found two slides' );
});
QUnit.test( 'Horizontal separator', function( assert ) {
assert.strictEqual( document.querySelectorAll( '.reveal .slides>section' ).length, 2, 'found two slides' );
});
QUnit.test( 'Language highlighter', function( assert ) {
assert.strictEqual( document.querySelectorAll( '.hljs-keyword' ).length, 1, 'got rendered highlight tag.' );
assert.strictEqual( document.querySelector( '.hljs-keyword' ).innerHTML, 'var', 'the same keyword: var.' );
});
} );
Reveal.initialize();

View File

@ -0,0 +1,40 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - Test Markdown Options</title>
<link rel="stylesheet" href="../css/reveal.css">
<link rel="stylesheet" href="qunit-2.5.0.css">
</head>
<body style="overflow: auto;">
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<div class="reveal" style="display: none;">
<div class="slides">
<section data-markdown>
<script type="text/template">
## Testing Markdown Options
This "slide" should contain 'smart' quotes.
</script>
</section>
</div>
</div>
<script src="../js/reveal.js"></script>
<script src="qunit-2.5.0.js"></script>
<script src="test-markdown-options.js"></script>
</body>
</html>

View File

@ -0,0 +1,27 @@
Reveal.addEventListener( 'ready', function() {
QUnit.module( 'Markdown' );
QUnit.test( 'Options are set', function( assert ) {
assert.strictEqual( marked.defaults.smartypants, true );
});
QUnit.test( 'Smart quotes are activated', function( assert ) {
var text = document.querySelector( '.reveal .slides>section>p' ).textContent;
assert.strictEqual( /['"]/.test( text ), false );
assert.strictEqual( /[“”‘’]/.test( text ), true );
});
} );
Reveal.initialize({
dependencies: [
{ src: '../plugin/markdown/marked.js' },
// Test loading JS files with query strings
{ src: '../plugin/markdown/markdown.js?query=string' },
],
markdown: {
smartypants: true
}
});

View File

@ -7,7 +7,7 @@
<title>reveal.js - Test Markdown Attributes</title> <title>reveal.js - Test Markdown Attributes</title>
<link rel="stylesheet" href="../css/reveal.css"> <link rel="stylesheet" href="../css/reveal.css">
<link rel="stylesheet" href="qunit-1.12.0.css"> <link rel="stylesheet" href="qunit-2.5.0.css">
</head> </head>
<body style="overflow: auto;"> <body style="overflow: auto;">
@ -116,11 +116,10 @@
</div> </div>
<script src="../lib/js/head.min.js"></script>
<script src="../js/reveal.js"></script> <script src="../js/reveal.js"></script>
<script src="../plugin/markdown/marked.js"></script> <script src="../plugin/markdown/marked.js"></script>
<script src="../plugin/markdown/markdown.js"></script> <script src="../plugin/markdown/markdown.js"></script>
<script src="qunit-1.12.0.js"></script> <script src="qunit-2.5.0.js"></script>
<script src="test-markdown-slide-attributes.js"></script> <script src="test-markdown-slide-attributes.js"></script>

View File

@ -1,47 +1,44 @@
Reveal.addEventListener( 'ready', function() { Reveal.addEventListener( 'ready', function() {
QUnit.module( 'Markdown' ); QUnit.module( 'Markdown' );
test( 'Vertical separator', function() { QUnit.test( 'Vertical separator', function( assert ) {
strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 6, 'found six vertical slides' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 6, 'found six vertical slides' );
}); });
test( 'Id on slide', function() { QUnit.test( 'Id on slide', function( assert ) {
strictEqual( document.querySelectorAll( '.reveal .slides>section>section#slide2' ).length, 1, 'found one slide with id slide2' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section#slide2' ).length, 1, 'found one slide with id slide2' );
strictEqual( document.querySelectorAll( '.reveal .slides>section>section a[href="#/slide2"]' ).length, 1, 'found one slide with a link to slide2' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section a[href="#/slide2"]' ).length, 1, 'found one slide with a link to slide2' );
}); });
test( 'data-background attributes', function() { QUnit.test( 'data-background attributes', function( assert ) {
strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#A0C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#A0C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#ff0000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#ff0000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#C6916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#C6916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
}); });
test( 'data-transition attributes', function() { QUnit.test( 'data-transition attributes', function( assert ) {
strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="zoom"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="zoom"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="fade"]' ).length, 1, 'found one vertical slide with data-transition="fade"' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="fade"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
strictEqual( document.querySelectorAll( '.reveal .slides section [data-transition="zoom"]' ).length, 1, 'found one slide with data-transition="zoom"' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides section [data-transition="zoom"]' ).length, 1, 'found one slide with data-transition="zoom"' );
}); });
test( 'data-background attributes with default separator', function() { QUnit.test( 'data-background attributes with default separator', function( assert ) {
strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#A7C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#A7C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#f70000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-background="#f70000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#C7916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#C7916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
}); });
test( 'data-transition attributes with default separator', function() { QUnit.test( 'data-transition attributes with default separator', function( assert ) {
strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="concave"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="concave"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="page"]' ).length, 1, 'found one vertical slide with data-transition="fade"' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section[data-transition="page"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
strictEqual( document.querySelectorAll( '.reveal .slides section [data-transition="concave"]' ).length, 1, 'found one slide with data-transition="zoom"' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides section [data-transition="concave"]' ).length, 1, 'found one slide with data-transition="zoom"' );
}); });
test( 'data-transition attributes with inline content', function() { QUnit.test( 'data-transition attributes with inline content', function( assert ) {
strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#ff0000"]' ).length, 3, 'found three horizontal slides with data-background="#ff0000"' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides>section[data-background="#ff0000"]' ).length, 3, 'found three horizontal slides with data-background="#ff0000"' );
}); });
} ); } );
Reveal.initialize(); Reveal.initialize();

View File

@ -7,7 +7,7 @@
<title>reveal.js - Test Markdown</title> <title>reveal.js - Test Markdown</title>
<link rel="stylesheet" href="../css/reveal.css"> <link rel="stylesheet" href="../css/reveal.css">
<link rel="stylesheet" href="qunit-1.12.0.css"> <link rel="stylesheet" href="qunit-2.5.0.css">
</head> </head>
<body style="overflow: auto;"> <body style="overflow: auto;">
@ -40,11 +40,10 @@
</div> </div>
<script src="../lib/js/head.min.js"></script>
<script src="../js/reveal.js"></script> <script src="../js/reveal.js"></script>
<script src="../plugin/markdown/marked.js"></script> <script src="../plugin/markdown/marked.js"></script>
<script src="../plugin/markdown/markdown.js"></script> <script src="../plugin/markdown/markdown.js"></script>
<script src="qunit-1.12.0.js"></script> <script src="qunit-2.5.0.js"></script>
<script src="test-markdown.js"></script> <script src="test-markdown.js"></script>

View File

@ -1,15 +1,11 @@
Reveal.addEventListener( 'ready', function() { Reveal.addEventListener( 'ready', function() {
QUnit.module( 'Markdown' ); QUnit.module( 'Markdown' );
test( 'Vertical separator', function() { QUnit.test( 'Vertical separator', function( assert ) {
strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 2, 'found two slides' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides>section>section' ).length, 2, 'found two slides' );
}); });
} ); } );
Reveal.initialize(); Reveal.initialize();

View File

@ -8,7 +8,7 @@
<link rel="stylesheet" href="../css/reveal.css"> <link rel="stylesheet" href="../css/reveal.css">
<link rel="stylesheet" href="../css/print/pdf.css"> <link rel="stylesheet" href="../css/print/pdf.css">
<link rel="stylesheet" href="qunit-1.12.0.css"> <link rel="stylesheet" href="qunit-2.5.0.css">
</head> </head>
<body style="overflow: auto;"> <body style="overflow: auto;">
@ -22,7 +22,7 @@
<section> <section>
<h1>1</h1> <h1>1</h1>
<img data-src="fake-url.png"> <img data-src="">
</section> </section>
<section> <section>
@ -73,9 +73,8 @@
</div> </div>
<script src="../lib/js/head.min.js"></script>
<script src="../js/reveal.js"></script> <script src="../js/reveal.js"></script>
<script src="qunit-1.12.0.js"></script> <script src="qunit-2.5.0.js"></script>
<script src="test-pdf.js"></script> <script src="test-pdf.js"></script>

View File

@ -1,15 +1,12 @@
Reveal.addEventListener( 'ready', function() { Reveal.addEventListener( 'ready', function() {
// Only one test for now, we're mainly ensuring that there // Only one test for now, we're mainly ensuring that there
// are no execution errors when running PDF mode // are no execution errors when running PDF mode
test( 'Reveal.isReady', function() { QUnit.test( 'Reveal.isReady', function( assert ) {
strictEqual( Reveal.isReady(), true, 'returns true' ); assert.strictEqual( Reveal.isReady(), true, 'returns true' );
}); });
} ); } );
Reveal.initialize({ pdf: true }); Reveal.initialize({ pdf: true });

View File

@ -0,0 +1,105 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - Test Plugins</title>
<link rel="stylesheet" href="../css/reveal.css">
<link rel="stylesheet" href="qunit-2.5.0.css">
</head>
<body style="overflow: auto;">
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<div class="reveal" style="display: none;">
<div class="slides">
<section>Slide content</section>
</div>
</div>
<script src="../js/reveal.js"></script>
<script src="qunit-2.5.0.js"></script>
<script>
QUnit.module( 'Plugins' );
var initCounter = { PluginB: 0, PluginC: 0, PluginD: 0 };
// Plugin with no init method
var PluginA = {};
// Plugin with init method
var PluginB = { init: function() {
initCounter['PluginB'] += 1;
} };
// Async plugin with init method
var PluginC = { init: function() {
return new Promise(function( resolve ) {
setTimeout( () => {
initCounter['PluginC'] += 1;
resolve();
}, 1000 );
});
} };
// Plugin initialized after reveal.js is ready
var PluginD = { init: function() {
initCounter['PluginD'] += 1;
} };
var PluginE = {};
Reveal.registerPlugin( 'PluginA', PluginA );
Reveal.registerPlugin( 'PluginB', PluginB );
Reveal.registerPlugin( 'PluginC', PluginC );
Reveal.initialize();
QUnit.test( 'Can initialize synchronously', function( assert ) {
assert.strictEqual( initCounter['PluginB'], 1 );
Reveal.registerPlugin( 'PluginB', PluginB );
assert.strictEqual( initCounter['PluginB'], 1, 'prevents duplicate registration' );
});
QUnit.test( 'Can initialize asynchronously', function( assert ) {
assert.expect( 3 );
var done = assert.async( 2 );
assert.strictEqual( initCounter['PluginC'], 0, 'async plugin not immediately initialized' );
Reveal.addEventListener( 'ready', function() {
assert.strictEqual( initCounter['PluginC'], 1, 'finsihed initializing when reveal.js dispatches "ready"' );
done();
Reveal.registerPlugin( 'PluginD', PluginD );
assert.strictEqual( initCounter['PluginD'], 1, 'plugin registered after reveal.js is ready still initiailizes' );
done();
});
} );
QUnit.test( 'Can check if plugin is registered', function( assert ) {
assert.strictEqual( Reveal.hasPlugin( 'PluginA' ), true );
assert.strictEqual( Reveal.hasPlugin( 'PluginE' ), false );
Reveal.registerPlugin( 'PluginE', PluginE );
assert.strictEqual( Reveal.hasPlugin( 'PluginE' ), true );
} );
QUnit.test( 'Can retrieve plugin instance', function( assert ) {
assert.strictEqual( Reveal.getPlugin( 'PluginB' ), PluginB );
} );
</script>
</body>
</html>

View File

@ -0,0 +1,139 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>reveal.js - Test State</title>
<link rel="stylesheet" href="../css/reveal.css">
<link rel="stylesheet" href="qunit-2.5.0.css">
</head>
<body style="overflow: auto;">
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<div class="reveal" style="display: none;">
<div class="slides">
<section>No state</section>
<section id="slide2" data-state="state1">State 1</section>
<section data-state="state1">State 1</section>
<section data-state="state2">State 2</section>
<section>
<section>No state</section>
<section data-state="state1">State 1</section>
<section data-state="state3">State 3</section>
<section>No state</section>
</section>
<section>No state</section>
</div>
</div>
<script src="../js/reveal.js"></script>
<script src="qunit-2.5.0.js"></script>
<script>
Reveal.addEventListener( 'ready', function() {
QUnit.module( 'State' );
QUnit.test( 'Fire events when changing slide', function( assert ) {
assert.expect( 2 );
var state1 = assert.async();
var state2 = assert.async();
var _onState1 = function( event ) {
assert.ok( true, 'state1 fired' );
state1();
}
var _onState2 = function( event ) {
assert.ok( true, 'state2 fired' );
state2();
}
Reveal.addEventListener( 'state1', _onState1 );
Reveal.addEventListener( 'state2', _onState2 );
Reveal.slide( 1 );
Reveal.slide( 3 );
Reveal.removeEventListener( 'state1', _onState1 );
Reveal.removeEventListener( 'state2', _onState2 );
});
QUnit.test( 'Fire state events for vertical slides', function( assert ) {
assert.expect( 2 );
var done = assert.async( 2 );
var _onState1 = function( event ) {
assert.ok( true, 'state1 fired' );
done();
}
var _onState3 = function( event ) {
assert.ok( true, 'state3 fired' );
done();
}
Reveal.addEventListener( 'state1', _onState1 );
Reveal.addEventListener( 'state3', _onState3 );
Reveal.slide( 0 );
Reveal.slide( 4, 1 );
Reveal.slide( 4, 2 );
Reveal.removeEventListener( 'state1', _onState1 );
Reveal.removeEventListener( 'state3', _onState3 );
});
QUnit.test( 'No events if state remains unchanged', function( assert ) {
var stateChanges = 0;
var _onEvent = function( event ) {
stateChanges += 1;
}
Reveal.addEventListener( 'state1', _onEvent );
Reveal.slide( 0 ); // no state
Reveal.slide( 1 ); // state1
Reveal.slide( 2 ); // state1
Reveal.prev(); // state1
Reveal.next(); // state1
Reveal.slide( 4, 1 ); // state1
Reveal.slide( 0 ); // no state
Reveal.removeEventListener( 'state1', _onEvent );
assert.strictEqual( stateChanges, 1, 'no event was fired when going to slide with same state' );
});
QUnit.test( 'Event order', function( assert ) {
var _onEvent = function( event ) {
assert.ok( Reveal.getCurrentSlide() == document.querySelector( '#slide2' ), 'correct current slide immediately after state event' );
}
Reveal.addEventListener( 'state1', _onEvent );
Reveal.slide( 0 );
Reveal.slide( 1 );
Reveal.removeEventListener( 'state1', _onEvent );
});
} );
Reveal.initialize();
</script>
</body>
</html>

View File

@ -7,7 +7,7 @@
<title>reveal.js - Tests</title> <title>reveal.js - Tests</title>
<link rel="stylesheet" href="../css/reveal.css"> <link rel="stylesheet" href="../css/reveal.css">
<link rel="stylesheet" href="qunit-1.12.0.css"> <link rel="stylesheet" href="qunit-2.5.0.css">
</head> </head>
<body style="overflow: auto;"> <body style="overflow: auto;">
@ -21,9 +21,9 @@
<section data-background-image="examples/assets/image1.png"> <section data-background-image="examples/assets/image1.png">
<h1>1</h1> <h1>1</h1>
<img data-src="fake-url.png"> <img data-src="">
<video data-src="fake-url.mp4"></video> <video data-src=""></video>
<audio data-src="fake-url.mp3"></audio> <audio data-src=""></audio>
<aside class="notes">speaker notes 1</aside> <aside class="notes">speaker notes 1</aside>
</section> </section>
@ -55,7 +55,7 @@
<li class="fragment" data-fragment-index="0">4.1</li> <li class="fragment" data-fragment-index="0">4.1</li>
<li class="fragment" data-fragment-index="0">4.2</li> <li class="fragment" data-fragment-index="0">4.2</li>
</ul> </ul>
<iframe data-src="https://example.com"></iframe> <iframe data-src="http://example.com"></iframe>
</section> </section>
<section> <section>
@ -76,9 +76,8 @@
</div> </div>
<script src="../lib/js/head.min.js"></script>
<script src="../js/reveal.js"></script> <script src="../js/reveal.js"></script>
<script src="qunit-1.12.0.js"></script> <script src="qunit-2.5.0.js"></script>
<script src="test.js"></script> <script src="test.js"></script>

View File

@ -1,4 +1,3 @@
// These tests expect the DOM to contain a presentation // These tests expect the DOM to contain a presentation
// with the following slide structure: // with the following slide structure:
// //
@ -8,7 +7,6 @@
// 3 - Two fragments with same data-fragment-index // 3 - Two fragments with same data-fragment-index
// 4 // 4
Reveal.addEventListener( 'ready', function() { Reveal.addEventListener( 'ready', function() {
// --------------------------------------------------------------- // ---------------------------------------------------------------
@ -16,16 +14,16 @@ Reveal.addEventListener( 'ready', function() {
QUnit.module( 'DOM' ); QUnit.module( 'DOM' );
test( 'Initial slides classes', function() { QUnit.test( 'Initial slides classes', function( assert ) {
var horizontalSlides = document.querySelectorAll( '.reveal .slides>section' ) var horizontalSlides = document.querySelectorAll( '.reveal .slides>section' )
strictEqual( document.querySelectorAll( '.reveal .slides section.past' ).length, 0, 'no .past slides' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides section.past' ).length, 0, 'no .past slides' );
strictEqual( document.querySelectorAll( '.reveal .slides section.present' ).length, 1, 'one .present slide' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides section.present' ).length, 1, 'one .present slide' );
strictEqual( document.querySelectorAll( '.reveal .slides>section.future' ).length, horizontalSlides.length - 1, 'remaining horizontal slides are .future' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides>section.future' ).length, horizontalSlides.length - 1, 'remaining horizontal slides are .future' );
strictEqual( document.querySelectorAll( '.reveal .slides section.stack' ).length, 2, 'two .stacks' ); assert.strictEqual( document.querySelectorAll( '.reveal .slides section.stack' ).length, 2, 'two .stacks' );
ok( document.querySelectorAll( '.reveal .slides section.stack' )[0].querySelectorAll( '.future' ).length > 0, 'vertical slides are given .future' ); assert.ok( document.querySelectorAll( '.reveal .slides section.stack' )[0].querySelectorAll( '.future' ).length > 0, 'vertical slides are given .future' );
}); });
// --------------------------------------------------------------- // ---------------------------------------------------------------
@ -33,203 +31,203 @@ Reveal.addEventListener( 'ready', function() {
QUnit.module( 'API' ); QUnit.module( 'API' );
test( 'Reveal.isReady', function() { QUnit.test( 'Reveal.isReady', function( assert ) {
strictEqual( Reveal.isReady(), true, 'returns true' ); assert.strictEqual( Reveal.isReady(), true, 'returns true' );
}); });
test( 'Reveal.isOverview', function() { QUnit.test( 'Reveal.isOverview', function( assert ) {
strictEqual( Reveal.isOverview(), false, 'false by default' ); assert.strictEqual( Reveal.isOverview(), false, 'false by default' );
Reveal.toggleOverview(); Reveal.toggleOverview();
strictEqual( Reveal.isOverview(), true, 'true after toggling on' ); assert.strictEqual( Reveal.isOverview(), true, 'true after toggling on' );
Reveal.toggleOverview(); Reveal.toggleOverview();
strictEqual( Reveal.isOverview(), false, 'false after toggling off' ); assert.strictEqual( Reveal.isOverview(), false, 'false after toggling off' );
}); });
test( 'Reveal.isPaused', function() { QUnit.test( 'Reveal.isPaused', function( assert ) {
strictEqual( Reveal.isPaused(), false, 'false by default' ); assert.strictEqual( Reveal.isPaused(), false, 'false by default' );
Reveal.togglePause(); Reveal.togglePause();
strictEqual( Reveal.isPaused(), true, 'true after pausing' ); assert.strictEqual( Reveal.isPaused(), true, 'true after pausing' );
Reveal.togglePause(); Reveal.togglePause();
strictEqual( Reveal.isPaused(), false, 'false after resuming' ); assert.strictEqual( Reveal.isPaused(), false, 'false after resuming' );
}); });
test( 'Reveal.isFirstSlide', function() { QUnit.test( 'Reveal.isFirstSlide', function( assert ) {
Reveal.slide( 0, 0 ); Reveal.slide( 0, 0 );
strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 0, 0 )' ); assert.strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 0, 0 )' );
Reveal.slide( 1, 0 ); Reveal.slide( 1, 0 );
strictEqual( Reveal.isFirstSlide(), false, 'false after Reveal.slide( 1, 0 )' ); assert.strictEqual( Reveal.isFirstSlide(), false, 'false after Reveal.slide( 1, 0 )' );
Reveal.slide( 0, 0 ); Reveal.slide( 0, 0 );
strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 0, 0 )' ); assert.strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 0, 0 )' );
}); });
test( 'Reveal.isFirstSlide after vertical slide', function() { QUnit.test( 'Reveal.isFirstSlide after vertical slide', function( assert ) {
Reveal.slide( 1, 1 ); Reveal.slide( 1, 1 );
Reveal.slide( 0, 0 ); Reveal.slide( 0, 0 );
strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 1, 1 ) and then Reveal.slide( 0, 0 )' ); assert.strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 1, 1 ) and then Reveal.slide( 0, 0 )' );
}); });
test( 'Reveal.isLastSlide', function() { QUnit.test( 'Reveal.isLastSlide', function( assert ) {
Reveal.slide( 0, 0 ); Reveal.slide( 0, 0 );
strictEqual( Reveal.isLastSlide(), false, 'false after Reveal.slide( 0, 0 )' ); assert.strictEqual( Reveal.isLastSlide(), false, 'false after Reveal.slide( 0, 0 )' );
var lastSlideIndex = document.querySelectorAll( '.reveal .slides>section' ).length - 1; var lastSlideIndex = document.querySelectorAll( '.reveal .slides>section' ).length - 1;
Reveal.slide( lastSlideIndex, 0 ); Reveal.slide( lastSlideIndex, 0 );
strictEqual( Reveal.isLastSlide(), true, 'true after Reveal.slide( '+ lastSlideIndex +', 0 )' ); assert.strictEqual( Reveal.isLastSlide(), true, 'true after Reveal.slide( '+ lastSlideIndex +', 0 )' );
Reveal.slide( 0, 0 ); Reveal.slide( 0, 0 );
strictEqual( Reveal.isLastSlide(), false, 'false after Reveal.slide( 0, 0 )' ); assert.strictEqual( Reveal.isLastSlide(), false, 'false after Reveal.slide( 0, 0 )' );
}); });
test( 'Reveal.isLastSlide after vertical slide', function() { QUnit.test( 'Reveal.isLastSlide after vertical slide', function( assert ) {
var lastSlideIndex = document.querySelectorAll( '.reveal .slides>section' ).length - 1; var lastSlideIndex = document.querySelectorAll( '.reveal .slides>section' ).length - 1;
Reveal.slide( 1, 1 ); Reveal.slide( 1, 1 );
Reveal.slide( lastSlideIndex ); Reveal.slide( lastSlideIndex );
strictEqual( Reveal.isLastSlide(), true, 'true after Reveal.slide( 1, 1 ) and then Reveal.slide( '+ lastSlideIndex +', 0 )' ); assert.strictEqual( Reveal.isLastSlide(), true, 'true after Reveal.slide( 1, 1 ) and then Reveal.slide( '+ lastSlideIndex +', 0 )' );
}); });
test( 'Reveal.getTotalSlides', function() { QUnit.test( 'Reveal.getTotalSlides', function( assert ) {
strictEqual( Reveal.getTotalSlides(), 8, 'eight slides in total' ); assert.strictEqual( Reveal.getTotalSlides(), 8, 'eight slides in total' );
}); });
test( 'Reveal.getIndices', function() { QUnit.test( 'Reveal.getIndices', function( assert ) {
var indices = Reveal.getIndices(); var indices = Reveal.getIndices();
ok( indices.hasOwnProperty( 'h' ), 'h exists' ); assert.ok( indices.hasOwnProperty( 'h' ), 'h exists' );
ok( indices.hasOwnProperty( 'v' ), 'v exists' ); assert.ok( indices.hasOwnProperty( 'v' ), 'v exists' );
ok( indices.hasOwnProperty( 'f' ), 'f exists' ); assert.ok( indices.hasOwnProperty( 'f' ), 'f exists' );
Reveal.slide( 1, 0 ); Reveal.slide( 1, 0 );
strictEqual( Reveal.getIndices().h, 1, 'h 1' ); assert.strictEqual( Reveal.getIndices().h, 1, 'h 1' );
strictEqual( Reveal.getIndices().v, 0, 'v 0' ); assert.strictEqual( Reveal.getIndices().v, 0, 'v 0' );
Reveal.slide( 1, 2 ); Reveal.slide( 1, 2 );
strictEqual( Reveal.getIndices().h, 1, 'h 1' ); assert.strictEqual( Reveal.getIndices().h, 1, 'h 1' );
strictEqual( Reveal.getIndices().v, 2, 'v 2' ); assert.strictEqual( Reveal.getIndices().v, 2, 'v 2' );
Reveal.slide( 0, 0 ); Reveal.slide( 0, 0 );
strictEqual( Reveal.getIndices().h, 0, 'h 0' ); assert.strictEqual( Reveal.getIndices().h, 0, 'h 0' );
strictEqual( Reveal.getIndices().v, 0, 'v 0' ); assert.strictEqual( Reveal.getIndices().v, 0, 'v 0' );
}); });
test( 'Reveal.getSlide', function() { QUnit.test( 'Reveal.getSlide', function( assert ) {
equal( Reveal.getSlide( 0 ), document.querySelector( '.reveal .slides>section:first-child' ), 'gets correct first slide' ); assert.equal( Reveal.getSlide( 0 ), document.querySelector( '.reveal .slides>section:first-child' ), 'gets correct first slide' );
equal( Reveal.getSlide( 1 ), document.querySelector( '.reveal .slides>section:nth-child(2)' ), 'no v index returns stack' ); assert.equal( Reveal.getSlide( 1 ), document.querySelector( '.reveal .slides>section:nth-child(2)' ), 'no v index returns stack' );
equal( Reveal.getSlide( 1, 0 ), document.querySelector( '.reveal .slides>section:nth-child(2)>section:nth-child(1)' ), 'v index 0 returns first vertical child' ); assert.equal( Reveal.getSlide( 1, 0 ), document.querySelector( '.reveal .slides>section:nth-child(2)>section:nth-child(1)' ), 'v index 0 returns first vertical child' );
equal( Reveal.getSlide( 1, 1 ), document.querySelector( '.reveal .slides>section:nth-child(2)>section:nth-child(2)' ), 'v index 1 returns second vertical child' ); assert.equal( Reveal.getSlide( 1, 1 ), document.querySelector( '.reveal .slides>section:nth-child(2)>section:nth-child(2)' ), 'v index 1 returns second vertical child' );
strictEqual( Reveal.getSlide( 100 ), undefined, 'undefined when out of horizontal bounds' ); assert.strictEqual( Reveal.getSlide( 100 ), undefined, 'undefined when out of horizontal bounds' );
strictEqual( Reveal.getSlide( 1, 100 ), undefined, 'undefined when out of vertical bounds' ); assert.strictEqual( Reveal.getSlide( 1, 100 ), undefined, 'undefined when out of vertical bounds' );
}); });
test( 'Reveal.getSlideBackground', function() { QUnit.test( 'Reveal.getSlideBackground', function( assert ) {
equal( Reveal.getSlideBackground( 0 ), document.querySelector( '.reveal .backgrounds>.slide-background:first-child' ), 'gets correct first background' ); assert.equal( Reveal.getSlideBackground( 0 ), document.querySelector( '.reveal .backgrounds>.slide-background:first-child' ), 'gets correct first background' );
equal( Reveal.getSlideBackground( 1 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2)' ), 'no v index returns stack' ); assert.equal( Reveal.getSlideBackground( 1 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2)' ), 'no v index returns stack' );
equal( Reveal.getSlideBackground( 1, 0 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2) .slide-background:nth-child(1)' ), 'v index 0 returns first vertical child' ); assert.equal( Reveal.getSlideBackground( 1, 0 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2) .slide-background:nth-child(2)' ), 'v index 0 returns first vertical child' );
equal( Reveal.getSlideBackground( 1, 1 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2) .slide-background:nth-child(2)' ), 'v index 1 returns second vertical child' ); assert.equal( Reveal.getSlideBackground( 1, 1 ), document.querySelector( '.reveal .backgrounds>.slide-background:nth-child(2) .slide-background:nth-child(3)' ), 'v index 1 returns second vertical child' );
strictEqual( Reveal.getSlideBackground( 100 ), undefined, 'undefined when out of horizontal bounds' ); assert.strictEqual( Reveal.getSlideBackground( 100 ), undefined, 'undefined when out of horizontal bounds' );
strictEqual( Reveal.getSlideBackground( 1, 100 ), undefined, 'undefined when out of vertical bounds' ); assert.strictEqual( Reveal.getSlideBackground( 1, 100 ), undefined, 'undefined when out of vertical bounds' );
}); });
test( 'Reveal.getSlideNotes', function() { QUnit.test( 'Reveal.getSlideNotes', function( assert ) {
Reveal.slide( 0, 0 ); Reveal.slide( 0, 0 );
ok( Reveal.getSlideNotes() === 'speaker notes 1', 'works with <aside class="notes">' ); assert.ok( Reveal.getSlideNotes() === 'speaker notes 1', 'works with <aside class="notes">' );
Reveal.slide( 1, 0 ); Reveal.slide( 1, 0 );
ok( Reveal.getSlideNotes() === 'speaker notes 2', 'works with <section data-notes="">' ); assert.ok( Reveal.getSlideNotes() === 'speaker notes 2', 'works with <section data-notes="">' );
}); });
test( 'Reveal.getPreviousSlide/getCurrentSlide', function() { QUnit.test( 'Reveal.getPreviousSlide/getCurrentSlide', function( assert ) {
Reveal.slide( 0, 0 ); Reveal.slide( 0, 0 );
Reveal.slide( 1, 0 ); Reveal.slide( 1, 0 );
var firstSlide = document.querySelector( '.reveal .slides>section:first-child' ); var firstSlide = document.querySelector( '.reveal .slides>section:first-child' );
var secondSlide = document.querySelector( '.reveal .slides>section:nth-child(2)>section' ); var secondSlide = document.querySelector( '.reveal .slides>section:nth-child(2)>section' );
equal( Reveal.getPreviousSlide(), firstSlide, 'previous is slide #0' ); assert.equal( Reveal.getPreviousSlide(), firstSlide, 'previous is slide #0' );
equal( Reveal.getCurrentSlide(), secondSlide, 'current is slide #1' ); assert.equal( Reveal.getCurrentSlide(), secondSlide, 'current is slide #1' );
}); });
test( 'Reveal.getProgress', function() { QUnit.test( 'Reveal.getProgress', function( assert ) {
Reveal.slide( 0, 0 ); Reveal.slide( 0, 0 );
strictEqual( Reveal.getProgress(), 0, 'progress is 0 on first slide' ); assert.strictEqual( Reveal.getProgress(), 0, 'progress is 0 on first slide' );
var lastSlideIndex = document.querySelectorAll( '.reveal .slides>section' ).length - 1; var lastSlideIndex = document.querySelectorAll( '.reveal .slides>section' ).length - 1;
Reveal.slide( lastSlideIndex, 0 ); Reveal.slide( lastSlideIndex, 0 );
strictEqual( Reveal.getProgress(), 1, 'progress is 1 on last slide' ); assert.strictEqual( Reveal.getProgress(), 1, 'progress is 1 on last slide' );
}); });
test( 'Reveal.getScale', function() { QUnit.test( 'Reveal.getScale', function( assert ) {
ok( typeof Reveal.getScale() === 'number', 'has scale' ); assert.ok( typeof Reveal.getScale() === 'number', 'has scale' );
}); });
test( 'Reveal.getConfig', function() { QUnit.test( 'Reveal.getConfig', function( assert ) {
ok( typeof Reveal.getConfig() === 'object', 'has config' ); assert.ok( typeof Reveal.getConfig() === 'object', 'has config' );
}); });
test( 'Reveal.configure', function() { QUnit.test( 'Reveal.configure', function( assert ) {
strictEqual( Reveal.getConfig().loop, false, '"loop" is false to start with' ); assert.strictEqual( Reveal.getConfig().loop, false, '"loop" is false to start with' );
Reveal.configure({ loop: true }); Reveal.configure({ loop: true });
strictEqual( Reveal.getConfig().loop, true, '"loop" has changed to true' ); assert.strictEqual( Reveal.getConfig().loop, true, '"loop" has changed to true' );
Reveal.configure({ loop: false, customTestValue: 1 }); Reveal.configure({ loop: false, customTestValue: 1 });
strictEqual( Reveal.getConfig().customTestValue, 1, 'supports custom values' ); assert.strictEqual( Reveal.getConfig().customTestValue, 1, 'supports custom values' );
}); });
test( 'Reveal.availableRoutes', function() { QUnit.test( 'Reveal.availableRoutes', function( assert ) {
Reveal.slide( 0, 0 ); Reveal.slide( 0, 0 );
deepEqual( Reveal.availableRoutes(), { left: false, up: false, down: false, right: true }, 'correct for first slide' ); assert.deepEqual( Reveal.availableRoutes(), { left: false, up: false, down: false, right: true }, 'correct for first slide' );
Reveal.slide( 1, 0 ); Reveal.slide( 1, 0 );
deepEqual( Reveal.availableRoutes(), { left: true, up: false, down: true, right: true }, 'correct for vertical slide' ); assert.deepEqual( Reveal.availableRoutes(), { left: true, up: false, down: true, right: true }, 'correct for vertical slide' );
}); });
test( 'Reveal.next', function() { QUnit.test( 'Reveal.next', function( assert ) {
Reveal.slide( 0, 0 ); Reveal.slide( 0, 0 );
// Step through vertical child slides // Step through vertical child slides
Reveal.next(); Reveal.next();
deepEqual( Reveal.getIndices(), { h: 1, v: 0, f: undefined } ); assert.deepEqual( Reveal.getIndices(), { h: 1, v: 0, f: undefined } );
Reveal.next(); Reveal.next();
deepEqual( Reveal.getIndices(), { h: 1, v: 1, f: undefined } ); assert.deepEqual( Reveal.getIndices(), { h: 1, v: 1, f: undefined } );
Reveal.next(); Reveal.next();
deepEqual( Reveal.getIndices(), { h: 1, v: 2, f: undefined } ); assert.deepEqual( Reveal.getIndices(), { h: 1, v: 2, f: undefined } );
// Step through fragments // Step through fragments
Reveal.next(); Reveal.next();
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: -1 } ); assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: -1 } );
Reveal.next(); Reveal.next();
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 } ); assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 } );
Reveal.next(); Reveal.next();
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 } ); assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 } );
Reveal.next(); Reveal.next();
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 } ); assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 } );
}); });
test( 'Reveal.next at end', function() { QUnit.test( 'Reveal.next at end', function( assert ) {
Reveal.slide( 3 ); Reveal.slide( 3 );
// We're at the end, this should have no effect // We're at the end, this should have no effect
Reveal.next(); Reveal.next();
deepEqual( Reveal.getIndices(), { h: 3, v: 0, f: undefined } ); assert.deepEqual( Reveal.getIndices(), { h: 3, v: 0, f: undefined } );
Reveal.next(); Reveal.next();
deepEqual( Reveal.getIndices(), { h: 3, v: 0, f: undefined } ); assert.deepEqual( Reveal.getIndices(), { h: 3, v: 0, f: undefined } );
}); });
@ -238,121 +236,144 @@ Reveal.addEventListener( 'ready', function() {
QUnit.module( 'Fragments' ); QUnit.module( 'Fragments' );
test( 'Sliding to fragments', function() { QUnit.test( 'Sliding to fragments', function( assert ) {
Reveal.slide( 2, 0, -1 ); Reveal.slide( 2, 0, -1 );
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: -1 }, 'Reveal.slide( 2, 0, -1 )' ); assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: -1 }, 'Reveal.slide( 2, 0, -1 )' );
Reveal.slide( 2, 0, 0 ); Reveal.slide( 2, 0, 0 );
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'Reveal.slide( 2, 0, 0 )' ); assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'Reveal.slide( 2, 0, 0 )' );
Reveal.slide( 2, 0, 2 ); Reveal.slide( 2, 0, 2 );
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 }, 'Reveal.slide( 2, 0, 2 )' ); assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 }, 'Reveal.slide( 2, 0, 2 )' );
Reveal.slide( 2, 0, 1 ); Reveal.slide( 2, 0, 1 );
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'Reveal.slide( 2, 0, 1 )' ); assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'Reveal.slide( 2, 0, 1 )' );
}); });
test( 'Hiding all fragments', function() { QUnit.test( 'data-fragment is set on slide <section>', function( assert ) {
Reveal.slide( 2, 0, -1 );
assert.deepEqual( Reveal.getCurrentSlide().getAttribute( 'data-fragment' ), '-1' );
Reveal.slide( 2, 0, 2 );
assert.deepEqual( Reveal.getCurrentSlide().getAttribute( 'data-fragment' ), '2' );
Reveal.slide( 2, 0, 0 );
assert.deepEqual( Reveal.getCurrentSlide().getAttribute( 'data-fragment' ), '0' );
var fragmentSlide = Reveal.getCurrentSlide();
Reveal.slide( 3, 0 );
assert.deepEqual( fragmentSlide.getAttribute( 'data-fragment' ), '0', 'data-fragment persists when jumping to another slide' );
});
QUnit.test( 'Hiding all fragments', function( assert ) {
var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' ); var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' );
Reveal.slide( 2, 0, 0 ); Reveal.slide( 2, 0, 0 );
strictEqual( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 1, 'one fragment visible when index is 0' ); assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 1, 'one fragment visible when index is 0' );
Reveal.slide( 2, 0, -1 ); Reveal.slide( 2, 0, -1 );
strictEqual( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 0, 'no fragments visible when index is -1' ); assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 0, 'no fragments visible when index is -1' );
}); });
test( 'Current fragment', function() { QUnit.test( 'Current fragment', function( assert ) {
var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' ); var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' );
var lastFragmentIndex = [].slice.call( fragmentSlide.querySelectorAll( '.fragment' ) ).pop().getAttribute( 'data-fragment-index' );
Reveal.slide( 2, 0 ); Reveal.slide( 2, 0 );
strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment at index -1' ); assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment at index -1' );
Reveal.slide( 2, 0, 0 ); Reveal.slide( 2, 0, 0 );
strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 1, 'one current fragment at index 0' ); assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 1, 'one current fragment at index 0' );
Reveal.slide( 1, 0, 0 ); Reveal.slide( 1, 0, 0 );
strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment when navigating to previous slide' ); assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment when navigating to previous slide' );
Reveal.slide( 3, 0, 0 ); Reveal.slide( 3, 0, 0 );
strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment when navigating to next slide' ); assert.strictEqual( fragmentSlide.querySelectorAll( '.fragment.current-fragment' ).length, 0, 'no current fragment when navigating to next slide' );
Reveal.slide( 2, 1, -1 );
Reveal.prev();
assert.strictEqual( fragmentSlide.querySelector( '.fragment.current-fragment' ).getAttribute( 'data-fragment-index' ), lastFragmentIndex, 'last fragment is current fragment when returning from future slide' );
}); });
test( 'Stepping through fragments', function() { QUnit.test( 'Stepping through fragments', function( assert ) {
Reveal.slide( 2, 0, -1 ); Reveal.slide( 2, 0, -1 );
// forwards: // forwards:
Reveal.next(); Reveal.next();
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'next() goes to next fragment' ); assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'next() goes to next fragment' );
Reveal.right(); Reveal.right();
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'right() goes to next fragment' ); assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'right() goes to next fragment' );
Reveal.down(); Reveal.down();
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 }, 'down() goes to next fragment' ); assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 }, 'down() goes to next fragment' );
Reveal.down(); // moves to f #3 Reveal.down(); // moves to f #3
// backwards: // backwards:
Reveal.prev(); Reveal.prev();
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 }, 'prev() goes to prev fragment' ); assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 2 }, 'prev() goes to prev fragment' );
Reveal.left(); Reveal.left();
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'left() goes to prev fragment' ); assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 1 }, 'left() goes to prev fragment' );
Reveal.up(); Reveal.up();
deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'up() goes to prev fragment' ); assert.deepEqual( Reveal.getIndices(), { h: 2, v: 0, f: 0 }, 'up() goes to prev fragment' );
}); });
test( 'Stepping past fragments', function() { QUnit.test( 'Stepping past fragments', function( assert ) {
var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' ); var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' );
Reveal.slide( 0, 0, 0 ); Reveal.slide( 0, 0, 0 );
equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 0, 'no fragments visible when on previous slide' ); assert.equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 0, 'no fragments visible when on previous slide' );
Reveal.slide( 3, 0, 0 ); Reveal.slide( 3, 0, 0 );
equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 3, 'all fragments visible when on future slide' ); assert.equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 3, 'all fragments visible when on future slide' );
}); });
test( 'Fragment indices', function() { QUnit.test( 'Fragment indices', function( assert ) {
var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(2)' ); var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(2)' );
Reveal.slide( 3, 0, 0 ); Reveal.slide( 3, 0, 0 );
equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 2, 'both fragments of same index are shown' ); assert.equal( fragmentSlide.querySelectorAll( '.fragment.visible' ).length, 2, 'both fragments of same index are shown' );
// This slide has three fragments, first one is index 0, second and third have index 1 // This slide has three fragments, first one is index 0, second and third have index 1
Reveal.slide( 2, 2, 0 ); Reveal.slide( 2, 2, 0 );
equal( Reveal.getIndices().f, 0, 'returns correct index for first fragment' ); assert.equal( Reveal.getIndices().f, 0, 'returns correct index for first fragment' );
Reveal.slide( 2, 2, 1 ); Reveal.slide( 2, 2, 1 );
equal( Reveal.getIndices().f, 1, 'returns correct index for two fragments with same index' ); assert.equal( Reveal.getIndices().f, 1, 'returns correct index for two fragments with same index' );
}); });
test( 'Index generation', function() { QUnit.test( 'Index generation', function( assert ) {
var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' ); var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(1)' );
// These have no indices defined to start with // These have no indices defined to start with
equal( fragmentSlide.querySelectorAll( '.fragment' )[0].getAttribute( 'data-fragment-index' ), '0' ); assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[0].getAttribute( 'data-fragment-index' ), '0' );
equal( fragmentSlide.querySelectorAll( '.fragment' )[1].getAttribute( 'data-fragment-index' ), '1' ); assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[1].getAttribute( 'data-fragment-index' ), '1' );
equal( fragmentSlide.querySelectorAll( '.fragment' )[2].getAttribute( 'data-fragment-index' ), '2' ); assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[2].getAttribute( 'data-fragment-index' ), '2' );
}); });
test( 'Index normalization', function() { QUnit.test( 'Index normalization', function( assert ) {
var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(3)' ); var fragmentSlide = document.querySelector( '#fragment-slides>section:nth-child(3)' );
// These start out as 1-4-4 and should normalize to 0-1-1 // These start out as 1-4-4 and should normalize to 0-1-1
equal( fragmentSlide.querySelectorAll( '.fragment' )[0].getAttribute( 'data-fragment-index' ), '0' ); assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[0].getAttribute( 'data-fragment-index' ), '0' );
equal( fragmentSlide.querySelectorAll( '.fragment' )[1].getAttribute( 'data-fragment-index' ), '1' ); assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[1].getAttribute( 'data-fragment-index' ), '1' );
equal( fragmentSlide.querySelectorAll( '.fragment' )[2].getAttribute( 'data-fragment-index' ), '1' ); assert.equal( fragmentSlide.querySelectorAll( '.fragment' )[2].getAttribute( 'data-fragment-index' ), '1' );
}); });
asyncTest( 'fragmentshown event', function() { QUnit.test( 'fragmentshown event', function( assert ) {
expect( 2 ); assert.expect( 2 );
var done = assert.async( 2 );
var _onEvent = function( event ) { var _onEvent = function( event ) {
ok( true, 'event fired' ); assert.ok( true, 'event fired' );
done();
} }
Reveal.addEventListener( 'fragmentshown', _onEvent ); Reveal.addEventListener( 'fragmentshown', _onEvent );
@ -364,16 +385,16 @@ Reveal.addEventListener( 'ready', function() {
Reveal.next(); Reveal.next();
Reveal.prev(); // shouldn't fire fragmentshown Reveal.prev(); // shouldn't fire fragmentshown
start();
Reveal.removeEventListener( 'fragmentshown', _onEvent ); Reveal.removeEventListener( 'fragmentshown', _onEvent );
}); });
asyncTest( 'fragmenthidden event', function() { QUnit.test( 'fragmenthidden event', function( assert ) {
expect( 2 ); assert.expect( 2 );
var done = assert.async( 2 );
var _onEvent = function( event ) { var _onEvent = function( event ) {
ok( true, 'event fired' ); assert.ok( true, 'event fired' );
done();
} }
Reveal.addEventListener( 'fragmenthidden', _onEvent ); Reveal.addEventListener( 'fragmenthidden', _onEvent );
@ -384,8 +405,6 @@ Reveal.addEventListener( 'ready', function() {
Reveal.prev(); Reveal.prev();
Reveal.next(); // shouldn't fire fragmenthidden Reveal.next(); // shouldn't fire fragmenthidden
start();
Reveal.removeEventListener( 'fragmenthidden', _onEvent ); Reveal.removeEventListener( 'fragmenthidden', _onEvent );
}); });
@ -395,50 +414,52 @@ Reveal.addEventListener( 'ready', function() {
QUnit.module( 'Auto Sliding' ); QUnit.module( 'Auto Sliding' );
test( 'Reveal.isAutoSliding', function() { QUnit.test( 'Reveal.isAutoSliding', function( assert ) {
strictEqual( Reveal.isAutoSliding(), false, 'false by default' ); assert.strictEqual( Reveal.isAutoSliding(), false, 'false by default' );
Reveal.configure({ autoSlide: 10000 }); Reveal.configure({ autoSlide: 10000 });
strictEqual( Reveal.isAutoSliding(), true, 'true after starting' ); assert.strictEqual( Reveal.isAutoSliding(), true, 'true after starting' );
Reveal.configure({ autoSlide: 0 }); Reveal.configure({ autoSlide: 0 });
strictEqual( Reveal.isAutoSliding(), false, 'false after setting to 0' ); assert.strictEqual( Reveal.isAutoSliding(), false, 'false after setting to 0' );
}); });
test( 'Reveal.toggleAutoSlide', function() { QUnit.test( 'Reveal.toggleAutoSlide', function( assert ) {
Reveal.configure({ autoSlide: 10000 }); Reveal.configure({ autoSlide: 10000 });
Reveal.toggleAutoSlide(); Reveal.toggleAutoSlide();
strictEqual( Reveal.isAutoSliding(), false, 'false after first toggle' ); assert.strictEqual( Reveal.isAutoSliding(), false, 'false after first toggle' );
Reveal.toggleAutoSlide(); Reveal.toggleAutoSlide();
strictEqual( Reveal.isAutoSliding(), true, 'true after second toggle' ); assert.strictEqual( Reveal.isAutoSliding(), true, 'true after second toggle' );
Reveal.configure({ autoSlide: 0 }); Reveal.configure({ autoSlide: 0 });
}); });
asyncTest( 'autoslidepaused', function() { QUnit.test( 'autoslidepaused', function( assert ) {
expect( 1 ); assert.expect( 1 );
var done = assert.async();
var _onEvent = function( event ) { var _onEvent = function( event ) {
ok( true, 'event fired' ); assert.ok( true, 'event fired' );
done();
} }
Reveal.addEventListener( 'autoslidepaused', _onEvent ); Reveal.addEventListener( 'autoslidepaused', _onEvent );
Reveal.configure({ autoSlide: 10000 }); Reveal.configure({ autoSlide: 10000 });
Reveal.toggleAutoSlide(); Reveal.toggleAutoSlide();
start();
// cleanup // cleanup
Reveal.configure({ autoSlide: 0 }); Reveal.configure({ autoSlide: 0 });
Reveal.removeEventListener( 'autoslidepaused', _onEvent ); Reveal.removeEventListener( 'autoslidepaused', _onEvent );
}); });
asyncTest( 'autoslideresumed', function() { QUnit.test( 'autoslideresumed', function( assert ) {
expect( 1 ); assert.expect( 1 );
var done = assert.async();
var _onEvent = function( event ) { var _onEvent = function( event ) {
ok( true, 'event fired' ); assert.ok( true, 'event fired' );
done();
} }
Reveal.addEventListener( 'autoslideresumed', _onEvent ); Reveal.addEventListener( 'autoslideresumed', _onEvent );
@ -446,8 +467,6 @@ Reveal.addEventListener( 'ready', function() {
Reveal.toggleAutoSlide(); Reveal.toggleAutoSlide();
Reveal.toggleAutoSlide(); Reveal.toggleAutoSlide();
start();
// cleanup // cleanup
Reveal.configure({ autoSlide: 0 }); Reveal.configure({ autoSlide: 0 });
Reveal.removeEventListener( 'autoslideresumed', _onEvent ); Reveal.removeEventListener( 'autoslideresumed', _onEvent );
@ -459,36 +478,36 @@ Reveal.addEventListener( 'ready', function() {
QUnit.module( 'Configuration' ); QUnit.module( 'Configuration' );
test( 'Controls', function() { QUnit.test( 'Controls', function( assert ) {
var controlsElement = document.querySelector( '.reveal>.controls' ); var controlsElement = document.querySelector( '.reveal>.controls' );
Reveal.configure({ controls: false }); Reveal.configure({ controls: false });
equal( controlsElement.style.display, 'none', 'controls are hidden' ); assert.equal( controlsElement.style.display, 'none', 'controls are hidden' );
Reveal.configure({ controls: true }); Reveal.configure({ controls: true });
equal( controlsElement.style.display, 'block', 'controls are visible' ); assert.equal( controlsElement.style.display, 'block', 'controls are visible' );
}); });
test( 'Progress', function() { QUnit.test( 'Progress', function( assert ) {
var progressElement = document.querySelector( '.reveal>.progress' ); var progressElement = document.querySelector( '.reveal>.progress' );
Reveal.configure({ progress: false }); Reveal.configure({ progress: false });
equal( progressElement.style.display, 'none', 'progress are hidden' ); assert.equal( progressElement.style.display, 'none', 'progress are hidden' );
Reveal.configure({ progress: true }); Reveal.configure({ progress: true });
equal( progressElement.style.display, 'block', 'progress are visible' ); assert.equal( progressElement.style.display, 'block', 'progress are visible' );
}); });
test( 'Loop', function() { QUnit.test( 'Loop', function( assert ) {
Reveal.configure({ loop: true }); Reveal.configure({ loop: true });
Reveal.slide( 0, 0 ); Reveal.slide( 0, 0 );
Reveal.left(); Reveal.left();
notEqual( Reveal.getIndices().h, 0, 'looped from start to end' ); assert.notEqual( Reveal.getIndices().h, 0, 'looped from start to end' );
Reveal.right(); Reveal.right();
equal( Reveal.getIndices().h, 0, 'looped from end to start' ); assert.equal( Reveal.getIndices().h, 0, 'looped from end to start' );
Reveal.configure({ loop: false }); Reveal.configure({ loop: false });
}); });
@ -499,34 +518,34 @@ Reveal.addEventListener( 'ready', function() {
QUnit.module( 'Lazy-Loading' ); QUnit.module( 'Lazy-Loading' );
test( 'img with data-src', function() { QUnit.test( 'img with data-src', function( assert ) {
strictEqual( document.querySelectorAll( '.reveal section img[src]' ).length, 1, 'Image source has been set' ); assert.strictEqual( document.querySelectorAll( '.reveal section img[src]' ).length, 1, 'Image source has been set' );
}); });
test( 'video with data-src', function() { QUnit.test( 'video with data-src', function( assert ) {
strictEqual( document.querySelectorAll( '.reveal section video[src]' ).length, 1, 'Video source has been set' ); assert.strictEqual( document.querySelectorAll( '.reveal section video[src]' ).length, 1, 'Video source has been set' );
}); });
test( 'audio with data-src', function() { QUnit.test( 'audio with data-src', function( assert ) {
strictEqual( document.querySelectorAll( '.reveal section audio[src]' ).length, 1, 'Audio source has been set' ); assert.strictEqual( document.querySelectorAll( '.reveal section audio[src]' ).length, 1, 'Audio source has been set' );
}); });
test( 'iframe with data-src', function() { QUnit.test( 'iframe with data-src', function( assert ) {
Reveal.slide( 0, 0 ); Reveal.slide( 0, 0 );
strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 0, 'Iframe source is not set' ); assert.strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 0, 'Iframe source is not set' );
Reveal.slide( 2, 1 ); Reveal.slide( 2, 1 );
strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 1, 'Iframe source is set' ); assert.strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 1, 'Iframe source is set' );
Reveal.slide( 2, 2 ); Reveal.slide( 2, 2 );
strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 0, 'Iframe source is not set' ); assert.strictEqual( document.querySelectorAll( '.reveal section iframe[src]' ).length, 0, 'Iframe source is not set' );
}); });
test( 'background images', function() { QUnit.test( 'background images', function( assert ) {
var imageSource1 = Reveal.getSlide( 0 ).getAttribute( 'data-background-image' ); var imageSource1 = Reveal.getSlide( 0 ).getAttribute( 'data-background-image' );
var imageSource2 = Reveal.getSlide( 1, 0 ).getAttribute( 'data-background' ); var imageSource2 = Reveal.getSlide( 1, 0 ).getAttribute( 'data-background' );
// check that the images are applied to the background elements // check that the images are applied to the background elements
ok( Reveal.getSlideBackground( 0 ).style.backgroundImage.indexOf( imageSource1 ) !== -1, 'data-background-image worked' ); assert.ok( Reveal.getSlideBackground( 0 ).querySelector( '.slide-background-content' ).style.backgroundImage.indexOf( imageSource1 ) !== -1, 'data-background-image worked' );
ok( Reveal.getSlideBackground( 1, 0 ).style.backgroundImage.indexOf( imageSource2 ) !== -1, 'data-background worked' ); assert.ok( Reveal.getSlideBackground( 1, 0 ).querySelector( '.slide-background-content' ).style.backgroundImage.indexOf( imageSource2 ) !== -1, 'data-background worked' );
}); });
@ -535,11 +554,13 @@ Reveal.addEventListener( 'ready', function() {
QUnit.module( 'Events' ); QUnit.module( 'Events' );
asyncTest( 'slidechanged', function() { QUnit.test( 'slidechanged', function( assert ) {
expect( 3 ); assert.expect( 3 );
var done = assert.async( 3 );
var _onEvent = function( event ) { var _onEvent = function( event ) {
ok( true, 'event fired' ); assert.ok( true, 'event fired' );
done();
} }
Reveal.addEventListener( 'slidechanged', _onEvent ); Reveal.addEventListener( 'slidechanged', _onEvent );
@ -550,17 +571,17 @@ Reveal.addEventListener( 'ready', function() {
Reveal.slide( 3, 0 ); // should trigger Reveal.slide( 3, 0 ); // should trigger
Reveal.next(); // should do nothing Reveal.next(); // should do nothing
start();
Reveal.removeEventListener( 'slidechanged', _onEvent ); Reveal.removeEventListener( 'slidechanged', _onEvent );
}); });
asyncTest( 'paused', function() { QUnit.test( 'paused', function( assert ) {
expect( 1 ); assert.expect( 1 );
var done = assert.async();
var _onEvent = function( event ) { var _onEvent = function( event ) {
ok( true, 'event fired' ); assert.ok( true, 'event fired' );
done();
} }
Reveal.addEventListener( 'paused', _onEvent ); Reveal.addEventListener( 'paused', _onEvent );
@ -568,16 +589,16 @@ Reveal.addEventListener( 'ready', function() {
Reveal.togglePause(); Reveal.togglePause();
Reveal.togglePause(); Reveal.togglePause();
start();
Reveal.removeEventListener( 'paused', _onEvent ); Reveal.removeEventListener( 'paused', _onEvent );
}); });
asyncTest( 'resumed', function() { QUnit.test( 'resumed', function( assert ) {
expect( 1 ); assert.expect( 1 );
var done = assert.async();
var _onEvent = function( event ) { var _onEvent = function( event ) {
ok( true, 'event fired' ); assert.ok( true, 'event fired' );
done();
} }
Reveal.addEventListener( 'resumed', _onEvent ); Reveal.addEventListener( 'resumed', _onEvent );
@ -585,13 +606,9 @@ Reveal.addEventListener( 'ready', function() {
Reveal.togglePause(); Reveal.togglePause();
Reveal.togglePause(); Reveal.togglePause();
start();
Reveal.removeEventListener( 'resumed', _onEvent ); Reveal.removeEventListener( 'resumed', _onEvent );
}); });
} ); } );
Reveal.initialize(); Reveal.initialize();