1043 lines
47 KiB
PHP
1043 lines
47 KiB
PHP
@extends('site.layout')
|
|
|
|
@section('title', ($emoji['name'] ?? 'Emoji').' - Dewemoji')
|
|
@section('meta_description', ($emoji['description'] ?? 'Emoji detail').' Discover meaning, keywords, and copy-ready formats on Dewemoji.')
|
|
|
|
@php
|
|
$name = $emoji['name'] ?? '';
|
|
$category = $emoji['category'] ?? '';
|
|
$subcategory = $emoji['subcategory'] ?? '';
|
|
$symbol = $emoji['emoji'] ?? '';
|
|
$slug = $emoji['slug'] ?? '';
|
|
$description = $emoji['description'] ?? '';
|
|
$unified = $emoji['unified'] ?? '';
|
|
$shortcode = $emoji['shortcodes'][0] ?? '';
|
|
$supportsTone = (bool) ($emoji['supports_skin_tone'] ?? false);
|
|
$emojiBase = $symbol;
|
|
if ($supportsTone && $symbol !== '') {
|
|
$emojiBase = preg_replace('/\x{1F3FB}|\x{1F3FC}|\x{1F3FD}|\x{1F3FE}|\x{1F3FF}/u', '', $symbol) ?: $symbol;
|
|
}
|
|
$toneVariants = $supportsTone
|
|
? [
|
|
'light' => $emojiBase."\u{1F3FB}",
|
|
'medium-light' => $emojiBase."\u{1F3FC}",
|
|
'medium' => $emojiBase."\u{1F3FD}",
|
|
'medium-dark' => $emojiBase."\u{1F3FE}",
|
|
'dark' => $emojiBase."\u{1F3FF}",
|
|
]
|
|
: [];
|
|
$user = auth()->user();
|
|
$userTier = $userTier ?? $user?->tier;
|
|
$isPersonal = $userTier === 'personal';
|
|
$userKeywords = $userKeywords ?? collect();
|
|
$activeKeywordCount = (int) ($activeKeywordCount ?? $userKeywords->where('is_active', true)->count());
|
|
$htmlHex = '';
|
|
$cssCode = '';
|
|
if (!empty($emoji['codepoints'][0])) {
|
|
$hex = strtoupper($emoji['codepoints'][0]);
|
|
$htmlHex = '&#x'.$hex.';';
|
|
$cssCode = '\\'.$hex;
|
|
}
|
|
$related = $relatedDetails ?? [];
|
|
$keywords = array_slice($emoji['keywords_en'] ?? [], 0, 16);
|
|
@endphp
|
|
|
|
@push('jsonld')
|
|
<script type="application/ld+json">
|
|
{
|
|
"@@context": "https://schema.org",
|
|
"@@graph": [
|
|
{
|
|
"@@type": "CreativeWork",
|
|
"name": @json($name),
|
|
"description": @json($description),
|
|
"url": @json(url('/emoji/'.$slug))
|
|
},
|
|
{
|
|
"@@type": "BreadcrumbList",
|
|
"itemListElement": [
|
|
{"@@type":"ListItem","position":1,"name":"Home","item":@json(url('/'))},
|
|
{"@@type":"ListItem","position":2,"name":"Emoji","item":@json(url('/browse'))},
|
|
{"@@type":"ListItem","position":3,"name":@json($name),"item":@json(url('/emoji/'.$slug))}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
</script>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="flex h-screen">
|
|
<aside class="hidden lg:flex w-20 lg:w-64 h-full glass-panel flex-col justify-between p-4 z-20">
|
|
<div>
|
|
<div class="flex items-center gap-3 px-2 mb-10 mt-2">
|
|
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-white to-gray-300 flex items-center justify-center shadow-lg shadow-white/20">
|
|
<img src="/assets/logo/logo-mark.svg" alt="Dewemoji logo" class="w-7 h-7 object-contain" />
|
|
</div>
|
|
<h1 class="font-display font-bold text-lg tracking-tight hidden lg:block">Dewemoji</h1>
|
|
</div>
|
|
<nav class="space-y-2">
|
|
<a href="{{ route('home') }}" class="flex items-center gap-4 px-3 py-3 rounded-xl text-gray-300 hover:text-white hover:bg-white/5 transition-all group">
|
|
<i data-lucide="arrow-left" class="w-5 h-5 text-brand-sun"></i>
|
|
<span class="text-sm font-medium hidden lg:block text-brand-sun">Back</span>
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="flex-1 h-full overflow-y-auto relative p-4 pt-0 sm:p-6 lg:p-10 pb-24 lg:pb-10 flex flex-col">
|
|
<div class="sticky top-0 z-40 -mx-4 px-4 py-3 mb-6 bg-[var(--app-bg)]/90 backdrop-blur border-b border-white/10 sm:static sm:mx-0 sm:px-0 sm:py-0 sm:mb-8 sm:border-0">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2 text-xs sm:text-sm text-gray-500 font-mono">
|
|
<button type="button" onclick="window.history.length > 1 ? window.history.back() : (window.location.href='{{ route('home') }}')" class="inline-flex sm:hidden w-8 h-8 rounded-full bg-white/5 border border-white/10 items-center justify-center text-gray-300 hover:text-white">
|
|
<i data-lucide="arrow-left" class="w-4 h-4"></i>
|
|
</button>
|
|
<a href="{{ route('home') }}" class="hover:text-white transition-colors">Home</a>
|
|
<i data-lucide="chevron-right" class="w-3 h-3"></i>
|
|
<span class="hidden sm:inline-flex hover:text-white">{{ $category }}</span>
|
|
<i data-lucide="chevron-right" class="w-3 h-3 hidden sm:inline-flex"></i>
|
|
<span class="text-brand-sun">{{ $name }}</span>
|
|
</div>
|
|
<button id="theme-toggle" class="w-9 h-9 rounded-full theme-surface border border-white/10 shadow-lg flex items-center justify-center text-gray-300 hover:text-white transition-colors">
|
|
<span class="sr-only">Toggle theme</span>
|
|
<i data-lucide="moon" class="w-4 h-4" data-theme-icon="dark"></i>
|
|
<i data-lucide="sun" class="w-4 h-4 hidden" data-theme-icon="light"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 max-w-6xl mx-auto w-full">
|
|
<div class="lg:col-span-5 flex flex-col gap-6">
|
|
<div class="glass-card rounded-[32px] aspect-square flex items-center justify-center relative overflow-hidden group">
|
|
<div class="absolute w-64 h-64 bg-yellow-500/20 rounded-full blur-3xl group-hover:bg-yellow-500/30 transition-colors duration-500"></div>
|
|
<div id="emoji-hero-symbol" class="text-[140px] md:text-[180px] leading-none select-none relative z-10 animate-float drop-shadow-2xl">{{ $symbol }}</div>
|
|
<div class="absolute bottom-6 flex gap-3 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-all transform translate-y-0 sm:translate-y-2 sm:group-hover:translate-y-0">
|
|
<button id="favorite-toggle-btn" type="button" class="w-12 h-12 bg-black/50 backdrop-blur text-white force-white rounded-full hover:bg-yellow-400/20 transition-colors border border-white/10 inline-flex items-center justify-center shrink-0" title="Add Favorite" aria-label="Add Favorite">
|
|
<span id="favorite-toggle-icon" class="text-yellow-300 text-lg leading-none">☆</span>
|
|
<span id="favorite-toggle-label" class="sr-only">Add Favorite</span>
|
|
</button>
|
|
<button onclick="copyCurrentEmoji()" class="w-12 h-12 bg-black/50 backdrop-blur text-white force-white rounded-full hover:bg-brand-sun hover:text-black transition-colors border border-white/10 inline-flex items-center justify-center shrink-0" title="Copy">
|
|
<i data-lucide="copy" class="w-5 h-5 force-white"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
@if(count($related) > 0)
|
|
<div class="glass-card rounded-2xl p-5">
|
|
<h3 class="text-xs font-bold text-gray-500 uppercase tracking-wider mb-4">Related</h3>
|
|
<div class="flex gap-2 overflow-x-auto pb-2">
|
|
@foreach($related as $item)
|
|
<div class="relative group">
|
|
@if(!empty($item['slug']))
|
|
<a
|
|
href="{{ route('emoji-detail', ['slug' => $item['slug']]) }}"
|
|
class="w-12 h-12 rounded-lg bg-white/5 hover:bg-white/10 flex items-center justify-center text-2xl transition-colors"
|
|
title="{{ $item['name'] }}"
|
|
>{{ $item['emoji'] }}</a>
|
|
@else
|
|
<div class="w-12 h-12 rounded-lg bg-white/5 flex items-center justify-center text-2xl">{{ $item['emoji'] }}</div>
|
|
@endif
|
|
<button
|
|
type="button"
|
|
onclick="copyToClipboard('{{ $item['emoji'] }}'); event.preventDefault(); event.stopPropagation();"
|
|
class="absolute -bottom-1 -right-1 w-5 h-5 rounded bg-black/70 border border-white/10 text-[10px] text-white force-white hover:bg-brand-ocean/40"
|
|
title="Copy {{ $item['name'] }}"
|
|
>⧉</button>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="lg:col-span-7 flex flex-col gap-6">
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<span class="bg-yellow-500/10 text-yellow-400 border border-yellow-500/20 px-3 py-1 rounded-full text-xs font-bold uppercase">{{ $subcategory }}</span>
|
|
<span id="favorite-pill" class="hidden bg-yellow-500/10 text-yellow-300 border border-yellow-500/30 px-3 py-1 rounded-full text-xs font-bold uppercase">Favorite</span>
|
|
</div>
|
|
<h1 class="font-display text-5xl font-bold mb-4">{{ $name }}</h1>
|
|
<p class="text-gray-400 text-lg leading-relaxed">{{ $description }}</p>
|
|
</div>
|
|
|
|
@if($supportsTone)
|
|
<div id="tone-panel" class="glass-card rounded-xl p-3">
|
|
<div class="text-xs font-mono text-gray-500 mb-2">Skin tone</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
<button type="button" data-tone="off" class="tone-chip px-3 py-1.5 rounded-lg border border-white/10 text-sm text-gray-200 bg-white/5 hover:bg-white/10">Default</button>
|
|
<button type="button" data-tone="light" class="tone-chip px-3 py-1.5 rounded-lg border border-white/10 text-sm text-gray-200 bg-white/5 hover:bg-white/10">🏻</button>
|
|
<button type="button" data-tone="medium-light" class="tone-chip px-3 py-1.5 rounded-lg border border-white/10 text-sm text-gray-200 bg-white/5 hover:bg-white/10">🏼</button>
|
|
<button type="button" data-tone="medium" class="tone-chip px-3 py-1.5 rounded-lg border border-white/10 text-sm text-gray-200 bg-white/5 hover:bg-white/10">🏽</button>
|
|
<button type="button" data-tone="medium-dark" class="tone-chip px-3 py-1.5 rounded-lg border border-white/10 text-sm text-gray-200 bg-white/5 hover:bg-white/10">🏾</button>
|
|
<button type="button" data-tone="dark" class="tone-chip px-3 py-1.5 rounded-lg border border-white/10 text-sm text-gray-200 bg-white/5 hover:bg-white/10">🏿</button>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
@if($shortcode !== '')
|
|
<button onclick="copyToClipboard('{{ $shortcode }}')" class="glass-card p-4 rounded-xl group text-left">
|
|
<div class="flex justify-between items-start mb-1">
|
|
<span class="text-xs font-mono text-gray-500">Shortcode</span>
|
|
<i data-lucide="copy" class="w-3 h-3 text-gray-600 group-hover:text-brand-oceanSoft transition-colors"></i>
|
|
</div>
|
|
<div class="font-mono text-brand-sun group-hover:text-brand-sunSoft font-medium truncate">{{ $shortcode }}</div>
|
|
</button>
|
|
@endif
|
|
|
|
@if($unified !== '')
|
|
<button onclick="copyToClipboard('{{ $unified }}')" class="glass-card p-4 rounded-xl group text-left">
|
|
<div class="flex justify-between items-start mb-1">
|
|
<span class="text-xs font-mono text-gray-500">Unicode</span>
|
|
<i data-lucide="copy" class="w-3 h-3 text-gray-600 group-hover:text-brand-oceanSoft transition-colors"></i>
|
|
</div>
|
|
<div class="font-mono text-gray-300 group-hover:text-white font-medium">{{ $unified }}</div>
|
|
</button>
|
|
@endif
|
|
|
|
@if($htmlHex !== '')
|
|
<button onclick="copyToClipboard('{{ $htmlHex }}')" class="glass-card p-4 rounded-xl group text-left">
|
|
<div class="flex justify-between items-start mb-1">
|
|
<span class="text-xs font-mono text-gray-500">HTML Entity</span>
|
|
<i data-lucide="copy" class="w-3 h-3 text-gray-600 group-hover:text-brand-oceanSoft transition-colors"></i>
|
|
</div>
|
|
<div class="font-mono text-gray-400 group-hover:text-white font-medium truncate">{{ $htmlHex }}</div>
|
|
</button>
|
|
@endif
|
|
|
|
@if($cssCode !== '')
|
|
<button onclick="copyToClipboard('{{ $cssCode }}')" class="glass-card p-4 rounded-xl group text-left">
|
|
<div class="flex justify-between items-start mb-1">
|
|
<span class="text-xs font-mono text-gray-500">CSS Content</span>
|
|
<i data-lucide="copy" class="w-3 h-3 text-gray-600 group-hover:text-brand-oceanSoft transition-colors"></i>
|
|
</div>
|
|
<div class="font-mono text-gray-400 group-hover:text-white font-medium">{{ $cssCode }}</div>
|
|
</button>
|
|
@endif
|
|
</div>
|
|
|
|
@if(count($keywords) > 0)
|
|
<div class="mt-2">
|
|
<div class="flex items-center gap-2 mb-4">
|
|
<i data-lucide="hash" class="w-4 h-4 text-brand-sun"></i>
|
|
<h3 class="text-sm font-bold text-gray-200 uppercase tracking-wide">Semantic Tags</h3>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
@foreach($keywords as $tag)
|
|
<a href="{{ route('home') }}?q={{ urlencode($tag) }}" class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-brand-ocean/10 border border-white/5 hover:border-brand-ocean/30 text-sm text-gray-300 hover:text-brand-oceanSoft transition-all">{{ $tag }}</a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="mt-6 glass-card rounded-2xl p-5">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<i data-lucide="sparkles" class="w-4 h-4 text-brand-ocean"></i>
|
|
<h3 class="text-sm font-bold text-gray-200 uppercase tracking-wide">Your Keywords</h3>
|
|
</div>
|
|
@if ($canManageKeywords)
|
|
<button id="user-keyword-add" class="rounded-full bg-brand-ocean text-white force-white text-xs font-semibold px-3 py-1.5 {{ $limitReached ? 'opacity-60 cursor-not-allowed' : '' }}" {{ $limitReached ? 'disabled' : '' }}>Add keyword</button>
|
|
@endif
|
|
</div>
|
|
|
|
@if ($canManageKeywords)
|
|
@if (!is_null($keywordLimit))
|
|
<div class="mt-3 text-xs text-gray-400">
|
|
Free active limit: {{ $activeKeywordCount }} / {{ $keywordLimit }} keywords.
|
|
</div>
|
|
@endif
|
|
<div id="user-keyword-list" class="mt-4 flex flex-wrap gap-2">
|
|
@forelse ($userKeywords as $keyword)
|
|
@php($isKeywordActive = (bool) ($keyword->is_active ?? true))
|
|
<span
|
|
class="user-keyword-pill inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm {{ $isKeywordActive ? 'bg-white/5 border-white/10 text-gray-200' : 'bg-slate-200/10 border-slate-200/20 text-gray-300' }}"
|
|
data-id="{{ $keyword->id }}"
|
|
data-keyword="{{ $keyword->keyword }}"
|
|
data-lang="{{ $keyword->lang ?? 'und' }}"
|
|
data-active="{{ $isKeywordActive ? '1' : '0' }}"
|
|
>
|
|
<span>{{ $keyword->keyword }}</span>
|
|
<span class="text-[10px] uppercase tracking-[0.2em] text-gray-500">{{ $keyword->lang ?? 'und' }}</span>
|
|
@unless($isKeywordActive)
|
|
<span class="text-[10px] uppercase tracking-[0.2em] text-amber-400">inactive</span>
|
|
@endunless
|
|
<button type="button" class="user-keyword-edit rounded-md border border-white/10 px-1.5 py-0.5 text-[10px] text-gray-300 hover:bg-white/10">Edit</button>
|
|
<button type="button" class="user-keyword-delete rounded-md border border-white/10 px-1.5 py-0.5 text-[10px] text-gray-300 hover:bg-red-500/20">Delete</button>
|
|
</span>
|
|
@empty
|
|
<span id="user-keyword-empty" class="text-sm text-gray-400">No private keywords yet. Add one to personalize search.</span>
|
|
@endforelse
|
|
</div>
|
|
@else
|
|
<div class="mt-4 rounded-xl border border-white/10 bg-white/5 p-3 text-sm text-gray-300">
|
|
Sign up to personalize keywords and sync across devices.
|
|
</div>
|
|
<a href="{{ route('register') }}" class="mt-3 inline-flex items-center justify-center rounded-full bg-brand-sun text-black font-semibold px-4 py-2 text-sm">Sign up free</a>
|
|
@endif
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="mt-auto pt-10 text-center text-gray-600 text-xs">Dewemoji Native • Press 'C' to copy</footer>
|
|
</main>
|
|
</div>
|
|
|
|
|
|
<div id="toast" class="fixed left-1/2 -translate-x-1/2 translate-y-24 opacity-0 transition-all duration-300 z-50 pointer-events-none" style="bottom: calc(env(safe-area-inset-bottom, 0px) + 6rem);">
|
|
<div class="bg-brand-ocean text-white px-6 py-2 rounded-full font-bold shadow-[0_0_20px_rgba(32,83,255,0.45)] flex items-center gap-2">
|
|
<i data-lucide="check" class="w-4 h-4"></i>
|
|
<span id="toast-msg">Copied!</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="user-keyword-modal" class="hidden fixed inset-0 z-[90] items-center justify-center">
|
|
<div class="absolute inset-0 bg-black/70 backdrop-blur-sm"></div>
|
|
<div class="relative z-10 w-full max-w-lg rounded-3xl glass-card theme-surface p-6">
|
|
<div class="flex items-center justify-between">
|
|
<h3 id="user-keyword-title" class="text-lg font-semibold text-slate-900 dark:text-white">Add keyword</h3>
|
|
<button id="user-keyword-close" class="w-8 h-8 rounded-full bg-slate-100 hover:bg-slate-200 dark:bg-white/10 dark:hover:bg-white/20 flex items-center justify-center text-slate-600 dark:text-gray-200">
|
|
<i data-lucide="x" class="w-4 h-4"></i>
|
|
</button>
|
|
</div>
|
|
<form id="user-keyword-form" class="mt-4 grid gap-4">
|
|
<div>
|
|
<label class="text-xs uppercase tracking-[0.2em] text-slate-500 dark:text-gray-400">Keyword</label>
|
|
<input type="text" name="keyword" id="user-keyword-input" class="mt-2 w-full rounded-xl bg-white border border-slate-300 px-4 py-3 text-sm text-slate-900 placeholder-slate-400 focus:outline-none focus:border-brand-ocean dark:bg-black/40 dark:border-white/10 dark:text-gray-200 dark:placeholder-gray-500" placeholder="magic" required>
|
|
</div>
|
|
<div>
|
|
<label class="text-xs uppercase tracking-[0.2em] text-slate-500 dark:text-gray-400">Language</label>
|
|
<input type="hidden" id="user-keyword-lang" value="und">
|
|
<div class="relative mt-2">
|
|
<input type="text" id="user-keyword-lang-combo" autocomplete="off" class="w-full rounded-xl bg-white border border-slate-300 px-4 py-3 text-sm text-slate-900 placeholder-slate-400 focus:outline-none focus:border-brand-ocean dark:bg-black/40 dark:border-white/10 dark:text-gray-200 dark:placeholder-gray-500" placeholder="Search language (e.g. Indonesian)">
|
|
<div id="user-keyword-lang-menu" class="hidden absolute left-0 right-0 mt-2 max-h-56 overflow-y-auto rounded-xl border border-slate-200 bg-white shadow-xl z-[100] dark:border-white/10 dark:bg-[#0b0b0f]"></div>
|
|
</div>
|
|
<select id="user-keyword-lang-source" class="hidden">
|
|
@include('partials.language-datalist')
|
|
</select>
|
|
</div>
|
|
<div class="flex items-center justify-end gap-2">
|
|
<button type="button" id="user-keyword-cancel" class="rounded-full border border-slate-300 px-4 py-2 text-sm text-slate-700 hover:bg-slate-100 dark:border-white/10 dark:text-gray-200 dark:hover:bg-white/5">Cancel</button>
|
|
<button id="user-keyword-submit" type="submit" class="rounded-full bg-brand-ocean text-white force-white font-semibold px-5 py-2 text-sm">Save keyword</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
const RECENT_KEY = 'dewemoji_recent';
|
|
const FAVORITES_KEY = 'dewemoji_favorites';
|
|
const TONE_STORAGE_KEY = 'dewemoji_skin_tone';
|
|
const SYMBOL_DEFAULT = @json($symbol);
|
|
const DETAIL_SLUG = @json($slug);
|
|
const DETAIL_NAME = @json($name);
|
|
const DETAIL_CATEGORY = @json($category);
|
|
const DETAIL_SUBCATEGORY = @json($subcategory);
|
|
const DETAIL_SUPPORTS_TONE = @json($supportsTone);
|
|
const DETAIL_VARIANTS_LIST = @json(array_values($toneVariants));
|
|
const TONE_VARIANTS = @json($toneVariants);
|
|
const TONE_CHAR_BY_SLUG = {
|
|
light: '\u{1F3FB}',
|
|
'medium-light': '\u{1F3FC}',
|
|
medium: '\u{1F3FD}',
|
|
'medium-dark': '\u{1F3FE}',
|
|
dark: '\u{1F3FF}',
|
|
};
|
|
const TONE_CPS = new Set([0x1F3FB, 0x1F3FC, 0x1F3FD, 0x1F3FE, 0x1F3FF]);
|
|
const MODIFIABLE_BASES = new Set([
|
|
0x1F9D1, 0x1F468, 0x1F469, 0x1F466, 0x1F467, 0x1F476,
|
|
0x1F575, 0x1F93C, 0x26F9, 0x1F3CB, 0x1F93D, 0x1F93E, 0x1F926,
|
|
]);
|
|
const NOT_TONEABLE_BASES = new Set([
|
|
0x1F9BE, 0x1F9BF, 0x1FAC0, 0x1F9E0, 0x1FAC1, 0x1F9B7, 0x1F9B4,
|
|
0x1F440, 0x1F441, 0x1F445, 0x1F444, 0x1FAE6,
|
|
0x1F9DE, 0x1F9DF, 0x1F9CC, 0x26F7, 0x1F3C2,
|
|
]);
|
|
const NON_TONEABLE_NAME_PATTERNS = [
|
|
/\bspeaking head\b/i,
|
|
/\bbust in silhouette\b/i,
|
|
/\bbusts in silhouette\b/i,
|
|
/\bfootprints?\b/i,
|
|
/\bfingerprint\b/i,
|
|
/\bfamily\b/i,
|
|
/\bpeople hugging\b/i,
|
|
/\bpeople with bunny ears\b/i,
|
|
/\bpeople wrestling\b/i,
|
|
/\bpeople fencing\b/i,
|
|
/\bperson fencing\b/i,
|
|
/\bmen wrestling\b/i,
|
|
/\bwomen wrestling\b/i,
|
|
/\bmerman\b/i,
|
|
/\bmermaid\b/i,
|
|
/\bdeaf man\b/i,
|
|
/\bdeaf woman\b/i,
|
|
/\bman: beard\b/i,
|
|
/\bwoman: beard\b/i,
|
|
/\bperson running facing right\b/i,
|
|
/\bperson walking facing right\b/i,
|
|
/\bperson kneeling facing right\b/i,
|
|
];
|
|
const ROLE_TONEABLE_NAME_PATTERNS = [
|
|
/\btechnologist\b/i,
|
|
/\bscientist\b/i,
|
|
/\boffice worker\b/i,
|
|
/\bfactory worker\b/i,
|
|
/\bmechanic\b/i,
|
|
/\bcook\b/i,
|
|
/\bfarmer\b/i,
|
|
/\bjudge\b/i,
|
|
/\bteacher\b/i,
|
|
/\bstudent\b/i,
|
|
/\bhealth worker\b/i,
|
|
/\bsinger\b/i,
|
|
/\bastronaut\b/i,
|
|
/\bfirefighter\b/i,
|
|
/\bfacepalming\b/i,
|
|
/\bdancing\b/i,
|
|
/\bdetective\b/i,
|
|
/\bfencing\b/i,
|
|
/\bbouncing ball\b/i,
|
|
/\blifting weights\b/i,
|
|
/\bwrestling\b/i,
|
|
];
|
|
const TONE_CATEGORY_ALLOWLIST = new Set(['people & body', 'activities']);
|
|
const ANDROID_TONE_RENDER_BLOCKLIST_PATTERNS = [
|
|
/\bperson fencing\b/i,
|
|
/\bmen wrestling\b/i,
|
|
/\bwomen wrestling\b/i,
|
|
];
|
|
const ANDROID_TONE_RENDER_BLOCKLIST_SLUGS = new Set([
|
|
'person-fencing',
|
|
'men-wrestling',
|
|
'women-wrestling',
|
|
]);
|
|
const ANDROID_TONE_IMAGE_FALLBACK_SLUGS = new Set([
|
|
'person-fencing',
|
|
'men-wrestling',
|
|
'women-wrestling',
|
|
]);
|
|
const IS_ANDROID_RENDERER = (() => {
|
|
try {
|
|
if (/Android/i.test(navigator.userAgent || '')) return true;
|
|
const platform = window.Capacitor?.getPlatform?.();
|
|
return platform === 'android';
|
|
} catch (_) {
|
|
return /Android/i.test(navigator.userAgent || '');
|
|
}
|
|
})();
|
|
|
|
function twemojiSvgUrlFromCodepoints(cp) {
|
|
return `https://twemoji.maxcdn.com/v/latest/svg/${cp}.svg`;
|
|
}
|
|
|
|
function notoEmojiSvgUrlFromCodepoints(cp) {
|
|
return `https://cdn.jsdelivr.net/gh/googlefonts/noto-emoji@main/svg/emoji_u${String(cp || '').replace(/-/g, '_')}.svg`;
|
|
}
|
|
|
|
function shouldUseDetailToneImageFallback(emojiStr, tone = 'off') {
|
|
if (!IS_ANDROID_RENDERER) return false;
|
|
if (!tone || tone === 'off') return false;
|
|
if (!ANDROID_TONE_IMAGE_FALLBACK_SLUGS.has(String(DETAIL_SLUG || '').toLowerCase())) return false;
|
|
return /\u200D/.test(String(emojiStr || ''));
|
|
}
|
|
|
|
function renderDetailHeroEmoji(emojiStr, tone = 'off') {
|
|
const hero = document.getElementById('emoji-hero-symbol');
|
|
if (!hero) return;
|
|
const glyph = String(emojiStr || '');
|
|
if (!glyph) {
|
|
hero.textContent = '';
|
|
return;
|
|
}
|
|
if (!shouldUseDetailToneImageFallback(glyph, tone) || !window.twemoji?.convert?.toCodePoint) {
|
|
hero.textContent = glyph;
|
|
return;
|
|
}
|
|
let cp = '';
|
|
try {
|
|
cp = window.twemoji.convert.toCodePoint(glyph);
|
|
} catch (_) {
|
|
hero.textContent = glyph;
|
|
return;
|
|
}
|
|
if (!cp) {
|
|
hero.textContent = glyph;
|
|
return;
|
|
}
|
|
const img = new Image();
|
|
img.alt = glyph;
|
|
img.draggable = false;
|
|
img.decoding = 'async';
|
|
img.className = 'inline-block align-middle select-none';
|
|
img.style.width = '1em';
|
|
img.style.height = '1em';
|
|
img.style.objectFit = 'contain';
|
|
img.onerror = () => {
|
|
img.onerror = () => {
|
|
hero.textContent = glyph;
|
|
};
|
|
img.src = twemojiSvgUrlFromCodepoints(cp);
|
|
};
|
|
img.src = notoEmojiSvgUrlFromCodepoints(cp);
|
|
hero.replaceChildren(img);
|
|
}
|
|
let currentDisplayEmoji = SYMBOL_DEFAULT;
|
|
|
|
function getStoredTone() {
|
|
return localStorage.getItem(TONE_STORAGE_KEY) || 'off';
|
|
}
|
|
|
|
function setStoredTone(value) {
|
|
localStorage.setItem(TONE_STORAGE_KEY, value || 'off');
|
|
}
|
|
|
|
function emojiByTone(tone) {
|
|
if (!tone || tone === 'off') return SYMBOL_DEFAULT;
|
|
if (!isDetailToneAllowed()) return stripSkinTone(SYMBOL_DEFAULT) || SYMBOL_DEFAULT;
|
|
const toneChar = TONE_CHAR_BY_SLUG[tone];
|
|
if (!toneChar) return TONE_VARIANTS[tone] || SYMBOL_DEFAULT;
|
|
const base = stripSkinTone(SYMBOL_DEFAULT);
|
|
if (!canApplyToneTo(base)) return base;
|
|
return applyToneSmart(base, toneChar) || TONE_VARIANTS[tone] || base || SYMBOL_DEFAULT;
|
|
}
|
|
|
|
function applyTone(tone) {
|
|
currentDisplayEmoji = emojiByTone(tone);
|
|
renderDetailHeroEmoji(currentDisplayEmoji, tone);
|
|
document.querySelectorAll('.tone-chip').forEach((chip) => {
|
|
const active = chip.dataset.tone === tone;
|
|
chip.classList.toggle('bg-brand-ocean/20', active);
|
|
chip.classList.toggle('border-brand-ocean/50', active);
|
|
chip.classList.toggle('text-brand-oceanSoft', active);
|
|
});
|
|
}
|
|
|
|
function loadRecent() {
|
|
try {
|
|
const parsed = JSON.parse(localStorage.getItem(RECENT_KEY) || '[]');
|
|
return Array.isArray(parsed) ? parsed.filter(isRecentEmojiToken) : [];
|
|
} catch {
|
|
return [];
|
|
}
|
|
}
|
|
|
|
function isRecentEmojiToken(value) {
|
|
const s = String(value || '').trim();
|
|
if (!s) return false;
|
|
if (s.length > 24) return false;
|
|
if (/[:;&<#\\]/.test(s)) return false;
|
|
try {
|
|
return /\p{Extended_Pictographic}/u.test(s);
|
|
} catch {
|
|
return /[\u{1F300}-\u{1FAFF}\u{2600}-\u{27BF}]/u.test(s);
|
|
}
|
|
}
|
|
|
|
function isDetailNameNonToneable() {
|
|
return NON_TONEABLE_NAME_PATTERNS.some((rx) => rx.test(DETAIL_NAME || ''));
|
|
}
|
|
|
|
function isDetailRoleToneable() {
|
|
return ROLE_TONEABLE_NAME_PATTERNS.some((rx) => rx.test(DETAIL_NAME || ''));
|
|
}
|
|
|
|
function isDetailToneAllowed() {
|
|
if (!DETAIL_SUPPORTS_TONE) return false;
|
|
const category = String(DETAIL_CATEGORY || '').toLowerCase();
|
|
if (!TONE_CATEGORY_ALLOWLIST.has(category)) return false;
|
|
if (isDetailNameNonToneable()) return false;
|
|
if (IS_ANDROID_RENDERER) {
|
|
const slug = String(DETAIL_SLUG || '').toLowerCase();
|
|
const usesImageFallback = ANDROID_TONE_IMAGE_FALLBACK_SLUGS.has(slug);
|
|
if (!usesImageFallback && ANDROID_TONE_RENDER_BLOCKLIST_SLUGS.has(slug)) return false;
|
|
if (!usesImageFallback && ANDROID_TONE_RENDER_BLOCKLIST_PATTERNS.some((rx) => rx.test(DETAIL_NAME || ''))) return false;
|
|
}
|
|
const base = stripSkinTone(SYMBOL_DEFAULT);
|
|
if (!base || !canApplyToneTo(base)) return false;
|
|
|
|
const name = String(DETAIL_NAME || '').toLowerCase();
|
|
const looksGenderedRole =
|
|
category === 'people & body' &&
|
|
(name.startsWith('man ') || name.startsWith('woman ') || /[:\-,]\s*(man|woman)\b/.test(name));
|
|
if (looksGenderedRole && !isDetailRoleToneable()) return false;
|
|
|
|
return true;
|
|
}
|
|
|
|
function stripSkinTone(emojiChar) {
|
|
return String(emojiChar || '').replace(/[\u{1F3FB}-\u{1F3FF}]/gu, '');
|
|
}
|
|
|
|
function containsZWJ(s) {
|
|
return /\u200D/.test(String(s || ''));
|
|
}
|
|
|
|
function countHumans(s) {
|
|
let n = 0;
|
|
for (const ch of Array.from(String(s || ''))) {
|
|
const cp = ch.codePointAt(0);
|
|
if (cp === 0x1F468 || cp === 0x1F469 || cp === 0x1F9D1) n++;
|
|
}
|
|
return n;
|
|
}
|
|
|
|
function canApplyToneTo(s) {
|
|
if (!s) return false;
|
|
try {
|
|
const cp0 = String(s).codePointAt(0);
|
|
if (NOT_TONEABLE_BASES.has(cp0)) return false;
|
|
} catch (_) {}
|
|
if (!containsZWJ(s)) return true;
|
|
return countHumans(s) <= 2;
|
|
}
|
|
|
|
function toCodePoints(str) {
|
|
const out = [];
|
|
for (const ch of String(str || '')) out.push(ch.codePointAt(0));
|
|
return out;
|
|
}
|
|
|
|
function fromCodePoints(arr) {
|
|
return String.fromCodePoint(...arr);
|
|
}
|
|
|
|
function applyToneSmart(emojiChar, toneChar) {
|
|
if (!emojiChar || !toneChar) return emojiChar;
|
|
const toneCp = String(toneChar).codePointAt(0);
|
|
if (!TONE_CPS.has(toneCp)) return emojiChar;
|
|
|
|
const cps = toCodePoints(emojiChar);
|
|
for (const cp of cps) {
|
|
if (TONE_CPS.has(cp)) return emojiChar;
|
|
}
|
|
|
|
const VS16 = 0xFE0F;
|
|
const ZWJ = 0x200D;
|
|
const idxs = [];
|
|
for (let i = 0; i < cps.length; i += 1) {
|
|
if (MODIFIABLE_BASES.has(cps[i])) idxs.push(i);
|
|
}
|
|
|
|
if (idxs.length === 0) {
|
|
if (cps.includes(ZWJ)) return emojiChar;
|
|
let pos = 1;
|
|
let rightStart = pos;
|
|
if (cps[1] === VS16) {
|
|
rightStart = 2;
|
|
}
|
|
const left = cps.slice(0, pos);
|
|
left.push(toneCp);
|
|
return fromCodePoints(left.concat(cps.slice(rightStart)));
|
|
}
|
|
|
|
if (idxs.length === 2) {
|
|
const out = cps.slice();
|
|
const insertAfter = (baseIdx) => {
|
|
let pos = baseIdx + 1;
|
|
if (out[pos] === VS16) out.splice(pos, 1);
|
|
out.splice(pos, 0, toneCp);
|
|
};
|
|
insertAfter(idxs[1]);
|
|
insertAfter(idxs[0]);
|
|
return fromCodePoints(out);
|
|
}
|
|
|
|
let pos = idxs[0] + 1;
|
|
let rightStart = pos;
|
|
if (cps[pos] === VS16) {
|
|
rightStart = pos + 1;
|
|
}
|
|
const left = cps.slice(0, pos);
|
|
left.push(toneCp);
|
|
return fromCodePoints(left.concat(cps.slice(rightStart)));
|
|
}
|
|
|
|
function saveRecent(items) {
|
|
const clean = items.filter(isRecentEmojiToken);
|
|
localStorage.setItem(RECENT_KEY, JSON.stringify(clean.slice(0, 8)));
|
|
}
|
|
|
|
function addRecent(emoji) {
|
|
if (!isRecentEmojiToken(emoji)) return;
|
|
const curr = loadRecent().filter((e) => e !== emoji);
|
|
curr.unshift(emoji);
|
|
saveRecent(curr);
|
|
}
|
|
|
|
function loadFavorites() {
|
|
try {
|
|
const parsed = JSON.parse(localStorage.getItem(FAVORITES_KEY) || '[]');
|
|
if (!Array.isArray(parsed)) return [];
|
|
return parsed
|
|
.filter((item) => item && typeof item === 'object')
|
|
.map((item) => ({
|
|
slug: String(item.slug || '').trim(),
|
|
emoji: String(item.emoji || '').trim(),
|
|
name: String(item.name || '').trim(),
|
|
category: String(item.category || '').trim(),
|
|
subcategory: String(item.subcategory || '').trim(),
|
|
supports_skin_tone: Boolean(item.supports_skin_tone),
|
|
variants: Array.isArray(item.variants) ? item.variants : [],
|
|
}))
|
|
.filter((item) => item.slug !== '' && isRecentEmojiToken(item.emoji));
|
|
} catch {
|
|
return [];
|
|
}
|
|
}
|
|
|
|
function saveFavorites(items) {
|
|
localStorage.setItem(FAVORITES_KEY, JSON.stringify(items.slice(0, 24)));
|
|
}
|
|
|
|
function isCurrentFavorite() {
|
|
return loadFavorites().some((item) => item.slug === DETAIL_SLUG);
|
|
}
|
|
|
|
function renderFavoriteButton() {
|
|
const btn = document.getElementById('favorite-toggle-btn');
|
|
const icon = document.getElementById('favorite-toggle-icon');
|
|
const label = document.getElementById('favorite-toggle-label');
|
|
const pill = document.getElementById('favorite-pill');
|
|
if (!btn || !icon || !label) return;
|
|
const active = isCurrentFavorite();
|
|
icon.textContent = active ? '★' : '☆';
|
|
icon.classList.toggle('text-yellow-300', true);
|
|
icon.classList.toggle('text-gray-300', !active);
|
|
label.textContent = active ? 'Favorited' : 'Add Favorite';
|
|
btn.title = active ? 'Remove Favorite' : 'Add Favorite';
|
|
btn.setAttribute('aria-label', active ? 'Remove Favorite' : 'Add Favorite');
|
|
btn.classList.toggle('border-yellow-400/30', active);
|
|
btn.classList.toggle('bg-yellow-400/10', active);
|
|
if (pill) {
|
|
pill.classList.toggle('hidden', !active);
|
|
}
|
|
}
|
|
|
|
function toggleCurrentFavorite() {
|
|
const current = loadFavorites();
|
|
const remaining = current.filter((item) => item.slug !== DETAIL_SLUG);
|
|
const isRemoving = remaining.length !== current.length;
|
|
if (isRemoving) {
|
|
saveFavorites(remaining);
|
|
renderFavoriteButton();
|
|
if (typeof showToast === 'function') showToast('Removed from favorites');
|
|
else showDetailToast('Removed from favorites');
|
|
return false;
|
|
}
|
|
remaining.unshift({
|
|
slug: DETAIL_SLUG,
|
|
emoji: currentDisplayEmoji,
|
|
name: DETAIL_NAME,
|
|
category: DETAIL_CATEGORY,
|
|
subcategory: DETAIL_SUBCATEGORY,
|
|
supports_skin_tone: Boolean(DETAIL_SUPPORTS_TONE),
|
|
variants: Array.isArray(DETAIL_VARIANTS_LIST) ? DETAIL_VARIANTS_LIST : [],
|
|
});
|
|
saveFavorites(remaining);
|
|
renderFavoriteButton();
|
|
if (typeof showToast === 'function') showToast('Added to favorites');
|
|
else showDetailToast('Added to favorites');
|
|
return true;
|
|
}
|
|
|
|
function showDetailToast(message) {
|
|
const toast = document.getElementById('toast');
|
|
const msg = document.getElementById('toast-msg');
|
|
if (!toast || !msg) return;
|
|
msg.innerText = message;
|
|
toast.classList.remove('translate-y-24', 'opacity-0');
|
|
setTimeout(() => {
|
|
toast.classList.add('translate-y-24', 'opacity-0');
|
|
}, 1500);
|
|
}
|
|
|
|
function copyCurrentEmoji() {
|
|
copyToClipboard(currentDisplayEmoji);
|
|
}
|
|
|
|
function copyToClipboard(text) {
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
addRecent(text);
|
|
showDetailToast(`Copied ${text}`);
|
|
});
|
|
}
|
|
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key === 'c' && !e.metaKey && !e.ctrlKey && document.activeElement.tagName !== 'INPUT') {
|
|
copyCurrentEmoji();
|
|
}
|
|
});
|
|
|
|
(() => {
|
|
const tonePanel = document.getElementById('tone-panel');
|
|
if (!isDetailToneAllowed()) {
|
|
if (tonePanel) tonePanel.classList.add('hidden');
|
|
applyTone('off');
|
|
return;
|
|
}
|
|
const initialTone = getStoredTone();
|
|
applyTone(initialTone);
|
|
document.querySelectorAll('.tone-chip').forEach((chip) => {
|
|
chip.addEventListener('click', () => {
|
|
const tone = chip.dataset.tone || 'off';
|
|
setStoredTone(tone);
|
|
applyTone(tone);
|
|
});
|
|
});
|
|
})();
|
|
|
|
document.getElementById('favorite-toggle-btn')?.addEventListener('click', toggleCurrentFavorite);
|
|
renderFavoriteButton();
|
|
|
|
// Treat opening the single-emoji page as a "recently viewed emoji" event.
|
|
addRecent(currentDisplayEmoji);
|
|
|
|
(() => {
|
|
const canManageKeywords = @json($canManageKeywords);
|
|
const limitReached = @json($limitReached);
|
|
if (!canManageKeywords) return;
|
|
const modal = document.getElementById('user-keyword-modal');
|
|
const openBtn = document.getElementById('user-keyword-add');
|
|
const closeBtn = document.getElementById('user-keyword-close');
|
|
const cancelBtn = document.getElementById('user-keyword-cancel');
|
|
const form = document.getElementById('user-keyword-form');
|
|
const modalTitle = document.getElementById('user-keyword-title');
|
|
const submitBtn = document.getElementById('user-keyword-submit');
|
|
const keywordInput = document.getElementById('user-keyword-input');
|
|
const langInput = document.getElementById('user-keyword-lang');
|
|
const langComboInput = document.getElementById('user-keyword-lang-combo');
|
|
const langMenuEl = document.getElementById('user-keyword-lang-menu');
|
|
const langSourceEl = document.getElementById('user-keyword-lang-source');
|
|
const list = document.getElementById('user-keyword-list');
|
|
const csrf = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
|
|
const updateUrlTemplate = @json(route('dashboard.keywords.update', ['keyword' => '__ID__']));
|
|
const deleteUrlTemplate = @json(route('dashboard.keywords.delete', ['keyword' => '__ID__']));
|
|
let editingKeywordId = null;
|
|
const escHtml = (value) => String(value ?? '').replace(/[&<>"']/g, (ch) => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[ch]));
|
|
|
|
window.dewemojiPopulateLanguageSelect?.(langSourceEl);
|
|
const canonicalizeLanguageCode = (raw) => window.dewemojiCanonicalLanguageCode?.(raw) || String(raw || '').trim().toLowerCase();
|
|
|
|
const DEFAULT_LANGUAGE_CODE = 'en';
|
|
const UNDETERMINED_LANGUAGE_CODE = 'und';
|
|
|
|
const languageItems = Array.from(langSourceEl?.options || []).map((option) => ({
|
|
code: option.value,
|
|
label: option.text,
|
|
}));
|
|
const labelByCode = new Map(languageItems.map((item) => [item.code.toLowerCase(), item.label]));
|
|
const itemByCode = new Map(languageItems.map((item) => [item.code.toLowerCase(), item]));
|
|
|
|
const renderLanguageMenu = (query = '') => {
|
|
if (!langMenuEl) return;
|
|
const q = query.trim().toLowerCase();
|
|
const filtered = languageItems.filter((item) => item.label.toLowerCase().includes(q));
|
|
langMenuEl.innerHTML = filtered.map((item) => {
|
|
const selected = langInput.value === item.code;
|
|
return `<button type="button" data-code="${item.code}" class="w-full text-left px-3 py-2 text-sm ${selected ? 'bg-brand-ocean/10 text-brand-ocean dark:text-brand-oceanSoft' : 'text-slate-700 hover:bg-slate-100 dark:text-gray-200 dark:hover:bg-white/10'}">${item.label}</button>`;
|
|
}).join('') || '<div class="px-3 py-2 text-sm text-slate-500 dark:text-gray-400">No matches</div>';
|
|
};
|
|
|
|
const openLanguageMenu = () => {
|
|
renderLanguageMenu(langComboInput.value);
|
|
langMenuEl.classList.remove('hidden');
|
|
};
|
|
|
|
const closeLanguageMenu = () => {
|
|
langMenuEl.classList.add('hidden');
|
|
};
|
|
|
|
const setLanguageByCode = (code, { silentInput = false } = {}) => {
|
|
const value = canonicalizeLanguageCode(code || UNDETERMINED_LANGUAGE_CODE) || UNDETERMINED_LANGUAGE_CODE;
|
|
langInput.value = value;
|
|
if (silentInput || value.toLowerCase() === UNDETERMINED_LANGUAGE_CODE) {
|
|
langComboInput.value = '';
|
|
return;
|
|
}
|
|
langComboInput.value = labelByCode.get(value.toLowerCase()) || value;
|
|
};
|
|
|
|
const resolveLanguageCode = (raw) => {
|
|
const value = (raw || '').trim();
|
|
if (!value) return UNDETERMINED_LANGUAGE_CODE;
|
|
const byCode = itemByCode.get(canonicalizeLanguageCode(value));
|
|
if (byCode) return byCode.code;
|
|
const byLabel = languageItems.find((item) => item.label.toLowerCase() === value.toLowerCase());
|
|
if (byLabel) return canonicalizeLanguageCode(byLabel.code);
|
|
return UNDETERMINED_LANGUAGE_CODE;
|
|
};
|
|
|
|
const setModalMode = (mode = 'add') => {
|
|
if (mode === 'edit') {
|
|
modalTitle.textContent = 'Edit keyword';
|
|
submitBtn.textContent = 'Save changes';
|
|
return;
|
|
}
|
|
modalTitle.textContent = 'Add keyword';
|
|
submitBtn.textContent = 'Save keyword';
|
|
};
|
|
|
|
const buildKeywordPill = (item) => {
|
|
const pill = document.createElement('span');
|
|
const isActive = Boolean(item?.is_active ?? true);
|
|
const lang = String(item?.lang || 'und');
|
|
pill.className = `user-keyword-pill inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border text-sm ${isActive ? 'bg-white/5 border-white/10 text-gray-200' : 'bg-slate-200/10 border-slate-200/20 text-gray-300'}`;
|
|
pill.dataset.id = String(item?.id || '');
|
|
pill.dataset.keyword = String(item?.keyword || '');
|
|
pill.dataset.lang = lang;
|
|
pill.dataset.active = isActive ? '1' : '0';
|
|
pill.innerHTML = `
|
|
<span>${escHtml(String(item?.keyword || ''))}</span>
|
|
<span class="text-[10px] uppercase tracking-[0.2em] text-gray-500">${escHtml(lang)}</span>
|
|
${isActive ? '' : '<span class="text-[10px] uppercase tracking-[0.2em] text-amber-400">inactive</span>'}
|
|
<button type="button" class="user-keyword-edit rounded-md border border-white/10 px-1.5 py-0.5 text-[10px] text-gray-300 hover:bg-white/10">Edit</button>
|
|
<button type="button" class="user-keyword-delete rounded-md border border-white/10 px-1.5 py-0.5 text-[10px] text-gray-300 hover:bg-red-500/20">Delete</button>
|
|
`;
|
|
return pill;
|
|
};
|
|
|
|
const openModal = (mode = 'add', item = null) => {
|
|
if (mode === 'add' && limitReached) {
|
|
showToast('Free plan keyword limit reached');
|
|
return;
|
|
}
|
|
editingKeywordId = mode === 'edit' ? item?.id || null : null;
|
|
setModalMode(mode);
|
|
modal.classList.remove('hidden');
|
|
modal.classList.add('flex');
|
|
keywordInput.value = mode === 'edit' ? (item?.keyword || '') : '';
|
|
setLanguageByCode(mode === 'edit' ? (item?.lang || UNDETERMINED_LANGUAGE_CODE) : DEFAULT_LANGUAGE_CODE, {
|
|
silentInput: mode === 'edit' && String(item?.lang || '').toLowerCase() === UNDETERMINED_LANGUAGE_CODE,
|
|
});
|
|
closeLanguageMenu();
|
|
keywordInput.focus();
|
|
};
|
|
|
|
const closeModal = () => {
|
|
editingKeywordId = null;
|
|
setModalMode('add');
|
|
modal.classList.add('hidden');
|
|
modal.classList.remove('flex');
|
|
};
|
|
|
|
openBtn?.addEventListener('click', () => openModal('add'));
|
|
closeBtn?.addEventListener('click', closeModal);
|
|
cancelBtn?.addEventListener('click', closeModal);
|
|
modal?.addEventListener('click', (e) => {
|
|
if (e.target === modal) closeModal();
|
|
});
|
|
langComboInput?.addEventListener('focus', openLanguageMenu);
|
|
langComboInput?.addEventListener('input', openLanguageMenu);
|
|
langComboInput?.addEventListener('blur', () => {
|
|
const nextCode = resolveLanguageCode(langComboInput.value);
|
|
setLanguageByCode(nextCode, { silentInput: nextCode.toLowerCase() === UNDETERMINED_LANGUAGE_CODE });
|
|
setTimeout(closeLanguageMenu, 120);
|
|
});
|
|
langMenuEl?.addEventListener('mousedown', (event) => {
|
|
const button = event.target.closest('button[data-code]');
|
|
if (!button) return;
|
|
event.preventDefault();
|
|
setLanguageByCode(button.dataset.code);
|
|
closeLanguageMenu();
|
|
});
|
|
|
|
form?.addEventListener('submit', async (e) => {
|
|
e.preventDefault();
|
|
const payload = {
|
|
emoji_slug: @json($slug),
|
|
keyword: keywordInput.value.trim(),
|
|
lang: langInput.value || 'und',
|
|
};
|
|
if (!payload.keyword) return;
|
|
const url = editingKeywordId
|
|
? updateUrlTemplate.replace('__ID__', String(editingKeywordId))
|
|
: '{{ route('dashboard.keywords.store') }}';
|
|
const method = editingKeywordId ? 'PUT' : 'POST';
|
|
const res = await fetch(url, {
|
|
method,
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Accept': 'application/json',
|
|
...(csrf ? { 'X-CSRF-TOKEN': csrf } : {}),
|
|
},
|
|
body: JSON.stringify(payload),
|
|
});
|
|
const data = await res.json().catch(() => null);
|
|
if (!res.ok || !data?.ok) {
|
|
showToast('Could not save keyword');
|
|
return;
|
|
}
|
|
const item = data?.item || payload;
|
|
const wasEditing = Boolean(editingKeywordId);
|
|
const badge = buildKeywordPill(item);
|
|
if (list) {
|
|
const empty = list.querySelector('#user-keyword-empty');
|
|
if (empty) empty.remove();
|
|
if (wasEditing) {
|
|
const current = list.querySelector(`.user-keyword-pill[data-id="${editingKeywordId}"]`);
|
|
if (current) current.replaceWith(badge);
|
|
else list.prepend(badge);
|
|
} else {
|
|
list.prepend(badge);
|
|
}
|
|
}
|
|
closeModal();
|
|
showToast(wasEditing ? 'Keyword updated' : 'Keyword added');
|
|
});
|
|
|
|
list?.addEventListener('click', async (event) => {
|
|
const editBtn = event.target.closest('.user-keyword-edit');
|
|
const deleteBtn = event.target.closest('.user-keyword-delete');
|
|
const pill = event.target.closest('.user-keyword-pill');
|
|
if (!pill) return;
|
|
const id = pill.dataset.id;
|
|
if (!id) return;
|
|
|
|
if (editBtn) {
|
|
openModal('edit', {
|
|
id,
|
|
keyword: pill.dataset.keyword || '',
|
|
lang: pill.dataset.lang || 'und',
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (!deleteBtn) return;
|
|
const ok = window.dewemojiConfirm
|
|
? await window.dewemojiConfirm('Delete this keyword?', {
|
|
title: 'Delete keyword',
|
|
okText: 'Delete',
|
|
})
|
|
: true;
|
|
if (!ok) return;
|
|
|
|
const res = await fetch(deleteUrlTemplate.replace('__ID__', id), {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
...(csrf ? { 'X-CSRF-TOKEN': csrf } : {}),
|
|
},
|
|
});
|
|
const data = await res.json().catch(() => null);
|
|
if (!res.ok || !data?.ok) {
|
|
showToast('Could not delete keyword');
|
|
return;
|
|
}
|
|
pill.remove();
|
|
if (!list.querySelector('.user-keyword-pill')) {
|
|
const empty = document.createElement('span');
|
|
empty.id = 'user-keyword-empty';
|
|
empty.className = 'text-sm text-gray-400';
|
|
empty.textContent = 'No private keywords yet. Add one to personalize search.';
|
|
list.appendChild(empty);
|
|
}
|
|
showToast('Keyword deleted');
|
|
});
|
|
})();
|
|
|
|
</script>
|
|
@endpush
|