Refactored mobile menu
That. Was. Not. Fun!
This commit is contained in:
Tetrakern
parent
5fde5a8966
commit
c35ea2a5ad
@ -565,7 +565,7 @@ Fires right after opening the `.mobile-menu__bottom` container in the `partials/
|
||||
---
|
||||
|
||||
### `do_action( 'fictioneer_mobile_menu_center' )`
|
||||
Fires right after the main mobile menu frame in the `partials/_mobile-menu.php` partial, which holds most of the panels. Primarily used to output additional frames that are triggered from within the main frame via control radio inputs. Make sure to always include a preceding `<input type="radio" name="mobile-frame-control" id="mobile-menu-frame-*" checked hidden>` with * being your custom ID, toggled via label inside the main frame.
|
||||
Fires right after the main mobile menu frame in the `partials/_mobile-menu.php` partial, which holds most of the panels. Primarily used to output additional frames.
|
||||
|
||||
**Hooked actions:**
|
||||
* `fictioneer_mobile_follows_frame()` – Frame for mobile updates (Follows). Priority 10.
|
||||
@ -575,11 +575,11 @@ Fires right after the main mobile menu frame in the `partials/_mobile-menu.php`
|
||||
---
|
||||
|
||||
### `do_action( 'fictioneer_mobile_menu_main_frame_panels' )`
|
||||
Fires right after opening the main mobile menu frame in the `partials/_mobile-menu.php` partial, the second element after the associated control radio input `#mobile-menu-frame-main`. Most panels of the mobile menu are enqueued here.
|
||||
Fires right after opening the main mobile menu frame in the `partials/_mobile-menu.php` partial. Most panels of the mobile menu are enqueued here.
|
||||
|
||||
**Hooked actions:**
|
||||
* `fictioneer_mobile_navigation_panel()` – Navigation menu folded out. Priority 10.
|
||||
* `fictioneer_mobile_lists_panel()` – Frame toggles for the mobile bookmarks and updates (Follows). Priority 20.
|
||||
* `fictioneer_mobile_lists_panel()` – Frame buttons for bookmarks, chapters, and Follows. Priority 20.
|
||||
* `fictioneer_mobile_user_menu()` – Mobile variant of the user menu. Priority 30.
|
||||
|
||||
---
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -10,9 +10,7 @@ if ( ! function_exists( 'fictioneer_output_mobile_menu' ) ) {
|
||||
*
|
||||
* Outputs the HTML for the mobile menu. The mobile menu is structured into
|
||||
* sections (top|center|bottom) > frames > panels. Only one frame per section
|
||||
* can be displayed at a time, segmenting the menu. This is achieved without
|
||||
* JavaScript via control radio inputs and the sibling selector, allowing the
|
||||
* menu to work even if the footer scripts have not yet been loaded.
|
||||
* should be displayed at a time, segmenting the menu.
|
||||
*
|
||||
* @since Fictioneer 5.0
|
||||
*
|
||||
@ -24,33 +22,16 @@ if ( ! function_exists( 'fictioneer_output_mobile_menu' ) ) {
|
||||
|
||||
function fictioneer_output_mobile_menu( $args ) {
|
||||
// Start HTML ---> ?>
|
||||
<input id="mobile-menu-toggle" type="checkbox" tabindex="-1" hidden>
|
||||
|
||||
<input id="mobile-menu-toggle" type="checkbox" autocomplete="off" tabindex="-1" hidden>
|
||||
<div class="mobile-menu">
|
||||
|
||||
<div class="mobile-menu__top"><?php do_action( 'fictioneer_mobile_menu_top' ); ?></div>
|
||||
|
||||
<div class="mobile-menu__center">
|
||||
|
||||
<?php
|
||||
/*
|
||||
* All frames require a preceding radio input with the "mobile-frame-control"
|
||||
* name. They are used to show and hide the currently active frame. Without,
|
||||
* the mobile menu will not work. The main frame is active by default when
|
||||
* the site is loaded.
|
||||
*/
|
||||
?>
|
||||
|
||||
<input type="radio" name="mobile-frame-control" id="mobile-menu-frame-main" tabindex="-1" checked hidden>
|
||||
|
||||
<div class="mobile-menu__frame"><?php do_action( 'fictioneer_mobile_menu_main_frame_panels' ); ?></div>
|
||||
|
||||
<div class="mobile-menu__frame _active" data-frame="main"><?php
|
||||
do_action( 'fictioneer_mobile_menu_main_frame_panels' );
|
||||
?></div>
|
||||
<?php do_action( 'fictioneer_mobile_menu_center' ); ?>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="mobile-menu__bottom"><?php do_action( 'fictioneer_mobile_menu_bottom' ); ?></div>
|
||||
|
||||
</div>
|
||||
<?php // <--- End HTML
|
||||
}
|
||||
@ -181,14 +162,13 @@ if ( ! function_exists( 'fictioneer_mobile_follows_frame' ) ) {
|
||||
|
||||
function fictioneer_mobile_follows_frame() {
|
||||
// Start HTML ---> ?>
|
||||
<input type="radio" name="mobile-frame-control" id="mobile-menu-frame-follows" tabindex="-1" hidden>
|
||||
<div class="mobile-menu__frame">
|
||||
<div class="mobile-menu__panel">
|
||||
<div class="mobile-menu__frame" data-frame="follows">
|
||||
<div class="mobile-menu__panel mobile-menu__follows-panel">
|
||||
<div class="mobile-menu__panel-header">
|
||||
<label for="mobile-menu-frame-main">
|
||||
<i class="fa-solid fa-caret-left"></i><span><?php _e( 'Back', 'fictioneer' ); ?></span>
|
||||
</label>
|
||||
<button id="button-mobile-mark-follows-read" class="mark-follows-read">
|
||||
<button class="mobile-menu__back-button">
|
||||
<i class="fa-solid fa-caret-left mobile-menu__item-icon"></i> <?php _e( 'Back', 'fictioneer' ); ?>
|
||||
</button>
|
||||
<button class="mark-follows-read mobile-menu__panel-action-button">
|
||||
<i class="fa-solid fa-check"></i>
|
||||
</button>
|
||||
</div>
|
||||
@ -222,30 +202,21 @@ if ( ! function_exists( 'fictioneer_mobile_bookmarks_frame' ) ) {
|
||||
// Start HTML ---> ?>
|
||||
<template id="mobile-bookmark-template" hidden>
|
||||
<li class="mobile-menu__bookmark">
|
||||
<button class="mobile-menu-bookmark-delete-button" data-bookmark-id>
|
||||
<i class="fa-solid fa-trash-alt"></i>
|
||||
</button>
|
||||
<button class="mobile-menu-bookmark-delete-button" data-bookmark-id><i class="fa-solid fa-trash-alt"></i></button>
|
||||
<i class="fa-solid fa-bookmark"></i>
|
||||
<a href="#"><span></span></a>
|
||||
<div class="mobile-menu__bookmark-progress">
|
||||
<div>
|
||||
<div class="mobile-menu__bookmark-bg" style></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mobile-menu__bookmark-progress"><div><div class="mobile-menu__bookmark-bg" style></div></div></div>
|
||||
</li>
|
||||
</template>
|
||||
<input type="radio" name="mobile-frame-control" id="mobile-menu-frame-bookmarks" tabindex="-1" hidden>
|
||||
<div class="mobile-menu__frame mobile-menu__frame--small-list mobile-menu__frame--bookmark-list">
|
||||
<div class="mobile-menu__panel mobile-menu__panel--bookmark-list">
|
||||
<input type="checkbox" id="toggle-mobile-menu-bookmarks-delete" name="toggle-mobile-menu-bookmarks-delete" tabindex="-1" class="hidden">
|
||||
<div class="mobile-menu__frame" data-frame="bookmarks">
|
||||
<div class="mobile-menu__panel mobile-menu__bookmarks-panel" data-editing="false">
|
||||
<div class="mobile-menu__panel-header">
|
||||
<label for="mobile-menu-frame-main">
|
||||
<i class="fa-solid fa-caret-left"></i><span><?php _e( 'Back', 'fictioneer' ); ?></span>
|
||||
</label>
|
||||
<label for="toggle-mobile-menu-bookmarks-delete" class="toggle-label">
|
||||
<i class="fa-solid fa-pen off"></i>
|
||||
<i class="fa-solid fa-check on" style="font-size: 15px;"></i>
|
||||
</label>
|
||||
<button class="mobile-menu__back-button">
|
||||
<i class="fa-solid fa-caret-left mobile-menu__item-icon"></i> <?php _e( 'Back', 'fictioneer' ); ?>
|
||||
</button>
|
||||
<button id="button-mobile-menu-toggle-bookmarks-edit" class="mobile-menu__panel-action-button">
|
||||
<i class="fa-solid fa-pen off"></i><i class="fa-solid fa-check on"></i>
|
||||
</button>
|
||||
</div>
|
||||
<ul class="mobile-menu__list mobile-menu__bookmark-list" data-empty="<?php echo fcntr( 'no_bookmarks', true ); ?>"></ul>
|
||||
</div>
|
||||
@ -274,13 +245,12 @@ if ( ! function_exists( 'fictioneer_mobile_chapters_frame' ) ) {
|
||||
if ( get_post_type() != 'fcn_chapter' || is_archive() || is_search() ) return;
|
||||
|
||||
// Start HTML ---> ?>
|
||||
<input type="radio" name="mobile-frame-control" id="mobile-menu-frame-chapters" tabindex="-1" hidden>
|
||||
<div class="mobile-menu__frame">
|
||||
<div class="mobile-menu__panel">
|
||||
<div class="mobile-menu__frame" data-frame="chapters">
|
||||
<div class="mobile-menu__panel mobile-menu__chapters-panel">
|
||||
<div class="mobile-menu__panel-header">
|
||||
<label for="mobile-menu-frame-main">
|
||||
<i class="fa-solid fa-caret-left"></i><span><?php _e( 'Back', 'fictioneer' ); ?></span>
|
||||
</label>
|
||||
<button class="mobile-menu__back-button">
|
||||
<i class="fa-solid fa-caret-left mobile-menu__item-icon"></i> <?php _e( 'Back', 'fictioneer' ); ?>
|
||||
</button>
|
||||
</div>
|
||||
<div id="mobile-menu-chapters-list" class="mobile-menu__list _chapters"></div>
|
||||
</div>
|
||||
@ -303,17 +273,15 @@ if ( ! function_exists( 'fictioneer_mobile_navigation_panel' ) ) {
|
||||
|
||||
function fictioneer_mobile_navigation_panel() {
|
||||
// Start HTML ---> ?>
|
||||
<nav id="mobile-navigation" class="mobile-navigation mobile-menu__panel">
|
||||
<?php
|
||||
wp_nav_menu(
|
||||
array(
|
||||
'theme_location' => 'nav_menu',
|
||||
'menu_class' => 'mobile-navigation__list',
|
||||
'container' => ''
|
||||
)
|
||||
);
|
||||
?>
|
||||
</nav>
|
||||
<nav id="mobile-navigation" class="mobile-navigation mobile-menu__panel"><?php
|
||||
wp_nav_menu(
|
||||
array(
|
||||
'theme_location' => 'nav_menu',
|
||||
'menu_class' => 'mobile-navigation__list',
|
||||
'container' => ''
|
||||
)
|
||||
);
|
||||
?></nav>
|
||||
<?php // <--- End HTML
|
||||
}
|
||||
}
|
||||
@ -335,24 +303,21 @@ if ( ! function_exists( 'fictioneer_mobile_lists_panel' ) ) {
|
||||
$post_type = is_archive() ? 'archive' : get_post_type();
|
||||
|
||||
// Start HTML ---> ?>
|
||||
<div class="mobile-menu__panel">
|
||||
<div class="mobile-menu__panel mobile-menu__lists-panel">
|
||||
<?php if ( $post_type === 'fcn_chapter' && fictioneer_get_field( 'fictioneer_chapter_story' ) && ! is_search() ) : ?>
|
||||
<label for="mobile-menu-frame-chapters">
|
||||
<i class="fa-solid fa-caret-right"></i>
|
||||
<span><?php _e( 'Chapters', 'fictioneer' ); ?></span>
|
||||
</label>
|
||||
<button class="mobile-menu__frame-button" data-frame-target="chapters">
|
||||
<i class="fa-solid fa-caret-right mobile-menu__item-icon"></i> <?php _e( 'Chapters', 'fictioneer' ); ?>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
<?php if ( get_option( 'fictioneer_enable_bookmarks' ) ) : ?>
|
||||
<label for="mobile-menu-frame-bookmarks">
|
||||
<i class="fa-solid fa-caret-right"></i>
|
||||
<span><?php echo fcntr( 'bookmarks' ); ?></span>
|
||||
</label>
|
||||
<button class="mobile-menu__frame-button" data-frame-target="bookmarks">
|
||||
<i class="fa-solid fa-caret-right mobile-menu__item-icon"></i> <?php echo fcntr( 'bookmarks' ); ?>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
<?php if ( get_option( 'fictioneer_enable_follows' ) ) : ?>
|
||||
<label for="mobile-menu-frame-follows" class="hide-if-logged-out follows-alert-number">
|
||||
<i class="fa-solid fa-caret-right"></i>
|
||||
<span><?php echo fcntr( 'follows' ); ?></span>
|
||||
</label>
|
||||
<button class="mobile-menu__frame-button hide-if-logged-out follows-alert-number" data-frame-target="follows">
|
||||
<i class="fa-solid fa-caret-right mobile-menu__item-icon"></i> <?php echo fcntr( 'follows' ); ?>
|
||||
</button>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php // <--- End HTML
|
||||
@ -394,8 +359,8 @@ if ( ! function_exists( 'fictioneer_mobile_user_menu' ) ) {
|
||||
ob_start();
|
||||
// Start HTML ---> ?>
|
||||
<a href="<?php echo esc_url( $profile_link ); ?>" class="hide-if-logged-out">
|
||||
<?php fictioneer_icon( 'user', '', '', 'style="transform: translate(0px,-14%) scale(1.725);"' ); ?>
|
||||
<span><?php echo fcntr( 'account' ); ?></span>
|
||||
<?php fictioneer_icon( 'user', 'mobile-menu__item-icon', '', 'style="transform: translate(0px,-14%) scale(1.725);"' ); ?>
|
||||
<?php echo fcntr( 'account' ); ?>
|
||||
</a>
|
||||
<?php // <--- End HTML
|
||||
$output['account'] = ob_get_clean();
|
||||
@ -405,8 +370,8 @@ if ( ! function_exists( 'fictioneer_mobile_user_menu' ) ) {
|
||||
ob_start();
|
||||
// Start HTML ---> ?>
|
||||
<a href="<?php echo esc_url( home_url( '/?s=' ) ); ?>">
|
||||
<i class="fa-solid fa-magnifying-glass"></i>
|
||||
<span><?php _e( 'Search', 'fictioneer' ); ?></span>
|
||||
<i class="fa-solid fa-magnifying-glass mobile-menu__item-icon"></i>
|
||||
<?php _e( 'Search', 'fictioneer' ); ?>
|
||||
</a>
|
||||
<?php // <--- End HTML
|
||||
$output['search'] = ob_get_clean();
|
||||
@ -415,8 +380,8 @@ if ( ! function_exists( 'fictioneer_mobile_user_menu' ) ) {
|
||||
ob_start();
|
||||
// Start HTML ---> ?>
|
||||
<label for="modal-site-settings-toggle">
|
||||
<i class="fa-solid fa-tools"></i>
|
||||
<span><?php echo fcntr( 'site_settings' ); ?></span>
|
||||
<i class="fa-solid fa-tools mobile-menu__item-icon"></i>
|
||||
<?php echo fcntr( 'site_settings' ); ?>
|
||||
</label>
|
||||
<?php // <--- End HTML
|
||||
$output['site_settings'] = ob_get_clean();
|
||||
@ -425,7 +390,7 @@ if ( ! function_exists( 'fictioneer_mobile_user_menu' ) ) {
|
||||
ob_start();
|
||||
// Start HTML ---> ?>
|
||||
<a href="<?php echo esc_url( $discord_link ); ?>" rel="noopener noreferrer nofollow">
|
||||
<i class="fa-brands fa-discord"></i>
|
||||
<i class="fa-brands fa-discord mobile-menu__item-icon"></i>
|
||||
<?php _e( 'Discord', 'fictioneer' ) ?>
|
||||
</a>
|
||||
<?php // <--- End HTML
|
||||
@ -436,7 +401,7 @@ if ( ! function_exists( 'fictioneer_mobile_user_menu' ) ) {
|
||||
ob_start();
|
||||
// Start HTML ---> ?>
|
||||
<a href="<?php echo esc_url( $bookshelf_link ); ?>" rel="noopener noreferrer nofollow" class="hide-if-logged-out">
|
||||
<i class="fa-solid fa-list"></i>
|
||||
<i class="fa-solid fa-list mobile-menu__item-icon"></i>
|
||||
<?php echo empty( $bookshelf_title ) ? __( 'Bookshelf', 'fictioneer' ) : $bookshelf_title; ?>
|
||||
</a>
|
||||
<?php // <--- End HTML
|
||||
@ -447,7 +412,7 @@ if ( ! function_exists( 'fictioneer_mobile_user_menu' ) ) {
|
||||
ob_start();
|
||||
// Start HTML ---> ?>
|
||||
<a href="<?php echo esc_url( $bookmarks_link ); ?>" rel="noopener noreferrer nofollow">
|
||||
<i class="fa-solid fa-bookmark"></i>
|
||||
<i class="fa-solid fa-bookmark mobile-menu__item-icon"></i>
|
||||
<?php echo fcntr( 'bookmarks' ); ?>
|
||||
</a>
|
||||
<?php // <--- End HTML
|
||||
@ -458,8 +423,8 @@ if ( ! function_exists( 'fictioneer_mobile_user_menu' ) ) {
|
||||
ob_start();
|
||||
// Start HTML ---> ?>
|
||||
<label for="modal-formatting-toggle">
|
||||
<?php fictioneer_icon( 'font-settings' ); ?>
|
||||
<span><?php echo fcntr( 'formatting' ); ?></span>
|
||||
<?php fictioneer_icon( 'font-settings', 'mobile-menu__item-icon' ); ?>
|
||||
<?php echo fcntr( 'formatting' ); ?>
|
||||
</label>
|
||||
<?php // <--- End HTML
|
||||
$output['formatting'] = ob_get_clean();
|
||||
@ -474,8 +439,8 @@ if ( ! function_exists( 'fictioneer_mobile_user_menu' ) ) {
|
||||
ob_start();
|
||||
// Start HTML ---> ?>
|
||||
<a id="mobile-menu-comment-jump" class="comments-toggle" rel="noopener noreferrer nofollow">
|
||||
<i class="fa-solid fa-comments"></i>
|
||||
<span><?php echo fcntr( 'jump_to_comments' ); ?></span>
|
||||
<i class="fa-solid fa-comments mobile-menu__item-icon"></i>
|
||||
<?php echo fcntr( 'jump_to_comments' ); ?>
|
||||
</a>
|
||||
<?php // <--- End HTML
|
||||
$output['comment_jump'] = ob_get_clean();
|
||||
@ -490,8 +455,8 @@ if ( ! function_exists( 'fictioneer_mobile_user_menu' ) ) {
|
||||
ob_start();
|
||||
// Start HTML ---> ?>
|
||||
<a id="mobile-menu-bookmark-jump" rel="noopener noreferrer nofollow" hidden>
|
||||
<i class="fa-solid fa-bookmark"></i>
|
||||
<span><?php echo fcntr( 'jump_to_bookmark' ); ?></span>
|
||||
<i class="fa-solid fa-bookmark mobile-menu__item-icon"></i>
|
||||
<?php echo fcntr( 'jump_to_bookmark' ); ?>
|
||||
</a>
|
||||
<?php // <--- End HTML
|
||||
$output['bookmark_jump'] = ob_get_clean();
|
||||
@ -501,7 +466,7 @@ if ( ! function_exists( 'fictioneer_mobile_user_menu' ) ) {
|
||||
ob_start();
|
||||
// Start HTML ---> ?>
|
||||
<a href="<?php echo fictioneer_get_logout_url(); ?>" onclick="fcn_cleanupLocalStorage()" rel="noopener noreferrer nofollow" class="hide-if-logged-out">
|
||||
<?php fictioneer_icon( 'fa-logout' ); ?>
|
||||
<?php fictioneer_icon( 'fa-logout', 'mobile-menu__item-icon', '', 'style="transform: translateY(-1px);"' ); ?>
|
||||
<?php echo fcntr( 'logout' ); ?>
|
||||
</a>
|
||||
<?php // <--- End HTML
|
||||
@ -512,7 +477,7 @@ if ( ! function_exists( 'fictioneer_mobile_user_menu' ) ) {
|
||||
ob_start();
|
||||
// Start HTML ---> ?>
|
||||
<label for="modal-login-toggle" class="hide-if-logged-in subscriber-login">
|
||||
<?php fictioneer_icon( 'fa-login' ); ?>
|
||||
<?php fictioneer_icon( 'fa-login', 'mobile-menu__item-icon' ); ?>
|
||||
<?php echo fcntr( 'login' ); ?>
|
||||
</label>
|
||||
<?php // <--- End HTML
|
||||
|
||||
2
js/follows.min.js
vendored
2
js/follows.min.js
vendored
@ -1 +1 @@
|
||||
const fcn_desktopFollowList=_$$$("follow-menu-scroll"),fcn_mobileFollowList=_$$$("mobile-menu-follows-list"),fcn_followsMenuItem=_$$$("follow-menu-button");var fcn_userFollowsTimeout,fcn_follows;function fcn_initializeFollows(){fcn_follows=fcn_getFollows(),fcn_fetchFollowsFromDatabase()}function fcn_getFollows(){let o=localStorage.getItem("fcnStoryFollows");return o&&fcn_isValidJSONString(o)?JSON.parse(o):{lastLoaded:0,data:{},seen:Date.now(),new:!1}}function fcn_fetchFollowsFromDatabase(){fcn_ajaxLimitThreshold<fcn_follows.lastLoaded?fcn_updateFollowsView():fcn_ajaxGet({action:"fictioneer_ajax_get_follows"}).then((o=>{if(o.success){let t=o.data.follows;t=fcn_isValidJSONString(t)?t:"{}",t=JSON.parse(t),(fcn_follows="object"==typeof t&&t.data&&Object.keys(t.data).length>0?t:{data:{},seen:Date.now(),new:!1}).lastLoaded=Date.now()}})).catch((()=>{localStorage.removeItem("fcnStoryFollows"),fcn_follows=!1})).then((()=>{fcn_updateFollowsView(),localStorage.removeItem("fcnBookshelfContent")}))}function fcn_updateFollowsView(){if(!fcn_follows)return;_$$(".button-follow-story").forEach((o=>{o.classList.toggle("_followed",fcn_follows?.data.hasOwnProperty(o.dataset.storyId))})),_$$(".card").forEach((o=>{o.classList.toggle("has-follow",fcn_follows?.data.hasOwnProperty(o.dataset.storyId))})),localStorage.setItem("fcnStoryFollows",JSON.stringify(fcn_follows));let o=parseInt(fcn_follows.new)>0;_$$(".mark-follows-read, label[for=mobile-menu-frame-follows], .mobile-menu-button").forEach((t=>{t.classList.toggle("_new",o),o>0&&(t.dataset.newCount=fcn_follows.new)}))}function fcn_toggleFollow(o){let t=fcn_getFollows();if(localStorage.removeItem("fcnBookshelfContent"),JSON.stringify(fcn_follows.data[o])!==JSON.stringify(t.data[o]))return fcn_follows=t,fcn_showNotification(__("Follows re-synchronized.","fictioneer")),void fcn_updateFollowsView();(fcn_follows=t).data.hasOwnProperty(o)?delete fcn_follows.data[o]:fcn_follows.data[o]={timestamp:Date.now()},fcn_follows.lastLoaded=0,fcn_updateFollowsView();let e={action:"fictioneer_ajax_toggle_follow",story_id:o,set:fcn_follows.data.hasOwnProperty(o)};clearTimeout(fcn_userFollowsTimeout),fcn_userFollowsTimeout=setTimeout((()=>{fcn_ajaxPost(e).then((o=>{o.data.error&&fcn_showNotification(o.data.error,5,"warning")})).catch((o=>{o.status&&o.statusText&&fcn_showNotification(`${o.status}: ${o.statusText}`,5,"warning")}))}),fictioneer_ajax.post_debounce_rate)}function fcn_setupFollowsHTML(){if(fcn_followsMenuItem.classList.contains("_loaded"))return;fcn_ajaxGet({action:"fictioneer_ajax_get_follows_notifications"}).then((o=>{o.data.html&&(fcn_desktopFollowList.innerHTML=o.data.html,fcn_mobileFollowList.innerHTML=o.data.html)})).catch((o=>{o.status&&o.statusText&&fcn_showNotification(`${o.status}: ${o.statusText}`,5,"warning"),fcn_desktopFollowList.remove(),fcn_mobileFollowList.remove()})).then((()=>{fcn_followsMenuItem.classList.add("_loaded")}))}function fcn_markFollowsRead(){fcn_followsMenuItem.classList.contains("_new")&&fcn_followsMenuItem.classList.contains("_loaded")&&(_$$(".mark-follows-read, [for=mobile-menu-frame-follows], .follow-item, .mobile-menu-button").forEach((o=>{o.classList.remove("_new")})),fcn_follows.new=0,fcn_follows.lastLoaded=0,localStorage.setItem("fcnStoryFollows",JSON.stringify(fcn_follows)),fcn_ajaxPost({action:"fictioneer_ajax_mark_follows_read"}).catch((o=>{o.status&&o.statusText&&fcn_showNotification(`${o.status}: ${o.statusText}`,5,"warning")})))}fcn_isLoggedIn&&fcn_initializeFollows(),fcn_followsMenuItem?.addEventListener("mouseover",(()=>{fcn_setupFollowsHTML()}),{once:!0}),fcn_followsMenuItem?.addEventListener("focus",(()=>{fcn_setupFollowsHTML()}),{once:!0}),_$("label[for=mobile-menu-frame-follows]")?.addEventListener("click",(()=>{fcn_setupFollowsHTML()}),{once:!0}),_$$(".button-follow-story").forEach((o=>{o.addEventListener("click",(o=>{fcn_toggleFollow(o.currentTarget.dataset.storyId)}))})),_$$(".mark-follows-read").forEach((o=>{o.addEventListener("click",(()=>{fcn_markFollowsRead()}))}));
|
||||
const fcn_desktopFollowList=_$$$("follow-menu-scroll"),fcn_mobileFollowList=_$$$("mobile-menu-follows-list"),fcn_followsMenuItem=_$$$("follow-menu-button");var fcn_userFollowsTimeout,fcn_follows;function fcn_initializeFollows(){fcn_follows=fcn_getFollows(),fcn_fetchFollowsFromDatabase()}function fcn_getFollows(){let o=localStorage.getItem("fcnStoryFollows");return o&&fcn_isValidJSONString(o)?JSON.parse(o):{lastLoaded:0,data:{},seen:Date.now(),new:!1}}function fcn_fetchFollowsFromDatabase(){fcn_ajaxLimitThreshold<fcn_follows.lastLoaded?fcn_updateFollowsView():fcn_ajaxGet({action:"fictioneer_ajax_get_follows"}).then((o=>{if(o.success){let t=o.data.follows;t=fcn_isValidJSONString(t)?t:"{}",t=JSON.parse(t),(fcn_follows="object"==typeof t&&t.data&&Object.keys(t.data).length>0?t:{data:{},seen:Date.now(),new:!1}).lastLoaded=Date.now()}})).catch((()=>{localStorage.removeItem("fcnStoryFollows"),fcn_follows=!1})).then((()=>{fcn_updateFollowsView(),localStorage.removeItem("fcnBookshelfContent")}))}function fcn_updateFollowsView(){if(!fcn_follows)return;_$$(".button-follow-story").forEach((o=>{o.classList.toggle("_followed",fcn_follows?.data.hasOwnProperty(o.dataset.storyId))})),_$$(".card").forEach((o=>{o.classList.toggle("has-follow",fcn_follows?.data.hasOwnProperty(o.dataset.storyId))})),localStorage.setItem("fcnStoryFollows",JSON.stringify(fcn_follows));let o=parseInt(fcn_follows.new)>0;_$$(".mark-follows-read, .follows-alert-number, .mobile-menu-button").forEach((t=>{t.classList.toggle("_new",o),o>0&&(t.dataset.newCount=fcn_follows.new)}))}function fcn_toggleFollow(o){let t=fcn_getFollows();if(localStorage.removeItem("fcnBookshelfContent"),JSON.stringify(fcn_follows.data[o])!==JSON.stringify(t.data[o]))return fcn_follows=t,fcn_showNotification(__("Follows re-synchronized.","fictioneer")),void fcn_updateFollowsView();(fcn_follows=t).data.hasOwnProperty(o)?delete fcn_follows.data[o]:fcn_follows.data[o]={timestamp:Date.now()},fcn_follows.lastLoaded=0,fcn_updateFollowsView();let e={action:"fictioneer_ajax_toggle_follow",story_id:o,set:fcn_follows.data.hasOwnProperty(o)};clearTimeout(fcn_userFollowsTimeout),fcn_userFollowsTimeout=setTimeout((()=>{fcn_ajaxPost(e).then((o=>{o.data.error&&fcn_showNotification(o.data.error,5,"warning")})).catch((o=>{o.status&&o.statusText&&fcn_showNotification(`${o.status}: ${o.statusText}`,5,"warning")}))}),fictioneer_ajax.post_debounce_rate)}function fcn_setupFollowsHTML(){if(fcn_followsMenuItem.classList.contains("_loaded"))return;fcn_ajaxGet({action:"fictioneer_ajax_get_follows_notifications"}).then((o=>{o.data.html&&(fcn_desktopFollowList.innerHTML=o.data.html,fcn_mobileFollowList.innerHTML=o.data.html)})).catch((o=>{o.status&&o.statusText&&fcn_showNotification(`${o.status}: ${o.statusText}`,5,"warning"),fcn_desktopFollowList.remove(),fcn_mobileFollowList.remove()})).then((()=>{fcn_followsMenuItem.classList.add("_loaded")}))}function fcn_markFollowsRead(){fcn_followsMenuItem.classList.contains("_new")&&fcn_followsMenuItem.classList.contains("_loaded")&&(_$$(".mark-follows-read, .follows-alert-number, .follow-item, .mobile-menu-button").forEach((o=>{o.classList.remove("_new")})),fcn_follows.new=0,fcn_follows.lastLoaded=0,localStorage.setItem("fcnStoryFollows",JSON.stringify(fcn_follows)),fcn_ajaxPost({action:"fictioneer_ajax_mark_follows_read"}).catch((o=>{o.status&&o.statusText&&fcn_showNotification(`${o.status}: ${o.statusText}`,5,"warning")})))}fcn_isLoggedIn&&fcn_initializeFollows(),fcn_followsMenuItem?.addEventListener("mouseover",(()=>{fcn_setupFollowsHTML()}),{once:!0}),fcn_followsMenuItem?.addEventListener("focus",(()=>{fcn_setupFollowsHTML()}),{once:!0}),_$('.mobile-menu__frame-button[data-frame-target="follows"]')?.addEventListener("click",(()=>{fcn_setupFollowsHTML()}),{once:!0}),_$$(".button-follow-story").forEach((o=>{o.addEventListener("click",(o=>{fcn_toggleFollow(o.currentTarget.dataset.storyId)}))})),_$$(".mark-follows-read").forEach((o=>{o.addEventListener("click",(()=>{fcn_markFollowsRead()}))}));
|
||||
2
js/mobile-menu.min.js
vendored
2
js/mobile-menu.min.js
vendored
@ -1 +1 @@
|
||||
const fcn_mobileMenuToggle=_$$$("mobile-menu-toggle"),fcn_radioMain=_$$$("mobile-menu-frame-main"),fcn_radioChapters=_$$$("mobile-menu-frame-chapters"),fcn_mobileBookmarksDeleteToggle=_$$$("toggle-mobile-menu-bookmarks-delete");function fcn_toggleMobileMenu(e){let n=_$$$("wpadminbar")?.offsetHeight??0;if(e){let e=window.scrollY-n;fcn_theBody.classList.add("mobile-menu-open","scrolling-down"),fcn_theBody.classList.remove("scrolling-up"),fcn_theSite.classList.add("transformed-scroll","transformed-site"),fcn_theSite.scrollTop=e,fcn_updateThemeColor()}else{let e=fcn_theSite.scrollTop+n;fcn_theSite.classList.remove("transformed-site","transformed-scroll"),fcn_theBody.classList.remove("mobile-menu-open"),fcn_updateThemeColor(),window.scroll(0,e),fcn_radioMain.checked=!0,fcn_mobileMenuToggle.checked=!1,"function"==typeof fcn_trackProgress&&fcn_trackProgress()}}function fcn_appendChapterList(){let e=_$$$("mobile-menu-chapters-list");fcn_chapterList&&!e.hasChildNodes()&&e.appendChild(fcn_chapterList.cloneNode(!0))}_$$$("mobile-menu-toggle")?.addEventListener("change",(e=>{fcn_toggleMobileMenu(e.currentTarget.checked)})),fcn_theSite.addEventListener("click",(e=>{fcn_theBody.classList.contains("mobile-menu-open")&&(e.preventDefault(),fcn_mobileMenuToggle.checked=!1,fcn_toggleMobileMenu(!1))})),_$("[for=mobile-menu-toggle]")?.addEventListener("click",(e=>{fcn_appendChapterList()}),{once:!0}),_$$$("micro-menu-label-open-chapter-list")?.addEventListener("click",(()=>{fcn_appendChapterList(),fcn_radioChapters.checked=!0})),_$("[name=mobile-frame-control]")?.addEventListener("change",(e=>{fcn_mobileBookmarksDeleteToggle.checked=!1})),_$("label[for=mobile-menu-frame-bookmarks]")?.addEventListener("click",(e=>{fcn_setMobileMenuBookmarks()}),{once:!0}),_$("label[for=mobile-menu-frame-chapters]")?.addEventListener("click",(e=>{fcn_appendChapterList()}),{once:!0}),_$$$("mobile-menu-comment-jump")?.addEventListener("click",(e=>{fcn_toggleMobileMenu(!1),setTimeout((function(){let e=_$$$("comments");if(!e)return;let n=e.getBoundingClientRect().top+window.pageYOffset-64;window.scrollTo({top:n,behavior:"smooth"})}),200)})),_$$$("mobile-menu-bookmark-jump")?.addEventListener("click",(e=>{fcn_toggleMobileMenu(!1),setTimeout((function(){let e=_$(`[data-paragraph-id="${fcn_bookmarks.data[_$("article").id]["paragraph-id"]}"]`);if(!e)return;let n=e.getBoundingClientRect().top+window.pageYOffset-64;window.scrollTo({top:n,behavior:"smooth"})}),200)})),_$$(".button-change-lightness").forEach((e=>{e.addEventListener("click",(e=>{fcn_updateDarken(fcn_siteSettings.darken+parseFloat(e.currentTarget.value))}))}));
|
||||
const fcn_mobileMenuToggle=_$$$("mobile-menu-toggle");function fcn_toggleMobileMenu(e){let t=_$$$("wpadminbar")?.offsetHeight??0;if(e){let e=window.scrollY-t;fcn_theBody.classList.add("mobile-menu-open","scrolling-down"),fcn_theBody.classList.remove("scrolling-up"),fcn_theSite.classList.add("transformed-scroll","transformed-site"),fcn_theSite.scrollTop=e,fcn_updateThemeColor()}else{let e=fcn_theSite.scrollTop+t;fcn_theSite.classList.remove("transformed-site","transformed-scroll"),fcn_theBody.classList.remove("mobile-menu-open"),fcn_updateThemeColor(),fcn_closeMobileFrames(),fcn_openMobileFrame("main"),window.scroll(0,e),fcn_mobileMenuToggle.checked=!1,"function"==typeof fcn_trackProgress&&fcn_trackProgress()}}function fcn_openMobileFrame(e){fcn_closeMobileFrames(),_$(`.mobile-menu__frame[data-frame="${e}"]`)?.classList.add("_active")}function fcn_closeMobileFrames(){_$$(".mobile-menu__frame._active").forEach((e=>{e.classList.remove("_active")}));let e=_$(".mobile-menu__bookmarks-panel");e&&(e.dataset.editing="false")}function fcn_appendChapterList(){let e=_$$$("mobile-menu-chapters-list");fcn_chapterList&&!e.hasChildNodes()&&e.appendChild(fcn_chapterList.cloneNode(!0))}_$$$("mobile-menu-toggle")?.addEventListener("change",(e=>{fcn_toggleMobileMenu(e.currentTarget.checked)})),fcn_theSite.addEventListener("click",(e=>{fcn_theBody.classList.contains("mobile-menu-open")&&(e.preventDefault(),fcn_toggleMobileMenu(!1))})),_$$$("mobile-menu-comment-jump")?.addEventListener("click",(e=>{fcn_toggleMobileMenu(!1),setTimeout((function(){let e=_$$$("comments");if(!e)return;let t=e.getBoundingClientRect().top+window.pageYOffset-64;window.scrollTo({top:t,behavior:"smooth"})}),200)})),_$$$("mobile-menu-bookmark-jump")?.addEventListener("click",(e=>{fcn_toggleMobileMenu(!1),setTimeout((function(){let e=_$(`[data-paragraph-id="${fcn_bookmarks.data[_$("article").id]["paragraph-id"]}"]`);if(!e)return;let t=e.getBoundingClientRect().top+window.pageYOffset-64;window.scrollTo({top:t,behavior:"smooth"})}),200)})),_$$(".button-change-lightness").forEach((e=>{e.addEventListener("click",(e=>{fcn_updateDarken(fcn_siteSettings.darken+parseFloat(e.currentTarget.value))}))})),_$$(".mobile-menu__frame-button").forEach((e=>{e.addEventListener("click",(e=>{fcn_openMobileFrame(e.currentTarget.dataset.frameTarget)}))})),_$$(".mobile-menu__back-button").forEach((e=>{e.addEventListener("click",(()=>{fcn_openMobileFrame("main")}))})),_$('.mobile-menu__frame-button[data-frame-target="chapters"]')?.addEventListener("click",(()=>{fcn_appendChapterList()}),{once:!0}),_$$$("micro-menu-label-open-chapter-list")?.addEventListener("click",(()=>{fcn_appendChapterList(),fcn_openMobileFrame("chapters")})),_$$$("button-mobile-menu-toggle-bookmarks-edit")?.addEventListener("click",(e=>{let t=e.currentTarget.closest(".mobile-menu__bookmarks-panel");t.dataset.editing="false"==t.dataset.editing?"true":"false"})),_$('.mobile-menu__frame-button[data-frame-target="bookmarks"]')?.addEventListener("click",(e=>{fcn_setMobileMenuBookmarks()}),{once:!0});
|
||||
@ -32,7 +32,7 @@
|
||||
?>
|
||||
</div>
|
||||
<div class="main-navigation__right">
|
||||
<?php get_template_part( 'partials/_icon-menu', null, ['location' => 'in-navigation'] ); ?>
|
||||
<?php get_template_part( 'partials/_icon-menu', null, array( 'location' => 'in-navigation' ) ); ?>
|
||||
<label for="mobile-menu-toggle" class="mobile-menu-button follows-alert-number">
|
||||
<?php fictioneer_icon( 'fa-bars', 'off' ); ?>
|
||||
<?php fictioneer_icon( 'fa-xmark', 'on' ); ?>
|
||||
|
||||
@ -140,7 +140,7 @@ function fcn_updateFollowsView() {
|
||||
// Set "new" marker if there are new items
|
||||
let isNew = parseInt(fcn_follows['new']) > 0;
|
||||
|
||||
_$$('.mark-follows-read, label[for=mobile-menu-frame-follows], .mobile-menu-button').forEach(element => {
|
||||
_$$('.mark-follows-read, .follows-alert-number, .mobile-menu-button').forEach(element => {
|
||||
element.classList.toggle('_new', isNew);
|
||||
if (isNew > 0) element.dataset.newCount = fcn_follows['new'];
|
||||
});
|
||||
@ -280,7 +280,7 @@ function fcn_markFollowsRead() {
|
||||
) return;
|
||||
|
||||
// Remove the 'new' markers
|
||||
_$$('.mark-follows-read, [for=mobile-menu-frame-follows], .follow-item, .mobile-menu-button').forEach(element => {
|
||||
_$$('.mark-follows-read, .follows-alert-number, .follow-item, .mobile-menu-button').forEach(element => {
|
||||
element.classList.remove('_new');
|
||||
});
|
||||
|
||||
@ -314,8 +314,8 @@ fcn_followsMenuItem?.addEventListener('focus', () => {
|
||||
fcn_setupFollowsHTML();
|
||||
}, { once: true });
|
||||
|
||||
// Listen for click on the Follows mobile menu item to load Follows
|
||||
_$('label[for=mobile-menu-frame-follows]')?.addEventListener('click', () => {
|
||||
// Append Follows when Follows mobile menu frame is opened, once
|
||||
_$('.mobile-menu__frame-button[data-frame-target="follows"]')?.addEventListener('click', () => {
|
||||
fcn_setupFollowsHTML();
|
||||
}, { once: true });
|
||||
|
||||
|
||||
@ -2,10 +2,7 @@
|
||||
// MOBILE MENU
|
||||
// =============================================================================
|
||||
|
||||
const /** @const {HTMLElement} */ fcn_mobileMenuToggle = _$$$('mobile-menu-toggle'),
|
||||
/** @const {HTMLElement} */ fcn_radioMain = _$$$('mobile-menu-frame-main'),
|
||||
/** @const {HTMLElement} */ fcn_radioChapters = _$$$('mobile-menu-frame-chapters'),
|
||||
/** @const {HTMLElement} */ fcn_mobileBookmarksDeleteToggle = _$$$('toggle-mobile-menu-bookmarks-delete');
|
||||
const /** @const {HTMLElement} */ fcn_mobileMenuToggle = _$$$('mobile-menu-toggle');
|
||||
|
||||
/**
|
||||
* Open or close the mobile menu.
|
||||
@ -22,6 +19,7 @@ function fcn_toggleMobileMenu(isOpened) {
|
||||
let adminBarOffset = _$$$('wpadminbar')?.offsetHeight ?? 0;
|
||||
|
||||
if (isOpened) {
|
||||
// Mobile menu was opened
|
||||
let newScroll = window.scrollY - adminBarOffset;
|
||||
fcn_theBody.classList.add('mobile-menu-open', 'scrolling-down');
|
||||
fcn_theBody.classList.remove('scrolling-up');
|
||||
@ -29,34 +27,27 @@ function fcn_toggleMobileMenu(isOpened) {
|
||||
fcn_theSite.scrollTop = newScroll;
|
||||
fcn_updateThemeColor();
|
||||
} else {
|
||||
// Mobile menu was closed
|
||||
let newScroll = fcn_theSite.scrollTop + adminBarOffset;
|
||||
|
||||
// Reset site
|
||||
fcn_theSite.classList.remove('transformed-site', 'transformed-scroll');
|
||||
fcn_theBody.classList.remove('mobile-menu-open');
|
||||
fcn_updateThemeColor();
|
||||
fcn_closeMobileFrames(); // Close all frames
|
||||
fcn_openMobileFrame('main'); // Reset to main frame
|
||||
|
||||
// Restore scroll position
|
||||
window.scroll(0, newScroll);
|
||||
|
||||
fcn_radioMain.checked = true;
|
||||
// Reset control checkbox
|
||||
fcn_mobileMenuToggle.checked = false;
|
||||
|
||||
// Restart progress bar
|
||||
if (typeof fcn_trackProgress === 'function') fcn_trackProgress();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Appends a cloned chapter list to the mobile menu.
|
||||
*
|
||||
* @since 4.0
|
||||
*/
|
||||
|
||||
function fcn_appendChapterList() {
|
||||
let target = _$$$('mobile-menu-chapters-list');
|
||||
|
||||
if (fcn_chapterList && !target.hasChildNodes()) {
|
||||
target.appendChild(fcn_chapterList.cloneNode(true));
|
||||
}
|
||||
}
|
||||
|
||||
// Listen for change of mobile menu toggle checkbox
|
||||
_$$$('mobile-menu-toggle')?.addEventListener('change', (e) => {
|
||||
fcn_toggleMobileMenu(e.currentTarget.checked);
|
||||
@ -66,36 +57,13 @@ _$$$('mobile-menu-toggle')?.addEventListener('change', (e) => {
|
||||
fcn_theSite.addEventListener('click', e => {
|
||||
if (fcn_theBody.classList.contains('mobile-menu-open')) {
|
||||
e.preventDefault();
|
||||
fcn_mobileMenuToggle.checked = false;
|
||||
fcn_toggleMobileMenu(false);
|
||||
}
|
||||
});
|
||||
|
||||
// Listen for click on mobile menu toggle to append the chapters, once
|
||||
_$('[for=mobile-menu-toggle]')?.addEventListener('click', (e) => {
|
||||
fcn_appendChapterList();
|
||||
}, { once: true });
|
||||
|
||||
// Listen for click on chapter list in the micro menu
|
||||
_$$$('micro-menu-label-open-chapter-list')?.addEventListener('click', () => {
|
||||
fcn_appendChapterList();
|
||||
fcn_radioChapters.checked = true;
|
||||
});
|
||||
|
||||
// Listen for change of the frame control to end bookmarks delete mode
|
||||
_$('[name=mobile-frame-control]')?.addEventListener('change', (e) => {
|
||||
fcn_mobileBookmarksDeleteToggle.checked = false;
|
||||
});
|
||||
|
||||
// Listen for click on bookmarks mobile menu item to append bookmarks, once
|
||||
_$('label[for=mobile-menu-frame-bookmarks]')?.addEventListener('click', (e) => {
|
||||
fcn_setMobileMenuBookmarks();
|
||||
}, { once: true });
|
||||
|
||||
// Listen for click on chapter mobile menu item to append chapters, once
|
||||
_$('label[for=mobile-menu-frame-chapters]')?.addEventListener('click', (e) => {
|
||||
fcn_appendChapterList();
|
||||
}, { once: true });
|
||||
// =============================================================================
|
||||
// ACTION BUTTONS & LINKS
|
||||
// =============================================================================
|
||||
|
||||
// Listen for click on comment jump mobile menu button
|
||||
_$$$('mobile-menu-comment-jump')?.addEventListener(
|
||||
@ -135,9 +103,96 @@ _$$$('mobile-menu-bookmark-jump')?.addEventListener(
|
||||
}
|
||||
);
|
||||
|
||||
// =============================================================================
|
||||
// QUICK BUTTONS
|
||||
// =============================================================================
|
||||
|
||||
// Listen for clicks on the darken/brighten quick buttons
|
||||
_$$('.button-change-lightness').forEach(element => {
|
||||
element.addEventListener('click', (e) => {
|
||||
fcn_updateDarken(fcn_siteSettings['darken'] + parseFloat(e.currentTarget.value));
|
||||
});
|
||||
});
|
||||
|
||||
// =============================================================================
|
||||
// FRAMES
|
||||
// =============================================================================
|
||||
|
||||
function fcn_openMobileFrame(target) {
|
||||
fcn_closeMobileFrames();
|
||||
_$(`.mobile-menu__frame[data-frame="${target}"]`)?.classList.add('_active');
|
||||
}
|
||||
|
||||
function fcn_closeMobileFrames() {
|
||||
// Close all open frames (should only be one)
|
||||
_$$('.mobile-menu__frame._active').forEach(element => {
|
||||
element.classList.remove('_active');
|
||||
});
|
||||
|
||||
// End bookmarks edit mode
|
||||
let bookmarksPanel = _$('.mobile-menu__bookmarks-panel');
|
||||
if (bookmarksPanel) bookmarksPanel.dataset.editing = 'false';
|
||||
}
|
||||
|
||||
// Listen for clicks on frame buttons...
|
||||
_$$('.mobile-menu__frame-button').forEach(element => {
|
||||
element.addEventListener('click', event => {
|
||||
fcn_openMobileFrame(event.currentTarget.dataset.frameTarget);
|
||||
});
|
||||
});
|
||||
|
||||
// Listen for clicks on back buttons...
|
||||
_$$('.mobile-menu__back-button').forEach(element => {
|
||||
element.addEventListener('click', () => {
|
||||
fcn_openMobileFrame('main');
|
||||
});
|
||||
});
|
||||
|
||||
// =============================================================================
|
||||
// CHAPTERS FRAME
|
||||
// =============================================================================
|
||||
|
||||
/**
|
||||
* Appends a cloned chapter list to the mobile menu.
|
||||
*
|
||||
* @since 4.0
|
||||
*/
|
||||
|
||||
function fcn_appendChapterList() {
|
||||
let target = _$$$('mobile-menu-chapters-list');
|
||||
|
||||
if (fcn_chapterList && !target.hasChildNodes()) {
|
||||
target.appendChild(fcn_chapterList.cloneNode(true));
|
||||
}
|
||||
}
|
||||
|
||||
// Append chapters when chapter frame is opened, once
|
||||
_$('.mobile-menu__frame-button[data-frame-target="chapters"]')?.addEventListener('click', () => {
|
||||
fcn_appendChapterList();
|
||||
}, { once: true });
|
||||
|
||||
// Listen for click on chapter list in the micro menu
|
||||
_$$$('micro-menu-label-open-chapter-list')?.addEventListener('click', () => {
|
||||
fcn_appendChapterList();
|
||||
fcn_openMobileFrame('chapters');
|
||||
});
|
||||
|
||||
// =============================================================================
|
||||
// FOLLOWS FRAME
|
||||
// =============================================================================
|
||||
|
||||
/* See follows.js */
|
||||
|
||||
// =============================================================================
|
||||
// BOOKMARKS FRAME
|
||||
// =============================================================================
|
||||
|
||||
_$$$('button-mobile-menu-toggle-bookmarks-edit')?.addEventListener('click', event => {
|
||||
let panel = event.currentTarget.closest('.mobile-menu__bookmarks-panel');
|
||||
panel.dataset.editing = panel.dataset.editing == 'false' ? 'true' : 'false';
|
||||
});
|
||||
|
||||
// Append bookmarks when bookmarks frame is opened, once
|
||||
_$('.mobile-menu__frame-button[data-frame-target="bookmarks"]')?.addEventListener('click', (e) => {
|
||||
fcn_setMobileMenuBookmarks();
|
||||
}, { once: true });
|
||||
|
||||
@ -156,7 +156,7 @@
|
||||
position: relative;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
&:not(._new) {
|
||||
|
||||
@ -90,6 +90,7 @@ body:not(.mobile-menu-open) {
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
line-height: 1.66; // ~ 25px @ 15px
|
||||
text-shadow: var(--mobile-menu-text-shadow);
|
||||
padding: 16px 16px 144px;
|
||||
width: 100%;
|
||||
@ -127,13 +128,6 @@ body:not(.mobile-menu-open) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
input[name=mobile-frame-control]:not(:checked) {
|
||||
+ div {
|
||||
display: none;
|
||||
content-visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&__center {
|
||||
padding: 0 0 16px;
|
||||
}
|
||||
@ -151,6 +145,36 @@ body:not(.mobile-menu-open) {
|
||||
&__frame {
|
||||
position: relative;
|
||||
display: grid;
|
||||
|
||||
&:not(._active) {
|
||||
display: none;
|
||||
content-visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
&__panel-action-button {
|
||||
font-size: 13px;
|
||||
text-align: right;
|
||||
min-width: 32px;
|
||||
|
||||
.fa-check {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&__item-icon {
|
||||
display: inline-block;
|
||||
color: var(--fg-600);
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
margin: 0 6px 0 -2px;
|
||||
min-width: 18px;
|
||||
|
||||
&[class*=fa-caret] {
|
||||
font-size: 15px;
|
||||
text-align: left;
|
||||
padding-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&__panel {
|
||||
@ -170,28 +194,6 @@ body:not(.mobile-menu-open) {
|
||||
justify-content: space-between;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px dashed var(--layout-color-lineart);
|
||||
|
||||
button {
|
||||
font-size: inherit;
|
||||
text-align: right;
|
||||
height: 100%;
|
||||
min-width: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
:is(label, a) > :is(i, .icon) {
|
||||
display: inline-block;
|
||||
color: var(--fg-600);
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
margin: 0 6px 0 -2px;
|
||||
min-width: 18px;
|
||||
|
||||
&[class*=fa-caret] {
|
||||
font-size: 15px;
|
||||
text-align: left;
|
||||
padding-left: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon._font-settings {
|
||||
@ -218,29 +220,27 @@ body:not(.mobile-menu-open) {
|
||||
|
||||
&._chapters {
|
||||
:is(i, .icon, .text-icon) {
|
||||
display: inline-block;
|
||||
color: var(--fg-600);
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
margin: 0 6px 0 -2px;
|
||||
min-width: 22px;
|
||||
}
|
||||
|
||||
.text-icon {
|
||||
height: auto;
|
||||
min-width: 22px;
|
||||
}
|
||||
|
||||
span:not(.text-icon) {
|
||||
padding-left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label[for=mobile-menu-frame-follows] {
|
||||
.follows-alert-number {
|
||||
&._new {
|
||||
&::after {
|
||||
position: relative;
|
||||
top: -6px;
|
||||
right: -2px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -282,13 +282,9 @@ body:not(.mobile-menu-open) {
|
||||
transform: translateY(3px);
|
||||
}
|
||||
|
||||
button {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
:is(i, button) {
|
||||
min-width: 20px;
|
||||
color: currentColor;
|
||||
text-align: center;
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -313,10 +309,10 @@ body:not(.mobile-menu-open) {
|
||||
> a {
|
||||
display: none !important;
|
||||
content-visibility: hidden;
|
||||
}
|
||||
|
||||
+ ul.sub-menu {
|
||||
margin-top: 0;
|
||||
}
|
||||
> ul.sub-menu {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -343,15 +339,6 @@ body:not(.mobile-menu-open) {
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
text-align: right;
|
||||
min-width: 32px;
|
||||
|
||||
.on {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mark-follows-read {
|
||||
color: currentColor;
|
||||
|
||||
@ -373,34 +360,20 @@ body:not(.mobile-menu-open) {
|
||||
}
|
||||
}
|
||||
|
||||
#toggle-mobile-menu-bookmarks-delete {
|
||||
&:checked {
|
||||
+ .mobile-menu__panel-header {
|
||||
.off {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.on {
|
||||
display: initial;
|
||||
}
|
||||
.mobile-menu__bookmarks-panel {
|
||||
&[data-editing="true"] {
|
||||
:is(.off, .fa-bookmark) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
~ .mobile-menu__bookmark-list {
|
||||
.fa-bookmark {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
pointer-events: none;
|
||||
}
|
||||
a {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:checked) {
|
||||
~ .mobile-menu__bookmark-list {
|
||||
button {
|
||||
display: none;
|
||||
}
|
||||
&:not([data-editing="true"]) {
|
||||
:is(.mobile-menu-bookmark-delete-button, .on) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,7 +9,10 @@
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
font-family: var(--ff-base);
|
||||
font-size: inherit;
|
||||
font-weight: var(--font-weight-normal);
|
||||
line-height: inherit;
|
||||
text-align: left;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user