From fda2eb0233485f2ce5ae3e29a6931e28f95ce81c Mon Sep 17 00:00:00 2001 From: panabonic Date: Mon, 11 Dec 2023 18:20:00 +0300 Subject: [PATCH] fullscreen gallery update --- .../_modules/layout/grid/grid.component.html | 7 +- src/app/_modules/layout/layout.module.ts | 6 +- .../images/images-section.component.html | 12 +-- .../images/images-section.component.scss | 6 +- .../basic/images/images-section.component.ts | 6 +- .../fullscreen-gallery.component.html | 7 ++ .../fullscreen-gallery.component.scss | 31 ++++++ .../fullscreen-gallery.component.ts | 33 ++++++ .../swiper-gallery.component.html | 46 +++----- .../swiper-gallery.component.scss | 101 ++++++++---------- .../swiper-gallery.component.ts | 61 +++++------ src/app/_modules/widjet/widjet.module.ts | 61 ++++++----- src/app/_services/gallery.service.ts | 30 ++++++ src/app/_services/lists.service.ts | 3 +- 14 files changed, 233 insertions(+), 177 deletions(-) create mode 100644 src/app/_modules/widjet/swiper-gallery/fullscreen/fullscreen-gallery.component.html create mode 100644 src/app/_modules/widjet/swiper-gallery/fullscreen/fullscreen-gallery.component.scss create mode 100644 src/app/_modules/widjet/swiper-gallery/fullscreen/fullscreen-gallery.component.ts create mode 100644 src/app/_services/gallery.service.ts diff --git a/src/app/_modules/layout/grid/grid.component.html b/src/app/_modules/layout/grid/grid.component.html index 8b20240..58b57be 100644 --- a/src/app/_modules/layout/grid/grid.component.html +++ b/src/app/_modules/layout/grid/grid.component.html @@ -1,7 +1,6 @@ -
@@ -12,10 +11,8 @@
- + - - - + diff --git a/src/app/_modules/layout/layout.module.ts b/src/app/_modules/layout/layout.module.ts index f347a30..651d73b 100644 --- a/src/app/_modules/layout/layout.module.ts +++ b/src/app/_modules/layout/layout.module.ts @@ -10,9 +10,9 @@ import {FooterComponent} from "@app/_modules/layout/footer/footer.component"; import {GridComponent} from "@app/_modules/layout/grid/grid.component"; import {SettingSiteComponent} from "@app/_modules/layout/setting-site/setting-site.component"; import {HeaderUserBarComponent} from "@app/_modules/layout/header/user-bar/header-user-bar.component"; -import { LeftContentComponent } from './left-content/left-content.component'; -import { RightContentComponent } from './right-content/right-content.component'; -import { JumbotronComponent } from './jumbotron/jumbotron.component'; +import {LeftContentComponent} from './left-content/left-content.component'; +import {RightContentComponent} from './right-content/right-content.component'; +import {JumbotronComponent} from './jumbotron/jumbotron.component'; @NgModule({ imports: [ diff --git a/src/app/_modules/pages/sections/types/basic/images/images-section.component.html b/src/app/_modules/pages/sections/types/basic/images/images-section.component.html index d140456..e427fc8 100644 --- a/src/app/_modules/pages/sections/types/basic/images/images-section.component.html +++ b/src/app/_modules/pages/sections/types/basic/images/images-section.component.html @@ -1,21 +1,17 @@
-
+
-
+
- diff --git a/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss b/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss index 6acc99a..180cc6b 100644 --- a/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss +++ b/src/app/_modules/pages/sections/types/basic/images/images-section.component.scss @@ -1,3 +1,7 @@ +.swiper-box { + width: 100%; + height: 700px; +} :host{ position: relative; -} \ No newline at end of file +} diff --git a/src/app/_modules/pages/sections/types/basic/images/images-section.component.ts b/src/app/_modules/pages/sections/types/basic/images/images-section.component.ts index a9e4bef..a54155c 100644 --- a/src/app/_modules/pages/sections/types/basic/images/images-section.component.ts +++ b/src/app/_modules/pages/sections/types/basic/images/images-section.component.ts @@ -1,6 +1,7 @@ import {Component, Input} from '@angular/core'; import {ObjectsService} from "@app/_services"; import SwiperCore, {Navigation, Pagination, SwiperOptions} from 'swiper'; +import {GalleryService} from "@app/_services/gallery.service"; SwiperCore.use([Navigation, Pagination]); @Component({ @@ -25,7 +26,7 @@ export class ImagesSectionComponent { public activeIndex: number = 0 public tmpNumber: number = 0 - constructor(private objectsService: ObjectsService) { + constructor(private objectsService: ObjectsService, private galleryService: GalleryService) { } @@ -80,7 +81,6 @@ export class ImagesSectionComponent { } show(i:number): void { - this.activeIndex = i; - this.showFullscreen = true + this.galleryService.show(this.items, i); } } diff --git a/src/app/_modules/widjet/swiper-gallery/fullscreen/fullscreen-gallery.component.html b/src/app/_modules/widjet/swiper-gallery/fullscreen/fullscreen-gallery.component.html new file mode 100644 index 0000000..3f6f173 --- /dev/null +++ b/src/app/_modules/widjet/swiper-gallery/fullscreen/fullscreen-gallery.component.html @@ -0,0 +1,7 @@ +
+ +
+ +
+
+ diff --git a/src/app/_modules/widjet/swiper-gallery/fullscreen/fullscreen-gallery.component.scss b/src/app/_modules/widjet/swiper-gallery/fullscreen/fullscreen-gallery.component.scss new file mode 100644 index 0000000..db300f1 --- /dev/null +++ b/src/app/_modules/widjet/swiper-gallery/fullscreen/fullscreen-gallery.component.scss @@ -0,0 +1,31 @@ +.fullscreen-gallery { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + padding: 10px 0; + background-color: #111111; + z-index: 10000; + + .swiper-close{ + position: absolute; + z-index: 10; + top: 20px; + right: 20px; + width: 40px; + height: 40px; + background-color: #fff; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); + border-radius: 20px; + cursor: pointer; + } + +} + + + + diff --git a/src/app/_modules/widjet/swiper-gallery/fullscreen/fullscreen-gallery.component.ts b/src/app/_modules/widjet/swiper-gallery/fullscreen/fullscreen-gallery.component.ts new file mode 100644 index 0000000..09714e5 --- /dev/null +++ b/src/app/_modules/widjet/swiper-gallery/fullscreen/fullscreen-gallery.component.ts @@ -0,0 +1,33 @@ +import {Component} from '@angular/core'; +import {GalleryService} from "@app/_services/gallery.service"; + +@Component({ + selector: 'fullscreen-gallery', + templateUrl: 'fullscreen-gallery.component.html', + styleUrls: ['fullscreen-gallery.component.scss'] +}) +export class FullscreenGalleryComponent { + + constructor(private galleryService: GalleryService) { + } + + get items() { + return this.galleryService.images; + } + get position() { + return this.galleryService.position; + } + + get isSingle(): boolean { + return this.items?.length < 2; + } + + + ngOnInit() { + } + + + close() { + this.galleryService.close(); + } +} diff --git a/src/app/_modules/widjet/swiper-gallery/swiper-gallery.component.html b/src/app/_modules/widjet/swiper-gallery/swiper-gallery.component.html index 5f8f0b2..4f0f7f8 100644 --- a/src/app/_modules/widjet/swiper-gallery/swiper-gallery.component.html +++ b/src/app/_modules/widjet/swiper-gallery/swiper-gallery.component.html @@ -1,34 +1,16 @@ -
- -
- -
- - - -
- -
+
+
+ + + - - -
-
-
+ +
+
+ + + + + +
- - - -
- -
- - - -
- -
- - diff --git a/src/app/_modules/widjet/swiper-gallery/swiper-gallery.component.scss b/src/app/_modules/widjet/swiper-gallery/swiper-gallery.component.scss index d4885c1..1f9e5bb 100644 --- a/src/app/_modules/widjet/swiper-gallery/swiper-gallery.component.scss +++ b/src/app/_modules/widjet/swiper-gallery/swiper-gallery.component.scss @@ -1,65 +1,52 @@ -.single{ - width: 100%; - height: 100%; - img{ - width: 100%; - height: 100%; - object-fit:contain; - } -} +.swiper-gallery::ng-deep { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; -.top-swiper{ - width: 100%; - height: 80%; - position: relative; - --swiper-navigation-color: #fff; - --swiper-pagination-color: #fff; - >swiper{ - height: 100%; - .slide{ - cursor:w-resize; - img { - object-fit:contain; - } - } - } -} -.thumb{ - margin-top: 10px; + --swiper-navigation-color: #fff; + --swiper-pagination-color: #fff; + + .swiper-container { width: 100%; - height: calc( 20% - 10px); - cursor: pointer; + height: 300px; + margin-left: auto; + margin-right: auto; + } + .swiper-slide { img { - - object-fit:cover; - &:not(.active){ - filter: brightness(50%); - } + width: 100%; + height: 100%; } -} -.slide{ + } + .gallery-top { + height: 80%; width: 100%; - height: 100%; - display: block; - background-color: grey; - img { - width: 100%; - height: 100%; + flex-grow: 1; + swiper { + height: 100%; + img {object-fit: contain;} } -} -.swiper-close{ - position: absolute; - z-index: 10; - top: 20px; - right: 20px; - width: 40px; - height: 40px; - background-color: #fff; - display: flex; - align-items: center; - justify-content: center; - box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); - border-radius: 20px; - cursor: pointer; + } + .gallery-thumbs { + height: 20%; + flex-shrink: 0; + padding: 10px 0 0; + swiper { + height: 100%; + img {object-fit: cover;} + } + } + .gallery-thumbs .swiper-slide { + width: 25%; + height: 100%; + opacity: 0.4; + } + .gallery-thumbs .swiper-slide-active { + opacity: 1; + } } + + + diff --git a/src/app/_modules/widjet/swiper-gallery/swiper-gallery.component.ts b/src/app/_modules/widjet/swiper-gallery/swiper-gallery.component.ts index 385bfe7..a7b4fda 100644 --- a/src/app/_modules/widjet/swiper-gallery/swiper-gallery.component.ts +++ b/src/app/_modules/widjet/swiper-gallery/swiper-gallery.component.ts @@ -1,7 +1,7 @@ import { Component, EventEmitter, Input, Output, ViewChild, HostListener} from '@angular/core'; -import SwiperCore, {Navigation, Pagination, SwiperOptions} from 'swiper'; +import SwiperCore, {Navigation, SwiperOptions} from 'swiper'; import { SwiperComponent } from "swiper/angular"; -SwiperCore.use([Navigation, Pagination]); +SwiperCore.use([Navigation]); @Component({ selector: 'swiper-gallery', @@ -15,60 +15,47 @@ export class SwiperGalleryComponent { @Output() event = new EventEmitter() - @ViewChild('swiper', { static: false }) swiper?: SwiperComponent; - @ViewChild('thumb', { static: false }) thumb?: SwiperComponent; + @ViewChild('swiper') swiper?: SwiperComponent; + @ViewChild('thumb') thumb?: SwiperComponent; - @HostListener('window:keydown', ['$event']) - handleKeyDown(event: KeyboardEvent) { - if (event.key === 'Escape') this.event.emit('close') -} - - public active:number; - public single: boolean; + @HostListener('window:keydown', ['$event']) handleKeyDown(event: KeyboardEvent) { + if (event.key === 'Escape') this.event.emit('close'); + } public config: SwiperOptions = { slidesPerView: 1, - spaceBetween: 50, - navigation: { - nextEl: ".swiper-button-next", - prevEl: ".swiper-button-prev", - }, - pagination: { - el: ".swiper-pagination", - } + spaceBetween: 10, + navigation: true }; public thumbConfig: SwiperOptions = { spaceBetween: 10, - slidesPerView: 5, - freeMode: true, - watchSlidesProgress: true, + centeredSlides: true, + slidesPerView: 'auto', + touchRatio: 0.2, + slideToClickedSlide: true } - ngOnInit(){ - this.active = this.start; - this.single = this.items.length === 1; + ngOnInit() { } - swiperOn(swiper){ - this.swiper.swiperRef.slideTo(this.start) + + get isSingle(): boolean { + return this.items?.length < 2; } - onSwiperChange(event) { - this.active = event[0].realIndex; - this.thumb.swiperRef.slideTo(event[0].realIndex-1) + + onSwiperInit() { + this.swiper.swiperRef.slideTo(this.start, 0); + this.thumb.swiperRef.slideTo(this.start, 0); } - thumbOn(swiper){ - this.thumb.swiperRef.slideTo(this.start-2) + onSlideChange(event) { + this.thumb.swiperRef.slideTo(event[0].realIndex); + this.swiper.swiperRef.slideTo(event[0].realIndex); } - select(i){ - this.active = i; - this.thumb.swiperRef.slideTo(i) - this.swiper.swiperRef.slideTo(i) - } close(){ this.event.emit('close') diff --git a/src/app/_modules/widjet/widjet.module.ts b/src/app/_modules/widjet/widjet.module.ts index 5626776..6af64bc 100644 --- a/src/app/_modules/widjet/widjet.module.ts +++ b/src/app/_modules/widjet/widjet.module.ts @@ -12,38 +12,41 @@ import { FileIcoComponent } from './file-ico/file-ico.component'; import { ModalComponent } from './modal/modal.component'; import {SwiperModule} from "swiper/angular"; import { SwiperGalleryComponent } from './swiper-gallery/swiper-gallery.component'; +import {FullscreenGalleryComponent} from "@app/_modules/widjet/swiper-gallery/fullscreen/fullscreen-gallery.component"; @NgModule({ - imports:[ - BrowserModule, - RouterModule, - SwiperModule - // QRCodeModule - ], - declarations: [ - IcoComponent, - // QRCodeComponent, - DropDownComponent, - SliderComponent, - SwitchComponent, - LocaleComponent, - FileIcoComponent, - ModalComponent, - SwiperGalleryComponent, - ], - exports: [ - IcoComponent, - // QRCodeComponent, - DropDownComponent, - SliderComponent, - SwitchComponent, - LocaleComponent, - FileIcoComponent, - ModalComponent, - SwiperGalleryComponent - ] + imports:[ + BrowserModule, + RouterModule, + SwiperModule + // QRCodeModule + ], + declarations: [ + IcoComponent, + // QRCodeComponent, + DropDownComponent, + SliderComponent, + SwitchComponent, + LocaleComponent, + FileIcoComponent, + ModalComponent, + SwiperGalleryComponent, + FullscreenGalleryComponent + ], + exports: [ + IcoComponent, + // QRCodeComponent, + DropDownComponent, + SliderComponent, + SwitchComponent, + LocaleComponent, + FileIcoComponent, + ModalComponent, + SwiperGalleryComponent, + FullscreenGalleryComponent + ] }) export class WidjetModule { -} \ No newline at end of file +} diff --git a/src/app/_services/gallery.service.ts b/src/app/_services/gallery.service.ts new file mode 100644 index 0000000..afa3a6e --- /dev/null +++ b/src/app/_services/gallery.service.ts @@ -0,0 +1,30 @@ +import {Injectable} from '@angular/core'; +import {BehaviorSubject} from 'rxjs'; + +@Injectable({providedIn: 'root'}) +export class GalleryService { + public imagesSubject = new BehaviorSubject(null); + public positionSubject = new BehaviorSubject(null); + + constructor() { + } + + get images(): any { + return this.imagesSubject.value; + } + get position() { + return this.positionSubject.value; + } + + + show(images: any, position: number) { + this.imagesSubject.next(images); + this.positionSubject.next(position); + } + + close() { + this.imagesSubject.next(null); + this.positionSubject.next(null); + } + +} diff --git a/src/app/_services/lists.service.ts b/src/app/_services/lists.service.ts index fd8c580..2a1536c 100644 --- a/src/app/_services/lists.service.ts +++ b/src/app/_services/lists.service.ts @@ -16,8 +16,7 @@ export class ListsService { init() { return { controls: new BehaviorSubject({filters: {}, order: {}, page: 1}), - result: new BehaviorSubject({}), - + result: new BehaviorSubject({}) }; }