From 189c246488703740ba8efe51bce3d8df6b5338e1 Mon Sep 17 00:00:00 2001 From: A1Gard Date: Sun, 8 Jun 2025 07:30:13 +0330 Subject: [PATCH] optimzed lives --- app/Http/Controllers/ClientController.php | 23 +++++- resources/js/client-custom/lives.js | 51 ++++++++++++- resources/sass/client-custom/_lives.scss | 74 ++++++++++++++++--- .../views/components/card-items.blade.php | 10 ++- .../slider/DowntownSlider/DowntownSlider.scss | 8 -- .../views/website/inc/website-foot.blade.php | 52 +++++++------ routes/web.php | 1 + 7 files changed, 171 insertions(+), 48 deletions(-) diff --git a/app/Http/Controllers/ClientController.php b/app/Http/Controllers/ClientController.php index e7f929f..864c2cb 100644 --- a/app/Http/Controllers/ClientController.php +++ b/app/Http/Controllers/ClientController.php @@ -242,7 +242,7 @@ class ClientController extends Controller public function search(Request $request) { - if (isGuestMaxAttemptTry('search', 5, 1)) { + if (isGuestMaxAttemptTry('search', 10, 1)) { return abort(403); } @@ -273,7 +273,24 @@ class ClientController extends Controller return view('client.tag', compact('posts', 'products', 'clips', 'title', 'subtitle','noIndex')); } - public function group($slug) + public function ajaxSearch(Request $request) + { + $q = trim($request->input('q')); + if (mb_strlen($q) < 3) { + return __('Search word is too short'); + } + $q = '%' . $q . '%'; + $products = Product::where('status', 1)->where(function ($query) use ($q) { + $query->where('name', 'LIKE', $q) + ->orWhere('excerpt', 'LIKE', $q) + ->orWhere('description', 'LIKE', $q); + })->paginate(5); + + + return view('components.search-items',compact('products')); + } + + public function group($slug) { $group = Group::where('slug', $slug)->firstOrFail(); @@ -906,6 +923,6 @@ class ClientController extends Controller } public function cardItems(){ - + } } diff --git a/resources/js/client-custom/lives.js b/resources/js/client-custom/lives.js index c323ce1..590f8ab 100644 --- a/resources/js/client-custom/lives.js +++ b/resources/js/client-custom/lives.js @@ -1,4 +1,6 @@ +let defSearchText = ''; window.addEventListener('load', function () { + defSearchText = document.querySelector('#live-search-data').innerHTML; document.querySelectorAll('.live-card-show')?.forEach(function (el) { el.addEventListener('click', async function (e) { e.preventDefault(); @@ -9,9 +11,54 @@ window.addEventListener('load', function () { }); }); - document.querySelector('#live-card-modal').addEventListener('click',function (e) { - if (e.target == this){ + document.querySelector('#live-card-modal').addEventListener('click', function (e) { + if (e.target == this) { document.querySelector('#live-card-modal').style.display = 'none'; } }); +}); + +document.querySelectorAll('.live-search')?.forEach(function (el) { + el.addEventListener('focus', function () { + const rect = this.getBoundingClientRect(); + const scrollTop = window.scrollY || document.documentElement.scrollTop; // Get the current scroll position + const scrollLeft = window.scrollX || document.documentElement.scrollLeft; // Get the current scroll position + + document.querySelector('#live-search-content').style.left = (rect.left + scrollLeft) + 'px'; // Adjust left position + document.querySelector('#live-search-content').style.top = (rect.bottom + scrollTop) + 'px'; // Adjust top position + document.querySelector('#live-search-content').style.width = rect.width + 'px'; + document.querySelector('#live-search-content').style.display = 'block'; + }) +}); + + + +document.querySelectorAll('.live-search')?.forEach(function (el) { + el.addEventListener('keyup', async function (e) { + + if (e.code == 'Escape'){ + document.querySelector('#live-search-content').style.display = 'none'; + return; + }else{ + document.querySelector('#live-search-content').style.display = 'block'; + } + if (this.value.length > 3){ + document.querySelector('#search-ajax-loader').style.display = 'inline-block'; + const url = this.closest('form').getAttribute('action'); + let response = await axios.post(url,{q: this.value}); + document.querySelector('#live-search-data').innerHTML = response.data ; + document.querySelector('#search-ajax-loader').style.display = 'none'; + }else{ + document.querySelector('#live-search-data').innerHTML = defSearchText; + } + }) +}); + +document.querySelectorAll('.live-search')?.forEach(function (el) { + el.addEventListener('blur', function () { + setTimeout(function () { + document.querySelector('#live-search-content').style.display = 'none'; + },500); + }); + }) diff --git a/resources/sass/client-custom/_lives.scss b/resources/sass/client-custom/_lives.scss index fbcc29d..5552f44 100644 --- a/resources/sass/client-custom/_lives.scss +++ b/resources/sass/client-custom/_lives.scss @@ -1,4 +1,14 @@ -#live-card-modal{ +@keyframes rotate-z { + from { + transform: rotateZ(0deg); + } + to { + transform: rotateZ(360deg); + } +} + + +#live-card-modal { display: none; position: fixed; top: 0; @@ -9,7 +19,7 @@ backdrop-filter: blur(7px); z-index: 9999; - #live-card-container{ + #live-card-container { background: var(--xshop-background); width: 300px; padding: 1rem; @@ -17,32 +27,78 @@ overflow-y: auto; max-width: 85%; - #live-card-list{ + #live-card-list { margin: 0; list-style: none; padding: 1rem 0; - li{ + li { border-radius: var(--xshop-border-radius); border: 1px solid var(--xshop-text); margin-bottom: .5rem; - .product-card-item{ + + .product-card-item { padding: 5px; display: grid; grid-template-columns: 4fr 8fr; grid-gap: 5px; - img{ + + img { width: 100%; height: 75px; object-fit: cover; - + border-radius: var(--xshop-border-radius); } - h3{ + + h3 { font-size: 18px; - margin: .5rem 0 ; + margin: .5rem 0; } } } } } } + +#live-search-content { + display: none; + background: var(--xshop-background); + padding: 1rem ; + position: absolute; + z-index: 9999; + top: 50px; + left: 0; + border-radius: var(--xshop-border-radius); + + li { + list-style: none; + border-radius: var(--xshop-border-radius); + border: 1px solid var(--xshop-text); + margin-bottom: .5rem; + + .product-search-item { + padding: 5px; + display: grid; + grid-template-columns: 4fr 8fr; + grid-gap: 5px; + + img { + width: 100%; + height: 75px; + object-fit: cover; + border-radius: var(--xshop-border-radius); + } + + h3 { + font-size: 18px; + margin: .5rem 0; + } + } + } + #search-ajax-loader{ + animation: rotate-z 1s linear infinite; + display: none; + font-size: 45px; + } +} + diff --git a/resources/views/components/card-items.blade.php b/resources/views/components/card-items.blade.php index 1d6bbf9..e9010e6 100644 --- a/resources/views/components/card-items.blade.php +++ b/resources/views/components/card-items.blade.php @@ -1,6 +1,7 @@ -@foreach(\App\Models\Product::whereIn('id', json_decode(\Cookie::get('card'), true)) - ->where('status', 1) - ->get() as $product) +@if(isJson(\Cookie::get('card'))) + @foreach(\App\Models\Product::whereIn('id', json_decode(\Cookie::get('card'), true)) + ->where('status', 1) + ->get() as $product)
  • {{$product->name}} @@ -19,4 +20,5 @@
    • -@endforeach + @endforeach +@endif diff --git a/resources/views/segments/slider/DowntownSlider/DowntownSlider.scss b/resources/views/segments/slider/DowntownSlider/DowntownSlider.scss index 840b581..5186458 100644 --- a/resources/views/segments/slider/DowntownSlider/DowntownSlider.scss +++ b/resources/views/segments/slider/DowntownSlider/DowntownSlider.scss @@ -1,12 +1,4 @@ -@keyframes rotate-z { - from { - transform: rotateZ(0deg); - } - to { - transform: rotateZ(360deg); - } -} .DowntownSlider { position: relative; diff --git a/resources/views/website/inc/website-foot.blade.php b/resources/views/website/inc/website-foot.blade.php index 609a61e..e301bcc 100644 --- a/resources/views/website/inc/website-foot.blade.php +++ b/resources/views/website/inc/website-foot.blade.php @@ -1,27 +1,35 @@ - -@yield('custom-foot') - - - + + @yield('custom-foot') + + + -@if(auth()->check() && (auth()->user()->hasRole('developer') || auth()->user()->hasRole('admin'))) - - - - -@endif -
    -
    - - - {{__("Go to card")}} - -
    - @include('components.card-items') + @if(auth()->check() && (auth()->user()->hasRole('developer') || auth()->user()->hasRole('admin'))) + + + + + @endif +
    +
    + + + {{__("Go to card")}} + +
    + @include('components.card-items') +
    +
    +
    +
    +
    + {{__("You need to type at least 4 characters to perform a search...")}} +
    +
    +
    -
    diff --git a/routes/web.php b/routes/web.php index 8b58728..dbe70d9 100644 --- a/routes/web.php +++ b/routes/web.php @@ -442,6 +442,7 @@ Route::middleware([\App\Http\Middleware\VisitorCounter::class]) Route::get('/video/{clip}', [ClientController::class, 'clip'])->name('clip'); Route::get('/category/{category}', [ClientController::class, 'category'])->name('category'); Route::get('/gallery/{gallery}', [ClientController::class, 'gallery'])->name('gallery'); + Route::post('/search', [ClientController::class, 'ajaxSearch'])->name('search.ajax'); Route::get('/search', [ClientController::class, 'search'])->name('search'); Route::get('attach/download/{attachment}', [ClientController::class, 'attachDl'])->name('attach-dl'); Route::get('pay/{invoice}', [ClientController::class, 'pay'])->name('pay');