diff options
| -rw-r--r-- | README.md | 48 | ||||
| -rw-r--r-- | css/main.css | 7 | ||||
| -rw-r--r-- | js/reveal.js | 90 |
3 files changed, 65 insertions, 80 deletions
@@ -2,7 +2,7 @@ A CSS 3D slideshow tool for quickly creating good looking HTML presentations. Doesn't _rely_ on any external libraries but [highlight.js](http://softwaremaniacs.org/soft/highlight/en/description/) is included by default for code highlighting. -Note that this requires a browser with support for CSS 3D transforms and classList. If CSS 3D support is not detected, the presentation will degrade to less exciting 2D transitions. +Note that this requires a browser with support for CSS 3D transforms and ``classList``. If CSS 3D support is not detected, the presentation will degrade to less exciting 2D transitions. You could also use a polyfill for ``classList`` to make this work in < iOS 5 and < Safari 5.1, [here's one](https://github.com/remy/polyfills/blob/master/classList.js) from [@remy](https://github.com/remy). Curious about how this looks in action? [Check out the demo page](http://lab.hakim.se/reveal-js/). @@ -12,19 +12,51 @@ Curious about how this looks in action? [Check out the demo page](http://lab.hak * http://www.ideapolisagency.com/ from [@achrafkassioui](http://twitter.com/achrafkassioui) * http://lucienfrelin.com/ from [@lucienfrelin](http://twitter.com/lucienfrelin) * http://creatorrr.github.com/ThePoet/ +* http://moduscreate.com/ [@ModusCreate](https://twitter.com/ModusCreate) [Send me a link](http://hakim.se/about/contact) if you used reveal.js for a project or presentation. +# Usage + +Markup heirarchy needs to be ``<div id="reveal"> <div class="slides"> <section>`` where the ``<section>`` represents one slide and can be repeated indefinitely. If you place multiple ``<section>``'s inside of another ``<section>`` they will be shown as vertical slides. + +At the end of your page, after ``<script src="js/reveal.js"></script>``, you need to initialize reveal. Note that all config values are optional. + +``` +Reveal.initialize({ + // Display controls in the bottom right corner + controls: true, + + // Display a presentation progress bar + progress: true, + + // If true; each slide will be pushed to the browser history + history: true, + + // Apply a 3D roll to links on hover + rollingLinks: true, + + // UI style + theme: 'default', // default/neon + + // Transition style + transition: 'default' // default/cube/page/concave/linear(2d) +}); +``` + # History -### 1.2 (master) +#### 1.2 (master) + - Big changes to DOM structure: - Previous #main wrapper is now called #reveal - Slides were moved one level deeper, into #reveal .slides - Controls and progress bar were moved into #reveal - CSS is now much more explicit, rooted at #reveal, to prevent conflicts +- Config option for disabling updates to URL, defaults to true +- Anchors with image children no longer rotate in 3D on hover -### 1.1 +#### 1.1 - Added an optional presentation progress bar - Images wrapped in anchors no longer unexpectedly flip in 3D @@ -34,7 +66,7 @@ Curious about how this looks in action? [Check out the demo page](http://lab.hak - New transitions: 'box' & 'page' - New theme: 'neon' -### 1.0 +#### 1.0 - New and improved style - Added controls in bottom right which indicate where you can navigate @@ -42,19 +74,21 @@ Curious about how this looks in action? [Check out the demo page](http://lab.hak - Code sample syntax highlighting thanks to [highlight.js](http://softwaremaniacs.org/soft/highlight/en/description/) - Initialization options (toggling controls, toggling rolling links, transition theme) -### 0.3 +#### 0.3 - Added licensing terms - Fixed broken links on touch devices -### 0.2 +#### 0.2 - Refactored code and added inline documentation - Slides now have unique URL's - A basic API to invoke navigation was added -### 0.1 +#### 0.1 + - First release +- Transitions and a white theme # License diff --git a/css/main.css b/css/main.css index 98471ed..2bff45d 100644 --- a/css/main.css +++ b/css/main.css @@ -245,7 +245,7 @@ html { transition: all .2s linear; } - #reveal a.image:hover img { + #reveal a:hover img { background: rgba(255,255,255,0.2); border-color: #13DAEC; @@ -602,6 +602,11 @@ html { #reveal.cube .slides section { padding: 30px; + + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + backface-visibility: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; diff --git a/js/reveal.js b/js/reveal.js index 88d201a..fe66dab 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -18,10 +18,8 @@ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. - * * * ############################################################################# - * * * Reveal.js is an easy to use HTML based slideshow enhanced by * sexy CSS 3D transforms. @@ -36,44 +34,6 @@ * - Reveal.navigateRight(); * - Reveal.navigateUp(); * - Reveal.navigateDown(); - * - * - * version 0.1: - * - First release - * - * version 0.2: - * - Refactored code and added inline documentation - * - Slides now have unique URL's - * - A basic API to invoke navigation was added - * - * version 0.3: - * - Added licensing terms - * - Fixed broken links on touch devices - * - * version 1.0: - * - Added controls - * - Added initialization options - * - Reveal views in fragments - * - Revamped, darker, theme - * - Tweaked markup styles (a, em, strong, b, i, blockquote, q, pre, ul, ol) - * - Support for themes at initialization (default/linear/concave) - * - Code highlighting via highlight.js - * - * version 1.1: - * - Optional progress bar UI element - * - Slide overview available via SPACE - * - Added 'transition' option for specifying transition styles - * - Added 'theme' option for specifying UI styles - * - Slides that contain nested-slides are given the 'stack' class - * - * version 1.2: - * - Big changes to DOM structure: - * - Previous #main wrapper is now called #reveal - * - Slides were moved one level deeper, into #reveal .slides - * - Controls and progress bar were moved into #reveal - * - All CSS is now much more explicit, rooted at #reveal, to prevent conflicts - * - Config option for disabling updates to URL, defaults to true - * * * @author Hakim El Hattab | http://hakim.se * @version 1.2 @@ -162,11 +122,11 @@ var Reveal = (function(){ } if( config.transition !== 'default' ) { - addClass( dom.wrapper, config.transition ); + dom.wrapper.classList.add( config.transition ); } if( config.theme !== 'default' ) { - addClass( dom.wrapper, config.theme ); + dom.wrapper.classList.add( config.theme ); } if( config.rollingLinks ) { @@ -311,8 +271,8 @@ var Reveal = (function(){ for( var i = 0, len = nodes.length; i < len; i++ ) { var node = nodes[i]; - if( node.textContent && ( !node.className || !hasClass( node, 'roll' ) ) ) { - addClass( node, 'roll' ); + if( node.textContent && !node.querySelector( 'img' ) && ( !node.className || !hasClass( node, 'roll' ) ) ) { + node.classList.add( 'roll' ); node.innerHTML = '<span data-title="'+ node.text +'">' + node.innerHTML + '</span>'; } }; @@ -327,7 +287,7 @@ var Reveal = (function(){ * can't be improved. */ function activateOverview() { - addClass( dom.wrapper, 'overview' ); + dom.wrapper.classList.add( 'overview' ); var horizontalSlides = Array.prototype.slice.call( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ); @@ -343,7 +303,7 @@ var Reveal = (function(){ hslide.style.OTransform = htransform; hslide.style.transform = htransform; - if( !hasClass( hslide, 'stack' ) ) { + if( !hslide.classList.contains( 'stack' ) ) { // Navigate to this slide on click hslide.addEventListener( 'click', onOverviewSlideClicked, true ); } @@ -374,7 +334,7 @@ var Reveal = (function(){ * active slide. */ function deactivateOverview() { - removeClass( dom.wrapper, 'overview' ); + dom.wrapper.classList.remove( 'overview' ); var slides = Array.prototype.slice.call( document.querySelectorAll( '#reveal .slides section' ) ); @@ -401,7 +361,7 @@ var Reveal = (function(){ * false otherwise */ function overviewIsActive() { - return hasClass( dom.wrapper, 'overview' ); + return dom.wrapper.classList.contains( 'overview' ); } /** @@ -467,7 +427,7 @@ var Reveal = (function(){ // If this element contains vertical slides if( slide.querySelector( 'section' ) ) { - addClass( slide, 'stack' ); + slide.classList.add( 'stack' ); } } } @@ -512,13 +472,13 @@ var Reveal = (function(){ // Remove the 'enabled' class from all directions [ dom.controlsLeft, dom.controlsRight, dom.controlsUp, dom.controlsDown ].forEach( function( node ) { - removeClass( node, 'enabled' ); + node.classList.remove( 'enabled' ); } ) - if( routes.left ) addClass( dom.controlsLeft, 'enabled' ); - if( routes.right ) addClass( dom.controlsRight, 'enabled' ); - if( routes.up ) addClass( dom.controlsUp, 'enabled' ); - if( routes.down ) addClass( dom.controlsDown, 'enabled' ); + if( routes.left ) dom.controlsLeft.classList.add( 'enabled' ); + if( routes.right ) dom.controlsRight.classList.add( 'enabled' ); + if( routes.up ) dom.controlsUp.classList.add( 'enabled' ); + if( routes.down ) dom.controlsDown.classList.add( 'enabled' ); } /** @@ -580,7 +540,7 @@ var Reveal = (function(){ if( document.querySelector( VERTICAL_SLIDES_SELECTOR + '.present' ) ) { var verticalFragments = document.querySelectorAll( VERTICAL_SLIDES_SELECTOR + '.present .fragment:not(.visible)' ); if( verticalFragments.length ) { - addClass( verticalFragments[0], 'visible' ); + verticalFragments[0].classList.add( 'visible' ); return true; } } @@ -588,7 +548,7 @@ var Reveal = (function(){ else { var horizontalFragments = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.present .fragment:not(.visible)' ); if( horizontalFragments.length ) { - addClass( horizontalFragments[0], 'visible' ); + horizontalFragments[0].classList.add( 'visible' ); return true; } } @@ -607,7 +567,7 @@ var Reveal = (function(){ if( document.querySelector( VERTICAL_SLIDES_SELECTOR + '.present' ) ) { var verticalFragments = document.querySelectorAll( VERTICAL_SLIDES_SELECTOR + '.present .fragment.visible' ); if( verticalFragments.length ) { - removeClass( verticalFragments[ verticalFragments.length - 1 ], 'visible' ); + verticalFragments[ verticalFragments.length - 1 ].classList.remove( 'visible' ); return true; } } @@ -615,7 +575,7 @@ var Reveal = (function(){ else { var horizontalFragments = document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR + '.present .fragment.visible' ); if( horizontalFragments.length ) { - removeClass( horizontalFragments[ horizontalFragments.length - 1 ], 'visible' ); + horizontalFragments[ horizontalFragments.length - 1 ].classList.remove( 'visible' ); return true; } } @@ -623,20 +583,6 @@ var Reveal = (function(){ return false; } - function hasClass( node, klass ) { - return !!node.className.match( klass ); - } - - function addClass( node, klass ) { - if( !hasClass( node, klass ) ) { - node.className += ' ' + klass; - } - } - - function removeClass( node, klass ) { - node.className = node.className.replace( klass, '' ); - } - /** * Triggers a navigation to the specified indices. * |