Add option to collapse chapter groups by default

This commit is contained in:
Tetrakern 2024-01-18 12:15:19 +01:00
parent 6a2e6fa330
commit 86853cc6e6
6 changed files with 35 additions and 5 deletions

View File

@ -483,14 +483,14 @@ Renders a list of chapters identical to those on story pages, ordered by sequenc
* **offset:** Skip a number of chapters, which can make sense if you query all.
* **heading:** Show a heading with collapse toggle above the list.
* **group:** Only show chapters with a specific group name, which can transcend stories.
* **class:** Additional CSS classes, separated by whitespace.
* **class:** Additional CSS classes, separated by whitespace. `no-auto-collapse` prevents default group collapsing (if set).
```
[fictioneer_chapter_list story="69"]
```
```
[fictioneer_chapter_list story="69" count="10" offset="2"]
[fictioneer_chapter_list class="foobar no-auto-collapse" story="69" count="10" offset="2"]
```
```

View File

@ -708,7 +708,7 @@ You can choose between three different header styles: **default**, **top**, and
![Customizer HSL Sliders](repo/assets/developer_tools_preview.jpg?raw=true)
While the customization options are not as extensive as with multi-purpose themes or page builders, you can achieve quite a lot with some simple [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) snippets. Easy to learn, hard to master. However, following are several snippets you can use and modify to your needs. Just put them into **Customizer > Additional CSS** or a child theme. This is by far the most powerful way of customization — there are over 500 properties and near infinite possible values that can be assigned to each and every element (although not all are valid, never mind reasonable).
While the customization options are not as extensive as with multi-purpose themes or page builders, you can achieve quite a lot with some simple [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) snippets. Easy to learn, hard to master. However, following are several snippets you can use and modify to your needs. Just put them into **Customizer > Additional CSS** or a child theme. This is by far the most powerful way of customization — there are over 500 properties and virtually infinite possible values and combinations that can be assigned to each and every element.
**Developer Tools:** Your very best friend! You can open them by right-clicking anywhere on the site and hitting **Inspect**, directly highlighting the element you are on. Hit **\[Option\] + \[⌘\] + \[J\]** (on macOS) or **\[Shift\] + \[CTRL\] + \[J\]** (on Windows/Linux) if you want to use the keyboard. Here you can see the HTML and applied CSS styles; you can even manipulate them to see what happens. There are many tutorials online on how to use the tools, please consult one first if you are new.

View File

@ -911,6 +911,10 @@ function fictioneer_shortcode_chapter_list( $attr ) {
$classes .= ' _no-icons';
}
if ( get_option( 'fictioneer_collapse_groups_by_default' ) && ! str_contains( $classes, 'no-auto-collapse' ) ) {
$classes .= ' _closed';
}
// Apply offset and count
if ( ! $group ) {
$chapters = array_slice( $chapters, $offset );

View File

@ -474,6 +474,13 @@ define( 'FICTIONEER_OPTIONS', array(
'sanitize_callback' => 'fictioneer_sanitize_checkbox',
'label' => __( 'Disable collapsing of chapters', 'fictioneer' ),
'default' => 0
),
'fictioneer_collapse_groups_by_default' => array(
'name' => 'fictioneer_collapse_groups_by_default',
'group' => 'fictioneer-settings-general-group',
'sanitize_callback' => 'fictioneer_sanitize_checkbox',
'label' => __( 'Collapse chapter groups by default', 'fictioneer' ),
'default' => 0
),
'fictioneer_enable_public_cache_compatibility' => array(
'name' => 'fictioneer_enable_public_cache_compatibility',

View File

@ -159,6 +159,15 @@
?>
</div>
<div class="fictioneer-card__row">
<?php
fictioneer_settings_label_checkbox(
'fictioneer_collapse_groups_by_default',
__( 'Chapter groups (if used) are collapsed on page load.', 'fictioneer' )
);
?>
</div>
<div class="fictioneer-card__row">
<?php
fictioneer_settings_label_checkbox(

View File

@ -44,6 +44,7 @@ $hide_icons = get_post_meta( $story_id, 'fictioneer_story_hide_chapter_icons', t
$enable_groups = get_option( 'fictioneer_enable_chapter_groups' ) &&
! get_post_meta( $story_id, 'fictioneer_story_disable_groups', true );
$disable_folding = get_post_meta( $story_id, 'fictioneer_story_disable_collapse', true );
$collapse_groups = get_option( 'fictioneer_collapse_groups_by_default' );
?>
@ -152,6 +153,15 @@ $disable_folding = get_post_meta( $story_id, 'fictioneer_story_disable_collapse'
<?php
$chapters = fictioneer_get_story_chapters( $story_id ); // Already prepared!
$chapter_groups = [];
$group_classes = [];
if ( $hide_icons ) {
$group_classes[] = '_no-icons';
}
if ( $collapse_groups ) {
$group_classes[] = '_closed';
}
// Loop and prepare groups
if ( ! empty( $chapters ) ) {
@ -231,7 +241,7 @@ $disable_folding = get_post_meta( $story_id, 'fictioneer_story_disable_collapse'
$group_index++;
// Start HTML ---> ?>
<div class="chapter-group<?php echo $hide_icons ? ' _no-icons' : ''; ?>" data-folded="true">
<div class="chapter-group <?php echo implode( ' ', $group_classes ); ?>" data-folded="true">
<?php if ( $has_groups ) : ?>
<button
@ -323,7 +333,7 @@ $disable_folding = get_post_meta( $story_id, 'fictioneer_story_disable_collapse'
}
} elseif ( $story['status'] !== 'Oneshot' ) {
// Start HTML ---> ?>
<div class="chapter-group<?php echo $hide_icons ? ' _no-icons' : ''; ?>">
<div class="chapter-group <?php echo implode( ' ', $group_classes ); ?>">
<ol class="chapter-group__list">
<li class="chapter-group__list-item _empty">
<span><?php _e( 'No chapters published yet.', 'fictioneer' ); ?></span>