Refactor pages for wire:navigate

resources/ckeditor/ckeditor.js

@@ -2,7 +2,7 @@
 Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
 For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license/
 */
-(function(){if(window.CKEDITOR&&window.CKEDITOR.dom)return;window.CKEDITOR||(window.CKEDITOR=function(){var a=/(^|.*[\\\/])ckeditor\.js(?:\?.*|;.*)?$/i,d={timestamp:"M2G9",version:"4.18.0",revision:"5fe059002f3",rnd:Math.floor(900*Math.random())+100,_:{pending:[],basePathSrcPattern:a},status:"unloaded",basePath:function(){var b=window.CKEDITOR_BASEPATH||"";if(!b)for(var c=document.getElementsByTagName("script"),d=0;d<c.length;d++){var h=c[d].src.match(a);if(h){b=h[1];break}}-1==b.indexOf(":/")&&"//"!=b.slice(0,2)&&(b=0===b.indexOf("/")?location.href.match(/^.*?:\/\/[^\/]*/)[0]+
+(function(){/*if(window.CKEDITOR&&window.CKEDITOR.dom)return;*/window.CKEDITOR||(window.CKEDITOR=function(){var a=/(^|.*[\\\/])ckeditor\.js(?:\?.*|;.*)?$/i,d={timestamp:"M2G9",version:"4.18.0",revision:"5fe059002f3",rnd:Math.floor(900*Math.random())+100,_:{pending:[],basePathSrcPattern:a},status:"unloaded",basePath:function(){var b=window.CKEDITOR_BASEPATH||"";if(!b)for(var c=document.getElementsByTagName("script"),d=0;d<c.length;d++){var h=c[d].src.match(a);if(h){b=h[1];break}}-1==b.indexOf(":/")&&"//"!=b.slice(0,2)&&(b=0===b.indexOf("/")?location.href.match(/^.*?:\/\/[^\/]*/)[0]+
 b:location.href.match(/^[^\?]*\/(?:)/)[0]+b);if(!b)throw'The CKEditor installation path could not be automatically detected. Please set the global variable "CKEDITOR_BASEPATH" before creating editor instances.';return b}(),getUrl:function(a){-1==a.indexOf(":/")&&0!==a.indexOf("/")&&(a=this.basePath+a);return a=this.appendTimestamp(a)},appendTimestamp:function(a){if(!this.timestamp||"/"===a.charAt(a.length-1)||/[&?]t=/.test(a))return a;var b=0<=a.indexOf("?")?"\x26":"?";return a+b+"t\x3d"+this.timestamp},
 domReady:function(){function a(){try{document.addEventListener?(document.removeEventListener("DOMContentLoaded",a,!1),window.removeEventListener("load",a,!1),b()):document.attachEvent&&"complete"===document.readyState&&(document.detachEvent("onreadystatechange",a),window.detachEvent("onload",a),b())}catch(c){}}function b(){for(var a;a=c.shift();)a()}var c=[];return function(b){function e(){try{document.documentElement.doScroll("left")}catch(b){setTimeout(e,1);return}a()}c.push(b);"complete"===document.readyState&&
 setTimeout(a,1);if(1==c.length)if(document.addEventListener)document.addEventListener("DOMContentLoaded",a,!1),window.addEventListener("load",a,!1);else if(document.attachEvent){document.attachEvent("onreadystatechange",a);window.attachEvent("onload",a);b=!1;try{b=!window.frameElement}catch(d){}document.documentElement.doScroll&&b&&e()}}}()},b=window.CKEDITOR_GETURL;if(b){var c=d.getUrl;d.getUrl=function(a){return b.call(d,a)||c.call(d,a)}}return d}());

resources/views/components/config/advanced-config.blade.php

@@ -4,14 +4,21 @@
     <div class="form-group">
         <label>{{ __('messages.Advanced Configuration file.') }}</label>
         <textarea style="width:100%;display:none;" class="form-control" name="AdvancedConfig" rows="280">{{ file_get_contents('config/advanced-config.php') }}</textarea>
-    <div id="editor" style="width:100%; height:<?php echo count(file('config/advanced-config.php')) * 24 + 15;?>px; background-color:transparent !important;" class="form-control border-1 border-light" name="AdvancedConfig" rows="280">{{ file_get_contents('config/advanced-config.php') }}</div>
+        <div id="editor" style="width:100%; height:<?php echo count(file('config/advanced-config.php')) * 24 + 15; ?>px; background-color:transparent !important;"
+            class="form-control border-1 border-light" name="AdvancedConfig" rows="280">
+            {{ file_get_contents('config/advanced-config.php') }}</div>
     </div>
     <button type="submit" class="btn btn-primary" id="saveBtn">{{ __('messages.Save') }}</button>
-  <a class="btn btn-danger confirmation" href="#" id="restoreDefaultsBtn">{{__('messages.Restore defaults')}}</a>
+    <a class="btn btn-danger confirmation" href="#"
+        id="restoreDefaultsBtn">{{ __('messages.Restore defaults') }}</a>
 </form>
 
+@push('sidebar-stylesheets')
     <script src="{{ asset('assets/external-dependencies/ace.js') }}" type="text/javascript" charset="utf-8"></script>
+@endpush
+@push('sidebar-scripts')
     <script>
+        function performOperation() {
             var editor = ace.edit("editor");
 
             editor.getSession().on('change', function(e) {
@@ -25,11 +32,24 @@
                 var confirmationMessage = "Are you sure?";
 
                 if (isAdvancedConfig) {
-      $('#editForm').append('<input type="hidden" name="ResetAdvancedConfig" value="RESET_DEFAULTS">');
+                    $('#editForm').append(
+                        '<input type="hidden" name="ResetAdvancedConfig" value="RESET_DEFAULTS">');
                 }
 
                 if (confirm(confirmationMessage)) {
                     $('#editForm').submit();
                 }
             });
+        };
+
+        document.addEventListener('DOMContentLoaded', () => {
+            if (typeof Livewire === 'undefined') {
+                performOperation();
+            }
+        });
+
+        document.addEventListener('livewire:navigated', () => {
+            performOperation();
+        });
     </script>
+@endpush

resources/views/layouts/sidebar.blade.php

@@ -94,6 +94,78 @@
 
 <!-- App Script -->
 <script src="{{ asset('assets/js/hope-ui.js') }}" defer></script>
+
+
+    <!-- External Library Bundle Script -->
+    <script src="{{ asset('assets/js/core/external.min.js') }}"></script>
+
+    <!-- Widgetchart Script -->
+    <script src="{{ asset('assets/js/charts/widgetcharts.js') }}"></script>
+
+    <!-- mapchart Script -->
+    <script src="{{ asset('assets/js/charts/vectore-chart.js') }}"></script>
+    <script src="{{ asset('assets/js/charts/dashboard.js') }}"></script>
+
+    <!-- fslightbox Script -->
+    <script src="{{ asset('assets/js/plugins/fslightbox.js') }}"></script>
+
+    <!-- Slider-tab Script -->
+    {{-- <script src="{{ asset('assets/js/plugins/slider-tabs.js') }}"></script> --}}
+
+    <!-- Form Wizard Script -->
+    <script src="{{ asset('assets/js/plugins/form-wizard.js') }}"></script>
+
+    <!-- AOS Animation Plugin-->
+    <script src="{{ asset('assets/vendor/aos/dist/aos.js') }}"></script>
+
+    <!-- Flatpickr Script -->
+    {{-- <script src="{{ asset('assets/vendor/flatpickr/dist/flatpickr.min.js') }}"></script>
+    <script src="{{ asset('assets/js/plugins/flatpickr.js') }}" defer></script> --}}
+
+    <script src="{{ asset('assets/js/plugins/prism.mini.js') }}"></script>
+
+    <!-- Share Button -->
+    <script>
+        // Get a reference to all buttons with the class "share-button"
+        var shareButtons = document.querySelectorAll('.share-button');
+
+        // Add a click event listener to each button
+        shareButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                // Get the value to share/copy from the "data-share" attribute
+                var valueToShare = button.dataset.share;
+
+                // Check if the Web Share API is supported
+                if (navigator.share) {
+                    // Call the Web Share API to open the native share dialog
+                    navigator.share({
+                            title: '{{ __('messages.Share your profile') }}',
+                            text: valueToShare,
+                            url: valueToShare,
+                        })
+                        .catch(err => console.error('{{ __('messages.Error sharing:') }}', err));
+                } else {
+                    // If the Web Share API is not supported, copy the value to the clipboard
+                    navigator.clipboard.writeText(valueToShare)
+                        .then(() => {
+                            // If copying was successful, alert the user
+                            alert('{{ __('messages.Text copied to clipboard!') }}');
+                        })
+                        .catch(err => {
+                            // If copying failed, alert the user
+                            alert('{{ __('messages.Error copying text:') }}', err);
+                        });
+                }
+            });
+        });
+    </script>
+
+    <script src="{{ asset('assets/js/popper.js') }}"></script>
+    <script src="{{ asset('assets/js/bootstrap.min.js') }}"></script>
+    <script src="{{ asset('assets/js/Sortable.min.js') }}"></script>
+    <script src="{{ asset('assets/js/jquery-block-ui.js') }}"></script>
+    <script src="{{ asset('assets/js/main-dashboard.js') }}"></script>
+    <script src="{{ asset('assets/vendor/livewire/core.min.js') }}"></script>
 </head>
 <body class="{{$_COOKIE['color-mode'] ?? 'auto'}}">
     {{-- <!-- loader Start -->
@@ -224,7 +296,7 @@
                                 </li>
                                 <li class="nav-item">
                                     <a class="nav-link {{ Request::segment(2) == 'users' ? 'active' : '' }}"
-                                        href="{{ url('admin/users/all') }}" wire:current="active" wire:navigate>
+                                        href="{{ url('admin/users') }}" wire:current="active" wire:navigate>
                                         <i class="bi bi-people-fill"></i>
                                         <span class="item-name">{{ __('messages.Manage Users') }}</span>
                                     </a>
@@ -1163,81 +1235,13 @@ MODAL; // <-- Indentation breaks my code editor :/
         });
     </script> --}}
     
-    <!-- External Library Bundle Script -->
-    <script src="{{ asset('assets/js/core/external.min.js') }}"></script>
-
-    <!-- Widgetchart Script -->
-    <script src="{{ asset('assets/js/charts/widgetcharts.js') }}"></script>
-
-    <!-- mapchart Script -->
-    <script src="{{ asset('assets/js/charts/vectore-chart.js') }}"></script>
-    <script src="{{ asset('assets/js/charts/dashboard.js') }}"></script>
-
-    <!-- fslightbox Script -->
-    <script src="{{ asset('assets/js/plugins/fslightbox.js') }}"></script>
-
     <!-- Settings Script -->
     <script src="{{ asset('assets/js/plugins/setting.js') }}"></script>
 
-    <!-- Slider-tab Script -->
-    {{-- <script src="{{ asset('assets/js/plugins/slider-tabs.js') }}"></script> --}}
-
-    <!-- Form Wizard Script -->
-    <script src="{{ asset('assets/js/plugins/form-wizard.js') }}"></script>
-
-    <!-- AOS Animation Plugin-->
-    <script src="{{ asset('assets/vendor/aos/dist/aos.js') }}"></script>
-
-    <!-- Flatpickr Script -->
-    {{-- <script src="{{ asset('assets/vendor/flatpickr/dist/flatpickr.min.js') }}"></script>
-    <script src="{{ asset('assets/js/plugins/flatpickr.js') }}" defer></script> --}}
-
-    <script src="{{ asset('assets/js/plugins/prism.mini.js') }}"></script>
-
-    <!-- Share Button -->
-    <script>
-        // Get a reference to all buttons with the class "share-button"
-        var shareButtons = document.querySelectorAll('.share-button');
-
-        // Add a click event listener to each button
-        shareButtons.forEach(button => {
-            button.addEventListener('click', () => {
-                // Get the value to share/copy from the "data-share" attribute
-                var valueToShare = button.dataset.share;
-
-                // Check if the Web Share API is supported
-                if (navigator.share) {
-                    // Call the Web Share API to open the native share dialog
-                    navigator.share({
-                            title: '{{ __('messages.Share your profile') }}',
-                            text: valueToShare,
-                            url: valueToShare,
-                        })
-                        .catch(err => console.error('{{ __('messages.Error sharing:') }}', err));
-                } else {
-                    // If the Web Share API is not supported, copy the value to the clipboard
-                    navigator.clipboard.writeText(valueToShare)
-                        .then(() => {
-                            // If copying was successful, alert the user
-                            alert('{{ __('messages.Text copied to clipboard!') }}');
-                        })
-                        .catch(err => {
-                            // If copying failed, alert the user
-                            alert('{{ __('messages.Error copying text:') }}', err);
-                        });
-                }
-            });
-        });
-    </script>
-
-    <script src="{{ asset('assets/js/popper.js') }}"></script>
-    <script src="{{ asset('assets/js/bootstrap.min.js') }}"></script>
-    <script src="{{ asset('assets/js/Sortable.min.js') }}"></script>
-    <script src="{{ asset('assets/js/jquery-block-ui.js') }}"></script>
-    <script src="{{ asset('assets/js/main-dashboard.js') }}"></script>
-
     @stack('sidebar-scripts')
 
+    {{-- <script src="{{ asset('assets/js/detect-dark-mode.js') }}"></script> --}}
+
     <script>
     document.addEventListener('livewire:navigated', () => {
         var collapseElement = document.getElementById("admin-section");

resources/views/panel/users.blade.php

@@ -124,13 +124,17 @@
     </div>
 
     @push('sidebar-stylesheets')
-        {{-- @livewireStyles --}}
+        @if(false)
+            @livewireStyles
+        @endif
         <link rel="stylesheet" href="{{ asset('assets/vendor/livewire/core.min.css') }}" />
     @endpush
 
     @push('sidebar-scripts')
-        {{-- <script src="{{ asset('assets/vendor/livewire/livewire.js') }}" data-update-uri="/livewire/update" data-navigate-once="true"></script> --}}
+        @if(false)
+            @livewireScripts
             <script src="{{ asset('assets/vendor/livewire/core.min.js') }}"></script>
+        @endif
         <script src="{{ asset('assets/external-dependencies/sweetalert2.min.js') }}"></script>
         <script type="text/javascript">
             // Function to confirm and delete users

resources/views/studio/links.blade.php

@@ -344,7 +344,22 @@ if (isset($_COOKIE['LinkCount'])) {
       </div>
     </div>
 
-<script src="{{ asset('assets/external-dependencies/jquery-1.12.4.min.js') }}"></script>
+    <script type="text/javascript">
-<script type="text/javascript">$("iframe").load(function() { $("iframe").contents().find("a").each(function(index) { $(this).on("click", function(event) { event.preventDefault(); event.stopPropagation(); }); }); });</script>
+        const iframes = ['frPreview1', 'frPreview2'];
         
+        iframes.forEach(id => {
+            const iframe = document.getElementById(id);
+        
+            iframe.onload = function() {
+                const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
+                const style = document.createElement('style');
+                style.innerHTML = `
+                    * {
+                        pointer-events: none !important;
+                    }
+                `;
+                iframeDocument.head.appendChild(style);
+            };
+        });
+        </script>
 @endsection

resources/views/studio/page.blade.php

@@ -23,10 +23,10 @@
                                         max-width: 80%;
                                         margin: 20px auto;
                                     }
-                
                                 </style>
                                 <style>
                                     @supports (-webkit-appearance: none) or (-moz-appearance: none) {
+
                                         input[type=checkbox],
                                         input[type=radio] {
                                             --active: var(--bs-primary);
@@ -50,6 +50,7 @@
                                             background: var(--b, var(--background));
                                             transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
                                         }
+
                                         input[type=checkbox]:after,
                                         input[type=radio]:after {
                                             content: "";
@@ -59,6 +60,7 @@
                                             position: absolute;
                                             transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
                                         }
+
                                         input[type=checkbox]:checked,
                                         input[type=radio]:checked {
                                             --b: var(--active);
@@ -67,41 +69,50 @@
                                             --d-t: .6s;
                                             --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
                                         }
+
                                         input[type=checkbox]:disabled,
                                         input[type=radio]:disabled {
                                             --b: var(--disabled);
                                             cursor: not-allowed;
                                             opacity: 0.9;
                                         }
+
                                         input[type=checkbox]:disabled:checked,
                                         input[type=radio]:disabled:checked {
                                             --b: var(--disabled-inner);
                                             --bc: var(--border);
                                         }
+
                                         input[type=checkbox]:disabled+label,
                                         input[type=radio]:disabled+label {
                                             cursor: not-allowed;
                                         }
+
                                         input[type=checkbox]:hover:not(:checked):not(:disabled),
                                         input[type=radio]:hover:not(:checked):not(:disabled) {
                                             --bc: var(--border-hover);
                                         }
+
                                         input[type=checkbox]:focus,
                                         input[type=radio]:focus {
                                             box-shadow: 0 0 0 var(--focus);
                                         }
+
                                         input[type=checkbox]:not(.switch),
                                         input[type=radio]:not(.switch) {
                                             width: 21px;
                                         }
+
                                         input[type=checkbox]:not(.switch):after,
                                         input[type=radio]:not(.switch):after {
                                             opacity: var(--o, 0);
                                         }
+
                                         input[type=checkbox]:not(.switch):checked,
                                         input[type=radio]:not(.switch):checked {
                                             --o: 1;
                                         }
+
                                         input[type=checkbox]+label,
                                         input[type=radio]+label {
                                             font-size: 14px;
@@ -115,6 +126,7 @@
                                         input[type=checkbox]:not(.switch) {
                                             border-radius: 7px;
                                         }
+
                                         input[type=checkbox]:not(.switch):after {
                                             width: 5px;
                                             height: 9px;
@@ -125,13 +137,16 @@
                                             top: 4px;
                                             transform: rotate(var(--r, 20deg));
                                         }
+
                                         input[type=checkbox]:not(.switch):checked {
                                             --r: 43deg;
                                         }
+
                                         input[type=checkbox].switch {
                                             width: 38px;
                                             border-radius: 11px;
                                         }
+
                                         input[type=checkbox].switch:after {
                                             left: 2px;
                                             top: 2px;
@@ -141,10 +156,12 @@
                                             background: var(--ab, var(--border));
                                             transform: translateX(var(--x, 0));
                                         }
+
                                         input[type=checkbox].switch:checked {
                                             --ab: var(--active-inner);
                                             --x: 17px;
                                         }
+
                                         input[type=checkbox].switch:disabled:not(:checked):after {
                                             opacity: 0.6;
                                         }
@@ -152,6 +169,7 @@
                                         input[type=radio] {
                                             border-radius: 50%;
                                         }
+
                                         input[type=radio]:after {
                                             width: 19px;
                                             height: 19px;
@@ -160,40 +178,54 @@
                                             opacity: 0;
                                             transform: scale(var(--s, 0.7));
                                         }
+
                                         input[type=radio]:checked {
                                             --s: .5;
                                         }
                                     }
+
                                     .txt-label {
                                         color: white;
                                         padding-left: 5px;
                                         font-size: 200%;
                                         position: relative;
                                     }
+
                                     .toggle-btn {
                                         padding-left: 20px;
                                     }
+
                                     .ch2 {
                                         padding-top: 60px;
                                     }
                                 </style>
                                 <div class="profile-img position-relative me-3 mb-3 mb-lg-0 profile-logo profile-logo1">
                                     @if (file_exists(base_path(findAvatar(Auth::user()->id))))
-                  <img src="{{ url(findAvatar(Auth::user()->id)) }}" class="img-fluid rounded-pill avatar-100 bg-white" width="100" height="100" draggable="false" style="object-fit:cover;">
+                                        <img src="{{ url(findAvatar(Auth::user()->id)) }}"
-                  @elseif(file_exists(base_path("assets/linkstack/images/").findFile('avatar')))
+                                            class="img-fluid rounded-pill avatar-100 bg-white" width="100" height="100"
-                  <img src="{{ url("assets/linkstack/images/")."/".findFile('avatar') }}" class="img-fluid rounded-pill avatar-100 bg-white" width="100" height="100" draggable="false">
+                                            draggable="false" style="object-fit:cover;">
+                                    @elseif(file_exists(base_path('assets/linkstack/images/') . findFile('avatar')))
+                                        <img src="{{ url('assets/linkstack/images/') . '/' . findFile('avatar') }}"
+                                            class="img-fluid rounded-pill avatar-100 bg-white" width="100" height="100"
+                                            draggable="false">
                                     @else
-                  <img src="{{ asset('assets/linkstack/images/logo.svg') }}" class="img-fluid rounded-pill avatar-100 bg-white" width="100" height="100" draggable="false">
+                                        <img src="{{ asset('assets/linkstack/images/logo.svg') }}"
+                                            class="img-fluid rounded-pill avatar-100 bg-white" width="100" height="100"
+                                            draggable="false">
                                     @endif
                                     @if (file_exists(base_path(findAvatar(Auth::user()->id))))
                                         <div class="upload-icone bg-primary">
-                    <a href="{{ route('delProfilePicture') }}" style="top:1px;position:relative;" data-bs-toggle="tooltip" data-bs-placement="right" title="Delete profile picture"><i class="bi bi-trash-fill text-white"></i></a>
+                                            <a href="{{ route('delProfilePicture') }}" style="top:1px;position:relative;"
+                                                data-bs-toggle="tooltip" data-bs-placement="right"
+                                                title="Delete profile picture"><i
+                                                    class="bi bi-trash-fill text-white"></i></a>
                                             <input class="file-upload" type="file" accept="image/*">
                                         </div>
                                     @endif
                                 </div>
                                 <section class='text-gray-400'>
-                <h3 class="mb-4 card-header"><i class="bi bi-file-earmark-break"> {{__('messages.My Profile')}}</i></h3>
+                                    <h3 class="mb-4 card-header"><i class="bi bi-file-earmark-break">
+                                            {{ __('messages.My Profile') }}</i></h3>
                                     @if ($errors->any())
                                         <div class="alert alert-danger d-flex align-items-center" role="alert">
                                             <svg class="bi flex-shrink-0 me-2" width="24" height="24">
@@ -210,12 +242,16 @@
 
                                         <div></div>
                                         @foreach ($pages as $page)
-                <form action="{{ route('editPage') }}" enctype="multipart/form-data" method="post">
+                                            <form action="{{ route('editPage') }}" enctype="multipart/form-data"
+                                                method="post">
                                                 @csrf
                                                 @if ($page->littlelink_name != '')
                                                     <div class="form-group col-lg-8">
-                      <label class="form-label" for="customFile">{{__('messages.Profile Picture')}}</label>
+                                                        <label class="form-label"
-                      <input type="file" accept="image/jpeg,image/jpg,image/png,image/webp" name="image" class="form-control" id="customFile">
+                                                            for="customFile">{{ __('messages.Profile Picture') }}</label>
+                                                        <input type="file"
+                                                            accept="image/jpeg,image/jpg,image/png,image/webp"
+                                                            name="image" class="form-control" id="customFile">
                                                     </div>
                                                 @endif
 
@@ -227,22 +263,33 @@
                                                 <div class="form-group col-lg-8">
                                                     <?php
                                                     $url = $_SERVER['REQUEST_URI'];
-                             if( strpos( $url, "no_page_name" ) == true ) echo '<span style="color:#FF0000; font-size:120%;">You do not have a Page URL</span>'; ?>
+                                                    if (strpos($url, 'no_page_name') == true) {
+                                                        echo '<span style="color:#FF0000; font-size:120%;">You do not have a Page URL</span>';
+                                                    } ?>
                                                     <br>
-                        <label for="littlelink_name" class="form-label">{{__('messages.Page URL')}}</label>
+                                                    <label for="littlelink_name"
+                                                        class="form-label">{{ __('messages.Page URL') }}</label>
                                                     <div class="input-group mb-3 has-validation">
-                          <span class="input-group-text" id="basic-addon3">{{str_replace(['http://', 'https://'], '', url(''))}}/@</span>
+                                                        <span class="input-group-text"
-                          <input type="littlelink_name" class="form-control" id="littlelink_name" name="littlelink_name" aria-describedby="littlelink_name" value="{{ $page->littlelink_name ?? '' }}" :value="old('littlelink_name')" required autofocus >
+                                                            id="basic-addon3">{{ str_replace(['http://', 'https://'], '', url('')) }}/@</span>
+                                                        <input type="littlelink_name" class="form-control"
+                                                            id="littlelink_name" name="littlelink_name"
+                                                            aria-describedby="littlelink_name"
+                                                            value="{{ $page->littlelink_name ?? '' }}" required autofocus>
                                                     </div>
-                        <script>var exceptionvar = value="{{ $page->littlelink_name }}";</script>
+                                                    <script>
+                                                        var exceptionvar = value = "{{ $page->littlelink_name }}";
+                                                    </script>
                                                     @include('auth.url-validation')
 
-                         <label style="margin-top:15px">{{__('messages.Display name')}}</label>
+                                                    <label
+                                                        style="margin-top:15px">{{ __('messages.Display name') }}</label>
                                                     <div class="input-group">
                                                         {{-- <div class="input-group-prepend">
                                 <div class="input-group-text">{{__('messages.Name')}}</div>
                             </div> --}}
-                            <input type="text" class="form-control" name="name" value="{{ $page->name }}" required>
+                                                        <input type="text" class="form-control" name="name"
+                                                            value="{{ $page->name }}" required>
                                                     </div>
                                                 </div>
 
@@ -253,11 +300,16 @@
 
                                                 @if (auth()->user()->role == 'admin' || auth()->user()->role == 'vip')
                                                     <div class="form-group col-lg-8">
-                        <h5 style="margin-top:50px"> {{__('messages.Show checkmark')}}</h5>
+                                                        <h5 style="margin-top:50px"> {{ __('messages.Show checkmark') }}
+                                                        </h5>
                                                         <p class="text-muted">{{ __('messages.disableverified') }}</p>
                                                         <div class="mb-3 form-check form-switch">
-                            <input name="checkmark" class="switch toggle-btn" type="checkbox" id="checkmark" <?php if(UserData::getData(Auth::user()->id, 'checkmark') == true){echo 'checked';} ?> />
+                                                            <input name="checkmark" class="switch toggle-btn"
-                            <label class="form-check-label" for="checkmark">{{__('messages.Enable')}}</label>
+                                                                type="checkbox" id="checkmark" <?php if (UserData::getData(Auth::user()->id, 'checkmark') == true) {
+                                                                    echo 'checked';
+                                                                } ?> />
+                                                            <label class="form-check-label"
+                                                                for="checkmark">{{ __('messages.Enable') }}</label>
                                                         </div>
                                                         <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                                 @endif
@@ -267,24 +319,36 @@
                                             <h5 style="margin-top:50px">{{ __('messages.Show share button') }}</h5>
                                             <p class="text-muted">{{ __('messages.disablesharebutton') }}</p>
                                             <div class="mb-3 form-check form-switch">
-                          <input name="sharebtn" class="switch toggle-btn" type="checkbox" id="sharebtn" <?php if(UserData::getData(Auth::user()->id, 'disable-sharebtn') != "true"){echo 'checked';} ?> />
+                                                <input name="sharebtn" class="switch toggle-btn" type="checkbox"
-                          <label class="form-check-label" for="sharebtn">{{__('messages.Enable')}}</label>
+                                                    id="sharebtn" <?php if (UserData::getData(Auth::user()->id, 'disable-sharebtn') != 'true') {
+                                                        echo 'checked';
+                                                    } ?> />
+                                                <label class="form-check-label"
+                                                    for="sharebtn">{{ __('messages.Enable') }}</label>
                                             </div>
 
                                             <div class="form-group col-lg-8">
-                          <h5 style="margin-top:50px">{{__('messages.Open links in new tab')}}</h5>
+                                                <h5 style="margin-top:50px">{{ __('messages.Open links in new tab') }}
+                                                </h5>
                                                 <p class="text-muted">{{ __('messages.openlinksnewtab') }}</p>
                                                 <div class="mb-3 form-check form-switch">
-                              <input name="tablinks" class="switch toggle-btn" type="checkbox" id="tablinks" <?php if(UserData::getData(Auth::user()->id, 'links-new-tab') != false){echo 'checked';} ?> />
+                                                    <input name="tablinks" class="switch toggle-btn" type="checkbox"
-                              <label class="form-check-label" for="tablinks">{{__('messages.Enable')}}</label>
+                                                        id="tablinks" <?php if (UserData::getData(Auth::user()->id, 'links-new-tab') != false) {
+                                                            echo 'checked';
+                                                        } ?> />
+                                                    <label class="form-check-label"
+                                                        for="tablinks">{{ __('messages.Enable') }}</label>
                                                 </div>
 
-                    <button id="submit-btn" type="submit" class="mt-3 ml-3 btn btn-primary">{{__('messages.Save')}}</button>
+                                                <button id="submit-btn" type="submit"
+                                                    class="mt-3 ml-3 btn btn-primary">{{ __('messages.Save') }}</button>
                                                 </form>
 
                                                 @if (env('ALLOW_USER_HTML') === true)
+                                                    @push('sidebar-stylesheets')
                                                         <script src="{{ asset('assets/external-dependencies/ckeditor.js') }}"></script>
                                                         <script>
+                                                            function performOperation() {
                                                                 ClassicEditor
                                                                     .create(document.querySelector('.ckeditor'), {
                                                                         toolbar: {
@@ -292,7 +356,8 @@
                                                                                 'exportPDF', 'exportWord', '|',
                                                                                 'findAndReplace', 'selectAll', '|',
                                                                                 'heading', '|',
-                                  'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'removeFormat', '|',
+                                                                                'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript',
+                                                                                'removeFormat', '|',
                                                                                 'bulletedList', 'numberedList', 'todoList', '|',
                                                                                 'outdent', 'indent', '|',
                                                                                 'undo', 'redo',
@@ -340,8 +405,19 @@
                                                                     .catch(error => {
                                                                         console.error(error);
                                                                     });
-              </script>
+                                                            }
 
+                                                            document.addEventListener('DOMContentLoaded', () => {
+                                                                if (typeof Livewire === 'undefined') {
+                                                                    performOperation();
+                                                                }
+                                                            });
+
+                                                            document.addEventListener('livewire:navigated', () => {
+                                                                performOperation();
+                                                            });
+                                                        </script>
+                                                    @endpush
                                                 @endif
                                             </div>
 

resources/views/studio/theme.blade.php

@@ -1,7 +1,6 @@
 @extends('layouts.sidebar')
 
 @section('content')
-
     <div class="conatiner-fluid content-inner mt-n5 py-0">
         <div class="row">
 
@@ -12,9 +11,9 @@
                             <div class="col-sm-12">
 
                                 @foreach ($pages as $page)
-
                                     <section class='text-gray-400'>
-                    <h3 class="mb-4 card-header"><i class="bi bi-brush">{{__('messages.Select a theme')}}</i></h3>
+                                        <h3 class="mb-4 card-header"><i
+                                                class="bi bi-brush">{{ __('messages.Select a theme') }}</i></h3>
                                         <div>
 
                                             @if ($errors->any())
@@ -30,7 +29,8 @@
                                                 </div>
                                             @endif
 
-                        <button type="button" class="btn btn-primary mb-5" data-bs-toggle="modal" data-bs-target="#exampleModal">
+                                            <button type="button" class="btn btn-primary mb-5" data-bs-toggle="modal"
+                                                data-bs-target="#exampleModal">
                                                 {{ __('messages.Select theme') }}
                                             </button>
 
@@ -38,17 +38,25 @@
                                             <div>
 
                                                 <div style="max-width:1000px" class="col-md-12">
-                            <div class="card rounded shadow-lg bg-light aos-init aos-animate" data-aos="fade-up" data-aos-delay="800">
+                                                    <div class="card rounded shadow-lg bg-light aos-init aos-animate"
-                              <div class="flex-wrap card-header d-flex justify-content-between align-items-center bg-light">
+                                                        data-aos="fade-up" data-aos-delay="800">
+                                                        <div
+                                                            class="flex-wrap card-header d-flex justify-content-between align-items-center bg-light">
                                                             <div class="header-title">
                                                                 <h4 class="card-title">{{ __('messages.Preview') }}</h4>
                                                             </div>
                                                         </div>
                                                         <div class="card-body">
                                                             @if (env('USE_THEME_PREVIEW_IFRAME') === false or $page->littlelink_name == '')
-                                <center><img style="width:95%;max-width:700px;argin-left:1rem!important;" src="@if(file_exists(base_path() . '/themes/' . $page->theme . '/preview.png')){{url('/themes/' . $page->theme . '/preview.png')}}@elseif($page->theme === 'default' or empty($page->theme)){{url('/assets/linkstack/images/themes/default.png')}}@else{{url('/assets/linkstack/images/themes/no-preview.png')}}@endif"></img></center>
+                                                                <center><img
+                                                                        style="width:95%;max-width:700px;argin-left:1rem!important;"
+                                                                        src="@if (file_exists(base_path() . '/themes/' . $page->theme . '/preview.png')) {{ url('/themes/' . $page->theme . '/preview.png') }}@elseif($page->theme === 'default' or empty($page->theme)){{ url('/assets/linkstack/images/themes/default.png') }}@else{{ url('/assets/linkstack/images/themes/no-preview.png') }} @endif"></img>
+                                                                </center>
                                                             @else
-                                <iframe frameborder="0" allowtransparency="true" id="frPreview" style="background: #FFFFFF;height:400px;" class='w-100' src="{{ url('') }}/@<?= Auth::user()->littlelink_name ?>">{{__('messages.No compatible browser')}}</iframe>
+                                                                <iframe frameborder="0" allowtransparency="true"
+                                                                    id="frPreview" style="background: #FFFFFF;height:400px;"
+                                                                    class='w-100'
+                                                                    src="{{ url('') }}/@<?= Auth::user()->littlelink_name ?>">{{ __('messages.No compatible browser') }}</iframe>
                                                             @endif
                                                         </div>
                                                     </div>
@@ -68,7 +76,8 @@
                         <div class="row">
                             <div class="col-sm-12">
                                 @if (env('ALLOW_CUSTOM_BACKGROUNDS') == true)
-                    <form action="{{ route('themeBackground') }}" enctype="multipart/form-data" method="post">
+                                    <form action="{{ route('themeBackground') }}" enctype="multipart/form-data"
+                                        method="post">
                                         @csrf
                                         <h3 class="mb-4 card-header">{{ __('messages.Custom background') }}</h3>
                                         <div style="display: none;" class="form-group col-lg-8">
@@ -79,15 +88,27 @@
                                         </div>
                                         <div class="form-group col-lg-8">
                                             <figure style="max-width:1000px;max-height:562.5px;" class="figure">
-                            @if(!file_exists(base_path('assets/img/background-img/'.findBackground(Auth::user()->id))))<p><i>{{__('messages.No image selected')}}</i></p>@endif
+                                                @if (!file_exists(base_path('assets/img/background-img/' . findBackground(Auth::user()->id))))
-                            <img class="bd-placeholder-img figure-img img-fluid rounded" src="@if(file_exists(base_path('assets/img/background-img/'.findBackground(Auth::user()->id)))){{url('assets//img/background-img/'.findBackground(Auth::user()->id))}}@else{{url('/assets/linkstack/images/themes/no-preview.png')}}@endif"><br>
+                                                    <p><i>{{ __('messages.No image selected') }}</i></p>
-                            @if(file_exists(base_path('assets/img/background-img/'.findBackground(Auth::user()->id))))<button class="mt-3 ml-3 btn btn-primary" style="background-color:tomato!important;border-color:tomato!important;transform: scale(.9);" title="Delete background image"><a href="{{ url('/studio/rem-background') }}" style="color:#FFFFFF;"><i class="bi bi-trash-fill"></i>{{__('messages.Remove background')}}</a></button><br>@endif
+                                                @endif
+                                                <img class="bd-placeholder-img figure-img img-fluid rounded"
+                                                    src="@if (file_exists(base_path('assets/img/background-img/' . findBackground(Auth::user()->id)))) {{ url('assets//img/background-img/' . findBackground(Auth::user()->id)) }}@else{{ url('/assets/linkstack/images/themes/no-preview.png') }} @endif"><br>
+                                                @if (file_exists(base_path('assets/img/background-img/' . findBackground(Auth::user()->id))))
+                                                    <button class="mt-3 ml-3 btn btn-primary"
+                                                        style="background-color:tomato!important;border-color:tomato!important;transform: scale(.9);"
+                                                        title="Delete background image"><a
+                                                            href="{{ url('/studio/rem-background') }}"
+                                                            style="color:#FFFFFF;"><i
+                                                                class="bi bi-trash-fill"></i>{{ __('messages.Remove background') }}</a></button><br>
+                                                @endif
                                                 {{-- <figcaption class="figure-caption">A caption for the above image.</figcaption> --}}
                                             </figure>
                                             <br>
                                             <br><br>
                                             <div class="mb-3">
-                                <input type="file" accept="image/jpeg,image/jpg,image/png,image/webp,image/gif" class="form-control form-control-lg" name="image"><br>
+                                                <input type="file"
+                                                    accept="image/jpeg,image/jpg,image/png,image/webp,image/gif"
+                                                    class="form-control form-control-lg" name="image"><br>
                                             </div>
                                         </div>
                                         <button type="submit" class="btn btn-primary">{{ __('messages.Apply') }}</button>
@@ -107,20 +128,23 @@
                                 <div class="col-sm-12">
                                     <h3 class="mb-4 card-header">{{ __('messages.Manage themes') }}</h3>
                                     @if (env('ENABLE_THEME_UPDATER') == 'true')
-                    
                                         <div id="ajax-container">
 
                                             <br><br><br>
                                             <div class="accordion">
                                                 <div class="accordion-item">
                                                     <h2 class="accordion-header" id="details-header">
-                                <button class="accordion-button collapsed disabled" type="button" aria-expanded="false" aria-controls="details-collapse">
+                                                        <button class="accordion-button collapsed disabled" type="button"
-                                    <div style="max-height:20px;max-width:20px;" class="spinner-border text-primary" role="status">
+                                                            aria-expanded="false" aria-controls="details-collapse">
-                                        <span class="visually-hidden">{{__('messages.Loading...')}}</span>
+                                                            <div style="max-height:20px;max-width:20px;"
+                                                                class="spinner-border text-primary" role="status">
+                                                                <span
+                                                                    class="visually-hidden">{{ __('messages.Loading...') }}</span>
                                                             </div>
                                                         </button>
                                                     </h2>
-                              <div id="details-collapse" class="accordion-collapse collapse" aria-labelledby="details-header">
+                                                    <div id="details-collapse" class="accordion-collapse collapse"
+                                                        aria-labelledby="details-header">
                                                         <div class="accordion-body"></div>
                                                     </div>
                                                 </div>
@@ -142,12 +166,18 @@
                                         </div>
                                         <div class="mb-3">
                                             <label>{{ __('messages.Upload themes') }}</label>
-                            <input type="file" accept=".zip" name="zip" class="form-control form-control-lg">
+                                            <input type="file" accept=".zip" name="zip"
+                                                class="form-control form-control-lg">
                                         </div><br><br>
                                         <div class="d-flex flex-column flex-md-row align-items-md-center">
-                            <button type="submit" class="btn btn-primary me-md-3 mb-3 mb-md-0">{{__('messages.Upload themes')}}</button>
+                                            <button type="submit"
-                            <button class="btn btn-danger me-md-3 mb-3 mb-md-0 delete-themes" title="Delete themes"><a href="{{ url('/admin/theme') }}" class="text-white">{{__('messages.Delete themes')}}</a></button>
+                                                class="btn btn-primary me-md-3 mb-3 mb-md-0">{{ __('messages.Upload themes') }}</button>
-                            <button class="btn btn-info download-themes" title="Download more themes"><a href="https://linkstack.org/themes/" target="_blank" class="text-white">{{__('messages.Download themes')}}</a></button>
+                                            <button class="btn btn-danger me-md-3 mb-3 mb-md-0 delete-themes"
+                                                title="Delete themes"><a href="{{ url('/admin/theme') }}"
+                                                    class="text-white">{{ __('messages.Delete themes') }}</a></button>
+                                            <button class="btn btn-info download-themes" title="Download more themes"><a
+                                                    href="https://linkstack.org/themes/" target="_blank"
+                                                    class="text-white">{{ __('messages.Download themes') }}</a></button>
                                         </div>
                                     </form>
                                     </details>
@@ -158,13 +188,11 @@
                 </div>
         </div>
         @endif
-
         @endforeach
 
-<script src="{{ asset('assets/external-dependencies/jquery-1.12.4.min.js') }}"></script>
         </section>
         <script>
-$(window).on('load', function() {
+            function performOperation() {
                 var placeholder = $('#ajax-container');
                 var lazyElement = $('#my-lazy-element');
 
@@ -176,12 +204,36 @@ $(window).on('load', function() {
                         lazyElement.html(response);
                     }
                 });
+            };
+
+            document.addEventListener('DOMContentLoaded', () => {
+                if (typeof Livewire === 'undefined') {
+                    performOperation();
+                }
+            });
+
+            document.addEventListener('livewire:navigated', () => {
+                performOperation();
             });
         </script>
-<script type="text/javascript">$("iframe").load(function() { $("iframe").contents().find("a").each(function(index) { $(this).on("click", function(event) { event.preventDefault(); event.stopPropagation(); }); }); });</script>
+        <script type="text/javascript">
+            var iframe = document.getElementById('frPreview');
+
+            iframe.onload = function() {
+                const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
+                const style = document.createElement('style');
+                style.innerHTML = `
+        * {
+            pointer-events: none !important;
+        }
+    `;
+                iframeDocument.head.appendChild(style);
+            };
+        </script>
 
         @push('sidebar-scripts')
-    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
+            <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
+                aria-hidden="true">
                 <div class="modal-dialog modal-fullscreen">
                     <div class="modal-content">
                         <div class="modal-header">
@@ -192,19 +244,27 @@ $(window).on('load', function() {
 
                             <form action="{{ route('editTheme') }}" enctype="multipart/form-data" method="post">
                                 @csrf
-                <select id="theme-select" style="display:none;" name="theme" data-base-url="{{ url('') }}/@<?= Auth::user()->littlelink_name ?>"><option value="default" selected></option></select>
+                                <select id="theme-select" style="display:none;" name="theme"
+                                    data-base-url="{{ url('') }}/@<?= Auth::user()->littlelink_name ?>">
+                                    <option value="default" selected></option>
+                                </select>
                                 <div class="row">
                                     <div class="col-lg-3">
-                        <div class="card shadow-lg @if($page->theme == "" or $page->theme == "default") bg-primary @else bg-soft-primary @endif">
+                                        <div
+                                            class="card shadow-lg @if ($page->theme == '' or $page->theme == 'default') bg-primary @else bg-soft-primary @endif">
                                             <div class="card-body pb-0">
                                                 <a style="cursor:pointer;" onclick="setTheme('default')">
                                                     <div class="d-flex justify-content-between">
                                                         <div>
-                                    <img draggable="false" class="bd-placeholder-img bd-placeholder-img-lg img-fluid" src="{{url('assets/linkstack/images/themes/default.png')}}">
+                                                            <img draggable="false"
+                                                                class="bd-placeholder-img bd-placeholder-img-lg img-fluid"
+                                                                src="{{ url('assets/linkstack/images/themes/default.png') }}">
                                                         </div>
                                                     </div>
                                                     <div class="text-center">
-                                 <h2 class="m-3 @if($page->theme == "" or $page->theme == "default") text-white @else text-gray @endif"">Default Theme</h2>
+                                                        <h2
+                                                            class="m-3 @if ($page->theme == '' or $page->theme == 'default') text-white @else text-gray @endif"">
+                                                            Default Theme</h2>
                                                         <div>
                                                         </div>
                                                     </div>
@@ -228,16 +288,21 @@ $(window).on('load', function() {
                                                         ?>
 
                                     <div class="col-lg-3">
-                                                            <div class="card shadow-lg @if($page->theme == $entry) bg-primary @else bg-soft-primary @endif">
+                                        <div
+                                            class="card shadow-lg @if ($page->theme == $entry) bg-primary @else bg-soft-primary @endif">
                                             <div class="card-body pb-0">
                                                 <a style="cursor:pointer;" onclick="setTheme('{{ $entry }}')">
                                                     <div class="d-flex justify-content-between">
                                                         <div>
-                                                                        <img draggable="false" class="bd-placeholder-img bd-placeholder-img-lg img-fluid" src="{{url('themes/'.$entry.'/preview.png')}}">
+                                                            <img draggable="false"
+                                                                class="bd-placeholder-img bd-placeholder-img-lg img-fluid"
+                                                                src="{{ url('themes/' . $entry . '/preview.png') }}">
                                                         </div>
                                                     </div>
                                                     <div class="text-center">
-                                                                     <h2 class="m-3 @if($page->theme == $entry) text-white @else text-gray @endif">{{$themeName}}</h2>
+                                                        <h2
+                                                            class="m-3 @if ($page->theme == $entry) text-white @else text-gray @endif">
+                                                            {{ $themeName }}</h2>
                                                         <div>
                                                         </div>
                                                     </div>
@@ -257,7 +322,8 @@ $(window).on('load', function() {
 
                         </div>
                         <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{__('messages.Close')}}</button>
+                            <button type="button" class="btn btn-secondary"
+                                data-bs-dismiss="modal">{{ __('messages.Close') }}</button>
                         </div>
                     </div>
                 </div>
@@ -270,5 +336,4 @@ $(window).on('load', function() {
                 }
             </script>
         @endpush
-
     @endsection