From cc61cd88f093e407ea3e251f002bd2fb27df625b Mon Sep 17 00:00:00 2001
From: Dean Attali <daattali@gmail.com>
Date: Fri, 22 Jul 2016 14:47:44 -0700
Subject: [PATCH] implement a smarter zoom in/out that gets back to the
 original window

---
 .../timeline/interaction/navigationMenu.html  | 41 ++++++++++++++-----
 1 file changed, 31 insertions(+), 10 deletions(-)

diff --git a/examples/timeline/interaction/navigationMenu.html b/examples/timeline/interaction/navigationMenu.html
index 07ec66c1..b21bfecf 100755
--- a/examples/timeline/interaction/navigationMenu.html
+++ b/examples/timeline/interaction/navigationMenu.html
@@ -73,22 +73,43 @@
      * Zoom the timeline a given percentage in or out
      * @param {Number} percentage   For example 0.1 (zoom out) or -0.1 (zoom in)
      */
-    function zoom (percentage) {
-        var range = timeline.getWindow();
-        var interval = range.end - range.start;
+   function zoomIn(percentage) {
+      var range = timeline.getWindow();
+      var start = range.start.valueOf();
+      var end = range.end.valueOf();
+      var interval = end - start;
+      var newInterval = interval / (1 + percentage);
+      var distance = (interval - newInterval) / 2;
+      var newStart = start + distance;
+      var newEnd = end - distance;
 
-        timeline.setWindow({
-            start: range.start.valueOf() - interval * percentage,
-            end:   range.end.valueOf()   + interval * percentage
-        });
+      timeline.setWindow({
+        start   : newStart,
+        end     : newEnd
+      });
     }
 
+    function zoomOut(percentage) {
+      var range = timeline.getWindow();
+      var start = range.start.valueOf();
+      var end = range.end.valueOf();
+      var interval = end - start;
+      var newStart = start - interval * percentage / 2;
+      var newEnd = end + interval * percentage / 2;
+
+      timeline.setWindow({
+        start   : newStart,
+        end     : newEnd
+      });
+    }
+
+
     // attach events to the navigation buttons
-    document.getElementById('zoomIn').onclick    = function () { zoom(-0.2); };
-    document.getElementById('zoomOut').onclick   = function () { zoom( 0.2); };
+    document.getElementById('zoomIn').onclick    = function () { zoomIn( 0.2); };
+    document.getElementById('zoomOut').onclick   = function () { zoomOut( 0.2); };
     document.getElementById('moveLeft').onclick  = function () { move( 0.2); };
     document.getElementById('moveRight').onclick = function () { move(-0.2); };
 
 </script>
 </body>
-</html>
\ No newline at end of file
+</html>