mirror of
https://github.com/php-flasher/php-flasher.git
synced 2026-03-31 15:07:47 +01:00
Wip
This commit is contained in:
Younes ENNAJI
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"dist/main.css": "/dist/main.e1d30c81.css",
|
||||
"dist/main.css": "/dist/main.edfbc23d.css",
|
||||
"dist/main.js": "/dist/main.3be5bc06.js",
|
||||
"dist/455.3a7b4474.css": "/dist/455.3a7b4474.css",
|
||||
"dist/455.095e6545.js": "/dist/455.095e6545.js",
|
||||
|
||||
+598
-1
@@ -93,7 +93,551 @@ layout: default
|
||||
|
||||
<!-- Content area with custom styling -->
|
||||
<div class="prose prose-slate max-w-none p-6 md:p-8">
|
||||
{{ content }}
|
||||
<!-- Requirements Section -->
|
||||
<div id="requirements" class="scroll-mt-20">
|
||||
<h2 class="text-2xl font-bold text-slate-800 flex items-center gap-3 mb-4 border-b border-slate-100 pb-2">
|
||||
<span class="p-1.5 bg-indigo-50 text-indigo-600 rounded-lg"><i class="fa-solid fa-list-check"></i></span>
|
||||
Requirements
|
||||
</h2>
|
||||
<p class="mb-4"><strong>PHPFlasher</strong> helps you easily add flash notifications to your <strong>Symfony</strong> projects, improving user feedback with minimal setup.</p>
|
||||
<p class="mb-4">To use <strong>PHPFlasher</strong> with Symfony, you need:</p>
|
||||
<ul class="list-disc pl-6 mb-6 space-y-2">
|
||||
<li><strong>PHP</strong> v8.2 or higher</li>
|
||||
<li><strong>Symfony</strong> v7.0 or higher</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Installation Section -->
|
||||
<div id="installation" class="mt-10 scroll-mt-20">
|
||||
<h2 class="text-2xl font-bold text-slate-800 flex items-center gap-3 mb-4 border-b border-slate-100 pb-2">
|
||||
<span class="p-1.5 bg-indigo-50 text-indigo-600 rounded-lg"><i class="fa-solid fa-download"></i></span>
|
||||
Installation
|
||||
</h2>
|
||||
<p class="mb-4"><strong>PHPFlasher</strong> is modular. You can install only the parts you need.</p>
|
||||
<p class="mb-4">Run this command to install it:</p>
|
||||
|
||||
<!-- Terminal code block using the user's styling -->
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-4">
|
||||
<div class="bg-slate-800 p-4 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="flex space-x-1 mr-4">
|
||||
<div class="w-3 h-3 rounded-full bg-red-400"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-green-400"></div>
|
||||
</div>
|
||||
<span class="text-slate-400 text-sm">Terminal</span>
|
||||
</div>
|
||||
<div class="text-slate-400 text-sm">Installation</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 bg-slate-900">
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="relative">
|
||||
<div class="flex items-center mb-2">
|
||||
<div class="w-5 h-5 bg-black text-white rounded-full flex items-center justify-center mr-2 text-xs">
|
||||
<i class="fa-brands fa-symfony"></i>
|
||||
</div>
|
||||
<span class="text-slate-300 text-sm">Symfony Installation</span>
|
||||
</div>
|
||||
<pre class="bg-slate-800 p-4 rounded-lg text-sm overflow-x-auto"><code class="language-bash text-slate-200">composer require php-flasher/flasher-symfony</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mb-4">After installing, run this command to set up the required assets:</p>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
|
||||
<div class="bg-slate-800 p-4 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="flex space-x-1 mr-4">
|
||||
<div class="w-3 h-3 rounded-full bg-red-400"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-green-400"></div>
|
||||
</div>
|
||||
<span class="text-slate-400 text-sm">Terminal</span>
|
||||
</div>
|
||||
<div class="text-slate-400 text-sm">Setup Assets</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 bg-slate-900">
|
||||
<pre class="bg-slate-800 p-4 rounded-lg text-sm overflow-x-auto"><code class="language-bash text-slate-200">php bin/console flasher:install</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Usage Section -->
|
||||
<div id="usage" class="mt-10 scroll-mt-20">
|
||||
<h2 class="text-2xl font-bold text-slate-800 flex items-center gap-3 mb-4 border-b border-slate-100 pb-2">
|
||||
<span class="p-1.5 bg-indigo-50 text-indigo-600 rounded-lg"><i class="fa-solid fa-code"></i></span>
|
||||
Usage
|
||||
</h2>
|
||||
|
||||
<h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Basic Usage</h3>
|
||||
<p class="mb-4">Here's a basic example of using PHPFlasher in a Symfony controller:</p>
|
||||
|
||||
<!-- PHP Example using user's styling -->
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
|
||||
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||
<div class="flex space-x-1.5 mr-3">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-white opacity-80 text-xs font-medium">ProductController.php</div>
|
||||
</div>
|
||||
<div>
|
||||
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">namespace App\Controller;
|
||||
|
||||
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
|
||||
use Symfony\Component\HttpFoundation\Response;
|
||||
use Symfony\Component\Routing\Annotation\Route;
|
||||
|
||||
class ProductController extends AbstractController
|
||||
{
|
||||
#[Route('/product/create', name: 'app_product_create')]
|
||||
public function create(): Response
|
||||
{
|
||||
// Your logic to create a product
|
||||
|
||||
// Add a success notification
|
||||
flash()->success('Product created successfully!');
|
||||
|
||||
return $this->redirectToRoute('app_product_list');
|
||||
}
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Notification Types</h3>
|
||||
<p class="mb-4">PHPFlasher supports different types of notifications:</p>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
|
||||
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||
<div class="flex space-x-1.5 mr-3">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-white opacity-80 text-xs font-medium">NotificationTypes.php</div>
|
||||
</div>
|
||||
<div>
|
||||
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">// Success message
|
||||
flash()->success('Your changes have been saved!');
|
||||
|
||||
// Error message
|
||||
flash()->error('Something went wrong!');
|
||||
|
||||
// Warning message
|
||||
flash()->warning('Please review your data before proceeding.');
|
||||
|
||||
// Info message
|
||||
flash()->info('The system will be down for maintenance tonight.');</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preview grid of notification types -->
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 my-6">
|
||||
<div class="p-4 border border-green-200 bg-green-50 rounded-lg">
|
||||
<div class="flex items-center gap-2 mb-2 text-green-700">
|
||||
<i class="fa-solid fa-circle-check text-xl"></i>
|
||||
<strong>Success</strong>
|
||||
</div>
|
||||
<p class="text-green-600 text-sm">Your changes have been saved!</p>
|
||||
</div>
|
||||
<div class="p-4 border border-red-200 bg-red-50 rounded-lg">
|
||||
<div class="flex items-center gap-2 mb-2 text-red-700">
|
||||
<i class="fa-solid fa-circle-exclamation text-xl"></i>
|
||||
<strong>Error</strong>
|
||||
</div>
|
||||
<p class="text-red-600 text-sm">Something went wrong!</p>
|
||||
</div>
|
||||
<div class="p-4 border border-amber-200 bg-amber-50 rounded-lg">
|
||||
<div class="flex items-center gap-2 mb-2 text-amber-700">
|
||||
<i class="fa-solid fa-triangle-exclamation text-xl"></i>
|
||||
<strong>Warning</strong>
|
||||
</div>
|
||||
<p class="text-amber-600 text-sm">Please review your data before proceeding.</p>
|
||||
</div>
|
||||
<div class="p-4 border border-blue-200 bg-blue-50 rounded-lg">
|
||||
<div class="flex items-center gap-2 mb-2 text-blue-700">
|
||||
<i class="fa-solid fa-circle-info text-xl"></i>
|
||||
<strong>Info</strong>
|
||||
</div>
|
||||
<p class="text-blue-600 text-sm">The system will be down for maintenance tonight.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Adding a Title</h3>
|
||||
<p class="mb-4">You can add a title to your notifications:</p>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
|
||||
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||
<div class="flex space-x-1.5 mr-3">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-white opacity-80 text-xs font-medium">Title.php</div>
|
||||
</div>
|
||||
<div>
|
||||
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">flash()->success('Your profile has been updated successfully.', 'Profile Updated');</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Example with title -->
|
||||
<div class="p-4 border border-green-200 bg-green-50 rounded-lg mb-6">
|
||||
<div class="flex items-center gap-2 mb-2 text-green-700">
|
||||
<i class="fa-solid fa-circle-check text-xl"></i>
|
||||
<strong>Profile Updated</strong>
|
||||
</div>
|
||||
<p class="text-green-600 text-sm">Your profile has been updated successfully.</p>
|
||||
</div>
|
||||
|
||||
<h3 class="text-xl font-semibold text-slate-700 mt-6 mb-3">Notification Options</h3>
|
||||
<p class="mb-4">Customize your notifications with various options:</p>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
|
||||
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||
<div class="flex space-x-1.5 mr-3">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-white opacity-80 text-xs font-medium">Options.php</div>
|
||||
</div>
|
||||
<div>
|
||||
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">flash()->success('Your changes have been saved!')
|
||||
->option('position', 'top-center') // Position on the screen
|
||||
->option('timeout', 5000) // How long to display (milliseconds)
|
||||
->option('rtl', true); // Right-to-left support</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Configuration Section -->
|
||||
<div id="configuration" class="mt-10 scroll-mt-20">
|
||||
<h2 class="text-2xl font-bold text-slate-800 flex items-center gap-3 mb-4 border-b border-slate-100 pb-2">
|
||||
<span class="p-1.5 bg-indigo-50 text-indigo-600 rounded-lg"><i class="fa-solid fa-gear"></i></span>
|
||||
Configuration
|
||||
</h2>
|
||||
|
||||
<p class="mb-4">If you want to change the default settings, you can publish the configuration file:</p>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
|
||||
<div class="bg-slate-800 p-4 flex items-center justify-between">
|
||||
<div class="flex items-center">
|
||||
<div class="flex space-x-1 mr-4">
|
||||
<div class="w-3 h-3 rounded-full bg-red-400"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-yellow-400"></div>
|
||||
<div class="w-3 h-3 rounded-full bg-green-400"></div>
|
||||
</div>
|
||||
<span class="text-slate-400 text-sm">Terminal</span>
|
||||
</div>
|
||||
<div class="text-slate-400 text-sm">Generate Config</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 bg-slate-900">
|
||||
<pre class="bg-slate-800 p-4 rounded-lg text-sm overflow-x-auto"><code class="language-bash text-slate-200">php bin/console flasher:install --config</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mb-4">This will create a file at <code class="bg-slate-100 px-2 py-1 rounded text-indigo-600">config/packages/flasher.yaml</code> with the following content:</p>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
|
||||
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||
<div class="flex space-x-1.5 mr-3">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-white opacity-80 text-xs font-medium">config/packages/flasher.yaml</div>
|
||||
</div>
|
||||
<div>
|
||||
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-yaml"># config/packages/flasher.yaml
|
||||
|
||||
flasher:
|
||||
# Default notification library (e.g., 'flasher', 'toastr', 'noty', 'notyf', 'sweetalert')
|
||||
default: flasher
|
||||
|
||||
# Path to the main PHPFlasher JavaScript file
|
||||
main_script: '/vendor/flasher/flasher.min.js'
|
||||
|
||||
# List of CSS files to style your notifications
|
||||
styles:
|
||||
- '/vendor/flasher/flasher.min.css'
|
||||
|
||||
# Set global options for all notifications (optional)
|
||||
# options:
|
||||
# # Time in milliseconds before the notification disappears
|
||||
# timeout: 5000
|
||||
# # Where the notification appears on the screen
|
||||
# position: 'top-right'
|
||||
|
||||
# Automatically inject JavaScript and CSS assets into your HTML pages
|
||||
inject_assets: true
|
||||
|
||||
# Enable message translation using Symfony's translation service
|
||||
translate: true
|
||||
|
||||
# URL patterns to exclude from asset injection and flash_bag conversion
|
||||
excluded_paths:
|
||||
- '/^\/_profiler/'
|
||||
- '/^\/_fragment/'
|
||||
|
||||
# Map Symfony flash message keys to notification types
|
||||
flash_bag:
|
||||
success: ['success']
|
||||
error: ['error', 'danger']
|
||||
warning: ['warning', 'alarm']
|
||||
info: ['info', 'notice', 'alert']</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Presets Section -->
|
||||
<div id="presets" class="mt-10 scroll-mt-20">
|
||||
<h2 class="text-2xl font-bold text-slate-800 flex items-center gap-3 mb-4 border-b border-slate-100 pb-2">
|
||||
<span class="p-1.5 bg-indigo-50 text-indigo-600 rounded-lg"><i class="fa-solid fa-sliders"></i></span>
|
||||
Presets
|
||||
</h2>
|
||||
|
||||
<p class="mb-4">You can create a preset for a custom notification that you want to reuse in multiple places. Add a <code class="bg-slate-100 px-2 py-1 rounded text-indigo-600">presets</code> entry in the configuration file.</p>
|
||||
|
||||
<div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6">
|
||||
<p class="text-blue-700"><i class="fa-solid fa-info-circle mr-2"></i> A preset is like a pre-defined message you can use in many places.</p>
|
||||
</div>
|
||||
|
||||
<p class="mb-4">For example, create a preset named <code class="bg-slate-100 px-2 py-1 rounded text-indigo-600">entity_saved</code>:</p>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
|
||||
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||
<div class="flex space-x-1.5 mr-3">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-white opacity-80 text-xs font-medium">config/packages/flasher.yaml</div>
|
||||
</div>
|
||||
<div>
|
||||
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-yaml"># config/packages/flasher.yaml
|
||||
|
||||
flasher:
|
||||
presets:
|
||||
entity_saved:
|
||||
type: 'success'
|
||||
message: 'Entity saved successfully'
|
||||
title: 'Entity saved'</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mb-4">To use the preset, call the <code class="bg-slate-100 px-2 py-1 rounded text-indigo-600">preset()</code> method and pass the name of the preset:</p>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
|
||||
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||
<div class="flex space-x-1.5 mr-3">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-white opacity-80 text-xs font-medium">BookController.php</div>
|
||||
</div>
|
||||
<div>
|
||||
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">class BookController
|
||||
{
|
||||
public function save()
|
||||
{
|
||||
flash()->preset('entity_saved');</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mb-4">This is the same as:</p>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
|
||||
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||
<div class="flex space-x-1.5 mr-3">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-white opacity-80 text-xs font-medium">BookController.php</div>
|
||||
</div>
|
||||
<div>
|
||||
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">class BookController
|
||||
{
|
||||
public function save()
|
||||
{
|
||||
flash()->success('Entity saved successfully', 'Entity saved');
|
||||
}
|
||||
}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- RTL Support Section -->
|
||||
<h2 class="text-2xl font-bold text-slate-800 flex items-center gap-3 mb-4 border-b border-slate-100 pb-2 mt-10">
|
||||
<span class="p-1.5 bg-indigo-50 text-indigo-600 rounded-lg"><i class="fa-solid fa-language"></i></span>
|
||||
RTL Support
|
||||
</h2>
|
||||
|
||||
<p class="mb-4"><strong>PHPFlasher</strong> makes it easy to use <strong>right-to-left</strong> languages like <code class="bg-slate-100 px-2 py-1 rounded text-indigo-600">Arabic</code> or <code class="bg-slate-100 px-2 py-1 rounded text-indigo-600">Hebrew</code>. It automatically detects the text direction and adjusts accordingly.</p>
|
||||
|
||||
<p class="mb-4">Just make sure the translation service is enabled, and <strong>PHPFlasher</strong> will handle the rest.</p>
|
||||
|
||||
<!-- RTL Example -->
|
||||
<div class="mb-6 flex justify-end">
|
||||
<div class="p-4 border border-green-200 bg-green-50 rounded-lg rtl w-1/2 text-right">
|
||||
<div class="flex items-center gap-2 mb-2 text-green-700 justify-end">
|
||||
<strong>تهانينا</strong>
|
||||
<i class="fa-solid fa-circle-check text-xl"></i>
|
||||
</div>
|
||||
<p class="text-green-600 text-sm">تمت العملية بنجاح.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
|
||||
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||
<div class="flex space-x-1.5 mr-3">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-white opacity-80 text-xs font-medium">RTLExample.php</div>
|
||||
</div>
|
||||
<div>
|
||||
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">flash()
|
||||
->translate('ar')
|
||||
->success('Your request was processed successfully.', 'Congratulations!');</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Translation Section -->
|
||||
<h2 class="text-2xl font-bold text-slate-800 flex items-center gap-3 mb-4 border-b border-slate-100 pb-2 mt-10">
|
||||
<span class="p-1.5 bg-indigo-50 text-indigo-600 rounded-lg"><i class="fa-solid fa-globe"></i></span>
|
||||
Translation
|
||||
</h2>
|
||||
|
||||
<p class="mb-4"><strong>PHPFlasher</strong> lets you translate your notification <code class="bg-slate-100 px-2 py-1 rounded text-indigo-600">messages</code> and <code class="bg-slate-100 px-2 py-1 rounded text-indigo-600">presets</code>. It comes with translations for <code class="bg-slate-100 px-2 py-1 rounded text-indigo-600">Arabic</code>, <code class="bg-slate-100 px-2 py-1 rounded text-indigo-600">English</code>, <code class="bg-slate-100 px-2 py-1 rounded text-indigo-600">French</code>, <code class="bg-slate-100 px-2 py-1 rounded text-indigo-600">German</code>, <code class="bg-slate-100 px-2 py-1 rounded text-indigo-600">Spanish</code>, <code class="bg-slate-100 px-2 py-1 rounded text-indigo-600">Portuguese</code>, <code class="bg-slate-100 px-2 py-1 rounded text-indigo-600">Russian</code>, and <code class="bg-slate-100 px-2 py-1 rounded text-indigo-600">Chinese</code>. You can also add your own translations.</p>
|
||||
|
||||
<p class="mb-4">To override the <code class="bg-slate-100 px-2 py-1 rounded text-indigo-600">English</code> translations for <strong>PHPFlasher</strong>, create a file at <code class="bg-slate-100 px-2 py-1 rounded text-indigo-600">translations/flasher.en.yaml</code>.</p>
|
||||
|
||||
<p class="mb-4">Here are examples of the default translation keys for <code class="bg-slate-100 px-2 py-1 rounded text-indigo-600">Arabic</code>, <code class="bg-slate-100 px-2 py-1 rounded text-indigo-600">English</code>, and <code class="bg-slate-100 px-2 py-1 rounded text-indigo-600">French</code>:</p>
|
||||
|
||||
<!-- Language tabs -->
|
||||
<div class="border border-slate-200 rounded-lg mb-6 overflow-hidden">
|
||||
<div class="flex border-b border-slate-200">
|
||||
<button onclick="changeTab('arabic')" id="arabicTab" class="px-4 py-2 font-medium text-sm hover:bg-slate-50 transition">Arabic</button>
|
||||
<button onclick="changeTab('english')" id="englishTab" class="px-4 py-2 font-medium text-sm hover:bg-slate-50 transition">English</button>
|
||||
<button onclick="changeTab('french')" id="frenchTab" class="px-4 py-2 font-medium text-sm hover:bg-slate-50 transition">French</button>
|
||||
</div>
|
||||
|
||||
<!-- Arabic content -->
|
||||
<div id="arabicContent" class="hidden">
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100">
|
||||
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||
<div class="flex space-x-1.5 mr-3">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-white opacity-80 text-xs font-medium">translations/flasher.ar.yaml</div>
|
||||
</div>
|
||||
<div>
|
||||
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-yaml"># translations/flasher.ar.yaml
|
||||
|
||||
success: 'نجاح'
|
||||
error: 'خطأ'
|
||||
warning: 'تحذير'
|
||||
info: 'معلومة'
|
||||
|
||||
The resource was created: 'تم إنشاء :resource'
|
||||
The resource was updated: 'تم تعديل :resource'
|
||||
The resource was saved: 'تم حفظ :resource'
|
||||
The resource was deleted: 'تم حذف :resource'
|
||||
|
||||
resource: 'الملف'</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- English content -->
|
||||
<div id="englishContent" class="hidden">
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100">
|
||||
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||
<div class="flex space-x-1.5 mr-3">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-white opacity-80 text-xs font-medium">translations/flasher.en.yaml</div>
|
||||
</div>
|
||||
<div>
|
||||
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-yaml"># translations/flasher.en.yaml
|
||||
|
||||
success: 'Success'
|
||||
error: 'Error'
|
||||
warning: 'Warning'
|
||||
info: 'Info'
|
||||
|
||||
The resource was created: 'The :resource was created'
|
||||
The resource was updated: 'The :resource was updated'
|
||||
The resource was saved: 'The :resource was saved'
|
||||
The resource was deleted: 'The :resource was deleted'
|
||||
|
||||
resource: 'resource'</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- French content -->
|
||||
<div id="frenchContent" class="hidden">
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100">
|
||||
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||
<div class="flex space-x-1.5 mr-3">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-white opacity-80 text-xs font-medium">translations/flasher.fr.yaml</div>
|
||||
</div>
|
||||
<div>
|
||||
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-yaml"># translations/flasher.fr.yaml
|
||||
|
||||
success: 'Succès'
|
||||
error: 'Erreur'
|
||||
warning: 'Avertissement'
|
||||
info: 'Information'
|
||||
|
||||
The resource was created: 'La ressource :resource a été ajoutée'
|
||||
The resource was updated: 'La ressource :resource a été mise à jour'
|
||||
The resource was saved: 'La ressource :resource a été enregistrée'
|
||||
The resource was deleted: 'La ressource :resource a été supprimée'
|
||||
|
||||
resource: ''</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mb-4">Usage examples:</p>
|
||||
|
||||
<div class="bg-white rounded-xl shadow-md overflow-hidden border border-slate-100 mb-6">
|
||||
<div class="bg-slate-800 px-4 py-3 flex items-center">
|
||||
<div class="flex space-x-1.5 mr-3">
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-red-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-yellow-500"></div>
|
||||
<div class="w-2.5 h-2.5 rounded-full bg-green-500"></div>
|
||||
</div>
|
||||
<div class="text-white opacity-80 text-xs font-medium">TranslationExample.php</div>
|
||||
</div>
|
||||
<div>
|
||||
<pre class="bg-slate-50 rounded-lg p-4 text-sm overflow-x-auto"><code class="language-php">// Translation will automatically use the correct language files
|
||||
flash()->success('The resource was created');
|
||||
|
||||
// You can also specify a different language
|
||||
flash()->translate('fr')->success('The resource was created');</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -164,4 +708,57 @@ layout: default
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* For RTL support in examples */
|
||||
.rtl {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
/* Active tab styles */
|
||||
.active-tab {
|
||||
background-color: #f8fafc;
|
||||
border-bottom: 2px solid #4f46e5;
|
||||
color: #4f46e5;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Function to copy code blocks
|
||||
function copyCode(codeBlock) {
|
||||
const code = codeBlock.textContent;
|
||||
navigator.clipboard.writeText(code).then(() => {
|
||||
// Show temporary success message
|
||||
const button = codeBlock.parentNode.querySelector('button');
|
||||
const originalHTML = button.innerHTML;
|
||||
button.innerHTML = '<i class="fa-solid fa-check"></i> Copied!';
|
||||
button.classList.add('text-green-400');
|
||||
|
||||
setTimeout(() => {
|
||||
button.innerHTML = originalHTML;
|
||||
button.classList.remove('text-green-400');
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
// Tab functionality for translation examples
|
||||
function changeTab(tabName) {
|
||||
// Hide all content
|
||||
document.getElementById('arabicContent').classList.add('hidden');
|
||||
document.getElementById('englishContent').classList.add('hidden');
|
||||
document.getElementById('frenchContent').classList.add('hidden');
|
||||
|
||||
// Remove active class from all tabs
|
||||
document.getElementById('arabicTab').classList.remove('active-tab');
|
||||
document.getElementById('englishTab').classList.remove('active-tab');
|
||||
document.getElementById('frenchTab').classList.remove('active-tab');
|
||||
|
||||
// Show selected content and activate tab
|
||||
document.getElementById(tabName + 'Content').classList.remove('hidden');
|
||||
document.getElementById(tabName + 'Tab').classList.add('active-tab');
|
||||
}
|
||||
|
||||
// Initialize with English tab active
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
changeTab('english');
|
||||
});
|
||||
</script>
|
||||
|
||||
Vendored
+1
-1
@@ -2,7 +2,7 @@
|
||||
"entrypoints": {
|
||||
"main": {
|
||||
"css": [
|
||||
"/dist/main.e1d30c81.css"
|
||||
"/dist/main.edfbc23d.css"
|
||||
],
|
||||
"js": [
|
||||
"/dist/main.3be5bc06.js"
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -5,293 +5,3 @@ description: Integrate PHPFlasher into your Symfony application to enhance user
|
||||
framework: symfony
|
||||
layout: symfony
|
||||
---
|
||||
|
||||
<a id="requirements"></a>
|
||||
## Requirements
|
||||
|
||||
**PHPFlasher** helps you easily add flash notifications to your **Symfony** projects, improving user feedback with minimal setup.
|
||||
|
||||
To use **PHPFlasher** with Symfony, you need:
|
||||
|
||||
* **PHP** v8.2 or higher
|
||||
* **Symfony** v7.0 or higher
|
||||
|
||||
<a id="installation"></a>
|
||||
## Installation
|
||||
|
||||
**PHPFlasher** is modular. You can install only the parts you need.
|
||||
|
||||
Run this command to install it:
|
||||
|
||||
```shell
|
||||
composer require php-flasher/flasher-symfony
|
||||
```
|
||||
|
||||
After installing, run this command to set up the required assets:
|
||||
|
||||
```shell
|
||||
php bin/console flasher:install
|
||||
```
|
||||
|
||||
<a id="usage"></a>
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
Here's a basic example of using PHPFlasher in a Symfony controller:
|
||||
|
||||
```php
|
||||
#/ basic usage
|
||||
|
||||
namespace App\Controller;
|
||||
|
||||
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
|
||||
use Symfony\Component\HttpFoundation\Response;
|
||||
use Symfony\Component\Routing\Annotation\Route;
|
||||
|
||||
class ProductController extends AbstractController
|
||||
{
|
||||
#[Route('/product/create', name: 'app_product_create')]
|
||||
public function create(): Response
|
||||
{
|
||||
// Your logic to create a product
|
||||
|
||||
// Add a success notification
|
||||
flash()->success('Product created successfully!');
|
||||
|
||||
return $this->redirectToRoute('app_product_list');
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Notification Types
|
||||
|
||||
PHPFlasher supports different types of notifications:
|
||||
|
||||
```php
|
||||
#/ notification types
|
||||
|
||||
// Success message
|
||||
flash()->success('Your changes have been saved!');
|
||||
|
||||
// Error message
|
||||
flash()->error('Something went wrong!');
|
||||
|
||||
// Warning message
|
||||
flash()->warning('Please review your data before proceeding.');
|
||||
|
||||
// Info message
|
||||
flash()->info('The system will be down for maintenance tonight.');
|
||||
```
|
||||
|
||||
### Adding a Title
|
||||
|
||||
You can add a title to your notifications:
|
||||
|
||||
```php
|
||||
flash()->success('Your profile has been updated successfully.', 'Profile Updated');
|
||||
```
|
||||
|
||||
### Notification Options
|
||||
|
||||
Customize your notifications with various options:
|
||||
|
||||
```php
|
||||
#/ notification options
|
||||
|
||||
flash()->success('Your changes have been saved!')
|
||||
->option('position', 'top-center') // Position on the screen
|
||||
->option('timeout', 5000) // How long to display (milliseconds)
|
||||
->option('rtl', true); // Right-to-left support
|
||||
```
|
||||
|
||||
<a id="configuration"></a>
|
||||
## Configuration
|
||||
|
||||
If you want to change the default settings, you can publish the configuration file:
|
||||
|
||||
```bash
|
||||
php bin/console flasher:install --config
|
||||
```
|
||||
|
||||
This will create a file at `config/packages/flasher.yaml` with the following content:
|
||||
|
||||
```yaml
|
||||
# config/packages/flasher.yaml
|
||||
|
||||
flasher:
|
||||
# Default notification library (e.g., 'flasher', 'toastr', 'noty', 'notyf', 'sweetalert')
|
||||
default: flasher
|
||||
|
||||
# Path to the main PHPFlasher JavaScript file
|
||||
main_script: '/vendor/flasher/flasher.min.js'
|
||||
|
||||
# List of CSS files to style your notifications
|
||||
styles:
|
||||
- '/vendor/flasher/flasher.min.css'
|
||||
|
||||
# Set global options for all notifications (optional)
|
||||
# options:
|
||||
# # Time in milliseconds before the notification disappears
|
||||
# timeout: 5000
|
||||
# # Where the notification appears on the screen
|
||||
# position: 'top-right'
|
||||
|
||||
# Automatically inject JavaScript and CSS assets into your HTML pages
|
||||
inject_assets: true
|
||||
|
||||
# Enable message translation using Symfony's translation service
|
||||
translate: true
|
||||
|
||||
# URL patterns to exclude from asset injection and flash_bag conversion
|
||||
excluded_paths:
|
||||
- '/^\/_profiler/'
|
||||
- '/^\/_fragment/'
|
||||
|
||||
# Map Symfony flash message keys to notification types
|
||||
flash_bag:
|
||||
success: ['success']
|
||||
error: ['error', 'danger']
|
||||
warning: ['warning', 'alarm']
|
||||
info: ['info', 'notice', 'alert']
|
||||
```
|
||||
|
||||
<a id="presets"></a>
|
||||
## Presets
|
||||
|
||||
You can create a preset for a custom notification that you want to reuse in multiple places. Add a `presets` entry in the configuration file.
|
||||
|
||||
> A preset is like a pre-defined message you can use in many places.
|
||||
|
||||
For example, create a preset named `entity_saved`:
|
||||
|
||||
{% assign id = '#/ symfony preset' %}
|
||||
{% assign type = 'success' %}
|
||||
{% assign message = 'Entity saved successfully' %}
|
||||
{% assign title = 'Entity saved' %}
|
||||
{% assign options = '{}' %}
|
||||
{% include example.html %}
|
||||
|
||||
```yaml
|
||||
# config/packages/flasher.yaml
|
||||
|
||||
flasher:
|
||||
presets:
|
||||
entity_saved:
|
||||
type: '{{ type }}'
|
||||
message: '{{ message }}'
|
||||
title: '{{ title }}'
|
||||
```
|
||||
|
||||
To use the preset, call the `preset()` method and pass the name of the preset:
|
||||
|
||||
```php
|
||||
{{ id }}
|
||||
|
||||
class BookController
|
||||
{
|
||||
public function save()
|
||||
{
|
||||
flash()->preset('entity_saved');
|
||||
```
|
||||
|
||||
This is the same as:
|
||||
|
||||
```php
|
||||
class BookController
|
||||
{
|
||||
public function save()
|
||||
{
|
||||
flash()->{{ type }}('{{ message }}', '{{ title }}');
|
||||
```
|
||||
|
||||
## RTL Support
|
||||
|
||||
**PHPFlasher** makes it easy to use **right-to-left** languages like `Arabic` or `Hebrew`. It automatically detects the text direction and adjusts accordingly.
|
||||
|
||||
Just make sure the translation service is enabled, and **PHPFlasher** will handle the rest.
|
||||
|
||||
{% assign id = '#/ phpflasher rtl' %}
|
||||
{% assign type = 'success' %}
|
||||
{% assign message = 'تمت العملية بنجاح.' %}
|
||||
{% assign title = 'تهانينا' %}
|
||||
{% assign options = '{"rtl": true}' %}
|
||||
{% include example.html %}
|
||||
|
||||
```php
|
||||
{{ id }}
|
||||
|
||||
flash()
|
||||
->translate('ar')
|
||||
->{{ type }}('Your request was processed successfully.', 'Congratulations!');
|
||||
```
|
||||
|
||||
## Translation
|
||||
|
||||
**PHPFlasher** lets you translate your notification `messages` and `presets`. It comes with translations for `Arabic`, `English`, `French`, `German`, `Spanish`, `Portuguese`, `Russian`, and `Chinese`. You can also add your own translations.
|
||||
|
||||
To override the `English` translations for **PHPFlasher**, create a file at `translations/flasher.en.yaml`.
|
||||
|
||||
Here are examples of the default translation keys for `Arabic`, `English`, and `French`:
|
||||
|
||||
```yaml
|
||||
# translations/flasher.ar.yaml
|
||||
|
||||
success: 'نجاح'
|
||||
error: 'خطأ'
|
||||
warning: 'تحذير'
|
||||
info: 'معلومة'
|
||||
|
||||
The resource was created: 'تم إنشاء :resource'
|
||||
The resource was updated: 'تم تعديل :resource'
|
||||
The resource was saved: 'تم حفظ :resource'
|
||||
The resource was deleted: 'تم حذف :resource'
|
||||
|
||||
resource: 'الملف'
|
||||
```
|
||||
|
||||
```yaml
|
||||
# translations/flasher.en.yaml
|
||||
|
||||
success: 'Success'
|
||||
error: 'Error'
|
||||
warning: 'Warning'
|
||||
info: 'Info'
|
||||
|
||||
The resource was created: 'The :resource was created'
|
||||
The resource was updated: 'The :resource was updated'
|
||||
The resource was saved: 'The :resource was saved'
|
||||
The resource was deleted: 'The :resource was deleted'
|
||||
|
||||
resource: 'resource'
|
||||
```
|
||||
|
||||
```yaml
|
||||
# translations/flasher.fr.yaml
|
||||
|
||||
success: 'Succès'
|
||||
error: 'Erreur'
|
||||
warning: 'Avertissement'
|
||||
info: 'Information'
|
||||
|
||||
The resource was created: 'La ressource :resource a été ajoutée'
|
||||
The resource was updated: 'La ressource :resource a été mise à jour'
|
||||
The resource was saved: 'La ressource :resource a été enregistrée'
|
||||
The resource was deleted: 'La ressource :resource a été supprimée'
|
||||
|
||||
resource: ''
|
||||
```
|
||||
|
||||
{% assign id = '#/ symfony translation examples' %}
|
||||
{% assign type = 'success' %}
|
||||
{% include example.html %}
|
||||
|
||||
```php
|
||||
{{ id }}
|
||||
|
||||
// Translation will automatically use the correct language files
|
||||
flash()->success('The resource was created');
|
||||
|
||||
// You can also specify a different language
|
||||
flash()->translate('fr')->success('The resource was created');
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user