Feature stopwatch

common-theme/assets/scripts/stop-watch.js

@@ -0,0 +1,66 @@
+class StopWatch {
+    constructor() {
+        this.attachListener();
+    }
+
+    attachListener() {
+        const timeElements = document.querySelectorAll('.c-block__time');
+
+        timeElements.forEach(timeElement => {
+            timeElement.addEventListener('click', () => {
+                if (!timeElement.classList.contains('timer-active')) {
+                    this.startTimer(timeElement);
+                }
+            });
+        });
+    }
+
+    startTimer(timeElement) {
+        const datetime = timeElement.getAttribute('datetime');
+        const duration = this.parseDuration(datetime); // Convert format PXM to milliseconds
+        if (isNaN(duration) || duration <= 0) {
+            console.error("Invalid duration specified in datetime attribute.");
+            return;
+        }
+        let startTime = Date.now();
+
+        timeElement.classList.add('timer-active');
+
+        const timerInterval = setInterval(() => {
+            const remainingTime = this.updateTime(timeElement, startTime, duration);
+
+            if (remainingTime <= 0) {
+                clearInterval(timerInterval);
+                timeElement.classList.remove('timer-active');
+            }
+        }, 1000);
+    }
+
+    parseDuration(datetime) {
+        const match = datetime.match(/P(\d+)M/);
+        if (!match) {
+            return NaN;
+        }
+        const minutes = parseInt(match[1]);
+        return minutes * 60 * 1000; // Convert minutes to milliseconds
+    }
+
+    updateTime(element, startTime, duration) {
+        const currentTime = Date.now();
+        const elapsedTime = currentTime - startTime;
+        const remainingTime = duration - elapsedTime;
+
+        if (remainingTime <= 0) {
+            element.textContent = "0 minutes 00 seconds ⏱";
+            return 0;
+        }
+
+        const minutes = Math.floor(remainingTime / 60000);
+        const seconds = Math.floor((remainingTime % 60000) / 1000);
+
+        element.textContent = `${minutes} minutes ${seconds < 10 ? '0' : ''}${seconds} seconds ⏱`;
+        return remainingTime;
+    }
+}
+
+new StopWatch();

common-theme/assets/styles/04-components/block.scss

@@ -99,4 +99,12 @@
     transform: translate(0%, 100%);
     position: absolute;
   }
+
+  &__time {
+      cursor: pointer;
+  }
+
+  &__time:hover,.timer-active {
+      color: var(--theme-color--pop)
+  }
 }

common-theme/layouts/partials/scripts.html

@@ -12,6 +12,8 @@
 <script src="{{ $darkmode.RelPermalink }}"></script>
 {{ $alertmessage := resources.Get "scripts/alert-message.js" | resources.Minify }}
 <script src="{{ $alertmessage.RelPermalink }}" defer></script>
+{{ $stopwatch := resources.GetMatch "scripts/stop-watch.js" | resources.Minify }}
+<script src="{{ $stopwatch.RelPermalink }}" defer></script>
 
 {{/*  if there is custom js to, load here, but if it's a component please contribute it back to the commons  */}}
 

common-theme/layouts/partials/time.html

@@ -11,4 +11,4 @@
 {{ $blockData := .Page.Scratch.Get "blockData" }}
 {{ $block := .Page.Site.GetPage $blockData.api }}
 {{ $time := $blockData.time | default $block.Params.time | default 60 }}
-<time class="c-block__time" datetime="P{{ $time }}M">{{ $time }} minutes</time>
+<time class="c-block__time" datetime="P{{ $time }}M">{{ $time }} minutes ⏱</time>