From 251a0adc47de37522a70dc1d502449b316966f2e Mon Sep 17 00:00:00 2001
From: Jonas Weigert <weigert.jonas@gmail.com>
Date: Sat, 16 Dec 2023 18:17:08 -0800
Subject: [PATCH] feat(label animations): added pulse animation

---
 .../v6/GetLabelAnimationMarkup.php            | 87 +++++++++++++++++++
 app/Actions/FontAwesome/v6/GetLabelMarkup.php | 52 +----------
 resources/views/components/editor.blade.php   |  1 +
 3 files changed, 90 insertions(+), 50 deletions(-)
 create mode 100644 app/Actions/FontAwesome/v6/GetLabelAnimationMarkup.php

diff --git a/app/Actions/FontAwesome/v6/GetLabelAnimationMarkup.php b/app/Actions/FontAwesome/v6/GetLabelAnimationMarkup.php
new file mode 100644
index 0000000..7576583
--- /dev/null
+++ b/app/Actions/FontAwesome/v6/GetLabelAnimationMarkup.php
@@ -0,0 +1,87 @@
+<?php
+
+namespace App\Actions\FontAwesome\v6;
+
+use Lorisleiva\Actions\Concerns\AsAction;
+
+class GetLabelAnimationMarkup
+{
+    use AsAction;
+
+    public function handle(string $animation, string $animationDuration)
+    {
+        if ($animation == 'blink') {
+            return  <<<EOD
+                <style>
+
+                    @keyframes blink {
+                        0% {
+                            opacity: 1;
+                        }
+                        49% {
+                            opacity: 1;
+                        }
+                        50% {
+                            opacity: 0;
+                        }
+                        99% {
+                            opacity: 0;
+                        }
+                        100% {
+                            opacity: 1;
+                        }
+                    }
+
+                    @-webkit-keyframes blink {
+                        0% {
+                            opacity: 1;
+                        }
+                        49% {
+                            opacity: 1;
+                        }
+                        50% {
+                            opacity: 0;
+                        }
+                        99% {
+                            opacity: 0;
+                        }
+                        100% {
+                            opacity: 1;
+                        }
+                    }
+
+                    .labelAnimation {
+                        animation: blink {$animationDuration} linear infinite;
+                        -webkit-animation: blink {$animationDuration} linear infinite;
+                    }
+                </style>
+            EOD;
+        } elseif ($animation == 'pulse') {
+            return  <<<EOD
+                <style>
+
+                    @keyframes pulse {
+                        0% {
+                            opacity: 1.0;
+                        }
+                        25% {
+                            opacity: 1.0;
+                        }
+                        100% {
+                            opacity: 0.0;
+                        }
+                    }
+
+                    .labelAnimation {
+                        animation-name: pulse;
+                        animation-duration: {$animationDuration};
+                        animation-iteration-count: infinite;
+                        animation-direction: alternate;
+                    }
+                </style>
+            EOD;
+        }
+
+        return '';
+    }
+}
diff --git a/app/Actions/FontAwesome/v6/GetLabelMarkup.php b/app/Actions/FontAwesome/v6/GetLabelMarkup.php
index 00d7bb4..dec19d8 100644
--- a/app/Actions/FontAwesome/v6/GetLabelMarkup.php
+++ b/app/Actions/FontAwesome/v6/GetLabelMarkup.php
@@ -21,62 +21,14 @@ public function handle(Request $request, int $markerSize)
         // LABEL ANIMATION
         $labelAnimation = $request->get('labelAnimation', null);
         $labelAnimationDuration = $request->get('labelAnimationDuration', '1s');
-        $labelAnimationMarkup = null;
-
-        if ($labelAnimation == 'blink') {
-            $labelAnimationMarkup = <<<EOD
-                <style>
-
-                    @keyframes blink {
-                        0% {
-                            opacity: 1;
-                        }
-                        49% {
-                            opacity: 1;
-                        }
-                        50% {
-                            opacity: 0;
-                        }
-                        99% {
-                            opacity: 0;
-                        }
-                        100% {
-                            opacity: 1;
-                        }
-                    }
-
-                    @-webkit-keyframes blink {
-                        0% {
-                            opacity: 1;
-                        }
-                        49% {
-                            opacity: 1;
-                        }
-                        50% {
-                            opacity: 0;
-                        }
-                        99% {
-                            opacity: 0;
-                        }
-                        100% {
-                            opacity: 1;
-                        }
-                     }
-
-                    .labelAnimation {
-                        animation: blink {$labelAnimationDuration} linear infinite;
-                        -webkit-animation: blink {$labelAnimationDuration} linear infinite;
-                    }
-                    </style>
-            EOD;
-        }
+        $labelAnimationMarkup = GetLabelAnimationMarkup::run($labelAnimation, $labelAnimationDuration);
 
         // GENERATE LABEL MARKUP
         $labelMarkup = '';
         if ($request->has('label')) {
             $labelMarkup = <<<EOD
             <!--! Icon Label -->
-            <svg x="60%" y="60%" width="40%" height="40%" viewbox="0 0 100 100" class="labelAnimation">
+            <svg x="70%" y="70%" width="30%" height="30%" viewbox="0 0 100 100" class="labelAnimation">
                 <circle cx="50%" cy="50%" fill="{$labelColor}" r="50%" />
                 <text x="50%" y="50%" fill="{$labelFontColor}" text-anchor="middle" dy=".3em" font-size="{$labelTextSize}" font-family="{$labelFont}">{$labelText}</text>
                 {$labelAnimationMarkup}
diff --git a/resources/views/components/editor.blade.php b/resources/views/components/editor.blade.php
index c6c09ca..c5af816 100644
--- a/resources/views/components/editor.blade.php
+++ b/resources/views/components/editor.blade.php
@@ -75,6 +75,7 @@
                         <select x-model="labelAnimation"  class="border border-transparent shadow px-4 py-2 leading-normal text-gray-700 bg-white rounded-md focus:outline-none focus:shadow-outline w-full">
                             <option>none</option>
                             <option>blink</option>
+                            <option>pulse</option>
                         </select>
                     </div>
                     <div>