Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Updated Readme. Added Multiple New Options. #160

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Updated Readme. Added Multiple New Options. #160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
152 changes: 78 additions & 74 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@

This composer package offers a Twitter Bootstrap optimized flash messaging setup for your Laravel applications.

> [Learn exactly how to build this very package on Laracasts!](https://laracasts.com/lessons/flexible-flash-messages)

## Installation

Begin by pulling in the package through Composer.
Expand All @@ -10,15 +12,17 @@ Begin by pulling in the package through Composer.
composer require laracasts/flash
```

Next, as noted above, the default CSS classes for your flash message are optimized for Twitter Bootstrap. As such, either pull in the Bootstrap's CSS within your HTML or layout file, or write your own CSS based on these classes.
Next, as noted above, the default CSS classes for your flash message are optimized for Twitter Bootstrap. As such, either pull in the Bootstrap's CSS within your HTML or layout file, or write your own CSS based on these classes:

```html
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" />
```

(See https://getbootstrap.com/docs/ for the latest CSS version)

## Usage

Within your controllers, before you perform a redirect, make a call to the `flash()` function.
Within your controllers, before you perform a redirect, make a call to the `flash()` function:

```php
public function store()
Expand All @@ -29,109 +33,109 @@ public function store()
}
```

You may also do:
You may also append to the function with the following actions:

Flash Alert Themes:

- `flash('Message')->success()`: Set the flash theme to "success".
- `flash('Message')->error()`: Set the flash theme to "danger".
- `flash('Message')->warning()`: Set the flash theme to "warning".
- `flash('Message')->overlay()`: Render the message as an overlay.
- `flash()->overlay('Modal Message', 'Modal Title')`: Display a modal overlay with a title.
- `flash('Message')->important()`: Add a close button to the flash message.
- `flash('Message')->error()->important()`: Render a "danger" flash message that must be dismissed.
- `flash('Message')->danger()` / `flash('Message')->error()`: Set the flash theme to "danger".
- `flash('Message')->info()`: Set the flash theme to "info".
- `flash('Message')->primary()`: Set the flash theme to "primary".
- `flash('Message')->secondary()`: Set the flash theme to "secondary".
- `flash('Message')->light()`: Set the flash theme to "light".
- `flash('Message')->dark()`: Set the flash theme to "dark".

With this message flashed to the session, you may now display it in your view(s). Because flash messages and overlays are so common, we provide a template out of the box to get you started. You're free to use - and even modify to your needs - this template how you see fit.
Flash Alert Dismissible Options:

```html
@include('flash::message')
```
- `flash('Message')->dismissible()`: Add a close button to the flash message.
- `flash('Message')->important()`: Add a close button to the flash message and prevent auto hiding (if in combination with Javascript).
- `flash('Message')->fixed()`: Stops the flash message from ever being closed (Overrides `dismissible()` and `important()`).

## Example
Render as Overlay Modal:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
- `flash('Message')->overlay()`: Render the message as an overlay modal.
- `flash()->overlay('Modal Message', 'Modal Title')`: Render the message as an overlay modal with a title.

<div class="container">
@include('flash::message')
**TIP** You can combine actions:

<p>Welcome to my website...</p>
</div>
- `flash('Message')->error()->important()`: Render a "danger" flash message that must be dismissed.

<!-- If using flash()->important() or flash()->overlay(), you'll need to pull in the JS for Twitter Bootstrap. -->
<script src="//code.jquery.com/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
With this message flashed to the session, you may now display it in your view(s). Because flash messages and overlays are so common, we provide a template out of the box to get you started. You're free to use and even modify this template how you see fit:

<script>
$('#flash-overlay-modal').modal();
</script>

</body>
</html>
```html
@include('flash::message')
```

If you need to modify the flash message partials, you can run:
### Modal Alerts Javascript

```bash
php artisan vendor:publish --provider="Laracasts\Flash\FlashServiceProvider"
For overlay modal alerts add the following Javascript:

```html
<script>
$("#flash-overlay-modal").modal();
</script>
```

The two package views will now be located in the `resources/views/vendor/flash/` directory.
### Auto Hiding Flash Messages Javascript

```php
flash('Welcome Aboard!');
For auto hiding flash messages you can write a simple bit of JavaScript. For example, using jQuery, you might add the following snippet just before the closing `</body>` tag:

return home();
```html
<script>
$("div.alert").not(".alert-important").delay(3000).fadeOut(350);
</script>
```

![https://dl.dropboxusercontent.com/u/774859/GitHub-Repos/flash/message.png](https://dl.dropboxusercontent.com/u/774859/GitHub-Repos/flash/message.png)
This will find any alerts (excluding the `->important()` ones) which should remain visible until manually closed by the user, wait three seconds, and then fade out.

```php
flash('Sorry! Please try again.')->error();
### Multiple Flash Messages

return home();
```

![https://dl.dropboxusercontent.com/u/774859/GitHub-Repos/flash/error.png](https://dl.dropboxusercontent.com/u/774859/GitHub-Repos/flash/error.png)
If you need to flash multiple alerts do the following:

```php
flash()->overlay('You are now a Laracasts member!', 'Yay');
flash('Message 1')->warning();
flash('Message 2')->error()->important();
flash('Message 3')->info();

return home();
return redirect('somewhere');
```

![https://dl.dropboxusercontent.com/u/774859/GitHub-Repos/flash/overlay.png](https://dl.dropboxusercontent.com/u/774859/GitHub-Repos/flash/overlay.png)

> [Learn exactly how to build this very package on Laracasts!](https://laracasts.com/lessons/flexible-flash-messages)

## Hiding Flash Messages

A common desire is to display a flash message for a few seconds, and then hide it. To handle this, write a simple bit of JavaScript. For example, using jQuery, you might add the following snippet just before the closing `</body>` tag.
## Example

```html
<script>
$('div.alert').not('.alert-important').delay(3000).fadeOut(350);
</script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
@include('flash::message')

<p>Welcome to my website...</p>
</div>

<!-- If using flash()->important() or flash()->overlay(), you'll need to pull in the JS for Twitter Bootstrap. -->
<script src="//code.jquery.com/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script>
$("#flash-overlay-modal").modal();
$("div.alert").not(".alert-important").delay(3000).fadeOut(350);
</script>
</body>
</html>
```

This will find any alerts - excluding the important ones, which should remain until manually closed by the user - wait three seconds, and then fade them out.
## Modify Flash Message Partials

## Multiple Flash Messages

Need to flash multiple flash messages to the session? No problem.

```php
flash('Message 1');
flash('Message 2')->important();
If you need to modify the flash message partials, you can run:

return redirect('somewhere');
```bash
php artisan vendor:publish --provider="Laracasts\Flash\FlashServiceProvider"
```

Done! You'll now see two flash messages upon redirect.


The two package views will now be located in the `resources/views/vendor/flash/` directory.
95 changes: 85 additions & 10 deletions src/Laracasts/Flash/FlashNotifier.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,29 +34,29 @@ function __construct(SessionStore $session)
}

/**
* Flash an information message.
* Flash a success style message.
*
* @param string|null $message
* @return $this
*/
public function info($message = null)
public function success($message = null)
{
return $this->message($message, 'info');
return $this->message($message, 'success');
}

/**
* Flash a success message.
* Flash a warning style message.
*
* @param string|null $message
* @return $this
*/
public function success($message = null)
public function warning($message = null)
{
return $this->message($message, 'success');
return $this->message($message, 'warning');
}

/**
* Flash an error message.
* Flash a error style message.
*
* @param string|null $message
* @return $this
Expand All @@ -67,14 +67,69 @@ public function error($message = null)
}

/**
* Flash a warning message.
* Flash a danger style message.
*
* @param string|null $message
* @return $this
*/
public function warning($message = null)
public function danger($message = null)
{
return $this->message($message, 'warning');
return $this->message($message, 'danger');
}

/**
* Flash a information style message.
*
* @param string|null $message
* @return $this
*/
public function info($message = null)
{
return $this->message($message, 'info');
}

/**
* Flash a primary style message.
*
* @param string|null $message
* @return $this
*/
public function primary($message = null)
{
return $this->message($message, 'primary');
}

/**
* Flash a secondary style message.
*
* @param string|null $message
* @return $this
*/
public function secondary($message = null)
{
return $this->message($message, 'secondary');
}

/**
* Flash an light style message.
*
* @param string|null $message
* @return $this
*/
public function light($message = null)
{
return $this->message($message, 'light');
}

/**
* Flash a dark style message.
*
* @param string|null $message
* @return $this
*/
public function dark($message = null)
{
return $this->message($message, 'dark');
}

/**
Expand Down Expand Up @@ -142,6 +197,26 @@ public function important()
return $this->updateLastMessage(['important' => true]);
}

/**
* Add an "dismissible" flash to the session.
*
* @return $this
*/
public function dismissible()
{
return $this->updateLastMessage(['dismissible' => true]);
}

/**
* Add an "fixed" flash to the session.
*
* @return $this
*/
public function fixed()
{
return $this->updateLastMessage(['fixed' => true]);
}

/**
* Clear all registered messages.
*
Expand Down
14 changes: 14 additions & 0 deletions src/Laracasts/Flash/Message.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,20 @@ class Message implements \ArrayAccess
*/
public $important = false;

/**
* Whether the message should be dismissible.
*
* @var bool
*/
public $dismissible = false;

/**
* Whether the message should be fixed.
*
* @var bool
*/
public $fixed = false;

/**
* Whether the message is an overlay.
*
Expand Down
15 changes: 15 additions & 0 deletions src/views/alert.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<div class="alert
alert-{{ $level }}
{{ $important || $fixed ? 'alert-important' : '' }}"
role="alert"
>
@if (($dismissible || $important) && !$fixed)
<button type="button"
class="close"
data-dismiss="alert"
aria-hidden="true"
>&times;</button>
@endif

{!! $message !!}
</div>
Loading