79 lines
1.7 KiB
PHP
79 lines
1.7 KiB
PHP
|
|
@props([
|
|
'value' => '',
|
|
'id' => '',
|
|
'placeholder' => '',
|
|
'class' => '',
|
|
'name' => ''
|
|
])
|
|
|
|
@php
|
|
$uniqueId = uniqid();
|
|
@endphp
|
|
|
|
<div class="emojiInput">
|
|
<input type="text" name="{{ $name }}" {{ $attributes->merge(['class' => 'emojifield emojiFieldId'.$uniqueId.' '.$class]) }} value="{{ $value }}" placeholder="{{ $placeholder }}" id="{{ $id }}" />
|
|
<a class="emojibtn emojibtnId{{ $uniqueId }} fa-regular fa-face-smile" href="javascript:void(0);"> </a>
|
|
</div>
|
|
<script>
|
|
jQuery(document).ready(function(){
|
|
new EmojiPicker({
|
|
trigger: [
|
|
{
|
|
selector: '.emojibtnId{{ $uniqueId }}',
|
|
insertInto: '.emojiFieldId{{ $uniqueId }}'
|
|
|
|
}
|
|
],
|
|
closeButton: true,
|
|
specialButtons: 'green' // #008000, rgba(0, 128, 0);
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
<style>
|
|
.emojiInput {
|
|
position:relative;
|
|
}
|
|
|
|
.emojiInput a.emojibtn {
|
|
font-size:var(--font-size-xxl);
|
|
color:var(--neutral);
|
|
margin-left: -35px;
|
|
background:var(--secondary-background);
|
|
position:absolute;
|
|
right: 7px;
|
|
top: 8px;
|
|
}
|
|
|
|
.fg-emoji-container {
|
|
box-shadow:var(--large-shadow);
|
|
}
|
|
.fg-emoji-nav {
|
|
background-color: var(--secondary-background);
|
|
}
|
|
.fg-emoji-nav li a svg {
|
|
fill: var(--primary-font-color);
|
|
}
|
|
.fg-emoji-picker-search {
|
|
position: relative;
|
|
margin-top: 15px;
|
|
padding: 0px 10px;
|
|
}
|
|
.fg-emoji-list li {
|
|
height:30px;
|
|
}
|
|
.fg-picker-special-buttons {
|
|
display:none;
|
|
}
|
|
|
|
.fg-emoji-picker-category-title {
|
|
margin-top:10px;
|
|
}
|
|
|
|
.emojifield {
|
|
width:100%;
|
|
}
|
|
</style>
|