From daecc258d71521d25228d37b0d77fc6ae75564c5 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 26 Dec 2011 21:29:00 -0800 Subject: [PATCH] major, non backwards compatible, restructuring of DOM tree --- README.md | 7 + css/main.css | 229 +++++++++++++++++--------------- index.html | 358 +++++++++++++++++++++++---------------------------- js/reveal.js | 45 ++++--- 4 files changed, 318 insertions(+), 321 deletions(-) diff --git a/README.md b/README.md index 5c3842f..467e3b2 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,13 @@ Curious about how this looks in action? [Check out the demo page](http://lab.hak # History +### 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 +- CSS is now much more explicit, rooted at #reveal, to prevent conflicts + ### 1.1 - Added an optional presentation progress bar diff --git a/css/main.css b/css/main.css index 0eeaef0..74e1fea 100644 --- a/css/main.css +++ b/css/main.css @@ -53,7 +53,10 @@ html { /********************************************* * HEADERS *********************************************/ -h1, h2, h3, h4 { +#reveal h1, +#reveal h2, +#reveal h3, +#reveal h4 { margin: 0 0 20px 0; color: #eee; @@ -66,31 +69,31 @@ h1, h2, h3, h4 { text-shadow: 0px 0px 6px rgba(0,0,0,0.2); } -h1 { font-size: 136px; } -h2 { font-size: 76px; } -h3 { font-size: 56px; } -h4 { font-size: 36px; } +#reveal h1 { font-size: 136px; } +#reveal h2 { font-size: 76px; } +#reveal h3 { font-size: 56px; } +#reveal h4 { font-size: 36px; } -h1.inverted, -h2.inverted, -h3.inverted, -h4.inverted { +#reveal h1.inverted, +#reveal h2.inverted, +#reveal h3.inverted, +#reveal h4.inverted { color: #fff; text-shadow: 0px 0px 2px rgba(0,0,0,0.2); } -h1 { +#reveal h1 { text-shadow: 0 1px 0 #ccc, - 0 2px 0 #c9c9c9, - 0 3px 0 #bbb, - 0 4px 0 #b9b9b9, - 0 5px 0 #aaa, - 0 6px 1px rgba(0,0,0,.1), - 0 0 5px rgba(0,0,0,.1), - 0 1px 3px rgba(0,0,0,.3), - 0 3px 5px rgba(0,0,0,.2), - 0 5px 10px rgba(0,0,0,.25), - 0 20px 20px rgba(0,0,0,.15); + 0 2px 0 #c9c9c9, + 0 3px 0 #bbb, + 0 4px 0 #b9b9b9, + 0 5px 0 #aaa, + 0 6px 1px rgba(0,0,0,.1), + 0 0 5px rgba(0,0,0,.1), + 0 1px 3px rgba(0,0,0,.3), + 0 3px 5px rgba(0,0,0,.2), + 0 5px 10px rgba(0,0,0,.25), + 0 20px 20px rgba(0,0,0,.15); } @@ -98,7 +101,7 @@ h1 { * VIEW FRAGMENTS *********************************************/ -#reveal section .fragment { +#reveal .slides section .fragment { opacity: 0; -webkit-transition: all .2s ease; @@ -107,7 +110,7 @@ h1 { -o-transition: all .2s ease; transition: all .2s ease; } - #reveal section .fragment.visible { + #reveal .slides section .fragment.visible { opacity: 1; } @@ -116,40 +119,43 @@ h1 { * DEFAULT ELEMENT STYLES *********************************************/ -#reveal>section { +#reveal .slides section { line-height: 1.2em; font-weight: normal; } -strong, b { +#reveal strong, +#reveal b { font-weight: bold; } -em, i { +#reveal em, +#reveal i { font-style: italic; } -ol, ul { +#reveal ol, +#reveal ul { display: inline-block; text-align: left; margin: 0 auto; } -ol { +#reveal ol { list-style: decimal; list-style-position: inside; } -ul { +#reveal ul { list-style: disc; } -p { +#reveal p { margin-bottom: 10px; } -blockquote { +#reveal blockquote { display: block; position: relative; width: 70%; @@ -160,14 +166,14 @@ blockquote { background: rgba(255, 255, 255, 0.05); box-shadow: 0px 0px 2px rgba(0,0,0,0.2); } - blockquote:before { + #reveal blockquote:before { content: '“'; } - blockquote:after { + #reveal blockquote:after { content: '”'; } -pre { +#reveal pre { display: block; position: relative; width: 90%; @@ -183,27 +189,27 @@ pre { box-shadow: 0px 0px 6px rgba(0,0,0,0.3); } -code { +#reveal code { font-family: monospace; } -small { +#reveal small { font-size: 60%; line-height: 1em; vertical-align: top; } -q { +#reveal q { font-style: italic; } - q:before { + #reveal q:before { content: '“'; } - q:after { + #reveal q:after { content: '”'; } -a:not(.image) { +#reveal a:not(.image) { color: hsl(185, 85%, 50%); text-decoration: none; @@ -214,7 +220,7 @@ a:not(.image) { transition: all .2s ease; } - a:not(.image):hover { + #reveal a:not(.image):hover { color: hsl(185, 85%, 70%); background: hsla(185, 25%, 20%, 0.4); text-shadow: none; @@ -222,7 +228,7 @@ a:not(.image) { border-radius: 2px; } -section img { +#reveal section img { margin: 30px 0 0 0; background: rgba(255,255,255,0.12); border: 4px solid #eee; @@ -239,7 +245,7 @@ section img { transition: all .2s linear; } - a.image:hover img { + #reveal a.image:hover img { background: rgba(255,255,255,0.2); border-color: #13DAEC; @@ -254,7 +260,7 @@ section img { * CONTROLS *********************************************/ -.controls { +#reveal .controls { display: none; position: fixed; width: 100px; @@ -264,36 +270,36 @@ section img { bottom: 0; } - .controls a { + #reveal .controls a { font-size: 30px; position: absolute; opacity: 0.1; color: #fff; } - .controls a.enabled { + #reveal .controls a.enabled { opacity: 0.6; color: hsl(185, 85%, 70%); text-shadow: 0px 0px 2px hsla(185, 45%, 70%, 0.3); } - .controls a.enabled:active { + #reveal .controls a.enabled:active { margin-top: 1px; } - .controls .left { + #reveal .controls .left { top: 30px; } - .controls .right { + #reveal .controls .right { left: 60px; top: 30px; } - .controls .up { + #reveal .controls .up { left: 30px; } - .controls .down { + #reveal .controls .down { left: 30px; top: 60px; @@ -304,7 +310,7 @@ section img { * PROGRESS BAR *********************************************/ -.progress { +#reveal .progress { position: fixed; display: none; height: 4px; @@ -315,7 +321,7 @@ section img { background: rgba(0,0,0,0.2); } - .progress span { + #reveal .progress span { display: block; background: hsl(185, 85%, 50%); height: 100%; @@ -332,7 +338,7 @@ section img { * ROLLING LINKS *********************************************/ -.roll { +#reveal .roll { display: inline-block; overflow: hidden; @@ -348,11 +354,11 @@ section img { -ms-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } - .roll:hover { + #reveal .roll:hover { background: none; text-shadow: none; } -.roll span { +#reveal .roll span { display: block; position: relative; padding: 0 2px; @@ -374,7 +380,7 @@ section img { -ms-transform-style: preserve-3d; transform-style: preserve-3d; } - .roll:hover span { + #reveal .roll:hover span { background: rgba(0,0,0,0.5); -webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg ); @@ -382,7 +388,7 @@ section img { -ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg ); transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg ); } -.roll span:after { +#reveal .roll span:after { content: attr(data-title); display: block; @@ -410,7 +416,7 @@ section img { * SLIDES *********************************************/ -#reveal { +#reveal .slides { position: absolute; width: 900px; height: 600px; @@ -422,6 +428,12 @@ section img { padding: 20px 0px; text-align: center; + + -webkit-transition: -webkit-perspective .4s ease; + -moz-transition: -moz-perspective .4s ease; + -ms-transition: -ms-perspective .4s ease; + -o-transition: -o-perspective .4s ease; + transition: perspective .4s ease; -webkit-perspective: 600px; -moz-perspective: 600px; @@ -434,8 +446,8 @@ section img { perspective-origin: 50% 25%; } -#reveal>section, -#reveal>section>section { +#reveal .slides>section, +#reveal .slides>section>section { display: none; position: absolute; width: 100%; @@ -455,7 +467,7 @@ section img { transition: all 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); } -#reveal section.present { +#reveal .slides>section.present { display: block; z-index: 11; opacity: 1; @@ -466,7 +478,7 @@ section img { * DEFAULT TRANSITION *********************************************/ -#reveal section.past { +#reveal .slides>section.past { display: block; opacity: 0; @@ -475,7 +487,7 @@ section img { -ms-transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) rotateY(-90deg) translate3d(-100%, 0, 0); } -#reveal section.future { +#reveal .slides>section.future { display: block; opacity: 0; @@ -485,7 +497,7 @@ section img { transform: translate3d(100%, 0, 0) rotateY(90deg) translate3d(100%, 0, 0); } -#reveal section>section.past { +#reveal .slides>section>section.past { display: block; opacity: 0; @@ -494,7 +506,7 @@ section img { -ms-transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) rotateX(70deg) translate3d(0, -50%, 0); } -#reveal section>section.future { +#reveal .slides>section>section.future { display: block; opacity: 0; @@ -509,26 +521,26 @@ section img { * CONCAVE TRANSITION *********************************************/ -.concave #reveal>section.past { +#reveal.concave .slides>section.past { -webkit-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) rotateY(90deg) translate3d(-100%, 0, 0); } -.concave #reveal>section.future { +#reveal.concave .slides>section.future { -webkit-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); -moz-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) rotateY(-90deg) translate3d(100%, 0, 0); } -.concave #reveal section>section.past { +#reveal.concave .slides>section>section.past { -webkit-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); -moz-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); -ms-transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); transform: translate3d(0, -80%, 0) rotateX(-70deg) translate3d(0, -80%, 0); } -.concave #reveal section>section.future { +#reveal.concave .slides>section>section.future { -webkit-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); -moz-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); -ms-transform: translate3d(0, 80%, 0) rotateX(70deg) translate3d(0, 80%, 0); @@ -540,14 +552,14 @@ section img { * LINEAR TRANSITION *********************************************/ -.linear #reveal>section.past { +#reveal.linear .slides>section.past { -webkit-transform: translate(-150%, 0); -moz-transform: translate(-150%, 0); -ms-transform: translate(-150%, 0); -o-transform: translate(-150%, 0); transform: translate(-150%, 0); } -.linear #reveal>section.future { +#reveal.linear .slides>section.future { -webkit-transform: translate(150%, 0); -moz-transform: translate(150%, 0); -ms-transform: translate(150%, 0); @@ -555,14 +567,14 @@ section img { transform: translate(150%, 0); } -.linear #reveal section>section.past { +#reveal.linear .slides>section>section.past { -webkit-transform: translate(0, -150%); -moz-transform: translate(0, -150%); -ms-transform: translate(0, -150%); -o-transform: translate(0, -150%); transform: translate(0, -150%); } -.linear #reveal section>section.future { +#reveal.linear .slides>section>section.future { -webkit-transform: translate(0, 150%); -moz-transform: translate(0, 150%); -ms-transform: translate(0, 150%); @@ -574,7 +586,7 @@ section img { * BOX TRANSITION *********************************************/ -.box #reveal { +#reveal.box .slides { margin-top: -350px; -webkit-perspective-origin: 50% 25%; @@ -588,14 +600,14 @@ section img { perspective: 1300px; } -.box #reveal section { +#reveal.box .slides section { padding: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } - .box #reveal section:not(.stack):before { + #reveal.box .slides section:not(.stack):before { content: ''; position: absolute; display: block; @@ -612,7 +624,7 @@ section img { -o-transform: translateZ( -20px ); transform: translateZ( -20px ); } - .box #reveal section:not(.stack):after { + #reveal.box .slides section:not(.stack):after { content: ''; position: absolute; display: block; @@ -633,12 +645,12 @@ section img { transform: translateZ(-90px) rotateX( 65deg ); } -.box #reveal section.stack { +#reveal.box .slides>section.stack { padding: 0; background: none; } -.box #reveal>section.past { +#reveal.box .slides>section.past { -webkit-transform-origin: 100% 0%; -moz-transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; @@ -650,7 +662,7 @@ section img { transform: translate3d(-100%, 0, 0) rotateY(-90deg); } -.box #reveal>section.future { +#reveal.box .slides>section.future { -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; @@ -662,7 +674,7 @@ section img { transform: translate3d(100%, 0, 0) rotateY(90deg); } -.box #reveal section>section.past { +#reveal.box .slides>section>section.past { -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; @@ -674,7 +686,7 @@ section img { transform: translate3d(0, -100%, 0) rotateX(90deg); } -.box #reveal section>section.future { +#reveal.box .slides>section>section.future { -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; @@ -691,7 +703,7 @@ section img { * PAGE TRANSITION *********************************************/ -.page #reveal { +#reveal.page .slides { margin-top: -350px; -webkit-perspective-origin: 50% 50%; @@ -705,17 +717,17 @@ section img { perspective: 3000px; } -.page #reveal section { +#reveal.page .slides section { padding: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } - .page #reveal section.past { + #reveal.page .slides section.past { z-index: 12; } - .page #reveal section:not(.stack):before { + #reveal.page .slides section:not(.stack):before { content: ''; position: absolute; display: block; @@ -731,7 +743,7 @@ section img { -o-transform: translateZ( -20px ); transform: translateZ( -20px ); } - .page #reveal section:not(.stack):after { + #reveal.page .slides section:not(.stack):after { content: ''; position: absolute; display: block; @@ -748,12 +760,12 @@ section img { -webkit-transform: translateZ(-90px) rotateX( 65deg ); } -.page #reveal section.stack { +#reveal.page .slides>section.stack { padding: 0; background: none; } -.page #reveal>section.past { +#reveal.page .slides>section.past { -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; @@ -765,7 +777,7 @@ section img { transform: translate3d(-40%, 0, 0) rotateY(-80deg); } -.page #reveal>section.future { +#reveal.page .slides>section.future { -webkit-transform-origin: 100% 0%; -moz-transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; @@ -777,7 +789,7 @@ section img { transform: translate3d(0, 0, 0); } -.page #reveal section>section.past { +#reveal.page .slides>section>section.past { -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; @@ -789,7 +801,7 @@ section img { transform: translate3d(0, -40%, 0) rotateX(80deg); } -.page #reveal section>section.future { +#reveal.page .slides>section>section.future { -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; @@ -806,18 +818,18 @@ section img { * NEON THEME *********************************************/ -.neon a, -.neon a:hover, -.neon .controls a.enabled { +#reveal.neon a, +#reveal.neon a:hover, +#reveal.neon .controls a.enabled { color: #5de048; } -.neon .progress span, -.neon .roll span:after { +#reveal.neon .progress span, +#reveal.neon .roll span:after { background: #5de048; } -a.image:hover img { +#reveal.neon a.image:hover img { border-color: #5de048; } @@ -826,28 +838,35 @@ a.image:hover img { * OVERVIEW *********************************************/ -.overview #reveal section { +#reveal.overview .slides { + -webkit-perspective: 700px; + -moz-perspective: 700px; + -ms-perspective: 700px; + perspective: 700px; +} + +#reveal.overview .slides section { padding: 20px 0; opacity: 1; cursor: pointer; background: rgba(0,0,0,0.1); } -.overview #reveal section:after, -.overview #reveal section:before { +#reveal.overview .slides section:after, +#reveal.overview .slides section:before { display: none !important; } -.overview #reveal section>section { +#reveal.overview .slides section>section { opacity: 1; cursor: pointer; } - .overview #reveal section:hover { + #reveal.overview .slides section:hover { background: rgba(0,0,0,0.3); } - .overview #reveal section.present { + #reveal.overview .slides section.present { background: rgba(0,0,0,0.3); } -.overview #reveal section.stack { +#reveal.overview .slides>section.stack { background: none; padding: 0; } diff --git a/index.html b/index.html index 947510c..93bb2dd 100644 --- a/index.html +++ b/index.html @@ -16,182 +16,185 @@ -
-
-

Reveal.js

-

A CSS 3D Slideshow

- -
- -
-

Heads Up

-

- reveal.js is an easy to use, HTML based, presentation tool. You'll need a modern browser with - support for CSS 3D transforms to see it in its full glory. -

-

- - Hakim El Hattab / @hakimel -

-
- - -
+ +
+
+

Reveal.js

+

A CSS 3D Slideshow

+ +
+
-

Vertical Slides

+

Heads Up

- Slides can be nested inside of other slides,
- try pressing down. + reveal.js is an easy to use, HTML based, presentation tool. You'll need a modern browser with + support for CSS 3D transforms to see it in its full glory. +

+

+ - Hakim El Hattab / @hakimel

- - -
+ +
-

Basement Level 1

-

Press down or up to navigate.

+
+

Vertical Slides

+

+ Slides can be nested inside of other slides,
+ try pressing down. +

+ + + +
+
+

Basement Level 1

+

Press down or up to navigate.

+
+
+

Basement Level 2

+

Cornify

+ +
+
+

Basement Level 3

+

That's it, time to go back up.

+ + + +
+
-

Basement Level 2

-

Cornify

- +

Holistic Overview

+

+ Press SPACE to enter the slide overview. This allows you to navigate faster + in larger decks using the keyboard. +

+

+ This feature is highly experimental and will be updated to boost performance. +

+
-

Basement Level 3

-

That's it, time to go back up.

- - - +

Marvelous Unordered List

+
    +
  • No order here
    • +
  • Or here
    • +
  • Or here
    • +
  • Or here
    • +
-
- -
-

Holistic Overview

-

- Press SPACE to enter the slide overview. This allows you to navigate faster - in larger decks using the keyboard. -

-

- This feature is highly experimental and will be updated to boost performance. -

-
-
-

Marvelous Unordered List

-
    -
  • No order here
    • -
  • Or here
    • -
  • Or here
    • -
  • Or here
    • -
-
- -
-

Fantastic Ordered List

-
    -
  1. One is smaller than...
    2. -
  2. Two is smaller than...
    3. -
  3. Three!
    4. -
-
- -
-

Clever Quotes

-

- These guys come in two forms, inline: - The nice thing about standards is that there are so many to choose from and block: -

-
- For years there has been a theory that millions of monkeys typing at random on millions of typewriters would - reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue. -
-
- -
-

Pretty Code

- 

-var supports3DTransforms =  document.body.style['webkitPerspective'] !== undefined || 
-				document.body.style['MozPerspective'] !== undefined ||
-				document.body.style['perspective'] !== undefined;
-
-function linkify( selector ) {
-    if( supports3DTransforms ) {
-        
-        var nodes = document.querySelectorAll( selector );
-
-        for( var i = 0, len = nodes.length; i < len; i++ ) {
-            var node = nodes[i];
-
-            if( !node.className || !node.className.match( /roll/g ) ) {
-                node.className += ' roll';
-                node.innerHTML = '' + node.innerHTML + '';
-            }
-        };
-    }
-}
+				

+					
Fantastic Ordered List

+					
    
+						
  1. One is smaller than...
    2. 
+						
  2. Two is smaller than...
    3. 
+						
  3. Three!
    4. 
+					

+				

 
-linkify( 'a' );
-
-

Courtesy of highlight.js.

-
- -
-

Intergalactic Interconnections

-

- You can link between slides internally,
- like this. -

-
+
+

Clever Quotes

+

+ These guys come in two forms, inline: + The nice thing about standards is that there are so many to choose from and block: +

+
+ For years there has been a theory that millions of monkeys typing at random on millions of typewriters would + reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue. +
+
+ +
+

Pretty Code

+ 

+	var supports3DTransforms =  document.body.style['webkitPerspective'] !== undefined || 
+					document.body.style['MozPerspective'] !== undefined ||
+					document.body.style['perspective'] !== undefined;
+
+	function linkify( selector ) {
+	    if( supports3DTransforms ) {
+	        
+	        var nodes = document.querySelectorAll( selector );
+
+	        for( var i = 0, len = nodes.length; i < len; i++ ) {
+	            var node = nodes[i];
+
+	            if( !node.className || !node.className.match( /roll/g ) ) {
+	                node.className += ' roll';
+	                node.innerHTML = '' + node.innerHTML + '';
+	            }
+	        };
+	    }
+	}
+
+	linkify( 'a' );
+
+

Courtesy of highlight.js.

+
+ +
+

Intergalactic Interconnections

+

+ You can link between slides internally,
+ like this. +

+
-
-

Fragmented Views

-

Hit the next arrow...

-

... to step through ...

-
    -
  1. any type
    2. -
  2. of view
    3. -
  3. fragments
    4. -
-
- -
-

Spectacular image!

- - - -
- -
-

Stellar Links

- -
- -
-

THE END

-

BY Hakim El Hattab / hakim.se

-
+
+

Fragmented Views

+

Hit the next arrow...

+

... to step through ...

+
    +
  1. any type
    2. +
  2. of view
    3. +
  3. fragments
    4. +
+
+ +
+

Spectacular image!

+ + + +
+ +
+

Stellar Links

+ +
+ +
+

THE END

+

BY Hakim El Hattab / hakim.se

+
+
+ + + + + +
- - - -
- - - - - -
- - - - - - - - - -
- - Fork me on GitHub - - \ No newline at end of file diff --git a/js/reveal.js b/js/reveal.js index 14f2a71..c3b5cc9 100644 --- a/js/reveal.js +++ b/js/reveal.js @@ -67,7 +67,11 @@ * - Slides that contain nested-slides are given the 'stack' class * * version 1.2: - * - Main container was renamed from #main to #reveal + * - 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 * * * @author Hakim El Hattab | http://hakim.se @@ -75,8 +79,8 @@ */ var Reveal = (function(){ - var HORIZONTAL_SLIDES_SELECTOR = '#reveal>section', - VERTICAL_SLIDES_SELECTOR = 'section.present>section', + var HORIZONTAL_SLIDES_SELECTOR = '#reveal .slides>section', + VERTICAL_SLIDES_SELECTOR = '#reveal .slides>section.present>section', // The horizontal and verical index of the currently active slide indexh = 0, @@ -105,13 +109,14 @@ var Reveal = (function(){ */ function initialize( options ) { // Cache references to DOM elements - dom.progress = document.querySelector( 'body>.progress' ); - dom.progressbar = document.querySelector( 'body>.progress span' ); - dom.controls = document.querySelector( '.controls' ); - dom.controlsLeft = document.querySelector( '.controls .left' ); - dom.controlsRight = document.querySelector( '.controls .right' ); - dom.controlsUp = document.querySelector( '.controls .up' ); - dom.controlsDown = document.querySelector( '.controls .down' ); + dom.wrapper = document.querySelector( '#reveal' ); + dom.progress = document.querySelector( '#reveal .progress' ); + dom.progressbar = document.querySelector( '#reveal .progress span' ); + dom.controls = document.querySelector( '#reveal .controls' ); + dom.controlsLeft = document.querySelector( '#reveal .controls .left' ); + dom.controlsRight = document.querySelector( '#reveal .controls .right' ); + dom.controlsUp = document.querySelector( '#reveal .controls .up' ); + dom.controlsDown = document.querySelector( '#reveal .controls .down' ); // Bind all view events document.addEventListener('keydown', onDocumentKeyDown, false); @@ -143,11 +148,11 @@ var Reveal = (function(){ } if( config.transition !== 'default' ) { - document.body.classList.add( config.transition ); + dom.wrapper.classList.add( config.transition ); } if( config.theme !== 'default' ) { - document.body.classList.add( config.theme ); + dom.wrapper.classList.add( config.theme ); } if( config.rollingLinks ) { @@ -270,7 +275,7 @@ var Reveal = (function(){ */ function linkify() { if( supports3DTransforms ) { - var nodes = document.querySelectorAll( 'section a:not(.image)' ); + var nodes = document.querySelectorAll( '#reveal .slides section a:not(.image)' ); for( var i = 0, len = nodes.length; i < len; i++ ) { var node = nodes[i]; @@ -291,7 +296,7 @@ var Reveal = (function(){ * can't be improved. */ function activateOverview() { - document.body.classList.add( 'overview' ); + dom.wrapper.classList.add( 'overview' ); var horizontalSlides = Array.prototype.slice.call( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ) ); @@ -307,8 +312,10 @@ var Reveal = (function(){ hslide.style.OTransform = htransform; hslide.style.transform = htransform; - // Navigate to this slide on click - hslide.addEventListener( 'click', onOverviewSlideClicked, true ); + if( !hslide.classList.contains( 'stack' ) ) { + // Navigate to this slide on click + hslide.addEventListener( 'click', onOverviewSlideClicked, true ); + } var verticalSlides = Array.prototype.slice.call( hslide.querySelectorAll( 'section' ) ); @@ -336,9 +343,9 @@ var Reveal = (function(){ * active slide. */ function deactivateOverview() { - document.body.classList.remove( 'overview' ); + dom.wrapper.classList.remove( 'overview' ); - var slides = Array.prototype.slice.call( document.querySelectorAll( '#reveal section' ) ); + var slides = Array.prototype.slice.call( document.querySelectorAll( '#reveal .slides section' ) ); for( var i = 0, len = slides.length; i < len; i++ ) { var element = slides[i]; @@ -363,7 +370,7 @@ var Reveal = (function(){ * false otherwise */ function overviewIsActive() { - return document.body.classList.contains( 'overview' ); + return dom.wrapper.classList.contains( 'overview' ); } /** -- 2.26.2