Shivan
/
tubestats-presentation
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'dev' into hash-problem

This commit is contained in:
Hakim El Hattab 2019-03-21 09:03:27 +01:00 committed by GitHub
parent b4c6c92033 01874c6e70
commit b5fe0f8126
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
61 changed files with 2050 additions and 820 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.travis.yml
View File

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

31
Gruntfile.js → Gruntfile.ts
View File

@ -1,7 +1,11 @@
/* global module:false */ /* global module:false */
module.exports = function(grunt) { module.exports = function(grunt) {
var port = grunt.option('port') || 8000; const sass = require('node-sass');
var root = grunt.option('root') || '.';
require('load-grunt-tasks')(grunt);
let port = grunt.option('port') || 8000;
let root = grunt.option('root') || '.';
if (!Array.isArray(root)) root = [root]; if (!Array.isArray(root)) root = [root];
@ -15,7 +19,7 @@ module.exports = function(grunt) {
' * http://revealjs.com\n' + ' * http://revealjs.com\n' +
' * MIT licensed\n' + ' * MIT licensed\n' +
' *\n' + ' *\n' +
' * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n' + ' * Copyright (C) 2019 Hakim El Hattab, http://hakim.se\n' +
' */' ' */'
}, },
@ -35,6 +39,10 @@ module.exports = function(grunt) {
}, },
sass: { sass: {
options: {
implementation: sass,
sourceMap: false
},
core: { core: {
src: 'css/reveal.scss', src: 'css/reveal.scss',
dest: 'css/reveal.css' dest: 'css/reveal.css'
@ -145,27 +153,10 @@ module.exports = function(grunt) {
options: { options: {
livereload: true livereload: true
} }
},
retire: {
js: [ 'js/reveal.js', 'lib/js/*.js', 'plugin/**/*.js' ],
node: [ '.' ]
} }
}); });
// Dependencies
grunt.loadNpmTasks( 'grunt-contrib-connect' );
grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
grunt.loadNpmTasks( 'grunt-contrib-jshint' );
grunt.loadNpmTasks( 'grunt-contrib-qunit' );
grunt.loadNpmTasks( 'grunt-contrib-uglify' );
grunt.loadNpmTasks( 'grunt-contrib-watch' );
grunt.loadNpmTasks( 'grunt-autoprefixer' );
grunt.loadNpmTasks( 'grunt-retire' );
grunt.loadNpmTasks( 'grunt-sass' );
grunt.loadNpmTasks( 'grunt-zip' );
// Default task // Default task
grunt.registerTask( 'default', [ 'css', 'js' ] ); grunt.registerTask( 'default', [ 'css', 'js' ] );

2
LICENSE
View File

@ -1,4 +1,4 @@
Copyright (C) 2018 Hakim El Hattab, http://hakim.se, and reveal.js contributors Copyright (C) 2019 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

84
README.md
View File

@ -23,6 +23,7 @@ reveal.js comes with a broad range of features including [nested slides](https:/
- [Ready Event](#ready-event) - [Ready Event](#ready-event)
- [Auto-sliding](#auto-sliding) - [Auto-sliding](#auto-sliding)
- [Keyboard Bindings](#keyboard-bindings) - [Keyboard Bindings](#keyboard-bindings)
- [Vertical Slide Navigation](#vertical-slide-navigation)
- [Touch Navigation](#touch-navigation) - [Touch Navigation](#touch-navigation)
- [Lazy Loading](#lazy-loading) - [Lazy Loading](#lazy-loading)
- [API](#api) - [API](#api)
@ -41,6 +42,7 @@ reveal.js comes with a broad range of features including [nested slides](https:/
- [Fullscreen mode](#fullscreen-mode) - [Fullscreen mode](#fullscreen-mode)
- [Embedded media](#embedded-media) - [Embedded media](#embedded-media)
- [Stretching elements](#stretching-elements) - [Stretching elements](#stretching-elements)
- [Resize Event](#resize-event)
- [postMessage API](#postmessage-api) - [postMessage API](#postmessage-api)
- [PDF Export](#pdf-export) - [PDF Export](#pdf-export)
- [Theming](#theming) - [Theming](#theming)
@ -225,7 +227,7 @@ We use [marked](https://github.com/chjj/marked) to parse Markdown. To customise
```javascript ```javascript
Reveal.initialize({ Reveal.initialize({
// Options which are passed into marked // Options which are passed into marked
// See https://github.com/chjj/marked#options-1 // See https://marked.js.org/#/USING_ADVANCED.md#options
markdown: { markdown: {
smartypants: true smartypants: true
} }
@ -259,7 +261,11 @@ Reveal.initialize({
// Display the page number of the current slide // Display the page number of the current slide
slideNumber: false, slideNumber: false,
// Push each slide change to the browser history // Add the current slide number to the URL hash so that reloading the
// page/copying the URL will return you to the same slide
hash: false,
// Push each slide change to the browser history. Implies `hash: true`
history: false, history: false,
// Enable keyboard shortcuts for navigation // Enable keyboard shortcuts for navigation
@ -280,6 +286,9 @@ Reveal.initialize({
// Change the presentation direction to be RTL // Change the presentation direction to be RTL
rtl: false, rtl: false,
// See https://github.com/hakimel/reveal.js/#navigation-mode
navigationMode: 'default',
// Randomizes the order of slides each time the presentation loads // Randomizes the order of slides each time the presentation loads
shuffle: false, shuffle: false,
@ -326,6 +335,12 @@ Reveal.initialize({
// Enable slide navigation via mouse wheel // Enable slide navigation via mouse wheel
mouseWheel: false, mouseWheel: false,
// Hide cursor if inactive
hideInactiveCursor: true,
// Time before the cursor is hidden (in ms)
hideCursorTime: 5000,
// Hides the address bar on mobile devices // Hides the address bar on mobile devices
hideAddressBar: true, hideAddressBar: true,
@ -423,9 +438,6 @@ Reveal.js doesn't _rely_ on any third party scripts to work but a few optional l
```javascript ```javascript
Reveal.initialize({ Reveal.initialize({
dependencies: [ dependencies: [
// Cross-browser shim that fully implements classList - https://github.com/eligrey/classList.js/
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
// Interpret Markdown in <section> elements // Interpret Markdown in <section> elements
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { 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/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
@ -451,8 +463,6 @@ You can add your own extensions using the same syntax. The following properties
- **callback**: [optional] Function to execute when the script has loaded - **callback**: [optional] Function to execute when the script has loaded
- **condition**: [optional] Function which must return true for the script to be loaded - **condition**: [optional] Function which must return true for the script to be loaded
To load these dependencies, reveal.js requires [head.js](http://headjs.com/) *(a script loading library)* to be loaded before reveal.js.
### Ready Event ### Ready Event
A `ready` event is fired when reveal.js has loaded all non-async dependencies and is ready to start navigating. To check if reveal.js is already 'ready' you can call `Reveal.isReady()`. A `ready` event is fired when reveal.js has loaded all non-async dependencies and is ready to start navigating. To check if reveal.js is already 'ready' you can call `Reveal.isReady()`.
@ -506,6 +516,21 @@ Reveal.configure({
}); });
``` ```
### Vertical Slide Navigation
Slides can be nested within other slides to create vertical stacks (see [Markup](#markup)). When presenting, you use the left/right arrows to step through the main (horizontal) slides. When you arrive at a vertical stack you can optionally press the up/down arrows to view the vertical slides or skip past them by pressing the right arrow. Here's an example showing a bird's-eye view of what this looks like in action:
<img src="https://static.slid.es/support/reveal.js-vertical-slides.gif" width="450">
#### Navigation Mode
You can finetune the reveal.js navigation behavior by using the `navigationMode` config option. Note that these options are only useful for presnetations that use a mix of horizontal and vertical slides. The following navigation modes are available:
| Value | Description |
| :--------------------------- | :---------- |
| default | Left/right arrow keys step between horizontal slides. Up/down arrow keys step between vertical slides. Space key steps through all slides (both horizontal and vertical). |
| linear | Removes the up/down arrows. Left/right arrows step through all slides (both horizontal and vertical). |
| grid | When this is enabled, stepping left/right from a vertical stack to an adjacent vertical stack will land you at the same vertical index.<br><br>Consider a deck with six slides ordered in two vertical stacks:<br>`1.1`&nbsp;&nbsp;&nbsp;&nbsp;`2.1`<br>`1.2`&nbsp;&nbsp;&nbsp;&nbsp;`2.2`<br>`1.3`&nbsp;&nbsp;&nbsp;&nbsp;`2.3`<br><br>If you're on slide 1.3 and navigate right, you will normally move from 1.3 -> 2.1. With navigationMode set to "grid" the same navigation takes you from 1.3 -> 2.3. |
### Touch Navigation ### Touch Navigation
You can swipe to navigate through a presentation on any touch-enabled device. Horizontal swipes change between horizontal slides, vertical swipes change between vertical slides. If you wish to disable this you can set the `touch` config option to false when initializing reveal.js. You can swipe to navigate through a presentation on any touch-enabled device. Horizontal swipes change between horizontal slides, vertical swipes change between vertical slides. If you wish to disable this you can set the `touch` config option to false when initializing reveal.js.
@ -516,7 +541,7 @@ If there's some part of your content that needs to remain accessible to touch ev
When working on presentation with a lot of media or iframe content it's important to load lazily. Lazy loading means that reveal.js will only load content for the few slides nearest to the current slide. The number of slides that are preloaded is determined by the `viewDistance` configuration option. When working on presentation with a lot of media or iframe content it's important to load lazily. Lazy loading means that reveal.js will only load content for the few slides nearest to the current slide. The number of slides that are preloaded is determined by the `viewDistance` configuration option.
To enable lazy loading all you need to do is change your `src` attributes to `data-src` as shown below. This is supported for image, video, audio and iframe elements. Lazy loaded iframes will also unload when the containing slide is no longer visible. To enable lazy loading all you need to do is change your `src` attributes to `data-src` as shown below. This is supported for image, video, audio and iframe elements.
```html ```html
<section> <section>
@ -529,6 +554,12 @@ To enable lazy loading all you need to do is change your `src` attributes to `da
</section> </section>
``` ```
#### Lazy Loading Iframes
Note that lazy loaded iframes ignore the `viewDistance` configuration and will only load when their containing slide becomes visible. Iframes are also unloaded as soon as the slide is hidden.
When we lazy load a video or audio element, reveal.js won't start playing that content until the slide becomes visible. However there is no way to control this for an iframe since that could contain any kind of content. That means if we loaded an iframe before the slide is visible on screen it could begin playing media and sound in the background.
### API ### API
The `Reveal` object exposes a JavaScript API for controlling navigation and reading state: The `Reveal` object exposes a JavaScript API for controlling navigation and reading state:
@ -585,6 +616,9 @@ Reveal.isLastSlide();
Reveal.isOverview(); Reveal.isOverview();
Reveal.isPaused(); Reveal.isPaused();
Reveal.isAutoSliding(); Reveal.isAutoSliding();
// Returns the top-level DOM element
getRevealElement(); // <div class="reveal">...</div>
``` ```
### Custom Key Bindings ### Custom Key Bindings
@ -863,7 +897,7 @@ Reveal.addEventListener( 'fragmenthidden', function( event ) {
### Code syntax highlighting ### Code syntax highlighting
By default, Reveal is configured with [highlight.js](https://highlightjs.org/) for code syntax highlighting. To enable syntax highlighting, you'll have to load the highlight plugin ([plugin/highlight/highlight.js](plugin/highlight/highlight.js)) and a highlight.js CSS theme (Reveal comes packaged with the zenburn theme: [lib/css/zenburn.css](lib/css/zenburn.css)). By default, Reveal is configured with [highlight.js](https://highlightjs.org/) for code syntax highlighting. To enable syntax highlighting, you'll have to load the highlight plugin ([plugin/highlight/highlight.js](plugin/highlight/highlight.js)) and a highlight.js CSS theme (Reveal comes packaged with the Monokai themes: [lib/css/monokai.css](lib/css/monokai.css)).
```javascript ```javascript
Reveal.initialize({ Reveal.initialize({
@ -903,6 +937,12 @@ Reveal.configure({ slideNumber: true });
// "c/t": flattened slide number / total slides // "c/t": flattened slide number / total slides
Reveal.configure({ slideNumber: 'c/t' }); Reveal.configure({ slideNumber: 'c/t' });
// You can provide a function to fully customize the number:
Reveal.configure({ slideNumber: function() {
// Ignore numbering of vertical slides
return [ Reveal.getIndices().h ];
}});
// Control which views the slide number displays on using the "showSlideNumber" value: // Control which views the slide number displays on using the "showSlideNumber" value:
// "all": show on all views (default) // "all": show on all views (default)
// "speaker": only show slide numbers on speaker notes view // "speaker": only show slide numbers on speaker notes view
@ -958,6 +998,16 @@ Limitations:
- Only direct descendants of a slide section can be stretched - Only direct descendants of a slide section can be stretched
- Only one descendant per slide section can be stretched - Only one descendant per slide section can be stretched
### Resize Event
When reveal.js changes the scale of the slides it fires a resize event. You can subscribe to the event to resize your elements accordingly.
```javascript
Reveal.addEventListener( 'resize', function( event ) {
// event.scale, event.oldScale, event.size
} );
```
### postMessage API ### postMessage API
The framework has a built-in postMessage API that can be used when communicating with a presentation inside of another window. Here's an example showing how you'd make a reveal.js instance in the given window proceed to slide 2: The framework has a built-in postMessage API that can be used when communicating with a presentation inside of another window. Here's an example showing how you'd make a reveal.js instance in the given window proceed to slide 2:
@ -994,7 +1044,7 @@ Reveal.initialize({
## PDF Export ## PDF Export
Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome) or [Chromium](https://www.chromium.org/Home) and to be serving the presentation from a webserver. Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome) or [Chromium](https://www.chromium.org/Home) and to be serving the presentation from a web server.
Here's an example of an exported presentation that's been uploaded to SlideShare: http://www.slideshare.net/hakimel/revealjs-300. Here's an example of an exported presentation that's been uploaded to SlideShare: http://www.slideshare.net/hakimel/revealjs-300.
### Separate pages for fragments ### Separate pages for fragments
@ -1170,7 +1220,7 @@ Reveal.initialize({
// Don't forget to add the dependencies // Don't forget to add the dependencies
dependencies: [ dependencies: [
{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true }, { src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js', async: true },
{ src: 'plugin/multiplex/master.js', async: true }, { src: 'plugin/multiplex/master.js', async: true },
// and if you want speaker notes // and if you want speaker notes
@ -1200,7 +1250,7 @@ Reveal.initialize({
// Don't forget to add the dependencies // Don't forget to add the dependencies
dependencies: [ dependencies: [
{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true }, { src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js', async: true },
{ src: 'plugin/multiplex/client.js', async: true } { src: 'plugin/multiplex/client.js', async: true }
// other dependencies... // other dependencies...
@ -1242,7 +1292,7 @@ Reveal.initialize({
// Don't forget to add the dependencies // Don't forget to add the dependencies
dependencies: [ dependencies: [
{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true }, { src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js', async: true },
{ src: 'plugin/multiplex/client.js', async: true } { src: 'plugin/multiplex/client.js', async: true }
// other dependencies... // other dependencies...
@ -1266,7 +1316,7 @@ Reveal.initialize({
// Don't forget to add the dependencies // Don't forget to add the dependencies
dependencies: [ dependencies: [
{ src: '//cdn.socket.io/socket.io-1.3.5.js', async: true }, { src: '//cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js', async: true },
{ src: 'plugin/multiplex/master.js', async: true }, { src: 'plugin/multiplex/master.js', async: true },
{ src: 'plugin/multiplex/client.js', async: true } { src: 'plugin/multiplex/client.js', async: true }
@ -1291,6 +1341,8 @@ Reveal.initialize({
math: { math: {
mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js', mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js',
config: 'TeX-AMS_HTML-full' // See http://docs.mathjax.org/en/latest/config-files.html config: 'TeX-AMS_HTML-full' // See http://docs.mathjax.org/en/latest/config-files.html
// pass other options into `MathJax.Hub.Config()`
TeX: { Macros: macros }
}, },
dependencies: [ dependencies: [
@ -1302,7 +1354,7 @@ Reveal.initialize({
Read MathJax's documentation if you need [HTTPS delivery](http://docs.mathjax.org/en/latest/start.html#secure-access-to-the-cdn) or serving of [specific versions](http://docs.mathjax.org/en/latest/configuration.html#loading-mathjax-from-the-cdn) for stability. Read MathJax's documentation if you need [HTTPS delivery](http://docs.mathjax.org/en/latest/start.html#secure-access-to-the-cdn) or serving of [specific versions](http://docs.mathjax.org/en/latest/configuration.html#loading-mathjax-from-the-cdn) for stability.
#### MathJax in Markdown #### MathJax in Markdown
If you want to include math inside of a presentation written in Markdown you need to wrap the forumla in backticks. This prevents syntax conflicts between LaTeX and Markdown. For example: If you want to include math inside of a presentation written in Markdown you need to wrap the formula in backticks. This prevents syntax conflicts between LaTeX and Markdown. For example:
``` ```
`$$ J(\theta_0,\theta_1) = \sum_{i=0} $$` `$$ J(\theta_0,\theta_1) = \sum_{i=0} $$`
@ -1312,4 +1364,4 @@ If you want to include math inside of a presentation written in Markdown you nee
MIT licensed MIT licensed
Copyright (C) 2018 Hakim El Hattab, http://hakim.se Copyright (C) 2019 Hakim El Hattab, http://hakim.se

30
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;
}

177
css/reveal.css
View File

@ -3,47 +3,24 @@
* http://revealjs.com * http://revealjs.com
* MIT licensed * MIT licensed
* *
* Copyright (C) 2018 Hakim El Hattab, http://hakim.se * Copyright (C) 2019 Hakim El Hattab, http://hakim.se
*/ */
/*********************************************
* RESET STYLES
*********************************************/
html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe,
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre,
.reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code,
.reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp,
.reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var,
.reveal b, .reveal u, .reveal center,
.reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li,
.reveal fieldset, .reveal form, .reveal label, .reveal legend,
.reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td,
.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,
.reveal time, .reveal mark, .reveal audio, .reveal video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure,
.reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section {
display: block; }
/********************************************* /*********************************************
* GLOBAL STYLES * GLOBAL STYLES
*********************************************/ *********************************************/
html, html {
body {
width: 100%; width: 100%;
height: 100%; height: 100%;
height: 100vh;
height: calc( var(--vh, 1vh) * 100);
overflow: hidden; } overflow: hidden; }
body { body {
height: 100%;
overflow: hidden;
position: relative; position: relative;
line-height: 1; line-height: 1;
margin: 0;
background-color: #fff; background-color: #fff;
color: #000; } color: #000; }
@ -272,7 +249,7 @@ body {
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
-webkit-appearance: none; -webkit-appearance: none;
-webkit-tap-highlight-color: transparent; } -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.reveal .controls .controls-arrow:before, .reveal .controls .controls-arrow:before,
.reveal .controls .controls-arrow:after { .reveal .controls .controls-arrow:after {
content: ''; content: '';
@ -366,10 +343,16 @@ body {
.reveal .controls .enabled.fragmented:hover { .reveal .controls .enabled.fragmented:hover {
opacity: 1; } opacity: 1; }
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-up,
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down {
display: none; }
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-left,
.reveal:not(.has-vertical-slides) .controls .navigate-left { .reveal:not(.has-vertical-slides) .controls .navigate-left {
bottom: 1.4em; bottom: 1.4em;
right: 5.5em; } right: 5.5em; }
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-right,
.reveal:not(.has-vertical-slides) .controls .navigate-right { .reveal:not(.has-vertical-slides) .controls .navigate-right {
bottom: 1.4em; bottom: 1.4em;
right: 0.5em; } right: 0.5em; }
@ -486,12 +469,8 @@ body {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
-ms-touch-action: none; -ms-touch-action: pinch-zoom;
touch-action: none; } touch-action: pinch-zoom; }
@media only screen and (orientation: landscape) {
.reveal.ua-iphone {
position: fixed; } }
.reveal .slides { .reveal .slides {
position: absolute; position: absolute;
@ -512,7 +491,8 @@ body {
perspective-origin: 50% 40%; } perspective-origin: 50% 40%; }
.reveal .slides > section { .reveal .slides > section {
-ms-perspective: 600px; } -webkit-perspective: 600px;
perspective: 600px; }
.reveal .slides > section, .reveal .slides > section,
.reveal .slides > section > section { .reveal .slides > section > section {
@ -544,7 +524,8 @@ body {
.reveal .slides > section.stack { .reveal .slides > section.stack {
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
pointer-events: none; } pointer-events: none;
height: 100%; }
.reveal .slides > section.present, .reveal .slides > section.present,
.reveal .slides > section > section.present { .reveal .slides > section > section.present {
@ -761,14 +742,14 @@ body {
.reveal .slides > section > section[data-transition=zoom].past, .reveal .slides > section > section[data-transition=zoom].past,
.reveal .slides > section > section[data-transition~=zoom-out].past, .reveal .slides > section > section[data-transition~=zoom-out].past,
.reveal.zoom .slides > section > section:not([data-transition]).past { .reveal.zoom .slides > section > section:not([data-transition]).past {
-webkit-transform: translate(0, -150%); -webkit-transform: scale(16);
transform: translate(0, -150%); } transform: scale(16); }
.reveal .slides > section > section[data-transition=zoom].future, .reveal .slides > section > section[data-transition=zoom].future,
.reveal .slides > section > section[data-transition~=zoom-in].future, .reveal .slides > section > section[data-transition~=zoom-in].future,
.reveal.zoom .slides > section > section:not([data-transition]).future { .reveal.zoom .slides > section > section:not([data-transition]).future {
-webkit-transform: translate(0, 150%); -webkit-transform: scale(0.2);
transform: translate(0, 150%); } transform: scale(0.2); }
/********************************************* /*********************************************
* CUBE TRANSITION * CUBE TRANSITION
@ -989,34 +970,35 @@ body {
.no-transforms { .no-transforms {
overflow-y: auto; } overflow-y: auto; }
.no-transforms .reveal {
overflow: visible; }
.no-transforms .reveal .slides { .no-transforms .reveal .slides {
position: relative; position: relative;
width: 80%; width: 80%;
height: auto !important; max-width: 1280px;
height: auto;
top: 0; top: 0;
left: 50%; margin: 0 auto;
margin: 0;
text-align: center; } text-align: center; }
.no-transforms .reveal .controls, .no-transforms .reveal .controls,
.no-transforms .reveal .progress { .no-transforms .reveal .progress {
display: none !important; } display: none; }
.no-transforms .reveal .slides section { .no-transforms .reveal .slides section {
display: block !important; display: block;
opacity: 1 !important; opacity: 1;
position: relative !important; position: relative;
height: auto; height: auto;
min-height: 0; min-height: 0;
top: 0; top: 0;
left: -50%; left: 0;
margin: 10vh 0;
margin: 70px 0; margin: 70px 0;
-webkit-transform: none; -webkit-transform: none;
transform: none; } transform: none; }
.no-transforms .reveal .slides section section {
left: 0; }
.reveal .no-transition, .reveal .no-transition,
.reveal .no-transition * { .reveal .no-transition * {
transition: none !important; } transition: none !important; }
@ -1041,7 +1023,7 @@ body {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
overflow: hidden; overflow: hidden;
background-color: transparent; background-color: rgba(0, 0, 0, 0);
transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
.reveal .slide-background-content { .reveal .slide-background-content {
@ -1294,9 +1276,9 @@ body {
transition-duration: 1200ms; } transition-duration: 1200ms; }
/********************************************* /*********************************************
* LINK PREVIEW OVERLAY * OVERLAY FOR LINK PREVIEWS AND HELP
*********************************************/ *********************************************/
.reveal .overlay { .reveal > .overlay {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -1308,11 +1290,11 @@ body {
visibility: hidden; visibility: hidden;
transition: all 0.3s ease; } transition: all 0.3s ease; }
.reveal .overlay.visible { .reveal > .overlay.visible {
opacity: 1; opacity: 1;
visibility: visible; } visibility: visible; }
.reveal .overlay .spinner { .reveal > .overlay .spinner {
position: absolute; position: absolute;
display: block; display: block;
top: 50%; top: 50%;
@ -1326,7 +1308,7 @@ body {
opacity: 0.6; opacity: 0.6;
transition: all 0.3s ease; } transition: all 0.3s ease; }
.reveal .overlay header { .reveal > .overlay header {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@ -1335,7 +1317,7 @@ body {
z-index: 2; z-index: 2;
border-bottom: 1px solid #222; } border-bottom: 1px solid #222; }
.reveal .overlay header a { .reveal > .overlay header a {
display: inline-block; display: inline-block;
width: 40px; width: 40px;
height: 40px; height: 40px;
@ -1345,10 +1327,10 @@ body {
opacity: 0.6; opacity: 0.6;
box-sizing: border-box; } box-sizing: border-box; }
.reveal .overlay header a:hover { .reveal > .overlay header a:hover {
opacity: 1; } opacity: 1; }
.reveal .overlay header a .icon { .reveal > .overlay header a .icon {
display: inline-block; display: inline-block;
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -1356,13 +1338,13 @@ body {
background-size: 100%; background-size: 100%;
background-repeat: no-repeat; } background-repeat: no-repeat; }
.reveal .overlay header a.close .icon { .reveal > .overlay header a.close .icon {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC); } background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC); }
.reveal .overlay header a.external .icon { .reveal > .overlay header a.external .icon {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==); } background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==); }
.reveal .overlay .viewport { .reveal > .overlay .viewport {
position: absolute; position: absolute;
display: -webkit-box; display: -webkit-box;
display: -ms-flexbox; display: -ms-flexbox;
@ -1372,7 +1354,7 @@ body {
bottom: 0; bottom: 0;
left: 0; } left: 0; }
.reveal .overlay.overlay-preview .viewport iframe { .reveal > .overlay.overlay-preview .viewport iframe {
width: 100%; width: 100%;
height: 100%; height: 100%;
max-width: 100%; max-width: 100%;
@ -1382,11 +1364,11 @@ body {
visibility: hidden; visibility: hidden;
transition: all 0.3s ease; } transition: all 0.3s ease; }
.reveal .overlay.overlay-preview.loaded .viewport iframe { .reveal > .overlay.overlay-preview.loaded .viewport iframe {
opacity: 1; opacity: 1;
visibility: visible; } visibility: visible; }
.reveal .overlay.overlay-preview.loaded .viewport-inner { .reveal > .overlay.overlay-preview.loaded .viewport-inner {
position: absolute; position: absolute;
z-index: -1; z-index: -1;
left: 0; left: 0;
@ -1395,46 +1377,46 @@ body {
text-align: center; text-align: center;
letter-spacing: normal; } letter-spacing: normal; }
.reveal .overlay.overlay-preview .x-frame-error { .reveal > .overlay.overlay-preview .x-frame-error {
opacity: 0; opacity: 0;
transition: opacity 0.3s ease 0.3s; } transition: opacity 0.3s ease 0.3s; }
.reveal .overlay.overlay-preview.loaded .x-frame-error { .reveal > .overlay.overlay-preview.loaded .x-frame-error {
opacity: 1; } opacity: 1; }
.reveal .overlay.overlay-preview.loaded .spinner { .reveal > .overlay.overlay-preview.loaded .spinner {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
-webkit-transform: scale(0.2); -webkit-transform: scale(0.2);
transform: scale(0.2); } transform: scale(0.2); }
.reveal .overlay.overlay-help .viewport { .reveal > .overlay.overlay-help .viewport {
overflow: auto; overflow: auto;
color: #fff; } color: #fff; }
.reveal .overlay.overlay-help .viewport .viewport-inner { .reveal > .overlay.overlay-help .viewport .viewport-inner {
width: 600px; width: 600px;
margin: auto; margin: auto;
padding: 20px 20px 80px 20px; padding: 20px 20px 80px 20px;
text-align: center; text-align: center;
letter-spacing: normal; } letter-spacing: normal; }
.reveal .overlay.overlay-help .viewport .viewport-inner .title { .reveal > .overlay.overlay-help .viewport .viewport-inner .title {
font-size: 20px; } font-size: 20px; }
.reveal .overlay.overlay-help .viewport .viewport-inner table { .reveal > .overlay.overlay-help .viewport .viewport-inner table {
border: 1px solid #fff; border: 1px solid #fff;
border-collapse: collapse; border-collapse: collapse;
font-size: 16px; } font-size: 16px; }
.reveal .overlay.overlay-help .viewport .viewport-inner table th, .reveal > .overlay.overlay-help .viewport .viewport-inner table th,
.reveal .overlay.overlay-help .viewport .viewport-inner table td { .reveal > .overlay.overlay-help .viewport .viewport-inner table td {
width: 200px; width: 200px;
padding: 14px; padding: 14px;
border: 1px solid #fff; border: 1px solid #fff;
vertical-align: middle; } vertical-align: middle; }
.reveal .overlay.overlay-help .viewport .viewport-inner table th { .reveal > .overlay.overlay-help .viewport .viewport-inner table th {
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; } padding-bottom: 20px; }
@ -1448,12 +1430,32 @@ body {
z-index: 30; z-index: 30;
cursor: pointer; cursor: pointer;
transition: all 400ms ease; transition: all 400ms ease;
-webkit-tap-highlight-color: transparent; } -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.reveal.overview .playback { .reveal.overview .playback {
opacity: 0; opacity: 0;
visibility: hidden; } visibility: hidden; }
/*********************************************
* CODE HIGHLGIHTING
*********************************************/
.reveal .hljs table {
margin: initial; }
.reveal .hljs-ln-code,
.reveal .hljs-ln-numbers {
padding: 0;
border: 0; }
.reveal .hljs-ln-numbers {
opacity: 0.6;
padding-right: 0.75em;
text-align: right;
vertical-align: top; }
.reveal .hljs[data-line-numbers]:not([data-line-numbers=""]) tr:not(.highlight-line) {
opacity: 0.25; }
/********************************************* /*********************************************
* ROLLING LINKS * ROLLING LINKS
*********************************************/ *********************************************/
@ -1512,7 +1514,7 @@ body {
.reveal .speaker-notes { .reveal .speaker-notes {
display: none; display: none;
position: absolute; position: absolute;
width: 25vw; width: 33.3333333333%;
height: 100%; height: 100%;
top: 0; top: 0;
left: 100%; left: 100%;
@ -1540,7 +1542,7 @@ body {
opacity: 0.5; } opacity: 0.5; }
.reveal.show-notes { .reveal.show-notes {
max-width: 75vw; max-width: 75%;
overflow: visible; } overflow: visible; }
.reveal.show-notes .speaker-notes { .reveal.show-notes .speaker-notes {
@ -1555,19 +1557,24 @@ body {
border-left: 0; border-left: 0;
max-width: none; max-width: none;
max-height: 70%; max-height: 70%;
max-height: 70vh;
overflow: visible; } overflow: visible; }
.reveal.show-notes .speaker-notes { .reveal.show-notes .speaker-notes {
top: 100%; top: 100%;
left: 0; left: 0;
width: 100%; width: 100%;
height: 42.8571428571%; } } height: 42.8571428571%;
height: 30vh;
border: 0; } }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.reveal.show-notes { .reveal.show-notes {
max-height: 60%; } max-height: 60%;
max-height: 60vh; }
.reveal.show-notes .speaker-notes { .reveal.show-notes .speaker-notes {
top: 100%; top: 100%;
height: 66.6666666667%; } height: 66.6666666667%;
height: 40vh; }
.reveal .speaker-notes { .reveal .speaker-notes {
font-size: 14px; } } font-size: 14px; } }

178
css/reveal.scss
View File

@ -3,55 +3,28 @@
* http://revealjs.com * http://revealjs.com
* MIT licensed * MIT licensed
* *
* Copyright (C) 2018 Hakim El Hattab, http://hakim.se * Copyright (C) 2019 Hakim El Hattab, http://hakim.se
*/ */
/*********************************************
* RESET STYLES
*********************************************/
html, body, .reveal div, .reveal span, .reveal applet, .reveal object, .reveal iframe,
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6, .reveal p, .reveal blockquote, .reveal pre,
.reveal a, .reveal abbr, .reveal acronym, .reveal address, .reveal big, .reveal cite, .reveal code,
.reveal del, .reveal dfn, .reveal em, .reveal img, .reveal ins, .reveal kbd, .reveal q, .reveal s, .reveal samp,
.reveal small, .reveal strike, .reveal strong, .reveal sub, .reveal sup, .reveal tt, .reveal var,
.reveal b, .reveal u, .reveal center,
.reveal dl, .reveal dt, .reveal dd, .reveal ol, .reveal ul, .reveal li,
.reveal fieldset, .reveal form, .reveal label, .reveal legend,
.reveal table, .reveal caption, .reveal tbody, .reveal tfoot, .reveal thead, .reveal tr, .reveal th, .reveal td,
.reveal article, .reveal aside, .reveal canvas, .reveal details, .reveal embed,
.reveal figure, .reveal figcaption, .reveal footer, .reveal header, .reveal hgroup,
.reveal menu, .reveal nav, .reveal output, .reveal ruby, .reveal section, .reveal summary,
.reveal time, .reveal mark, .reveal audio, .reveal video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
.reveal article, .reveal aside, .reveal details, .reveal figcaption, .reveal figure,
.reveal footer, .reveal header, .reveal hgroup, .reveal menu, .reveal nav, .reveal section {
display: block;
}
/********************************************* /*********************************************
* GLOBAL STYLES * GLOBAL STYLES
*********************************************/ *********************************************/
html, html {
body {
width: 100%; width: 100%;
height: 100%; height: 100%;
height: 100vh;
height: calc( var(--vh, 1vh) * 100 );
overflow: hidden; overflow: hidden;
} }
body { body {
height: 100%;
overflow: hidden;
position: relative; position: relative;
line-height: 1; line-height: 1;
margin: 0;
background-color: #fff; background-color: #fff;
color: #000; color: #000;
@ -434,12 +407,19 @@ $controlsArrowAngleActive: 36deg;
} }
} }
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-up,
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-down {
display: none;
}
// Adjust the layout when there are no vertical slides // Adjust the layout when there are no vertical slides
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-left,
.reveal:not(.has-vertical-slides) .controls .navigate-left { .reveal:not(.has-vertical-slides) .controls .navigate-left {
bottom: $controlArrowSpacing; bottom: $controlArrowSpacing;
right: 0.5em + $controlArrowSpacing + $controlArrowSize; right: 0.5em + $controlArrowSpacing + $controlArrowSize;
} }
.reveal[data-navigation-mode="linear"].has-horizontal-slides .navigate-right,
.reveal:not(.has-vertical-slides) .controls .navigate-right { .reveal:not(.has-vertical-slides) .controls .navigate-right {
bottom: $controlArrowSpacing; bottom: $controlArrowSpacing;
right: 0.5em; right: 0.5em;
@ -586,17 +566,7 @@ $controlsArrowAngleActive: 36deg;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
touch-action: none; touch-action: pinch-zoom;
}
// Mobile Safari sometimes overlays a header at the top
// of the page when in landscape mode. Using fixed
// positioning ensures that reveal.js reduces its height
// when this header is visible.
@media only screen and (orientation : landscape) {
.reveal.ua-iphone {
position: fixed;
}
} }
.reveal .slides { .reveal .slides {
@ -618,7 +588,7 @@ $controlsArrowAngleActive: 36deg;
} }
.reveal .slides>section { .reveal .slides>section {
-ms-perspective: 600px; perspective: 600px;
} }
.reveal .slides>section, .reveal .slides>section,
@ -657,6 +627,7 @@ $controlsArrowAngleActive: 36deg;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
pointer-events: none; pointer-events: none;
height: 100%;
} }
.reveal .slides>section.present, .reveal .slides>section.present,
@ -831,10 +802,10 @@ $controlsArrowAngleActive: 36deg;
transform: scale(0.2); transform: scale(0.2);
} }
@include transition-vertical-past(zoom) { @include transition-vertical-past(zoom) {
transform: translate(0, -150%); transform: scale(16);
} }
@include transition-vertical-future(zoom) { @include transition-vertical-future(zoom) {
transform: translate(0, 150%); transform: scale(0.2);
} }
@ -1067,37 +1038,38 @@ $controlsArrowAngleActive: 36deg;
overflow-y: auto; overflow-y: auto;
} }
.no-transforms .reveal {
overflow: visible;
}
.no-transforms .reveal .slides { .no-transforms .reveal .slides {
position: relative; position: relative;
width: 80%; width: 80%;
height: auto !important; max-width: 1280px;
height: auto;
top: 0; top: 0;
left: 50%; margin: 0 auto;
margin: 0;
text-align: center; text-align: center;
} }
.no-transforms .reveal .controls, .no-transforms .reveal .controls,
.no-transforms .reveal .progress { .no-transforms .reveal .progress {
display: none !important; display: none;
} }
.no-transforms .reveal .slides section { .no-transforms .reveal .slides section {
display: block !important; display: block;
opacity: 1 !important; opacity: 1;
position: relative !important; position: relative;
height: auto; height: auto;
min-height: 0; min-height: 0;
top: 0; top: 0;
left: -50%; left: 0;
margin: 10vh 0;
margin: 70px 0; margin: 70px 0;
transform: none; transform: none;
} }
.no-transforms .reveal .slides section section {
left: 0;
}
.reveal .no-transition, .reveal .no-transition,
.reveal .no-transition * { .reveal .no-transition * {
transition: none !important; transition: none !important;
@ -1416,10 +1388,10 @@ $controlsArrowAngleActive: 36deg;
/********************************************* /*********************************************
* LINK PREVIEW OVERLAY * OVERLAY FOR LINK PREVIEWS AND HELP
*********************************************/ *********************************************/
.reveal .overlay { .reveal > .overlay {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -1431,12 +1403,12 @@ $controlsArrowAngleActive: 36deg;
visibility: hidden; visibility: hidden;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.reveal .overlay.visible { .reveal > .overlay.visible {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }
.reveal .overlay .spinner { .reveal > .overlay .spinner {
position: absolute; position: absolute;
display: block; display: block;
top: 50%; top: 50%;
@ -1452,7 +1424,7 @@ $controlsArrowAngleActive: 36deg;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.reveal .overlay header { .reveal > .overlay header {
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
@ -1461,7 +1433,7 @@ $controlsArrowAngleActive: 36deg;
z-index: 2; z-index: 2;
border-bottom: 1px solid #222; border-bottom: 1px solid #222;
} }
.reveal .overlay header a { .reveal > .overlay header a {
display: inline-block; display: inline-block;
width: 40px; width: 40px;
height: 40px; height: 40px;
@ -1472,10 +1444,10 @@ $controlsArrowAngleActive: 36deg;
box-sizing: border-box; box-sizing: border-box;
} }
.reveal .overlay header a:hover { .reveal > .overlay header a:hover {
opacity: 1; opacity: 1;
} }
.reveal .overlay header a .icon { .reveal > .overlay header a .icon {
display: inline-block; display: inline-block;
width: 20px; width: 20px;
height: 20px; height: 20px;
@ -1484,14 +1456,14 @@ $controlsArrowAngleActive: 36deg;
background-size: 100%; background-size: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.reveal .overlay header a.close .icon { .reveal > .overlay header a.close .icon {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABkklEQVRYR8WX4VHDMAxG6wnoJrABZQPYBCaBTWAD2g1gE5gg6OOsXuxIlr40d81dfrSJ9V4c2VLK7spHuTJ/5wpM07QXuXc5X0opX2tEJcadjHuV80li/FgxTIEK/5QBCICBD6xEhSMGHgQPgBgLiYVAB1dpSqKDawxTohFw4JSEA3clzgIBPCURwE2JucBR7rhPJJv5OpJwDX+SfDjgx1wACQeJG1aChP9K/IMmdZ8DtESV1WyP3Bt4MwM6sj4NMxMYiqUWHQu4KYA/SYkIjOsm3BXYWMKFDwU2khjCQ4ELJUJ4SmClRArOCmSXGuKma0fYD5CbzHxFpCSGAhfAVSSUGDUk2BWZaff2g6GE15BsBQ9nwmpIGDiyHQddwNTMKkbZaf9fajXQca1EX44puJZUsnY0ObGmITE3GVLCbEhQUjGVt146j6oasWN+49Vph2w1pZ5EansNZqKBm1txbU57iRRcZ86RWMDdWtBJUHBHwoQPi1GV+JCbntmvok7iTX4/Up9mgyTc/FJYDTcndgH/AA5A/CHsyEkVAAAAAElFTkSuQmCC);
} }
.reveal .overlay header a.external .icon { .reveal > .overlay header a.external .icon {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==); background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAcElEQVRYR+2WSQoAIQwEzf8f7XiOMkUQxUPlGkM3hVmiQfQR9GYnH1SsAQlI4DiBqkCMoNb9y2e90IAEJPAcgdznU9+engMaeJ7Azh5Y1U67gAho4DqBqmB1buAf0MB1AlVBek83ZPkmJMGc1wAR+AAqod/B97TRpQAAAABJRU5ErkJggg==);
} }
.reveal .overlay .viewport { .reveal > .overlay .viewport {
position: absolute; position: absolute;
display: flex; display: flex;
top: 40px; top: 40px;
@ -1500,7 +1472,7 @@ $controlsArrowAngleActive: 36deg;
left: 0; left: 0;
} }
.reveal .overlay.overlay-preview .viewport iframe { .reveal > .overlay.overlay-preview .viewport iframe {
width: 100%; width: 100%;
height: 100%; height: 100%;
max-width: 100%; max-width: 100%;
@ -1512,12 +1484,12 @@ $controlsArrowAngleActive: 36deg;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.reveal .overlay.overlay-preview.loaded .viewport iframe { .reveal > .overlay.overlay-preview.loaded .viewport iframe {
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
} }
.reveal .overlay.overlay-preview.loaded .viewport-inner { .reveal > .overlay.overlay-preview.loaded .viewport-inner {
position: absolute; position: absolute;
z-index: -1; z-index: -1;
left: 0; left: 0;
@ -1526,26 +1498,26 @@ $controlsArrowAngleActive: 36deg;
text-align: center; text-align: center;
letter-spacing: normal; letter-spacing: normal;
} }
.reveal .overlay.overlay-preview .x-frame-error { .reveal > .overlay.overlay-preview .x-frame-error {
opacity: 0; opacity: 0;
transition: opacity 0.3s ease 0.3s; transition: opacity 0.3s ease 0.3s;
} }
.reveal .overlay.overlay-preview.loaded .x-frame-error { .reveal > .overlay.overlay-preview.loaded .x-frame-error {
opacity: 1; opacity: 1;
} }
.reveal .overlay.overlay-preview.loaded .spinner { .reveal > .overlay.overlay-preview.loaded .spinner {
opacity: 0; opacity: 0;
visibility: hidden; visibility: hidden;
transform: scale(0.2); transform: scale(0.2);
} }
.reveal .overlay.overlay-help .viewport { .reveal > .overlay.overlay-help .viewport {
overflow: auto; overflow: auto;
color: #fff; color: #fff;
} }
.reveal .overlay.overlay-help .viewport .viewport-inner { .reveal > .overlay.overlay-help .viewport .viewport-inner {
width: 600px; width: 600px;
margin: auto; margin: auto;
padding: 20px 20px 80px 20px; padding: 20px 20px 80px 20px;
@ -1553,31 +1525,30 @@ $controlsArrowAngleActive: 36deg;
letter-spacing: normal; letter-spacing: normal;
} }
.reveal .overlay.overlay-help .viewport .viewport-inner .title { .reveal > .overlay.overlay-help .viewport .viewport-inner .title {
font-size: 20px; font-size: 20px;
} }
.reveal .overlay.overlay-help .viewport .viewport-inner table { .reveal > .overlay.overlay-help .viewport .viewport-inner table {
border: 1px solid #fff; border: 1px solid #fff;
border-collapse: collapse; border-collapse: collapse;
font-size: 16px; font-size: 16px;
} }
.reveal .overlay.overlay-help .viewport .viewport-inner table th, .reveal > .overlay.overlay-help .viewport .viewport-inner table th,
.reveal .overlay.overlay-help .viewport .viewport-inner table td { .reveal > .overlay.overlay-help .viewport .viewport-inner table td {
width: 200px; width: 200px;
padding: 14px; padding: 14px;
border: 1px solid #fff; border: 1px solid #fff;
vertical-align: middle; vertical-align: middle;
} }
.reveal .overlay.overlay-help .viewport .viewport-inner table th { .reveal > .overlay.overlay-help .viewport .viewport-inner table th {
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
} }
/********************************************* /*********************************************
* PLAYBACK COMPONENT * PLAYBACK COMPONENT
*********************************************/ *********************************************/
@ -1598,6 +1569,32 @@ $controlsArrowAngleActive: 36deg;
} }
/*********************************************
* CODE HIGHLGIHTING
*********************************************/
.reveal .hljs table {
margin: initial;
}
.reveal .hljs-ln-code,
.reveal .hljs-ln-numbers {
padding: 0;
border: 0;
}
.reveal .hljs-ln-numbers {
opacity: 0.6;
padding-right: 0.75em;
text-align: right;
vertical-align: top;
}
.reveal .hljs[data-line-numbers]:not([data-line-numbers=""]) tr:not(.highlight-line) {
opacity: 0.4;
}
/********************************************* /*********************************************
* ROLLING LINKS * ROLLING LINKS
*********************************************/ *********************************************/
@ -1648,6 +1645,8 @@ $controlsArrowAngleActive: 36deg;
* SPEAKER NOTES * SPEAKER NOTES
*********************************************/ *********************************************/
$notesWidthPercent: 25%;
// Hide on-page notes // Hide on-page notes
.reveal aside.notes { .reveal aside.notes {
display: none; display: none;
@ -1658,7 +1657,7 @@ $controlsArrowAngleActive: 36deg;
.reveal .speaker-notes { .reveal .speaker-notes {
display: none; display: none;
position: absolute; position: absolute;
width: 25vw; width: $notesWidthPercent / (1-$notesWidthPercent/100) * 1%;
height: 100%; height: 100%;
top: 0; top: 0;
left: 100%; left: 100%;
@ -1694,7 +1693,7 @@ $controlsArrowAngleActive: 36deg;
.reveal.show-notes { .reveal.show-notes {
max-width: 75vw; max-width: 100% - $notesWidthPercent;
overflow: visible; overflow: visible;
} }
@ -1713,6 +1712,7 @@ $controlsArrowAngleActive: 36deg;
border-left: 0; border-left: 0;
max-width: none; max-width: none;
max-height: 70%; max-height: 70%;
max-height: 70vh;
overflow: visible; overflow: visible;
} }
@ -1721,17 +1721,21 @@ $controlsArrowAngleActive: 36deg;
left: 0; left: 0;
width: 100%; width: 100%;
height: (30/0.7)*1%; height: (30/0.7)*1%;
height: 30vh;
border: 0;
} }
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 600px) {
.reveal.show-notes { .reveal.show-notes {
max-height: 60%; max-height: 60%;
max-height: 60vh;
} }
.reveal.show-notes .speaker-notes { .reveal.show-notes .speaker-notes {
top: 100%; top: 100%;
height: (40/0.6)*1%; height: (40/0.6)*1%;
height: 40vh;
} }
.reveal .speaker-notes { .reveal .speaker-notes {

2
css/theme/beige.css
View File

@ -153,7 +153,7 @@ 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;

8
css/theme/black.css
View File

@ -11,8 +11,8 @@ 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;
@ -149,7 +149,7 @@ 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;
@ -270,4 +270,4 @@ body {
*********************************************/ *********************************************/
@media print { @media print {
.backgrounds { .backgrounds {
background-color: #222; } } background-color: #191919; } }

2
css/theme/blood.css
View File

@ -152,7 +152,7 @@ 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;

2
css/theme/league.css
View File

@ -155,7 +155,7 @@ 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;

2
css/theme/moon.css
View File

@ -153,7 +153,7 @@ 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;

2
css/theme/night.css
View File

@ -147,7 +147,7 @@ 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;

2
css/theme/serif.css
View File

@ -149,7 +149,7 @@ 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;

2
css/theme/simple.css
View File

@ -152,7 +152,7 @@ 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;

2
css/theme/sky.css
View File

@ -156,7 +156,7 @@ 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;

2
css/theme/solarized.css
View File

@ -153,7 +153,7 @@ 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;

2
css/theme/source/black.scss
View File

@ -16,7 +16,7 @@
// 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;

4
css/theme/template/settings.scss
View File

@ -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% );
@ -40,4 +42,4 @@ $selectionColor: #fff;
// to return a background image or gradient // to return a background image or gradient
@mixin bodyBackground() { @mixin bodyBackground() {
background: $backgroundColor; background: $backgroundColor;
} }

6
css/theme/template/theme.scss
View File

@ -162,16 +162,16 @@ 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; text-transform: none;
} }

2
css/theme/white.css
View File

@ -149,7 +149,7 @@ 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;

57
demo.html
View File

@ -12,13 +12,14 @@
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <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"> <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/reveal.css">
<link rel="stylesheet" href="css/theme/black.css" id="theme"> <link rel="stylesheet" href="css/theme/black.css" id="theme">
<!-- Theme used for syntax highlighting of code --> <!-- 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>
@ -93,7 +94,10 @@
Press <strong>ESC</strong> to enter the slide overview. Press <strong>ESC</strong> to enter the slide overview.
</p> </p>
<p> <p>
Hold down alt and click on any element to zoom in on it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>. Alt + click anywhere to zoom back out. 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> </p>
</section> </section>
@ -195,16 +199,16 @@
</section> </section>
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png"> <section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png">
<h2>Image Backgrounds</h2> <h2>Image Backgrounds</h2>
<pre><code class="hljs">&lt;section data-background="image.png"&gt;</code></pre> <pre><code class="hljs html">&lt;section data-background="image.png"&gt;</code></pre>
</section> </section>
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px"> <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> <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> <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>
<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"> <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;"> <div style="background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 20px;">
<h2>Video Backgrounds</h2> <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> <pre><code class="hljs html" style="word-wrap: break-word;">&lt;section data-background-video="video.mp4,video.webm"&gt;</code></pre>
</div> </div>
</section> </section>
<section data-background="http://i.giphy.com/90F8aUepslB84.gif"> <section data-background="http://i.giphy.com/90F8aUepslB84.gif">
@ -217,7 +221,7 @@
<p> <p>
Different background transitions are available via the backgroundTransition option. This one's called "zoom". Different background transitions are available via the backgroundTransition option. This one's called "zoom".
</p> </p>
<pre><code class="hljs">Reveal.configure({ backgroundTransition: 'zoom' })</code></pre> <pre><code class="hljs javascript">Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
</section> </section>
<section data-transition="slide" data-background="#b5533c" data-background-transition="zoom"> <section data-transition="slide" data-background="#b5533c" data-background-transition="zoom">
@ -225,25 +229,32 @@
<p> <p>
You can override background transitions per-slide. You can override background transitions per-slide.
</p> </p>
<pre><code class="hljs" style="word-wrap: break-word;">&lt;section data-background-transition="zoom"&gt;</code></pre> <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>
<section> <section>
<h2>Pretty Code</h2> <h2>Pretty Code</h2>
<pre><code class="hljs" data-trim contenteditable> <pre><code class="hljs" data-trim data-line-numbers="4,8-9">
function linkify( selector ) { import React, { useState } from 'react';
if( supports3DTransforms ) {
var nodes = document.querySelectorAll( selector ); function Example() {
const [count, setCount] = useState(0);
for( var i = 0, len = nodes.length; i &lt; len; i++ ) { return (
var node = nodes[i]; &lt;div&gt;
&lt;p&gt;You clicked {count} times&lt;/p&gt;
if( !node.className ) { &lt;button onClick={() =&gt; setCount(count + 1)}&gt;
node.className += ' roll'; Click me
} &lt;/button&gt;
} &lt;/div&gt;
} );
} }
</code></pre> </code></pre>
<p>Code syntax highlighting courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p> <p>Code syntax highlighting courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
@ -384,7 +395,6 @@ Reveal.addEventListener( 'customevent', function() {
</div> </div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script> <script src="js/reveal.js"></script>
<script> <script>
@ -393,17 +403,16 @@ Reveal.addEventListener( 'customevent', function() {
Reveal.initialize({ Reveal.initialize({
controls: true, controls: true,
progress: true, progress: true,
history: true,
center: true, center: true,
hash: true,
transition: 'slide', // none/fade/slide/convex/concave/zoom transition: 'slide', // none/fade/slide/convex/concave/zoom
// More info https://github.com/hakimel/reveal.js#dependencies // More info https://github.com/hakimel/reveal.js#dependencies
dependencies: [ dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } }, { 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/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }, { src: 'plugin/highlight/highlight.js', async: true },
{ src: 'plugin/search/search.js', async: true }, { src: 'plugin/search/search.js', async: true },
{ src: 'plugin/zoom-js/zoom.js', async: true }, { src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true } { src: 'plugin/notes/notes.js', async: true }

6
index.html
View File

@ -6,11 +6,12 @@
<title>reveal.js</title> <title>reveal.js</title>
<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"> <link rel="stylesheet" href="css/theme/black.css">
<!-- Theme used for syntax highlighting of code --> <!-- 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>
@ -29,7 +30,6 @@
</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>
@ -41,7 +41,7 @@
{ src: 'plugin/markdown/marked.js' }, { src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/markdown.js' }, { src: 'plugin/markdown/markdown.js' },
{ src: 'plugin/notes/notes.js', async: true }, { src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } } { src: 'plugin/highlight/highlight.js', async: true }
] ]
}); });
</script> </script>

957
js/reveal.js
View File

File diff suppressed because it is too large Load Diff

71
lib/css/monokai.css Normal file
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;
}

2
lib/js/classList.js
View File

@ -1,2 +0,0 @@
/*! @source http://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))};

6
lib/js/head.min.js vendored
View File

@ -1,6 +0,0 @@
/*! head.core - v1.0.2 */
(function(n,t){"use strict";function r(n){a[a.length]=n}function k(n){var t=new RegExp(" ?\\b"+n+"\\b");c.className=c.className.replace(t,"")}function p(n,t){for(var i=0,r=n.length;i<r;i++)t.call(n,n[i],i)}function tt(){var t,e,f,o;c.className=c.className.replace(/ (w-|eq-|gt-|gte-|lt-|lte-|portrait|no-portrait|landscape|no-landscape)\d+/g,"");t=n.innerWidth||c.clientWidth;e=n.outerWidth||n.screen.width;u.screen.innerWidth=t;u.screen.outerWidth=e;r("w-"+t);p(i.screens,function(n){t>n?(i.screensCss.gt&&r("gt-"+n),i.screensCss.gte&&r("gte-"+n)):t<n?(i.screensCss.lt&&r("lt-"+n),i.screensCss.lte&&r("lte-"+n)):t===n&&(i.screensCss.lte&&r("lte-"+n),i.screensCss.eq&&r("e-q"+n),i.screensCss.gte&&r("gte-"+n))});f=n.innerHeight||c.clientHeight;o=n.outerHeight||n.screen.height;u.screen.innerHeight=f;u.screen.outerHeight=o;u.feature("portrait",f>t);u.feature("landscape",f<t)}function it(){n.clearTimeout(b);b=n.setTimeout(tt,50)}var y=n.document,rt=n.navigator,ut=n.location,c=y.documentElement,a=[],i={screens:[240,320,480,640,768,800,1024,1280,1440,1680,1920],screensCss:{gt:!0,gte:!1,lt:!0,lte:!1,eq:!1},browsers:[{ie:{min:6,max:11}}],browserCss:{gt:!0,gte:!1,lt:!0,lte:!1,eq:!0},html5:!0,page:"-page",section:"-section",head:"head"},v,u,s,w,o,h,l,d,f,g,nt,e,b;if(n.head_conf)for(v in n.head_conf)n.head_conf[v]!==t&&(i[v]=n.head_conf[v]);u=n[i.head]=function(){u.ready.apply(null,arguments)};u.feature=function(n,t,i){return n?(Object.prototype.toString.call(t)==="[object Function]"&&(t=t.call()),r((t?"":"no-")+n),u[n]=!!t,i||(k("no-"+n),k(n),u.feature()),u):(c.className+=" "+a.join(" "),a=[],u)};u.feature("js",!0);s=rt.userAgent.toLowerCase();w=/mobile|android|kindle|silk|midp|phone|(windows .+arm|touch)/.test(s);u.feature("mobile",w,!0);u.feature("desktop",!w,!0);s=/(chrome|firefox)[ \/]([\w.]+)/.exec(s)||/(iphone|ipad|ipod)(?:.*version)?[ \/]([\w.]+)/.exec(s)||/(android)(?:.*version)?[ \/]([\w.]+)/.exec(s)||/(webkit|opera)(?:.*version)?[ \/]([\w.]+)/.exec(s)||/(msie) ([\w.]+)/.exec(s)||/(trident).+rv:(\w.)+/.exec(s)||[];o=s[1];h=parseFloat(s[2]);switch(o){case"msie":case"trident":o="ie";h=y.documentMode||h;break;case"firefox":o="ff";break;case"ipod":case"ipad":case"iphone":o="ios";break;case"webkit":o="safari"}for(u.browser={name:o,version:h},u.browser[o]=!0,l=0,d=i.browsers.length;l<d;l++)for(f in i.browsers[l])if(o===f)for(r(f),g=i.browsers[l][f].min,nt=i.browsers[l][f].max,e=g;e<=nt;e++)h>e?(i.browserCss.gt&&r("gt-"+f+e),i.browserCss.gte&&r("gte-"+f+e)):h<e?(i.browserCss.lt&&r("lt-"+f+e),i.browserCss.lte&&r("lte-"+f+e)):h===e&&(i.browserCss.lte&&r("lte-"+f+e),i.browserCss.eq&&r("eq-"+f+e),i.browserCss.gte&&r("gte-"+f+e));else r("no-"+f);r(o);r(o+parseInt(h,10));i.html5&&o==="ie"&&h<9&&p("abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|main|mark|meter|nav|output|progress|section|summary|time|video".split("|"),function(n){y.createElement(n)});p(ut.pathname.split("/"),function(n,u){if(this.length>2&&this[u+1]!==t)u&&r(this.slice(u,u+1).join("-").toLowerCase()+i.section);else{var f=n||"index",e=f.indexOf(".");e>0&&(f=f.substring(0,e));c.id=f.toLowerCase()+i.page;u||r("root"+i.section)}});u.screen={height:n.screen.height,width:n.screen.width};tt();b=0;n.addEventListener?n.addEventListener("resize",it,!1):n.attachEvent("onresize",it)})(window);
/*! head.css3 - v1.0.0 */
(function(n,t){"use strict";function a(n){for(var r in n)if(i[n[r]]!==t)return!0;return!1}function r(n){var t=n.charAt(0).toUpperCase()+n.substr(1),i=(n+" "+c.join(t+" ")+t).split(" ");return!!a(i)}var h=n.document,o=h.createElement("i"),i=o.style,s=" -o- -moz- -ms- -webkit- -khtml- ".split(" "),c="Webkit Moz O ms Khtml".split(" "),l=n.head_conf&&n.head_conf.head||"head",u=n[l],f={gradient:function(){var n="background-image:";return i.cssText=(n+s.join("gradient(linear,left top,right bottom,from(#9f9),to(#fff));"+n)+s.join("linear-gradient(left top,#eee,#fff);"+n)).slice(0,-n.length),!!i.backgroundImage},rgba:function(){return i.cssText="background-color:rgba(0,0,0,0.5)",!!i.backgroundColor},opacity:function(){return o.style.opacity===""},textshadow:function(){return i.textShadow===""},multiplebgs:function(){i.cssText="background:url(https://),url(https://),red url(https://)";var n=(i.background||"").match(/url/g);return Object.prototype.toString.call(n)==="[object Array]"&&n.length===3},boxshadow:function(){return r("boxShadow")},borderimage:function(){return r("borderImage")},borderradius:function(){return r("borderRadius")},cssreflections:function(){return r("boxReflect")},csstransforms:function(){return r("transform")},csstransitions:function(){return r("transition")},touch:function(){return"ontouchstart"in n},retina:function(){return n.devicePixelRatio>1},fontface:function(){var t=u.browser.name,n=u.browser.version;switch(t){case"ie":return n>=9;case"chrome":return n>=13;case"ff":return n>=6;case"ios":return n>=5;case"android":return!1;case"webkit":return n>=5.1;case"opera":return n>=10;default:return!1}}};for(var e in f)f[e]&&u.feature(e,f[e].call(),!0);u.feature()})(window);
/*! head.load - v1.0.3 */
(function(n,t){"use strict";function w(){}function u(n,t){if(n){typeof n=="object"&&(n=[].slice.call(n));for(var i=0,r=n.length;i<r;i++)t.call(n,n[i],i)}}function it(n,i){var r=Object.prototype.toString.call(i).slice(8,-1);return i!==t&&i!==null&&r===n}function s(n){return it("Function",n)}function a(n){return it("Array",n)}function et(n){var i=n.split("/"),t=i[i.length-1],r=t.indexOf("?");return r!==-1?t.substring(0,r):t}function f(n){(n=n||w,n._done)||(n(),n._done=1)}function ot(n,t,r,u){var f=typeof n=="object"?n:{test:n,success:!t?!1:a(t)?t:[t],failure:!r?!1:a(r)?r:[r],callback:u||w},e=!!f.test;return e&&!!f.success?(f.success.push(f.callback),i.load.apply(null,f.success)):e||!f.failure?u():(f.failure.push(f.callback),i.load.apply(null,f.failure)),i}function v(n){var t={},i,r;if(typeof n=="object")for(i in n)!n[i]||(t={name:i,url:n[i]});else t={name:et(n),url:n};return(r=c[t.name],r&&r.url===t.url)?r:(c[t.name]=t,t)}function y(n){n=n||c;for(var t in n)if(n.hasOwnProperty(t)&&n[t].state!==l)return!1;return!0}function st(n){n.state=ft;u(n.onpreload,function(n){n.call()})}function ht(n){n.state===t&&(n.state=nt,n.onpreload=[],rt({url:n.url,type:"cache"},function(){st(n)}))}function ct(){var n=arguments,t=n[n.length-1],r=[].slice.call(n,1),f=r[0];return(s(t)||(t=null),a(n[0]))?(n[0].push(t),i.load.apply(null,n[0]),i):(f?(u(r,function(n){s(n)||!n||ht(v(n))}),b(v(n[0]),s(f)?f:function(){i.load.apply(null,r)})):b(v(n[0])),i)}function lt(){var n=arguments,t=n[n.length-1],r={};return(s(t)||(t=null),a(n[0]))?(n[0].push(t),i.load.apply(null,n[0]),i):(u(n,function(n){n!==t&&(n=v(n),r[n.name]=n)}),u(n,function(n){n!==t&&(n=v(n),b(n,function(){y(r)&&f(t)}))}),i)}function b(n,t){if(t=t||w,n.state===l){t();return}if(n.state===tt){i.ready(n.name,t);return}if(n.state===nt){n.onpreload.push(function(){b(n,t)});return}n.state=tt;rt(n,function(){n.state=l;t();u(h[n.name],function(n){f(n)});o&&y()&&u(h.ALL,function(n){f(n)})})}function at(n){n=n||"";var t=n.split("?")[0].split(".");return t[t.length-1].toLowerCase()}function rt(t,i){function e(t){t=t||n.event;u.onload=u.onreadystatechange=u.onerror=null;i()}function o(f){f=f||n.event;(f.type==="load"||/loaded|complete/.test(u.readyState)&&(!r.documentMode||r.documentMode<9))&&(n.clearTimeout(t.errorTimeout),n.clearTimeout(t.cssTimeout),u.onload=u.onreadystatechange=u.onerror=null,i())}function s(){if(t.state!==l&&t.cssRetries<=20){for(var i=0,f=r.styleSheets.length;i<f;i++)if(r.styleSheets[i].href===u.href){o({type:"load"});return}t.cssRetries++;t.cssTimeout=n.setTimeout(s,250)}}var u,h,f;i=i||w;h=at(t.url);h==="css"?(u=r.createElement("link"),u.type="text/"+(t.type||"css"),u.rel="stylesheet",u.href=t.url,t.cssRetries=0,t.cssTimeout=n.setTimeout(s,500)):(u=r.createElement("script"),u.type="text/"+(t.type||"javascript"),u.src=t.url);u.onload=u.onreadystatechange=o;u.onerror=e;u.async=!1;u.defer=!1;t.errorTimeout=n.setTimeout(function(){e({type:"timeout"})},7e3);f=r.head||r.getElementsByTagName("head")[0];f.insertBefore(u,f.lastChild)}function vt(){for(var t,u=r.getElementsByTagName("script"),n=0,f=u.length;n<f;n++)if(t=u[n].getAttribute("data-headjs-load"),!!t){i.load(t);return}}function yt(n,t){var v,p,e;return n===r?(o?f(t):d.push(t),i):(s(n)&&(t=n,n="ALL"),a(n))?(v={},u(n,function(n){v[n]=c[n];i.ready(n,function(){y(v)&&f(t)})}),i):typeof n!="string"||!s(t)?i:(p=c[n],p&&p.state===l||n==="ALL"&&y()&&o)?(f(t),i):(e=h[n],e?e.push(t):e=h[n]=[t],i)}function e(){if(!r.body){n.clearTimeout(i.readyTimeout);i.readyTimeout=n.setTimeout(e,50);return}o||(o=!0,vt(),u(d,function(n){f(n)}))}function k(){r.addEventListener?(r.removeEventListener("DOMContentLoaded",k,!1),e()):r.readyState==="complete"&&(r.detachEvent("onreadystatechange",k),e())}var r=n.document,d=[],h={},c={},ut="async"in r.createElement("script")||"MozAppearance"in r.documentElement.style||n.opera,o,g=n.head_conf&&n.head_conf.head||"head",i=n[g]=n[g]||function(){i.ready.apply(null,arguments)},nt=1,ft=2,tt=3,l=4,p;if(r.readyState==="complete")e();else if(r.addEventListener)r.addEventListener("DOMContentLoaded",k,!1),n.addEventListener("load",e,!1);else{r.attachEvent("onreadystatechange",k);n.attachEvent("onload",e);p=!1;try{p=!n.frameElement&&r.documentElement}catch(wt){}p&&p.doScroll&&function pt(){if(!o){try{p.doScroll("left")}catch(t){n.clearTimeout(i.readyTimeout);i.readyTimeout=n.setTimeout(pt,50);return}e()}}()}i.load=i.js=ut?lt:ct;i.test=ot;i.ready=yt;i.ready(r,function(){y()&&u(h.ALL,function(n){f(n)});i.feature&&i.feature("domloaded",!0)})})(window);

2
lib/js/promise.js Normal file
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});

24
package.json
View File

@ -20,24 +20,26 @@
"url": "git://github.com/hakimel/reveal.js.git" "url": "git://github.com/hakimel/reveal.js.git"
}, },
"engines": { "engines": {
"node": ">=4.0.0" "node": ">=9.0.0"
}, },
"devDependencies": { "devDependencies": {
"express": "^4.16.2", "express": "^4.16.2",
"grunt": "^1.0.1", "grunt": "^1.0.3",
"grunt-cli": "^1.3.2",
"grunt-autoprefixer": "^3.0.4", "grunt-autoprefixer": "^3.0.4",
"grunt-cli": "^1.2.0", "grunt-contrib-connect": "^2.0.0",
"grunt-contrib-connect": "^1.0.2", "grunt-contrib-cssmin": "^3.0.0",
"grunt-contrib-cssmin": "^2.2.1", "grunt-contrib-jshint": "^2.0.0",
"grunt-contrib-jshint": "^1.1.0", "grunt-contrib-qunit": "^3.1.0",
"grunt-contrib-qunit": "^2.0.0",
"grunt-contrib-uglify": "^3.3.0", "grunt-contrib-uglify": "^3.3.0",
"grunt-contrib-watch": "^1.0.0", "grunt-contrib-watch": "^1.1.0",
"grunt-sass": "^2.0.0", "grunt-sass": "^3.0.2",
"grunt-retire": "^1.0.7",
"grunt-zip": "~0.17.1", "grunt-zip": "~0.17.1",
"load-grunt-tasks": "^4.0.0",
"node-sass": "4.11.0",
"mustache": "^2.3.0", "mustache": "^2.3.0",
"socket.io": "^1.7.3" "socket.io": "^2.2.0",
"typescript": "^3.3.3333"
}, },
"license": "MIT" "license": "MIT"
} }

132
plugin/highlight/highlight.js
View File

File diff suppressed because one or more lines are too long

4
plugin/markdown/example.html
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>
@ -109,7 +109,6 @@
</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>
@ -122,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(); } },

186
plugin/markdown/markdown.js
View File

@ -7,13 +7,11 @@
if (typeof define === 'function' && define.amd) { if (typeof define === 'function' && define.amd) {
root.marked = require( './marked' ); root.marked = require( './marked' );
root.RevealMarkdown = factory( root.marked ); root.RevealMarkdown = factory( root.marked );
root.RevealMarkdown.initialize();
} else if( typeof exports === 'object' ) { } 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 ) {
@ -199,81 +197,108 @@
*/ */
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>';
} }
) );
}
else if( section.getAttribute( 'data-separator' ) || section.getAttribute( 'data-separator-vertical' ) || section.getAttribute( 'data-separator-notes' ) ) {
section.outerHTML = slidify( getMarkdownFromSlide( section ), {
separator: section.getAttribute( 'data-separator' ),
verticalSeparator: section.getAttribute( 'data-separator-vertical' ),
notesSeparator: section.getAttribute( 'data-separator-notes' ),
attributes: getForwardedAttributes( section )
});
}
else {
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 {
xhr.open( 'GET', url, false ); reject( xhr, url );
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 );
} }
}.bind( this, section, xhr );
} xhr.open( 'GET', url, true );
else if( section.getAttribute( 'data-separator' ) || section.getAttribute( 'data-separator-vertical' ) || section.getAttribute( 'data-separator-notes' ) ) {
section.outerHTML = slidify( getMarkdownFromSlide( section ), { try {
separator: section.getAttribute( 'data-separator' ), xhr.send();
verticalSeparator: section.getAttribute( 'data-separator-vertical' ), }
notesSeparator: section.getAttribute( 'data-separator-notes' ), catch ( e ) {
attributes: getForwardedAttributes( section ) 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 );
}
} } );
else {
section.innerHTML = createMarkdownSlide( getMarkdownFromSlide( section ) );
}
}
} }
/** /**
* 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)
@ -342,44 +367,47 @@
*/ */
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]; section.setAttribute( 'data-markdown-parsed', true )
// Only parse the same slide once var notes = section.querySelector( 'aside.notes' );
if( !section.getAttribute( 'data-markdown-parsed' ) ) { var markdown = getMarkdownFromSlide( section );
section.setAttribute( 'data-markdown-parsed', true ) section.innerHTML = marked( markdown );
addAttributes( section, section, null, section.getAttribute( 'data-element-attributes' ) ||
var notes = section.querySelector( 'aside.notes' ); section.parentNode.getAttribute( 'data-element-attributes' ) ||
var markdown = getMarkdownFromSlide( section ); DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR,
section.getAttribute( 'data-attributes' ) ||
section.innerHTML = marked( markdown ); section.parentNode.getAttribute( 'data-attributes' ) ||
addAttributes( section, section, null, section.getAttribute( 'data-element-attributes' ) || DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR);
section.parentNode.getAttribute( 'data-element-attributes' ) ||
DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR,
section.getAttribute( 'data-attributes' ) ||
section.parentNode.getAttribute( 'data-attributes' ) ||
DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR);
// If there were notes, we need to re-add them after
// having overwritten the section's HTML
if( notes ) {
section.appendChild( notes );
}
// If there were notes, we need to re-add them after
// having overwritten the section's HTML
if( 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 ) {
initialize: function() {
if( typeof marked === 'undefined' ) { if( typeof marked === 'undefined' ) {
throw 'The reveal.js Markdown plugin requires marked to be loaded'; throw 'The reveal.js Markdown plugin requires marked to be loaded';
} }
@ -392,14 +420,14 @@
}); });
} }
// marked can be configured via reveal.js config options
var options = Reveal.getConfig().markdown; var options = Reveal.getConfig().markdown;
if( options ) {
if ( options ) {
marked.setOptions( options ); marked.setOptions( options );
} }
processSlides(); return processSlides().then( convertSlides );
convertSlides();
}, },
// TODO: Do these belong in the API? // TODO: Do these belong in the API?
@ -409,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;
})); }));

6
plugin/markdown/marked.js
View File

File diff suppressed because one or more lines are too long

71
plugin/math/math.js
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://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/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';
options.tex2jax = options.tex2jax || { var url = mathjax + '?config=' + config;
inlineMath: [['$','$'],['\\(','\\)']] ,
skipTags: ['script','noscript','style','textarea','pre'] };
loadScript( options.mathjax + '?config=' + options.config, function() { var defaultOptions = {
messageStyle: 'none',
tex2jax: {
inlineMath: [ [ '$', '$' ], [ '\\(', '\\)' ] ],
skipTags: [ 'script', 'noscript', 'style', 'textarea', 'pre' ]
},
skipStartupTypeset: true
};
MathJax.Hub.Config({ function defaults( options, defaultOptions ) {
messageStyle: 'none',
tex2jax: options.tex2jax,
skipStartupTypeset: true
});
// Typeset followed by an immediate reveal.js layout since for ( var i in defaultOptions ) {
// the typesetting process could affect slide height if ( !options.hasOwnProperty( i ) ) {
MathJax.Hub.Queue( [ 'Typeset', MathJax.Hub ] ); options[i] = defaultOptions[i];
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 ] );
} );
} );
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 );

192
plugin/notes/notes.html
View File

@ -347,6 +347,8 @@
upcomingSlide, upcomingSlide,
layoutLabel, layoutLabel,
layoutDropdown, layoutDropdown,
pendingCalls = {},
lastRevealApiCallId = 0,
connected = false; connected = false;
var SPEAKER_LAYOUTS = { var SPEAKER_LAYOUTS = {
@ -382,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' ) {
@ -398,6 +404,23 @@
} ); } );
/**
* 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.
@ -512,28 +535,34 @@
} }
function getTimings() { function getTimings( callback ) {
var slides = Reveal.getSlides(); callRevealApi( 'getSlidesAttributes', [], function ( slideAttributes ) {
var defaultTiming = Reveal.getConfig().defaultTiming; callRevealApi( 'getConfig', [], function ( config ) {
if (defaultTiming == null) { var defaultTiming = config.defaultTiming;
return null; if (defaultTiming == null) {
} callback(null);
var timings = []; return;
for ( var i in slides ) {
var slide = slides[i];
var timing = defaultTiming;
if( slide.hasAttribute( 'data-timing' )) {
var t = slide.getAttribute( '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); var timings = [];
} for ( var i in slideAttributes ) {
return timings; 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);
}
callback( timings );
} );
} );
} }
@ -541,15 +570,15 @@
* Return the number of seconds allocated for presenting * Return the number of seconds allocated for presenting
* all slides up to and including this one. * all slides up to and including this one.
*/ */
function getTimeAllocated(timings) { function getTimeAllocated( timings, callback ) {
var slides = Reveal.getSlides(); callRevealApi( 'getSlidePastCount', [], function ( currentSlide ) {
var allocated = 0; var allocated = 0;
var currentSlide = Reveal.getSlidePastCount(); for (var i in timings.slice(0, currentSlide + 1)) {
for (var i in slides.slice(0, currentSlide + 1)) { allocated += timings[i];
allocated += timings[i]; }
} callback( allocated );
return allocated; } );
} }
@ -571,12 +600,51 @@
pacingMinutesEl = pacingEl.querySelector( '.minutes-value' ), pacingMinutesEl = pacingEl.querySelector( '.minutes-value' ),
pacingSecondsEl = pacingEl.querySelector( '.seconds-value' ); pacingSecondsEl = pacingEl.querySelector( '.seconds-value' );
var timings = getTimings(); var timings = null;
if (timings !== null) { getTimings( function ( _timings ) {
pacingTitleEl.style.removeProperty('display');
pacingEl.style.removeProperty('display'); timings = _timings;
if (_timings !== null) {
pacingTitleEl.style.removeProperty('display');
pacingEl.style.removeProperty('display');
}
// Update once directly
_updateTimer();
// Then update every second
setInterval( _updateTimer, 1000 );
} );
function _resetTimer() {
if (timings == null) {
start = new Date();
_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;
} );
function _displayTime( hrEl, minEl, secEl, time) { function _displayTime( hrEl, minEl, secEl, time) {
var sign = Math.sign(time) == -1 ? "-" : ""; var sign = Math.sign(time) == -1 ? "-" : "";
@ -618,52 +686,26 @@
function _updatePacing(diff) { function _updatePacing(diff) {
var slideEndTiming = getTimeAllocated(timings) * 1000; getTimeAllocated( timings, function ( slideEndTimingSeconds ) {
var currentSlide = Reveal.getSlidePastCount(); var slideEndTiming = slideEndTimingSeconds * 1000;
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 );
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 );
} );
} );
} }
// Update once directly
_updateTimer();
// Then update every second
setInterval( _updateTimer, 1000 );
function _resetTimer() {
if (timings == null) {
start = new Date();
}
else {
// Reset timer to beginning of current slide
var slideEndTiming = getTimeAllocated(timings) * 1000;
var currentSlide = Reveal.getSlidePastCount();
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;
} );
} }
/** /**

61
plugin/notes/notes.js
View File

@ -11,24 +11,28 @@
*/ */
var RevealNotes = (function() { var RevealNotes = (function() {
var notesPopup = null;
function openNotes( notesFilePath ) { function openNotes( notesFilePath ) {
if (notesPopup && !notesPopup.closed) {
notesPopup.focus();
return;
}
if( !notesFilePath ) { 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
notesFilePath = jsFileLocation + 'notes.html'; notesFilePath = jsFileLocation + 'notes.html';
} }
var notesPopup = window.open( notesFilePath, 'reveal.js - Notes', 'width=1100,height=700' ); notesPopup = window.open( notesFilePath, 'reveal.js - Notes', 'width=1100,height=700' );
if( !notesPopup ) { if( !notesPopup ) {
alert( 'Speaker view popup failed to open. Please make sure popups are allowed and reopen the speaker view.' ); alert( 'Speaker view popup failed to open. Please make sure popups are allowed and reopen the speaker view.' );
return; return;
} }
// Allow popup window access to Reveal API
notesPopup.Reveal = window.Reveal;
/** /**
* Connect to the notes window through a postmessage handshake. * Connect to the notes window through a postmessage handshake.
* Using postmessage enables us to work in situations where the * Using postmessage enables us to work in situations where the
@ -52,9 +56,28 @@ 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
*/ */
@ -128,20 +151,28 @@ var RevealNotes = (function() {
} }
if( !/receiver/i.test( window.location.search ) ) { return {
init: function() {
// If the there's a 'notes' query set, open directly if( !/receiver/i.test( window.location.search ) ) {
if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
openNotes();
}
// Open the notes when the 's' key is hit // If the there's a 'notes' query set, open directly
Reveal.addKeyBinding({keyCode: 83, key: 'S', description: 'Speaker notes view'}, function() { if( window.location.search.match( /(\?|\&)notes/gi ) !== null ) {
openNotes(); openNotes();
} ); }
} // Open the notes when the 's' key is hit
Reveal.addKeyBinding({keyCode: 83, key: 'S', description: 'Speaker notes view'}, function() {
openNotes();
} );
return { open: openNotes }; }
},
open: openNotes
};
})(); })();
Reveal.registerPlugin( 'notes', RevealNotes );

2
plugin/search/search.js
View File

@ -200,7 +200,7 @@ function Hilitor(id, tag)
toggleSearch(); toggleSearch();
} }
}, false ); }, false );
if( window.Reveal ) Reveal.registerKeyboardShortcut( 'Ctrl-Shift-F', 'Search' ); if( window.Reveal ) Reveal.registerKeyboardShortcut( 'CTRL + Shift + F', 'Search' );
closeSearch(); closeSearch();
return { open: openSearch }; return { open: openSearch };
})(); })();

39
plugin/zoom-js/zoom.js
View File

@ -1,29 +1,34 @@
// Custom reveal.js integration // Custom reveal.js integration
(function(){ var RevealZoom = (function(){
var revealElement = document.querySelector( '.reveal' );
if( revealElement ) {
revealElement.addEventListener( 'mousedown', function( event ) { return {
var defaultModifier = /Linux/.test( window.navigator.platform ) ? 'ctrl' : 'alt'; init: function() {
var modifier = ( Reveal.getConfig().zoomKey ? Reveal.getConfig().zoomKey : defaultModifier ) + 'Key'; Reveal.getRevealElement().addEventListener( 'mousedown', function( event ) {
var zoomLevel = ( Reveal.getConfig().zoomLevel ? Reveal.getConfig().zoomLevel : 2 ); var defaultModifier = /Linux/.test( window.navigator.platform ) ? 'ctrl' : 'alt';
if( event[ modifier ] && !Reveal.isOverview() ) { var modifier = ( Reveal.getConfig().zoomKey ? Reveal.getConfig().zoomKey : defaultModifier ) + 'Key';
event.preventDefault(); var zoomLevel = ( Reveal.getConfig().zoomLevel ? Reveal.getConfig().zoomLevel : 2 );
zoom.to({ if( event[ modifier ] && !Reveal.isOverview() ) {
x: event.clientX, event.preventDefault();
y: event.clientY,
scale: zoomLevel,
pan: false
});
}
} );
zoom.to({
x: event.clientX,
y: event.clientY,
scale: zoomLevel,
pan: false
});
}
} );
}
} }
})(); })();
Reveal.registerPlugin( 'zoom', RevealZoom );
/*! /*!
* zoom.js 0.3 (modified for use with reveal.js) * zoom.js 0.3 (modified for use with reveal.js)
* http://lab.hakim.se/zoom-js * http://lab.hakim.se/zoom-js

1
test/assets/external-script-a.js Normal file
View File

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

1
test/assets/external-script-b.js Normal file
View File

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

1
test/assets/external-script-c.js Normal file
View File

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

1
test/assets/external-script-d.js Normal file
View File

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

2
test/examples/assets/beeping.txt Normal file
View File

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

BIN
test/examples/assets/beeping.wav Normal file
View File

Binary file not shown.

6
test/examples/embedded-media.html
View File

@ -30,11 +30,15 @@
<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>

26
test/examples/math.html
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>
@ -170,11 +185,16 @@
math: { math: {
// mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/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 }
] ]
}); });

1
test/examples/slide-backgrounds.html
View File

@ -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>

1
test/examples/slide-transitions.html
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>

78
test/test-dependencies-async.html Normal file
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>

54
test/test-dependencies.html Normal file
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>

74
test/test-grid-navigation.html Normal file
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>

4
test/test-markdown-element-attributes.html
View File

@ -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,7 +121,6 @@
</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>

9
test/test-markdown-external.html
View File

@ -13,24 +13,25 @@
<body style="overflow: auto;"> <body style="overflow: auto;">
<div id="qunit"></div> <div id="qunit"></div>
<div id="qunit-fixture"></div> <div id="qunit-fixture"></div>
<div class="reveal" style="display: none;"> <div class="reveal" style="display: none;">
<div class="slides"> <div class="slides">
<section data-markdown="simple.md" data-separator="^\r?\n\r?\n\r?\n" data-separator-vertical="^\r?\n\r?\n"></section> <!-- <section data-markdown="simple.md" data-separator="^\r?\n\r?\n\r?\n" data-separator-vertical="^\r?\n\r?\n"></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 src="../plugin/highlight/highlight.js"></script> <script src="../plugin/highlight/highlight.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-2.5.0.js"></script> <script src="qunit-2.5.0.js"></script>
<script src="test-markdown-external.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> </body>
</html> </html>

1
test/test-markdown-options.html
View File

@ -31,7 +31,6 @@
</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-2.5.0.js"></script> <script src="qunit-2.5.0.js"></script>

1
test/test-markdown-slide-attributes.html
View File

@ -116,7 +116,6 @@
</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>

1
test/test-markdown.html
View File

@ -40,7 +40,6 @@
</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>

3
test/test-pdf.html
View File

@ -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,7 +73,6 @@
</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-2.5.0.js"></script> <script src="qunit-2.5.0.js"></script>

92
test/test-plugins.html Normal file
View File

@ -0,0 +1,92 @@
<!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;
} };
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 initialie 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();
});
} );
</script>
</body>
</html>

139
test/test-state.html Normal file
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>

7
test/test.html
View File

@ -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>
@ -76,7 +76,6 @@
</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-2.5.0.js"></script> <script src="qunit-2.5.0.js"></script>

5
test/test.js
View File

@ -262,6 +262,7 @@ Reveal.addEventListener( 'ready', function() {
QUnit.test( 'Current fragment', function( assert ) { 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 );
assert.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' );
@ -274,6 +275,10 @@ Reveal.addEventListener( 'ready', function() {
Reveal.slide( 3, 0, 0 ); Reveal.slide( 3, 0, 0 );
assert.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' );
}); });
QUnit.test( 'Stepping through fragments', function( assert ) { QUnit.test( 'Stepping through fragments', function( assert ) {