diff --git a/.gitignore b/.gitignore
index 9ffdbc7345b..a5df3133d5d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,6 @@
log/*.log
tmp/**
node_modules/
-.sass-cache
\ No newline at end of file
+.sass-cache
+css/reveal.min.css
+js/reveal.min.js
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index fd37e5ad72d..421543667a8 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -4,7 +4,7 @@ Please keep the [issue tracker](http://github.com/hakimel/reveal.js/issues) limi
### Personal Support
-If you have personal support or setup questions the best place to ask those are [StackOverflow](http://stackoverflow.com/questions/tagged/reveal.js).
+If you have personal support or setup questions the best place to ask those are [StackOverflow](http://stackoverflow.com/questions/tagged/reveal.js).
### Bug Reports
@@ -17,4 +17,3 @@ When reporting a bug make sure to include information about which browser and op
- Single-quoted strings
- Should be made towards the **dev branch**
- Should be submitted from a feature/topic branch (not your master)
-- Should not include the minified **reveal.min.js** or **reveal.min.css** files
diff --git a/Gruntfile.js b/Gruntfile.js
index 1baf9661ff3..3e67b9f05d8 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -11,7 +11,7 @@ module.exports = function(grunt) {
' * http://lab.hakim.se/reveal-js\n' +
' * MIT licensed\n' +
' *\n' +
- ' * Copyright (C) 2014 Hakim El Hattab, http://hakim.se\n' +
+ ' * Copyright (C) 2015 Hakim El Hattab, http://hakim.se\n' +
' */'
},
@@ -29,18 +29,17 @@ module.exports = function(grunt) {
}
},
- cssmin: {
- compress: {
+ sass: {
+ core: {
files: {
- 'css/reveal.min.css': [ 'css/reveal.css' ]
+ 'css/reveal.css': 'css/reveal.scss',
}
- }
- },
-
- sass: {
- main: {
+ },
+ themes: {
files: {
- 'css/theme/default.css': 'css/theme/source/default.scss',
+ 'css/theme/black.css': 'css/theme/source/black.scss',
+ 'css/theme/white.css': 'css/theme/source/white.scss',
+ 'css/theme/league.css': 'css/theme/source/league.scss',
'css/theme/beige.css': 'css/theme/source/beige.scss',
'css/theme/night.css': 'css/theme/source/night.scss',
'css/theme/serif.css': 'css/theme/source/serif.scss',
@@ -53,6 +52,20 @@ module.exports = function(grunt) {
}
},
+ autoprefixer: {
+ dist: {
+ src: 'css/reveal.css'
+ }
+ },
+
+ cssmin: {
+ compress: {
+ files: {
+ 'css/reveal.min.css': [ 'css/reveal.css' ]
+ }
+ }
+ },
+
jshint: {
options: {
curly: false,
@@ -70,7 +83,9 @@ module.exports = function(grunt) {
head: false,
module: false,
console: false,
- unescape: false
+ unescape: false,
+ define: false,
+ exports: false
}
},
files: [ 'Gruntfile.js', 'js/reveal.js' ]
@@ -80,7 +95,9 @@ module.exports = function(grunt) {
server: {
options: {
port: port,
- base: '.'
+ base: '.',
+ livereload: true,
+ open: true
}
}
},
@@ -97,14 +114,24 @@ module.exports = function(grunt) {
},
watch: {
- main: {
- files: [ 'Gruntfile.js', 'js/reveal.js', 'css/reveal.css' ],
- tasks: 'default'
+ options: {
+ livereload: true
+ },
+ js: {
+ files: [ 'Gruntfile.js', 'js/reveal.js' ],
+ tasks: 'js'
},
theme: {
files: [ 'css/theme/source/*.scss', 'css/theme/template/*.scss' ],
- tasks: 'themes'
- }
+ tasks: 'css-themes'
+ },
+ css: {
+ files: [ 'css/reveal.scss' ],
+ tasks: 'css-core'
+ },
+ html: {
+ files: [ 'index.html']
+ }
}
});
@@ -115,15 +142,25 @@ module.exports = function(grunt) {
grunt.loadNpmTasks( 'grunt-contrib-cssmin' );
grunt.loadNpmTasks( 'grunt-contrib-uglify' );
grunt.loadNpmTasks( 'grunt-contrib-watch' );
- grunt.loadNpmTasks( 'grunt-contrib-sass' );
+ grunt.loadNpmTasks( 'grunt-sass' );
grunt.loadNpmTasks( 'grunt-contrib-connect' );
+ grunt.loadNpmTasks( 'grunt-autoprefixer' );
grunt.loadNpmTasks( 'grunt-zip' );
// Default task
- grunt.registerTask( 'default', [ 'jshint', 'cssmin', 'uglify', 'qunit' ] );
+ grunt.registerTask( 'default', [ 'css', 'js' ] );
+
+ // JS task
+ grunt.registerTask( 'js', [ 'jshint', 'uglify', 'qunit' ] );
+
+ // Theme CSS
+ grunt.registerTask( 'css-themes', [ 'sass:themes' ] );
+
+ // Core framework CSS
+ grunt.registerTask( 'css-core', [ 'sass:core', 'autoprefixer', 'cssmin' ] );
- // Theme task
- grunt.registerTask( 'themes', [ 'sass' ] );
+ // All CSS
+ grunt.registerTask( 'css', [ 'sass', 'autoprefixer', 'cssmin' ] );
// Package presentation to archive
grunt.registerTask( 'package', [ 'default', 'zip' ] );
diff --git a/LICENSE b/LICENSE
index 3866d13e153..09623076fb3 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,4 +1,4 @@
-Copyright (C) 2014 Hakim El Hattab, http://hakim.se
+Copyright (C) 2015 Hakim El Hattab, http://hakim.se
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index 40d56801c6f..753290890e6 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
A framework for easily creating beautiful presentations using HTML. [Check out the live demo](http://lab.hakim.se/reveal-js/).
-reveal.js comes with a broad range of features including [nested slides](https://github.com/hakimel/reveal.js#markup), [markdown contents](https://github.com/hakimel/reveal.js#markdown), [PDF export](https://github.com/hakimel/reveal.js#pdf-export), [speaker notes](https://github.com/hakimel/reveal.js#speaker-notes) and a [JavaScript API](https://github.com/hakimel/reveal.js#api). It's best viewed in a browser with support for CSS 3D transforms but [fallbacks](https://github.com/hakimel/reveal.js/wiki/Browser-Support) are available to make sure your presentation can still be viewed elsewhere.
+reveal.js comes with a broad range of features including [nested slides](https://github.com/hakimel/reveal.js#markup), [Markdown contents](https://github.com/hakimel/reveal.js#markdown), [PDF export](https://github.com/hakimel/reveal.js#pdf-export), [speaker notes](https://github.com/hakimel/reveal.js#speaker-notes) and a [JavaScript API](https://github.com/hakimel/reveal.js#api). It's best viewed in a modern browser but [fallbacks](https://github.com/hakimel/reveal.js/wiki/Browser-Support) are available to make sure your presentation can still be viewed elsewhere.
#### More reading:
@@ -13,7 +13,7 @@ reveal.js comes with a broad range of features including [nested slides](https:/
## Online Editor
-Presentations are written using HTML or markdown but there's also an online editor for those of you who prefer a graphical interface. Give it a try at [http://slid.es](http://slid.es).
+Presentations are written using HTML or Markdown but there's also an online editor for those of you who prefer a graphical interface. Give it a try at [http://slides.com](http://slides.com).
## Instructions
@@ -59,8 +59,8 @@ When used locally, this feature requires that reveal.js [runs from a local web s
```html
```
@@ -136,6 +136,10 @@ Reveal.initialize({
// i.e. contained within a limited portion of the screen
embedded: false,
+ // Flags if we should show a help overlay when the questionmark
+ // key is pressed
+ help: true,
+
// Number of milliseconds between automatically proceeding to the
// next slide, disabled when set to 0, this value can be overwritten
// by using a data-autoslide attribute on your slides
@@ -154,13 +158,13 @@ Reveal.initialize({
previewLinks: false,
// Transition style
- transition: 'default', // default/cube/page/concave/zoom/linear/fade/none
+ transition: 'default', // none/fade/slide/convex/concave/zoom
// Transition speed
transitionSpeed: 'default', // default/fast/slow
// Transition style for full page slide backgrounds
- backgroundTransition: 'default', // default/none/slide/concave/convex/zoom
+ backgroundTransition: 'default', // none/fade/slide/convex/concave/zoom
// Number of slides away from the current that are visible
viewDistance: 3,
@@ -175,8 +179,6 @@ Reveal.initialize({
});
```
-Note that the new default vertical centering option will break compatibility with slides that were using transitions with backgrounds (`cube` and `page`). To restore the previous behavior, set `center` to `false`.
-
The configuration can be updated after initialization using the ```configure``` method:
@@ -207,13 +209,13 @@ Reveal.initialize({
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
// Zoom in and out with Alt+click
- { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
+ { src: 'plugin/zoom-js/zoom.js', async: true },
// Speaker notes
- { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } },
+ { src: 'plugin/notes/notes.js', async: true },
// Remote control your reveal.js presentation using a touch device
- { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } },
+ { src: 'plugin/remotes/remotes.js', async: true },
// MathJax
{ src: 'plugin/math/math.js', async: true }
@@ -266,15 +268,20 @@ Reveal.configure({
autoSlide: 5000
});
```
+When this is turned on a control element will appear that enables users to pause and resume auto-sliding. Alternatively, sliding can be paused or resumed by pressing »a« on the keyboard. Sliding is paused automatically as soon as the user starts navigating. You can disable these controls by specifying ```autoSlideStoppable: false``` in your reveal.js config.
-When this is turned on a control element will appear that enables users to pause and resume auto-sliding. Sliding is also paused automatically as soon as the user starts navigating. You can disable these controls by specifying ```autoSlideStoppable: false``` in your reveal.js config.
-
-You can also override the slide duration for individual slides by using the ```data-autoslide``` attribute on individual sections:
+You can also override the slide duration for individual slides and fragments by using the ```data-autoslide``` attribute:
```html
-This will remain on screen for 10 seconds
+
+ After 2 seconds the first fragment will be shown.
+ After 10 seconds the next fragment will be shown.
+ Now, the fragment is displayed for 2 seconds before the next slide is shown.
+
```
+Whenever the auto-slide mode is resumed or paused the ```autoslideresumed``` and ```autoslidepaused``` events are fired.
+
### Keyboard Bindings
@@ -290,6 +297,23 @@ Reveal.configure({
});
```
+### Lazy Loading
+
+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.
+
+```html
+
+ ![]()
+
- Export to PDF
- Presentations can be exported to PDF, below is an example that's been uploaded to SlideShare.
-
-
+ Global State
+
+ Set data-state="something" on a slide and "something"
+ will be added as a class to the document element when the slide is open. This lets you
+ apply broader style changes, like switching the page background.
+
+
+
+
+ State Events
+
+ Additionally custom events can be triggered on a per slide basis by binding to the data-state name.
+
+
+Reveal.addEventListener( 'customevent', function() {
+ console.log( '"customevent" has fired' );
+} );
+
Take a Moment
- Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen
- during a presentation.
+ Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.
- Stellar Links
+ Much more
-
+
@@ -358,11 +377,11 @@ BY Hakim El Hattab / hakim.se
-
+
diff --git a/plugin/notes/notes.html b/plugin/notes/notes.html
index 847499d2b95..0cc8cf61276 100644
--- a/plugin/notes/notes.html
+++ b/plugin/notes/notes.html
@@ -10,127 +10,141 @@
font-family: Helvetica;
}
- #notes {
- font-size: 24px;
- width: 640px;
- margin-top: 5px;
- clear: left;
+ #current-slide,
+ #upcoming-slide,
+ #speaker-controls {
+ padding: 6px;
+ box-sizing: border-box;
+ -moz-box-sizing: border-box;
}
- #wrap-current-slide {
- width: 640px;
- height: 512px;
- float: left;
- overflow: hidden;
+ #current-slide iframe,
+ #upcoming-slide iframe {
+ width: 100%;
+ height: 100%;
+ border: 1px solid #ddd;
}
- #current-slide {
- width: 1280px;
- height: 1024px;
- border: none;
-
- -webkit-transform-origin: 0 0;
- -moz-transform-origin: 0 0;
- -ms-transform-origin: 0 0;
- -o-transform-origin: 0 0;
- transform-origin: 0 0;
-
- -webkit-transform: scale(0.5);
- -moz-transform: scale(0.5);
- -ms-transform: scale(0.5);
- -o-transform: scale(0.5);
- transform: scale(0.5);
- }
-
- #wrap-next-slide {
- width: 448px;
- height: 358px;
- float: left;
- margin: 0 0 0 10px;
- overflow: hidden;
+ #current-slide .label,
+ #upcoming-slide .label {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ font-weight: bold;
+ font-size: 14px;
+ z-index: 2;
+ color: rgba( 255, 255, 255, 0.9 );
}
- #next-slide {
- width: 1280px;
- height: 1024px;
- border: none;
-
- -webkit-transform-origin: 0 0;
- -moz-transform-origin: 0 0;
- -ms-transform-origin: 0 0;
- -o-transform-origin: 0 0;
- transform-origin: 0 0;
-
- -webkit-transform: scale(0.35);
- -moz-transform: scale(0.35);
- -ms-transform: scale(0.35);
- -o-transform: scale(0.35);
- transform: scale(0.35);
+ #current-slide {
+ position: absolute;
+ width: 65%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ padding-right: 0;
}
- .slides {
- position: relative;
- margin-bottom: 10px;
- border: 1px solid black;
- border-radius: 2px;
- background: rgb(28, 30, 32);
+ #upcoming-slide {
+ position: absolute;
+ width: 35%;
+ height: 40%;
+ right: 0;
+ top: 0;
}
- .slides span {
+ #speaker-controls {
position: absolute;
- top: 3px;
- left: 3px;
- font-weight: bold;
- font-size: 14px;
- color: rgba( 255, 255, 255, 0.9 );
- }
+ top: 40%;
+ right: 0;
+ width: 35%;
+ height: 60%;
+ overflow: auto;
- .error {
- font-weight: bold;
- color: red;
- font-size: 1.5em;
- text-align: center;
- margin-top: 10%;
+ font-size: 18px;
}
- .error code {
- font-family: monospace;
- }
+ .speaker-controls-time.hidden,
+ .speaker-controls-notes.hidden {
+ display: none;
+ }
+
+ .speaker-controls-time .label,
+ .speaker-controls-notes .label {
+ text-transform: uppercase;
+ font-weight: normal;
+ font-size: 0.66em;
+ color: #666;
+ margin: 0;
+ }
- .time {
- width: 448px;
- margin: 30px 0 0 10px;
- float: left;
- text-align: center;
- opacity: 0;
-
- -webkit-transition: opacity 0.4s;
- -moz-transition: opacity 0.4s;
- -o-transition: opacity 0.4s;
- transition: opacity 0.4s;
+ .speaker-controls-time {
+ border-bottom: 1px solid rgba( 200, 200, 200, 0.5 );
+ margin-bottom: 10px;
+ padding: 10px 16px;
+ padding-bottom: 20px;
+ cursor: pointer;
+ }
+
+ .speaker-controls-time .reset-button {
+ opacity: 0;
+ float: right;
+ color: #666;
+ text-decoration: none;
+ }
+ .speaker-controls-time:hover .reset-button {
+ opacity: 1;
+ }
+
+ .speaker-controls-time .timer,
+ .speaker-controls-time .clock {
+ width: 50%;
+ font-size: 1.9em;
+ }
+
+ .speaker-controls-time .timer {
+ float: left;
+ }
+
+ .speaker-controls-time .clock {
+ float: right;
+ text-align: right;
+ }
+
+ .speaker-controls-time span.mute {
+ color: #bbb;
+ }
+
+ .speaker-controls-notes {
+ padding: 10px 16px;
+ }
+
+ .speaker-controls-notes .value {
+ margin-top: 5px;
+ line-height: 1.4;
+ font-size: 1.2em;
+ }
+
+ .clear {
+ clear: both;
}
- .elapsed,
- .clock {
- color: #333;
- font-size: 2em;
- text-align: center;
- display: inline-block;
- padding: 0.5em;
- background-color: #eee;
- border-radius: 10px;
+ @media screen and (max-width: 1080px) {
+ #speaker-controls {
+ font-size: 16px;
+ }
}
- .elapsed h2,
- .clock h2 {
- font-size: 0.8em;
- line-height: 100%;
- margin: 0;
- color: #aaa;
+ @media screen and (max-width: 900px) {
+ #speaker-controls {
+ font-size: 14px;
+ }
}
- .elapsed .mute {
- color: #ddd;
+ @media screen and (max-width: 800px) {
+ #speaker-controls {
+ font-size: 12px;
+ }
}
@@ -138,81 +152,183 @@
+