feat(label animations): added pulse animation

mapmarker · Dec 17, 2023 · 251a0ad · 251a0ad
1 parent 40e3e16
commit 251a0ad
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 50 deletions.
diff --git a/app/Actions/FontAwesome/v6/GetLabelAnimationMarkup.php 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
@@ -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
@@ -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>