malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Add function and filter for Splide arrows

Browse Source
This commit is contained in:
Tetrakern 2024-10-07 14:15:08 +02:00
parent 72b7e8d3a9
commit 0cbecd5e71
17 changed files with 75 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
FILTERS.md
View File

@ -1717,6 +1717,25 @@ Filters the intermediate output array of the `fictioneer_filter_media_buttons( $
---
### `apply_filters( 'fictioneer_filter_splide_arrows', $html, $uid )`
Filters the HTML of the Splide arrows returned by the `fictioneer_get_splide_arrows()` function. These arrows are only used in shortcodes. For custom HTML setups, please refer to the [Splide documentation](https://splidejs.com/guides/arrows/#custom-arrows).
**Parameters:**
* $html (string) – The HTML for the Splide arrows.
* $uid (string|null) – Optional. Unique ID of the target element (only for reference).
**Example:**
```php
// Change the Splide arrow icons (right, because they get rotated)
function child_change_splide_arrows( $html, $uid ) {
return '<div class="splide__arrows"><button class="splide__arrow splide__arrow--prev"><i class="fa-regular fa-circle-right"></i></button><button class="splide__arrow splide__arrow--next"><i class="fa-regular fa-circle-right"></i></button></div>';
}
add_filter( 'fictioneer_filter_splide_arrows', 'child_change_splide_arrows', 10, 2 );
```
---
### `apply_filters( 'fictioneer_filter_splide_breakpoints', $breakpoints, $json_string, $uid )`
Filters the associative array of Splide breakpoints returned by the `fictioneer_extract_splide_breakpoints()` function. These breakpoints are used to generate dynamic placeholder styles for a specific slider. Modifying the breakpoints at this stage is generally inadvisable, the filter exists primarily for completeness and edge cases.

2
css/splide.css
View File

File diff suppressed because one or more lines are too long

23
includes/functions/_helpers-templates.php
View File

@ -2516,7 +2516,7 @@ function fictioneer_get_splide_breakpoint_style( $json_string, $uid ) {
if ( $ttb ) {
$style .= ".{$uid}._splide-placeholder {--this-pagination-side-padding: 24px;}";
} else {
$style .= ".{$uid}._splide-placeholder {--this-pagination-vertical-padding: 32px;}";
$style .= ".{$uid}._splide-placeholder {--this-pagination-vertical-padding: 32px; --this-arrow-offset: 9px;}";
}
}
@ -2566,7 +2566,7 @@ function fictioneer_get_splide_breakpoint_style( $json_string, $uid ) {
}";
} else {
$style .= "@media only screen and (max-width: {$break}px) {
.{$uid}._splide-placeholder {--this-pagination-side-padding: 0px;}
.{$uid}._splide-placeholder {--this-pagination-side-padding: 0px; --this-arrow-offset: 9px;}
}";
}
}
@ -2595,3 +2595,22 @@ function fictioneer_get_splide_breakpoint_style( $json_string, $uid ) {
// Return style
return "<style class='splide-placeholder-styles'>{$style}</style>";
}
/**
* Returns the HTML for the Splide arrows
*
* @since 5.25.0
* @link https://splidejs.com/guides/arrows/#custom-arrows
*
* @param string $uid Optional. Unique ID of the target element.
*
* @return array The HTML for the Splide arrows.
*/
function fictioneer_get_splide_arrows( $uid = null ) {
return apply_filters(
'fictioneer_filter_splide_arrows',
'<div class="splide__arrows"><button class="splide__arrow splide__arrow--prev"><i class="fa-solid fa-chevron-right"></i></button><button class="splide__arrow splide__arrow--next"><i class="fa-solid fa-chevron-right"></i></button></div>',
$uid
);
}

1
partials/_article-cards.php
View File

@ -145,6 +145,7 @@ if ( $splide ) {
if ( $splide ) {
echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] );
echo fictioneer_get_splide_arrows( $args['uid'] );
echo '<div class="splide__track">';
}
?>

1
partials/_latest-chapters-compact.php
View File

@ -141,6 +141,7 @@ if ( $splide ) {
if ( $splide ) {
echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] );
echo fictioneer_get_splide_arrows( $args['uid'] );
echo '<div class="splide__track">';
}
?>

1
partials/_latest-chapters-list.php
View File

@ -146,6 +146,7 @@ if ( $splide ) {
if ( $splide ) {
echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] );
echo fictioneer_get_splide_arrows( $args['uid'] );
echo '<div class="splide__track">';
}
?>

1
partials/_latest-chapters.php
View File

@ -146,6 +146,7 @@ if ( $splide ) {
if ( $splide ) {
echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] );
echo fictioneer_get_splide_arrows( $args['uid'] );
echo '<div class="splide__track">';
}
?>

1
partials/_latest-recommendations-compact.php
View File

@ -120,6 +120,7 @@ if ( $splide ) {
if ( $splide ) {
echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] );
echo fictioneer_get_splide_arrows( $args['uid'] );
echo '<div class="splide__track">';
}
?>

1
partials/_latest-recommendations.php
View File

@ -117,6 +117,7 @@ if ( $splide ) {
if ( $splide ) {
echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] );
echo fictioneer_get_splide_arrows( $args['uid'] );
echo '<div class="splide__track">';
}
?>

1
partials/_latest-stories-compact.php
View File

@ -145,6 +145,7 @@ if ( $splide ) {
if ( $splide ) {
echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] );
echo fictioneer_get_splide_arrows( $args['uid'] );
echo '<div class="splide__track">';
}
?>

1
partials/_latest-stories-list.php
View File

@ -146,6 +146,7 @@ if ( $splide ) {
if ( $splide ) {
echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] );
echo fictioneer_get_splide_arrows( $args['uid'] );
echo '<div class="splide__track">';
}
?>

1
partials/_latest-stories.php
View File

@ -146,6 +146,7 @@ if ( $splide ) {
if ( $splide ) {
echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] );
echo fictioneer_get_splide_arrows( $args['uid'] );
echo '<div class="splide__track">';
}
?>

1
partials/_latest-updates-compact.php
View File

@ -154,6 +154,7 @@ if ( $splide ) {
if ( $splide ) {
echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] );
echo fictioneer_get_splide_arrows( $args['uid'] );
echo '<div class="splide__track">';
}
?>

1
partials/_latest-updates-list.php
View File

@ -157,6 +157,7 @@ if ( $splide ) {
if ( $splide ) {
echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] );
echo fictioneer_get_splide_arrows( $args['uid'] );
echo '<div class="splide__track">';
}
?>

1
partials/_latest-updates.php
View File

@ -160,6 +160,7 @@ if ( $splide ) {
if ( $splide ) {
echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] );
echo fictioneer_get_splide_arrows( $args['uid'] );
echo '<div class="splide__track">';
}
?>

1
partials/_showcase.php
View File

@ -124,6 +124,7 @@ if ( $args['min_width'] ) {
if ( $splide ) {
echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] );
echo fictioneer_get_splide_arrows( $args['uid'] );
echo '<div class="splide__track">';
}

33
src/scss/splide.scss
View File

@ -19,9 +19,22 @@
&._splide-placeholder {
visibility: visible;
.splide__slide:first-child {
// Emergency fallback
&:not(.showcase) .splide__slide:first-child {
width: 100%;
}
// Emergency fallback
&.showcase {
.splide__list {
gap: 1.5rem;
}
.splide__slide {
flex: 1 1 auto;
min-width: 22%;
}
}
}
&.splide--ttb {
@ -76,9 +89,12 @@
top: calc(50% - var(--this-arrow-offset, 0px));
display: grid;
place-content: center;
color: var(--splide-arrow);
font-size: 24px;
line-height: 1;
height: calc(var(--this-arrow-size) * 2);
width: var(--this-arrow-size);
transition: color .15s ease-in-out;
&--prev {
left: 0;
@ -90,19 +106,12 @@
transform: translateY(-50%);
}
svg {
height: calc(var(--this-arrow-size) * .675);
width: calc(var(--this-arrow-size) * .675);
fill: var(--splide-arrow);
transition: fill .15s;
&:hover {
color: var(--splide-arrow-hover);
}
&:hover svg {
fill: var(--splide-arrow-hover);
}
&:active svg {
fill: var(--splide-arrow-active);
&:active {
color: var(--splide-arrow-active);
}
}