php-flasher/demo/symfony/templates/features/positions.html.twig

{% extends 'base.html.twig' %}

{% block title %}PHPFlasher - Notification Positions{% endblock %}

{% block page_title %}Notification Positions{% endblock %}
{% block page_subtitle %}Control where your notifications appear on the screen{% endblock %}

{% block content %}
<div class="bg-white rounded-lg shadow-md overflow-hidden mb-8">
    <div class="p-6">
        <h2 class="text-xl font-bold mb-4">Available Positions</h2>
        <p class="text-gray-600 mb-6">
            PHPFlasher allows you to position your notifications in different areas of the screen.
            You can choose from 9 different positions to best fit your design and user experience needs.
        </p>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
            <div class="relative h-72 bg-gray-100 rounded-lg overflow-hidden border border-gray-200">
                <div class="absolute top-2 left-2 bg-indigo-100 text-indigo-800 px-3 py-1 rounded-lg text-sm">top-left</div>
                <div class="absolute top-2 right-2 bg-white shadow-md p-3 rounded w-3/4">
                    <div class="h-2 w-12 bg-indigo-500 mb-2 rounded"></div>
                    <div class="h-2 w-20 bg-gray-300 mb-2 rounded"></div>
                    <div class="h-2 w-16 bg-gray-300 rounded"></div>
                </div>
                <button class="absolute bottom-4 left-1/2 transform -translate-x-1/2 btn btn-primary notification-position" data-position="top-left">
                    Show Notification
                </button>
            </div>

            <div class="relative h-72 bg-gray-100 rounded-lg overflow-hidden border border-gray-200">
                <div class="absolute top-2 left-1/2 transform -translate-x-1/2 bg-indigo-100 text-indigo-800 px-3 py-1 rounded-lg text-sm">top-center</div>
                <div class="absolute top-2 left-1/2 transform -translate-x-1/2 bg-white shadow-md p-3 rounded w-3/4">
                    <div class="h-2 w-12 bg-indigo-500 mb-2 rounded"></div>
                    <div class="h-2 w-20 bg-gray-300 mb-2 rounded"></div>
                    <div class="h-2 w-16 bg-gray-300 rounded"></div>
                </div>
                <button class="absolute bottom-4 left-1/2 transform -translate-x-1/2 btn btn-primary notification-position" data-position="top-center">
                    Show Notification
                </button>
            </div>

            <div class="relative h-72 bg-gray-100 rounded-lg overflow-hidden border border-gray-200">
                <div class="absolute top-2 right-2 bg-indigo-100 text-indigo-800 px-3 py-1 rounded-lg text-sm">top-right</div>
                <div class="absolute top-2 right-2 bg-white shadow-md p-3 rounded w-3/4">
                    <div class="h-2 w-12 bg-indigo-500 mb-2 rounded"></div>
                    <div class="h-2 w-20 bg-gray-300 mb-2 rounded"></div>
                    <div class="h-2 w-16 bg-gray-300 rounded"></div>
                </div>
                <button class="absolute bottom-4 left-1/2 transform -translate-x-1/2 btn btn-primary notification-position" data-position="top-right">
                    Show Notification
                </button>
            </div>

            <div class="relative h-72 bg-gray-100 rounded-lg overflow-hidden border border-gray-200">
                <div class="absolute top-1/2 left-2 transform -translate-y-1/2 bg-indigo-100 text-indigo-800 px-3 py-1 rounded-lg text-sm">center-left</div>
                <div class="absolute top-1/2 left-2 transform -translate-y-1/2 bg-white shadow-md p-3 rounded w-3/4">
                    <div class="h-2 w-12 bg-indigo-500 mb-2 rounded"></div>
                    <div class="h-2 w-20 bg-gray-300 mb-2 rounded"></div>
                    <div class="h-2 w-16 bg-gray-300 rounded"></div>
                </div>
                <button class="absolute bottom-4 left-1/2 transform -translate-x-1/2 btn btn-primary notification-position" data-position="center-left">
                    Show Notification
                </button>
            </div>

            <div class="relative h-72 bg-gray-100 rounded-lg overflow-hidden border border-gray-200">
                <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-indigo-100 text-indigo-800 px-3 py-1 rounded-lg text-sm">center</div>
                <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white shadow-md p-3 rounded w-3/4">
                    <div class="h-2 w-12 bg-indigo-500 mb-2 rounded"></div>
                    <div class="h-2 w-20 bg-gray-300 mb-2 rounded"></div>
                    <div class="h-2 w-16 bg-gray-300 rounded"></div>
                </div>
                <button class="absolute bottom-4 left-1/2 transform -translate-x-1/2 btn btn-primary notification-position" data-position="center">
                    Show Notification
                </button>
            </div>

            <div class="relative h-72 bg-gray-100 rounded-lg overflow-hidden border border-gray-200">
                <div class="absolute top-1/2 right-2 transform -translate-y-1/2 bg-indigo-100 text-indigo-800 px-3 py-1 rounded-lg text-sm">center-right</div>
                <div class="absolute top-1/2 right-2 transform -translate-y-1/2 bg-white shadow-md p-3 rounded w-3/4">
                    <div class="h-2 w-12 bg-indigo-500 mb-2 rounded"></div>
                    <div class="h-2 w-20 bg-gray-300 mb-2 rounded"></div>
                    <div class="h-2 w-16 bg-gray-300 rounded"></div>
                </div>
                <button class="absolute bottom-4 left-1/2 transform -translate-x-1/2 btn btn-primary notification-position" data-position="center-right">
                    Show Notification
                </button>
            </div>

            <div class="relative h-72 bg-gray-100 rounded-lg overflow-hidden border border-gray-200">
                <div class="absolute bottom-2 left-2 bg-indigo-100 text-indigo-800 px-3 py-1 rounded-lg text-sm">bottom-left</div>
                <div class="absolute bottom-10 left-2 bg-white shadow-md p-3 rounded w-3/4">
                    <div class="h-2 w-12 bg-indigo-500 mb-2 rounded"></div>
                    <div class="h-2 w-20 bg-gray-300 mb-2 rounded"></div>
                    <div class="h-2 w-16 bg-gray-300 rounded"></div>
                </div>
                <button class="absolute bottom-4 left-1/2 transform -translate-x-1/2 btn btn-primary notification-position" data-position="bottom-left">
                    Show Notification
                </button>
            </div>

            <div class="relative h-72 bg-gray-100 rounded-lg overflow-hidden border border-gray-200">
                <div class="absolute bottom-2 left-1/2 transform -translate-x-1/2 bg-indigo-100 text-indigo-800 px-3 py-1 rounded-lg text-sm">bottom-center</div>
                <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 bg-white shadow-md p-3 rounded w-3/4">
                    <div class="h-2 w-12 bg-indigo-500 mb-2 rounded"></div>
                    <div class="h-2 w-20 bg-gray-300 mb-2 rounded"></div>
                    <div class="h-2 w-16 bg-gray-300 rounded"></div>
                </div>
                <button class="absolute bottom-4 left-1/2 transform -translate-x-1/2 btn btn-primary notification-position" data-position="bottom-center">
                    Show Notification
                </button>
            </div>

            <div class="relative h-72 bg-gray-100 rounded-lg overflow-hidden border border-gray-200">
                <div class="absolute bottom-2 right-2 bg-indigo-100 text-indigo-800 px-3 py-1 rounded-lg text-sm">bottom-right</div>
                <div class="absolute bottom-10 right-2 bg-white shadow-md p-3 rounded w-3/4">
                    <div class="h-2 w-12 bg-indigo-500 mb-2 rounded"></div>
                    <div class="h-2 w-20 bg-gray-300 mb-2 rounded"></div>
                    <div class="h-2 w-16 bg-gray-300 rounded"></div>
                </div>
                <button class="absolute bottom-4 left-1/2 transform -translate-x-1/2 btn btn-primary notification-position" data-position="bottom-right">
                    Show Notification
                </button>
            </div>
        </div>
    </div>
</div>

<div class="bg-white rounded-lg shadow-md overflow-hidden mb-8">
    <div class="p-6">
        <h2 class="text-xl font-bold mb-4">Setting Positions in Code</h2>
        <p class="text-gray-600 mb-4">
            You can set the position of notifications in your PHP code using the <code>option()</code> method:
        </p>

        <div class="code-block">
            <div class="code-header">
                <span>PHP</span>
            </div>
            <pre><code class="language-php">// Top-right position (default)
flash()->success('Your changes have been saved.');

// Bottom-left position
flash()->option('position', 'bottom-left')
      ->success('Your changes have been saved.');

// Top-center position
flash()->option('position', 'top-center')
      ->info('You have 3 unread messages.');

// Center position (middle of the screen)
flash()->option('position', 'center')
      ->warning('Your session will expire in 1 minute.');</code></pre>
        </div>
    </div>
</div>

<div class="bg-white rounded-lg shadow-md overflow-hidden">
    <div class="p-6">
        <h2 class="text-xl font-bold mb-4">Global Position Configuration</h2>
        <p class="text-gray-600 mb-4">
            You can set a default position for all notifications in your configuration file:
        </p>

        <div class="code-block mb-6">
            <div class="code-header">
                <span>YAML</span>
            </div>
            <pre><code class="language-yaml"># config/packages/flasher.yaml
flasher:
    options:
        position: 'top-right'  # Default position for all notifications</code></pre>
        </div>

        <p class="text-gray-600 mb-4">
            Or you can set specific positions for different themes:
        </p>

        <div class="code-block mb-6">
            <div class="code-header">
                <span>YAML</span>
            </div>
            <pre><code class="language-yaml"># config/packages/flasher.yaml
flasher:
    themes:
        amazon:
            options:
                position: 'bottom-right'

        sapphire:
            options:
                position: 'top-center'</code></pre>
        </div>

        <div class="flex justify-center">
            <a href="{{ path('app_themes') }}" class="btn btn-primary">
                Explore Themes
            </a>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const positionButtons = document.querySelectorAll('.notification-position');

        positionButtons.forEach(button => {
            button.addEventListener('click', function() {
                const position = this.getAttribute('data-position');

                // Send AJAX request to show notification
                fetch('{{ path('app_show_notification') }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    body: JSON.stringify({
                        type: 'success',
                        message: 'This notification is at the ' + position + ' position!',
                        options: {
                            position: position
                        }
                    })
                });
            });
        });
    });
</script>
{% endblock %}