Refactor pages for wire:navigate

This commit is contained in:
Julian Prieber 2024-12-19 15:13:37 +01:00
parent 82cbe24e94
commit 91e716adc0
7 changed files with 866 additions and 682 deletions

View File

@ -2,7 +2,7 @@
Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved. 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/ 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}, 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&& 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}()); 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}());

View File

@ -1,35 +1,55 @@
<p>{{__('messages.AC.description')}}</p> <p>{{ __('messages.AC.description') }}</p>
<form action="{{ route('editAC') }}" method="post" id="editForm"> <form action="{{ route('editAC') }}" method="post" id="editForm">
@csrf @csrf
<div class="form-group"> <div class="form-group">
<label>{{__('messages.Advanced Configuration file.')}}</label> <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> <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;"
</div> class="form-control border-1 border-light" name="AdvancedConfig" rows="280">
<button type="submit" class="btn btn-primary" id="saveBtn">{{__('messages.Save')}}</button> {{ file_get_contents('config/advanced-config.php') }}</div>
<a class="btn btn-danger confirmation" href="#" id="restoreDefaultsBtn">{{__('messages.Restore defaults')}}</a> </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>
</form> </form>
<script src="{{ asset('assets/external-dependencies/ace.js') }}" type="text/javascript" charset="utf-8"></script> @push('sidebar-stylesheets')
<script> <script src="{{ asset('assets/external-dependencies/ace.js') }}" type="text/javascript" charset="utf-8"></script>
var editor = ace.edit("editor"); @endpush
@push('sidebar-scripts')
<script>
function performOperation() {
var editor = ace.edit("editor");
editor.getSession().on('change', function(e) { editor.getSession().on('change', function(e) {
$('textarea[name=AdvancedConfig]').val(editor.getSession().getValue()); $('textarea[name=AdvancedConfig]').val(editor.getSession().getValue());
}); });
$('#restoreDefaultsBtn').on('click', function(e) { $('#restoreDefaultsBtn').on('click', function(e) {
e.preventDefault(); e.preventDefault();
var isAdvancedConfig = $(this).hasClass('confirmation'); var isAdvancedConfig = $(this).hasClass('confirmation');
var confirmationMessage = "Are you sure?"; var confirmationMessage = "Are you sure?";
if (isAdvancedConfig) { 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)) { if (confirm(confirmationMessage)) {
$('#editForm').submit(); $('#editForm').submit();
} }
}); });
</script> };
document.addEventListener('DOMContentLoaded', () => {
if (typeof Livewire === 'undefined') {
performOperation();
}
});
document.addEventListener('livewire:navigated', () => {
performOperation();
});
</script>
@endpush

View File

@ -94,6 +94,78 @@
<!-- App Script --> <!-- App Script -->
<script src="{{ asset('assets/js/hope-ui.js') }}" defer></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> </head>
<body class="{{$_COOKIE['color-mode'] ?? 'auto'}}"> <body class="{{$_COOKIE['color-mode'] ?? 'auto'}}">
{{-- <!-- loader Start --> {{-- <!-- loader Start -->
@ -224,7 +296,7 @@
</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') }}" wire:current="active" wire:navigate> href="{{ url('admin/users') }}" wire:current="active" 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>
@ -1163,81 +1235,13 @@ MODAL; // <-- Indentation breaks my code editor :/
}); });
</script> --}} </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 --> <!-- Settings Script -->
<script src="{{ asset('assets/js/plugins/setting.js') }}"></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') @stack('sidebar-scripts')
{{-- <script src="{{ asset('assets/js/detect-dark-mode.js') }}"></script> --}}
<script> <script>
document.addEventListener('livewire:navigated', () => { document.addEventListener('livewire:navigated', () => {
var collapseElement = document.getElementById("admin-section"); var collapseElement = document.getElementById("admin-section");

View File

@ -124,13 +124,17 @@
</div> </div>
@push('sidebar-stylesheets') @push('sidebar-stylesheets')
{{-- @livewireStyles --}} @if(false)
@livewireStyles
@endif
<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> --}} @if(false)
<script src="{{ asset('assets/vendor/livewire/core.min.js') }}"></script> @livewireScripts
<script src="{{ asset('assets/vendor/livewire/core.min.js') }}"></script>
@endif
<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">
// Function to confirm and delete users // Function to confirm and delete users

View File

@ -344,7 +344,22 @@ if (isset($_COOKIE['LinkCount'])) {
</div> </div>
</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 @endsection

View File

@ -3,357 +3,433 @@
@section('content') @section('content')
<div class="conatiner-fluid content-inner mt-n5 py-0"> <div class="conatiner-fluid content-inner mt-n5 py-0">
<div class="row"> <div class="row">
<div class="col-lg-12"> <div class="col-lg-12">
<div class="card rounded"> <div class="card rounded">
<div class="card-body"> <div class="card-body">
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<style> <style>
.ck-editor__editable[role="textbox"] { .ck-editor__editable[role="textbox"] {
/* editing area */ /* editing area */
min-height: 200px; min-height: 200px;
} }
.ck-content .image { .ck-content .image {
/* block images */ /* block images */
max-width: 80%; max-width: 80%;
margin: 20px auto; margin: 20px auto;
} }
</style>
<style>
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
</style> input[type=checkbox],
<style> input[type=radio] {
@supports (-webkit-appearance: none) or (-moz-appearance: none) { --active: var(--bs-primary);
input[type=checkbox], --active-inner: #fff;
input[type=radio] { --focus: 2px var(--bs-primary);
--active: var(--bs-primary); --border: #BBC1E1;
--active-inner: #fff; --border-hover: var(--bs-primary);
--focus: 2px var(--bs-primary); --background: #fff;
--border: #BBC1E1; --disabled: #F6F8FF;
--border-hover: var(--bs-primary); --disabled-inner: #E1E6F9;
--background: #fff; -webkit-appearance: none;
--disabled: #F6F8FF; -moz-appearance: none;
--disabled-inner: #E1E6F9; height: 21px;
-webkit-appearance: none; outline: none;
-moz-appearance: none; display: inline-block;
height: 21px; vertical-align: top;
outline: none; position: relative;
display: inline-block; margin: 0;
vertical-align: top; cursor: pointer;
position: relative; border: 1px solid var(--bc, var(--border));
margin: 0; background: var(--b, var(--background));
cursor: pointer; transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
border: 1px solid var(--bc, var(--border)); }
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: "";
display: block;
left: 0;
top: 0;
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);
--bc: var(--active);
--d-o: .3s;
--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;
line-height: 21px;
display: inline-block;
vertical-align: top;
cursor: pointer;
margin-left: 4px;
}
input[type=checkbox]:not(.switch) { input[type=checkbox]:after,
border-radius: 7px; input[type=radio]:after {
} content: "";
input[type=checkbox]:not(.switch):after { display: block;
width: 5px; left: 0;
height: 9px; top: 0;
border: 2px solid var(--active-inner); position: absolute;
border-top: 0; transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
border-left: 0; }
left: 7px;
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;
border-radius: 50%;
width: 15px;
height: 15px;
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;
}
input[type=radio] { input[type=checkbox]:checked,
border-radius: 50%; input[type=radio]:checked {
} --b: var(--active);
input[type=radio]:after { --bc: var(--active);
width: 19px; --d-o: .3s;
height: 19px; --d-t: .6s;
border-radius: 50%; --d-t-e: cubic-bezier(.2, .85, .32, 1.2);
background: var(--active-inner); }
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;">
@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">
@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>
<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>
@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">
<use xlink:href="#exclamation-triangle-fill"></use>
</svg>
<div>
@foreach ($errors->all() as $error)
{{ $error }}
@endforeach
</div>
</div>
@endif
<div>
<div></div> input[type=checkbox]:disabled,
@foreach($pages as $page) input[type=radio]:disabled {
<form action="{{ route('editPage') }}" enctype="multipart/form-data" method="post"> --b: var(--disabled);
@csrf cursor: not-allowed;
@if($page->littlelink_name != '') opacity: 0.9;
<div class="form-group col-lg-8"> }
<label class="form-label" 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
<!--<div class="form-group col-lg-8"> input[type=checkbox]:disabled:checked,
<label>Path name</label> input[type=radio]:disabled:checked {
@<input type="text" class="form-control" name="pageName" value="{{ $page->littlelink_name ?? '' }}"> --b: var(--disabled-inner);
</div>--> --bc: var(--border);
}
<div class="form-group col-lg-8"> input[type=checkbox]:disabled+label,
<?php input[type=radio]:disabled+label {
$url = $_SERVER['REQUEST_URI']; cursor: not-allowed;
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>
<div class="input-group mb-3 has-validation">
<span class="input-group-text" 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 ?? '' }}" :value="old('littlelink_name')" required autofocus >
</div>
<script>var exceptionvar = value="{{ $page->littlelink_name }}";</script>
@include('auth.url-validation')
<label style="margin-top:15px">{{__('messages.Display name')}}</label> input[type=checkbox]:hover:not(:checked):not(:disabled),
<div class="input-group"> input[type=radio]:hover:not(:checked):not(:disabled) {
{{-- <div class="input-group-prepend"> --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;
line-height: 21px;
display: inline-block;
vertical-align: top;
cursor: pointer;
margin-left: 4px;
}
input[type=checkbox]:not(.switch) {
border-radius: 7px;
}
input[type=checkbox]:not(.switch):after {
width: 5px;
height: 9px;
border: 2px solid var(--active-inner);
border-top: 0;
border-left: 0;
left: 7px;
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;
border-radius: 50%;
width: 15px;
height: 15px;
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;
}
input[type=radio] {
border-radius: 50%;
}
input[type=radio]:after {
width: 19px;
height: 19px;
border-radius: 50%;
background: var(--active-inner);
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;">
@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">
@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>
<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>
@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">
<use xlink:href="#exclamation-triangle-fill"></use>
</svg>
<div>
@foreach ($errors->all() as $error)
{{ $error }}
@endforeach
</div>
</div>
@endif
<div>
<div></div>
@foreach ($pages as $page)
<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>
<input type="file"
accept="image/jpeg,image/jpg,image/png,image/webp"
name="image" class="form-control" id="customFile">
</div>
@endif
<!--<div class="form-group col-lg-8">
<label>Path name</label>
@<input type="text" class="form-control" name="pageName" value="{{ $page->littlelink_name ?? '' }}">
</div>-->
<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>';
} ?>
<br>
<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>
<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>
@include('auth.url-validation')
<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 class="input-group-text">{{__('messages.Name')}}</div>
</div> --}} </div> --}}
<input type="text" class="form-control" name="name" value="{{ $page->name }}" required> <input type="text" class="form-control" name="name"
</div> value="{{ $page->name }}" required>
</div> </div>
</div>
<div class="form-group col-lg-8"> <div class="form-group col-lg-8">
<label>{{__('messages.Page Description')}}</label> <label>{{ __('messages.Page Description') }}</label>
<textarea class="form-control @if(env('ALLOW_USER_HTML') === true) ckeditor @endif" name="pageDescription" rows="3">{{ $page->littlelink_description ?? '' }}</textarea> <textarea class="form-control @if (env('ALLOW_USER_HTML') === true) ckeditor @endif" name="pageDescription" rows="3">{{ $page->littlelink_description ?? '' }}</textarea>
</div> </div>
@if(auth()->user()->role == 'admin' || auth()->user()->role == 'vip') @if (auth()->user()->role == 'admin' || auth()->user()->role == 'vip')
<div class="form-group col-lg-8"> <div class="form-group col-lg-8">
<h5 style="margin-top:50px"> {{__('messages.Show checkmark')}}</h5> <h5 style="margin-top:50px"> {{ __('messages.Show checkmark') }}
<p class="text-muted">{{__('messages.disableverified')}}</p> </h5>
<div class="mb-3 form-check form-switch"> <p class="text-muted">{{ __('messages.disableverified') }}</p>
<input name="checkmark" class="switch toggle-btn" type="checkbox" id="checkmark" <?php if(UserData::getData(Auth::user()->id, 'checkmark') == true){echo 'checked';} ?> /> <div class="mb-3 form-check form-switch">
<label class="form-check-label" for="checkmark">{{__('messages.Enable')}}</label> <input name="checkmark" class="switch toggle-btn"
</div> type="checkbox" id="checkmark" <?php if (UserData::getData(Auth::user()->id, 'checkmark') == true) {
<input type="hidden" name="_token" value="{{csrf_token()}}"> echo 'checked';
@endif } ?> />
@endforeach <label class="form-check-label"
for="checkmark">{{ __('messages.Enable') }}</label>
</div>
<input type="hidden" name="_token" value="{{ csrf_token() }}">
@endif
@endforeach
<div class="form-group col-lg-8"> <div class="form-group col-lg-8">
<h5 style="margin-top:50px">{{__('messages.Show share button')}}</h5> <h5 style="margin-top:50px">{{ __('messages.Show share button') }}</h5>
<p class="text-muted">{{__('messages.disablesharebutton')}}</p> <p class="text-muted">{{ __('messages.disablesharebutton') }}</p>
<div class="mb-3 form-check form-switch"> <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') {
</div> 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>
<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';
} ?> />
<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>
</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: {
items: [
'exportPDF', 'exportWord', '|',
'findAndReplace', 'selectAll', '|',
'heading', '|',
'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript',
'removeFormat', '|',
'bulletedList', 'numberedList', 'todoList', '|',
'outdent', 'indent', '|',
'undo', 'redo',
'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
'alignment', '|',
'link', 'blockQuote', '|',
'specialCharacters', 'horizontalLine', '|',
'textPartLanguage', '|',
],
shouldNotGroupWhenFull: true
},
fontFamily: {
options: [
'default',
'Arial, Helvetica, sans-serif',
'Courier New, Courier, monospace',
'Georgia, serif',
'Lucida Sans Unicode, Lucida Grande, sans-serif',
'Tahoma, Geneva, sans-serif',
'Times New Roman, Times, serif',
'Trebuchet MS, Helvetica, sans-serif',
'Verdana, Geneva, sans-serif'
],
supportAllValues: true
},
fontSize: {
options: [10, 12, 14, 'default', 18, 20, 22],
supportAllValues: true
},
link: {
addTargetToExternalLinks: true, // Add this option to open external links in a new tab
defaultProtocol: 'http://',
decorators: {
addTargetToExternalLinks: {
mode: 'manual',
label: 'Open in new tab',
attributes: {
target: '_blank',
rel: 'noopener noreferrer'
}
}
}
}
})
.catch(error => {
console.error(error);
});
}
document.addEventListener('DOMContentLoaded', () => {
if (typeof Livewire === 'undefined') {
performOperation();
}
});
document.addEventListener('livewire:navigated', () => {
performOperation();
});
</script>
@endpush
@endif
</div>
</div>
</section>
<div class="form-group col-lg-8">
<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';} ?> />
<label class="form-check-label" for="tablinks">{{__('messages.Enable')}}</label>
</div> </div>
</div>
<button id="submit-btn" type="submit" class="mt-3 ml-3 btn btn-primary">{{__('messages.Save')}}</button> </div>
</form>
@if(env('ALLOW_USER_HTML') === true)
<script src="{{ asset('assets/external-dependencies/ckeditor.js') }}"></script>
<script>
ClassicEditor
.create(document.querySelector('.ckeditor'), {
toolbar: {
items: [
'exportPDF', 'exportWord', '|',
'findAndReplace', 'selectAll', '|',
'heading', '|',
'bold', 'italic', 'strikethrough', 'underline', 'code', 'subscript', 'superscript', 'removeFormat', '|',
'bulletedList', 'numberedList', 'todoList', '|',
'outdent', 'indent', '|',
'undo', 'redo',
'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', 'highlight', '|',
'alignment', '|',
'link', 'blockQuote', '|',
'specialCharacters', 'horizontalLine', '|',
'textPartLanguage', '|',
],
shouldNotGroupWhenFull: true
},
fontFamily: {
options: [
'default',
'Arial, Helvetica, sans-serif',
'Courier New, Courier, monospace',
'Georgia, serif',
'Lucida Sans Unicode, Lucida Grande, sans-serif',
'Tahoma, Geneva, sans-serif',
'Times New Roman, Times, serif',
'Trebuchet MS, Helvetica, sans-serif',
'Verdana, Geneva, sans-serif'
],
supportAllValues: true
},
fontSize: {
options: [10, 12, 14, 'default', 18, 20, 22],
supportAllValues: true
},
link: {
addTargetToExternalLinks: true, // Add this option to open external links in a new tab
defaultProtocol: 'http://',
decorators: {
addTargetToExternalLinks: {
mode: 'manual',
label: 'Open in new tab',
attributes: {
target: '_blank',
rel: 'noopener noreferrer'
}
}
}
}
})
.catch(error => {
console.error(error);
});
</script>
@endif
</div> </div>
</div>
</div> </div>
</section>
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div>
@endsection @endsection

View File

@ -1,217 +1,277 @@
@extends('layouts.sidebar') @extends('layouts.sidebar')
@section('content') @section('content')
<div class="conatiner-fluid content-inner mt-n5 py-0">
<div class="row">
<div class="conatiner-fluid content-inner mt-n5 py-0"> <div class="col-lg-12">
<div class="row"> <div class="card rounded">
<div class="card-body">
<div class="row">
<div class="col-sm-12">
<div class="col-lg-12"> @foreach ($pages as $page)
<div class="card rounded"> <section class='text-gray-400'>
<div class="card-body"> <h3 class="mb-4 card-header"><i
<div class="row"> class="bi bi-brush">{{ __('messages.Select a theme') }}</i></h3>
<div class="col-sm-12"> <div>
@foreach($pages as $page) @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">
<use xlink:href="#exclamation-triangle-fill"></use>
</svg>
<div>
@foreach ($errors->all() as $error)
{{ $error }}
@endforeach
</div>
</div>
@endif
<section class='text-gray-400'> <button type="button" class="btn btn-primary mb-5" data-bs-toggle="modal"
<h3 class="mb-4 card-header"><i class="bi bi-brush">{{__('messages.Select a theme')}}</i></h3> data-bs-target="#exampleModal">
<div> {{ __('messages.Select theme') }}
</button>
@if($errors->any()) <section class="text-gray-400"></section>
<div class="alert alert-danger d-flex align-items-center" role="alert"> <div>
<svg class="bi flex-shrink-0 me-2" width="24" height="24">
<use xlink:href="#exclamation-triangle-fill"></use> <div style="max-width:1000px" class="col-md-12">
</svg> <div class="card rounded shadow-lg bg-light aos-init aos-animate"
<div> data-aos="fade-up" data-aos-delay="800">
@foreach ($errors->all() as $error) <div
{{ $error }} class="flex-wrap card-header d-flex justify-content-between align-items-center bg-light">
@endforeach <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>
@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>
@endif
</div>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
@endif </div>
</div>
</div>
<button type="button" class="btn btn-primary mb-5" data-bs-toggle="modal" data-bs-target="#exampleModal"> <div class="col-lg-12">
{{__('messages.Select theme')}} <div class="card rounded">
</button> <div class="card-body">
<div class="row">
<section class="text-gray-400"></section> <div class="col-sm-12">
<div> @if (env('ALLOW_CUSTOM_BACKGROUNDS') == true)
<form action="{{ route('themeBackground') }}" enctype="multipart/form-data"
<div style="max-width:1000px" class="col-md-12"> method="post">
<div class="card rounded shadow-lg bg-light aos-init aos-animate" data-aos="fade-up" data-aos-delay="800"> @csrf
<div class="flex-wrap card-header d-flex justify-content-between align-items-center bg-light"> <h3 class="mb-4 card-header">{{ __('messages.Custom background') }}</h3>
<div class="header-title"> <div style="display: none;" class="form-group col-lg-8">
<h4 class="card-title">{{__('messages.Preview')}}</h4> <select class="form-control" name="theme">
</div> <option>{{ $page->theme }}</option>
</div> </select>
<div class="card-body"> <br>
@if(env('USE_THEME_PREVIEW_IFRAME') === false or $page->littlelink_name == '') </div>
<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> <div class="form-group col-lg-8">
@else <figure style="max-width:1000px;max-height:562.5px;" class="figure">
<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> @if (!file_exists(base_path('assets/img/background-img/' . findBackground(Auth::user()->id))))
<p><i>{{ __('messages.No image selected') }}</i></p>
@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>
</div>
</div>
<button type="submit" class="btn btn-primary">{{ __('messages.Apply') }}</button>
</form>
@endif @endif
</div>
</div> </div>
</div> </div>
</div>
</div> </div>
</div>
</div> </div>
</div>
</div>
</div>
</div>
<div class="col-lg-12"> @if (auth()->user()->role == 'admin')
<div class="card rounded"> <div class="col-lg-12">
<div class="card-body"> <div class="card rounded">
<div class="row"> <div class="card-body">
<div class="col-sm-12"> <div class="row">
@if(env('ALLOW_CUSTOM_BACKGROUNDS') == true) <div class="col-sm-12">
<form action="{{ route('themeBackground') }}" enctype="multipart/form-data" method="post"> <h3 class="mb-4 card-header">{{ __('messages.Manage themes') }}</h3>
@csrf @if (env('ENABLE_THEME_UPDATER') == 'true')
<h3 class="mb-4 card-header">{{__('messages.Custom background')}}</h3> <div id="ajax-container">
<div style="display: none;" class="form-group col-lg-8">
<select class="form-control" name="theme"> <br><br><br>
<option>{{ $page->theme }}</option> <div class="accordion">
</select> <div class="accordion-item">
<br> <h2 class="accordion-header" id="details-header">
</div> <button class="accordion-button collapsed disabled" type="button"
<div class="form-group col-lg-8"> aria-expanded="false" aria-controls="details-collapse">
<figure style="max-width:1000px;max-height:562.5px;" class="figure"> <div style="max-height:20px;max-width:20px;"
@if(!file_exists(base_path('assets/img/background-img/'.findBackground(Auth::user()->id))))<p><i>{{__('messages.No image selected')}}</i></p>@endif class="spinner-border text-primary" role="status">
<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> <span
@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 class="visually-hidden">{{ __('messages.Loading...') }}</span>
{{-- <figcaption class="figure-caption">A caption for the above image.</figcaption> --}} </div>
</figure> </button>
<br> </h2>
<br><br> <div id="details-collapse" class="accordion-collapse collapse"
<div class="mb-3"> aria-labelledby="details-header">
<input type="file" accept="image/jpeg,image/jpg,image/png,image/webp,image/gif" class="form-control form-control-lg" name="image"><br> <div class="accordion-body"></div>
</div>
</div>
</div>
</div>
<div id="my-lazy-element"></div>
@endif
<br><br><br>
<form action="{{ route('editTheme') }}" enctype="multipart/form-data" method="post">
@csrf
{{-- <h3>{{__('messages.Upload themes')}}</h3> --}}
<div style="display: none;" class="form-group col-lg-8">
<select class="form-control" name="theme">
<option>{{ $page->theme }}</option>
</select>
<br>
</div>
<div class="mb-3">
<label>{{ __('messages.Upload themes') }}</label>
<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 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>
</div>
</div> </div>
</div> </div>
<button type="submit" class="btn btn-primary">{{__('messages.Apply')}}</button>
</form>
@endif
</div>
</div>
</div>
</div>
</div>
@if(auth()->user()->role == 'admin')
<div class="col-lg-12">
<div class="card rounded">
<div class="card-body">
<div class="row">
<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">
<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 class="accordion-body"></div>
</div>
</div>
</div>
</div> </div>
<div id="my-lazy-element"></div> </div>
@endif
<br><br><br>
<form action="{{ route('editTheme') }}" enctype="multipart/form-data" method="post">
@csrf
{{-- <h3>{{__('messages.Upload themes')}}</h3> --}}
<div style="display: none;" class="form-group col-lg-8">
<select class="form-control" name="theme">
<option>{{ $page->theme }}</option>
</select>
<br>
</div>
<div class="mb-3">
<label>{{__('messages.Upload themes')}}</label>
<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 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>
</div>
</div>
</div>
</div>
</div> </div>
</div> @endif
@endif @endforeach
@endforeach </section>
<script>
function performOperation() {
var placeholder = $('#ajax-container');
var lazyElement = $('#my-lazy-element');
<script src="{{ asset('assets/external-dependencies/jquery-1.12.4.min.js') }}"></script> $.ajax({
</section> url: '../theme-updater',
<script> success: function(response) {
$(window).on('load', function() { placeholder.replaceWith(lazyElement);
var placeholder = $('#ajax-container');
var lazyElement = $('#my-lazy-element');
$.ajax({ lazyElement.html(response);
url: '../theme-updater', }
success: function(response) { });
placeholder.replaceWith(lazyElement); };
lazyElement.html(response); document.addEventListener('DOMContentLoaded', () => {
if (typeof Livewire === 'undefined') {
performOperation();
}
});
document.addEventListener('livewire:navigated', () => {
performOperation();
});
</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> };
<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>
@push('sidebar-scripts') @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"
<div class="modal-dialog modal-fullscreen"> aria-hidden="true">
<div class="modal-content"> <div class="modal-dialog modal-fullscreen">
<div class="modal-header"> <div class="modal-content">
<h5 class="modal-title" id="exampleModalLabel">{{__('messages.Select a theme')}}</h5> <div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> <h5 class="modal-title" id="exampleModalLabel">{{ __('messages.Select a theme') }}</h5>
</div> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
<div class="modal-body">
<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>
<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-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')}}">
</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>
<div>
</div>
</div>
</a>
</div>
</div> </div>
</div> <div class="modal-body">
<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>
<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-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') }}">
</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>
<div>
</div>
</div>
</a>
</div>
</div>
</div>
<?php <?php
if ($handle = opendir('themes')) { if ($handle = opendir('themes')) {
while (false !== ($entry = readdir($handle))) { while (false !== ($entry = readdir($handle))) {
@ -227,48 +287,53 @@ $(window).on('load', function() {
if(isset($themeName)){ if(isset($themeName)){
?> ?>
<div class="col-lg-3"> <div class="col-lg-3">
<div class="card shadow-lg @if($page->theme == $entry) bg-primary @else bg-soft-primary @endif"> <div
<div class="card-body pb-0"> class="card shadow-lg @if ($page->theme == $entry) bg-primary @else bg-soft-primary @endif">
<a style="cursor:pointer;" onclick="setTheme('{{$entry}}')"> <div class="card-body pb-0">
<div class="d-flex justify-content-between"> <a style="cursor:pointer;" onclick="setTheme('{{ $entry }}')">
<div> <div class="d-flex justify-content-between">
<img draggable="false" class="bd-placeholder-img bd-placeholder-img-lg img-fluid" src="{{url('themes/'.$entry.'/preview.png')}}"> <div>
</div> <img draggable="false"
</div> class="bd-placeholder-img bd-placeholder-img-lg img-fluid"
<div class="text-center"> src="{{ url('themes/' . $entry . '/preview.png') }}">
<h2 class="m-3 @if($page->theme == $entry) text-white @else text-gray @endif">{{$themeName}}</h2>
<div>
</div>
</div>
</a>
</div>
</div>
</div> </div>
</div>
<div class="text-center">
<h2
class="m-3 @if ($page->theme == $entry) text-white @else text-gray @endif">
{{ $themeName }}</h2>
<div>
</div>
</div>
</a>
</div>
</div>
</div>
<?php <?php
} }
} }
} }
} }
?> ?>
</div> </div>
</form> </form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">{{ __('messages.Close') }}</button>
</div>
</div>
</div>
</div> </div>
<div class="modal-footer"> <script>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{__('messages.Close')}}</button> function setTheme(themeName) {
</div> const selectElement = document.getElementById('theme-select');
</div> selectElement.querySelector('option').value = themeName;
</div> selectElement.form.submit();
</div> }
<script> </script>
function setTheme(themeName) { @endpush
const selectElement = document.getElementById('theme-select'); @endsection
selectElement.querySelector('option').value = themeName;
selectElement.form.submit();
}
</script>
@endpush
@endsection