now capturing data-state on slides and lifting it to document element classList when slide is open
This commit is contained in:
parent
0cd3b8d430
commit
831236890c
@ -67,6 +67,7 @@ Reveal.initialize({
|
|||||||
- Delayed updates to URL hash to work around a bug in Chrome
|
- Delayed updates to URL hash to work around a bug in Chrome
|
||||||
- Included a classList polyfill for IE9
|
- Included a classList polyfill for IE9
|
||||||
- Support for wireless presenter keys
|
- Support for wireless presenter keys
|
||||||
|
- States can now be applied as classes on the document element by adding data-state on a slide
|
||||||
|
|
||||||
#### 1.1
|
#### 1.1
|
||||||
|
|
||||||
|
23
css/main.css
23
css/main.css
@ -897,6 +897,29 @@ html {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*********************************************
|
||||||
|
* STATES
|
||||||
|
*********************************************/
|
||||||
|
|
||||||
|
.blur body {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.blur #reveal * {
|
||||||
|
color: rgba( 255, 255, 255, 0 );
|
||||||
|
text-shadow: 0px 0px 5px #fff;
|
||||||
|
|
||||||
|
-webkit-transition: color .8s ease,
|
||||||
|
text-shadow .8s ease;
|
||||||
|
-moz-transition: color .8s ease,
|
||||||
|
text-shadow .8s ease;
|
||||||
|
-ms-transition: color .8s ease,
|
||||||
|
text-shadow .8s ease;
|
||||||
|
-o-transition: color .8s ease,
|
||||||
|
text-shadow .8s ease;
|
||||||
|
transition: color .8s ease,
|
||||||
|
text-shadow .8s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
11
index.html
11
index.html
@ -79,7 +79,7 @@
|
|||||||
<section>
|
<section>
|
||||||
<h2>Holistic Overview</h2>
|
<h2>Holistic Overview</h2>
|
||||||
<p>
|
<p>
|
||||||
Press <strong>SPACE</strong> to enter the slide overview.
|
Press <strong>SPACE</strong> to enter the slide overview!
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@ -114,6 +114,15 @@
|
|||||||
</ol>
|
</ol>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<section data-state="blur">
|
||||||
|
<h2>Global State</h2>
|
||||||
|
<p>
|
||||||
|
If you set <code>data-state="something"</code> on a slide, <code>"something"</code>
|
||||||
|
will be added as a class to the document element when the slide is open. Like the <code>"blur"</code>
|
||||||
|
effect on this slide.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<h2>Clever Quotes</h2>
|
<h2>Clever Quotes</h2>
|
||||||
<p>
|
<p>
|
||||||
|
22
js/reveal.js
22
js/reveal.js
@ -58,6 +58,11 @@ var Reveal = (function(){
|
|||||||
rollingLinks: true
|
rollingLinks: true
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// Slides may hold a data-state attribute which we pick up and apply
|
||||||
|
// as a class to the body. This list contains the combined state of
|
||||||
|
// all current slides.
|
||||||
|
state = [],
|
||||||
|
|
||||||
// Cached references to DOM elements
|
// Cached references to DOM elements
|
||||||
dom = {},
|
dom = {},
|
||||||
|
|
||||||
@ -462,6 +467,13 @@ var Reveal = (function(){
|
|||||||
|
|
||||||
// Mark the current slide as present
|
// Mark the current slide as present
|
||||||
slides[index].classList.add( 'present' );
|
slides[index].classList.add( 'present' );
|
||||||
|
|
||||||
|
// If this slide has a state associated with it, add it
|
||||||
|
// onto the current state of the deck
|
||||||
|
var slideState = slides[index].dataset.state;
|
||||||
|
if( slideState ) {
|
||||||
|
state = state.concat( slideState.split( ' ' ) );
|
||||||
|
}
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
// Since there are no slides we can't be anywhere beyond the
|
// Since there are no slides we can't be anywhere beyond the
|
||||||
@ -478,9 +490,19 @@ var Reveal = (function(){
|
|||||||
* set indices.
|
* set indices.
|
||||||
*/
|
*/
|
||||||
function slide() {
|
function slide() {
|
||||||
|
// Clean up the current state
|
||||||
|
while( state.length ) {
|
||||||
|
document.documentElement.classList.remove( state.pop() );
|
||||||
|
}
|
||||||
|
|
||||||
indexh = updateSlides( HORIZONTAL_SLIDES_SELECTOR, indexh );
|
indexh = updateSlides( HORIZONTAL_SLIDES_SELECTOR, indexh );
|
||||||
indexv = updateSlides( VERTICAL_SLIDES_SELECTOR, indexv );
|
indexv = updateSlides( VERTICAL_SLIDES_SELECTOR, indexv );
|
||||||
|
|
||||||
|
// Apply the new state
|
||||||
|
for( var i = 0, len = state.length; i < len; i++ ) {
|
||||||
|
document.documentElement.classList.add( state[i] );
|
||||||
|
}
|
||||||
|
|
||||||
// Update progress if enabled
|
// Update progress if enabled
|
||||||
if( config.progress ) {
|
if( config.progress ) {
|
||||||
dom.progressbar.style.width = ( indexh / ( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ).length - 1 ) ) * window.innerWidth + 'px';
|
dom.progressbar.style.width = ( indexh / ( document.querySelectorAll( HORIZONTAL_SLIDES_SELECTOR ).length - 1 ) ) * window.innerWidth + 'px';
|
||||||
|
Loading…
Reference in New Issue
Block a user