added gallery grid theme part

added aparat gallery theme part

app/Http/Controllers/ClientController.php

@@ -4,6 +4,7 @@ namespace App\Http\Controllers;
 
 use App\Models\Comment;
 use App\Models\Customer;
+use App\Models\Gallery;
 use App\Models\Group;
 use App\Models\Post;
 use App\Models\User;
@@ -32,6 +33,14 @@ class ClientController extends Controller
         $post->increment('view');
         return view('client.post', compact('area', 'post', 'title', 'subtitle'));
     }
+    public function gallery(Gallery $gallery)
+    {
+        $area = 'gallery';
+        $title = $gallery->title;
+        $subtitle = \Str::limit(strip_tags($gallery->description),15);
+        $gallery->increment('view');
+        return view('client.gallery', compact('area', 'gallery', 'title', 'subtitle'));
+    }
 
     public function posts()
     {

app/Models/Gallery.php

@@ -71,8 +71,7 @@ class Gallery extends Model implements HasMedia
     }
 
     public function webUrl(){
-        return  '#';// WIP
+        return route('client.gallery',$this->slug);
-        return route('');
     }
 
 

app/Models/Image.php

@@ -58,4 +58,12 @@ class Image extends Model implements HasMedia
             return asset('assets/upload/logo.svg');
         }
     }
+    public function imgOriginalUrl()
+    {
+        if ($this->getMedia()->count() > 0) {
+            return $this->getMedia()->first()->getUrl();
+        } else {
+            return asset('assets/upload/logo.svg');
+        }
+    }
 }

database/migrations/2024_05_07_124417_create_galleries_table.php

@@ -16,6 +16,7 @@ return new class extends Migration
             $table->text('title');
             $table->string('slug')->unique();
             $table->text('description')->nullable();
+            $table->unsignedTinyInteger('view')->default(0);
             $table->unsignedTinyInteger('status')->default(0);
             $table->unsignedBigInteger('user_id');
             $table->timestamps();

package.json

@@ -17,6 +17,7 @@
         "vue": "^3.2.37"
     },
     "dependencies": {
+        "bs5-lightbox": "^1.8.3",
         "chart.js": "^4.4.3",
         "leaflet": "^1.9.4",
         "remixicon": "^4.3.0",

resources/views/client/gallery.blade.php

@@ -0,0 +1,13 @@
+@extends('website.inc.website-layout')
+
+@section('title')
+    {{$gallery->title}} - {{config('app.name')}}
+@endsection
+@section('content')
+    <main>
+    @foreach(getParts($area) as $part)
+        @php($p = $part->getBladeWithData($gallery))
+        @include($p['blade'],['data' => $p['data']])
+    @endforeach
+    </main>
+@endsection

resources/views/segments/gallery/AparatGallery/AparatGallery.blade.php

@@ -0,0 +1,17 @@
+<section id='AparatGallery'>
+    {{--    <div class="{{gfx()['container']}}">--}}
+    <img src="{{$gallery->images[0]->imgOriginalUrl()}}" id="aparat-main-image" alt="">
+    <div class="aparat-list">
+        @if($gallery->images->count() > 0)
+            @foreach($gallery->images as $image)
+                <div class="aparat-item">
+                    <a class="gallery-image aparat-link"
+                       href="{{$image->imgOriginalUrl()}}">
+                        <img src="{{$image->imgurl()}}" class="img-fluid" alt="">
+                    </a>
+                </div>
+            @endforeach
+        @endif
+    </div>
+    {{--    </div>--}}
+</section>

resources/views/segments/gallery/AparatGallery/AparatGallery.js

@@ -0,0 +1,68 @@
+
+document.addEventListener('DOMContentLoaded', function () {
+
+    const aparatList = document.querySelector('.aparat-list');
+    let isScrolling = false;
+    let startX;
+    let scrollLeft;
+    const scrollSpeed = 150; // Adjust this value to change scroll speed
+    let moveInterval;
+    let me;
+
+    document.querySelectorAll('.aparat-link')?.forEach(function (el) {
+        el.addEventListener('click', function (e) {
+            e.preventDefault();
+            document.querySelector('#aparat-main-image').setAttribute('src', this.getAttribute('href'));
+        });
+    });
+
+
+    aparatList.addEventListener('mousemove', (e) => {
+        me = e;
+    });
+
+    aparatList.addEventListener('mousedown', (e) => {
+        isScrolling = true;
+        startX = e.pageX - aparatList.offsetLeft;
+        scrollLeft = aparatList.scrollLeft;
+    });
+
+    aparatList.addEventListener('mouseleave', () => {
+        isScrolling = false;
+        try {
+            clearInterval(moveInterval);
+        } catch (e) {
+        }
+
+    });
+    aparatList.addEventListener('mouseenter', () => {
+        moveInterval = setInterval( () => {
+            if (!isScrolling) {
+                const rect = aparatList.getBoundingClientRect();
+                const isLeftSide = me.clientX - rect.left < rect.width / 5;
+                const isRightSide = me.clientX > rect.right - rect.width / 5;
+                console.log(isRightSide);
+
+                if (isLeftSide && aparatList.scrollLeft > 0) {
+                    aparatList.scrollLeft -= scrollSpeed;
+                } else if (isRightSide && aparatList.scrollLeft < aparatList.scrollWidth - aparatList.clientWidth ) {
+                    aparatList.scrollLeft += scrollSpeed;
+                }
+            }
+        },1100);
+    });
+
+    aparatList.addEventListener('mouseup', () => {
+        isScrolling = false;
+    });
+
+    aparatList.addEventListener('mousemove', (e) => {
+        if (!isScrolling) return;
+        e.preventDefault();
+        const x = e.pageX - aparatList.offsetLeft;
+        const walk = (x - startX) * 2;
+        aparatList.scrollLeft = scrollLeft - walk;
+    });
+
+
+});

resources/views/segments/gallery/AparatGallery/AparatGallery.json

@@ -0,0 +1,10 @@
+{
+    "name": "AparatGallery",
+    "version": "1.0",
+    "author": "xStack",
+    "email": "xshop@xstack.ir",
+    "license": "GPL-3.0-or-later",
+    "url": "https:\/\/xstack.ir",
+    "author_url": "https:\/\/4xmen.ir",
+    "packages": []
+}

resources/views/segments/gallery/AparatGallery/AparatGallery.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace Resources\Views\Segments;
+
+use App\Models\Part;
+
+class AparatGallery
+{
+    public static function onAdd(Part $part = null)
+    {
+
+    }
+    public static function onRemove(Part $part = null)
+    {
+
+    }
+    public static function onMount(Part $part = null)
+    {
+        return $part;
+    }
+}

resources/views/segments/gallery/AparatGallery/AparatGallery.scss

@@ -0,0 +1,35 @@
+#AparatGallery {
+    // scss
+    #aparat-main-image {
+        height: 80vh;
+        width: 100%;
+        object-fit: cover;
+    }
+
+    .aparat-list {
+
+        display: flex;
+        overflow-x: auto;
+        scroll-behavior: smooth;
+        scrollbar-width: none; /* Firefox */
+        -ms-overflow-style: none; /* Internet Explorer 10+ */
+
+        .aparat-item {
+            min-width: 350px;
+            display: inline-block;
+
+            .aparat-link {
+                img {
+                    height: 20vh;
+                    width: 100%;
+                    object-fit: cover;
+                }
+            }
+        }
+
+        &::-webkit-scrollbar {
+            display: none; /* WebKit */
+        }
+    }
+
+}

resources/views/segments/gallery/GallaryGrid/GallaryGrid.blade.php

@@ -0,0 +1,15 @@
+<section class='GallaryGrid'>
+    <div class="{{gfx()['container']}}">
+        <div class="row py-4">
+            @if($gallery->images->count() > 0)
+                @foreach($gallery->images as $image)
+                    <div class="col-lg-3 col-md-6 mb-4">
+                        <a class="gallery-image light-box" data-toggle="lightbox" data-gallery="{{$gallery->slug}}" href="{{$image->imgOriginalUrl()}}">
+                            <img src="{{$image->imgurl()}}" class="img-fluid" alt="">
+                        </a>
+                    </div>
+                @endforeach
+            @endif
+        </div>
+    </div>
+</section>

resources/views/segments/gallery/GallaryGrid/GallaryGrid.js

@@ -0,0 +1,10 @@
+import Lightbox from 'bs5-lightbox' ;
+
+document.addEventListener('DOMContentLoaded',function () {
+
+
+    for (const el of document.querySelectorAll('.light-box')) {
+        el.addEventListener('click', Lightbox.initialize);
+    }
+
+});

resources/views/segments/gallery/GallaryGrid/GallaryGrid.json

@@ -0,0 +1,10 @@
+{
+    "name": "GallaryGrid",
+    "version": "1.0",
+    "author": "xStack",
+    "email": "xshop@xstack.ir",
+    "license": "GPL-3.0-or-later",
+    "url": "https:\/\/xstack.ir",
+    "author_url": "https:\/\/4xmen.ir",
+    "packages": []
+}

resources/views/segments/gallery/GallaryGrid/GallaryGrid.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace Resources\Views\Segments;
+
+use App\Models\Part;
+
+class GallaryGrid
+{
+    public static function onAdd(Part $part = null)
+    {
+
+    }
+    public static function onRemove(Part $part = null)
+    {
+
+    }
+    public static function onMount(Part $part = null)
+    {
+        return $part;
+    }
+}

resources/views/segments/gallery/GallaryGrid/GallaryGrid.scss

@@ -0,0 +1,4 @@
+
+.GallaryGrid {
+    // scss
+}

resources/views/segments/group/SubGroupsGrid/SubGroupsGrid.blade.php

@@ -7,7 +7,7 @@
                 </h3>
                 <div class="row">
                     @foreach($group->children as $subGroup)
-                        <div class="col-md-4">
+                        <div class="col-md">
                             <div class="sub-group">
                                 <img src="{{$subGroup->imgUrl()}}" alt="{{$subGroup->name}}" class="img-fluid">
                                 <h4>

resources/views/segments/group/SubGroupsGrid/SubGroupsGrid.scss

@@ -1,6 +1,6 @@
 .SubGroupsGrid {
     .row{
-        .col-md-4{
+        [class^="col-md"]{
             padding: 2px;
         }
     }

routes/web.php

@@ -361,6 +361,7 @@ Route::name('client.')->group(function (){
     Route::get('/posts', [\App\Http\Controllers\ClientController::class,'posts'])->name('posts');
     Route::get('/tag/{post}', [\App\Http\Controllers\ClientController::class,'tag'])->name('tag'); // wip
     Route::get('/group/{group}', [\App\Http\Controllers\ClientController::class,'group'])->name('group');
+    Route::get('/gallery/{gallery}', [\App\Http\Controllers\ClientController::class,'gallery'])->name('gallery');
     Route::get('/search', [\App\Http\Controllers\ClientController::class,'search'])->name('search');
     Route::get('/{post}', [\App\Http\Controllers\ClientController::class,'post'])->name('post');
 

yarn.lock

@@ -350,6 +350,11 @@ braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
+bs5-lightbox@^1.8.3:
+  version "1.8.3"
+  resolved "https://registry.yarnpkg.com/bs5-lightbox/-/bs5-lightbox-1.8.3.tgz#01b5ad4fe10c81c4e88ef38ba4bffdcc04b9e411"
+  integrity sha512-fEIjplDAtWw17vi6dFeu7+Td52sk3qQ9FbOOVSpWM3nqio502vZKIA0Q0De9D9ah44BGd+zOKUsikRPlKE2hFg==
+
 chart.js@^4.4.3:
   version "4.4.3"
   resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.4.3.tgz#3b2e11e7010fefa99b07d0349236f5098e5226ad"