Merge branch 'master' of https://gitea.testnir.ru/NirGroup/multi-option
Boris Voropaev
commit
b84c331917
|
|
@ -1,7 +1,6 @@
|
|||
<router-outlet name="auth"></router-outlet>
|
||||
<router-outlet name="slider"></router-outlet>
|
||||
|
||||
|
||||
<div class="wrapper">
|
||||
<header class="space"></header>
|
||||
<jumbotron></jumbotron>
|
||||
|
|
@ -12,10 +11,8 @@
|
|||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
<right-content></right-content>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer class="space"></footer>
|
||||
|
||||
</div>
|
||||
|
||||
<fullscreen-gallery></fullscreen-gallery>
|
||||
|
|
|
|||
|
|
@ -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: [
|
||||
|
|
|
|||
|
|
@ -1,21 +1,17 @@
|
|||
<div *ngIf="items?.length">
|
||||
|
||||
<div *ngIf="imageType!=='carousel'&&!(imageType=='large-preview'&&items.length==1)"
|
||||
class="items" [ngClass]="imageType">
|
||||
<div *ngIf="imageType!=='carousel'&&!(imageType=='large-preview'&&items.length==1)"
|
||||
class="items" [ngClass]="imageType">
|
||||
<div class="item" *ngFor="let item of items; let i = index">
|
||||
<img [src]="item.links?.full" (click)="show(i)"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div *ngIf="imageType==='carousel'" id="section-{{section.id}}" class="carousel">
|
||||
<div *ngIf="imageType==='carousel'" id="section-{{section.id}}" class="carousel">
|
||||
<div class="swiper-box">
|
||||
<swiper-gallery [items]="items"></swiper-gallery>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div *ngIf="showFullscreen" class="fullscreen">
|
||||
<swiper-gallery [items]="items" [start]="activeIndex" (event)="showFullscreen=false" [closing]="true"></swiper-gallery>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
.swiper-box {
|
||||
width: 100%;
|
||||
height: 700px;
|
||||
}
|
||||
:host{
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import {Component, Input} from '@angular/core';
|
||||
import {ObjectsService} from "@app/_services";
|
||||
import SwiperCore, {Navigation, Pagination, SwiperOptions} from 'swiper';
|
||||
SwiperCore.use([Navigation, Pagination]);
|
||||
import {GalleryService} from "@app/_services/gallery.service";
|
||||
|
||||
@Component({
|
||||
selector: 'images-section',
|
||||
|
|
@ -11,32 +10,11 @@ SwiperCore.use([Navigation, Pagination]);
|
|||
export class ImagesSectionComponent {
|
||||
@Input() section: any;
|
||||
|
||||
public config: SwiperOptions = {
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 50
|
||||
};
|
||||
|
||||
public parsedPhotos: any[] = []
|
||||
public activePhoto: string = ''
|
||||
public nextId:string;
|
||||
public backId:string;
|
||||
public showId: string = ''
|
||||
public showFullscreen = false;
|
||||
public activeIndex: number = 0
|
||||
public tmpNumber: number = 0
|
||||
|
||||
constructor(private objectsService: ObjectsService) {
|
||||
constructor(private objectsService: ObjectsService, private galleryService: GalleryService) {
|
||||
}
|
||||
|
||||
|
||||
ngOnInit() {
|
||||
this.config.navigation = {
|
||||
prevEl: `#section-${this.section?.id} .prev`, nextEl: `#section-${this.section?.id} .next`
|
||||
}
|
||||
|
||||
setTimeout(()=>{
|
||||
this.parsed();
|
||||
}, 300)
|
||||
}
|
||||
|
||||
get items() {
|
||||
|
|
@ -47,40 +25,8 @@ export class ImagesSectionComponent {
|
|||
return type.name;
|
||||
}
|
||||
|
||||
set photo(activePhoto: string) {
|
||||
this.activePhoto = activePhoto
|
||||
}
|
||||
get photo(): string {
|
||||
return this.activePhoto
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
parsed(): void {
|
||||
this.tmpNumber = 0
|
||||
this.parsedPhotos = this.items || []
|
||||
this.parsedPhotos.map((photo: any) => {
|
||||
if (this.tmpNumber===0) {
|
||||
photo.active = true
|
||||
this.photo = photo.links.full
|
||||
this.showId = photo.id
|
||||
} else {
|
||||
photo.active = false
|
||||
if (this.tmpNumber===1) {
|
||||
this.nextId = photo.id
|
||||
}
|
||||
}
|
||||
this.tmpNumber++
|
||||
if (this.items.length > 1 && this.items.length == this.tmpNumber) {
|
||||
this.backId = photo.id
|
||||
}
|
||||
return photo
|
||||
})
|
||||
}
|
||||
|
||||
show(i:number): void {
|
||||
this.activeIndex = i;
|
||||
this.showFullscreen = true
|
||||
this.galleryService.show(this.items, i);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
<div class="fullscreen-gallery" *ngIf="items?.length">
|
||||
<swiper-gallery [items]="items" [start]="position"></swiper-gallery>
|
||||
<div (click)="close()" class="swiper-close">
|
||||
<ico ico="close_24" color="var(--prime)"></ico>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -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();
|
||||
}
|
||||
}
|
||||
|
|
@ -1,34 +1,16 @@
|
|||
<div *ngIf="single" class="single">
|
||||
<img [src]="items[0].links?.full"/>
|
||||
</div>
|
||||
|
||||
<div class="top-swiper" *ngIf="!single">
|
||||
<swiper #swiper (swiper)="swiperOn($event)" (slideChange)="onSwiperChange($event)"
|
||||
[config]="config" class="swiper">
|
||||
<ng-template ngFor let-item [ngForOf]="items">
|
||||
<ng-template swiperSlide>
|
||||
<div class="slide">
|
||||
<img [src]="item?.links?.full"/>
|
||||
</div>
|
||||
<div class="swiper-gallery">
|
||||
<div class="gallery-top">
|
||||
<swiper #swiper [config]="config" (swiper)="onSwiperInit()" (slideChange)="onSlideChange($event)">
|
||||
<ng-template *ngFor="let item of items; let i = index" swiperSlide>
|
||||
<img [src]="item?.links?.full" />
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
</swiper>
|
||||
<div class="swiper-pagination"></div>
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
</swiper>
|
||||
</div>
|
||||
<div class="gallery-thumbs" *ngIf="!isSingle">
|
||||
<swiper #thumb [config]="thumbConfig" (swiper)="onSwiperInit()" (slideChange)="onSlideChange($event)">
|
||||
<ng-template *ngFor="let item of items; let i = index" swiperSlide>
|
||||
<img [src]="item?.links?.thumb" />
|
||||
</ng-template>
|
||||
</swiper>
|
||||
</div>
|
||||
</div>
|
||||
<swiper #thumb (swiper)="thumbOn($event)"
|
||||
*ngIf="!single" [config]="thumbConfig" class="thumb">
|
||||
<ng-template ngFor let-item [ngForOf]="items" let-i="index" (click)="select(i)">
|
||||
<ng-template swiperSlide>
|
||||
<div (click)="select(i)" class="slide">
|
||||
<img [src]="item?.links?.thumb" [class.active]="i==active"/>
|
||||
</div>
|
||||
</ng-template>
|
||||
</ng-template>
|
||||
</swiper>
|
||||
<div (click)="close()" *ngIf="closing" class="swiper-close">
|
||||
<ico ico="close_24" color="var(--prime)"></ico>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,66 +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;
|
||||
object-position: 50% 20%;
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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<string>()
|
||||
|
||||
@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')
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
import {Injectable} from '@angular/core';
|
||||
import {BehaviorSubject} from 'rxjs';
|
||||
|
||||
@Injectable({providedIn: 'root'})
|
||||
export class GalleryService {
|
||||
public imagesSubject = new BehaviorSubject<any>(null);
|
||||
public positionSubject = new BehaviorSubject<any>(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);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -16,8 +16,7 @@ export class ListsService {
|
|||
init() {
|
||||
return {
|
||||
controls: new BehaviorSubject<any>({filters: {}, order: {}, page: 1}),
|
||||
result: new BehaviorSubject<any>({}),
|
||||
|
||||
result: new BehaviorSubject<any>({})
|
||||
};
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue