feat(editor): added labels with animation support

inputs are not yet styled and thus not ready for release
mapmarker · Dec 16, 2023 · cafafc4 · cafafc4
1 parent 951f517
commit cafafc4
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 60 deletions.
diff --git a/app/Actions/FontAwesome/v6/GetLabelMarkup.php b/app/Actions/FontAwesome/v6/GetLabelMarkup.php
@@ -14,9 +14,9 @@ public function handle(Request $request, int $markerSize)
         // GET LABEL
         $labelText = $request->get('label');
         $labelTextSize = $markerSize / 5;
-        $labelColor = $request->get('lc', '#D9534F');
+        $labelColor = '#'.$request->get('lc', 'D9534F');
         $labelFont = $request->get('lf', 'Arial');
-        $labelFontColor = $request->get('lfc', '#FFF');
+        $labelFontColor = '#'.$request->get('lfc', 'FFF');
 
         // LABEL ANIMATION
         $labelAnimation = $request->get('labelAnimation', null);
@@ -73,7 +73,7 @@ public function handle(Request $request, int $markerSize)
 
         // GENERATE LABEL MARKUP
         $labelMarkup = '';
-        if ($labelText) {
+        if ($request->has('label')) {
             $labelMarkup = <<<EOD
             <!--! Icon Label -->
             <svg x="60%" y="60%" width="40%" height="40%" viewbox="0 0 100 100" class="labelAnimation">

diff --git a/resources/views/components/editor.blade.php b/resources/views/components/editor.blade.php
@@ -2,6 +2,7 @@
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-12"
     @icon-changed.window="iconName = $event.detail"
     @color-changed.window="color = $event.detail.replace('#', '')"
+    @label-color-changed.window="labelColor = $event.detail.replace('#', '')"
     @size-changed.window="size = $event.detail"
     x-data="Editor()">
 
@@ -45,6 +46,15 @@
                 <div>
                     {{-- @todo: implement this --}}
                 </div>
+
+                {{-- LABEL --}}
+                <input type="checkbox" x-model="labelEnabled">
+                <input type="text" x-model="labelText">
+                <select x-model="labelAnimation">
+                    <option>none</option>
+                    <option>blink</option>
+                </select>
+                <x-editor.input-color-select change-event="label-color-changed" default="#D9534F" />
             </div>
 
         </div>
@@ -61,13 +71,32 @@
 <script>
     function Editor() {
        return {
+
+            // EDITOR OPTIONS
+            experience: 'icon',
+
+            // ICON OPTIONS
             size: 50,
             iconName: 'fa-solid fa-map-location',
             color: '333',
-            experience: 'icon',
+
+            // LABEL INPUTS
+            labelEnabled: false,
+            labelText: '',
+            labelAnimation: 'none',
+            labelAnimationDuration: '2s',
+            labelColor: 'D9534F',
+
 
             iconUrl() {
-                return '/api/v3/font-awesome/v6/icon?size='+this.size+'&icon='+this.iconName+'&color='+this.color;
+                var iconUrl = '/api/v3/font-awesome/v6/icon?size='+this.size+'&icon='+this.iconName+'&color='+this.color;
+
+                // ADD LABEL
+                if(this.labelEnabled) {
+                    var label = this.labelText ? this.labelText : '%20';
+                    iconUrl = iconUrl + '&label=' + label + '&labelAnimation='+this.labelAnimation+'&lc='+this.labelColor
+                }
+                return iconUrl;
             }
         }
     }

diff --git a/resources/views/components/editor/input-color-select.blade.php b/resources/views/components/editor/input-color-select.blade.php
@@ -1,74 +1,45 @@
-
-
-<div x-data="InputColorSelect()" x-init="$watch('colorSelected', value => colorChanged())" x-cloak>
+<div x-data="{
+    isOpen: false,
+    colors: ['#2196F3', '#009688', '#9C27B0', '#FFEB3B', '#afbbc9', '#4CAF50', '#2d3748', '#f56565', '#ed64a6'],
+    colorSelected: '{{ $default }}',
+    colorChanged() {
+        this.$dispatch('{{ $changeEvent }}', this.colorSelected)
+    }
+}" x-init="$watch('colorSelected', value => colorChanged())" x-cloak>
     <div>
-
         <div class="mb-5">
             <div class="flex items-center">
                 <div>
                     <label for="colorSelected" class="block font-bold mb-1">Select Color</label>
-                    <input id="colorSelected" type="text" placeholder="Pick a color" x-on:change="colorChanged"
-                        class="border border-transparent shadow px-4 py-2 leading-normal text-gray-700 bg-white rounded-md focus:outline-none focus:shadow-outline"
-                        x-model="colorSelected">
+                    <input id="colorSelected" type="text" placeholder="Pick a color" x-on:change="colorChanged" class="border border-transparent shadow px-4 py-2 leading-normal text-gray-700 bg-white rounded-md focus:outline-none focus:shadow-outline" x-model="colorSelected">
                 </div>
                 <div class="relative ml-3 mt-8">
 
-                    <button type="button" @click="isOpen = !isOpen"
-                        class="w-10 h-10 rounded-full focus:outline-none focus:shadow-outline inline-flex p-2 shadow"
-                        :style="`background: ${colorSelected}; color: white`">
-                        <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M15.584 10.001L13.998 8.417 5.903 16.512 5.374 18.626 7.488 18.097z"/><path d="M4.03,15.758l-1,4c-0.086,0.341,0.015,0.701,0.263,0.949C3.482,20.896,3.738,21,4,21c0.081,0,0.162-0.01,0.242-0.03l4-1 c0.176-0.044,0.337-0.135,0.465-0.263l8.292-8.292l1.294,1.292l1.414-1.414l-1.294-1.292L21,7.414 c0.378-0.378,0.586-0.88,0.586-1.414S21.378,4.964,21,4.586L19.414,3c-0.756-0.756-2.072-0.756-2.828,0l-2.589,2.589l-1.298-1.296 l-1.414,1.414l1.298,1.296l-8.29,8.29C4.165,15.421,4.074,15.582,4.03,15.758z M5.903,16.512l8.095-8.095l1.586,1.584 l-8.096,8.096l-2.114,0.529L5.903,16.512z"/></svg>
+                    <button type="button" @click="isOpen = !isOpen" class="w-10 h-10 rounded-full focus:outline-none focus:shadow-outline inline-flex p-2 shadow" :style="`background: ${colorSelected}; color: white`">
+                        <svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+                            <path fill="none" d="M15.584 10.001L13.998 8.417 5.903 16.512 5.374 18.626 7.488 18.097z" />
+                            <path d="M4.03,15.758l-1,4c-0.086,0.341,0.015,0.701,0.263,0.949C3.482,20.896,3.738,21,4,21c0.081,0,0.162-0.01,0.242-0.03l4-1 c0.176-0.044,0.337-0.135,0.465-0.263l8.292-8.292l1.294,1.292l1.414-1.414l-1.294-1.292L21,7.414 c0.378-0.378,0.586-0.88,0.586-1.414S21.378,4.964,21,4.586L19.414,3c-0.756-0.756-2.072-0.756-2.828,0l-2.589,2.589l-1.298-1.296 l-1.414,1.414l1.298,1.296l-8.29,8.29C4.165,15.421,4.074,15.582,4.03,15.758z M5.903,16.512l8.095-8.095l1.586,1.584 l-8.096,8.096l-2.114,0.529L5.903,16.512z" /></svg>
                     </button>
 
-                    <div x-show="isOpen" @click.away="isOpen = false" x-transition:enter="transition ease-out duration-100 transform"
-                        x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
-                        x-transition:leave="transition ease-in duration-75 transform"
-                        x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
-                        class="origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-lg">
+                    <div x-show="isOpen" @click.away="isOpen = false" x-transition:enter="transition ease-out duration-100 transform" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-75 transform" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-lg">
                         <div class="rounded-md bg-white shadow-xs px-4 py-3">
                             <div class="flex flex-wrap -mx-2">
-                            <template x-for="(color, index) in colors" :key="index">
-                                <div
-                                    class="px-2"
-                                >
-                                    <template x-if="colorSelected === color">
-                                        <div
-                                            class="w-8 h-8 inline-flex rounded-full cursor-pointer border-4 border-white"
-                                            :style="`background: ${color}; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);`"
-                                        ></div>
-                                    </template>
-
-                                    <template x-if="colorSelected != color">
-                                        <div
-                                            @click="colorSelected = color"
-                                            @keydown.enter="colorSelected = color"
-                                            role="checkbox"
-                                                tabindex="0"
-                                                :aria-checked="colorSelected"
-                                            class="w-8 h-8 inline-flex rounded-full cursor-pointer border-4 border-white focus:outline-none focus:shadow-outline"
-                                            :style="`background: ${color};`"
-                                        ></div>
-                                    </template>
-                                </div>
-                            </template>
-                        </div>
+                                <template x-for="(color, index) in colors" :key="index">
+                                    <div class="px-2">
+                                        <template x-if="colorSelected === color">
+                                            <div class="w-8 h-8 inline-flex rounded-full cursor-pointer border-4 border-white" :style="`background: ${color}; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);`"></div>
+                                        </template>
+
+                                        <template x-if="colorSelected != color">
+                                            <div @click="colorSelected = color" @keydown.enter="colorSelected = color" role="checkbox" tabindex="0" :aria-checked="colorSelected" class="w-8 h-8 inline-flex rounded-full cursor-pointer border-4 border-white focus:outline-none focus:shadow-outline" :style="`background: ${color};`"></div>
+                                        </template>
+                                    </div>
+                                </template>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-
     </div>
 </div>
-
-<script>
-    function InputColorSelect() {
-        return {
-            isOpen: false,
-            colors: ['#2196F3', '#009688', '#9C27B0', '#FFEB3B', '#afbbc9', '#4CAF50', '#2d3748', '#f56565', '#ed64a6'],
-            colorSelected: '{{ $default }}',
-            colorChanged() {
-                this.$dispatch('{{ $changeEvent }}', this.colorSelected)
-            }
-        }
-    }
-</script>