From a0e6da6a9cf4372c20230e1c7e076375539bd8d5 Mon Sep 17 00:00:00 2001
From: Jess Telford <jess+github@jes.st>
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 95093e0e..efccad6d 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,
--
GitLab