devol/LinkStack
1
0
Fork 0
mirror of https://github.com/LinkStackOrg/LinkStack.git synced 2025-03-16 19:40:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use wire navigate for hydration

Browse Source
This commit is contained in:
Julian Prieber 2024-12-18 18:17:14 +01:00
parent f198ac1be1
commit 3b6a8ef109
5 changed files with 100 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
assets/js/hope-ui.js vendored
View File

@ -307,12 +307,14 @@ const resizePlugins = () => {
-----------------------------------------------------------------------*/ -----------------------------------------------------------------------*/
const loaderInit = () => { const loaderInit = () => {
const loader = document.querySelector('.loader') const loader = document.querySelector('.loader')
setTimeout(() => { if (loader) {
loader.classList.add('animate__animated', 'animate__fadeOut')
setTimeout(() => { setTimeout(() => {
loader.classList.add('d-none') loader.classList.add('animate__animated', 'animate__fadeOut')
setTimeout(() => {
loader.classList.add('d-none')
}, 500)
}, 500) }, 500)
}, 500) }
} }
/*--------------------------------------------------------------------- /*---------------------------------------------------------------------
Sidebar Toggle Sidebar Toggle

48
assets/js/plugins/setting.js vendored
View File

@ -39,6 +39,12 @@ Index Of Script
// Variables // Variables
let sidebarTypeSetting = []; let sidebarTypeSetting = [];
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
}
// RTL mode on change offcanvas position change function // RTL mode on change offcanvas position change function
const rtlModeDefault = (check) => { const rtlModeDefault = (check) => {
if (check) { if (check) {
@ -88,10 +94,10 @@ Index Of Script
// For Dark, RTL & Sidebar Class Update // For Dark, RTL & Sidebar Class Update
const changeMode = (type, value, target) => { const changeMode = (type, value, target) => {
let detailObj = {} let detailObj = {}
if (type == 'color-mode') { // if (type == 'color-mode') {
detailObj = {dark: value} // detailObj = {dark: value}
document.querySelector('body').classList.add(value) // document.querySelector('body').classList.add(value)
} // }
if (type == 'dir-mode') { if (type == 'dir-mode') {
detailObj = {dir: value} detailObj = {dir: value}
document.querySelector('html').setAttribute('dir',value) document.querySelector('html').setAttribute('dir',value)
@ -119,13 +125,11 @@ Index Of Script
} }
}) })
// For Dark Mode // For Dark Mode
const colorMode = localStorage.getItem('color-mode') const colorMode = getCookie('color-mode');
if(colorMode !== null && colorMode !== undefined) { if (colorMode !== null && colorMode !== undefined) {
document.body.classList.remove('dark') darkMode();
document.body.classList.add(colorMode) checkSettingMenu('color-mode', 'color', colorMode, 'noClass');
darkMode()
checkSettingMenu('color-mode', 'color', colorMode, 'addedClass')
} }
// For RTL Mode // For RTL Mode
@ -187,7 +191,7 @@ Index Of Script
el.classList.remove('active') el.classList.remove('active')
document.querySelector('body').classList.remove(el.getAttribute('data-value')) document.querySelector('body').classList.remove(el.getAttribute('data-value'))
}) })
localStorage.setItem('color-mode', mode.getAttribute('data-value')) document.cookie = `color-mode=${mode.getAttribute('data-value')}; path=/;`;
mode.classList.add('active') mode.classList.add('active')
document.querySelector('body').classList.add(mode.getAttribute('data-value')) document.querySelector('body').classList.add(mode.getAttribute('data-value'))
changeMode('color-mode', mode.getAttribute('data-value')) changeMode('color-mode', mode.getAttribute('data-value'))
@ -314,16 +318,16 @@ Index Of Script
const event = new CustomEvent("ColorChange", {detail :{detail1:colorInfo.trim(), detail2:colors.trim()}}); const event = new CustomEvent("ColorChange", {detail :{detail1:colorInfo.trim(), detail2:colors.trim()}});
document.dispatchEvent(event); document.dispatchEvent(event);
} }
const elements = document.querySelectorAll('[data-setting="color-mode1"][data-name="color"]') // const elements = document.querySelectorAll('[data-setting="color-mode1"][data-name="color"]')
Array.from(elements, (mode) => { // Array.from(elements, (mode) => {
const colorclass = mode.getAttribute('data-value'); // const colorclass = mode.getAttribute('data-value');
if(colorclass === custombodyclass ){ // if(colorclass === custombodyclass ){
mode.classList.add('active') // mode.classList.add('active')
} // }
else{ // else{
mode.classList.remove('active') // mode.classList.remove('active')
} // }
}) // })
} }
const elements = document.querySelectorAll('[data-setting="color-mode1"][data-name="color"]') const elements = document.querySelectorAll('[data-setting="color-mode1"][data-name="color"]')

2
config/livewire.php
View File

@ -129,7 +129,7 @@ return [
'navigate' => [ 'navigate' => [
'show_progress_bar' => true, 'show_progress_bar' => true,
'progress_bar_color' => '#2299dd', 'progress_bar_color' => 'var(--bs-primary)',
], ],
/* /*

95
resources/views/layouts/sidebar.blade.php
View File

@ -16,10 +16,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>{{ env('APP_NAME') }}</title> <title>{{ env('APP_NAME') }}</title>
<script src="{{ asset('assets/js/detect-dark-mode.js') }}"></script> @livewireStyles
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
<base href="{{ url()->current() }}" /> <base href="{{ url()->current() }}" />
<meta name="csrf-token" content="{{ csrf_token() }}">
{{-- <script src="{{ asset('assets/js/detect-dark-mode.js') }}"></script> --}}
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
@include('layouts.analytics') @include('layouts.analytics')
@stack('sidebar-stylesheets') @stack('sidebar-stylesheets')
@ -66,21 +69,36 @@
<!-- RTL Css --> <!-- RTL Css -->
<link rel="stylesheet" href="{{ asset('assets/css/rtl.min.css') }}" /> <link rel="stylesheet" href="{{ asset('assets/css/rtl.min.css') }}" />
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="{{ asset('assets/linkstack/css/hover-min.css') }}"> <link rel="stylesheet" href="{{ asset('assets/linkstack/css/hover-min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/linkstack/css/animate.css') }}"> <link rel="stylesheet" href="{{ asset('assets/linkstack/css/animate.css') }}">
<link rel="stylesheet" href="{{ asset('assets/external-dependencies/bootstrap-icons.css') }}"> <link rel="stylesheet" href="{{ asset('assets/external-dependencies/bootstrap-icons.css') }}">
{{-- <style>
body * {
animation-name: loadfade;
animation-duration: .6s;
animation-fill-mode: both;
}
@keyframes loadfade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style> --}}
</head> </head>
<body class="{{$_COOKIE['color-mode'] ?? 'auto'}}">
<body class=" "> {{-- <!-- loader Start -->
<!-- loader Start -->
<div id="loading"> <div id="loading">
<div class="loader simple-loader"> <div id="loader" class="loader simple-loader">
<div class="loader-body"></div> <div class="loader-body"></div>
</div> </div>
</div> </div>
<!-- loader END --> <script>document.getElementById('loader').style.backgroundColor = colorMode === 'dark' ? '#222738' : '';</script>
<!-- loader END --> --}}
<aside class="sidebar sidebar-default sidebar-white sidebar-base navs-rounded-all "> <aside class="sidebar sidebar-default sidebar-white sidebar-base navs-rounded-all ">
<div class="sidebar-header d-flex align-items-center justify-content-start"> <div class="sidebar-header d-flex align-items-center justify-content-start">
@ -136,7 +154,7 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link {{ Request::segment(1) == 'dashboard' ? 'active' : 'bg-soft-primary' }}" <a class="nav-link {{ Request::segment(1) == 'dashboard' ? 'active' : 'bg-soft-primary' }}"
aria-current="page" href="{{ route('panelIndex') }}"> aria-current="page" href="{{ route('panelIndex') }}" wire:navigate>
<i class="icon"> <i class="icon">
<svg width="20" viewBox="0 0 24 24" fill="none" <svg width="20" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg" class="icon-20"> xmlns="http://www.w3.org/2000/svg" class="icon-20">
@ -150,7 +168,7 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link {{ Request::segment(2) == 'add-link' ? 'active' : '' }}" <a class="nav-link {{ Request::segment(2) == 'add-link' ? 'active' : '' }}"
aria-current="page" href="{{ url('/studio/add-link') }}"> aria-current="page" href="{{ url('/studio/add-link') }}" wire:navigate>
<i class="icon"> <i class="icon">
<svg class="icon-20" width="20" viewBox="0 0 24 24" fill="none" <svg class="icon-20" width="20" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
@ -166,7 +184,7 @@
</li> </li>
@if (auth()->user()->role == 'admin') @if (auth()->user()->role == 'admin')
<li class="nav-item static-item"> <li class="nav-item static-item">
<a class="nav-link static-item disabled" href="#" tabindex="-1"> <a class="nav-link static-item disabled" href="#" tabindex="-1" wire:navigate>
<span class="default-icon">{{ __('messages.Administration') }}</span> <span class="default-icon">{{ __('messages.Administration') }}</span>
<span class="mini-icon">-</span> <span class="mini-icon">-</span>
</a> </a>
@ -194,28 +212,28 @@
<ul class="sub-nav collapse" id="utilities-error" data-bs-parent="#sidebar-menu"> <ul class="sub-nav collapse" id="utilities-error" data-bs-parent="#sidebar-menu">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link {{ Request::segment(2) == 'config' ? 'active' : '' }}" <a class="nav-link {{ Request::segment(2) == 'config' ? 'active' : '' }}"
href="{{ url('admin/config') }}"> href="{{ url('admin/config') }}" wire:navigate>
<i class="bi bi-wrench-adjustable-circle-fill"></i> <i class="bi bi-wrench-adjustable-circle-fill"></i>
<span class="item-name">{{ __('messages.Config') }}</span> <span class="item-name">{{ __('messages.Config') }}</span>
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link {{ Request::segment(2) == 'users' ? 'active' : '' }}" <a class="nav-link {{ Request::segment(2) == 'users' ? 'active' : '' }}"
href="{{ url('admin/users/all') }}"> href="{{ url('admin/users/all') }}" wire:navigate>
<i class="bi bi-people-fill"></i> <i class="bi bi-people-fill"></i>
<span class="item-name">{{ __('messages.Manage Users') }}</span> <span class="item-name">{{ __('messages.Manage Users') }}</span>
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link {{ Request::segment(2) == 'pages' ? 'active' : '' }}" <a class="nav-link {{ Request::segment(2) == 'pages' ? 'active' : '' }}"
href="{{ url('admin/pages') }}"> href="{{ url('admin/pages') }}" wire:navigate>
<i class="bi bi-collection-fill"></i> <i class="bi bi-collection-fill"></i>
<span class="item-name">{{ __('messages.Footer Pages') }}</span> <span class="item-name">{{ __('messages.Footer Pages') }}</span>
</a> </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link {{ Request::segment(2) == 'site' ? 'active' : '' }}" <a class="nav-link {{ Request::segment(2) == 'site' ? 'active' : '' }}"
href="{{ url('admin/site') }}"> href="{{ url('admin/site') }}" wire:navigate>
<i class="bi bi-palette-fill"></i> <i class="bi bi-palette-fill"></i>
<span class="item-name">{{ __('messages.Site Customization') }}</span> <span class="item-name">{{ __('messages.Site Customization') }}</span>
</a> </a>
@ -231,7 +249,7 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link {{ Request::segment(2) == 'links' ? 'active' : '' }}" <a class="nav-link {{ Request::segment(2) == 'links' ? 'active' : '' }}"
href="{{ url('/studio/links') }}"> href="{{ url('/studio/links') }}" wire:navigate>
<i class="icon"> <i class="icon">
<svg class="icon-20" width="20" viewBox="0 0 24 24" fill="none" <svg class="icon-20" width="20" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
@ -245,7 +263,7 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link {{ Request::segment(2) == 'page' ? 'active' : '' }}" <a class="nav-link {{ Request::segment(2) == 'page' ? 'active' : '' }}"
href="{{ url('/studio/page') }}"> href="{{ url('/studio/page') }}" wire:navigate>
<i class="icon"> <i class="icon">
<svg class="icon-20" width="20" viewBox="0 0 24 24" fill="none" <svg class="icon-20" width="20" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
@ -259,7 +277,7 @@
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link {{ Request::segment(2) == 'theme' ? 'active' : '' }}" <a class="nav-link {{ Request::segment(2) == 'theme' ? 'active' : '' }}"
href="{{ url('/studio/theme') }}"> href="{{ url('/studio/theme') }}" wire:navigate>
<i class="icon"> <i class="icon">
<svg class="icon-20" width="20" viewBox="0 0 24 24" fill="none" <svg class="icon-20" width="20" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
@ -421,7 +439,7 @@
$(document).ready(function() { $(document).ready(function() {
async function fetchAndReplaceContent() { async function fetchAndReplaceContent() {
try { try {
const response = await $.ajax({ var response = await $.ajax({
url: "{{ url('/dashboard/notifications') }}", url: "{{ url('/dashboard/notifications') }}",
method: 'GET', method: 'GET',
dataType: 'html' dataType: 'html'
@ -492,11 +510,11 @@ MODAL; // <-- Indentation breaks my code editor :/
@if(auth()->user()->role == 'admin') @if(auth()->user()->role == 'admin')
@push('sidebar-scripts') @push('sidebar-scripts')
<script> <script>
const isVisible = true; var isVisible = true;
async function externalFileGetContents(url) { async function externalFileGetContents(url) {
try { try {
const response = await fetch(url, { var response = await fetch(url, {
method: 'GET', method: 'GET',
redirect: 'follow' // This ensures that redirects are followed redirect: 'follow' // This ensures that redirects are followed
}); });
@ -506,7 +524,7 @@ MODAL; // <-- Indentation breaks my code editor :/
return null; return null;
} }
const data = await response.text(); var data = await response.text();
return data.trim(); return data.trim();
} catch (error) { } catch (error) {
console.error(`Error fetching the URL: ${error.message}`); console.error(`Error fetching the URL: ${error.message}`);
@ -526,9 +544,9 @@ MODAL; // <-- Indentation breaks my code editor :/
@if (env('JOIN_BETA') == true) @if (env('JOIN_BETA') == true)
<script> <script>
window.onload = async function() { window.onload = async function() {
const Vbeta = await externalFileGetContents('{{"{$betaServer}vbeta.json"}}'); var Vbeta = await externalFileGetContents('{{"{$betaServer}vbeta.json"}}');
const isVisible = true; var isVisible = true;
$('#beta-version').text(Vbeta); $('#beta-version').text(Vbeta);
@ -543,10 +561,10 @@ MODAL; // <-- Indentation breaks my code editor :/
@else @else
<script> <script>
window.onload = async function() { window.onload = async function() {
const Vgit = await externalFileGetContents('{{$versionServer}}'); var Vgit = await externalFileGetContents('{{$versionServer}}');
const Vlocal = `{{ trim($Vlocal) }}`; var Vlocal = `{{ trim($Vlocal) }}`;
const isVisible = Vgit > Vlocal; var isVisible = Vgit > Vlocal;
var updateElements = document.getElementsByClassName('update-icon-update'); var updateElements = document.getElementsByClassName('update-icon-update');
var normalElements = document.getElementsByClassName('update-icon-normal'); var normalElements = document.getElementsByClassName('update-icon-normal');
@ -1164,7 +1182,7 @@ MODAL; // <-- Indentation breaks my code editor :/
<script src="{{ asset('assets/vendor/aos/dist/aos.js') }}"></script> <script src="{{ asset('assets/vendor/aos/dist/aos.js') }}"></script>
<!-- App Script --> <!-- App Script -->
<script src="{{ asset('assets/js/hope-ui.js') }}" defer></script> <script src="{{ asset('assets/js/hope-ui.js') }}" defer data-navigate-track></script>
<!-- Flatpickr Script --> <!-- Flatpickr Script -->
<script src="{{ asset('assets/vendor/flatpickr/dist/flatpickr.min.js') }}"></script> <script src="{{ asset('assets/vendor/flatpickr/dist/flatpickr.min.js') }}"></script>
@ -1175,13 +1193,13 @@ MODAL; // <-- Indentation breaks my code editor :/
<!-- Share Button --> <!-- Share Button -->
<script> <script>
// Get a reference to all buttons with the class "share-button" // Get a reference to all buttons with the class "share-button"
const shareButtons = document.querySelectorAll('.share-button'); var shareButtons = document.querySelectorAll('.share-button');
// Add a click event listener to each button // Add a click event listener to each button
shareButtons.forEach(button => { shareButtons.forEach(button => {
button.addEventListener('click', () => { button.addEventListener('click', () => {
// Get the value to share/copy from the "data-share" attribute // Get the value to share/copy from the "data-share" attribute
const valueToShare = button.dataset.share; var valueToShare = button.dataset.share;
// Check if the Web Share API is supported // Check if the Web Share API is supported
if (navigator.share) { if (navigator.share) {
@ -1216,6 +1234,23 @@ MODAL; // <-- Indentation breaks my code editor :/
@stack('sidebar-scripts') @stack('sidebar-scripts')
{{-- @livewireScriptConfig
<script data-navigate-once="true">window.livewireScriptConfig.progressBar = true;</script> --}}
<script src="{{ asset('assets/vendor/livewire/livewire.js') }}" data-update-uri="/livewire/update" data-navigate-once="true"></script>
<script>
document.addEventListener("livewire:navigated", () => {
if (typeof Alpine !== 'undefined' && Alpine.start) {
console.log("Alpine.js is running!");
} else {
console.log("Alpine.js is not running.");
Alpine.start();
}
});
document.addEventListener("alpine:init",()=>{console.log("Alpine initialized")})
</script>
</body> </body>
</html> </html>

4
resources/views/panel/users.blade.php
View File

@ -126,12 +126,12 @@
</div> </div>
@push('sidebar-stylesheets') @push('sidebar-stylesheets')
@livewireStyles {{-- @livewireStyles --}}
<link rel="stylesheet" href="{{ asset('assets/vendor/livewire/core.min.css') }}" /> <link rel="stylesheet" href="{{ asset('assets/vendor/livewire/core.min.css') }}" />
@endpush @endpush
@push('sidebar-scripts') @push('sidebar-scripts')
<script src="{{ asset('assets/vendor/livewire/livewire.js') }}" data-update-uri="/livewire/update" data-navigate-once="true"></script> {{-- <script src="{{ asset('assets/vendor/livewire/livewire.js') }}" data-update-uri="/livewire/update" data-navigate-once="true"></script> --}}
<script src="{{ asset('assets/vendor/livewire/core.min.js') }}"></script> <script src="{{ asset('assets/vendor/livewire/core.min.js') }}"></script>
<script src="{{ asset('assets/external-dependencies/sweetalert2.min.js') }}"></script> <script src="{{ asset('assets/external-dependencies/sweetalert2.min.js') }}"></script>
<script type="text/javascript"> <script type="text/javascript">