added gallery grid theme part

added aparat gallery theme part
pull/49/head
A1Gard 3 months ago
parent 879ea9d1a3
commit 46c98f8178

@ -4,6 +4,7 @@ namespace App\Http\Controllers;
use App\Models\Comment; use App\Models\Comment;
use App\Models\Customer; use App\Models\Customer;
use App\Models\Gallery;
use App\Models\Group; use App\Models\Group;
use App\Models\Post; use App\Models\Post;
use App\Models\User; use App\Models\User;
@ -32,6 +33,14 @@ class ClientController extends Controller
$post->increment('view'); $post->increment('view');
return view('client.post', compact('area', 'post', 'title', 'subtitle')); 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() public function posts()
{ {

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

@ -58,4 +58,12 @@ class Image extends Model implements HasMedia
return asset('assets/upload/logo.svg'); 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');
}
}
} }

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

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

@ -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

@ -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>

@ -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;
});
});

@ -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": []
}

@ -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;
}
}

@ -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 */
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 650 KiB

@ -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>

@ -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);
}
});

@ -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": []
}

@ -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;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 371 KiB

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

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

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

@ -350,6 +350,11 @@ braces@~3.0.2:
dependencies: dependencies:
fill-range "^7.0.1" 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: chart.js@^4.4.3:
version "4.4.3" version "4.4.3"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.4.3.tgz#3b2e11e7010fefa99b07d0349236f5098e5226ad" resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-4.4.3.tgz#3b2e11e7010fefa99b07d0349236f5098e5226ad"

Loading…
Cancel
Save