Просмотр исходного кода

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.
Jess Telford 9 лет назад
Родитель
Сommit
a0e6da6a9c
1 измененных файлов с 11 добавлено и 1 удалено
  1. 11 1
      plugin/zoom-js/zoom.js

+ 11 - 1
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,