From a0e6da6a9cf4372c20230e1c7e076375539bd8d5 Mon Sep 17 00:00:00 2001
From: Jess Telford
Date: Fri, 22 Apr 2016 08:18:20 +1000
Subject: More natural zooming on block level elements

Switching a `display: block` element to `display: inline-block` allows calculating the bounds based on the contents of the div rather than the entire container (which is often `width: 100%`).

This provides a much more natural zoom, especially for paragraphs and code examples.
---
 plugin/zoom-js/zoom.js | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

(limited to 'plugin/zoom-js/zoom.js')

diff --git a/plugin/zoom-js/zoom.js b/plugin/zoom-js/zoom.js
index 95093e0..efccad6 100644
--- a/plugin/zoom-js/zoom.js
+++ b/plugin/zoom-js/zoom.js
@@ -11,7 +11,17 @@
 		if( event[ modifier ] && isEnabled ) {
 			event.preventDefault();
 
-			var bounds = event.target.getBoundingClientRect();
+			var bounds;
+			var originalDisplay = event.target.style.display;
+
+			// Get the bounding rect of the contents, not the containing box
+			if (window.getComputedStyle(event.target).display === 'block') {
+				event.target.style.display = 'inline-block';
+				bounds = event.target.getBoundingClientRect();
+				event.target.style.display = originalDisplay;
+			} else {
+				bounds = event.target.getBoundingClientRect();
+			}
 
 			zoom.to({
 				x: ( bounds.left * revealScale ) - zoomPadding,
-- 
cgit v1.2.3


From ce7d494ae9f6516af82d597ed00e3cabd1a1ad55 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Fri, 29 Apr 2016 09:25:05 +0200
Subject: tweak formatting to match rest of slide

---
 plugin/zoom-js/zoom.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'plugin/zoom-js/zoom.js')

diff --git a/plugin/zoom-js/zoom.js b/plugin/zoom-js/zoom.js
index efccad6..8738083 100644
--- a/plugin/zoom-js/zoom.js
+++ b/plugin/zoom-js/zoom.js
@@ -15,7 +15,7 @@
 			var originalDisplay = event.target.style.display;
 
 			// Get the bounding rect of the contents, not the containing box
-			if (window.getComputedStyle(event.target).display === 'block') {
+			if( window.getComputedStyle( event.target ).display === 'block' ) {
 				event.target.style.display = 'inline-block';
 				bounds = event.target.getBoundingClientRect();
 				event.target.style.display = originalDisplay;
-- 
cgit v1.2.3