Skip to content

Commit cafafc4

Browse files
JonnxJonnx
committed
feat(editor): added labels with animation support
inputs are not yet styled and thus not ready for release
1 parent 951f517 commit cafafc4

File tree

3 files changed

+60
-60
lines changed

3 files changed

+60
-60
lines changed

‎app/Actions/FontAwesome/v6/GetLabelMarkup.php

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ public function handle(Request $request, int $markerSize)
1414
// GET LABEL
1515
$labelText = $request->get('label');
1616
$labelTextSize = $markerSize / 5;
17-
$labelColor = $request->get('lc', '#D9534F');
17+
$labelColor = '#'.$request->get('lc', 'D9534F');
1818
$labelFont = $request->get('lf', 'Arial');
19-
$labelFontColor = $request->get('lfc', '#FFF');
19+
$labelFontColor = '#'.$request->get('lfc', 'FFF');
2020

2121
// LABEL ANIMATION
2222
$labelAnimation = $request->get('labelAnimation', null);
@@ -73,7 +73,7 @@ public function handle(Request $request, int $markerSize)
7373

7474
// GENERATE LABEL MARKUP
7575
$labelMarkup = '';
76-
if ($labelText) {
76+
if ($request->has('label')) {
7777
$labelMarkup = <<<EOD
7878
<!--! Icon Label -->
7979
<svg x="60%" y="60%" width="40%" height="40%" viewbox="0 0 100 100" class="labelAnimation">

‎resources/views/components/editor.blade.php

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<div class="grid grid-cols-1 lg:grid-cols-3 gap-12"
33
@icon-changed.window="iconName = $event.detail"
44
@color-changed.window="color = $event.detail.replace('#', '')"
5+
@label-color-changed.window="labelColor = $event.detail.replace('#', '')"
56
@size-changed.window="size = $event.detail"
67
x-data="Editor()">
78

@@ -45,6 +46,15 @@
4546
<div>
4647
{{-- @todo: implement this --}}
4748
</div>
49+
50+
{{-- LABEL --}}
51+
<input type="checkbox" x-model="labelEnabled">
52+
<input type="text" x-model="labelText">
53+
<select x-model="labelAnimation">
54+
<option>none</option>
55+
<option>blink</option>
56+
</select>
57+
<x-editor.input-color-select change-event="label-color-changed" default="#D9534F" />
4858
</div>
4959

5060
</div>
@@ -61,13 +71,32 @@
6171
<script>
6272
function Editor() {
6373
return {
74+
75+
// EDITOR OPTIONS
76+
experience: 'icon',
77+
78+
// ICON OPTIONS
6479
size: 50,
6580
iconName: 'fa-solid fa-map-location',
6681
color: '333',
67-
experience: 'icon',
82+
83+
// LABEL INPUTS
84+
labelEnabled: false,
85+
labelText: '',
86+
labelAnimation: 'none',
87+
labelAnimationDuration: '2s',
88+
labelColor: 'D9534F',
89+
6890
6991
iconUrl() {
70-
return '/api/v3/font-awesome/v6/icon?size='+this.size+'&icon='+this.iconName+'&color='+this.color;
92+
var iconUrl = '/api/v3/font-awesome/v6/icon?size='+this.size+'&icon='+this.iconName+'&color='+this.color;
93+
94+
// ADD LABEL
95+
if(this.labelEnabled) {
96+
var label = this.labelText ? this.labelText : '%20';
97+
iconUrl = iconUrl + '&label=' + label + '&labelAnimation='+this.labelAnimation+'&lc='+this.labelColor
98+
}
99+
return iconUrl;
71100
}
72101
}
73102
}

‎resources/views/components/editor/input-color-select.blade.php

Lines changed: 26 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,45 @@
1-
2-
3-
<div x-data="InputColorSelect()" x-init="$watch('colorSelected', value => colorChanged())" x-cloak>
1+
<div x-data="{
2+
isOpen: false,
3+
colors: ['#2196F3', '#009688', '#9C27B0', '#FFEB3B', '#afbbc9', '#4CAF50', '#2d3748', '#f56565', '#ed64a6'],
4+
colorSelected: '{{ $default }}',
5+
colorChanged() {
6+
this.$dispatch('{{ $changeEvent }}', this.colorSelected)
7+
}
8+
}" x-init="$watch('colorSelected', value => colorChanged())" x-cloak>
49
<div>
5-
610
<div class="mb-5">
711
<div class="flex items-center">
812
<div>
913
<label for="colorSelected" class="block font-bold mb-1">Select Color</label>
10-
<input id="colorSelected" type="text" placeholder="Pick a color" x-on:change="colorChanged"
11-
class="border border-transparent shadow px-4 py-2 leading-normal text-gray-700 bg-white rounded-md focus:outline-none focus:shadow-outline"
12-
x-model="colorSelected">
14+
<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">
1315
</div>
1416
<div class="relative ml-3 mt-8">
1517

16-
<button type="button" @click="isOpen = !isOpen"
17-
class="w-10 h-10 rounded-full focus:outline-none focus:shadow-outline inline-flex p-2 shadow"
18-
:style="`background: ${colorSelected}; color: white`">
19-
<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>
18+
<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`">
19+
<svg class="w-6 h-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
20+
<path fill="none" d="M15.584 10.001L13.998 8.417 5.903 16.512 5.374 18.626 7.488 18.097z" />
21+
<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>
2022
</button>
2123

22-
<div x-show="isOpen" @click.away="isOpen = false" x-transition:enter="transition ease-out duration-100 transform"
23-
x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
24-
x-transition:leave="transition ease-in duration-75 transform"
25-
x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
26-
class="origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-lg">
24+
<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">
2725
<div class="rounded-md bg-white shadow-xs px-4 py-3">
2826
<div class="flex flex-wrap -mx-2">
29-
<template x-for="(color, index) in colors" :key="index">
30-
<div
31-
class="px-2"
32-
>
33-
<template x-if="colorSelected === color">
34-
<div
35-
class="w-8 h-8 inline-flex rounded-full cursor-pointer border-4 border-white"
36-
:style="`background: ${color}; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.2);`"
37-
></div>
38-
</template>
39-
40-
<template x-if="colorSelected != color">
41-
<div
42-
@click="colorSelected = color"
43-
@keydown.enter="colorSelected = color"
44-
role="checkbox"
45-
tabindex="0"
46-
:aria-checked="colorSelected"
47-
class="w-8 h-8 inline-flex rounded-full cursor-pointer border-4 border-white focus:outline-none focus:shadow-outline"
48-
:style="`background: ${color};`"
49-
></div>
50-
</template>
51-
</div>
52-
</template>
53-
</div>
27+
<template x-for="(color, index) in colors" :key="index">
28+
<div class="px-2">
29+
<template x-if="colorSelected === color">
30+
<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>
31+
</template>
32+
33+
<template x-if="colorSelected != color">
34+
<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>
35+
</template>
36+
</div>
37+
</template>
38+
</div>
5439
</div>
5540
</div>
5641
</div>
5742
</div>
5843
</div>
59-
6044
</div>
6145
</div>
62-
63-
<script>
64-
function InputColorSelect() {
65-
return {
66-
isOpen: false,
67-
colors: ['#2196F3', '#009688', '#9C27B0', '#FFEB3B', '#afbbc9', '#4CAF50', '#2d3748', '#f56565', '#ed64a6'],
68-
colorSelected: '{{ $default }}',
69-
colorChanged() {
70-
this.$dispatch('{{ $changeEvent }}', this.colorSelected)
71-
}
72-
}
73-
}
74-
</script>

0 commit comments

Comments
 (0)