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

Improve Splide slider placeholder styles

Browse Source
This commit is contained in:
Tetrakern 2024-10-07 02:08:40 +02:00
parent 8ed224ba02
commit 8bd7342efd
17 changed files with 200 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

184
includes/functions/_utility.php
View File

@ -3531,3 +3531,187 @@ function fictioneer_get_post_type_label( $type ) {
return $labels[ $type ] ?? $type;
}
// =============================================================================
// SPLIDE
// =============================================================================
/**
* Returns associative array of Splide breakpoints
*
* @since 5.25.0
*
* @param string $json_string The Splide json string.
*
* @return array Breakpoint data or empty.
*/
function fictioneer_extract_splide_breakpoints( $json_string ) {
// Valid JSON?
if ( ! fictioneer_is_valid_json( $json_string ) ) {
return [];
}
// Setup
$splide = json_decode( $json_string, true );
$breakpoints = array(
'base' => []
);
// Base settings
if ( ! is_null( $splide['arrows'] ?? null ) ) {
$breakpoints['base']['arrows'] = $splide['arrows'];
}
if ( ! is_null( $splide['pagination'] ?? null ) ) {
$breakpoints['base']['pagination'] = $splide['pagination'];
}
if ( ! is_null( $splide['paginationDirection'] ?? null ) ) {
$breakpoints['base']['pagination_direction'] = $splide['paginationDirection'];
}
if ( ! is_null( $splide['perPage'] ?? null ) ) {
$breakpoints['base']['per_page'] = $splide['perPage'];
}
// Breakpoints
if ( isset( $splide['breakpoints'] ) && is_array( $splide['breakpoints'] ) ) {
foreach ( $splide['breakpoints'] as $breakpoint => $settings ) {
$arrows = $settings['arrows'] ?? null;
$pagination = $settings['pagination'] ?? null;
$direction = $settings['paginationDirection'] ?? null;
$per_page = $settings['perPage'] ?? null;
$breakpoints[ $breakpoint ] = [];
if ( ! is_null( $arrows ) ) {
$breakpoints[ $breakpoint ]['arrows'] = $arrows;
}
if ( ! is_null( $pagination ) ) {
$breakpoints[ $breakpoint ]['pagination'] = $pagination;
}
if ( ! is_null( $direction ) ) {
$breakpoints[ $breakpoint ]['pagination_direction'] = $direction;
}
if ( ! is_null( $per_page ) ) {
$breakpoints[ $breakpoint ]['per_page'] = $per_page;
}
}
}
// Return result
return $breakpoints;
}
/**
* Returns Splide placeholder style for a specific UID
*
* @since 5.25.0
*
* @param string $json_string The Splide json string.
* @param string $uid Unique ID of the target element.
*
* @return array The style.
*/
function fictioneer_get_splide_breakpoint_style( $json_string, $uid ) {
// Setup
$breakpoints = fictioneer_extract_splide_breakpoints( $json_string );
if ( empty( $breakpoints ) ) {
return '';
}
$base = $breakpoints['base'];
$style = '';
unset( $breakpoints['base'] );
// Base settings (typically desktop)
$per_page = $base['per_page'] ?? 1;
$ttb = ( $base['pagination_direction'] ?? 0 ) === 'ttb';
if ( ( $base['arrows'] ?? 0 ) && ! $ttb ) {
$style .= ".{$uid}._splide-placeholder {--this-arrow-horizontal-padding: var(--this-arrow-size); overflow: hidden;}";
}
if ( $base['pagination'] ?? 1 ) {
if ( $ttb ) {
$style .= ".{$uid}._splide-placeholder {--this-pagination-side-padding: 24px;}";
} else {
$style .= ".{$uid}._splide-placeholder {--this-pagination-vertical-padding: 32px;}";
}
}
if ( $per_page < 2 ) {
$style .= ".{$uid}._splide-placeholder .splide__slide:first-child {width: 100%;}";
$style .= ".{$uid}._splide-placeholder .grid-columns {--this-placeholder-width: 100%;}";
} else {
$style .= ".{$uid}._splide-placeholder .grid-columns {--this-placeholder-width: calc((100% - var(--grid-columns-col-gap, 1.5rem) * ({$per_page} - 1)) / {$per_page});}";
$style .= ".{$uid}._splide-placeholder .grid-columns {display: flex; gap: calc(var(--grid-columns-row-gap, 1.5rem) * var(--grid-columns-row-gap-multiplier, 1)) calc(var(--grid-columns-col-gap, 1.5rem) * var(--grid-columns-col-gap-multiplier, 1));}";
$style .= ".{$uid}._splide-placeholder .grid-columns > .splide__slide {flex: 1 1 auto; width: auto; min-width: var(--this-placeholder-width, auto);}";
}
// Lower breakpoints
foreach ( $breakpoints as $break => $settings ) {
$per_page = $settings['per_page'] ?? 1;
$ttb = ( $settings['pagination_direction'] ?? 0 ) === 'ttb';
// Arrows...
if ( ! is_null( $settings['arrows'] ?? null ) ) {
if ( $settings['arrows'] && ! $ttb ) {
$style .= "@media only screen and (max-width: {$break}px) {
.{$uid}._splide-placeholder {--this-arrow-horizontal-padding: var(--this-arrow-size);}
}";
} else {
$style .= "@media only screen and (max-width: {$break}px) {
.{$uid}._splide-placeholder {--this-arrow-horizontal-padding: 0px;}
}";
}
}
// Pagination...
if ( ! is_null( $settings['pagination'] ?? null ) ) {
if ( $settings['pagination'] && ! $ttb ) {
$style .= "@media only screen and (max-width: {$break}px) {
.{$uid}._splide-placeholder {--this-pagination-vertical-padding: 32px;}
}";
} else {
$style .= "@media only screen and (max-width: {$break}px) {
.{$uid}._splide-placeholder {--this-pagination-vertical-padding: 0px;}
}";
}
if ( $ttb ) {
$style .= "@media only screen and (max-width: {$break}px) {
.{$uid}._splide-placeholder {--this-pagination-side-padding: 24px;}
}";
} else {
$style .= "@media only screen and (max-width: {$break}px) {
.{$uid}._splide-placeholder {--this-pagination-side-padding: 0px;}
}";
}
}
// Per page...
if ( $per_page < 2 ) {
$style .= "@media only screen and (max-width: {$break}px) {
.{$uid}._splide-placeholder .splide__slide:first-child {width: 100%;}
.{$uid}._splide-placeholder .grid-columns {--this-placeholder-width: 100%;}
}";
} else {
$style .= "@media only screen and (max-width: {$break}px) {
.{$uid}._splide-placeholder .grid-columns {--this-placeholder-width: calc((100% - var(--grid-columns-col-gap, 1.5rem) * ({$per_page} - 1)) / {$per_page});}
.{$uid}._splide-placeholder .grid-columns {display: flex; gap: calc(var(--grid-columns-row-gap, 1.5rem) * var(--grid-columns-row-gap-multiplier, 1)) calc(var(--grid-columns-col-gap, 1.5rem) * var(--grid-columns-col-gap-multiplier, 1));}
.{$uid}._splide-placeholder .grid-columns > .splide__slide {flex: 1 1 auto; width: auto; min-width: var(--this-placeholder-width, auto);}
}";
}
}
// Return style
return "<style class='splide-placeholder-styles'>{$style}</style>";
}

2
js/application.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
js/complete.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
partials/_article-cards.php
View File

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

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

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

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

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

1
partials/_latest-chapters.php
View File

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

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

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

1
partials/_latest-recommendations.php
View File

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

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

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

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

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

1
partials/_latest-stories.php
View File

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

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

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

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

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

1
partials/_latest-updates.php
View File

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

1
partials/_showcase.php
View File

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

1
src/js/application.js
View File

@ -2291,6 +2291,7 @@ document.addEventListener('DOMContentLoaded', () => {
_$$('.splide:not(.no-auto-splide, .is-initialized)').forEach(slider => {
if (slider.querySelector('.splide__list') && typeof Splide !== 'undefined') {
slider.classList.remove('_splide-placeholder');
slider.closest('section').querySelector('.splide-placeholder-styles').remove();
new Splide(slider).mount();
}
});