Skip to content

Commit

Permalink
Merge pull request #80 from uxweb/v2
Browse files Browse the repository at this point in the history
New V2 ready
  • Loading branch information
uxweb authored Jul 24, 2018
2 parents 9e2c388 + 599c479 commit 6d0335f
Show file tree
Hide file tree
Showing 8 changed files with 439 additions and 289 deletions.
6 changes: 3 additions & 3 deletions composer.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
}
],
"require": {
"php": ">=5.4.0",
"php": ">=7.0",
"illuminate/support": "~5.0",
"illuminate/session": "~5.0"
},
Expand All @@ -19,11 +19,11 @@
"UxWeb\\SweetAlert\\": "src/SweetAlert/"
},
"files": [
"src/SweetAlert/functions.php"
"src/SweetAlert/functions.php"
]
},
"require-dev": {
"phpunit/phpunit": "^6.0",
"phpunit/phpunit": "^7.0",
"mockery/mockery": "0.9.*"
},
"extra": {
Expand Down
1 change: 0 additions & 1 deletion phpunit.xml
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@
processIsolation="false"
stopOnError="false"
stopOnFailure="false"
syntaxCheck="true"
verbose="true"
>
<testsuites>
Expand Down
118 changes: 72 additions & 46 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,14 @@

![A success alert](http://i.imgur.com/1XySJiz.png)


[![StyleCI](https://styleci.io/repos/38935942/shield)](https://styleci.io/repos/38935942)

## Installation

First, pull in the package through Composer.

```
composer require uxweb/sweet-alert
```bash
composer require uxweb/sweet-alert
```

If using laravel < 5.5 include the service provider and alias within `config/app.php`.
Expand All @@ -25,27 +24,34 @@ If using laravel < 5.5 include the service provider and alias within `config/app
];
```

> Note that this package works only by using the [BEAUTIFUL REPLACEMENT FOR JAVASCRIPT'S "ALERT"](http://t4t5.github.io/sweetalert/).
> Note that this package works only by using the [BEAUTIFUL REPLACEMENT FOR JAVASCRIPT'S "ALERT"](https://sweetalert.js.org/).
Finally, install the Sweet Alert Javascript library through yarn or npm

Install using Yarn:

```bash
yarn add sweetalert@^2.0 --dev
```
yarn add sweetalert:1.1.3 --dev
```

Install using Npm:

```bash
npm install sweetalert@^2.0 --save-dev
```
npm install sweetalert:1.1.3 --save-dev
```

> Note that this version of the package only works with sweetalert v2. If you need v1 please install the last release of version 1 of the PHP package and js library.
## Usage

### Using the Facade

First import the Alert facade in your controller.

```php
use Alert;
```

Within your controllers, before you perform a redirect...

```php
Expand All @@ -58,6 +64,7 @@ public function store()
```

Here are some examples on how you can use the facade:

```php
Alert::message('Message', 'Optional Title');

Expand Down Expand Up @@ -124,25 +131,27 @@ For a general information alert, just do: `alert('Some message');` (same as `ale
### Using the Middleware

#### Middleware Groups

First register the middleware in web middleware groups by simply adding the middleware class `UxWeb\SweetAlert\ConvertMessagesIntoSweetAlert::class` into the $middlewareGroups of your app/Http/Kernel.php class:

```php
protected $middlewareGroups = [
'web' => [
\App\Http\Middleware\EncryptCookies::class,
...
\UxWeb\SweetAlert\ConvertMessagesIntoSweetAlert::class,
],

'api' => [
'throttle:60,1',
],
];
protected $middlewareGroups = [
'web' => [
\App\Http\Middleware\EncryptCookies::class,
...
\UxWeb\SweetAlert\ConvertMessagesIntoSweetAlert::class,
],

'api' => [
'throttle:60,1',
],
];
```

> Make sure you register the middleware within the 'web' group only.
#### Route middleware
#### Route Middleware

Or if you would like to assign the middleware to specific routes only, you should add the middleware to `$routeMiddleware` in `app/Http/Kernel.php` file:

```php
Expand All @@ -168,6 +177,7 @@ return redirect()->back()->with('errors', 'Profile updated!');
> **NOTE**: When using the middleware it will make an alert to display if it detects any of the following keys flashed into the session: `errors`, `success`, `warning`, `info`, `message`, `basic`.
### The View

Finally, to display the alert in the browser, you may use (or modify) the view that is included with this package. Simply include it in your layout view:

```html
Expand All @@ -176,7 +186,6 @@ Finally, to display the alert in the browser, you may use (or modify) the view t
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/sweetalert.css">
</head>
<body>

Expand All @@ -196,61 +205,73 @@ Finally, to display the alert in the browser, you may use (or modify) the view t
> **REMEMBER**: Always include the .css and .js files from the sweet-alert library.
### Final Considerations

By default, all alerts will dismiss after a sensible default number of seconds.

But not to worry, if you need to specify a different time you can:

```php
// -> Remember!, the number is set in milliseconds
alert('Hello World!')->autoclose(3000);
// -> Remember!, the number is set in milliseconds
alert('Hello World!')->autoclose(3000);
```

Also, if you need the alert to be persistent on the page until the user dismiss it by pressing the alert confirmation button:

```php
// -> The text will appear in the button
alert('Hello World!')->persistent("Close this");
// -> The text will appear in the button
alert('Hello World!')->persistent("Close this");
```

You can render html in your message with the html() method like this:

```php
// -> html will be evaluated
alert('<a href="#">Click me</a>')->html()->persistent("No, thanks");
// -> html will be evaluated
alert('<a href="#">Click me</a>')->html()->persistent("No, thanks");
```

## Customize

If you need to customize the alert message partial, run:
### Config

If you need to customize the default configuration options for this package just export the configuration file:

```bash
php artisan vendor:publish --provider "UxWeb\SweetAlert\SweetAlertServiceProvider"
php artisan vendor:publish --provider "UxWeb\SweetAlert\SweetAlertServiceProvider" --tag=config
```

A `sweet-alert.php` configuration file will be published to your `config` directory. By now, the only configuration that can be changed is the timer for all autoclose alerts.

### View

If you need to customize the included alert message view, run:

```bash
php artisan vendor:publish --provider "UxWeb\SweetAlert\SweetAlertServiceProvider" --tag=views
```

The package view is located in the `resources/views/vendor/sweet/` directory.

You can customize this view to fit your needs.

A `sweet-alert.php` configuration file will be published to your `config` directory as well, this will allow you to set the default timer for all autoclose alerts.

### Configuration Options
#### Configuration Options

You have access to the following configuration options to build a custom view:

```php
Session::get('sweet_alert.text')
Session::get('sweet_alert.type')
Session::get('sweet_alert.title')
Session::get('sweet_alert.confirmButtonText')
Session::get('sweet_alert.showConfirmButton')
Session::get('sweet_alert.allowOutsideClick')
Session::get('sweet_alert.timer')
Session::get('sweet_alert.text')
Session::get('sweet_alert.title')
Session::get('sweet_alert.icon')
Session::get('sweet_alert.closeOnClickOutside')
Session::get('sweet_alert.buttons')
Session::get('sweet_alert.timer')
```

Please check the CONFIGURATION section in the [website](http://t4t5.github.io/sweetalert/) for all other options available.
Please check the CONFIGURATION section in the [website](https://sweetalert.js.org/docs/#configuration) for all other options available.

### Default View

The `sweet_alert.alert` session key contains a JSON configuration object to pass it directly to Sweet Alert.

```html
@if (Session::has('sweet_alert.alert'))
<script>
Expand All @@ -259,12 +280,12 @@ Please check the CONFIGURATION section in the [website](http://t4t5.github.io/sw
@endif
```

The `sweet_alert.alert` session key contains a JSON configuration object to pass it directly to Sweet Alert.

Note that `{!! !!}` are used to output the json configuration object unescaped, it will not work with `{{ }}` escaped output tags.

### Custom View

This is an example of how you can customize your view to fit your needs:

```html
@if (Session::has('sweet_alert.alert'))
<script>
Expand All @@ -273,9 +294,7 @@ Note that `{!! !!}` are used to output the json configuration object unescaped,
title: "{!! Session::get('sweet_alert.title') !!}",
timer: {!! Session::get('sweet_alert.timer') !!},
icon: "{!! Session::get('sweet_alert.type') !!}",
showConfirmButton: "{!! Session::get('sweet_alert.showConfirmButton') !!}",
confirmButtonText: "{!! Session::get('sweet_alert.confirmButtonText') !!}",
confirmButtonColor: "#AEDEF4"
buttons: "{!! Session::get('sweet_alert.buttons') !!}",
// more options
});
Expand All @@ -300,54 +319,61 @@ Alert::message('Welcome back!');

return Redirect::home();
```

![A simple alert](http://i.imgur.com/4bvuJx9.png)

```php
Alert::message('Your profile is up to date', 'Wonderful!');

return Redirect::home();
```

![A simple alert with title](http://i.imgur.com/GsGOtOq.png)

```php
Alert::message('Thanks for comment!')->persistent('Close');

return Redirect::home();
```

![A simple alert with title and button](http://i.imgur.com/AnRGDY2.png)

```php
Alert::info('Email was sent!');

return Redirect::home();
```

![A info alert](http://i.imgur.com/DxKh3Yx.png)

```php
Alert::error('Something went wrong', 'Oops!');

return Redirect::home();
```
![A error alert](http://i.imgur.com/pIeTEYz.png)

![A error alert](http://i.imgur.com/pIeTEYz.png)

```php
Alert::success('Good job!');

return Redirect::home();
```

![A success alert](http://i.imgur.com/pQz3ijJ.png)

```php
Alert::info('Random lorempixel.com : <img src="http://lorempixel.com/150/150/">')->html();

return Redirect::home();
```

![HTML in message](http://i.imgur.com/x44c12a.png)

```php
Alert::success('Good job!')->persistent("Close");

return Redirect::home();
```

![A persistent alert](http://i.imgur.com/dj3y95K.png)
Loading

0 comments on commit 6d0335f

Please sign in to comment.