move the slide-number out of the controls to a proper position and little fix to the updating event.
This commit is contained in:
parent
7b63cda19d
commit
dda885b71a
10 changed files with 98 additions and 69 deletions
|
@ -391,15 +391,6 @@ body {
|
|||
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 {
|
||||
opacity: 0.7;
|
||||
cursor: pointer;
|
||||
|
@ -485,6 +476,21 @@ body {
|
|||
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* SLIDE NUMBER
|
||||
*********************************************/
|
||||
|
||||
.reveal .slide-number {
|
||||
position: fixed;
|
||||
display: block;
|
||||
opacity: 0.5;
|
||||
z-index: 31;
|
||||
width: 110px;
|
||||
bottom: 58px;
|
||||
right: 11px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* SLIDES
|
||||
|
|
|
@ -115,10 +115,6 @@ body {
|
|||
.reveal .controls div.navigate-down.enabled {
|
||||
border-top-color: #8b743d; }
|
||||
|
||||
.reveal .controls .slide-number {
|
||||
color: #8b743d;
|
||||
}
|
||||
|
||||
.reveal .controls div.navigate-left.enabled:hover {
|
||||
border-right-color: #c0a86e; }
|
||||
|
||||
|
@ -131,6 +127,13 @@ body {
|
|||
.reveal .controls div.navigate-down.enabled:hover {
|
||||
border-top-color: #c0a86e; }
|
||||
|
||||
/*********************************************
|
||||
* SLIDE NUMBER
|
||||
*********************************************/
|
||||
.reveal .slide-number {
|
||||
color: #8b743d;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
|
|
@ -115,10 +115,6 @@ body {
|
|||
.reveal .controls div.navigate-down.enabled {
|
||||
border-top-color: #13daec; }
|
||||
|
||||
.reveal .controls .slide-number {
|
||||
color: #13daec;
|
||||
}
|
||||
|
||||
.reveal .controls div.navigate-left.enabled:hover {
|
||||
border-right-color: #71e9f4; }
|
||||
|
||||
|
@ -131,6 +127,13 @@ body {
|
|||
.reveal .controls div.navigate-down.enabled:hover {
|
||||
border-top-color: #71e9f4; }
|
||||
|
||||
/*********************************************
|
||||
* SLIDE NUMBER
|
||||
*********************************************/
|
||||
.reveal .slide-number {
|
||||
color: #13daec;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
|
|
@ -115,10 +115,6 @@ body {
|
|||
.reveal .controls div.navigate-down.enabled {
|
||||
border-top-color: #268bd2; }
|
||||
|
||||
.reveal .controls .slide-number {
|
||||
color: #268bd2;
|
||||
}
|
||||
|
||||
.reveal .controls div.navigate-left.enabled:hover {
|
||||
border-right-color: #78b9e6; }
|
||||
|
||||
|
@ -131,6 +127,13 @@ body {
|
|||
.reveal .controls div.navigate-down.enabled:hover {
|
||||
border-top-color: #78b9e6; }
|
||||
|
||||
/*********************************************
|
||||
* SLIDE NUMBER
|
||||
*********************************************/
|
||||
.reveal .slide-number {
|
||||
color: #268bd2;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
|
|
@ -103,9 +103,6 @@ body {
|
|||
.reveal .controls div.navigate-down.enabled {
|
||||
border-top-color: #e7ad52; }
|
||||
|
||||
.reveal .controls .slide-number {
|
||||
color: #e7ad52;
|
||||
}
|
||||
.reveal .controls div.navigate-left.enabled:hover {
|
||||
border-right-color: #f3d7ac; }
|
||||
|
||||
|
@ -118,6 +115,13 @@ body {
|
|||
.reveal .controls div.navigate-down.enabled:hover {
|
||||
border-top-color: #f3d7ac; }
|
||||
|
||||
/*********************************************
|
||||
* SLIDE NUMBER
|
||||
*********************************************/
|
||||
.reveal .slide-number {
|
||||
color: #e7ad52;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
|
|
@ -105,9 +105,6 @@ body {
|
|||
.reveal .controls div.navigate-down.enabled {
|
||||
border-top-color: #51483d; }
|
||||
|
||||
.reveal .controls .slide-number {
|
||||
color: #51483d;
|
||||
}
|
||||
.reveal .controls div.navigate-left.enabled:hover {
|
||||
border-right-color: #8b7c69; }
|
||||
|
||||
|
@ -120,6 +117,13 @@ body {
|
|||
.reveal .controls div.navigate-down.enabled:hover {
|
||||
border-top-color: #8b7c69; }
|
||||
|
||||
/*********************************************
|
||||
* SLIDE NUMBER
|
||||
*********************************************/
|
||||
.reveal .slide-number {
|
||||
color: #51483d;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
|
|
@ -105,9 +105,6 @@ body {
|
|||
.reveal .controls div.navigate-down.enabled {
|
||||
border-top-color: darkblue; }
|
||||
|
||||
.reveal .controls .slide-number {
|
||||
color: darkblue;
|
||||
}
|
||||
.reveal .controls div.navigate-left.enabled:hover {
|
||||
border-right-color: #0000f1; }
|
||||
|
||||
|
@ -120,6 +117,13 @@ body {
|
|||
.reveal .controls div.navigate-down.enabled:hover {
|
||||
border-top-color: #0000f1; }
|
||||
|
||||
/*********************************************
|
||||
* SLIDE NUMBER
|
||||
*********************************************/
|
||||
.reveal .slide-number {
|
||||
color: darkblue;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
|
|
@ -112,9 +112,6 @@ body {
|
|||
.reveal .controls div.navigate-down.enabled {
|
||||
border-top-color: #3b759e; }
|
||||
|
||||
.reveal .controls .slide-number {
|
||||
color: #3b759e;
|
||||
}
|
||||
.reveal .controls div.navigate-left.enabled:hover {
|
||||
border-right-color: #74a7cb; }
|
||||
|
||||
|
@ -127,6 +124,13 @@ body {
|
|||
.reveal .controls div.navigate-down.enabled:hover {
|
||||
border-top-color: #74a7cb; }
|
||||
|
||||
/*********************************************
|
||||
* SLIDE NUMBER
|
||||
*********************************************/
|
||||
.reveal .slide-number {
|
||||
color: #3b759e;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
|
|
@ -115,9 +115,6 @@ body {
|
|||
.reveal .controls div.navigate-down.enabled {
|
||||
border-top-color: #268bd2; }
|
||||
|
||||
.reveal .controls .slide-number {
|
||||
color: #268bd2;
|
||||
}
|
||||
.reveal .controls div.navigate-left.enabled:hover {
|
||||
border-right-color: #78b9e6; }
|
||||
|
||||
|
@ -130,6 +127,13 @@ body {
|
|||
.reveal .controls div.navigate-down.enabled:hover {
|
||||
border-top-color: #78b9e6; }
|
||||
|
||||
/*********************************************
|
||||
* SLIDE NUMBER
|
||||
*********************************************/
|
||||
.reveal .slide-number {
|
||||
color: #268bd2;
|
||||
}
|
||||
|
||||
/*********************************************
|
||||
* PROGRESS BAR
|
||||
*********************************************/
|
||||
|
|
60
js/reveal.js
60
js/reveal.js
|
@ -350,8 +350,10 @@ var Reveal = (function(){
|
|||
'<div class="navigate-left"></div>' +
|
||||
'<div class="navigate-right"></div>' +
|
||||
'<div class="navigate-up"></div>' +
|
||||
'<div class="navigate-down"></div>' +
|
||||
'<div class="slide-number"></div>' );
|
||||
'<div class="navigate-down"></div>' );
|
||||
|
||||
// slide number
|
||||
createSingletonNode( dom.wrapper, 'div', 'slide-number', '' );
|
||||
|
||||
// State background element [DEPRECATED]
|
||||
createSingletonNode( dom.wrapper, 'div', 'state-background', null );
|
||||
|
@ -370,7 +372,7 @@ var Reveal = (function(){
|
|||
dom.controlsPrev = toArray( document.querySelectorAll( '.navigate-prev' ) );
|
||||
dom.controlsNext = toArray( document.querySelectorAll( '.navigate-next' ) );
|
||||
|
||||
dom.slideNumbers = toArray(document.querySelectorAll( '.slide-number' ));
|
||||
dom.slideNumber = document.querySelector( '.slide-number' );
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -595,12 +597,6 @@ var Reveal = (function(){
|
|||
dom.controlsPrev.forEach( function( el ) { el.addEventListener( eventName, onNavigatePrevClicked, false ); } );
|
||||
dom.controlsNext.forEach( function( el ) { el.addEventListener( eventName, onNavigateNextClicked, false ); } );
|
||||
} );
|
||||
|
||||
if( config.showSlideNumber ) {
|
||||
['ready', 'slidechanged'].forEach( function(eventName) {
|
||||
document.addEventListener( eventName, onSlideChanged, false );
|
||||
} );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -636,12 +632,6 @@ var Reveal = (function(){
|
|||
dom.controlsPrev.forEach( function( el ) { el.removeEventListener( eventName, onNavigatePrevClicked, false ); } );
|
||||
dom.controlsNext.forEach( function( el ) { el.removeEventListener( eventName, onNavigateNextClicked, false ); } );
|
||||
} );
|
||||
|
||||
if( config.showSlideNumber ) {
|
||||
['ready', 'slidechanged'].forEach( function(eventName) {
|
||||
document.removeEventListener( eventName, onSlideChanged, false );
|
||||
} );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -1548,6 +1538,7 @@ var Reveal = (function(){
|
|||
updateControls();
|
||||
updateProgress();
|
||||
updateBackground();
|
||||
updateSlideNumber();
|
||||
|
||||
// Update the URL hash
|
||||
writeURL();
|
||||
|
@ -1580,7 +1571,7 @@ var Reveal = (function(){
|
|||
updateControls();
|
||||
updateProgress();
|
||||
updateBackground();
|
||||
|
||||
updateSlideNumber();
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -1789,6 +1780,26 @@ var Reveal = (function(){
|
|||
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the slide number div to reflect the current slide.
|
||||
*/
|
||||
function updateSlideNumber() {
|
||||
|
||||
// Update slide number if enabled
|
||||
if( config.showSlideNumber && dom.slideNumber)
|
||||
{
|
||||
var element = dom.slideNumber;
|
||||
|
||||
// change the number of the page using 'indexh - indexv' format
|
||||
var indexString = ( indexh + 1 ).toString();
|
||||
if( indexv > 0 ) {
|
||||
indexString += ' - ' + indexv.toString();
|
||||
}
|
||||
|
||||
element.innerHTML = indexString;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Updates the state of all control/navigation arrows.
|
||||
*/
|
||||
|
@ -2651,23 +2662,6 @@ 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 --------------------------------//
|
||||
|
|
Loading…
Reference in a new issue