Refactor treasure map block

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

@@ -57,34 +57,34 @@
 var lineLength = line.getTotalLength();
 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"] = "3s";
-      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"] = "3s";
-      animatedLineMask.style["transition-property"] = "stroke-dashoffset";
-
-      if (button.value === "dash-by-dash") {
-        animatedLineMask.style["transition-timing-function"] = `steps(${numDashes}, jump-start)`;
-      }
-
-      animatedLineMask.style.strokeDashoffset = 0;
-    }, 10);
+    var transitionFn;
+    if (button.value === "dash-by-dash") {
+      transitionFn = `steps(${numDashes}, jump-start)`;
+    }
+    animate(animatedLineMask, transitionFn);
   }
 }
 
@@ -95,6 +95,6 @@
   animatedLineMask.style["transition-property"] = "none";
 }
 
-document.querySelector(".controls").addEventListener("click", animate);
+document.querySelector(".controls").addEventListener("click", handleClick);
 </script>
 </body>