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 "modalStart"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function modalStart($parameters)
+        {
+            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 "modalStop"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function modalStop($parameters)
+        {
+            return View('Limitless::Modal.ModalStop');
+
+        }
+
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "modalBodyStart"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function modalBodyStart($parameters)
+        {
+            return View('Limitless::Modal.ModalBodyStart');
+        }
+
 
         /*
         |--------------------------------------------------------------------------------------------
-        | Method "start"
+        | Method "modalBodyStop"
         |--------------------------------------------------------------------------------------------
         */
-        public function start($parameters)
+        public function modalBodyStop($parameters)
         {
-            return View('Limitless::Modal.Start');
+            return View('Limitless::Modal.ModalBodyStop');
 
         }
 
+        /*
+        |--------------------------------------------------------------------------------------------
+        | Method "modalBodyStart"
+        |--------------------------------------------------------------------------------------------
+        */
+        public function modalFooterStart($parameters)
+        {
+            return View('Limitless::Modal.ModalFooterStart')
+                ->withScrollable($parameters['scrollable'] ?? false);
+        }
+
 
         /*
         |--------------------------------------------------------------------------------------------
-        | Method "stop"
+        | Method "modalFooterStop"
         |--------------------------------------------------------------------------------------------
         */
-        public function stop($parameters)
+        public function modalFooterStop($parameters)
         {
-            return View('Limitless::Modal.Stop');
+            return View('Limitless::Modal.ModalFooterStop');
 
         }
 

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

@@ -6,7 +6,7 @@
 
     {{-- Description --}}
     @Limitless::ElementCardStart(['title' => "Modal", 'icon' => 'icon-stack'])
-        <p>A styled container for grouping contents.</p>
+        <p>A styled popup container for dialogs.</p>
     @Limitless::ElementCardStop
 
     {{-- Elements --}}
@@ -44,13 +44,106 @@
 
     @Limitless::ElementCardStop
 
+    @Limitless::ElementCardStart(['title' => "Events", 'icon' => 'icon-power2' ] )
+
+    @Limitless::ElementCardStop
+
     {{-- Sample Output --}}
     @Limitless::ElementCardStart(['title' => "Sample Output", 'icon' => 'icon-display4' ] )
-        modal samples here.
+
+        {{-- Modals --}}
+        @Limitless::ModalStart(['id' => 'modal_lg_test', 'title' => 'Modal Large Sample', 'icon' => 'icon-menu7', 'size' => 'lg'])
+            @Limitless::ModalBodyStart
+                @Limitless::LoremIpsum(['length' => 50])
+                @Limitless::Divider
+                @Limitless::LoremIpsum(['length' => 100])
+            @Limitless::ModalBodyStop
+            @Limitless::ModalFooterStart
+                <button class="btn btn-link" data-dismiss="modal"><i class="icon-cross2 font-size-base mr-1"></i> Close</button>
+                <button class="btn bg-primary"><i class="icon-checkmark3 font-size-base mr-1"></i> Okay</button>
+            @Limitless::ModalFooterStop
+        @Limitless::ModalStop
+
+        @Limitless::ModalStart(['id' => 'modal_xs_test', 'title' => 'Modal Extra Small', 'icon' => 'icon-menu7', 'size' => 'xs'])
+            @Limitless::ModalBodyStart
+                @Limitless::LoremIpsum(['length' => 20])
+            @Limitless::ModalBodyStop
+        @Limitless::ModalStop
+
+        @Limitless::ModalStart(['id' => 'modal_scrollable_test', 'title' => 'Modal Scrollable', 'icon' => 'icon-menu7', 'size' => 'xs', 'scrollable' => true])
+            @Limitless::ModalBodyStart
+                @Limitless::LoremIpsum(['length' => 500])
+            @Limitless::ModalBodyStop
+            @Limitless::ModalFooterStart(['scrollable' => true])
+                <button class="btn btn-link" data-dismiss="modal"><i class="icon-cross2 font-size-base mr-1"></i> Close</button>
+                <button class="btn bg-primary"><i class="icon-checkmark3 font-size-base mr-1"></i> Okay</button>
+            @Limitless::ModalFooterStop
+        @Limitless::ModalStop
+
+        @Limitless::ModalStart(['id' => 'modal_backdrop_test', 'title' => 'Modal No Backdrop', 'icon' => 'icon-menu7', 'backdrop' => false ])
+            @Limitless::ModalBodyStart
+                @Limitless::LoremIpsum(['length' => 20])
+            @Limitless::ModalBodyStop
+        @Limitless::ModalStop
+
+        @Limitless::ModalStart(['id' => 'modal_keyboard_test', 'title' => 'Modal No Keyboard Interaction', 'icon' => 'icon-menu7', 'keyboard' => false ])
+            @Limitless::ModalBodyStart
+                @Limitless::LoremIpsum(['length' => 20])
+            @Limitless::ModalBodyStop
+        @Limitless::ModalStop
+
+        @Limitless::ModalStart(['id' => 'modal_no_animation_test', 'title' => 'Modal No Animation', 'icon' => 'icon-menu7', 'animate' => false ])
+            @Limitless::ModalBodyStart
+                @Limitless::LoremIpsum(['length' => 50])
+            @Limitless::ModalBodyStop
+        @Limitless::ModalStop
+
+        @Limitless::ModalStart(['id' => 'modal_onshow', 'title' => 'Modal Extra Small', 'icon' => 'icon-menu7', 'size' => 'xs'])
+            @Limitless::ModalBodyStart
+                @Limitless::LoremIpsum(['length' => 20])
+            @Limitless::ModalBodyStop
+        @Limitless::ModalStop
+
+        {{-- Modal Events--}}
+        @Limitless::ModalStart(['id' => 'modal_onshown', 'title' => 'Modal Extra Small', 'icon' => 'icon-menu7', 'size' => 'xs'])
+            @Limitless::ModalBodyStart
+                @Limitless::LoremIpsum(['length' => 20])
+            @Limitless::ModalBodyStop
+        @Limitless::ModalStop
+
+        @Limitless::ModalStart(['id' => 'modal_onhide', 'title' => 'Modal Extra Small', 'icon' => 'icon-menu7', 'size' => 'xs'])
+            @Limitless::ModalBodyStart
+                @Limitless::LoremIpsum(['length' => 20])
+            @Limitless::ModalBodyStop
+        @Limitless::ModalStop
+
+        @Limitless::ModalStart(['id' => 'modal_onhidden', 'title' => 'Modal Extra Small', 'icon' => 'icon-menu7', 'size' => 'xs'])
+            @Limitless::ModalBodyStart
+                @Limitless::LoremIpsum(['length' => 20])
+            @Limitless::ModalBodyStop
+        @Limitless::ModalStop
+
+        {{-- Modal buttons --}}
+        <button type="button" class="btn btn-light mb-1" data-toggle="modal" data-target="#modal_lg_test">Large modal</button>
+        <button type="button" class="btn btn-light mb-1" data-toggle="modal" data-target="#modal_xs_test">Extra small modal</button>
+        <button type="button" class="btn btn-light mb-1" data-toggle="modal" data-target="#modal_scrollable_test">Scrollable modal</button>
+        <button type="button" class="btn btn-light mb-1" data-toggle="modal" data-target="#modal_backdrop_test">No backdrop modal</button>
+        <button type="button" class="btn btn-light mb-1" data-toggle="modal" data-target="#modal_keyboard_test">No keyboard interaction modal</button>
+        <button type="button" class="btn btn-light mb-1" data-toggle="modal" data-target="#modal_no_animation_test">No animation modal</button>
+
+        @Limitless::Divider
+
+        {{-- Modal event buttons --}}
+        <button type="button" class="btn btn-light mb-1" data-toggle="modal" data-target="#modal_onshow">Fire modal event onShow</button>
+        <button type="button" class="btn btn-light mb-1" data-toggle="modal" data-target="#modal_onshown">Fire modal event onShown</button>
+        <button type="button" class="btn btn-light mb-1" data-toggle="modal" data-target="#modal_onhide">Fire modal event onHide</button>
+        <button type="button" class="btn btn-light mb-1" data-toggle="modal" data-target="#modal_onhidden">Fire modal event onHidden</button>
+
+
     @Limitless::ElementCardStop
 
     @php
-        $example = base64_decode("");
+        $example = base64_decode("Ly8gTW9kYWxzCkBMaW1pdGxlc3M6Ok1vZGFsU3RhcnQoWydpZCcgPT4gJ21vZGFsX2xnX3Rlc3QnLCAndGl0bGUnID0+ICdNb2RhbCBMYXJnZSBTYW1wbGUnLCAnaWNvbicgPT4gJ2ljb24tbWVudTcnLCAnc2l6ZScgPT4gJ2xnJ10pCglATGltaXRsZXNzOjpNb2RhbEJvZHlTdGFydAoJCUBMaW1pdGxlc3M6OkxvcmVtSXBzdW0oWydsZW5ndGgnID0+IDUwXSkKCQlATGltaXRsZXNzOjpEaXZpZGVyCgkJQExpbWl0bGVzczo6TG9yZW1JcHN1bShbJ2xlbmd0aCcgPT4gMTAwXSkKCUBMaW1pdGxlc3M6Ok1vZGFsQm9keVN0b3AKCUBMaW1pdGxlc3M6Ok1vZGFsRm9vdGVyU3RhcnQKCQk8YnV0dG9uIGNsYXNzPSJidG4gYnRuLWxpbmsiIGRhdGEtZGlzbWlzcz0ibW9kYWwiPjxpIGNsYXNzPSJpY29uLWNyb3NzMiBmb250LXNpemUtYmFzZSBtci0xIj48L2k+IENsb3NlPC9idXR0b24+CgkJPGJ1dHRvbiBjbGFzcz0iYnRuIGJnLXByaW1hcnkiPjxpIGNsYXNzPSJpY29uLWNoZWNrbWFyazMgZm9udC1zaXplLWJhc2UgbXItMSI+PC9pPiBPa2F5PC9idXR0b24+CglATGltaXRsZXNzOjpNb2RhbEZvb3RlclN0b3AKQExpbWl0bGVzczo6TW9kYWxTdG9wCgpATGltaXRsZXNzOjpNb2RhbFN0YXJ0KFsnaWQnID0+ICdtb2RhbF94c190ZXN0JywgJ3RpdGxlJyA9PiAnTW9kYWwgRXh0cmEgU21hbGwnLCAnaWNvbicgPT4gJ2ljb24tbWVudTcnLCAnc2l6ZScgPT4gJ3hzJ10pCglATGltaXRsZXNzOjpNb2RhbEJvZHlTdGFydAoJCUBMaW1pdGxlc3M6OkxvcmVtSXBzdW0oWydsZW5ndGgnID0+IDIwXSkKCUBMaW1pdGxlc3M6Ok1vZGFsQm9keVN0b3AKQExpbWl0bGVzczo6TW9kYWxTdG9wCgpATGltaXRsZXNzOjpNb2RhbFN0YXJ0KFsnaWQnID0+ICdtb2RhbF9zY3JvbGxhYmxlX3Rlc3QnLCAndGl0bGUnID0+ICdNb2RhbCBTY3JvbGxhYmxlJywgJ2ljb24nID0+ICdpY29uLW1lbnU3JywgJ3NpemUnID0+ICd4cycsICdzY3JvbGxhYmxlJyA9PiB0cnVlXSkKCUBMaW1pdGxlc3M6Ok1vZGFsQm9keVN0YXJ0CgkJQExpbWl0bGVzczo6TG9yZW1JcHN1bShbJ2xlbmd0aCcgPT4gNTAwXSkKCUBMaW1pdGxlc3M6Ok1vZGFsQm9keVN0b3AKCUBMaW1pdGxlc3M6Ok1vZGFsRm9vdGVyU3RhcnQoWydzY3JvbGxhYmxlJyA9PiB0cnVlXSkKCQk8YnV0dG9uIGNsYXNzPSJidG4gYnRuLWxpbmsiIGRhdGEtZGlzbWlzcz0ibW9kYWwiPjxpIGNsYXNzPSJpY29uLWNyb3NzMiBmb250LXNpemUtYmFzZSBtci0xIj48L2k+IENsb3NlPC9idXR0b24+CgkJPGJ1dHRvbiBjbGFzcz0iYnRuIGJnLXByaW1hcnkiPjxpIGNsYXNzPSJpY29uLWNoZWNrbWFyazMgZm9udC1zaXplLWJhc2UgbXItMSI+PC9pPiBPa2F5PC9idXR0b24+CglATGltaXRsZXNzOjpNb2RhbEZvb3RlclN0b3AKQExpbWl0bGVzczo6TW9kYWxTdG9wCgpATGltaXRsZXNzOjpNb2RhbFN0YXJ0KFsnaWQnID0+ICdtb2RhbF9iYWNrZHJvcF90ZXN0JywgJ3RpdGxlJyA9PiAnTW9kYWwgTm8gQmFja2Ryb3AnLCAnaWNvbicgPT4gJ2ljb24tbWVudTcnLCAnYmFja2Ryb3AnID0+IGZhbHNlIF0pCglATGltaXRsZXNzOjpNb2RhbEJvZHlTdGFydAoJCUBMaW1pdGxlc3M6OkxvcmVtSXBzdW0oWydsZW5ndGgnID0+IDIwXSkKCUBMaW1pdGxlc3M6Ok1vZGFsQm9keVN0b3AKQExpbWl0bGVzczo6TW9kYWxTdG9wCgpATGltaXRsZXNzOjpNb2RhbFN0YXJ0KFsnaWQnID0+ICdtb2RhbF9rZXlib2FyZF90ZXN0JywgJ3RpdGxlJyA9PiAnTW9kYWwgTm8gS2V5Ym9hcmQgSW50ZXJhY3Rpb24nLCAnaWNvbicgPT4gJ2ljb24tbWVudTcnLCAna2V5Ym9hcmQnID0+IGZhbHNlIF0pCglATGltaXRsZXNzOjpNb2RhbEJvZHlTdGFydAoJCUBMaW1pdGxlc3M6OkxvcmVtSXBzdW0oWydsZW5ndGgnID0+IDIwXSkKCUBMaW1pdGxlc3M6Ok1vZGFsQm9keVN0b3AKQExpbWl0bGVzczo6TW9kYWxTdG9wCgpATGltaXRsZXNzOjpNb2RhbFN0YXJ0KFsnaWQnID0+ICdtb2RhbF9ub19hbmltYXRpb25fdGVzdCcsICd0aXRsZScgPT4gJ01vZGFsIE5vIEFuaW1hdGlvbicsICdpY29uJyA9PiAnaWNvbi1tZW51NycsICdhbmltYXRlJyA9PiBmYWxzZSBdKQoJQExpbWl0bGVzczo6TW9kYWxCb2R5U3RhcnQKCQlATGltaXRsZXNzOjpMb3JlbUlwc3VtKFsnbGVuZ3RoJyA9PiA1MF0pCglATGltaXRsZXNzOjpNb2RhbEJvZHlTdG9wCkBMaW1pdGxlc3M6Ok1vZGFsU3RvcAoKCi8vIE1vZGFsIGV2ZW50cwpATGltaXRsZXNzOjpNb2RhbFN0YXJ0KFsnaWQnID0+ICdtb2RhbF9vbnNob3cnLCAndGl0bGUnID0+ICdNb2RhbCBFeHRyYSBTbWFsbCcsICdpY29uJyA9PiAnaWNvbi1tZW51NycsICdzaXplJyA9PiAneHMnXSkKCUBMaW1pdGxlc3M6Ok1vZGFsQm9keVN0YXJ0CgkJQExpbWl0bGVzczo6TG9yZW1JcHN1bShbJ2xlbmd0aCcgPT4gMjBdKQoJQExpbWl0bGVzczo6TW9kYWxCb2R5U3RvcApATGltaXRsZXNzOjpNb2RhbFN0b3AKCkBMaW1pdGxlc3M6Ok1vZGFsU3RhcnQoWydpZCcgPT4gJ21vZGFsX29uc2hvd24nLCAndGl0bGUnID0+ICdNb2RhbCBFeHRyYSBTbWFsbCcsICdpY29uJyA9PiAnaWNvbi1tZW51NycsICdzaXplJyA9PiAneHMnXSkKCUBMaW1pdGxlc3M6Ok1vZGFsQm9keVN0YXJ0CgkJQExpbWl0bGVzczo6TG9yZW1JcHN1bShbJ2xlbmd0aCcgPT4gMjBdKQoJQExpbWl0bGVzczo6TW9kYWxCb2R5U3RvcApATGltaXRsZXNzOjpNb2RhbFN0b3AKCkBMaW1pdGxlc3M6Ok1vZGFsU3RhcnQoWydpZCcgPT4gJ21vZGFsX29uaGlkZScsICd0aXRsZScgPT4gJ01vZGFsIEV4dHJhIFNtYWxsJywgJ2ljb24nID0+ICdpY29uLW1lbnU3JywgJ3NpemUnID0+ICd4cyddKQoJQExpbWl0bGVzczo6TW9kYWxCb2R5U3RhcnQKCQlATGltaXRsZXNzOjpMb3JlbUlwc3VtKFsnbGVuZ3RoJyA9PiAyMF0pCglATGltaXRsZXNzOjpNb2RhbEJvZHlTdG9wCkBMaW1pdGxlc3M6Ok1vZGFsU3RvcAoKQExpbWl0bGVzczo6TW9kYWxTdGFydChbJ2lkJyA9PiAnbW9kYWxfb25oaWRkZW4nLCAndGl0bGUnID0+ICdNb2RhbCBFeHRyYSBTbWFsbCcsICdpY29uJyA9PiAnaWNvbi1tZW51NycsICdzaXplJyA9PiAneHMnXSkKCUBMaW1pdGxlc3M6Ok1vZGFsQm9keVN0YXJ0CgkJQExpbWl0bGVzczo6TG9yZW1JcHN1bShbJ2xlbmd0aCcgPT4gMjBdKQoJQExpbWl0bGVzczo6TW9kYWxCb2R5U3RvcApATGltaXRsZXNzOjpNb2RhbFN0b3AKCgovLyBNb2RhbCBidXR0b25zCjxidXR0b24gdHlwZT0iYnV0dG9uIiBjbGFzcz0iYnRuIGJ0bi1saWdodCBtYi0xIiBkYXRhLXRvZ2dsZT0ibW9kYWwiIGRhdGEtdGFyZ2V0PSIjbW9kYWxfbGdfdGVzdCI+TGFyZ2UgbW9kYWw8L2J1dHRvbj4KPGJ1dHRvbiB0eXBlPSJidXR0b24iIGNsYXNzPSJidG4gYnRuLWxpZ2h0IG1iLTEiIGRhdGEtdG9nZ2xlPSJtb2RhbCIgZGF0YS10YXJnZXQ9IiNtb2RhbF94c190ZXN0Ij5FeHRyYSBzbWFsbCBtb2RhbDwvYnV0dG9uPgo8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgY2xhc3M9ImJ0biBidG4tbGlnaHQgbWItMSIgZGF0YS10b2dnbGU9Im1vZGFsIiBkYXRhLXRhcmdldD0iI21vZGFsX3Njcm9sbGFibGVfdGVzdCI+U2Nyb2xsYWJsZSBtb2RhbDwvYnV0dG9uPgo8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgY2xhc3M9ImJ0biBidG4tbGlnaHQgbWItMSIgZGF0YS10b2dnbGU9Im1vZGFsIiBkYXRhLXRhcmdldD0iI21vZGFsX2JhY2tkcm9wX3Rlc3QiPk5vIGJhY2tkcm9wIG1vZGFsPC9idXR0b24+CjxidXR0b24gdHlwZT0iYnV0dG9uIiBjbGFzcz0iYnRuIGJ0bi1saWdodCBtYi0xIiBkYXRhLXRvZ2dsZT0ibW9kYWwiIGRhdGEtdGFyZ2V0PSIjbW9kYWxfa2V5Ym9hcmRfdGVzdCI+Tm8ga2V5Ym9hcmQgaW50ZXJhY3Rpb24gbW9kYWw8L2J1dHRvbj4KPGJ1dHRvbiB0eXBlPSJidXR0b24iIGNsYXNzPSJidG4gYnRuLWxpZ2h0IG1iLTEiIGRhdGEtdG9nZ2xlPSJtb2RhbCIgZGF0YS10YXJnZXQ9IiNtb2RhbF9ub19hbmltYXRpb25fdGVzdCI+Tm8gYW5pbWF0aW9uIG1vZGFsPC9idXR0b24+CgpATGltaXRsZXNzOjpEaXZpZGVyCgovLyBNb2RhbCBldmVudCBidXR0b25zCjxidXR0b24gdHlwZT0iYnV0dG9uIiBjbGFzcz0iYnRuIGJ0bi1saWdodCBtYi0xIiBkYXRhLXRvZ2dsZT0ibW9kYWwiIGRhdGEtdGFyZ2V0PSIjbW9kYWxfb25zaG93Ij5GaXJlIG1vZGFsIGV2ZW50IG9uU2hvdzwvYnV0dG9uPgo8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgY2xhc3M9ImJ0biBidG4tbGlnaHQgbWItMSIgZGF0YS10b2dnbGU9Im1vZGFsIiBkYXRhLXRhcmdldD0iI21vZGFsX29uc2hvd24iPkZpcmUgbW9kYWwgZXZlbnQgb25TaG93bjwvYnV0dG9uPgo8YnV0dG9uIHR5cGU9ImJ1dHRvbiIgY2xhc3M9ImJ0biBidG4tbGlnaHQgbWItMSIgZGF0YS10b2dnbGU9Im1vZGFsIiBkYXRhLXRhcmdldD0iI21vZGFsX29uaGlkZSI+RmlyZSBtb2RhbCBldmVudCBvbkhpZGU8L2J1dHRvbj4KPGJ1dHRvbiB0eXBlPSJidXR0b24iIGNsYXNzPSJidG4gYnRuLWxpZ2h0IG1iLTEiIGRhdGEtdG9nZ2xlPSJtb2RhbCIgZGF0YS10YXJnZXQ9IiNtb2RhbF9vbmhpZGRlbiI+RmlyZSBtb2RhbCBldmVudCBvbkhpZGRlbjwvYnV0dG9uPgoKCi8vIEVWRU5UUwoKJChkb2N1bWVudCkucmVhZHkoZnVuY3Rpb24oKSB7CgogICAgLy8gb25TaG93IGNhbGxiYWNrCiAgICAkKCcjbW9kYWxfb25zaG93Jykub24oJ3Nob3cuYnMubW9kYWwnLCBmdW5jdGlvbigpIHsKICAgICAgICBhbGVydCgnb25TaG93IGNhbGxiYWNrIGZpcmVkLicpCiAgICB9KTsKCiAgICAvLyBvblNob3duIGNhbGxiYWNrCiAgICAkKCcjbW9kYWxfb25zaG93bicpLm9uKCdzaG93bi5icy5tb2RhbCcsIGZ1bmN0aW9uKCkgewogICAgICAgIGFsZXJ0KCdvblNob3duIGNhbGxiYWNrIGZpcmVkLicpCiAgICB9KTsKCiAgICAvLyBvbkhpZGUgY2FsbGJhY2sKICAgICQoJyNtb2RhbF9vbmhpZGUnKS5vbignaGlkZS5icy5tb2RhbCcsIGZ1bmN0aW9uKCkgewogICAgICAgIGFsZXJ0KCdvbkhpZGUgY2FsbGJhY2sgZmlyZWQuJykKICAgIH0pOwoKICAgIC8vIG9uSGlkZGVuIGNhbGxiYWNrCiAgICAkKCcjbW9kYWxfb25oaWRkZW4nKS5vbignaGlkZGVuLmJzLm1vZGFsJywgZnVuY3Rpb24oKSB7CiAgICAgICAgYWxlcnQoJ29uSGlkZGVuIGNhbGxiYWNrIGZpcmVkLicpCiAgICB9KTsKCn0p");
     @endphp
 
     {{-- Sample Code --}}

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