Skip to content

Commit

Permalink
feat(pagination): allow pagination to be enabled/disabled in breakpoints
Browse files Browse the repository at this point in the history
  • Loading branch information
nolimits4web committed May 30, 2022
1 parent 052f863 commit d748d49
Show file tree
Hide file tree
Showing 6 changed files with 57 additions and 14 deletions.
20 changes: 11 additions & 9 deletions src/core/breakpoints/setBreakpoint.js
Original file line number Diff line number Diff line change
Expand Up @@ -38,15 +38,17 @@ export default function setBreakpoint() {
swiper.emitContainerClasses();
}

// Toggle navigation
const wasNavigationEnabled = params.navigation && params.navigation.enabled;
const isNavigationEnabled = breakpointParams.navigation && breakpointParams.navigation.enabled;
if (wasNavigationEnabled && !isNavigationEnabled) {
swiper.navigation.disable();
}
if (!wasNavigationEnabled && isNavigationEnabled) {
swiper.navigation.enable();
}
// Toggle navigation, pagination, scrollbar
['navigation', 'pagination', 'scrollbar'].forEach((prop) => {
const wasModuleEnabled = params[prop] && params[prop].enabled;
const isModuleEnabled = breakpointParams[prop] && breakpointParams[prop].enabled;
if (wasModuleEnabled && !isModuleEnabled) {
swiper[prop].disable();
}
if (!wasModuleEnabled && isModuleEnabled) {
swiper[prop].enable();
}
});

const directionChanged =
breakpointParams.direction && breakpointParams.direction !== params.direction;
Expand Down
4 changes: 2 additions & 2 deletions src/modules/navigation/navigation.js
Original file line number Diff line number Diff line change
Expand Up @@ -174,14 +174,14 @@ export default function Navigation({ swiper, extendParams, on, emit }) {
});

const enable = () => {
swiper.$el.removeClass(swiper.params.navigation.navigationDisabledClass);
init();
update();
swiper.$el.removeClass(swiper.params.navigation.navigationDisabledClass);
};

const disable = () => {
destroy();
swiper.$el.addClass(swiper.params.navigation.navigationDisabledClass);
destroy();
};

Object.assign(swiper.navigation, {
Expand Down
32 changes: 29 additions & 3 deletions src/modules/pagination/pagination.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export default function Pagination({ swiper, extendParams, on, emit }) {
lockClass: `${pfx}-lock`,
horizontalClass: `${pfx}-horizontal`,
verticalClass: `${pfx}-vertical`,
paginationDisabledClass: `${pfx}-disabled`,
},
});

Expand Down Expand Up @@ -347,9 +348,14 @@ export default function Pagination({ swiper, extendParams, on, emit }) {
}

on('init', () => {
init();
render();
update();
if (swiper.params.navigation.enabled === false) {
// eslint-disable-next-line
disable();
} else {
init();
render();
update();
}
});
on('activeIndexChange', () => {
if (swiper.params.loop) {
Expand Down Expand Up @@ -412,7 +418,27 @@ export default function Pagination({ swiper, extendParams, on, emit }) {
}
});

const enable = () => {
swiper.$el.removeClass(swiper.params.pagination.paginationDisabledClass);
if (swiper.pagination.$el) {
swiper.pagination.$el.removeClass(swiper.params.pagination.paginationDisabledClass);
}
init();
render();
update();
};

const disable = () => {
swiper.$el.addClass(swiper.params.pagination.paginationDisabledClass);
if (swiper.pagination.$el) {
swiper.pagination.$el.addClass(swiper.params.pagination.paginationDisabledClass);
}
destroy();
};

Object.assign(swiper.pagination, {
enable,
disable,
render,
update,
init,
Expand Down
4 changes: 4 additions & 0 deletions src/modules/pagination/pagination.less
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,10 @@
&.swiper-pagination-hidden {
opacity: 0;
}
.swiper-pagination-disabled > &,
&.swiper-pagination-disabled {
display: none !important;
}
}
/* Common Styles */
.swiper-pagination-fraction,
Expand Down
4 changes: 4 additions & 0 deletions src/modules/pagination/pagination.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,10 @@
&.swiper-pagination-hidden {
opacity: 0;
}
.swiper-pagination-disabled > &,
&.swiper-pagination-disabled {
display: none !important;
}
}
/* Common Styles */
.swiper-pagination-fraction,
Expand Down
7 changes: 7 additions & 0 deletions src/types/modules/pagination.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -282,4 +282,11 @@ export interface PaginationOptions {
* @default 'swiper-pagination-vertical'
*/
verticalClass?: string;

/**
* CSS class name added on swiper container and pagination element when pagination is disabled by breakpoint
*
* @default 'swiper-pagination-disabled'
*/
paginationDisabledClass?: string;
}

0 comments on commit d748d49

Please sign in to comment.