Skip to content

Instantly share code, notes, and snippets.

@robertdrakedennis
Created October 2, 2021 06:08
Show Gist options
  • Save robertdrakedennis/35461b629722c2adbbe0c1938c4178d8 to your computer and use it in GitHub Desktop.
Save robertdrakedennis/35461b629722c2adbbe0c1938c4178d8 to your computer and use it in GitHub Desktop.
Laravel color picker using vanilla-colorful and skypack
@props([
'id' => null,
'value' => null,
'text' => null,
'name' => null,
'default' => null,
])
<div
{{ $attributes->merge(['title' => $value]) }}
>
<h4 id="{{ $id }}-text" style="color: {{ $default }}">
@if($text)
{{ $text }}
@endif
</h4>
<hex-color-picker @if(!empty($value))color="{{ $value }}"@elseif(!empty($default))color="{{ $default }}"@endif></hex-color-picker>
<input
id="{{ $id }}-input"
name="{{ $name }}"
type="hidden"
@if(!empty($value))value="{{ $value }}"@elseif(!empty($default))value="{{ $default }}"@endif
/>
</div>
@push('scripts')
@once
<script type="module">
import 'https://cdn.skypack.dev/vanilla-colorful';
const picker = document.querySelector('hex-color-picker');
picker.addEventListener('color-changed', (event) => {
let input = document.getElementById('{{ $id }}-input')
let preview = document.getElementById('{{ $id }}-text')
const newColor = event.detail.value;
preview.style.color = newColor;
input.setAttribute('value', newColor);
input.dispatchEvent(new Event('input', {bubbles: true}))
});
</script>
@endonce
@endpush
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment