xobs/lca2020-pay-it-forward
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

More natural zooming on block level elements

Browse Source 
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.
This commit is contained in:
Jess Telford 2016-04-22 08:18:20 +10:00
parent 539e774d31
commit a0e6da6a9c
1 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
plugin/zoom-js/zoom.js
View File

@ -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,