Added slide numbers options and the css files updated as well.
the *.min.js didn't chaged yet.
This commit is contained in:
parent
9da2921b74
commit
7b63cda19d
|
@ -391,6 +391,15 @@ body {
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.reveal .controls .slide-number {
|
||||||
|
font-size: 11px;
|
||||||
|
top: 10px;
|
||||||
|
left: -10px;
|
||||||
|
opacity: 0.5;
|
||||||
|
width: 45px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.reveal .controls div.enabled {
|
.reveal .controls div.enabled {
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
@ -115,6 +115,10 @@ body {
|
||||||
.reveal .controls div.navigate-down.enabled {
|
.reveal .controls div.navigate-down.enabled {
|
||||||
border-top-color: #8b743d; }
|
border-top-color: #8b743d; }
|
||||||
|
|
||||||
|
.reveal .controls .slide-number {
|
||||||
|
color: #8b743d;
|
||||||
|
}
|
||||||
|
|
||||||
.reveal .controls div.navigate-left.enabled:hover {
|
.reveal .controls div.navigate-left.enabled:hover {
|
||||||
border-right-color: #c0a86e; }
|
border-right-color: #c0a86e; }
|
||||||
|
|
||||||
|
|
|
@ -115,6 +115,10 @@ body {
|
||||||
.reveal .controls div.navigate-down.enabled {
|
.reveal .controls div.navigate-down.enabled {
|
||||||
border-top-color: #13daec; }
|
border-top-color: #13daec; }
|
||||||
|
|
||||||
|
.reveal .controls .slide-number {
|
||||||
|
color: #13daec;
|
||||||
|
}
|
||||||
|
|
||||||
.reveal .controls div.navigate-left.enabled:hover {
|
.reveal .controls div.navigate-left.enabled:hover {
|
||||||
border-right-color: #71e9f4; }
|
border-right-color: #71e9f4; }
|
||||||
|
|
||||||
|
|
|
@ -115,6 +115,10 @@ body {
|
||||||
.reveal .controls div.navigate-down.enabled {
|
.reveal .controls div.navigate-down.enabled {
|
||||||
border-top-color: #268bd2; }
|
border-top-color: #268bd2; }
|
||||||
|
|
||||||
|
.reveal .controls .slide-number {
|
||||||
|
color: #268bd2;
|
||||||
|
}
|
||||||
|
|
||||||
.reveal .controls div.navigate-left.enabled:hover {
|
.reveal .controls div.navigate-left.enabled:hover {
|
||||||
border-right-color: #78b9e6; }
|
border-right-color: #78b9e6; }
|
||||||
|
|
||||||
|
|
|
@ -103,6 +103,9 @@ body {
|
||||||
.reveal .controls div.navigate-down.enabled {
|
.reveal .controls div.navigate-down.enabled {
|
||||||
border-top-color: #e7ad52; }
|
border-top-color: #e7ad52; }
|
||||||
|
|
||||||
|
.reveal .controls .slide-number {
|
||||||
|
color: #e7ad52;
|
||||||
|
}
|
||||||
.reveal .controls div.navigate-left.enabled:hover {
|
.reveal .controls div.navigate-left.enabled:hover {
|
||||||
border-right-color: #f3d7ac; }
|
border-right-color: #f3d7ac; }
|
||||||
|
|
||||||
|
|
|
@ -105,6 +105,9 @@ body {
|
||||||
.reveal .controls div.navigate-down.enabled {
|
.reveal .controls div.navigate-down.enabled {
|
||||||
border-top-color: #51483d; }
|
border-top-color: #51483d; }
|
||||||
|
|
||||||
|
.reveal .controls .slide-number {
|
||||||
|
color: #51483d;
|
||||||
|
}
|
||||||
.reveal .controls div.navigate-left.enabled:hover {
|
.reveal .controls div.navigate-left.enabled:hover {
|
||||||
border-right-color: #8b7c69; }
|
border-right-color: #8b7c69; }
|
||||||
|
|
||||||
|
|
|
@ -105,6 +105,9 @@ body {
|
||||||
.reveal .controls div.navigate-down.enabled {
|
.reveal .controls div.navigate-down.enabled {
|
||||||
border-top-color: darkblue; }
|
border-top-color: darkblue; }
|
||||||
|
|
||||||
|
.reveal .controls .slide-number {
|
||||||
|
color: darkblue;
|
||||||
|
}
|
||||||
.reveal .controls div.navigate-left.enabled:hover {
|
.reveal .controls div.navigate-left.enabled:hover {
|
||||||
border-right-color: #0000f1; }
|
border-right-color: #0000f1; }
|
||||||
|
|
||||||
|
|
|
@ -112,6 +112,9 @@ body {
|
||||||
.reveal .controls div.navigate-down.enabled {
|
.reveal .controls div.navigate-down.enabled {
|
||||||
border-top-color: #3b759e; }
|
border-top-color: #3b759e; }
|
||||||
|
|
||||||
|
.reveal .controls .slide-number {
|
||||||
|
color: #3b759e;
|
||||||
|
}
|
||||||
.reveal .controls div.navigate-left.enabled:hover {
|
.reveal .controls div.navigate-left.enabled:hover {
|
||||||
border-right-color: #74a7cb; }
|
border-right-color: #74a7cb; }
|
||||||
|
|
||||||
|
|
|
@ -115,6 +115,9 @@ body {
|
||||||
.reveal .controls div.navigate-down.enabled {
|
.reveal .controls div.navigate-down.enabled {
|
||||||
border-top-color: #268bd2; }
|
border-top-color: #268bd2; }
|
||||||
|
|
||||||
|
.reveal .controls .slide-number {
|
||||||
|
color: #268bd2;
|
||||||
|
}
|
||||||
.reveal .controls div.navigate-left.enabled:hover {
|
.reveal .controls div.navigate-left.enabled:hover {
|
||||||
border-right-color: #78b9e6; }
|
border-right-color: #78b9e6; }
|
||||||
|
|
||||||
|
|
36
js/reveal.js
36
js/reveal.js
|
@ -96,7 +96,10 @@ var Reveal = (function(){
|
||||||
viewDistance: 3,
|
viewDistance: 3,
|
||||||
|
|
||||||
// Script dependencies to load
|
// Script dependencies to load
|
||||||
dependencies: []
|
dependencies: [],
|
||||||
|
|
||||||
|
// Indicates whether to show the slides number
|
||||||
|
showSlideNumber: false
|
||||||
},
|
},
|
||||||
|
|
||||||
// Flags if reveal.js is loaded (has dispatched the 'ready' event)
|
// Flags if reveal.js is loaded (has dispatched the 'ready' event)
|
||||||
|
@ -347,7 +350,8 @@ var Reveal = (function(){
|
||||||
'<div class="navigate-left"></div>' +
|
'<div class="navigate-left"></div>' +
|
||||||
'<div class="navigate-right"></div>' +
|
'<div class="navigate-right"></div>' +
|
||||||
'<div class="navigate-up"></div>' +
|
'<div class="navigate-up"></div>' +
|
||||||
'<div class="navigate-down"></div>' );
|
'<div class="navigate-down"></div>' +
|
||||||
|
'<div class="slide-number"></div>' );
|
||||||
|
|
||||||
// State background element [DEPRECATED]
|
// State background element [DEPRECATED]
|
||||||
createSingletonNode( dom.wrapper, 'div', 'state-background', null );
|
createSingletonNode( dom.wrapper, 'div', 'state-background', null );
|
||||||
|
@ -366,6 +370,7 @@ var Reveal = (function(){
|
||||||
dom.controlsPrev = toArray( document.querySelectorAll( '.navigate-prev' ) );
|
dom.controlsPrev = toArray( document.querySelectorAll( '.navigate-prev' ) );
|
||||||
dom.controlsNext = toArray( document.querySelectorAll( '.navigate-next' ) );
|
dom.controlsNext = toArray( document.querySelectorAll( '.navigate-next' ) );
|
||||||
|
|
||||||
|
dom.slideNumbers = toArray(document.querySelectorAll( '.slide-number' ));
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -591,6 +596,11 @@ var Reveal = (function(){
|
||||||
dom.controlsNext.forEach( function( el ) { el.addEventListener( eventName, onNavigateNextClicked, false ); } );
|
dom.controlsNext.forEach( function( el ) { el.addEventListener( eventName, onNavigateNextClicked, false ); } );
|
||||||
} );
|
} );
|
||||||
|
|
||||||
|
if( config.showSlideNumber ) {
|
||||||
|
['ready', 'slidechanged'].forEach( function(eventName) {
|
||||||
|
document.addEventListener( eventName, onSlideChanged, false );
|
||||||
|
} );
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -627,6 +637,11 @@ var Reveal = (function(){
|
||||||
dom.controlsNext.forEach( function( el ) { el.removeEventListener( eventName, onNavigateNextClicked, false ); } );
|
dom.controlsNext.forEach( function( el ) { el.removeEventListener( eventName, onNavigateNextClicked, false ); } );
|
||||||
} );
|
} );
|
||||||
|
|
||||||
|
if( config.showSlideNumber ) {
|
||||||
|
['ready', 'slidechanged'].forEach( function(eventName) {
|
||||||
|
document.removeEventListener( eventName, onSlideChanged, false );
|
||||||
|
} );
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -2636,6 +2651,23 @@ var Reveal = (function(){
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Invoked when slide changed and on the first time slides are ready
|
||||||
|
*/
|
||||||
|
function onSlideChanged( event ) {
|
||||||
|
var element = dom.slideNumbers;
|
||||||
|
|
||||||
|
// change the number of the page using 'indexh/indexv' format
|
||||||
|
var indexString = ( event.indexh + 1 ).toString();
|
||||||
|
if( indexv > 0 ) {
|
||||||
|
indexString += ' / ' + indexv.toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
element.forEach( function( elm ) {
|
||||||
|
elm.innerHTML = indexString;
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// --------------------------------------------------------------------//
|
// --------------------------------------------------------------------//
|
||||||
// ------------------------------- API --------------------------------//
|
// ------------------------------- API --------------------------------//
|
||||||
|
|
Loading…
Reference in New Issue