SERV-2286 - modal element (WIP fragments and events)

src/Views/Limitless/Modal/Config.php

@@ -32,31 +32,99 @@
     class Config 
     {
         public $methodAllocation = [
-        'Limitless::ModalStart' => 'start',
-        'Limitless::ModalStop' => 'stop'
+            'Limitless::ModalStart' => 'modalStart',
+            'Limitless::ModalStop' => 'modalStop',
+            'Limitless::ModalBodyStart' => 'modalBodyStart',
+            'Limitless::ModalBodyStop' => 'modalBodyStop',
+            'Limitless::ModalFooterStart' => 'modalFooterStart',
+            'Limitless::ModalFooterStop' => 'modalFooterStop',
         ];
 
+        public $assetAllocation;
+
+        public function __construct()
+        {
+            $this->assetAllocation = [
+                'Limitless::ModalStart' => [
+                    'modal_callbacks.js'
+                ]
+            ];
+        }
+
 
         /*
         |--------------------------------------------------------------------------------------------
-        | Method "start"
+        | Method "modalStart"
         |--------------------------------------------------------------------------------------------
         */
-        public function start($parameters)
+        public function modalStart($parameters)
         {
-            return View('Limitless::Modal.Start');
+            return View('Limitless::Modal.ModalStart')
+                ->withId($parameters['id'] ?? null)
+                ->withAnimate($parameters['animate'] ?? true)
+                ->withKeyboard($parameters['keyboard'] ?? true)
+                ->withBackdrop($parameters['backdrop'] ?? true)
+                ->withSize($parameters['size'] ?? null)
+                ->withScrollable($parameters['scrollable'] ?? null)
+                ->withIcon($parameters['icon'] ?? null)
+                ->withTitle($parameters['title'] ?? 'No title');
 
         }
 
 
         /*
         |--------------------------------------------------------------------------------------------
-        | Method "stop"
+        | Method "modalStop"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function modalStop($parameters)
+        {
+            return View('Limitless::Modal.ModalStop');
+
+        }
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "modalBodyStart"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function modalBodyStart($parameters)
+        {
+            return View('Limitless::Modal.ModalBodyStart');
+        }
+
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "modalBodyStop"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function modalBodyStop($parameters)
+        {
+            return View('Limitless::Modal.ModalBodyStop');
+
+        }
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "modalBodyStart"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function modalFooterStart($parameters)
+        {
+            return View('Limitless::Modal.ModalFooterStart')
+                ->withScrollable($parameters['scrollable'] ?? false);
+        }
+
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "modalFooterStop"
         |--------------------------------------------------------------------------------------------
         */
-        public function stop($parameters)
+        public function modalFooterStop($parameters)
         {
-            return View('Limitless::Modal.Stop');
+            return View('Limitless::Modal.ModalFooterStop');
 
         }
 

src/Views/Limitless/Modal/ModalBodyStart.blade.php

+<div class="modal-body">
\ No newline at end of file

src/Views/Limitless/Modal/ModalBodyStop.blade.php

+</div>
\ No newline at end of file

src/Views/Limitless/Modal/ModalFooterStart.blade.php

+<div class="modal-footer @if($scrollable) pt-3 @endif">
\ No newline at end of file

src/Views/Limitless/Modal/ModalFooterStop.blade.php

+</div>
\ No newline at end of file

src/Views/Limitless/Modal/ModalStart.blade.php

+<div id="{{ $id }}"
+     class="modal @if($animate) fade @endif"
+     @if(!$keyboard) data-keyboard="false" @endif
+     @if(!$backdrop) data-backdrop="false" @endif
+     tabindex="-1" style="display: none;" aria-hidden="true"
+>
+    <div class="modal-dialog
+        @if($size) modal-{{ $size }} @endif
+        @if($scrollable) modal-dialog-scrollable @endif
+    ">
+        <div class="modal-content">
+            <div class="modal-header @if($scrollable) pb-3 @endif">
+                <h5 class="modal-title">
+                    @if($icon) <i class="{{ $icon }} mr-2"></i> &nbsp; @endif
+                    {{ $title }}
+                </h5>
+                <button type="button" class="close" data-dismiss="modal">×</button>
+            </div>
\ No newline at end of file

src/Views/Limitless/Modal/ModalStop.blade.php

+</div>
+</div>
+</div>
\ No newline at end of file

src/Views/Limitless/Modal/modal.js

+$(document).ready(function() {
+
+    // onShow callback
+    $('#modal_onshow').on('show.bs.modal', function() {
+        alert('onShow callback fired.')
+    });
+
+    // onShown callback
+    $('#modal_onshown').on('shown.bs.modal', function() {
+        alert('onShown callback fired.')
+    });
+
+    // onHide callback
+    $('#modal_onhide').on('hide.bs.modal', function() {
+        alert('onHide callback fired.')
+    });
+
+    // onHidden callback
+    $('#modal_onhidden').on('hidden.bs.modal', function() {
+        alert('onHidden callback fired.')
+    });
+
+})
\ No newline at end of file