Make counter timezone aware (#1505)

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

1 files changed, 71 insertions, 75 deletions

diff --git a/page-countdown.php b/page-countdown.php
index efb9ecae..4c85e01e 100644
--- a/page-countdown.php
+++ b/page-countdown.php
@@ -15,84 +15,80 @@
 
 <script>
 
+/**
+ * Event date in UTC, modify the string!!
+ */
+const eventDateUTC =  new Date('06 July 2021 12:59:59');
+
+// Start the counter
 $(document).ready(function(){
-	//
-  (function(e){
-		e.fn.countdown = function (t, n){
-			function i(){
-				eventDate = Date.parse(r.date) / 1e3;
-				currentDate = Math.floor(e.now() / 1e3);
-				//
-				if(eventDate <= currentDate){
-					n.call(this);
-					clearInterval(interval)
-				}
-				//
-				seconds = eventDate - currentDate;
-				days = Math.floor(seconds / 86400);
-				seconds -= days * 60 * 60 * 24;
-				hours = Math.floor(seconds / 3600);
-				seconds -= hours * 60 * 60;
-				minutes = Math.floor(seconds / 60);
-				seconds -= minutes * 60;
-				//
-				days == 1 ? thisEl.find(".timeRefDays").text("Days") : thisEl.find(".timeRefDays").text("Days");
-				hours == 1 ? thisEl.find(".timeRefHours").text("Hours") : thisEl.find(".timeRefHours").text("Hours");
-				minutes == 1 ? thisEl.find(".timeRefMinutes").text("Minutes") : thisEl.find(".timeRefMinutes").text("Minutes");
-				seconds == 1 ? thisEl.find(".timeRefSeconds").text("Seconds") : thisEl.find(".timeRefSeconds").text("Seconds");
-				//
-				if(r["format"] == "on"){
-					days = String(days).length >= 2 ? days : "0" + days;
-					hours = String(hours).length >= 2 ? hours : "0" + hours;
-					minutes = String(minutes).length >= 2 ? minutes : "0" + minutes;
-					seconds = String(seconds).length >= 2 ? seconds : "0" + seconds
-				}
-				//
-				if(!isNaN(eventDate)){
-					thisEl.find(".days").text(days);
-					thisEl.find(".hours").text(hours);
-					thisEl.find(".minutes").text(minutes);
-					thisEl.find(".seconds").text(seconds)
-				}
-        else{
-          errorMessage = "Invalid date. Example: 27 March 2015 17:00:00";
-					alert(errorMessage);
-					console.log(errorMessage);
-					clearInterval(interval)
-				}
-			}
-			//
-			var thisEl = e(this);
-			var r = {
-				date: null,
-				format: null
-			};
-			//
-			t && e.extend(r, t);
-			i();
-			interval = setInterval(i, 1e3)
-		}
-	})(jQuery);
-	//
-	$(document).ready(function(){
-		function e(){
-			var e = new Date;
-			e.setDate(e.getDate() + 60);
-			dd = e.getDate();
-			mm = e.getMonth() + 1;
-			y = e.getFullYear();
-			futureFormattedDate = mm + "/" + dd + "/" + y;
-			return futureFormattedDate
-		}
-		//
-		$("#countdown").countdown({
-			date: "06 July 2021 12:59:59", // change date/time here - do not change the format!
-			format: "on"
-		});
-	});
-});
+	setInterval(updateCounter, 1000)
+})
+
+// Clear the interval
+$(window).unload(function() {
+	clearInterval(updateCounter, 1000)
+})
+
+
+const updateCounter = function() {
+	// Get time left
+	timeLeft = getTimeLeft(eventDateUTC)
+
+	// Update the template
+	$('.hours').text(timeLeft.hours)
+	$('.minutes').text(timeLeft.minutes)
+	$('.seconds').text(timeLeft.seconds)
+	$('.days').text(timeLeft.days)
+}
+
+/**
+ * Gets the time left from the event date to 
+ */
+const getTimeLeft = function(eventDateUTC) {
+
+	const now = new Date
+
+	// Time left in milliseconds (UTC)
+	const timeLeftUTC = eventDateUTC - now 
+
+	// Offset to local timezone in milliseconds
+	let offset = now.getTimezoneOffset() * 60000 
+	
+	// Time left in milliseconds
+	const timeLeft = timeLeftUTC - offset
+
+	// Get days left
+	const daysLeft = format(Math.floor(timeLeft / 86400000))
+
+	// Get hours left
+	let millisecondsLeft = timeLeft % 86400000
+	const hoursLeft = format(Math.floor(millisecondsLeft / 3600000))
+
+	// Get minutes left
+	millisecondsLeft = millisecondsLeft % 3600000
+	const minutesLeft = format(Math.floor(millisecondsLeft / 60000))
+
+	// get seconds left 
+	millisecondsLeft = millisecondsLeft % 60000
+	const secondsLeft = format(Math.floor(millisecondsLeft / 1000))
 
+	return {
+		days: daysLeft,
+		hours: hoursLeft,
+		minutes: minutesLeft,
+		seconds: secondsLeft,
+	}
+}
 
+/**
+ * Add zeros if needed and stringifies everything
+ */
+const format = (number) => {
+	if (number < 10) {
+		return `0${number}`
+	} else return number.toString()
+}
 </script>
 
 </head>