add support for overriding the default layout (#2121)
* add support for overriding the default layout New `overrideLayout` option (if true) will prevent h/w calcs. * fix error if options are empty * Implement requested changes Rename overrideLayout to disableLayout and remove code to unset display
This commit is contained in:
		
				
					committed by
					
						 Hakim El Hattab
						Hakim El Hattab
					
				
			
			
				
	
			
			
			
						parent
						
							ea57e697a1
						
					
				
				
					commit
					9dbccd6978
				
			
							
								
								
									
										114
									
								
								js/reveal.js
									
									
									
									
									
								
							
							
						
						
									
										114
									
								
								js/reveal.js
									
									
									
									
									
								
							| @@ -84,6 +84,10 @@ | |||||||
| 			// Enable the slide overview mode | 			// Enable the slide overview mode | ||||||
| 			overview: true, | 			overview: true, | ||||||
|  |  | ||||||
|  | 			// Enable/disable user specified layouts (like css-grid) | ||||||
|  | 			// (basically prevents all the display & height/width calculations) | ||||||
|  | 			disableLayout: false, | ||||||
|  |  | ||||||
| 			// Vertical centering of slides | 			// Vertical centering of slides | ||||||
| 			center: true, | 			center: true, | ||||||
|  |  | ||||||
| @@ -1853,76 +1857,80 @@ | |||||||
|  |  | ||||||
| 		if( dom.wrapper && !isPrintingPDF() ) { | 		if( dom.wrapper && !isPrintingPDF() ) { | ||||||
|  |  | ||||||
| 			var size = getComputedSlideSize(); | 			if( !config.disableLayout ) { | ||||||
|  |  | ||||||
| 			// Layout the contents of the slides | 				var size = getComputedSlideSize(); | ||||||
| 			layoutSlideContents( config.width, config.height ); |  | ||||||
|  |  | ||||||
| 			dom.slides.style.width = size.width + 'px'; | 				// Layout the contents of the slides | ||||||
| 			dom.slides.style.height = size.height + 'px'; | 				layoutSlideContents( config.width, config.height ); | ||||||
|  |  | ||||||
| 			// Determine scale of content to fit within available space | 				dom.slides.style.width = size.width + 'px'; | ||||||
| 			scale = Math.min( size.presentationWidth / size.width, size.presentationHeight / size.height ); | 				dom.slides.style.height = size.height + 'px'; | ||||||
|  |  | ||||||
| 			// Respect max/min scale settings | 				// Determine scale of content to fit within available space | ||||||
| 			scale = Math.max( scale, config.minScale ); | 				scale = Math.min( size.presentationWidth / size.width, size.presentationHeight / size.height ); | ||||||
| 			scale = Math.min( scale, config.maxScale ); |  | ||||||
|  |  | ||||||
| 			// Don't apply any scaling styles if scale is 1 | 				// Respect max/min scale settings | ||||||
| 			if( scale === 1 ) { | 				scale = Math.max( scale, config.minScale ); | ||||||
| 				dom.slides.style.zoom = ''; | 				scale = Math.min( scale, config.maxScale ); | ||||||
| 				dom.slides.style.left = ''; |  | ||||||
| 				dom.slides.style.top = ''; | 				// Don't apply any scaling styles if scale is 1 | ||||||
| 				dom.slides.style.bottom = ''; | 				if( scale === 1 ) { | ||||||
| 				dom.slides.style.right = ''; | 					dom.slides.style.zoom = ''; | ||||||
| 				transformSlides( { layout: '' } ); |  | ||||||
| 			} |  | ||||||
| 			else { |  | ||||||
| 				// Prefer zoom for scaling up so that content remains crisp. |  | ||||||
| 				// Don't use zoom to scale down since that can lead to shifts |  | ||||||
| 				// in text layout/line breaks. |  | ||||||
| 				if( scale > 1 && features.zoom ) { |  | ||||||
| 					dom.slides.style.zoom = scale; |  | ||||||
| 					dom.slides.style.left = ''; | 					dom.slides.style.left = ''; | ||||||
| 					dom.slides.style.top = ''; | 					dom.slides.style.top = ''; | ||||||
| 					dom.slides.style.bottom = ''; | 					dom.slides.style.bottom = ''; | ||||||
| 					dom.slides.style.right = ''; | 					dom.slides.style.right = ''; | ||||||
| 					transformSlides( { layout: '' } ); | 					transformSlides( { layout: '' } ); | ||||||
| 				} | 				} | ||||||
| 				// Apply scale transform as a fallback |  | ||||||
| 				else { | 				else { | ||||||
| 					dom.slides.style.zoom = ''; | 					// Prefer zoom for scaling up so that content remains crisp. | ||||||
| 					dom.slides.style.left = '50%'; | 					// Don't use zoom to scale down since that can lead to shifts | ||||||
| 					dom.slides.style.top = '50%'; | 					// in text layout/line breaks. | ||||||
| 					dom.slides.style.bottom = 'auto'; | 					if( scale > 1 && features.zoom ) { | ||||||
| 					dom.slides.style.right = 'auto'; | 						dom.slides.style.zoom = scale; | ||||||
| 					transformSlides( { layout: 'translate(-50%, -50%) scale('+ scale +')' } ); | 						dom.slides.style.left = ''; | ||||||
| 				} | 						dom.slides.style.top = ''; | ||||||
| 			} | 						dom.slides.style.bottom = ''; | ||||||
|  | 						dom.slides.style.right = ''; | ||||||
| 			// Select all slides, vertical and horizontal | 						transformSlides( { layout: '' } ); | ||||||
| 			var slides = toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ); | 					} | ||||||
|  | 					// Apply scale transform as a fallback | ||||||
| 			for( var i = 0, len = slides.length; i < len; i++ ) { | 					else { | ||||||
| 				var slide = slides[ i ]; | 						dom.slides.style.zoom = ''; | ||||||
|  | 						dom.slides.style.left = '50%'; | ||||||
| 				// Don't bother updating invisible slides | 						dom.slides.style.top = '50%'; | ||||||
| 				if( slide.style.display === 'none' ) { | 						dom.slides.style.bottom = 'auto'; | ||||||
| 					continue; | 						dom.slides.style.right = 'auto'; | ||||||
|  | 						transformSlides( { layout: 'translate(-50%, -50%) scale('+ scale +')' } ); | ||||||
|  | 					} | ||||||
| 				} | 				} | ||||||
|  |  | ||||||
| 				if( config.center || slide.classList.contains( 'center' ) ) { | 				// Select all slides, vertical and horizontal | ||||||
| 					// Vertical stacks are not centred since their section | 				var slides = toArray( dom.wrapper.querySelectorAll( SLIDES_SELECTOR ) ); | ||||||
| 					// children will be |  | ||||||
| 					if( slide.classList.contains( 'stack' ) ) { | 				for( var i = 0, len = slides.length; i < len; i++ ) { | ||||||
| 						slide.style.top = 0; | 					var slide = slides[ i ]; | ||||||
|  |  | ||||||
|  | 					// Don't bother updating invisible slides | ||||||
|  | 					if( slide.style.display === 'none' ) { | ||||||
|  | 						continue; | ||||||
|  | 					} | ||||||
|  |  | ||||||
|  | 					if( config.center || slide.classList.contains( 'center' ) ) { | ||||||
|  | 						// Vertical stacks are not centred since their section | ||||||
|  | 						// children will be | ||||||
|  | 						if( slide.classList.contains( 'stack' ) ) { | ||||||
|  | 							slide.style.top = 0; | ||||||
|  | 						} | ||||||
|  | 						else { | ||||||
|  | 							slide.style.top = Math.max( ( size.height - slide.scrollHeight ) / 2, 0 ) + 'px'; | ||||||
|  | 						} | ||||||
| 					} | 					} | ||||||
| 					else { | 					else { | ||||||
| 						slide.style.top = Math.max( ( size.height - slide.scrollHeight ) / 2, 0 ) + 'px'; | 						slide.style.top = ''; | ||||||
| 					} | 					} | ||||||
| 				} |  | ||||||
| 				else { |  | ||||||
| 					slide.style.top = ''; |  | ||||||
| 				} | 				} | ||||||
|  |  | ||||||
| 			} | 			} | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user