Andrey
/
object-type-constructor-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

swiper

master
Boris Voropaev 2024-01-17 13:47:09 +03:00
parent db75ec2807
commit fdd8089c4d
10 changed files with 225 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/_modules/pages/menu/pages-menu.component.ts
View File

@ -28,7 +28,6 @@ export class PagesMenuComponent implements OnInit {
resp=>{
let [currentPage, rootPages] = resp
if(currentPage){
console.log('current')
let menuTree = currentPage.parents.data.reduceRight(
(menuTree,item)=>{
let fothersSonID = item.children.data.findIndex(

9
src/app/_modules/pages/sections/types/basic/cards/cards-section.module.ts
View File

@ -6,15 +6,17 @@ import {CardsSectionItemComponent} from "@app/_modules/pages/sections/types/basi
import {CardsItemPersonsComponent} from "@app/_modules/pages/sections/types/basic/cards/items/item/types/persons/cards-item-persons.component";
import {CardsItemPartnersComponent} from "@app/_modules/pages/sections/types/basic/cards/items/item/types/partners/cards-item-partners.component";
import {SortablejsModule} from "@dustfoundation/ngx-sortablejs";
import {SwiperModule} from "swiper/angular";
import { WidjetModule } from '@app/_modules/widjet/widjet.module';
import { CardsItemDefaultComponent } from './items/item/types/default/cards-item-default.component';
import { CardsItemSlidesComponent } from './items/item/types/slides/cards-item-slides.component';
@NgModule({
imports: [
CommonModule,
SortablejsModule,
WidjetModule
WidjetModule,
SwiperModule
],
declarations: [
CardsSectionComponent,
@ -22,7 +24,8 @@ import { CardsItemDefaultComponent } from './items/item/types/default/cards-item
CardsSectionItemComponent,
CardsItemPersonsComponent,
CardsItemPartnersComponent,
CardsItemDefaultComponent
CardsItemDefaultComponent,
CardsItemSlidesComponent
],
exports: [
CardsSectionComponent

9
src/app/_modules/pages/sections/types/basic/cards/items/cards-section-items.component.html
View File

@ -1,6 +1,13 @@
<div *ngIf="editMode" class="items {{type?.name}}" [sortablejs]="cards" [sortablejsOptions]="options">
<cards-section-item [id]="card.id" [card]="card" [type]="type" [editMode]="editMode" *ngFor="let card of cards"></cards-section-item>
</div>
<div *ngIf="!editMode" class="items {{type?.name}}">
<div *ngIf="!editMode && !slides" class="items {{type?.name}}">
<cards-section-item [card]="card" [type]="type" [editMode]="editMode" *ngFor="let card of cards"></cards-section-item>
</div>
<div *ngIf="!editMode && slides" class="slides {{type?.name}}">
<swiper [config]="config">
<ng-template *ngFor="let card of cards" swiperSlide>
<cards-section-item [card]="card" [type]="type" [editMode]="editMode" ></cards-section-item>
</ng-template>
</swiper>
</div>

17
src/app/_modules/pages/sections/types/basic/cards/items/cards-section-items.component.ts
View File

@ -2,6 +2,10 @@ import {Component, Input} from '@angular/core';
import {ObjectsService} from "@app/_services";
import {SortableOptions} from "sortablejs";
import SwiperCore, {Navigation, SwiperOptions} from 'swiper';
import { SwiperComponent } from "swiper/angular";
SwiperCore.use([Navigation]);
@Component({
selector: 'cards-section-items',
templateUrl: 'cards-section-items.component.html',
@ -18,6 +22,14 @@ export class CardsSectionItemsComponent {
}
};
public config: SwiperOptions = {
slidesPerView: "auto",
spaceBetween: 24,
pagination: {
clickable: true,
},
};
constructor(private objectsService: ObjectsService) {
}
@ -26,6 +38,11 @@ export class CardsSectionItemsComponent {
}
ngOnInit() {
console.log(this.type)
console.log(this.slides)
}
get slides(){
return this.type.name == 'cards-section-slides'
}
move(event: any) {

1
src/app/_modules/pages/sections/types/basic/cards/items/item/cards-section-item.component.html
View File

@ -13,5 +13,6 @@
<cards-item-persons *ngSwitchCase="'cards-section-persons'" [card]="card"></cards-item-persons>
<cards-item-partners *ngSwitchCase="'cards-section-partners'" [card]="card"></cards-item-partners>
<cards-item-default *ngSwitchCase="'cards-section-default'" [card]="card"></cards-item-default>
<cards-item-slides *ngSwitchCase="'cards-section-slides'" [card]="card"></cards-item-slides>
<p *ngSwitchDefault>{{type?.name}} is undefined</p>
</div>

14
src/app/_modules/pages/sections/types/basic/cards/items/item/types/default/cards-item-default.component.ts
View File

@ -14,13 +14,13 @@ export class CardsItemDefaultComponent {
@Input() card:any;
ngOnInit(){
console.log(this.card)
console.log(this.objectsService.getValue(this.card, 'card-style'))
console.log(this.objectsService.getValue(this.card, 'header'))
console.log(this.objectsService.getValue(this.card, 'subheader'))
console.log(this.objectsService.getValue(this.card, 'text'))
console.log(this.objectsService.getValue(this.card, 'image'))
console.log(this.objectsService.getValue(this.card, 'link'))
// console.log(this.card)
// console.log(this.objectsService.getValue(this.card, 'card-style'))
// console.log(this.objectsService.getValue(this.card, 'header'))
// console.log(this.objectsService.getValue(this.card, 'subheader'))
// console.log(this.objectsService.getValue(this.card, 'text'))
// console.log(this.objectsService.getValue(this.card, 'image'))
// console.log(this.objectsService.getValue(this.card, 'link'))
}
get style() {

6
src/app/_modules/pages/sections/types/basic/cards/items/item/types/slides/cards-item-slides.component.html Normal file
View File

@ -0,0 +1,6 @@
<div class="card-slide">
<div *ngIf="header" class="card-header">{{header}}</div>
<div *ngIf="subheader" class="card-subheader">{{subheader}}</div>
<div *ngIf="text" class="card-text">{{text}}</div>
<img *ngIf="image" [src]="image" class="card-image">
</div>

0
src/app/_modules/pages/sections/types/basic/cards/items/item/types/slides/cards-item-slides.component.scss Normal file
View File

46
src/app/_modules/pages/sections/types/basic/cards/items/item/types/slides/cards-item-slides.component.ts Normal file
View File

@ -0,0 +1,46 @@
import { Component, Input } from '@angular/core';
import {ObjectsService} from "@app/_services";
@Component({
selector: 'cards-item-slides',
templateUrl: './cards-item-slides.component.html',
styleUrls: ['./cards-item-slides.component.scss']
})
export class CardsItemSlidesComponent {
constructor(private objectsService: ObjectsService) {}
@Input() card:any;
ngOnInit(){
// console.log(this.card)
// console.log(this.objectsService.getValue(this.card, 'card-style'))
// console.log(this.objectsService.getValue(this.card, 'header'))
// console.log(this.objectsService.getValue(this.card, 'subheader'))
// console.log(this.objectsService.getValue(this.card, 'text'))
// console.log(this.objectsService.getValue(this.card, 'image'))
// console.log(this.objectsService.getValue(this.card, 'link'))
}
get header() {
return this.objectsService.getValue(this.card, 'header');
}
get subheader() {
return this.objectsService.getValue(this.card, 'subheader');
}
get text() {
return this.objectsService.getValue(this.card, 'text');
}
get image() {
return this.objectsService.getValue(this.card, 'image')?.links?.full+'?width=500';
}
get link() {
return this.objectsService.getValue(this.card, 'link');
}
}

134
src/nir/css/_pages-section.scss
View File

@ -634,6 +634,102 @@ cards-section{
}
}
.cards-section-slides.items{
max-width: 588px;
margin-left: 0;
cards-section-item{
margin-bottom: 40px;
height: 348px;
}
}
.cards-section-slides{
width: 1200px;
max-width: 100vw;
margin-left: -50px;
padding-bottom: 32px ;
cursor: pointer;
.swiper-slide{
display: flex;
width: 588px;
}
cards-section-item{
display: flex;
width: 100%;
height: 274px;
padding: 24px;
border-radius: 16px;
border: 1px solid var(--light);
background: var(--bg);
overflow: hidden;
.card-slide{
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
.card-header{
font-family: PT Serif;
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: 125%;
color: var(--bk66);
flex-basis: 100%;
margin-bottom: 16px;
}
.card-image{
width: 120px;
height: 170px;
object-fit: cover;
display: block;
top: 56px;
border-radius: 8px;
border: 1px solid var(--bk22);
order: 1;
margin-bottom: -120px;
}
.card-text{
order: 2;
flex-shrink: 1;
flex-basis: calc( 100% - 136px );
color: var(--bk88);
font-family: PT Sans;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 27px;
margin-inline-start: 16px;
}
.card-subheader{
text-align: right;
font-family: PT Sans;
font-size: 16px;
font-style: italic;
font-weight: 400;
line-height: 24px;
color: var(--bk66);
order: 3;
white-space: pre-wrap;
}
}
}
}
.swiper-wrapper{
padding-bottom: 32px;
}
.swiper-pagination-bullet{
border: 1px solid var(--prime);
background-color: transparent !important;
opacity: 1 !important;
&.swiper-pagination-bullet-active{
background-color: var(--prime) !important;
}
}
@media screen and (max-width: 767px) {
.pagination {
@ -644,4 +740,42 @@ cards-section{
display: none;
}
}
}
@media screen and (max-width: 1200px) {
.cards-section-slides{
width: 100vw;
margin-inline-start: -32px;
padding-bottom: 32px ;
.swiper-slide{
max-width: calc( 100vw - 96px );
margin-inline-start: 96px !important;
margin-inline-end: -72px !important;
&:first-child{
margin-inline-start: 48px !important;
}
&:last-child{
margin-inline-end: -24px !important;
}
}
}
}
@media screen and (max-width: 1024px) {
.cards-section-slides{
margin-inline-start: -24px;
}
}
@media screen and (max-width: 720px) {
.cards-section-slides{
margin-inline-start: -16px;
}
}