Commit b6aa0cac authored by Hakim El Hattab's avatar Hakim El Hattab

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

parents f6f7f585 b9bb353a
......@@ -8,6 +8,7 @@ out/
log/*.log
tmp/**
node_modules/
package-lock.json
.sass-cache
css/reveal.min.css
js/reveal.min.js
\ No newline at end of file
js/reveal.min.js
language: node_js
node_js:
- 4
before_script:
- npm install -g grunt-cli
after_script:
- grunt retire
- npm run build -- retire
......@@ -15,7 +15,7 @@ module.exports = function(grunt) {
' * http://revealjs.com\n' +
' * MIT licensed\n' +
' *\n' +
' * Copyright (C) 2017 Hakim El Hattab, http://hakim.se\n' +
' * Copyright (C) 2018 Hakim El Hattab, http://hakim.se\n' +
' */'
},
......@@ -26,7 +26,7 @@ module.exports = function(grunt) {
uglify: {
options: {
banner: '<%= meta.banner %>\n',
screwIE8: false
ie8: true
},
build: {
src: 'js/reveal.js',
......@@ -78,6 +78,7 @@ module.exports = function(grunt) {
eqnull: true,
browser: true,
expr: true,
loopfunc: true,
globals: {
head: false,
module: false,
......@@ -164,7 +165,7 @@ module.exports = function(grunt) {
grunt.loadNpmTasks( 'grunt-retire' );
grunt.loadNpmTasks( 'grunt-sass' );
grunt.loadNpmTasks( 'grunt-zip' );
// Default task
grunt.registerTask( 'default', [ 'css', 'js' ] );
......
Copyright (C) 2017 Hakim El Hattab, http://hakim.se, and reveal.js contributors
Copyright (C) 2018 Hakim El Hattab, http://hakim.se, and reveal.js contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
......
......@@ -206,9 +206,6 @@ Reveal.initialize({
// Display a presentation progress bar
progress: true,
// Set default timing of 2 minutes per slide
defaultTiming: 120,
// Display the page number of the current slide
slideNumber: false,
......@@ -239,6 +236,10 @@ Reveal.initialize({
// Turns fragments on and off globally
fragments: true,
// Flags whether to include the current fragment in the URL,
// so that reloading brings you to the same fragment position
fragmentInURL: false,
// Flags if the presentation is running in an embedded mode,
// i.e. contained within a limited portion of the screen
embedded: false,
......@@ -267,6 +268,11 @@ Reveal.initialize({
// Use this method for navigation when auto-sliding
autoSlideMethod: Reveal.navigateNext,
// Specify the average time in seconds that you think you will spend
// presenting each slide. This is used to show a pacing timer in the
// speaker view
defaultTiming: 120,
// Enable slide navigation via mouse wheel
mouseWheel: false,
......@@ -531,6 +537,37 @@ Reveal.isPaused();
Reveal.isAutoSliding();
```
### Custom Key Bindings
Custom key bindings can be added and removed using the following Javascript API. Custom key bindings will override the default keyboard bindings, but will in turn be overridden by the user defined bindings in the ``keyboard`` config option.
```javascript
Reveal.addKeyBinding( binding, callback );
Reveal.removeKeyBinding( keyCode );
```
For example
```javascript
// The binding parameter provides the following properties
// keyCode: the keycode for binding to the callback
// key: the key label to show in the help overlay
// description: the description of the action to show in the help overlay
Reveal.addKeyBinding( { keyCode: 84, key: 'T', description: 'Start timer' }, function() {
// start timer
} )
// The binding parameter can also be a direct keycode without providing the help description
Reveal.addKeyBinding( 82, function() {
// reset timer
} )
```
This allows plugins to add key bindings directly to Reveal so they can
* make use of Reveal's pre-processing logic for key handling (for example, ignoring key presses when paused); and
* be included in the help overlay (optional)
### Slide Changed Event
A `slidechanged` event is fired each time the slide is changed (regardless of state). The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML nodes.
......@@ -590,12 +627,13 @@ All CSS color formats are supported, including hex values, keywords, `rgba()` or
By default, background images are resized to cover the full page. Available options:
| Attribute | Default | Description |
| :--------------------------- | :--------- | :---------- |
| data-background-image | | URL of the image to show. GIFs restart when the slide opens. |
| data-background-size | cover | See [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size) on MDN. |
| data-background-position | center | See [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position) on MDN. |
| data-background-repeat | no-repeat | See [background-repeat](https://developer.mozilla.org/docs/Web/CSS/background-repeat) on MDN. |
| Attribute | Default | Description |
| :------------------------------- | :--------- | :---------- |
| data-background-image | | URL of the image to show. GIFs restart when the slide opens. |
| data-background-size | cover | See [background-size](https://developer.mozilla.org/docs/Web/CSS/background-size) on MDN. |
| data-background-position | center | See [background-position](https://developer.mozilla.org/docs/Web/CSS/background-position) on MDN. |
| data-background-repeat | no-repeat | See [background-repeat](https://developer.mozilla.org/docs/Web/CSS/background-repeat) on MDN. |
| data-background-opacity | 1 | Opacity of the background image on a 0-1 scale. 0 is transparent and 1 is fully opaque. |
```html
<section data-background-image="http://example.com/image.png">
......@@ -610,12 +648,13 @@ By default, background images are resized to cover the full page. Available opti
Automatically plays a full size video behind the slide.
| Attribute | Default | Description |
| :--------------------------- | :------ | :---------- |
| data-background-video | | A single video source, or a comma separated list of video sources. |
| data-background-video-loop | false | Flags if the video should play repeatedly. |
| data-background-video-muted | false | Flags if the audio should be muted. |
| data-background-size | cover | Use `cover` for full screen and some cropping or `contain` for letterboxing. |
| Attribute | Default | Description |
| :--------------------------- | :------ | :---------- |
| data-background-video | | A single video source, or a comma separated list of video sources. |
| data-background-video-loop | false | Flags if the video should play repeatedly. |
| data-background-video-muted | false | Flags if the audio should be muted. |
| data-background-size | cover | Use `cover` for full screen and some cropping or `contain` for letterboxing. |
| data-background-opacity | 1 | Opacity of the background video on a 0-1 scale. 0 is transparent and 1 is fully opaque. |
```html
<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-video-loop data-background-video-muted>
......@@ -728,7 +767,8 @@ The default fragment style is to start out invisible and fade in. This style can
<p class="fragment shrink">shrink</p>
<p class="fragment fade-out">fade-out</p>
<p class="fragment fade-up">fade-up (also down, left and right!)</p>
<p class="fragment current-visible">visible only once</p>
<p class="fragment fade-in-then-out">fades in, then out when we move to the next step</p>
<p class="fragment fade-in-then-semi-out">fades in, then obfuscate when we move to the next step</p>
<p class="fragment highlight-current-blue">blue only once</p>
<p class="fragment highlight-red">highlight-red</p>
<p class="fragment highlight-green">highlight-green</p>
......@@ -907,6 +947,11 @@ Reveal.initialize({
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.
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
[Fragments](#fragments) are printed on separate slides by default. Meaning if you have a slide with three fragment steps, it will generate three separate slides where the fragments appear incrementally.
If you prefer printing all fragments in their visible states on the same slide you can set the `pdfSeparateFragments` config option to false.
### Page size
Export dimensions are inferred from the configured [presentation size](#presentation-size). Slides that are too tall to fit within a single page will expand onto multiple pages. You can limit how many pages a slide may expand onto using the `pdfMaxPagesPerSlide` config option, for example `Reveal.configure({ pdfMaxPagesPerSlide: 1 })` ensures that no slide ever grows to more than one printed page.
......@@ -1261,4 +1306,4 @@ Some reveal.js features, like external Markdown and speaker notes, require that
MIT licensed
Copyright (C) 2017 Hakim El Hattab, http://hakim.se
Copyright (C) 2018 Hakim El Hattab, http://hakim.se
......@@ -72,15 +72,8 @@ ul, ol, div, p {
overflow: visible;
display: block;
-webkit-perspective: none;
-moz-perspective: none;
-ms-perspective: none;
perspective: none;
-webkit-perspective-origin: 50% 50%; /* there isn't a none/auto value but 50-50 is the default */
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
perspective: none;
perspective-origin: 50% 50%;
}
.reveal .slides .pdf-page {
......@@ -103,15 +96,8 @@ ul, ol, div, p {
opacity: 1 !important;
-webkit-transform-style: flat !important;
-moz-transform-style: flat !important;
-ms-transform-style: flat !important;
transform-style: flat !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
transform: none !important;
transform-style: flat !important;
transform: none !important;
}
.reveal section.stack {
......
......@@ -3,7 +3,7 @@
* http://revealjs.com
* MIT licensed
*
* Copyright (C) 2017 Hakim El Hattab, http://hakim.se
* Copyright (C) 2018 Hakim El Hattab, http://hakim.se
*/
/*********************************************
* RESET STYLES
......@@ -127,13 +127,25 @@ body {
-webkit-transform: translate(0, 0);
transform: translate(0, 0); }
.reveal .slides section .fragment.fade-in-then-out,
.reveal .slides section .fragment.current-visible {
opacity: 0;
visibility: hidden; }
.reveal .slides section .fragment.fade-in-then-out.current-fragment,
.reveal .slides section .fragment.current-visible.current-fragment {
opacity: 1;
visibility: inherit; }
.reveal .slides section .fragment.fade-in-then-semi-out {
opacity: 0;
visibility: hidden; }
.reveal .slides section .fragment.fade-in-then-semi-out.visible {
opacity: 0.5;
visibility: inherit; }
.reveal .slides section .fragment.fade-in-then-semi-out.current-fragment {
opacity: 1;
visibility: inherit; }
.reveal .slides section .fragment.highlight-red,
.reveal .slides section .fragment.highlight-current-red,
.reveal .slides section .fragment.highlight-green,
......@@ -448,7 +460,7 @@ body {
* SLIDE NUMBER
*********************************************/
.reveal .slide-number {
position: fixed;
position: absolute;
display: block;
right: 8px;
bottom: 8px;
......@@ -460,6 +472,9 @@ body {
background-color: rgba(0, 0, 0, 0.4);
padding: 5px; }
.reveal .slide-number a {
color: currentColor; }
.reveal .slide-number-delimiter {
margin: 0 3px; }
......@@ -528,7 +543,8 @@ body {
.reveal .slides > section.stack {
padding-top: 0;
padding-bottom: 0; }
padding-bottom: 0;
pointer-events: none; }
.reveal .slides > section.present,
.reveal .slides > section > section.present {
......@@ -948,6 +964,21 @@ body {
z-index: 100;
transition: all 1s ease; }
.reveal .pause-overlay .resume-button {
position: absolute;
bottom: 20px;
right: 20px;
color: #ccc;
border-radius: 2px;
padding: 6px 14px;
border: 2px solid #ccc;
font-size: 16px;
background: transparent;
cursor: pointer; }
.reveal .pause-overlay .resume-button:hover {
color: #fff;
border-color: #fff; }
.reveal.paused .pause-overlay {
visibility: visible;
opacity: 1; }
......@@ -1011,10 +1042,15 @@ body {
visibility: hidden;
overflow: hidden;
background-color: transparent;
transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
.reveal .slide-background-content {
position: absolute;
width: 100%;
height: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
transition: all 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
background-size: cover; }
.reveal .slide-background.stack {
display: block; }
......
......@@ -3,7 +3,7 @@
* http://revealjs.com
* MIT licensed
*
* Copyright (C) 2017 Hakim El Hattab, http://hakim.se
* Copyright (C) 2018 Hakim El Hattab, http://hakim.se
*/
......@@ -160,6 +160,7 @@ body {
}
}
.reveal .slides section .fragment.fade-in-then-out,
.reveal .slides section .fragment.current-visible {
opacity: 0;
visibility: hidden;
......@@ -170,6 +171,21 @@ body {
}
}
.reveal .slides section .fragment.fade-in-then-semi-out {
opacity: 0;
visibility: hidden;
&.visible {
opacity: 0.5;
visibility: inherit;
}
&.current-fragment {
opacity: 1;
visibility: inherit;
}
}
.reveal .slides section .fragment.highlight-red,
.reveal .slides section .fragment.highlight-current-red,
.reveal .slides section .fragment.highlight-green,
......@@ -540,7 +556,7 @@ $controlsArrowAngleActive: 36deg;
*********************************************/
.reveal .slide-number {
position: fixed;
position: absolute;
display: block;
right: 8px;
bottom: 8px;
......@@ -553,6 +569,10 @@ $controlsArrowAngleActive: 36deg;
padding: 5px;
}
.reveal .slide-number a {
color: currentColor;
}
.reveal .slide-number-delimiter {
margin: 0 3px;
}
......@@ -636,6 +656,7 @@ $controlsArrowAngleActive: 36deg;
.reveal .slides>section.stack {
padding-top: 0;
padding-bottom: 0;
pointer-events: none;
}
.reveal .slides>section.present,
......@@ -1013,6 +1034,25 @@ $controlsArrowAngleActive: 36deg;
z-index: 100;
transition: all 1s ease;
}
.reveal .pause-overlay .resume-button {
position: absolute;
bottom: 20px;
right: 20px;
color: #ccc;
border-radius: 2px;
padding: 6px 14px;
border: 2px solid #ccc;
font-size: 16px;
background: transparent;
cursor: pointer;
&:hover {
color: #fff;
border-color: #fff;
}
}
.reveal.paused .pause-overlay {
visibility: visible;
opacity: 1;
......@@ -1086,11 +1126,18 @@ $controlsArrowAngleActive: 36deg;
overflow: hidden;
background-color: rgba( 0, 0, 0, 0 );
transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
.reveal .slide-background-content {
position: absolute;
width: 100%;
height: 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
.reveal .slide-background.stack {
......
......@@ -34,8 +34,8 @@ body {
background: rgba(79, 64, 28, 0.99);
text-shadow: none; }
.reveal .slides > section,
.reveal .slides > section > section {
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit; }
......@@ -193,10 +193,12 @@ body {
border-bottom: none; }
.reveal sup {
vertical-align: super; }
vertical-align: super;
font-size: smaller; }
.reveal sub {
vertical-align: sub; }
vertical-align: sub;
font-size: smaller; }
.reveal small {
display: inline-block;
......@@ -266,3 +268,10 @@ body {
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: #f7f3de; } }
......@@ -30,8 +30,8 @@ body {
background: #bee4fd;
text-shadow: none; }
.reveal .slides > section,
.reveal .slides > section > section {
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit; }
......@@ -189,10 +189,12 @@ body {
border-bottom: none; }
.reveal sup {
vertical-align: super; }
vertical-align: super;
font-size: smaller; }
.reveal sub {
vertical-align: sub; }
vertical-align: sub;
font-size: smaller; }
.reveal small {
display: inline-block;
......@@ -262,3 +264,10 @@ body {
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: #222; } }
......@@ -33,8 +33,8 @@ body {
background: #a23;
text-shadow: none; }
.reveal .slides > section,
.reveal .slides > section > section {
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit; }
......@@ -192,10 +192,12 @@ body {
border-bottom: none; }
.reveal sup {
vertical-align: super; }
vertical-align: super;
font-size: smaller; }
.reveal sub {
vertical-align: sub; }
vertical-align: sub;
font-size: smaller; }
.reveal small {
display: inline-block;
......@@ -266,6 +268,13 @@ body {
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: #222; } }
.reveal p {
font-weight: 300;
text-shadow: 1px 1px #222; }
......
......@@ -36,8 +36,8 @@ body {
background: #FF5E99;
text-shadow: none; }
.reveal .slides > section,
.reveal .slides > section > section {
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit; }
......@@ -195,10 +195,12 @@ body {
border-bottom: none; }
.reveal sup {
vertical-align: super; }
vertical-align: super;
font-size: smaller; }
.reveal sub {
vertical-align: sub; }
vertical-align: sub;
font-size: smaller; }
.reveal small {
display: inline-block;
......@@ -268,3 +270,10 @@ body {
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: #2b2b2b; } }
......@@ -34,8 +34,8 @@ body {
background: #d33682;
text-shadow: none; }
.reveal .slides > section,
.reveal .slides > section > section {
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit; }
......@@ -193,10 +193,12 @@ body {
border-bottom: none; }
.reveal sup {
vertical-align: super; }
vertical-align: super;
font-size: smaller; }
.reveal sub {
vertical-align: sub; }
vertical-align: sub;
font-size: smaller; }
.reveal small {
display: inline-block;
......@@ -266,3 +268,10 @@ body {
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: #002b36; } }
......@@ -28,8 +28,8 @@ body {
background: #e7ad52;
text-shadow: none; }
.reveal .slides > section,
.reveal .slides > section > section {
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit; }
......@@ -187,10 +187,12 @@ body {
border-bottom: none; }
.reveal sup {
vertical-align: super; }
vertical-align: super;
font-size: smaller; }
.reveal sub {
vertical-align: sub; }
vertical-align: sub;
font-size: smaller; }
.reveal small {
display: inline-block;
......@@ -260,3 +262,10 @@ body {
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: #111; } }
......@@ -30,8 +30,8 @@ body {
background: #26351C;
text-shadow: none; }
.reveal .slides > section,
.reveal .slides > section > section {
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit; }
......@@ -189,10 +189,12 @@ body {
border-bottom: none; }
.reveal sup {
vertical-align: super; }
vertical-align: super;
font-size: smaller; }
.reveal sub {
vertical-align: sub; }
vertical-align: sub;
font-size: smaller; }
.reveal small {
display: inline-block;
......@@ -262,3 +264,10 @@ body {
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: #F0F1EB; } }
......@@ -33,8 +33,8 @@ body {
background: rgba(0, 0, 0, 0.99);
text-shadow: none; }
.reveal .slides > section,
.reveal .slides > section > section {
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
font-weight: inherit; }
......@@ -192,10 +192,12 @@ body {
border-bottom: none; }
.reveal sup {
vertical-align: super; }
vertical-align: super;
font-size: smaller; }
.reveal sub {
vertical-align: sub; }
vertical-align: sub;
font-size: smaller; }
.reveal small {
display: inline-block;
......@@ -265,3 +267,10 @@ body {
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: #fff; } }
......@@ -37,8 +37,8 @@ body {
background: #134674;
text-shadow: none; }
.reveal .slides > section,
.reveal .slides > section > section {
.reveal .slides section,
.reveal .slides section > section {
line-height: 1.3;
</