From 54eb66fd30a456fd5800865208740f524909ad5f Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Tue, 24 Nov 2020 13:46:05 +0100
Subject: [PATCH] Add onFinish callback to countdown widget and style it

---
 api/js/etemplate/et2_widget_countdown.js | 13 +++++++++++--
 api/js/etemplate/et2_widget_countdown.ts | 12 +++++++++++-
 api/templates/default/etemplate2.css     | 10 ++++++++++
 3 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/api/js/etemplate/et2_widget_countdown.js b/api/js/etemplate/et2_widget_countdown.js
index a36f29b782..b7e15ae25a 100644
--- a/api/js/etemplate/et2_widget_countdown.js
+++ b/api/js/etemplate/et2_widget_countdown.js
@@ -70,8 +70,11 @@ var et2_countdown = /** @class */ (function (_super) {
         this.time.set_value(_time);
         var self = this;
         this.timer = setInterval(function () {
-            if (self._updateTimer() <= 0)
-                clearInterval(this.timer);
+            if (self._updateTimer() <= 0) {
+                clearInterval(self.timer);
+                if (typeof self.onFinish == "function")
+                    self.onFinish();
+            }
         }, 1000);
     };
     et2_countdown.prototype._updateTimer = function () {
@@ -102,6 +105,12 @@ var et2_countdown = /** @class */ (function (_super) {
             type: "string",
             default: "s",
             description: "Defines display format; s (Initial letter) or l (Complete word) display, default is s."
+        },
+        onFinish: {
+            name: "on finish countdown",
+            type: "js",
+            default: et2_no_init,
+            description: "Callback function to call when the countdown is finished."
         }
     };
     return et2_countdown;
diff --git a/api/js/etemplate/et2_widget_countdown.ts b/api/js/etemplate/et2_widget_countdown.ts
index ce12f8a78c..d98779c70d 100644
--- a/api/js/etemplate/et2_widget_countdown.ts
+++ b/api/js/etemplate/et2_widget_countdown.ts
@@ -35,6 +35,12 @@ export class et2_countdown extends et2_baseWidget {
 			type: "string",
 			default: "s", // s or l
 			description: "Defines display format; s (Initial letter) or l (Complete word) display, default is s."
+		},
+		onFinish: {
+			name: "on finish countdown",
+			type: "js",
+			default: et2_no_init,
+			description: "Callback function to call when the countdown is finished."
 		}
 	};
 
@@ -76,7 +82,11 @@ export class et2_countdown extends et2_baseWidget {
 		this.time.set_value(_time);
 		let self = this;
 		this.timer = setInterval(function(){
-			if (self._updateTimer() <= 0) clearInterval(this.timer);
+			if (self._updateTimer() <= 0)
+			{
+				clearInterval(self.timer);
+				if (typeof self.onFinish == "function") self.onFinish();
+			}
 		}, 1000);
 
 	}
diff --git a/api/templates/default/etemplate2.css b/api/templates/default/etemplate2.css
index 747b88a984..691b6728a9 100644
--- a/api/templates/default/etemplate2.css
+++ b/api/templates/default/etemplate2.css
@@ -3282,4 +3282,14 @@ tr.disableIfNoEPL {
 }
 .colselection.ui-widget-content .et2_selectbox .ui-multiselect-checkboxes {
 	height: calc(100% - 68px) !important;
+}
+.et2_countdown {
+    margin-left: 10px;
+    background: #f1f1f1;
+}
+.et2_countdown > span {
+    margin-right: 10px;
+}
+span.et2_countdown_seconds {
+    margin-right: 0px;
 }
\ No newline at end of file