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…
	
	Add table
		Add a link
		
	
		Reference in a new issue