diff options
| author | Jess Telford <jess+github@jes.st> | 2016-04-22 08:18:20 +1000 |
|---|---|---|
| committer | Jess Telford <jess+github@jes.st> | 2016-04-26 07:27:59 +1000 |
| commit | a0e6da6a9cf4372c20230e1c7e076375539bd8d5 (patch) | |
| tree | f383651a9dfbb567f5eda43c0033da5fe3e2af1a /plugin/zoom-js | |
| parent | 539e774d31f91676bcc3f75e28168921cd27d819 (diff) | |
| download | perl-software-in-gnu-guix-a0e6da6a9cf4372c20230e1c7e076375539bd8d5.tar perl-software-in-gnu-guix-a0e6da6a9cf4372c20230e1c7e076375539bd8d5.tar.gz | |
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.
Diffstat (limited to 'plugin/zoom-js')
| -rw-r--r-- | plugin/zoom-js/zoom.js | 12 |
1 files changed, 11 insertions, 1 deletions
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, |