Refactor chapter lists
No more sibling or other exotic selectors.
This commit is contained in:
Tetrakern
parent
8cf01ca6a3
commit
a763bc0eb1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -181,6 +181,16 @@ if ( ! defined( 'FICTIONEER_API_STORYGRAPH_STORIES_PER_PAGE' ) ) {
|
||||
define( 'FICTIONEER_API_STORYGRAPH_STORIES_PER_PAGE', 10 );
|
||||
}
|
||||
|
||||
// Integer: Maximum number of displayed custom pages
|
||||
if ( ! defined( 'FICTIONEER_MAX_CUSTOM_PAGES_PER_STORY' ) ) {
|
||||
define( 'FICTIONEER_MAX_CUSTOM_PAGES_PER_STORY', 4 );
|
||||
}
|
||||
|
||||
// Integer: The number of chapter before and after folding in chapter lists
|
||||
if ( ! defined( 'FICTIONEER_CHAPTER_FOLDING_THRESHOLD' ) ) {
|
||||
define( 'FICTIONEER_CHAPTER_FOLDING_THRESHOLD', 5 );
|
||||
}
|
||||
|
||||
/*
|
||||
* Booleans
|
||||
*/
|
||||
|
||||
@ -491,8 +491,6 @@ if ( ! function_exists( 'fictioneer_get_story_page_cover' ) ) {
|
||||
*/
|
||||
|
||||
function fictioneer_get_story_page_cover( $story ) {
|
||||
global $post;
|
||||
|
||||
ob_start();
|
||||
// Start HTML ---> ?>
|
||||
<figure class="story__thumbnail">
|
||||
@ -502,7 +500,7 @@ if ( ! function_exists( 'fictioneer_get_story_page_cover' ) ) {
|
||||
array( 200, 300 ),
|
||||
array(
|
||||
'alt' => sprintf( __( '%s Cover', 'fictioneer' ), $story['title'] ),
|
||||
'class' => 'webfeedsFeaturedVisual'
|
||||
'class' => 'webfeedsFeaturedVisual story__thumbnail-image'
|
||||
)
|
||||
);
|
||||
?>
|
||||
|
||||
@ -785,17 +785,13 @@ function fictioneer_shortcode_chapter_list( $attr ) {
|
||||
// Start HTML ---> ?>
|
||||
<div class="chapter-group">
|
||||
<?php if ( ! empty( $attr['heading'] ) ) : ?>
|
||||
<?php $discriminator = md5( $attr['heading'] . microtime() ); ?>
|
||||
<input id="group-toggle-<?php echo $discriminator; ?>" class="chapter-group__toggle" type="checkbox" hidden>
|
||||
<label class="chapter-group__label" for="group-toggle-<?php echo $discriminator; ?>" tabindex="0" role="button" aria-label="<?php esc_attr_e( 'Toggle chapter group collapse', 'fictioneer' ); ?>">
|
||||
<button class="chapter-group__name" aria-label="<?php esc_attr_e( 'Toggle chapter group collapse', 'fictioneer' ); ?>" tabindex="0">
|
||||
<i class="fa-solid fa-chevron-down chapter-group__heading-icon"></i>
|
||||
<span><?php echo $attr['heading']; ?></span>
|
||||
</label>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
<ol class="chapter-group__list">
|
||||
<li class="chapter-group__list-item _empty">
|
||||
<span><?php _e( 'No chapters published yet.', 'fictioneer' ) ?></span>
|
||||
</li>
|
||||
<li class="chapter-group__list-item _empty"><?php _e( 'No chapters published yet.', 'fictioneer' ) ?></li>
|
||||
</ol>
|
||||
</div>
|
||||
<?php // <--- End HTML
|
||||
@ -868,12 +864,10 @@ function fictioneer_shortcode_chapter_list( $attr ) {
|
||||
// Start HTML ---> ?>
|
||||
<div class="chapter-group <?php echo implode( ' ', $classes ); ?>">
|
||||
<?php if ( $heading ) : ?>
|
||||
<?php $discriminator = md5( $heading . microtime() ); ?>
|
||||
<input id="group-toggle-<?php echo $discriminator; ?>" class="chapter-group__toggle" type="checkbox" hidden>
|
||||
<label class="chapter-group__label" for="group-toggle-<?php echo $discriminator; ?>" tabindex="0" role="button" aria-label="<?php esc_attr_e( 'Toggle chapter group collapse', 'fictioneer' ); ?>">
|
||||
<button class="chapter-group__name" aria-label="<?php esc_attr_e( 'Toggle chapter group collapse', 'fictioneer' ); ?>" tabindex="0">
|
||||
<i class="fa-solid fa-chevron-down chapter-group__heading-icon"></i>
|
||||
<span><?php echo $heading; ?></span>
|
||||
</label>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
<ol class="chapter-group__list">
|
||||
<?php
|
||||
@ -923,8 +917,8 @@ function fictioneer_shortcode_chapter_list( $attr ) {
|
||||
if ( ! empty( $prefix ) ) {
|
||||
echo apply_filters( 'fictioneer_filter_list_chapter_prefix', $prefix );
|
||||
}
|
||||
echo $title;
|
||||
?>
|
||||
<?php echo $title; ?>
|
||||
</a>
|
||||
|
||||
<?php
|
||||
@ -963,8 +957,11 @@ function fictioneer_shortcode_chapter_list( $attr ) {
|
||||
</div>
|
||||
<?php // <--- End HTML
|
||||
|
||||
// Store output
|
||||
$output = ob_get_clean();
|
||||
|
||||
// Return buffer
|
||||
return ob_get_clean();
|
||||
return fictioneer_minify_html( $output );
|
||||
}
|
||||
add_shortcode( 'fictioneer_chapter_list', 'fictioneer_shortcode_chapter_list' );
|
||||
|
||||
|
||||
@ -1547,4 +1547,26 @@ if ( ! function_exists( 'fictioneer_notice' ) ) {
|
||||
}
|
||||
}
|
||||
|
||||
// =============================================================================
|
||||
// MINIFY HTML
|
||||
// =============================================================================
|
||||
|
||||
if ( ! function_exists( 'fictioneer_minify_html' ) ) {
|
||||
/**
|
||||
* Minifies a HTML string
|
||||
*
|
||||
* This is not safe for `<pre>` or `<code>` tags!
|
||||
*
|
||||
* @since 5.4.0
|
||||
*
|
||||
* @param string $html The HTML string to be minified.
|
||||
*
|
||||
* @return string The minified HTML string.
|
||||
*/
|
||||
|
||||
function fictioneer_minify_html( $html ) {
|
||||
return preg_replace( '/\s+/', ' ', trim( $html ) );
|
||||
}
|
||||
}
|
||||
|
||||
?>
|
||||
|
||||
2
js/application.min.js
vendored
2
js/application.min.js
vendored
File diff suppressed because one or more lines are too long
2
js/story.min.js
vendored
2
js/story.min.js
vendored
@ -1 +1 @@
|
||||
var fcn_storyCommentPage=1,fcn_storySettings=fcn_getStorySettings();function fcn_getStorySettings(){let t=localStorage.getItem("fcnStorySettings");return t=t&&fcn_isValidJSONString(t)?JSON.parse(t):fcn_defaultStorySettings(),(!t.hasOwnProperty("timestamp")||t.timestamp<1674770712849)&&(t=fcn_defaultStorySettings(),t.timestamp=Date.now()),fcn_setStorySettings(t),t}function fcn_defaultStorySettings(){return{view:"list",order:"asc",timestamp:1674770712849}}function fcn_setStorySettings(t){"object"==typeof t&&(fcn_storySettings=t,localStorage.setItem("fcnStorySettings",JSON.stringify(t)))}function fcn_applyStorySettings(){"object"==typeof fcn_storySettings&&(_$$$("toggle-view").checked="grid"==fcn_storySettings.view,_$$$("toggle-order").checked="desc"==fcn_storySettings.order)}function fcn_loadStoryComments(){let t;_$(".load-more-list-item").remove(),_$(".comments-loading-placeholder").classList.remove("hidden");let e={action:"fictioneer_request_story_comments",post_id:fcn_inlineStorage.postId,page:fcn_storyCommentPage};fcn_ajaxGet(e).then((e=>{e.success?(_$(".fictioneer-comments__list > ul").innerHTML+=e.data.html,fcn_storyCommentPage++):e.data?.error&&(t=fcn_buildErrorNotice(e.data.error))})).catch((e=>{t=fcn_buildErrorNotice(e)})).then((()=>{_$(".comments-loading-placeholder").remove(),t&&_$(".fictioneer-comments__list > ul").appendChild(t)}))}fcn_applyStorySettings(),_$$$("toggle-order")?.addEventListener("change",(t=>{fcn_storySettings.order=t.currentTarget.checked?"desc":"asc",fcn_setStorySettings(fcn_storySettings)})),_$$$("toggle-view")?.addEventListener("change",(t=>{fcn_storySettings.view=t.currentTarget.checked?"grid":"list",fcn_setStorySettings(fcn_storySettings)}));
|
||||
var fcn_storyCommentPage=1,fcn_storySettings=fcn_getStorySettings();function fcn_getStorySettings(){let t=localStorage.getItem("fcnStorySettings");return t=t&&fcn_isValidJSONString(t)?JSON.parse(t):fcn_defaultStorySettings(),(!t.hasOwnProperty("timestamp")||t.timestamp<1674770712849)&&(t=fcn_defaultStorySettings(),t.timestamp=Date.now()),fcn_setStorySettings(t),t}function fcn_defaultStorySettings(){return{view:"list",order:"asc",timestamp:1674770712849}}function fcn_setStorySettings(t){"object"==typeof t&&(fcn_storySettings=t,localStorage.setItem("fcnStorySettings",JSON.stringify(t)))}function fcn_applyStorySettings(){"object"==typeof fcn_storySettings&&(_$$("[data-view]").forEach((t=>{t.dataset.view="grid"==fcn_storySettings.view?"grid":"list"})),_$$("[data-order]").forEach((t=>{t.dataset.order="desc"==fcn_storySettings.order?"desc":"asc"})))}function fcn_toggleStoryTab(t){_$$(".story__article ._current").forEach((t=>{t.classList.remove("_current")})),_$$$(t.dataset.target).classList.add("_current"),_$$$("tabs").dataset.current=t.dataset.target,t.classList.add("_current")}function fcn_loadStoryComments(){let t;_$(".load-more-list-item").remove(),_$(".comments-loading-placeholder").classList.remove("hidden");let e={action:"fictioneer_request_story_comments",post_id:fcn_inlineStorage.postId,page:fcn_storyCommentPage};fcn_ajaxGet(e).then((e=>{e.success?(_$(".fictioneer-comments__list > ul").innerHTML+=e.data.html,fcn_storyCommentPage++):e.data?.error&&(t=fcn_buildErrorNotice(e.data.error))})).catch((e=>{t=fcn_buildErrorNotice(e)})).then((()=>{_$(".comments-loading-placeholder").remove(),t&&_$(".fictioneer-comments__list > ul").appendChild(t)}))}fcn_applyStorySettings(),_$$$("button-toggle-chapter-order")?.addEventListener("click",(t=>{fcn_storySettings.order="asc"===t.currentTarget.dataset.order?"desc":"asc",fcn_setStorySettings(fcn_storySettings),fcn_applyStorySettings()})),_$$$("button-toggle-chapter-view")?.addEventListener("click",(t=>{fcn_storySettings.view="list"===t.currentTarget.dataset.view?"grid":"list",fcn_setStorySettings(fcn_storySettings),fcn_applyStorySettings()})),_$$(".chapter-group__folding-toggle").forEach((t=>{t.addEventListener("click",(t=>{let e=t.currentTarget.closest(".chapter-group[data-folded]");e&&(e.dataset.folded="true"==e.dataset.folded?"false":"true")}))})),_$$(".tabs__item").forEach((t=>{t.addEventListener("click",(t=>{fcn_toggleStoryTab(t.currentTarget)}))}));
|
||||
@ -22,7 +22,6 @@ $story_id = $args['story_id'];
|
||||
$story = $args['story_data'];
|
||||
$custom_pages = fictioneer_get_field( 'fictioneer_story_custom_pages' );
|
||||
$tab_pages = [];
|
||||
$above_collapse = 5;
|
||||
|
||||
if ( $custom_pages ) {
|
||||
foreach ( $custom_pages as $page_id ) {
|
||||
@ -36,7 +35,7 @@ $chapters_html = FICTIONEER_CHAPTER_LIST_TRANSIENTS ? get_transient( 'fictioneer
|
||||
// Flags
|
||||
$hide_icons = fictioneer_get_field( 'fictioneer_story_hide_chapter_icons' ) || get_option( 'fictioneer_hide_chapter_icons' );
|
||||
$enable_groups = get_option( 'fictioneer_enable_chapter_groups' ) && ! fictioneer_get_field( 'fictioneer_story_disable_groups' );
|
||||
$disable_collapse = fictioneer_get_field( 'fictioneer_story_disable_collapse' );
|
||||
$disable_folding = fictioneer_get_field( 'fictioneer_story_disable_collapse' );
|
||||
|
||||
// Query blog posts (if any)
|
||||
$category = implode( ', ', wp_get_post_categories( $args['story_id'] ) );
|
||||
@ -54,83 +53,57 @@ $blog_posts = new WP_Query(
|
||||
|
||||
?>
|
||||
|
||||
<?php
|
||||
// ======================================================================================
|
||||
// CONTROL INPUTS
|
||||
// ======================================================================================
|
||||
?>
|
||||
|
||||
<input type="radio" id="toggle-chapter" name="story_tab" hidden checked>
|
||||
|
||||
<?php
|
||||
if ( $blog_posts->have_posts() ) {
|
||||
echo '<input type="radio" id="toggle-blog" name="story_tab" hidden>';
|
||||
}
|
||||
|
||||
if ( $custom_pages ) {
|
||||
$index = 0;
|
||||
|
||||
foreach ( $tab_pages as $page ) {
|
||||
if ( empty( $page[1] ) ) continue;
|
||||
echo '<input type="radio" id="toggle-custom-' . $index . '" name="story_tab" hidden>';
|
||||
$index++;
|
||||
}
|
||||
}
|
||||
?>
|
||||
|
||||
<input id="toggle-order" type="checkbox" hidden>
|
||||
<input id="toggle-view" type="checkbox" hidden>
|
||||
|
||||
<?php
|
||||
// ======================================================================================
|
||||
// TAB SECTION
|
||||
// ======================================================================================
|
||||
?>
|
||||
|
||||
<section id="tabs" class="story__tabs tabs-wrapper padding-left padding-right">
|
||||
<section id="tabs" class="story__tabs tabs-wrapper padding-left padding-right" data-current="chapters" data-order="asc" data-view="list">
|
||||
|
||||
<div class="tabs">
|
||||
<label id="chapter-tab" for="toggle-chapter" class="tabs__item" tabindex="0">
|
||||
<?php
|
||||
if ( $story['status'] === 'Oneshot' ) {
|
||||
_e( 'Oneshot', 'fictioneer' );
|
||||
} else {
|
||||
echo sprintf(
|
||||
__( '%1$s %2$s', 'fictioneer' ),
|
||||
$story['chapter_count'],
|
||||
_n( 'Chapter', 'Chapters', $story['chapter_count'], 'fictioneer' )
|
||||
);
|
||||
}
|
||||
?>
|
||||
</label>
|
||||
<button class="tabs__item _current" data-target="chapters" tabindex="0"><?php
|
||||
if ( $story['status'] === 'Oneshot' ) {
|
||||
_e( 'Oneshot', 'fictioneer' );
|
||||
} else {
|
||||
printf(
|
||||
__( '%1$s %2$s', 'fictioneer' ),
|
||||
$story['chapter_count'],
|
||||
_n( 'Chapter', 'Chapters', $story['chapter_count'], 'fictioneer' )
|
||||
);
|
||||
}
|
||||
?></button>
|
||||
|
||||
<?php if ( $blog_posts->have_posts() ) : ?>
|
||||
<label id="blog-tab" for="toggle-blog" class="tabs__item" tabindex="0"><?php echo fcntr( 'story_blog' ); ?></label>
|
||||
<button class="tabs__item" data-target="blog" tabindex="0"><?php echo fcntr( 'story_blog' ); ?></button>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php
|
||||
if ( $custom_pages ) {
|
||||
$index = 0;
|
||||
$index = 1;
|
||||
|
||||
foreach ( $tab_pages as $page ) {
|
||||
if ( empty( $page[1] ) ) continue;
|
||||
echo '<label tabindex="0" id="custom-tab-' . $index . '" for="toggle-custom-' . $index . '" class="tabs__item">' . $page[1] . '</label>';
|
||||
|
||||
echo "<button class='tabs__item' data-target='tab-page-{$index}' tabindex='0'>{$page[1]}</button>";
|
||||
|
||||
$index++;
|
||||
if ( $index > 3) break; // Only show 4 custom tabs
|
||||
|
||||
if ( $index > FICTIONEER_MAX_CUSTOM_PAGES_PER_STORY) break; // Only show 4 custom tabs
|
||||
}
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
<div class="story__chapter-list-toggles">
|
||||
<label class="list-button story__toggle _view" for="toggle-view" tabindex="0">
|
||||
<button id="button-toggle-chapter-view" class="list-button story__toggle _view" data-view="list" tabindex="0">
|
||||
<?php fictioneer_icon( 'grid-2x2', 'on' ); ?>
|
||||
<i class="fa-solid fa-list off"></i>
|
||||
</label>
|
||||
<label class="list-button story__toggle _order" for="toggle-order" tabindex="0">
|
||||
</button>
|
||||
<button id="button-toggle-chapter-order" class="list-button story__toggle _order" data-order="asc" tabindex="0">
|
||||
<i class="fa-solid fa-arrow-down-1-9 off"></i>
|
||||
<i class="fa-solid fa-arrow-down-9-1 on"></i>
|
||||
</label>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@ -143,19 +116,20 @@ $blog_posts = new WP_Query(
|
||||
|
||||
<?php
|
||||
if ( $custom_pages ) {
|
||||
$index = 0;
|
||||
$index = 1;
|
||||
|
||||
foreach ( $tab_pages as $page ) {
|
||||
if ( empty( $page[1] ) ) continue;
|
||||
|
||||
?>
|
||||
<section id="tab-page-<?php echo $index; ?>" class="story__custom-page padding-left padding-right content-section background-texture">
|
||||
<div class="story__custom-page-wrapper"><?php echo apply_filters( 'the_content', $page[2] ); ?></div>
|
||||
<section id="tab-page-<?php echo $index; ?>" class="story__tab-page padding-left padding-right content-section background-texture">
|
||||
<div class="story__custom-page"><?php echo apply_filters( 'the_content', $page[2] ); ?></div>
|
||||
</section>
|
||||
<?php
|
||||
|
||||
$index++;
|
||||
if ( $index > 3) break; // Only show 4 custom tabs
|
||||
|
||||
if ( $index > FICTIONEER_MAX_CUSTOM_PAGES_PER_STORY) break; // Only show 4 custom tabs
|
||||
}
|
||||
}
|
||||
?>
|
||||
@ -170,7 +144,7 @@ $blog_posts = new WP_Query(
|
||||
|
||||
<?php else : ob_start(); ?>
|
||||
|
||||
<section id="chapters" class="story__chapters">
|
||||
<section id="chapters" class="story__tab-page _current story__chapters" data-order="asc" data-view="list">
|
||||
<?php
|
||||
$chapters = fictioneer_get_field( 'fictioneer_story_chapters', $story_id );
|
||||
$chapter_groups = [];
|
||||
@ -245,37 +219,54 @@ $blog_posts = new WP_Query(
|
||||
|
||||
foreach ( $chapter_groups as $group ) {
|
||||
$index = 0;
|
||||
$reverse_order = 999999;
|
||||
$is_collapsed = ! $disable_collapse && ! get_option( 'fictioneer_disable_chapter_collapsing' );
|
||||
$is_collapsed = $is_collapsed && count( $group['data'] ) >= $above_collapse * 2 + 3;
|
||||
$group_chapter_count = count( $group['data'] );
|
||||
$reverse_order = 99999;
|
||||
$is_folded = ! $disable_folding && ! get_option( 'fictioneer_disable_chapter_collapsing' );
|
||||
$is_folded = $is_folded && count( $group['data'] ) >= FICTIONEER_CHAPTER_FOLDING_THRESHOLD * 2 + 3;
|
||||
$group_index++;
|
||||
|
||||
// Start HTML ---> ?>
|
||||
<div class="chapter-group<?php echo $hide_icons ? ' _no-icons' : ''; ?>">
|
||||
<div class="chapter-group<?php echo $hide_icons ? ' _no-icons' : ''; ?>" data-folded="true">
|
||||
|
||||
<?php if ( $has_groups ) : ?>
|
||||
<input id="group-toggle-<?php echo $group_index; ?>" class="chapter-group__toggle" type="checkbox" hidden>
|
||||
<label class="chapter-group__label" for="group-toggle-<?php echo $group_index; ?>" tabindex="0" role="button" aria-label="<?php esc_attr_e( 'Toggle chapter group collapse', 'fictioneer' ); ?>">
|
||||
<button
|
||||
class="chapter-group__name"
|
||||
aria-label="<?php esc_attr_e( 'Toggle chapter group collapse', 'fictioneer' ); ?>"
|
||||
tabindex="0"
|
||||
>
|
||||
<i class="fa-solid fa-chevron-down chapter-group__heading-icon"></i>
|
||||
<span><?php echo $group['group']; ?></span>
|
||||
</label>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
|
||||
<ol class="chapter-group__list">
|
||||
<?php foreach ( $group['data'] as $chapter ) : ?>
|
||||
<?php $index++; ?>
|
||||
|
||||
<?php if ( $is_collapsed && $index == $above_collapse + 1 ) : ?>
|
||||
<input id="chapters-toggle-<?php echo $group_index; ?>" type="checkbox" autocomplete="off" hidden>
|
||||
<li class="chapter-group__list-item _collapse" style="order: <?php echo $reverse_order - $index; ?>">
|
||||
<label for="chapters-toggle-<?php echo $group_index; ?>" tabindex="0">
|
||||
<span><?php printf( __( 'Show %s more', 'fictioneer' ), count( $group['data'] ) - $above_collapse * 2 ); ?></span>
|
||||
</label>
|
||||
<?php
|
||||
// Must account for extra toggle row and start at 1
|
||||
$is_folded = $index > FICTIONEER_CHAPTER_FOLDING_THRESHOLD &&
|
||||
$index < ( $group_chapter_count + 2 - FICTIONEER_CHAPTER_FOLDING_THRESHOLD );
|
||||
?>
|
||||
|
||||
<?php if ( $is_folded && $index == FICTIONEER_CHAPTER_FOLDING_THRESHOLD + 1 ) : ?>
|
||||
<li class="chapter-group__list-item _folding-toggle" style="order: <?php echo $reverse_order - $index; ?>">
|
||||
<button class="chapter-group__folding-toggle" tabindex="0">
|
||||
<?php
|
||||
printf(
|
||||
__( 'Show %s more', 'fictioneer' ),
|
||||
$group_chapter_count - FICTIONEER_CHAPTER_FOLDING_THRESHOLD * 2
|
||||
);
|
||||
?>
|
||||
</button>
|
||||
</li>
|
||||
<?php $index++; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
<li class="chapter-group__list-item" style="order: <?php echo $reverse_order - $index; ?>">
|
||||
<li
|
||||
class="chapter-group__list-item <?php echo $is_folded ? '_foldable' : ''; ?>"
|
||||
style="order: <?php echo $reverse_order - $index; ?>"
|
||||
>
|
||||
|
||||
<?php if ( ! empty( $chapter['text_icon'] ) && ! $hide_icons ) : ?>
|
||||
<span class="chapter-group__list-item-icon _text text-icon"><?php echo $chapter['text_icon']; ?></span>
|
||||
@ -283,7 +274,10 @@ $blog_posts = new WP_Query(
|
||||
<i class="<?php echo empty( $chapter['icon'] ) ? 'fa-solid fa-book' : $chapter['icon']; ?> chapter-group__list-item-icon"></i>
|
||||
<?php endif; ?>
|
||||
|
||||
<a href="<?php echo $chapter['link']; ?>" class="chapter-group__list-item-link truncate _1-1 <?php echo $chapter['password'] ? '_password' : ''; ?>">
|
||||
<a
|
||||
href="<?php echo $chapter['link']; ?>"
|
||||
class="chapter-group__list-item-link truncate _1-1 <?php echo $chapter['password'] ? '_password' : ''; ?>"
|
||||
>
|
||||
<?php
|
||||
if ( ! empty( $chapter['prefix'] ) ) {
|
||||
echo apply_filters( 'fictioneer_filter_list_chapter_prefix', $chapter['prefix'] );
|
||||
@ -301,7 +295,7 @@ $blog_posts = new WP_Query(
|
||||
<i class="fa-solid fa-lock icon-password grid-view"></i>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php echo fictioneer_get_list_chapter_meta_row( $chapter, ['grid' => true] ); ?>
|
||||
<?php echo fictioneer_get_list_chapter_meta_row( $chapter, array( 'grid' => true ) ); ?>
|
||||
|
||||
<?php if ( get_option( 'fictioneer_enable_checkmarks' ) ) : ?>
|
||||
<button
|
||||
@ -338,10 +332,13 @@ $blog_posts = new WP_Query(
|
||||
|
||||
<?php
|
||||
// Store output
|
||||
$chapters_html = ob_get_contents();
|
||||
$chapters_html = ob_get_clean();
|
||||
|
||||
// Compress output
|
||||
$chapters_html = fictioneer_minify_html( $chapters_html );
|
||||
|
||||
// Flush buffered output
|
||||
ob_end_flush();
|
||||
echo $chapters_html;
|
||||
|
||||
// Cache for next time (24 hours)
|
||||
if ( FICTIONEER_CHAPTER_LIST_TRANSIENTS ) {
|
||||
@ -357,7 +354,7 @@ $blog_posts = new WP_Query(
|
||||
// ======================================================================================
|
||||
?>
|
||||
|
||||
<section class="story__blog">
|
||||
<section id="blog" class="story__blog story__tab-page">
|
||||
<ol class="story__blog-list">
|
||||
<?php
|
||||
if ( $blog_posts->have_posts() ) {
|
||||
|
||||
@ -1222,11 +1222,11 @@ if (fcn_cardLists.length) {
|
||||
// COLLAPSE/EXPAND CHAPTER GROUPS
|
||||
// =============================================================================
|
||||
|
||||
_$$('.chapter-group__toggle').forEach(element => {
|
||||
element.addEventListener('change', event => {
|
||||
_$$('.chapter-group__name').forEach(element => {
|
||||
element.addEventListener('click', event => {
|
||||
var group = event.currentTarget.closest('.chapter-group'),
|
||||
list = group.querySelector('.chapter-group__list'),
|
||||
state = event.currentTarget.checked;
|
||||
state = !group.classList.contains('_closed');
|
||||
|
||||
// Base for transition
|
||||
list.style.height = `${list.scrollHeight}px`;
|
||||
@ -1242,10 +1242,12 @@ _$$('.chapter-group__toggle').forEach(element => {
|
||||
let group = event.currentTarget.closest('.chapter-group'),
|
||||
list = group.querySelector('.chapter-group__list');
|
||||
|
||||
// Remove inline height once done
|
||||
list.style.height = '';
|
||||
|
||||
list.querySelectorAll('a, button, label').forEach(element => {
|
||||
element.tabIndex = group.querySelector('.chapter-group__toggle').checked ? '-1' : '0';
|
||||
// Disable tab navigation into the hidden elements
|
||||
list.querySelectorAll('a, button, label, input:not([hidden])').forEach(element => {
|
||||
element.tabIndex = group.classList.contains('_closed') ? '-1' : '0';
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
@ -83,33 +83,94 @@ function fcn_applyStorySettings() {
|
||||
if (typeof fcn_storySettings !== 'object') return;
|
||||
|
||||
// List view
|
||||
_$$$('toggle-view').checked = fcn_storySettings.view == 'grid';
|
||||
_$$('[data-view]').forEach(element => {
|
||||
element.dataset.view = fcn_storySettings.view == 'grid' ? 'grid' : 'list';
|
||||
});
|
||||
|
||||
// List order
|
||||
_$$$('toggle-order').checked = fcn_storySettings.order == 'desc';
|
||||
_$$('[data-order]').forEach(element => {
|
||||
element.dataset.order = fcn_storySettings.order == 'desc' ? 'desc' : 'asc';
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize
|
||||
fcn_applyStorySettings();
|
||||
|
||||
// Event listener for to toggle list order
|
||||
_$$$('toggle-order')?.addEventListener(
|
||||
'change',
|
||||
// =============================================================================
|
||||
// ORDER & VIEW
|
||||
// =============================================================================
|
||||
|
||||
// Event listener for to toggle chapter order
|
||||
_$$$('button-toggle-chapter-order')?.addEventListener(
|
||||
'click',
|
||||
e => {
|
||||
fcn_storySettings['order'] = e.currentTarget.checked ? 'desc' : 'asc';
|
||||
fcn_storySettings['order'] = e.currentTarget.dataset.order === 'asc' ? 'desc' : 'asc';
|
||||
fcn_setStorySettings(fcn_storySettings);
|
||||
fcn_applyStorySettings();
|
||||
}
|
||||
);
|
||||
|
||||
// Event listener for to toggle list order
|
||||
_$$$('toggle-view')?.addEventListener(
|
||||
'change',
|
||||
// Event listener for to toggle chapter view
|
||||
_$$$('button-toggle-chapter-view')?.addEventListener(
|
||||
'click',
|
||||
e => {
|
||||
fcn_storySettings['view'] = e.currentTarget.checked ? 'grid' : 'list';
|
||||
fcn_storySettings['view'] = e.currentTarget.dataset.view === 'list' ? 'grid' : 'list';
|
||||
fcn_setStorySettings(fcn_storySettings);
|
||||
fcn_applyStorySettings();
|
||||
}
|
||||
);
|
||||
|
||||
// =============================================================================
|
||||
// CHAPTER FOLDING
|
||||
// =============================================================================
|
||||
|
||||
_$$('.chapter-group__folding-toggle').forEach(element => {
|
||||
element.addEventListener(
|
||||
'click',
|
||||
e => {
|
||||
let group = e.currentTarget.closest('.chapter-group[data-folded]');
|
||||
|
||||
if (group) {
|
||||
group.dataset.folded = group.dataset.folded == 'true' ? 'false' : 'true';
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
// =============================================================================
|
||||
// STORY TABS
|
||||
// =============================================================================
|
||||
|
||||
/**
|
||||
* Toggles the active story tab
|
||||
*
|
||||
* @since 5.4.0
|
||||
*
|
||||
* @param {HTMLElement} target - The clicked tab element.
|
||||
*/
|
||||
|
||||
function fcn_toggleStoryTab(target) {
|
||||
// Clear previous tab
|
||||
_$$('.story__article ._current').forEach(item => {
|
||||
item.classList.remove('_current');
|
||||
});
|
||||
|
||||
// Set new tab
|
||||
_$$$(target.dataset.target).classList.add('_current');
|
||||
_$$$('tabs').dataset.current = target.dataset.target;
|
||||
target.classList.add('_current');
|
||||
}
|
||||
|
||||
// Listen for clicks on tabs...
|
||||
_$$('.tabs__item').forEach(element => {
|
||||
element.addEventListener(
|
||||
'click',
|
||||
event => {
|
||||
fcn_toggleStoryTab(event.currentTarget);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
// =============================================================================
|
||||
// LOAD STORY COMMENTS
|
||||
// =============================================================================
|
||||
|
||||
@ -36,7 +36,7 @@ $header_breakpoint: 640px;
|
||||
}
|
||||
|
||||
:root.minimal {
|
||||
#toggle-view:checked ~ .story__chapters {
|
||||
.story__chapters[data-view="grid"] {
|
||||
.chapter-group__list-item{
|
||||
box-shadow: var(--minimal-container-box-shadow);
|
||||
}
|
||||
@ -158,14 +158,10 @@ $header_breakpoint: 640px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
&-image {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: block;
|
||||
background: var(--placeholder-no-cover);
|
||||
border-radius: var(--layout-border-radius-small);
|
||||
height: 100%;
|
||||
max-height: var(--img-height);
|
||||
@ -247,12 +243,32 @@ $header_breakpoint: 640px;
|
||||
|
||||
&__tabs {
|
||||
margin: 3rem 0 1.5rem;
|
||||
|
||||
&:not([data-current="chapters"]) .story__toggle {
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__chapters {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
margin-top: -24px; // Compensate groups
|
||||
|
||||
&[data-order="asc"] {
|
||||
flex-direction: column;
|
||||
|
||||
.chapter-group__list-item {
|
||||
order: initial !important;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-view="list"] {
|
||||
.grid-view {
|
||||
display: none;
|
||||
content-visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chapter-group {
|
||||
@ -265,24 +281,24 @@ $header_breakpoint: 640px;
|
||||
margin-right: var(--layout-spacing-horizontal);
|
||||
}
|
||||
|
||||
.chapter-group__list-item._collapse {
|
||||
.chapter-group__list-item._folding-toggle {
|
||||
display: block;
|
||||
content-visibility: visible;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
content-visibility: visible;
|
||||
color: var(--fg-900);
|
||||
line-height: 1.125;
|
||||
padding: 1.125rem 0;
|
||||
transition: color var(--transition-duration);
|
||||
&__folding-toggle {
|
||||
display: block;
|
||||
content-visibility: visible;
|
||||
color: var(--fg-900);
|
||||
line-height: 1.125;
|
||||
text-align: center;
|
||||
padding: 1.125rem 0;
|
||||
transition: color var(--transition-duration);
|
||||
width: 100%;
|
||||
|
||||
&:hover {
|
||||
color: var(--fg-700);
|
||||
}
|
||||
&:hover {
|
||||
color: var(--fg-700);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -338,19 +354,6 @@ $header_breakpoint: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
--focus-offset: 2px;
|
||||
color: var(--fg-600);
|
||||
font-size: 18px;
|
||||
padding: 0 4px;
|
||||
margin-right: -4px;
|
||||
|
||||
&:not(.marked) {
|
||||
color: var(--checkmark-not-checked);
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-password {
|
||||
&.grid-view {
|
||||
grid-area: 1/3/2/4;
|
||||
@ -359,10 +362,13 @@ $header_breakpoint: 640px;
|
||||
}
|
||||
}
|
||||
|
||||
&__tab-page:not(._current) {
|
||||
display: none;
|
||||
content-visibility: hidden;
|
||||
}
|
||||
|
||||
&__custom-page {
|
||||
&-wrapper {
|
||||
padding: 8px 2px;
|
||||
}
|
||||
padding: 8px 2px;
|
||||
}
|
||||
|
||||
&__blog {
|
||||
@ -403,188 +409,102 @@ $header_breakpoint: 640px;
|
||||
}
|
||||
|
||||
&__toggle {
|
||||
&:is(label) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.on {
|
||||
display: none;
|
||||
content-visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#toggle-order {
|
||||
&:checked {
|
||||
~ .story__tabs {
|
||||
label._order {
|
||||
.on {
|
||||
display: block;
|
||||
content-visibility: visible;
|
||||
}
|
||||
|
||||
.off {
|
||||
display: none;
|
||||
content-visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:checked) {
|
||||
~ .story__chapters {
|
||||
flex-direction: column;
|
||||
|
||||
.chapter-group__list-item{
|
||||
order: initial !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#toggle-view {
|
||||
&:not(:checked) {
|
||||
~ .story__chapters {
|
||||
.grid-view {
|
||||
display: none;
|
||||
content-visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
~ .story__tabs {
|
||||
label._view {
|
||||
.on {
|
||||
display: block;
|
||||
content-visibility: visible;
|
||||
}
|
||||
|
||||
.off {
|
||||
display: none;
|
||||
content-visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
~ .story__chapters {
|
||||
margin-top: -24px; // Compensate groups
|
||||
|
||||
.list-view {
|
||||
display: none;
|
||||
content-visibility: hidden;
|
||||
}
|
||||
|
||||
.chapter-group {
|
||||
&__list {
|
||||
display: grid;
|
||||
gap: get_clamp(12, 16, 320, 480);
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(100%, 136px), 1fr));
|
||||
|
||||
@include bp(phablet) {
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
|
||||
}
|
||||
|
||||
&-item {
|
||||
background: var(--e-2);
|
||||
padding: .5rem;
|
||||
border: none !important; // Accounts for minimalist mode
|
||||
border-radius: var(--layout-border-radius-small); // Accounts for minimalist mode
|
||||
filter: var(--container-drop-shadow);
|
||||
|
||||
&-icon {
|
||||
display: none;
|
||||
content-visibility: hidden;
|
||||
}
|
||||
|
||||
&-link {
|
||||
grid-area: 1/1/2/4;
|
||||
font-size: var(--fs-dxs);
|
||||
|
||||
&._password {
|
||||
grid-area: 1/1/2/3;
|
||||
}
|
||||
}
|
||||
|
||||
&-date {
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-words {
|
||||
@media only screen and (max-width: 340px) {
|
||||
span span {
|
||||
display: none;
|
||||
content-visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-subrow {
|
||||
grid-area: 2/1/3/4;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
align-items: flex-end;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
padding: 4px 8px 8px 8px;
|
||||
transform: translate(4px, 14px);
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Custom tabs are handled in single-story.php!
|
||||
#toggle-chapter:checked ~ .story__tabs .tabs #chapter-tab,
|
||||
#toggle-blog:checked ~ .story__tabs .tabs #blog-tab,
|
||||
#toggle-custom-0:checked ~ .story__tabs .tabs #custom-tab-0,
|
||||
#toggle-custom-1:checked ~ .story__tabs .tabs #custom-tab-1,
|
||||
#toggle-custom-2:checked ~ .story__tabs .tabs #custom-tab-2,
|
||||
#toggle-custom-3:checked ~ .story__tabs .tabs #custom-tab-3,
|
||||
#toggle-custom-4:checked ~ .story__tabs .tabs #custom-tab-4 {
|
||||
background: var(--tab-background-active);
|
||||
color: var(--tab-text-active);
|
||||
text-shadow: var(--tab-text-shadow-active);
|
||||
}
|
||||
|
||||
#toggle-chapter:not(:checked) ~ .story__tabs .story__chapter-list-toggles * {
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#toggle {
|
||||
&-chapter:not(:checked) ~ .story__chapters,
|
||||
&-blog:not(:checked) ~ .story__blog,
|
||||
&-custom-0:not(:checked) ~ #tab-page-0,
|
||||
&-custom-1:not(:checked) ~ #tab-page-1,
|
||||
&-custom-2:not(:checked) ~ #tab-page-2,
|
||||
&-custom-3:not(:checked) ~ #tab-page-3,
|
||||
&-custom-4:not(:checked) ~ #tab-page-4 {
|
||||
display: none;
|
||||
content-visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
[id*=chapters-toggle] {
|
||||
&:not(:checked) {
|
||||
~ li:not(:nth-last-of-type(-n+5)) {
|
||||
.on {
|
||||
display: none;
|
||||
content-visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&:checked {
|
||||
+ li._collapse {
|
||||
display: none !important;
|
||||
content-visibility: hidden;
|
||||
.off {
|
||||
display: block;
|
||||
content-visibility: visible;
|
||||
}
|
||||
|
||||
&:is([data-view="grid"], [data-order="desc"]) {
|
||||
.on {
|
||||
display: block;
|
||||
content-visibility: visible;
|
||||
}
|
||||
|
||||
.off {
|
||||
display: none;
|
||||
content-visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.story__chapters[data-view="grid"] {
|
||||
margin-top: -24px; // Compensate groups
|
||||
|
||||
.list-view {
|
||||
display: none;
|
||||
content-visibility: hidden;
|
||||
}
|
||||
|
||||
.chapter-group {
|
||||
&__list {
|
||||
display: grid;
|
||||
gap: get_clamp(12, 16, 320, 480);
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(100%, 136px), 1fr));
|
||||
|
||||
@include bp(phablet) {
|
||||
grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
|
||||
}
|
||||
|
||||
&-item {
|
||||
background: var(--e-2);
|
||||
padding: .5rem;
|
||||
border: none !important; // Accounts for minimalist mode
|
||||
border-radius: var(--layout-border-radius-small); // Accounts for minimalist mode
|
||||
filter: var(--container-drop-shadow);
|
||||
|
||||
&-icon {
|
||||
display: none;
|
||||
content-visibility: hidden;
|
||||
}
|
||||
|
||||
&-link {
|
||||
grid-area: 1/1/2/4;
|
||||
font-size: var(--fs-dxs);
|
||||
|
||||
&._password {
|
||||
grid-area: 1/1/2/3;
|
||||
}
|
||||
}
|
||||
|
||||
&-date {
|
||||
&::before {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
&-words {
|
||||
@media only screen and (max-width: 340px) {
|
||||
span span {
|
||||
display: none;
|
||||
content-visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-subrow {
|
||||
grid-area: 2/1/3/4;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
font-size: 14px;
|
||||
padding: 4px 8px 8px 8px;
|
||||
transform: translate(4px, 14px);
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chapter-group[data-folded="true"] .chapter-group__list-item._foldable,
|
||||
.chapter-group[data-folded="false"] .chapter-group__list-item._folding-toggle {
|
||||
display: none;
|
||||
content-visibility: hidden;
|
||||
}
|
||||
|
||||
@ -543,7 +543,7 @@ html:not(.logged-in) body:not(.logged-in) {
|
||||
}
|
||||
}
|
||||
|
||||
&__label {
|
||||
&__name {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
@ -623,10 +623,12 @@ html:not(.logged-in) body:not(.logged-in) {
|
||||
}
|
||||
|
||||
.checkmark {
|
||||
grid-area: 1 / 3 / 3 / 4;
|
||||
--focus-offset: 2px;
|
||||
grid-area: 1 / 3 / 3 / 4;
|
||||
display: block;
|
||||
color: var(--fg-600);
|
||||
font-size: 18px;
|
||||
line-height: 1;
|
||||
padding: 0 4px;
|
||||
margin-right: -4px;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user