From a0e6da6a9cf4372c20230e1c7e076375539bd8d5 Mon Sep 17 00:00:00 2001 From: Jess Telford Date: Fri, 22 Apr 2016 08:18:20 +1000 Subject: [PATCH] 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(-) 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,