From 45a99890c87dded920971fadaec40f709962cca2 Mon Sep 17 00:00:00 2001 From: Rashid Ali Date: Fri, 22 Nov 2019 00:32:16 +0500 Subject: [PATCH] :package: v3.0 :tada: v3.0 is here --- CHANGELOG.md | 14 ++++++++ docs/README.md | 17 +++++---- docs/_coverpage.md | 2 +- docs/changelog.md | 14 ++++++++ docs/codefund.js | 54 ---------------------------- docs/config.md | 17 ++------- docs/environment.md | 71 ++++++++++++++++++++++++++---------- docs/helpers.md | 38 ++++++++++++++++++-- docs/middleware.md | 71 +++++++++++++++++++++++++++++------- docs/tutorial.md | 13 +++++++ readme.md | 17 +++++---- src/ToSweetAlert.php | 6 ++-- src/Toaster.php | 75 +++++++++++++++++++++++++++++---------- src/config/sweetalert.php | 22 +++++------- 14 files changed, 277 insertions(+), 154 deletions(-) delete mode 100644 docs/codefund.js diff --git a/CHANGELOG.md b/CHANGELOG.md index d6773a1..ffe2e21 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,20 @@ All notable changes to `sweet-alert` will be documented in this file. +## v3.0 - 2019-11-20 +- Upgraded SweetAlert2 to latest version +- Added option to pass SweetAlert2 CDN link from included view +- Updated `animation($showClass = [], $hideClass = [])` +- Added `buttonsStyling()` method +- Added `iconHtml()` method +- Docs Updated +- Fix some bugs + +## v2.0.3 - 2019-10-13 +- Added symfony/thanks +- Docs Updated +- Fix some bugs + ## v2.0.2 - 2019-09-10 - Added Missing ^ indicator prevents Laravel from updating to 6.0.1 and up - Docs Updated diff --git a/docs/README.md b/docs/README.md index 4e99492..02ce028 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,5 +1,6 @@

- + SweetAlert2

@@ -11,12 +12,14 @@ A BEAUTIFUL, RESPONSIVE, CUSTOMIZABLE, ACCESSIBLE (WAI-ARIA) REPLACEMENT FOR JAV

-Total Downloads -Latest Stable Version -Backers on Open Collective -Backers on Open Collective -Support me on Patreon -License +Total Downloads +Latest Stable Version +Support me on Patreon +License

!> note: if you are using sweet-alert v1.0 you can get README for v1.0 from [here](https://github.com/realrashid/sweet-alert/blob/1.0/readme.md) diff --git a/docs/_coverpage.md b/docs/_coverpage.md index 40daf0e..1d0b4a4 100644 --- a/docs/_coverpage.md +++ b/docs/_coverpage.md @@ -1,5 +1,5 @@ ![logo](https://github.com/sweetalert2/sweetalert2/raw/master/assets/swal2-logo.png) -

sweet-alert 2.0.2

+

sweet-alert 3.0

By Rashid Ali

diff --git a/docs/changelog.md b/docs/changelog.md index d6773a1..a463a0d 100644 --- a/docs/changelog.md +++ b/docs/changelog.md @@ -2,6 +2,20 @@ All notable changes to `sweet-alert` will be documented in this file. +## v3.0 - 2019-11-21 +- Upgraded SweetAlert2 to latest version +- Added option to pass SweetAlert2 CDN link from included view +- Updated `animation($showClass = [], $hideClass = [])` method +- Added `buttonsStyling()` method +- Added `iconHtml()` method +- Docs Updated +- Fix some bugs + +## v2.0.3 - 2019-10-13 +- Added symfony/thanks +- Docs Updated +- Fix some bugs + ## v2.0.2 - 2019-09-10 - Added Missing ^ indicator prevents Laravel from updating to 6.0.1 and up - Docs Updated diff --git a/docs/codefund.js b/docs/codefund.js deleted file mode 100644 index 152c7f0..0000000 --- a/docs/codefund.js +++ /dev/null @@ -1,54 +0,0 @@ -;(function(window) { - window.Codefund = { - scriptEl: null, - create: function(codefundId) { - return function(hook, vm) { - hook.ready(function() { - window.Codefund.injectCodeFundStyle(); - }) - - hook.doneEach(function () { - window.Codefund.injectCodeFundScript(codefundId); - window.Codefund.injectCodeFundContainer(); - }) - } - }, - - injectCodeFundContainer() { - let nav = document.getElementsByClassName('sidebar-nav') - let codefundContainer = document.createElement('div') - codefundContainer.id = 'codefund' - nav[0].insertBefore(codefundContainer, nav[0].firstChild) - - if (document.getElementsByClassName('cf-wrapper').length === 0) { - window._codefund && window._codefund.serve(); - } - }, - - injectCodeFundScript(codefundId) { - if (window.Codefund.scriptEl) { - window.Codefund.scriptEl.remove() - } - - var script = document.createElement('script') - script.src = "https://codefund.app/properties/" + codefundId + "/funder.js" - script.async = "async" - document.body.appendChild(script) - window.Codefund.scriptEl = script - }, - - injectCodeFundStyle() { - var style = document.createElement('style'); - window.Codefund.injectCodeFundContainer(); - var css = '#cf span.cf-wrapper { background-color: transparent!important } #cf a.cf-text { color: #444!important; font-weight: 400!important; font-size: 10px!important }'; - - style.type = 'text/css'; - if (style.styleSheet){ - style.styleSheet.cssText = css; - } else { - style.appendChild(document.createTextNode(css)); - } - document.head.appendChild(style); - } - } -})(window) diff --git a/docs/config.md b/docs/config.md index 0b4f632..eea0e2e 100644 --- a/docs/config.md +++ b/docs/config.md @@ -2,7 +2,7 @@ ### Include SweetAlert 2 View -in your master layout +Include `'sweetalert::alert'` in master layout ```php @include('sweetalert::alert') @@ -17,19 +17,8 @@ php artisan vendor:publish --provider="RealRashid\SweetAlert\SweetAlertServicePr > note: The javascript library of sweetalert2 is already loaded and included in the view with the help of above command! !> If you don't want to use pre-loaded **sweetalert.all.js** so you can use cdn. -Just chnage the below .env key. +Just pass the `cdn` variable to above included view like below example. ```php -// By Default its true -// Turn it to false -SWEET_ALERT_LOCAL=false -// Add sweetalert2 cdn link -SWEET_ALERT_CDN='' -``` -!> You can not use local **sweetalert.all.js** or cdn together! - -ex: -```php -SWEET_ALERT_LOCAL=true -SWEET_ALERT_CDN='link' +@include('sweetalert::alert', ['cdn' => "https://cdn.jsdelivr.net/npm/sweetalert2@9"]) ``` diff --git a/docs/environment.md b/docs/environment.md index 9c97659..d0f407d 100644 --- a/docs/environment.md +++ b/docs/environment.md @@ -1,15 +1,6 @@ # Environment Variables ```php -/* -|-------------------------------------------------------------------------- -| SweetAlert2 Local .JS File -|-------------------------------------------------------------------------- -| By default SweetAlert2 use its local sweetalert.all.js -| file. -*/ -SWEET_ALERT_LOCAL=true - /* |-------------------------------------------------------------------------- | CDN LINK @@ -17,29 +8,36 @@ SWEET_ALERT_LOCAL=true | By default SweetAlert2 use its local sweetalert.all.js | file. | However, you can use its cdn if you want. +| */ -SWEET_ALERT_CDN='' + +'cdn' => env('SWEET_ALERT_CDN'), /* |-------------------------------------------------------------------------- | AutoClose Timer |-------------------------------------------------------------------------- +| | This is for the all Modal windows. | For specific modal just use the autoClose() helper method. +| */ -SWEET_ALERT_TIMER=5000 + +'timer' => env('SWEET_ALERT_TIMER', 5000), /* |-------------------------------------------------------------------------- | Width |-------------------------------------------------------------------------- +| | Modal window width, including paddings (box-sizing: border-box). | Can be in px or %. | The default width is 32rem. | This is for the all Modal windows. | for particular modal just use the width() helper method. */ -SWEET_ALERT_WIDTH=32rem + +'width' => env('SWEET_ALERT_WIDTH', '32rem'), /* |-------------------------------------------------------------------------- @@ -48,20 +46,24 @@ SWEET_ALERT_WIDTH=32rem | By default, SweetAlert2 sets html's and body's CSS height to auto !important. | If this behavior isn't compatible with your project's layout, | set heightAuto to false. +| */ -SWEET_ALERT_HEIGHT_AUTO=true + +'height_auto' => env('SWEET_ALERT_HEIGHT_AUTO', true), /* |-------------------------------------------------------------------------- | Padding |-------------------------------------------------------------------------- +| | Modal window padding. | Can be in px or %. | The default padding is 1.25rem. | This is for the all Modal windows. | for particular modal just use the padding() helper method. */ -SWEET_ALERT_PADDING=1.25rem + +'padding' => env('SWEET_ALERT_PADDING', '1.25rem'), /* |-------------------------------------------------------------------------- @@ -69,8 +71,16 @@ SWEET_ALERT_PADDING=1.25rem |-------------------------------------------------------------------------- | If set to false, modal CSS animation will be disabled. | For specific modal just use the animation() helper method. +| */ -SWEET_ALERT_ANIMATION=true + +'animation' => [ + 'enable' => env('SWEET_ALERT_ANIMATION_ENABLE', true), + 'showClass' => env('SWEET_ALERT_ANIMATION_SHOW_CLASS', 'animated fadeInDown faster'), + 'hideClass' => env('SWEET_ALERT_ANIMATION_HIDE_CLASS', 'animated fadeOutUp faster'), +], + +'animatecss' => env('SWEET_ALERT_ANIMATECSS', 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css'), /* |-------------------------------------------------------------------------- @@ -80,8 +90,10 @@ SWEET_ALERT_ANIMATION=true | It can be useful when you're using custom HTML description. | This is for the all Modal windows. | For specific modal just use the showConfirmButton() helper method. +| */ -SWEET_ALERT_CONFIRM_BUTTON=true + +'show_confirm_button' => env('SWEET_ALERT_CONFIRM_BUTTON', true), /* |-------------------------------------------------------------------------- @@ -91,8 +103,10 @@ SWEET_ALERT_CONFIRM_BUTTON=true | which the user can click on to dismiss the modal. | This is for the all Modal windows. | For specific modal just use the showCloseButton() helper method. +| */ -SWEET_ALERT_CLOSE_BUTTON=false + +'show_close_button' => env('SWEET_ALERT_CLOSE_BUTTON', false), /* |-------------------------------------------------------------------------- @@ -102,7 +116,26 @@ SWEET_ALERT_CLOSE_BUTTON=false | 'top-start', 'top-end', 'center', 'center-start', | 'center-end', 'bottom', 'bottom-start', or 'bottom-end'. | For specific modal just use the position() helper method. +| */ -SWEET_ALERT_TOAST_POSITION=top-end -``` \ No newline at end of file +'toast_position' => env('SWEET_ALERT_TOAST_POSITION', 'top-end'), + +/* +|-------------------------------------------------------------------------- +| Middleware +|-------------------------------------------------------------------------- +| Modal window or toast, config for the Middleware +| +*/ + +'middleware' => [ + + 'toast_position' => env('SWEET_ALERT_MIDDLEWARE_TOAST_POSITION', 'top-end'), + + 'toast_close_button' => env('SWEET_ALERT_MIDDLEWARE_TOAST_CLOSE_BUTTON', true), + + 'alert_auto_close' => env('SWEET_ALERT_MIDDLEWARE_ALERT_AUTO_CLOSE', 5000), +] + +``` diff --git a/docs/helpers.md b/docs/helpers.md index e9ab480..47a68f3 100644 --- a/docs/helpers.md +++ b/docs/helpers.md @@ -178,13 +178,47 @@ alert('Title','Lorem Lorem Lorem', 'success')->background('#fff'); ##### Animation ` -animation(true) +animation($showClass = [], $hideClass = []) ` > If set to false, modal CSS animation will be disabled. +Custom animation with [Animate.css](https://daneden.github.io/animate.css/) + +``` php +// example: +alert()->info('InfoAlert','Lorem ipsum dolor sit amet.') +->animation( + [ 'popup' => 'animated tada faster'], + [ 'popup' => 'animated fadeInUp faster'] +); +``` + +> Note: Animate.css CDN link is imported in package config file, + +##### Button Styling + +` +buttonsStyling($buttonsStyling) +` +> Apply default styling to buttons. +If you want to use your own classes (e.g. Bootstrap classes) +set this parameter to false. + +``` php +// example: +alert()->success('Post Created', 'Successfully')->buttonsStyling(false); +``` + +##### Icon Html + +` +iconHtml($iconHtml) +` +> Use any HTML inside icons (e.g. Font Awesome) + ``` php // example: -alert('Title','Lorem Lorem Lorem', 'success')->animation(false); +alert()->success('Post Created', 'Successfully')->iconHtml('); ``` ##### Focus Confirm diff --git a/docs/middleware.md b/docs/middleware.md index 6b99ad0..fbab07e 100644 --- a/docs/middleware.md +++ b/docs/middleware.md @@ -7,10 +7,12 @@ First thing first Let register the middleware in web middleware groups by simply adding the middleware class ```php -\RealRashid\SweetAlert\ToSweetAlert::class +\RealRashid\SweetAlert\ToSweetAlert::class, ``` -into the `$middlewareGroups` of your `app/Http/Kernel.php` class. +into the `$middlewareGroups` of your `app/Http/Kernel.php` file. + +> Note: Now all your validation errors will use SweetAlert2! ### Examples @@ -18,13 +20,39 @@ Now within your controllers, just set your return message and send the proper me #### Alert +Errors Alert + +```php +public function store(Request $request) +{ + //validation + $request->validate([ + 'title' => 'required|min:3', + 'body' => 'required|min:3' + ]); + $task = Task::create($request->all()); + return redirect('tasks')->with('success', 'Task Created Successfully!'); + // OR + return redirect('tasks')->withSuccess('Task Created Successfully!'); +} +``` + Error Alert ```php -public function FunctionName(Request $request) +public function store(Request $request) { - return redirect('login')->with('error', 'Authentication Failed!'); + $validator = Validator::make($request->all(), [ + 'title' => 'required|min:3', + 'body' => 'required|min:3' + ]); + + if ($validator->fails()) { + return back()->with('error', $validator->messages()->all()[0])->withInput(); + } + $task = Task::create($request->all()); + return redirect('tasks')->with('success', 'Task Created Successfully!'); // OR - return redirect('login')->withError('Authentication Failed!'); + return redirect('tasks')->withSuccess('Task Created Successfully!'); } ``` Success Alert @@ -51,22 +79,38 @@ All available types `error` `success` `info` `warning` `question` . Error Toast ```php -public function FunctionName(Request $request) +public function store(Request $request) { - return redirect('login')->with('toast_error', 'Authentication Failed!'); + $validator = Validator::make($request->all(), [ + 'title' => 'required|min:3', + 'body' => 'required|min:3' + ]); + + if ($validator->fails()) { + return back()->with('toast_error', $validator->messages()->all()[0])->withInput(); + } + $task = Task::create($request->all()); + return redirect('tasks')->with('success', 'Task Created Successfully!'); // OR - return redirect('login')->withToastError('Authentication Failed!'); + return redirect('tasks')->withSuccess('Task Created Successfully!'); } ``` Success Toast ```php -public function update(Request $request, Task $task) +public function store(Request $request) { - //validation - // Updating logic - return redirect('tasks')->with('toast_success', 'Successfully modified the task!'); + $validator = Validator::make($request->all(), [ + 'title' => 'required|min:3', + 'body' => 'required|min:3' + ]); + + if ($validator->fails()) { + return back()->with('toast_error', $validator->messages()->all()[0])->withInput(); + } + $task = Task::create($request->all()); + return redirect('tasks')->with('toast_success', 'Task Created Successfully!'); // OR - return redirect('tasks')->withToastSuccess('Successfully modified the task!'); + return redirect('tasks')->withToastSuccess('Task Created Successfully!'); } ``` @@ -83,6 +127,7 @@ All available types `toast_error` `toast_success` `toast_info` `toast_warning` ` ``` SWEET_ALERT_MIDDLEWARE_TOAST_POSITION='top-end' SWEET_ALERT_MIDDLEWARE_TOAST_CLOSE_BUTTON=true +SWEET_ALERT_MIDDLEWARE_ALERT_AUTO_CLOSE=5000 ``` > Positions **'top'**, **'top-start'**, **'top-end'**, diff --git a/docs/tutorial.md b/docs/tutorial.md index 84a8695..755dbb1 100644 --- a/docs/tutorial.md +++ b/docs/tutorial.md @@ -2,6 +2,19 @@
+
+
+ +
+

Andre Madarang

+
+
+