Refactor treasure map block

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

@@ -6,6 +6,11 @@
   margin: 0;
 }
 
+svg {
+  width: 100%;
+  height: 100%;
+}
+
 .container {
   position: relative;
   box-sizing: border-box;
@@ -20,11 +25,6 @@
   left: 15px;
 }
 
-#treasure-map {
-  width: 100%;
-  height: 100%;
-}
-
 #animated-line {
   fill: none;
   stroke: currentColor;
@@ -45,7 +45,7 @@
     <label><button type="button" value="continuous-dashes">Continuous dashes</button></label>
     <label><button type="button" value="dash-by-dash">Dash by dash</button></label>
   </form>
-  <svg id="treasure-map" viewBox="0 0 581 98">
+  <svg viewBox="0 0 581 98">
     <defs>
       <path id="line" d="M95 12S-13 29 37 75c51 47 67-80 162-11 95 70 139-55 80-54-58 0-24 74 70 74 95 0 72-66 131-65s83 63 83 63" />
     </defs>
@@ -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 = 12;
 
-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);
 
-    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>