php-flasher/docs/pages/library/noty.md

permalink, title, description, handler, data-controller

permalink	title	description	handler	data-controller
/library/noty/	Noty	Elevate your user experience with Noty, a popular JavaScript library for creating customizable, stylish notification messages. Easy to install and use, Noty is perfect for any project that wants to engage and inform users in a dynamic way.	noty	noty

Installation

Laravel:

composer require php-flasher/flasher-noty-laravel

Then, run:

php artisan flasher:install

Symfony:

composer require php-flasher/flasher-noty-symfony

Then, run:

php bin/console flasher:install

---

Usage

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

{{ id }}

namespace App\Controller;

class AppController
{
    public function save()
    {        
        noty()->{{ type }}('{{ message }}');
    }
}

---

Modifiers

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 noty 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 %}

<script type="text/javascript"> messages["#/ noty theme mint"] = [ { handler: "{{ page.handler }}", type: "success", message: "{{ successMessage }}", options: { theme: "mint"}, }, { handler: "{{ page.handler }}", type: "error", message: "{{ errorMessage }}", options: { theme: "mint"}, }, { handler: "{{ page.handler }}", type: "warning", message: "{{ warningMessage }}", options: { theme: "mint"}, }, { handler: "{{ page.handler }}", type: "info", message: "{{ infoMessage }}", options: { theme: "mint"}, } ]; </script>

#/ noty theme mint

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

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

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

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

{% 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 %}

<script type="text/javascript"> messages["#/ noty theme relax"] = [ { handler: "{{ page.handler }}", type: "success", message: "{{ successMessage }}", options: { theme: "relax"}, }, { handler: "{{ page.handler }}", type: "error", message: "{{ errorMessage }}", options: { theme: "relax"}, }, { handler: "{{ page.handler }}", type: "warning", message: "{{ warningMessage }}", options: { theme: "relax"}, }, { handler: "{{ page.handler }}", type: "info", message: "{{ infoMessage }}", options: { theme: "relax"}, } ]; </script>

#/ 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 }}');

{% 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 %}

<script type="text/javascript"> messages["#/ noty theme metroui"] = [ { handler: "{{ page.handler }}", type: "success", message: "{{ successMessage }}", options: { theme: "metroui"}, }, { handler: "{{ page.handler }}", type: "error", message: "{{ errorMessage }}", options: { theme: "metroui"}, }, { handler: "{{ page.handler }}", type: "warning", message: "{{ warningMessage }}", options: { theme: "metroui"}, }, { handler: "{{ page.handler }}", type: "info", message: "{{ infoMessage }}", options: { theme: "metroui"}, } ]; </script>

#/ 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 }}');

{% 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 %}

<script type="text/javascript"> messages["#/ noty theme light"] = [ { handler: "{{ page.handler }}", type: "success", message: "{{ successMessage }}", options: { theme: "light"}, }, { handler: "{{ page.handler }}", type: "error", message: "{{ errorMessage }}", options: { theme: "light"}, }, { handler: "{{ page.handler }}", type: "warning", message: "{{ warningMessage }}", options: { theme: "light"}, }, { handler: "{{ page.handler }}", type: "info", message: "{{ infoMessage }}", options: { theme: "light"}, } ]; </script>

#/ 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 }}');

{% 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 %}

<script type="text/javascript"> messages["#/ noty theme sunset"] = [ { handler: "{{ page.handler }}", type: "success", message: "{{ successMessage }}", options: { theme: "sunset"}, }, { handler: "{{ page.handler }}", type: "error", message: "{{ errorMessage }}", options: { theme: "sunset"}, }, { handler: "{{ page.handler }}", type: "warning", message: "{{ warningMessage }}", options: { theme: "sunset"}, }, { handler: "{{ page.handler }}", type: "info", message: "{{ infoMessage }}", options: { theme: "sunset"}, } ]; </script>

#/ 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 }}');

---

modal

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 }}');

---

id

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 }}');