Refactor treasure map block

assets/blocks/animating-a-pirate-treasure-map-path.html

@@ -63,38 +63,37 @@
 var animatedLine = document.querySelector("#animated-line");
 var animatedLineMask = document.querySelector("#animated-line-mask");
 var lineLength = line.getTotalLength();
-var animationDuration = "3s";
 var numDashes = 14;
 
-function animate(event) {
+function animate(el, transitionFn = "ease") {
+  el.style.strokeDashoffset = lineLength;
+  el.style.strokeDasharray = lineLength;
+
+  setTimeout(() => {
+    el.style["transition-duration"] = "3s";
+    el.style["transition-property"] = "stroke-dashoffset";
+    el.style["transition-timing-function"] = transitionFn;
+    el.style.strokeDashoffset = 0;
+  }, 10);
+}
+
+function handleClick(event) {
   var button = event.target;
 
   reset();
 
   if (button.value === "continuous-line") {
-    animatedLine.style.strokeDashoffset = lineLength;
-    animatedLine.style.strokeDasharray = lineLength;
-    setTimeout(() => {
-      animatedLine.style["transition-duration"] = animationDuration;
-      animatedLine.style["transition-property"] = "stroke-dashoffset";
-      animatedLine.style.strokeDashoffset = 0;
-    }, 10);
-  } else { // "continuous-dashes" and "dash-by-dash"
+    animate(animatedLine);
+  } else {
+    // Make line dashed
     animatedLine.style.strokeDasharray = lineLength / (numDashes * 2 - 1);
 
-    animatedLineMask.style.strokeDashoffset = lineLength;
-    animatedLineMask.style.strokeDasharray = lineLength;
-    setTimeout(() => {
-      animatedLineMask.style["transition-duration"] = animationDuration;
-      animatedLineMask.style["transition-property"] = "stroke-dashoffset";
-
-      if (button.value === "dash-by-dash") {
-        // This +1 shouldn't be here, but the animation doesn't look good without it on Firefox
-        animatedLineMask.style["transition-timing-function"] = `steps(${numDashes + 1}, jump-none)`;
-      }
-
-      animatedLineMask.style.strokeDashoffset = 0;
-    }, 10);
+    var transitionFn;
+    if (button.value === "dash-by-dash") {
+      // This +1 shouldn't be here, but the animation doesn't look good without it on Firefox
+      transitionFn = `steps(${numDashes + 1}, jump-none)`;
+    }
+    animate(animatedLineMask, transitionFn);
   }
 }
 
@@ -105,6 +104,6 @@
   animatedLineMask.style["transition-property"] = "none";
 }
 
-document.querySelector(".js-controls").addEventListener("click", animate);
+document.querySelector(".js-controls").addEventListener("click", handleClick);
 </script>
 </body>