Updated

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "cSpell.words": ["Elementor"]
+}

README.md

@@ -1,2 +1,5 @@
 # elementor-addon
+
 ## Work in progress
+
+### [Download](https://github.com/abkarim/elementor-addon/archive/refs/heads/plugin.zip)

assets/css/common.css

@@ -0,0 +1,7 @@
+.elementor-addon--flex {
+    display: flex;
+}
+
+.elementor-addon--center {
+    text-align: center;
+}

assets/css/count-down.css

@@ -1,3 +1,2 @@
-.elementor-addon-count-down figure {
-    display: flex;
+.elementor-addon-count-down {
 }

assets/js/count-down.js

@@ -1 +1,66 @@
+// Get count down container
+const elements = [
+    ...document.querySelectorAll(
+        ".elementor-widget-container .elementor-addon--count-down"
+    ),
+];
 
+elements.forEach((item) => {
+    /**
+     * Get elements
+     */
+    const secondsElement = item.querySelector(".seconds span");
+    const minutesElement = item.querySelector(".minutes span");
+    const hoursElement = item.querySelector(".hours span");
+    const daysElement = item.querySelector(".days span");
+
+    // Timer
+    const timer = setInterval(countDown, 1000);
+
+    function countDown() {
+        const time = {
+            day: parseInt(daysElement.textContent),
+            hour: parseInt(hoursElement.textContent),
+            minute: parseInt(minutesElement.textContent),
+            second: parseInt(secondsElement.textContent),
+        };
+
+        // second
+        if (time.second === 0) {
+            // minute
+            if (time.minute === 0) {
+                // hour
+                if (time.hour === 0) {
+                    // Day
+                    if (time.day === 0) {
+                        // Stop time
+                        clearInterval(timer);
+                        return;
+                    } else if (time.day < 11) {
+                        daysElement.textContent = `0${time.day - 1}`;
+                    } else {
+                        daysElement.textContent = time.day - 1;
+                    }
+                    // Reset hour
+                    hoursElement.textContent = 23;
+                } else if (time.hour < 11) {
+                    hoursElement.textContent = `0${time.hour - 1}`;
+                } else {
+                    hoursElement.textContent = time.hour - 1;
+                }
+                // Reset second
+                minutesElement.textContent = 59;
+            } else if (time.minute < 11) {
+                minutesElement.textContent = `0${time.minute - 1}`;
+            } else {
+                minutesElement.textContent = time.minute - 1;
+            }
+            // Reset second
+            secondsElement.textContent = 59;
+        } else if (time.second < 11) {
+            secondsElement.textContent = `0${time.second - 1}`;
+        } else {
+            secondsElement.textContent = time.second - 1;
+        }
+    }
+});

elementor-addon.php

@@ -21,7 +21,7 @@
 /**
  * Checks if the function already exists or not
  *
- * Don't break site if some other plugin or theme
+ * Doesn't break site if some other plugin or theme
  * is already using this function name
  *
  */

includes/plugin.php

@@ -19,25 +19,8 @@ final class Plugin
      * @since 0.0.1
      * @var string The addon version.
      */
-    // const PLUGIN_VERSION = "0.0.1";
     const PLUGIN_VERSION = false;
 
-    /**
-     * Addon path
-     *
-     * @since 0.0.1
-     * @var string The addon base path.
-     */
-    const PLUGIN_PATH = ELEMENTOR_ADDON_PLUGIN_PATH;
-
-    /**
-     * Addon url path
-     *
-     * @since 0.0.1
-     * @var string The addon base url.
-     */
-    const PLUGIN_URL = ELEMENTOR_ADDON_PLUGIN_URL;
-
     /**
      * Plugin Name
      *
@@ -60,15 +43,7 @@ final class Plugin
      * @since 0.0.1
      * @var string widgets category name
      */
-    const PLUGIN_WIDGETS_CATEGORY_NAME = "Elementor Addon";
-
-    /**
-     * Plugin widgets category SLUG
-     *
-     * @since 0.0.1
-     * @var string widgets category name
-     */
-    const PLUGIN_WIDGETS_CATEGORY_SLUG = "elementor-addon";
+    const PLUGIN_CATEGORY = "elementor-addon-category";
 
     /**
      * Minimum Elementor Version
@@ -172,7 +147,7 @@ public function is_compatible()
             return false;
         }
 
-        // All Ok
+        //* All Ok
         return true;
     }
 
@@ -295,13 +270,13 @@ public function init()
         // Load Styles
         add_action("elementor/frontend/after_enqueue_styles", [
             $this,
-            "frontend_styles",
+            "load_styles",
         ]);
 
         // Load Scripts
         add_action("elementor/frontend/after_register_scripts", [
             $this,
-            "frontend_scripts",
+            "load_scripts",
         ]);
 
         // Add category
@@ -312,12 +287,16 @@ public function init()
 
         // Register widgets
         add_action("elementor/widgets/register", [$this, "register_widgets"]);
-
         // Unregister Widgets
         add_action("elementor/widgets/register", [$this, "unregister_widgets"]);
 
         // Register controls
         add_action("elementor/controls/register", [$this, "register_controls"]);
+        // Unregister controls
+        add_action("elementor/controls/register", [
+            $this,
+            "unregister_controls",
+        ]);
     }
 
     /**
@@ -326,23 +305,36 @@ public function init()
      * @since 0.0.1
      * @access public
      */
-    public function frontend_styles()
+    public function load_styles()
     {
+        /**
+         * Common styles
+         */
         wp_register_style(
-            self::PLUGIN_TEXT_DOMAIN . "-frontend-style",
-            self::PLUGIN_URL . "/assets/css/frontend-style.css",
+            self::PLUGIN_TEXT_DOMAIN . "-common",
+            ELEMENTOR_ADDON_PLUGIN_URL . "/assets/css/common.css",
             [],
             self::PLUGIN_VERSION
         );
+        wp_enqueue_style(self::PLUGIN_TEXT_DOMAIN . "-common");
 
+        /**
+         * Frontend styles
+         */
+        wp_register_style(
+            self::PLUGIN_TEXT_DOMAIN . "-frontend",
+            ELEMENTOR_ADDON_PLUGIN_URL . "/assets/css/frontend.css",
+            [self::PLUGIN_TEXT_DOMAIN . "-common"],
+            self::PLUGIN_VERSION
+        );
         wp_enqueue_style(self::PLUGIN_TEXT_DOMAIN . "-frontend-style");
 
         /**
          * Count Down widgets css
          */
         wp_register_style(
-            self::PLUGIN_TEXT_DOMAIN . "-count-down-style",
-            self::PLUGIN_URL . "/assets/css/count-down.css",
+            self::PLUGIN_TEXT_DOMAIN . "-count-down",
+            ELEMENTOR_ADDON_PLUGIN_URL . "/assets/css/count-down.css",
             [self::PLUGIN_TEXT_DOMAIN . "-frontend-style"],
             self::PLUGIN_VERSION
         );
@@ -354,27 +346,29 @@ public function frontend_styles()
      * @since 0.0.1
      * @access public
      */
-    public function frontend_scripts()
+    public function load_scripts()
     {
+        /**
+         * Frontend scripts
+         */
         wp_register_script(
             self::PLUGIN_TEXT_DOMAIN . "-frontend-script",
-            self::PLUGIN_URL . "/assets/js/frontend-script.js",
+            ELEMENTOR_ADDON_PLUGIN_URL . "/assets/js/frontend-script.js",
             [],
             self::PLUGIN_VERSION,
             false
         );
-
         wp_enqueue_script(self::PLUGIN_TEXT_DOMAIN . "-frontend-script");
 
         /**
          * Count Down widgets JavaScript
          */
         wp_register_script(
             self::PLUGIN_TEXT_DOMAIN . "-count-down-script",
-            self::PLUGIN_URL . "/assets/js/count-down.js",
+            ELEMENTOR_ADDON_PLUGIN_URL . "/assets/js/count-down.js",
             [self::PLUGIN_TEXT_DOMAIN . "-frontend-script"],
             self::PLUGIN_VERSION,
-            false
+            true
         );
     }
 
@@ -389,7 +383,8 @@ public function frontend_scripts()
      */
     public function register_widgets($widgets_manager)
     {
-        require_once self::PLUGIN_PATH . "/includes/widgets/CountDown.php";
+        require_once ELEMENTOR_ADDON_PLUGIN_PATH .
+            "/includes/widgets/CountDown.php";
 
         $widgets_manager->register(new \CountDown());
     }
@@ -400,6 +395,7 @@ public function register_widgets($widgets_manager)
      * Fired by `elementor/widgets/unregister` action hook.
      *
      * @param \Elementor\Widgets_Manager $widgets_manager Elementor widgets manager.
+     * @since 0.0.1
      */
     public function unregister_widgets($widgets_manager)
     {
@@ -414,6 +410,7 @@ public function unregister_widgets($widgets_manager)
      * Fired by `elementor/controls/register` action hook.
      *
      * @param \Elementor\Controls_Manager $controls_manager Elementor controls manager.
+     * @since 0.0.1
      */
     public function register_controls($controls_manager)
     {
@@ -422,6 +419,19 @@ public function register_controls($controls_manager)
         // $controls_manager->register(new \Control_2());
     }
 
+    /**
+     * Unregister Controls
+     *
+     * Fired by `elementor/controls/register` action hook.
+     *
+     * @param \Elementor\Controls_Manager $controls_manager Elementor controls manager.
+     * @since 0.0.1
+     */
+    public function unregister_controls($controls_manager)
+    {
+        // $controls_manager->unregister("");
+    }
+
     /**
      * Add widgets category
      *
@@ -431,11 +441,8 @@ public function register_controls($controls_manager)
      */
     public function add_widgets_category($elements_manager)
     {
-        $elements_manager->add_category(self::PLUGIN_WIDGETS_CATEGORY_SLUG, [
-            "title" => esc_html__(
-                self::PLUGIN_WIDGETS_CATEGORY_NAME,
-                self::PLUGIN_TEXT_DOMAIN
-            ),
+        $elements_manager->add_category(self::PLUGIN_CATEGORY, [
+            "title" => \esc_html__(self::PLUGIN_NAME, self::PLUGIN_TEXT_DOMAIN),
             "icon" => "fa fa-plug",
         ]);
     }

includes/traits/Units.php

@@ -0,0 +1,55 @@
+<?php
+
+trait Units
+{
+    /**
+     * Returns list of units
+     *
+     * @since 0.0.1
+     */
+    function get_units()
+    {
+        return ["rem", "em", "px", "%", "vh", "vw"];
+    }
+
+    /**
+     * Returns list of range
+     *
+     * @since 0.0.1
+     */
+    function get_ranges()
+    {
+        return [
+            "rem" => [
+                "min" => 0,
+                "max" => 100,
+                "step" => 0.5,
+            ],
+            "em" => [
+                "min" => 0,
+                "max" => 100,
+                "step" => 0.5,
+            ],
+            "px" => [
+                "min" => 0,
+                "max" => 500,
+                "step" => 1,
+            ],
+            "%" => [
+                "min" => 0,
+                "max" => 100,
+                "step" => 1,
+            ],
+            "vh" => [
+                "min" => 0,
+                "max" => 200,
+                "step" => 1,
+            ],
+            "vw" => [
+                "min" => 0,
+                "max" => 200,
+                "step" => 1,
+            ],
+        ];
+    }
+}