Improve example legibility

examples/animation.js

@@ -4,34 +4,6 @@ goog.require('ol.layer.Tile');
 goog.require('ol.proj');
 goog.require('ol.source.OSM');
 
-
-// from https://github.com/DmitryBaranovskiy/raphael
-function bounce(t) {
-  var s = 7.5625, p = 2.75, l;
-  if (t < (1 / p)) {
-    l = s * t * t;
-  } else {
-    if (t < (2 / p)) {
-      t -= (1.5 / p);
-      l = s * t * t + 0.75;
-    } else {
-      if (t < (2.5 / p)) {
-        t -= (2.25 / p);
-        l = s * t * t + 0.9375;
-      } else {
-        t -= (2.625 / p);
-        l = s * t * t + 0.984375;
-      }
-    }
-  }
-  return l;
-}
-
-// from https://github.com/DmitryBaranovskiy/raphael
-function elastic(t) {
-  return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
-}
-
 var london = ol.proj.fromLonLat([-0.12755, 51.507222]);
 var moscow = ol.proj.fromLonLat([37.6178, 55.7517]);
 var istanbul = ol.proj.fromLonLat([28.9744, 41.0128]);
@@ -57,33 +29,64 @@ var map = new ol.Map({
   view: view
 });
 
-document.getElementById('rotate-left').addEventListener('click', function() {
+// A bounce easing method (from https://github.com/DmitryBaranovskiy/raphael).
+function bounce(t) {
+  var s = 7.5625, p = 2.75, l;
+  if (t < (1 / p)) {
+    l = s * t * t;
+  } else {
+    if (t < (2 / p)) {
+      t -= (1.5 / p);
+      l = s * t * t + 0.75;
+    } else {
+      if (t < (2.5 / p)) {
+        t -= (2.25 / p);
+        l = s * t * t + 0.9375;
+      } else {
+        t -= (2.625 / p);
+        l = s * t * t + 0.984375;
+      }
+    }
+  }
+  return l;
+}
+
+// An elastic easing method (from https://github.com/DmitryBaranovskiy/raphael).
+function elastic(t) {
+  return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
+}
+
+function onClick(id, callback) {
+  document.getElementById(id).addEventListener('click', callback);
+}
+
+onClick('rotate-left', function() {
   view.animate({
     rotation: view.getRotation() + Math.PI / 2
   });
 });
 
-document.getElementById('rotate-right').addEventListener('click', function() {
+onClick('rotate-right', function() {
   view.animate({
     rotation: view.getRotation() - Math.PI / 2
   });
 });
 
-document.getElementById('rotate-around-rome').addEventListener('click', function() {
+onClick('rotate-around-rome', function() {
   view.animate({
     rotation: view.getRotation() + 2 * Math.PI,
     anchor: rome
   });
 });
 
-document.getElementById('pan-to-london').addEventListener('click', function() {
+onClick('pan-to-london', function() {
   view.animate({
     center: london,
     duration: 2000
   });
 });
 
-document.getElementById('elastic-to-moscow').addEventListener('click', function() {
+onClick('elastic-to-moscow', function() {
   view.animate({
     center: moscow,
     duration: 2000,
@@ -91,7 +94,7 @@ document.getElementById('elastic-to-moscow').addEventListener('click', function(
   });
 });
 
-document.getElementById('bounce-to-istanbul').addEventListener('click', function() {
+onClick('bounce-to-istanbul', function() {
   view.animate({
     center: istanbul,
     duration: 2000,
@@ -99,7 +102,7 @@ document.getElementById('bounce-to-istanbul').addEventListener('click', function
   });
 });
 
-document.getElementById('spin-to-rome').addEventListener('click', function() {
+onClick('spin-to-rome', function() {
   view.animate({
     center: rome,
     rotation: 2 * Math.PI,
@@ -107,7 +110,7 @@ document.getElementById('spin-to-rome').addEventListener('click', function() {
   });
 });
 
-document.getElementById('fly-to-bern').addEventListener('click', function() {
+onClick('fly-to-bern', function() {
   var duration = 2000;
   view.animate({
     center: bern,