SERV-2286 - toastr changed to PNotify package. named Notification. WIP

resources/Elements/notification/notification.sample.js

+let limitlessNotification = new LimitlessNotification();
+
+$(document).on('click', '#notify_success', function () {
+    limitlessNotification.set('Success!', 'This is a success message!', 'success');
+});
+
+$(document).on('click', '#notify_error', function () {
+    limitlessNotification.set('Error!', 'This is an error message!', 'error');
+});
+
+$(document).on('click', '#notify_warning', function () {
+    limitlessNotification.set('', 'This is a warning message!', ''); // warning type as default
+});
+
+$(document).on('click', '#notify_info', function () {
+    limitlessNotification.set('Info!', 'This is an info message!', 'info');
+});
+
+$(document).on('click', '#notify_confirm', function () {
+    let instance = limitlessNotification.set('Confirmation', 'Are you sure?', 'warning', true);
+
+    // On confirm
+    instance.get().on('pnotify.confirm', function() {
+        alert('Are you really really sure?');
+    })
+
+    // On cancel
+    instance.get().on('pnotify.cancel', function() {
+        alert('Okay.');
+    });
+});
+
+$(document).on('click', '#notify_bar', function () {
+    limitlessNotification.set('Bar!', 'This is a bar notification', 'info', false, true, 'bottom');
+});
\ No newline at end of file

src/Views/Limitless/Help/Layout/Master.blade.php

@@ -10,7 +10,11 @@
 @section('Limitless::GlobalLogoDestinationUrl', 'https://google.de')
 
 @section('Limitless::Javascript')
-    <script></script>
+
+    @Limitless::InitNotifications
+
+    <script src="{{ secure_url("/ceetrox/sidekick/resource/public/Elements/notification/notification.sample.js") }}" defer></script>
+    <script src="{{ secure_url("/ceetrox/sidekick/resource/public/Elements/notification/modal.sample.js") }}" defer></script>
 @stop
 
 @section('Limitless::Stylesheet')

src/Views/Limitless/Modal/Config.php

@@ -40,18 +40,6 @@
             'Limitless::ModalFooterStop' => 'modalFooterStop',
         ];
 
-        public $assetAllocation;
-
-        public function __construct()
-        {
-            $this->assetAllocation = [
-                'Limitless::ModalStart' => [
-                    'Attachments/modal.js'
-                ]
-            ];
-        }
-
-
         /*
         |--------------------------------------------------------------------------------------------
         | Method "modalStart"

src/Views/Limitless/Notification/Attachments/notification.init.js

+class LimitlessNotification {
+
+    // returns instance.
+    set(title, msg, type, confirm = false, bar = false,  pos = null, icon = null) {
+        setTimeout(function() {
+            if (!isModuleSet()) {
+                console.warn('Warning - pnotify.min.js is not loaded.');
+                return;
+            }
+
+            let options = setOption(title, msg, type, icon, bar, pos, confirm);
+
+            return new PNotify(options);
+        },1);
+    }
+}
+
+// Define directions
+const stack_top_left = {"dir1": "down", "dir2": "right", "push": "top"};
+const stack_bottom_left = {"dir1": "up", "dir2": "right", "push": "top"};
+const stack_bottom_right = {"dir1": "up", "dir2": "left", "push": "top"};
+const stack_bar_top = {"dir1": "down", "dir2": "right", "push": "top"};
+const stack_bar_bottom = {"dir1": "up", "dir2": "right", "push": "top"};
+const stack_modal = {"dir1": "down", "dir2": "right", "push": "top", "modal": true};
+
+function setPosition(position, isBar, isConfirmation) {
+
+    let pos = { };
+
+    // if confirmation
+    if(isConfirmation) {
+        pos.addclass = 'stack-modal';
+        pos.stack = stack_modal;
+
+        return pos;
+    }
+
+    // if basics
+    switch(position) {
+        case 'top-left':
+            pos.addclass = isBar ? 'stack-custom-top' : 'stack-top-left';
+            pos.stack = isBar ? stack_bar_top : stack_top_left;
+            break;
+        case 'bottom-left':
+            pos.addclass = isBar ? 'stack-custom-bottom' : 'stack-bottom-left';
+            pos.stack = isBar ? stack_bar_bottom : stack_bottom_left;
+            break;
+        case 'bottom-right':
+            pos.addclass = isBar ? 'stack-custom-bottom' : 'stack-bottom-right';
+            pos.stack = isBar ? stack_bar_bottom : stack_bottom_right;
+            break;
+    }
+
+    // additional bar conditions
+    if(isBar)
+    {
+        switch (position) {
+            case 'top-center':
+            case 'top':
+                pos.addclass = 'stack-custom-top';
+                pos.stack = stack_bar_top;
+                break;
+            case 'bottom-center':
+            case 'bottom':
+                pos.addclass = 'stack-custom-bottom';
+                pos.stack = stack_bar_bottom;
+        }
+    }
+
+    if(!position && isBar) {
+        pos.addclass = 'stack-custom-top';
+        pos.stack = stack_bar_top;
+    }
+
+    return pos;
+}
+
+function setConfirmationOptions() {
+
+    return {
+        hide: false,
+        confirm: {
+            confirm: true,
+            buttons: [
+                {
+                    text: 'Yes',
+                    addClass: 'btn btn-sm btn-primary'
+                },
+                {
+                    addClass: 'btn btn-sm btn-link'
+                }
+            ]
+        },
+        buttons: {
+            closer: false,
+            sticker: false
+        }
+    }
+}
+
 function getDefaultIcon(type, icon) {
 
     if(!icon) {
@@ -26,80 +126,68 @@ function getType(type) {
         case 'success':
         case 'error':
         case 'info':
-            break;
         case 'error':
         case 'warning':
-            type = 'success';
             break;
     }
     return type;
 }
 
-$(document).ready(function() {
+function setOption(title, msg, type, icon, bar, pos, confirm) {
+
+    let isBar = (bar == true || bar == 'true');
+    let isConfirmation = (confirm == true || confirm == 'true');
 
-    if (typeof PNotify == 'undefined') {
-        console.warn('Warning - pnotify.min.js is not loaded.');
-        return;
+    let options = {
+        title: title,
+        text: msg,
+        icon: getDefaultIcon(type, icon),
+        type: type,
     }
 
-    let elementObjects = $('.LimitlessNotification');
+    // set stack and position
+    options = {...options, ...setPosition(pos, isBar, isConfirmation)};
 
-    elementObjects.each(function() {
+    // set width to 100% if bar
+    if(isBar && !isConfirmation) options.width = '100%';
 
-        let obj = $(this);
+    if(isConfirmation) options = {...options, ...setConfirmationOptions()};
 
-        let title = obj.attr('data-title');
-        let msg = obj.attr('data-message');
-        let type = obj.attr('data-type');
-        let icon = obj.attr('data-icon');
+    return options;
+}
 
-        setTimeout(function() {
-            new PNotify({
-                title: title,
-                text: msg,
-                icon: getDefaultIcon(type, icon),
-                type: getType(type)
-            });
-        },1);
+function isModuleSet() {
+    return (typeof PNotify != 'undefined');
+}
 
-    });
+$(document).ready(function() {
 
-    // TRANSFER SAMPLES ON RESOURCES
+    setTimeout(function() {
+
+        if (!isModuleSet()) {
+            console.warn('Warning - pnotify.min.js is not loaded.');
+            return;
+        }
+
+        let elementObjects = $('.LimitlessNotification');
+
+        elementObjects.each(function() {
+
+            let obj = $(this);
+
+            let title = obj.attr('data-title');
+            let msg = obj.attr('data-message');
+            let type = obj.attr('data-type');
+            let icon = obj.attr('data-icon');
+            let bar = obj.attr('data-bar');
+            let pos = obj.attr('data-pos');
+            let confirm = obj.attr('data-confirm');
+
+            let options = setOption(title, msg, type, icon, bar, pos, confirm);
+            new PNotify(options);
 
-    $('#notify_success').on('click', function () {
-        new PNotify({
-            title: 'Success!',
-            text: 'This is a Success!',
-            icon: 'icon-checkmark3',
-            type: 'success'
-        });
-    });
-
-    $('#notify_error').on('click', function () {
-        new PNotify({
-            title: 'Error!',
-            text: 'This is an Error!',
-            icon: 'icon-blocked',
-            type: 'error'
-        });
-    });
-
-    $('#notify_warning').on('click', function () {
-        new PNotify({
-            title: 'Warning!',
-            text: 'This is a Warning!',
-            icon: 'icon-warning22',
-            type: ''
-        });
-    });
-
-    $('#notify_info').on('click', function () {
-        new PNotify({
-            title: 'Info!',
-            text: 'This is an Info!',
-            icon: 'icon-info22',
-            type: 'info'
         });
-    });
+
+    },1);
 
 })
\ No newline at end of file

src/Views/Limitless/Notification/Config.php

@@ -33,6 +33,7 @@
     {
         public $methodAllocation = [
             'Limitless::Notify' => 'notify',
+            'Limitless::InitNotifications' => 'initNotifications'
         ];
 
         public $assetAllocation;
@@ -40,7 +41,7 @@
         public function __construct()
         {
             $this->assetAllocation = [
-                'Limitless::Notify' => [
+                'Limitless::InitNotifications' => [
                     'Attachments/notification.init.js',
                     secure_url('/ceetrox/sidekick/resource/public/Webdesigns/design-limitless/Template/global_assets/js/plugins/notifications/pnotify.min.js'),
                 ]
@@ -58,7 +59,20 @@
                 ->withTitle($parameters['title'] ?? '')
                 ->withMessage($parameters['message'] ?? 'No Message')
                 ->withType($parameters['type'] ?? 'success')
-                ->withIcon($parameters['icon'] ?? null);
+                ->withIcon($parameters['icon'] ?? null)
+                ->withBar($parameters['bar'] ?? false)
+                ->withPosition($parameters['position'] ?? null)
+                ->withConfirm($parameters['confirm'] ?? false);
+        }
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "initNotifications"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function initNotifications()
+        {
+            return View('Limitless::Notification.Init')->with('success', 'Hello! I am from notif init!');
         }
     }
 

src/Views/Limitless/Notification/Documentation/Index.blade.php

@@ -6,11 +6,14 @@
     @Limitless::CardStart(['title' => "Description", 'icon' => 'icon-info22'])
 
         @Limitless::Notify(['type' => 'info', 'title' => 'PNotify', 'message' => 'Popup notifications using PNotify!'])
+        @Limitless::Notify(['type' => 'success', 'title' => 'Notifications Enabled', 'message' => 'Enable by adding @Limitless::InitNotifications'])
+        @Limitless::Notify(['type' => 'success', 'title' => 'Test', 'message' => 'Test', 'position' => 'top-left'])
 
         <button type="button" class="btn btn-light" id="notify_success">Success</button>
         <button type="button" class="btn btn-light" id="notify_error">Error</button>
         <button type="button" class="btn btn-light" id="notify_warning">Warning</button>
         <button type="button" class="btn btn-light" id="notify_info">Info</button>
+        <button type="button" class="btn btn-light" id="notify_bar">Bar</button>
         <button type="button" class="btn btn-light" id="notify_confirm">Confirm</button>
 
     @Limitless::CardStop

src/Views/Limitless/Notification/Init.blade.php

+{{--<script>--}}
+
+{{--    let limitlessNotifications = new LimitlessNotification();--}}
+
+{{--    limitlessNotifications.set('Test', "Testing", 'success');--}}
+
+{{--    --}}{{-- Default Toasters --}}
+{{--    @if(isset($errors)) @foreach($errors->all() as $data) limitlessNotifications.set('', "{{ $data }}", 'error'); @endforeach @endif--}}
+{{--    @if(isset($infos)) @foreach($infos as $data) limitlessNotifications.set('', "{{ $data }}", 'info'); @endforeach @endif--}}
+{{--    @if(isset($warnings)) @foreach($warnings as $data) limitlessNotifications.set('', "{{ $data }}", 'warning'); @endforeach @endif--}}
+{{--    @if(isset($successes)) @foreach($successes as $data) limitlessNotifications.set('', "{{ $data }}", 'success'); @endforeach @endif--}}
+{{--    @if(isset($hiddens)) @foreach($hiddens as $data) console.log("{{ $data }}"); @endforeach @endif--}}
+{{--    @if(isset($error)) limitlessNotifications.set('', "{{ $error }}", 'error'); @endif--}}
+{{--    @if(isset($success))--}}
+
+{{--        let a = limitlessNotifications.set('', "{{ $success }}", 'success');--}}
+{{--        console.log('{{ $success }}');--}}
+{{--        console.log(a);--}}
+
+{{--    @endif--}}
+{{--    @if(isset($warning)) limitlessNotifications.set('', "{{ $warning }}", 'warning'); @endif--}}
+{{--    @if(isset($info)) limitlessNotifications.set('', "{{ $info }}", 'info'); @endif--}}
+{{--    @if(isset($hidden)) console.log("{{ $hidden }}"); @endif--}}
+
+{{--    --}}{{-- Session Toasters --}}
+{{--    @if(Session::has('errors')) @foreach(Session::get('errors') as $data) limitlessNotifications.set('', "{{ $data }}", 'error'); @endforeach @endif--}}
+{{--    @if(Session::has('infos')) @foreach(Session::get('infos') as $data) limitlessNotifications.set('', "{{ $data }}", 'info'); @endforeach @endif--}}
+{{--    @if(Session::has('warnings')) @foreach(Session::get('warnings') as $data) limitlessNotifications.set('', "{{ $data }}", 'warning'); @endforeach @endif--}}
+{{--    @if(Session::has('successes')) @foreach(Session::get('successes') as $data) limitlessNotifications.set('', "{{ $data }}", 'success'); @endforeach @endif--}}
+{{--    @if(Session::has('hiddens')) @foreach(Session::get('hiddens') as $data) console.log("{{ $data }}"); @endforeach @endif--}}
+{{--    @if(Session::has('error')) limitlessNotifications.set('', "{{ Session::get('error') }}", 'error'); @endif--}}
+{{--    @if(Session::has('success')) limitlessNotifications.set('', "{{ Session::get('success') }}", 'success'); @endif--}}
+{{--    @if(Session::has('warning')) limitlessNotifications.set('', "{{ Session::get('warning') }}", 'warning'); @endif--}}
+{{--    @if(Session::has('info')) limitlessNotifications.set('', "{{ Session::get('info') }}", 'info'); @endif--}}
+{{--    @if(Session::has('hidden')) console.log("{{ Session::get('hidden') }}"); @endif--}}
+
+{{--</script>--}}
\ No newline at end of file

src/Views/Limitless/Notification/Notification.blade.php

@@ -4,6 +4,9 @@
     data-icon="{{ $icon }}"
     data-title="{{ $title }}"
     data-message="{{ $message }}"
+    data-bar="{{ $bar }}"
+    data-pos="{{ $position }}"
+    data-confirm="{{ $confirm }}"
     hidden
 >
 </div>
\ No newline at end of file