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

Refactor Splide placeholders and loading styles

Browse Source 
This is better and doesn't need as much crazy CSS. Also, the naming makes more sense.
This commit is contained in:
Tetrakern 2024-10-07 19:47:35 +02:00
parent 2a41d688f2
commit d59e4417ff
18 changed files with 80 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
FILTERS.md
View File

@ -1717,28 +1717,6 @@ Filters the intermediate output array of the `fictioneer_filter_media_buttons( $
---
### `apply_filters( 'fictioneer_filter_splide_arrows', $html, $uid, $ttb )`
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).
* $ttb (bool) – Whether the arrows are top-to-bottom. Default `false`.
**Example:**
```php
// Change the Splide arrow icons (right, because they get rotated)
function child_change_splide_arrows( $html, $uid, $ttb ) {
$ttb_class = $ttb ? 'splide__arrows--ttb' : '';
return '<div class="splide__arrows ' . $ttb_class . '"><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, 3 );
```
---
### `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.
@ -1749,25 +1727,47 @@ Filters the associative array of Splide breakpoints returned by the `fictioneer_
---
### `apply_filters( 'fictioneer_filter_splide_placeholder_style', $style, $uid, $breakpoints, $json_string )`
Filters the dynamically generated placeholder style for a specific Splide slider before it is minified, wrapped in a `<style>` tag, and returned by the `fictioneer_get_splide_breakpoint_style()` function. The style is rendered within the `<body>` and is removed once the slider is initialized.
### `apply_filters( 'fictioneer_filter_splide_loading_style', $style, $uid, $breakpoints, $json_string )`
Filters the dynamically generated loading style for a specific Splide slider before it is minified, wrapped in a `<style>` tag, and returned by the `fictioneer_get_splide_loading_style()` function. The style is rendered within the `<body>` and is removed once the slider is initialized.
**Parameters:**
* $style (string) – The placeholder style or empty.
* $style (string) – The loading style or empty.
* $uid (string) – Unique ID of the target element (used as CSS class).
* $breakpoints (array) – Breakpoint data or empty.
* $json_string (string) – Stringified Splide JSON.
**Example:**
```php
// Reduce opacity of the placeholder.
// Reduce opacity of the uninitialized slider.
function child_extend_splide_placeholder_style( $style, $uid ) {
function child_extend_splide_loading_style( $style, $uid ) {
$style .= ".{$uid}._splide-placeholder {opacity: 0.5;}";
return $style;
}
add_filter( 'fictioneer_filter_splide_placeholder_style', 'child_extend_splide_placeholder_style', 10, 2 );
add_filter( 'fictioneer_filter_splide_loading_style', 'child_extend_splide_loading_style', 10, 2 );
```
---
### `apply_filters( 'fictioneer_filter_splide_placeholders', $html, $uid, $ttb )`
Filters the HTML of the Splide placeholders returned by the `fictioneer_get_splide_placeholders()` function (default is an empty string). These placeholders are only used in shortcodes and can inject custom markup for arrows and pagination, though additional CSS may be required. For more information, refer to the [Splide documentation](https://splidejs.com/guides/arrows/#custom-arrows).
**Parameters:**
* $html (string) – The HTML for the Splide arrows. Default empty.
* $uid (string|null) – Optional. Unique ID of the target element (only for reference).
* $ttb (bool) – Whether the arrows are in a list-type shortcode (top-to-bottom). Default `false`.
**Example:**
```php
// Adds custom Splide arrow HTML (right-aligned icons, because they get rotated)
function child_add_custom_splide_arrows( $html, $uid, $ttb ) {
$ttb_class = $ttb ? 'splide__arrows--ttb' : '';
return '<div class="splide__arrows ' . $ttb_class . '"><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_placeholders', 'child_add_custom_splide_arrows', 10, 3 );
```
---

2
css/splide.css
View File

File diff suppressed because one or more lines are too long

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

@ -2490,12 +2490,12 @@ function fictioneer_extract_splide_breakpoints( $json_string, $uid = null ) {
* @return array The style.
*/
function fictioneer_get_splide_breakpoint_style( $json_string, $uid ) {
function fictioneer_get_splide_loading_style( $json_string, $uid ) {
// Setup
$breakpoints = fictioneer_extract_splide_breakpoints( $json_string, $uid );
if ( empty( $breakpoints ) ) {
apply_filters( 'fictioneer_filter_splide_placeholder_style', '', $uid, $breakpoints, $json_string );
apply_filters( 'fictioneer_filter_splide_loading_style', '', $uid, $breakpoints, $json_string );
}
$base = $breakpoints['base'];
@ -2512,11 +2512,6 @@ function fictioneer_get_splide_breakpoint_style( $json_string, $uid ) {
$style .= ".{$uid}._splide-placeholder {--this-arrow-horizontal-padding: var(--this-arrow-size); overflow: hidden;}";
}
if ( ! ( $base['arrows'] ?? 0 ) ) {
$style .= ".{$uid}._splide-placeholder {--this-arrow-padding-multiplier: 0;}";
$style .= ".{$uid}._splide-placeholder .splide__arrows {display: none;}";
}
if ( $base['pagination'] ?? 1 ) {
if ( $ttb ) {
$style .= ".{$uid}._splide-placeholder {--this-pagination-side-padding: 24px;}";
@ -2551,18 +2546,6 @@ function fictioneer_get_splide_breakpoint_style( $json_string, $uid ) {
.{$uid}._splide-placeholder {--this-arrow-horizontal-padding: 0px;}
}";
}
if ( $settings['arrows'] ) {
$style .= "@media only screen and (max-width: {$break}px) {
.{$uid}._splide-placeholder {--this-arrow-padding-multiplier: 1;}
.{$uid}._splide-placeholder .splide__arrows {display: block;}
}";
} else {
$style .= "@media only screen and (max-width: {$break}px) {
.{$uid}._splide-placeholder {--this-arrow-padding-multiplier: 0;}
.{$uid}._splide-placeholder .splide__arrows {display: none;}
}";
}
}
// Pagination...
@ -2604,7 +2587,7 @@ function fictioneer_get_splide_breakpoint_style( $json_string, $uid ) {
}
// Apply filters
$style = apply_filters( 'fictioneer_filter_splide_placeholder_style', $style, $uid, $breakpoints, $json_string );
$style = apply_filters( 'fictioneer_filter_splide_loading_style', $style, $uid, $breakpoints, $json_string );
// Minify
$style = fictioneer_minify_css( $style );
@ -2614,7 +2597,7 @@ function fictioneer_get_splide_breakpoint_style( $json_string, $uid ) {
}
/**
* Returns the HTML for the Splide arrows
* Returns the HTML for the Splide placeholders
*
* @since 5.25.0
* @link https://splidejs.com/guides/arrows/#custom-arrows
@ -2622,16 +2605,10 @@ function fictioneer_get_splide_breakpoint_style( $json_string, $uid ) {
* @param string $uid Optional. Unique ID of the target element.
* @param bool $ttb Optional. Whether the arrows are top-to-bottom. Default false.
*
* @return array The HTML for the Splide arrows.
* @return array The HTML for the Splide placeholders (default empty).
*/
function fictioneer_get_splide_arrows( $uid = null, $ttb = false ) {
$ttb_class = $ttb ? 'splide__arrows--ttb' : '';
return apply_filters(
'fictioneer_filter_splide_arrows',
'<div class="splide__arrows ' . $ttb_class . '"><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,
$ttb
function fictioneer_get_splide_placeholders( $uid = null, $ttb = false ) {
return apply_filters( 'fictioneer_filter_splide_placeholders', '', $uid, $ttb
);
}

4
includes/functions/_setup-shortcodes.php
View File

@ -234,6 +234,10 @@ function fictioneer_get_default_shortcode_args( $attr, $def_count = -1 ) {
$splide['arrows'] = false;
}
if ( ! isset( $splide['arrowPath'] ) ) {
$splide['arrowPath'] = 'M31.89 18.24c0.98 0.98 0.98 2.56 0 3.54l-15 15c-0.98 0.98-2.56 0.98-3.54 0s-0.98-2.56 0-3.54L26.45 20 13.23 6.76c-0.98-0.98-0.98-2.56 0-3.54s2.56-0.98 3.54 0l15 15';
}
$args['splide'] = json_encode( $splide );
}
}

4
partials/_article-cards.php
View File

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

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

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

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

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

4
partials/_latest-chapters.php
View File

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

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

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

4
partials/_latest-recommendations.php
View File

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

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

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

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

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

4
partials/_latest-stories.php
View File

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

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

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

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

@ -156,8 +156,8 @@ if ( $splide ) {
}
if ( $splide ) {
echo fictioneer_get_splide_breakpoint_style( $splide, $args['uid'] );
echo fictioneer_get_splide_arrows( $args['uid'], true );
echo fictioneer_get_splide_loading_style( $splide, $args['uid'] );
echo fictioneer_get_splide_placeholders( $args['uid'], true );
echo '<div class="splide__track">';
}
?>

4
partials/_latest-updates.php
View File

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

4
partials/_showcase.php
View File

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

25
src/scss/splide.scss
View File

@ -7,7 +7,6 @@
.splide {
--this-arrow-size: #{get_clamp(20, 40, 320, 640)};
--this-arrow-padding-multiplier: 1;
--this-outset: 6px;
width: calc(100% + 2 * var(--this-outset));
max-width: 100vw;
@ -42,14 +41,14 @@
--this-arrow-offset: 9px; // Offset bottom pagination
}
&:has(.splide__arrows:where(:not([style*="display: none"], [style*="display:none"]))) {
--this-arrow-horizontal-padding: calc(var(--this-arrow-size) * var(--this-arrow-padding-multiplier, 1));
&:has(.splide__arrows) {
--this-arrow-horizontal-padding: calc(var(--this-arrow-size));
}
&:has(.splide__arrows--ttb) {
--this-arrow-offset: 0px; // No bottom pagination
--this-arrow-horizontal-padding: 0px;
--this-arrow-vertical-padding: calc(var(--this-arrow-size) * var(--this-arrow-padding-multiplier, 1));
--this-arrow-vertical-padding: calc(var(--this-arrow-size));
}
&:has(.splide__pagination--ttb) {
@ -78,9 +77,6 @@
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;
@ -95,12 +91,19 @@
transform: translateY(-50%);
}
&:hover {
color: var(--splide-arrow-hover);
svg {
height: calc(var(--this-arrow-size) * .675);
width: calc(var(--this-arrow-size) * .675);
fill: var(--splide-arrow);
transition: fill .15s;
}
&:active {
color: var(--splide-arrow-active);
&:hover svg {
fill: var(--splide-arrow-hover);
}
&:active svg {
fill: var(--splide-arrow-active);
}
}