+
![]()
-
+
-
+
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 @@
-
+
+
- ![]()
-
-
-
-
-
-
-
-
-
-
-
-
-()
- @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({})
};
}
- ![]()
-
+
+
-
+
+
+ ![]()
-
-
-
-
-
+
+
+
+
+
+ ![]()
+
+
+
- ![]()
-
-
-
-
-
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