php-flasher/docs/pages/library/noty.md at 632c0662e4a6c78d1d54c6ada0953ab330bf985c

leviathonbeast/php-flasher

Fork 0

mirror of https://github.com/php-flasher/php-flasher.git synced 2026-03-31 15:07:47 +01:00

Files

T

Younes ENNAJI 632c0662e4 docs: add note about optional configuration values

2024-10-19 00:39:28 +01:00

21 KiB

Raw Blame History

permalink, title, description, handler, data-controller

permalink	title	description	handler	data-controller
/library/noty/	Noty	Enhance your user experience with Noty, a JavaScript library for creating customizable notification messages. Learn how to use Noty with PHPFlasher to display stylish notifications in your project.	noty	noty

Laravel

Installation

composer require php-flasher/flasher-noty-laravel

After installation, you need to run another command to set up the necessary assets for PHPFlasher:

php artisan flasher:install

Configuration

Note: The configuration settings below are the default ones. You only need to change them if you want to customize the default behavior.

<?php // config/flasher.php

return [
    'plugins' => [
        'noty' => [
            'scripts' => [
                '/vendor/flasher/noty.min.js',
                '/vendor/flasher/flasher-noty.min.js'
            ],
            'styles' => [
                '/vendor/flasher/noty.css',
                '/vendor/flasher/mint.css'
            ],
            'options' => [
                // Optional: Add global options here
                'layout' => 'topRight'
            ],
        ],
    ],
];

Symfony

Installation

composer require php-flasher/flasher-noty-symfony

After installation, you need to run another command to set up the necessary assets for PHPFlasher:

php bin/console flasher:install

Configuration

Note: The configuration settings below are the default ones. You only need to change them if you want to customize the default behavior.

# config/packages/flasher.yaml

flasher:
    plugins:
        noty:
            scripts:
                - '/vendor/flasher/noty.min.js'
                - '/vendor/flasher/flasher-noty.min.js'
            styles:
                - '/vendor/flasher/noty.css'
                - '/vendor/flasher/mint.css'
            options:
            # Optional: Add global options here
                layout: topRight

Usage

The methods described in the Usage section can also be used with the notyf adapter.

To display a notification message, you can either use the noty() helper method or obtain an instance of noty from the service container. Then, before returning a view or redirecting, call the success() method and pass in the desired message to be displayed.

success

{% assign id = '#/ noty' %} {% assign type = 'success' %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{}' %} {% include example.html %}

{{ id }}

use Flasher\Noty\Prime\NotyInterface;

class BookController
{
    public function saveBook()
    {        
        noty()->success('{{ message }}');
        
        // or simply 
        
        noty('{{ message }}');
    }
    
    /**
     * if you prefer to use dependency injection 
     */
    public function register(NotyInterface $noty)
    {
        // ...

        $noty->success('{{ site.data.messages["success"] | sample }}');

        // ... redirect or render the view
    }
}

info

{% assign id = '#/ usage info' %} {% assign type = 'info' %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{}' %} {% include example.html %}

{{ id }}

noty()->{{ type }}('{{ message }}');

warning

{% assign id = '#/ usage warning' %} {% assign type = 'warning' %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{}' %} {% include example.html %}

{{ id }}

noty()->{{ type }}('{{ message }}');

error

{% assign id = '#/ usage error' %} {% assign type = 'error' %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{}' %} {% include example.html %}

{{ id }}

noty()->{{ type }}('{{ message }}');

For more information on Noty options and usage, please refer to the original documentation at https://ned.im/noty/

The methods described in the Usage section can also be used with the notyf adapter.

layout

top, topLeft, topCenter, topRight, center, centerLeft, centerRight, bottom, bottomLeft, bottomCenter, bottomRight

ClassName generator uses this value → noty_layout__${layout}

noty()->layout(string $layout);

{% assign id = '#/ noty layout' %} {% assign type = site.data.messages.types | sample %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{"layout":"topCenter"}' %} {% include example.html %}

{{ id }}

noty()
    ->layout('topCenter')
    ->{{ type }}('{{ message }}');

theme

Possible values: relax, mint, metroui, light, sunset, nest.

ClassName generator uses this value → noty_theme__${theme}

noty()->theme(string $theme);

Default Theme: mint

Examples:

{% assign successMessage = site.data.messages['success'] | sample %} {% assign errorMessage = site.data.messages['error'] | sample %} {% assign warningMessage = site.data.messages['warning'] | sample %} {% assign infoMessage = site.data.messages['info'] | sample %}

#/ noty theme mint

noty()
    ->theme('mint')
    ->success('{{ successMessage }}');

noty()
    ->theme('mint')
    ->error('{{ errorMessage }}');

noty()
    ->theme('mint')
    ->warning('{{ warningMessage }}');

noty()
    ->theme('mint')
    ->info('{{ infoMessage }}');

#/ noty theme relax

// don't the load the theme css file: https://github.com/needim/noty/blob/master/lib/themes/relax.css

noty()
    ->theme('relax')
    ->success('{{ successMessage }}');

noty()
    ->theme('relax')
    ->error('{{ errorMessage }}');

noty()
    ->theme('relax')
    ->warning('{{ warningMessage }}');

noty()
    ->theme('relax')
    ->info('{{ infoMessage }}');

#/ noty theme metroui

// Theme: https://github.com/needim/noty/blob/master/lib/themes/metroui.css

noty()
    ->theme('metroui')
    ->success('{{ successMessage }}');

noty()
    ->theme('metroui')
    ->error('{{ errorMessage }}');

noty()
    ->theme('metroui')
    ->warning('{{ warningMessage }}');

noty()
    ->theme('metroui')
    ->info('{{ infoMessage }}');

#/ noty theme light

// Theme: https://github.com/needim/noty/blob/master/lib/themes/light.css

noty()
    ->theme('light')
    ->success('{{ successMessage }}');

noty()
    ->theme('light')
    ->error('{{ errorMessage }}');

noty()
    ->theme('light')
    ->warning('{{ warningMessage }}');

noty()
    ->theme('light')
    ->info('{{ infoMessage }}');

#/ noty theme sunset
// Theme: https://github.com/needim/noty/blob/master/lib/themes/sunset.css

noty()
    ->theme('sunset')
    ->success('{{ successMessage }}');

noty()
    ->theme('sunset')
    ->error('{{ errorMessage }}');

noty()
    ->theme('sunset')
    ->warning('{{ warningMessage }}');

noty()
    ->theme('sunset')
    ->info('{{ infoMessage }}');

timeout

false, 1000, 3000, 3500, etc. Delay for closing event in milliseconds (ms). Set false for sticky notifications.

noty()->timeout(int|bool $timeout)

{% assign id = '#/ noty timeout' %} {% assign type = site.data.messages.types | sample %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{"timeout": 2000}' %} {% include example.html %}

{{ id }}

noty()
    ->timeout(2000) // 2 seconds
    ->{{ type }}('{{ message }}');

progressBar

true, false - Displays a progress bar if timeout is not false.

noty()->progressBar(bool $progressBar = false)

{% assign id = '#/ noty progressBar' %} {% assign type = site.data.messages.types | sample %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{"progressBar": false}' %} {% include example.html %}

{{ id }}

noty()
    ->progressBar(false)
    ->{{ type }}('{{ message }}');

closeWith

click, button

Default click

noty()->closeWith(string|array $closeWith)

{% assign id = '#/ noty closeWith' %} {% assign type = 'error' %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{"closeWith": ["click", "button"]}' %} {% include example.html %}

{{ id }}

noty()
    ->closeWith(['click', 'button'])
    ->{{ type }}('{{ message }}');

animation

If string, assumed to be CSS class name.
If null, no animation at all.
If function, runs the function. (v3.0.1+)

You can use animate.css class names or your custom css animations as well.

noty()->animation(string $animation, string $effect)

{% assign id = '#/ noty animation' %} {% assign type = site.data.messages.types | sample %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{"animation": null}' %} {% include example.html %}

{{ id }}

noty()
    ->animation(null)
    ->{{ type }}('{{ message }}');

sounds

sources : Array of audio sources e.g 'some.wav'
volume : nteger value between 0-1 e.g 0.5
conditions : There are two conditions for now: 'docVisible' & 'docHidden'. You can use one of them or both.

noty()->sounds(string $option, mixed $value)

{% assign id = '#/ noty sounds' %} {% assign type = site.data.messages.types | sample %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{"sounds": {"sources": ["/static/sounds/notification.wav"], "volume": 0.3, "conditions": ["docVisible", "docHidden"]}}' %} {% include example.html %}

{{ id }}

noty()
    ->sounds('sources', ['/static/sounds/notification.wav'])
    ->sounds('volume', 0.3)
    ->sounds('conditions', ['docVisible', 'docHidden'])
    ->{{ type }}('{{ message }}');

docTitle

There are two conditions for now: docVisible & docHidden. You can use one of them or both.

noty()->docTitle(string $option, mixed $docTitle)

{% assign id = '#/ noty docTitle' %} {% assign type = site.data.messages.types | sample %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{"docTitle": {"conditions": ["docVisible", "docHidden"]}}' %} {% include example.html %}

{{ id }}

noty()
    ->docTitle('conditions', ['docVisible', 'docHidden'])
    ->{{ type }}('{{ message }}');

noty()->modal(bool $modal = true)

{% assign id = '#/ noty modal' %} {% assign type = site.data.messages.types | sample %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{"modal": true}' %} {% include example.html %}

{{ id }}

noty()
    ->modal(true)
    ->{{ type }}('{{ message }}');

You can use this id with querySelectors.
Generated automatically if false.

noty()->id(bool|string $id)

{% assign id = '#/ noty id' %} {% assign type = site.data.messages.types | sample %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{"id": false}' %} {% include example.html %}

{{ id }}

noty()
    ->id(false)
    ->{{ type }}('{{ message }}');

force

DOM insert method depends on this parameter.
If false uses append, if true uses prepend.

noty()->force(bool $force = true)

{% assign id = '#/ noty force' %} {% assign type = site.data.messages.types | sample %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{"force": false}' %} {% include example.html %}

{{ id }}

noty()
    ->force(false)
    ->{{ type }}('{{ message }}');

queue

NEW Named queue system. Details are here.

noty()->queue(string $queue)

Default: global

{% assign id = '#/ noty queue' %} {% assign type = site.data.messages.types | sample %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{"queue":"global"}' %} {% include example.html %}

{{ id }}

noty()
    ->queue('global')
    ->{{ type }}('{{ message }}');

killer

If true closes all visible notifications and shows itself.
If string(queueName) closes all visible notification on this queue and shows itself.

noty()->killer(bool|string $killer)

{% assign id = '#/ noty killer' %} {% assign type = site.data.messages.types | sample %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{"killer": true}' %} {% include example.html %}

{{ id }}

noty()
    ->killer(true)
    ->{{ type }}('{{ message }}');

container

Custom container selector string. Like .my-custom-container.
Layout parameter will be ignored.

noty()->container(bool|string $container)

{% assign id = '#/ noty container' %} {% assign type = site.data.messages.types | sample %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{"container": false}' %} {% include example.html %}

{{ id }}

noty()
    ->container(false)
    ->{{ type }}('{{ message }}');

visibilityControl

If true Noty uses PageVisibility API to handle timeout.
To ensure that users do not miss their notifications.

noty()->visibilityControl(bool $visibilityControl)

{% assign id = '#/ noty visibilityControl' %} {% assign type = site.data.messages.types | sample %} {% assign message = site.data.messages[type] | sample %} {% assign options = '{"visibilityControl": true}' %} {% include example.html %}

{{ id }}

noty()
    ->visibilityControl(true)
    ->{{ type }}('{{ message }}');

21 KiB Raw Blame History

Laravel

Symfony

Usage

21 KiB

Raw Blame History