Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: first and last slides of carousel component are no longer centred by default #1719

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

feat: first and last slides of carousel component are no longer centred by default #1719

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
90b4b71
feat: exposed 'centre_first_and_last' variable for carousel component…
jfmcquade Jan 13, 2023
61400ce
standardised using British over US spelling of 'centre'
jfmcquade Jan 13, 2023
15ca554
Merge branch 'master' into style/carousel-spacing
esmeetewinkel Jan 16, 2023
dbaedda
Merge branch 'master' into style/carousel-spacing
jfmcquade Jan 27, 2023
6c4b4bd
Merge branch 'style/carousel-spacing' of https://github.com/IDEMSInte…
jfmcquade Jan 27, 2023
4f089f9
WIP: debugging swiper 'centeredSlidesBounds' issue
jfmcquade Jan 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/app/shared/components/template/components/carousel/carousel.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<div class="carousel-wrapper">
Config: {{ config | json }}
<swiper (swiper)="handleSwiperInitialised($event)" [config]="config">
<ng-template
swiperSlide
Expand Down
30 changes: 24 additions & 6 deletions src/app/shared/components/template/components/carousel/carousel.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@ export class TmplCarouselComponent extends TemplateBaseComponent implements OnIn
}

async ngOnInit() {
await this.getParams();
this.getParams();
await this.hackSetHighlightedTask();
}

async getParams() {
getParams() {
this.config.slidesPerView =
getNumberParamFromTemplateRow(this._row, "slides_per_view", null) || "auto";
this.config.spaceBetween = getNumberParamFromTemplateRow(this._row, "space_between", 10);
Expand All @@ -37,14 +37,30 @@ export class TmplCarouselComponent extends TemplateBaseComponent implements OnIn
if (this.config.loop) {
this.config.loopedSlides = this._row.rows.length;
}
this.config.centeredSlides = getBooleanParamFromTemplateRow(this._row, "centered_slides", true);
this.initialSlide = getNumberParamFromTemplateRow(this._row, "initial_slide_index", 0);
this.config.centeredSlides = getBooleanParamFromTemplateRow(this._row, "centred_slides", true);
this.config.centeredSlidesBounds = !getBooleanParamFromTemplateRow(
this._row,
"centre_first_and_last",
false
);
this.config.initialSlide = getNumberParamFromTemplateRow(this._row, "initial_slide_index", 0);
}

/** Event emitter called when swiper initialised */
public handleSwiperInitialised(swiper: Swiper) {
// setInterval(() => console.log("initial slide:", this.swiper.params.initialSlide), 10)
console.log("swiper initialised");
this.swiper = swiper;
this.swiper.slideTo(this.initialSlide, 0, false);
this.swiper.slideTo(this.config.initialSlide, 0, false);
console.log("swiper params:", this.swiper.params);
console.log("active index:", this.swiper.activeIndex);
this.swiper.params.centeredSlidesBounds = true;
this.swiper.update();

setTimeout(() => {
console.log("hi");
this.swiper.slideTo(this.config.initialSlide, 0, false);
}, 1000);
}

/** When using carousel within task_group context set additional highlighted slide from task data */
Expand All @@ -53,10 +69,12 @@ export class TmplCarouselComponent extends TemplateBaseComponent implements OnIn
if (taskGroupsList) {
const highlightedTaskGroup = this.taskService.getHighlightedTaskGroup();
if (highlightedTaskGroup) {
this.initialSlide = await this.taskService.getHighlightedTaskGroupIndex(
this.config.initialSlide = await this.taskService.getHighlightedTaskGroupIndex(
highlightedTaskGroup,
taskGroupsList
);
// If the Swiper instance has already been intialised, update it
if (this.swiper) this.swiper.update();
}
}
}
Expand Down