Merge pull request #506 from devgeniem/TMS-1032

TMS-1032: Add seconds to countdown-timer block
devgeniem · May 13, 2024 · 016da42 · 016da42
2 parents d4cbd41 + 1337779
commit 016da42
Show file tree

Hide file tree

Showing 10 changed files with 145 additions and 55 deletions.
diff --git a/CHANGELOG.MD b/CHANGELOG.MD
@@ -7,14 +7,16 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+- TMS-1032:
+    - Add seconds to countdown-timer block
+    - Change countdown update interval to a second if seconds are shown
 - TMS-1028: Add social media link-list block, component & footer section
 
 ## [1.54.10] - 2024-05-07
 
 - TMS-1033: Add new optional hero-museum component
 - TMS-1038: Fix theme-mustavalkoinen lang-menu styles
 
-
 ## [1.54.9] - 2024-04-18
 
 - TMS-1031: Fix event-component recurring manual-event dates

diff --git a/assets/scripts/countdown.js b/assets/scripts/countdown.js
@@ -26,17 +26,19 @@ export default class Countdown {
             countdown.days_container = countdown.querySelector( '.countdown__time--days' );
             countdown.hours_container = countdown.querySelector( '.countdown__time--hours' );
             countdown.minutes_container = countdown.querySelector( '.countdown__time--minutes' );
+            countdown.seconds_container = countdown.querySelector( '.countdown__time--seconds' );
             countdown.offset = countdown.dataset.offset ? countdown.dataset.offset : 0;
 
             const target = parseInt( countdown.dataset.timestamp, 10 ) * 1000;
 
             this.updateCountdownTime( countdown, target, null );
 
             const MINUTE_IN_MS = 1000 * 60;
+            const SECONDS_IN_MS = 1000;
 
             const interval = setInterval( () => {
                 this.updateCountdownTime( countdown, target, interval );
-            }, MINUTE_IN_MS );
+            }, countdown.seconds_container ? SECONDS_IN_MS : MINUTE_IN_MS );
         }
     }
 
@@ -61,11 +63,13 @@ export default class Countdown {
             diff = targetTime - now,
             days = Math.floor( diff / ( 1000 * 60 * 60 * 24 ) ),
             hours = Math.floor( ( diff % ( 1000 * 60 * 60 * 24 ) ) / ( 1000 * 60 * 60 ) ),
-            minutes = Math.floor( ( diff % ( 1000 * 60 * 60 ) ) / ( 1000 * 60 ) );
+            minutes = Math.floor( ( diff % ( 1000 * 60 * 60 ) ) / ( 1000 * 60 ) ),
+            seconds = Math.floor( ( diff % ( 1000 * 60 ) ) / 1000 );
 
         const isDaysExpired = days < 0;
         const isHoursExpired = hours < 0;
         const isMinutesExpired = minutes < 0;
+        const isSecondsExpired = seconds < 0;
 
         if ( ! isDaysExpired && countdown.days_container ) {
             countdown.days_container.querySelector( '.countdown__figure' ).innerHTML = days.toString();
@@ -79,7 +83,11 @@ export default class Countdown {
             countdown.minutes_container.querySelector( '.countdown__figure' ).innerHTML = minutes.toString();
         }
 
-        const isExpired = isDaysExpired && isHoursExpired && isMinutesExpired;
+        if ( ! isSecondsExpired && countdown.seconds_container ) {
+            countdown.seconds_container.querySelector( '.countdown__figure' ).innerHTML = seconds.toString();
+        }
+
+        const isExpired = isDaysExpired && isHoursExpired && isMinutesExpired && isSecondsExpired;
 
         if ( isExpired ) {
             countdown.classList.add( 'countdown--is-expired' );

diff --git a/assets/styles/blocks/custom/_countdown.scss b/assets/styles/blocks/custom/_countdown.scss
@@ -53,6 +53,13 @@
                 }
             }
         }
+
+        @include from($tablet) {
+            &--seconds {
+                width: 7.5rem;
+                text-align: center;
+            }
+        }
     }
 
     &__expired-text {

diff --git a/lang/fi.mo b/lang/fi.mo
diff --git a/lang/fi.po b/lang/fi.po
@@ -1,8 +1,8 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: TMS Theme Base\n"
-"POT-Creation-Date: 2024-01-11 14:07+0200\n"
-"PO-Revision-Date: 2024-01-11 14:08+0200\n"
+"POT-Creation-Date: 2024-04-24 22:45+0300\n"
+"PO-Revision-Date: 2024-04-24 22:46+0300\n"
 "Last-Translator: \n"
 "Language-Team: \n"
 "Language: fi\n"
@@ -23,9 +23,28 @@ msgstr ""
 "X-Poedit-SearchPathExcluded-1: vendor\n"
 "X-Poedit-SearchPathExcluded-2: node_modules\n"
 
-#: assets/dist/vendor.js:4630
-msgctxt "text direction"
-msgid "ltr"
+#: assets/dist/vendor.js:1
+msgid "entries"
+msgstr ""
+
+#: assets/dist/vendor.js:1
+msgid "values"
+msgstr ""
+
+#: assets/dist/vendor.js:1
+msgid "keys"
+msgstr ""
+
+#: assets/dist/vendor.js:1
+msgid "Wrong index!"
+msgstr ""
+
+#: assets/dist/vendor.js:1
+msgid "Wrong offset!"
+msgstr ""
+
+#: assets/dist/vendor.js:1
+msgid "Wrong length!"
 msgstr ""
 
 #: comments.php:14
@@ -56,13 +75,13 @@ msgid "Open map"
 msgstr "Avaa kartta"
 
 #: lib/ACF/FrontPageGroup.php:38 lib/ACF/OnepagerGroup.php:73
-#: lib/ACF/PageGroup.php:39
+#: lib/ACF/PageGroup.php:41
 msgctxt "theme ACF"
 msgid "Page Components"
 msgstr "Sivun komponentit"
 
 #: lib/ACF/FrontPageGroup.php:90 lib/ACF/OnepagerGroup.php:126
-#: lib/ACF/PageGroup.php:140 lib/ACF/PostGroup.php:173
+#: lib/ACF/PageGroup.php:142 lib/ACF/PostGroup.php:173
 msgctxt "theme ACF"
 msgid "Components"
 msgstr "Komponentit"
@@ -246,47 +265,47 @@ msgctxt "pagination"
 msgid "Previous"
 msgstr "Edellinen"
 
-#: lib/Eventz.php:103
+#: lib/Eventz.php:114
 msgid "Dates"
 msgstr "Päivät"
 
-#: lib/Eventz.php:107
+#: lib/Eventz.php:119
 msgid "Time"
 msgstr "Aika"
 
-#: lib/Eventz.php:112
+#: lib/Eventz.php:124
 msgid "Location"
 msgstr "Sijainti"
 
-#: lib/Eventz.php:114
+#: lib/Eventz.php:126
 msgid "Price"
 msgstr "Hinta"
 
-#: lib/Eventz.php:116
+#: lib/Eventz.php:128
 msgid "Organizer"
 msgstr "Järjestäjä"
 
-#: lib/Eventz.php:117
+#: lib/Eventz.php:129
 msgid "Area"
 msgstr ""
 
-#: lib/Eventz.php:119
+#: lib/Eventz.php:131
 msgid "Target"
 msgstr ""
 
-#: lib/Eventz.php:121
+#: lib/Eventz.php:133
 msgid "Tags"
 msgstr ""
 
-#: lib/Eventz.php:125
+#: lib/Eventz.php:137
 msgid "Links"
 msgstr "Linkit"
 
-#: lib/Eventz.php:301
+#: lib/Eventz.php:314
 msgid "Additional information"
 msgstr "Lisätiedot"
 
-#: lib/Eventz.php:318
+#: lib/Eventz.php:331
 msgid "Free"
 msgstr "Maksuton"
 
@@ -305,6 +324,11 @@ msgctxt "theme-frontend"
 msgid "Minutes"
 msgstr "Minuuttia"
 
+#: lib/Formatters/CountdownFormatter.php:83 models/strings.php:232
+msgctxt "theme-frontend"
+msgid "Seconds"
+msgstr "Sekuntia"
+
 #: lib/Formatters/GridFormatter.php:151
 msgid "Read more"
 msgstr "Lue lisää"
@@ -659,7 +683,7 @@ msgid "Search from site"
 msgstr "Hae sivustolta"
 
 #: models/strings.php:55 models/strings.php:81 models/strings.php:143
-#: models/strings.php:156 models/strings.php:165 models/strings.php:235
+#: models/strings.php:156 models/strings.php:165 models/strings.php:236
 msgctxt "theme-frontend"
 msgid "Close"
 msgstr "Sulje"
@@ -1103,12 +1127,12 @@ msgctxt "theme-frontend"
 msgid "Dec"
 msgstr "Jou"
 
-#: models/strings.php:234
+#: models/strings.php:235
 msgctxt "theme-frontend"
 msgid "Enlarged image"
 msgstr "Suurennettu kuva"
 
-#: models/strings.php:248
+#: models/strings.php:249
 msgid "Pagination"
 msgstr "Sivutus"
 

diff --git a/lang/tms-theme-base.pot b/lang/tms-theme-base.pot
@@ -2,7 +2,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: TMS Theme Base\n"
-"POT-Creation-Date: 2024-01-11 14:07+0200\n"
+"POT-Creation-Date: 2024-04-24 22:45+0300\n"
 "PO-Revision-Date: 2022-01-12 10:08+0200\n"
 "Last-Translator: \n"
 "Language-Team: \n"
@@ -23,9 +23,28 @@ msgstr ""
 "X-Poedit-SearchPathExcluded-1: vendor\n"
 "X-Poedit-SearchPathExcluded-2: node_modules\n"
 
-#: assets/dist/vendor.js:4630
-msgctxt "text direction"
-msgid "ltr"
+#: assets/dist/vendor.js:1
+msgid "entries"
+msgstr ""
+
+#: assets/dist/vendor.js:1
+msgid "values"
+msgstr ""
+
+#: assets/dist/vendor.js:1
+msgid "keys"
+msgstr ""
+
+#: assets/dist/vendor.js:1
+msgid "Wrong index!"
+msgstr ""
+
+#: assets/dist/vendor.js:1
+msgid "Wrong offset!"
+msgstr ""
+
+#: assets/dist/vendor.js:1
+msgid "Wrong length!"
 msgstr ""
 
 #: comments.php:14
@@ -56,13 +75,13 @@ msgid "Open map"
 msgstr ""
 
 #: lib/ACF/FrontPageGroup.php:38 lib/ACF/OnepagerGroup.php:73
-#: lib/ACF/PageGroup.php:39
+#: lib/ACF/PageGroup.php:41
 msgctxt "theme ACF"
 msgid "Page Components"
 msgstr ""
 
 #: lib/ACF/FrontPageGroup.php:90 lib/ACF/OnepagerGroup.php:126
-#: lib/ACF/PageGroup.php:140 lib/ACF/PostGroup.php:173
+#: lib/ACF/PageGroup.php:142 lib/ACF/PostGroup.php:173
 msgctxt "theme ACF"
 msgid "Components"
 msgstr ""
@@ -246,47 +265,47 @@ msgctxt "pagination"
 msgid "Previous"
 msgstr ""
 
-#: lib/Eventz.php:103
+#: lib/Eventz.php:114
 msgid "Dates"
 msgstr ""
 
-#: lib/Eventz.php:107
+#: lib/Eventz.php:119
 msgid "Time"
 msgstr ""
 
-#: lib/Eventz.php:112
+#: lib/Eventz.php:124
 msgid "Location"
 msgstr ""
 
-#: lib/Eventz.php:114
+#: lib/Eventz.php:126
 msgid "Price"
 msgstr ""
 
-#: lib/Eventz.php:116
+#: lib/Eventz.php:128
 msgid "Organizer"
 msgstr ""
 
-#: lib/Eventz.php:117
+#: lib/Eventz.php:129
 msgid "Area"
 msgstr ""
 
-#: lib/Eventz.php:119
+#: lib/Eventz.php:131
 msgid "Target"
 msgstr ""
 
-#: lib/Eventz.php:121
+#: lib/Eventz.php:133
 msgid "Tags"
 msgstr ""
 
-#: lib/Eventz.php:125
+#: lib/Eventz.php:137
 msgid "Links"
 msgstr ""
 
-#: lib/Eventz.php:301
+#: lib/Eventz.php:314
 msgid "Additional information"
 msgstr ""
 
-#: lib/Eventz.php:318
+#: lib/Eventz.php:331
 msgid "Free"
 msgstr ""
 
@@ -305,6 +324,11 @@ msgctxt "theme-frontend"
 msgid "Minutes"
 msgstr ""
 
+#: lib/Formatters/CountdownFormatter.php:83 models/strings.php:232
+msgctxt "theme-frontend"
+msgid "Seconds"
+msgstr ""
+
 #: lib/Formatters/GridFormatter.php:151
 msgid "Read more"
 msgstr ""
@@ -650,7 +674,7 @@ msgid "Search from site"
 msgstr ""
 
 #: models/strings.php:55 models/strings.php:81 models/strings.php:143
-#: models/strings.php:156 models/strings.php:165 models/strings.php:235
+#: models/strings.php:156 models/strings.php:165 models/strings.php:236
 msgctxt "theme-frontend"
 msgid "Close"
 msgstr ""
@@ -1092,12 +1116,12 @@ msgctxt "theme-frontend"
 msgid "Dec"
 msgstr ""
 
-#: models/strings.php:234
+#: models/strings.php:235
 msgctxt "theme-frontend"
 msgid "Enlarged image"
 msgstr ""
 
-#: models/strings.php:248
+#: models/strings.php:249
 msgid "Pagination"
 msgstr ""