mirror of
https://github.com/next-theme/hexo-theme-next.git
synced 2026-01-17 18:22:33 +00:00
Display sidebar on mobile for Pisces and Gemini (#710)
Co-authored-by: Mimi <1119186082@qq.com>
This commit is contained in:
Triccsr
GitHub
parent
cd1a082795
commit
1b2b0040b4
16
_config.yml
16
_config.yml
@ -117,16 +117,18 @@ menu_settings:
|
||||
# ---------------------------------------------------------------
|
||||
|
||||
sidebar:
|
||||
# Sidebar Position.
|
||||
# Sidebar position. Available values: left | right
|
||||
position: left
|
||||
#position: right
|
||||
|
||||
# Manual define the sidebar width. If commented, will be default for:
|
||||
# Muse | Mist: 320
|
||||
# Pisces | Gemini: 240
|
||||
#width: 300
|
||||
# Sidebar width.
|
||||
# Applicable to Muse | Mist and mobile of Pisces | Gemini.
|
||||
width_expanded: 320
|
||||
# Applicable to desktop of Pisces | Gemini.
|
||||
width_dual_column: 240
|
||||
|
||||
# Sidebar Display (only for Muse | Mist), available values:
|
||||
# Sidebar display.
|
||||
# Applicable to Muse | Mist and mobile of Pisces | Gemini.
|
||||
# Available values:
|
||||
# - post expand on posts automatically. Default.
|
||||
# - always expand for all pages automatically.
|
||||
# - hide expand only when click on the sidebar toggle icon.
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{# Widgets with fixed position #}
|
||||
|
||||
{%- if theme.sidebar.display !== 'remove' and (theme.scheme === 'Muse' or theme.scheme === 'Mist') %}
|
||||
{%- if theme.sidebar.display !== 'remove' %}
|
||||
<div class="toggle sidebar-toggle" role="button">
|
||||
<span class="toggle-line"></span>
|
||||
<span class="toggle-line"></span>
|
||||
|
||||
@ -11,6 +11,10 @@
|
||||
{{- next_js('schemes/muse.js') }}
|
||||
{%- endif %}
|
||||
|
||||
{%- if theme.sidebar.display !== 'remove' %}
|
||||
{{- next_js('sidebar.js') }}
|
||||
{%- endif %}
|
||||
|
||||
{{- next_js('next-boot.js') }}
|
||||
{%- if theme.bookmark.enable %}
|
||||
{{- next_js('bookmark.js') }}
|
||||
|
||||
@ -44,6 +44,10 @@ hexo.extend.filter.register('after_generate', () => {
|
||||
hexo.route.remove('js/schemes/muse.js');
|
||||
}
|
||||
|
||||
if (theme.sidebar.display === 'remove') {
|
||||
hexo.route.remove('js/sidebar.js');
|
||||
}
|
||||
|
||||
// Third Party Scripts
|
||||
// Analytics
|
||||
if (!theme.baidu_analytics) {
|
||||
|
||||
@ -1,3 +1,112 @@
|
||||
+sidebar() {
|
||||
if ($sidebar-toggle-alignment == 'right') {
|
||||
.sidebar {
|
||||
right: 0 - $sidebar-width-expanded;
|
||||
|
||||
.sidebar-active & {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
.sidebar {
|
||||
left: 0 - $sidebar-width-expanded;
|
||||
|
||||
.sidebar-active & {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background: $black-deep;
|
||||
bottom: 0;
|
||||
if (not hexo-config('back2top.sidebar')) {
|
||||
box-shadow: inset 0 2px 6px black;
|
||||
}
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
transition: all $transition-ease-out;
|
||||
width: $sidebar-width-expanded;
|
||||
z-index: $zindex-2;
|
||||
|
||||
a {
|
||||
border-bottom-color: $black-light;
|
||||
color: $grey-dark;
|
||||
|
||||
&:hover {
|
||||
border-bottom-color: $gainsboro;
|
||||
color: $gainsboro;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.links-of-author {
|
||||
&:not(:first-child) {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom-color: $black-light;
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
|
||||
if (hexo-config('social_icons.transition')) {
|
||||
transition: all $transition-ease;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: rgb(random-color(0, 255) - 50%, random-color(0, 255) - 50%, random-color(0, 255) - 50%);
|
||||
display: inline-block;
|
||||
margin-right: 3px;
|
||||
transform: translateY(-2px);
|
||||
round-icon(4px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.links-of-blogroll-item {
|
||||
if (hexo-config('links_settings.layout') == 'inline') {
|
||||
display: inline-block;
|
||||
}
|
||||
padding: 2px 10px;
|
||||
|
||||
a {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
max-width: 280px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.popular-posts .popular-posts-item .popular-posts-link:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.sidebar-dimmer {
|
||||
background: black;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
transition: visibility .4s, opacity .4s;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
z-index: $zindex-1;
|
||||
|
||||
.sidebar-active & {
|
||||
opacity: .7;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-inner {
|
||||
color: $grey-dark;
|
||||
padding: $sidebar-padding 10px;
|
||||
|
||||
@ -12,10 +12,10 @@
|
||||
|
||||
@media (any-hover: hover) {
|
||||
body:not(.sidebar-active) .sidebar-toggle:hover {
|
||||
toggle-arrow(hexo-config('sidebar.position'));
|
||||
toggle-arrow($sidebar-toggle-alignment);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-active .sidebar-toggle {
|
||||
toggle-close(hexo-config('sidebar.position'));
|
||||
toggle-close($sidebar-toggle-alignment);
|
||||
}
|
||||
|
||||
@ -22,9 +22,9 @@
|
||||
}
|
||||
|
||||
.toggle.toggle-arrow {
|
||||
toggle-arrow(hexo-config('sidebar.position'));
|
||||
toggle-arrow($sidebar-toggle-alignment);
|
||||
}
|
||||
|
||||
.toggle.toggle-close {
|
||||
toggle-close(hexo-config('sidebar.position'));
|
||||
toggle-close($sidebar-toggle-alignment);
|
||||
}
|
||||
|
||||
@ -52,6 +52,16 @@ desktop-largest() {
|
||||
}
|
||||
}
|
||||
|
||||
sidebar() {
|
||||
if (($scheme == 'Muse') or ($scheme == 'Mist')) {
|
||||
{block}
|
||||
} else {
|
||||
+tablet-mobile() {
|
||||
{block}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
random-color($min, $max) {
|
||||
return floor(math(0, 'random') * ($max - $min + 1) + $min);
|
||||
}
|
||||
@ -124,16 +134,9 @@ main-container() {
|
||||
}
|
||||
}
|
||||
|
||||
sidebar-toggle-alignment($reverse) {
|
||||
$condition = hexo-config('sidebar.position') == 'right';
|
||||
if (($scheme == 'Muse') or ($scheme == 'Mist')) {
|
||||
$condition = $condition == $reverse;
|
||||
}
|
||||
return $condition ? ('left' 'right') : ('right' 'left');
|
||||
}
|
||||
|
||||
sidebar-toggle-position($reverse) {
|
||||
$alignment = sidebar-toggle-alignment($reverse)[0];
|
||||
$condition = ($sidebar-toggle-alignment == 'right') == $reverse;
|
||||
$alignment = $condition ? 'left' : 'right';
|
||||
{$alignment}: $b2t-position-right;
|
||||
+tablet-mobile() {
|
||||
{$alignment}: $b2t-position-right-mobile;
|
||||
|
||||
@ -1,134 +1,23 @@
|
||||
if (hexo-config('sidebar.position') == 'right') {
|
||||
.sidebar-active {
|
||||
// Note: $sidebar-desktop + $content-desktop-large should be less than desktop-large threshold
|
||||
// Otherwise a horizontal scrollbar will appear
|
||||
+desktop-large() {
|
||||
padding-right: $sidebar-desktop;
|
||||
|
||||
.footer-fixed {
|
||||
right: $sidebar-desktop;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
right: 0 - $sidebar-desktop;
|
||||
|
||||
.sidebar-active & {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
.sidebar-active {
|
||||
+desktop-large() {
|
||||
padding-left: $sidebar-desktop;
|
||||
|
||||
.footer-fixed {
|
||||
left: $sidebar-desktop;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
left: 0 - $sidebar-desktop;
|
||||
|
||||
.sidebar-active & {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background: $black-deep;
|
||||
bottom: 0;
|
||||
if (not hexo-config('back2top.sidebar')) {
|
||||
box-shadow: inset 0 2px 6px black;
|
||||
}
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
transition: all $transition-ease-out;
|
||||
width: $sidebar-desktop;
|
||||
z-index: $zindex-2;
|
||||
|
||||
a {
|
||||
border-bottom-color: $black-light;
|
||||
color: $grey-dark;
|
||||
|
||||
&:hover {
|
||||
border-bottom-color: $gainsboro;
|
||||
color: $gainsboro;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.links-of-author {
|
||||
&:not(:first-child) {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom-color: $black-light;
|
||||
display: inline-block;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
vertical-align: middle;
|
||||
|
||||
if (hexo-config('social_icons.transition')) {
|
||||
transition: all $transition-ease;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: rgb(random-color(0, 255) - 50%, random-color(0, 255) - 50%, random-color(0, 255) - 50%);
|
||||
display: inline-block;
|
||||
margin-right: 3px;
|
||||
transform: translateY(-2px);
|
||||
round-icon(4px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.links-of-blogroll-item {
|
||||
if (hexo-config('links_settings.layout') == 'inline') {
|
||||
display: inline-block;
|
||||
}
|
||||
padding: 2px 10px;
|
||||
|
||||
a {
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
max-width: 280px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.popular-posts .popular-posts-item .popular-posts-link:hover {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.sidebar-dimmer {
|
||||
background: black;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
transition: visibility .4s, opacity .4s;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
z-index: $zindex-1;
|
||||
|
||||
.sidebar-active & {
|
||||
opacity: .7;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
+desktop-large() {
|
||||
.sidebar-dimmer {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-active {
|
||||
// Note: $sidebar-width-expanded + $content-desktop-large should be less than desktop-large threshold
|
||||
// Otherwise a horizontal scrollbar will appear
|
||||
if ($sidebar-toggle-alignment == 'right') {
|
||||
padding-right: $sidebar-width-expanded;
|
||||
|
||||
.footer-fixed {
|
||||
right: $sidebar-width-expanded;
|
||||
}
|
||||
} else {
|
||||
padding-left: $sidebar-width-expanded;
|
||||
|
||||
.footer-fixed {
|
||||
left: $sidebar-width-expanded;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
.column {
|
||||
width: $sidebar-desktop;
|
||||
width: $sidebar-width-dual-column;
|
||||
|
||||
+tablet-mobile() {
|
||||
width: auto;
|
||||
|
||||
@ -14,7 +14,7 @@ header.header {
|
||||
justify-content: space-between;
|
||||
main-container();
|
||||
|
||||
if (hexo-config('sidebar.position') == 'right') {
|
||||
if ($sidebar-toggle-alignment == 'right') {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
@ -36,10 +36,10 @@ header.header {
|
||||
}
|
||||
|
||||
.footer-inner {
|
||||
if (hexo-config('sidebar.position') == 'right') {
|
||||
padding-right: $sidebar-desktop + $sidebar-offset;
|
||||
if ($sidebar-toggle-alignment == 'right') {
|
||||
padding-right: $sidebar-width-dual-column + $sidebar-offset;
|
||||
} else {
|
||||
padding-left: $sidebar-desktop + $sidebar-offset;
|
||||
padding-left: $sidebar-width-dual-column + $sidebar-offset;
|
||||
}
|
||||
|
||||
+tablet-mobile() {
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
.sidebar {
|
||||
+desktop() {
|
||||
.sidebar {
|
||||
// https://caniuse.com/css-sticky
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
@ -7,9 +8,13 @@
|
||||
+tablet-mobile() {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-inner {
|
||||
.sidebar-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-inner {
|
||||
background: var(--content-bg-color);
|
||||
border-radius: $border-radius;
|
||||
box-shadow: $box-shadow;
|
||||
@ -21,13 +26,13 @@
|
||||
if (hexo-config('motion.enable') and hexo-config('motion.transition.sidebar')) {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.site-state-item {
|
||||
.site-state-item {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar .sidebar-button {
|
||||
.sidebar .sidebar-button {
|
||||
border-bottom: 1px dotted $grey-light;
|
||||
border-top: 1px dotted $grey-light;
|
||||
|
||||
@ -43,13 +48,13 @@
|
||||
color: darken($orange, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.links-of-author {
|
||||
.links-of-author {
|
||||
flex-wrap();
|
||||
}
|
||||
}
|
||||
|
||||
.links-of-author-item {
|
||||
.links-of-author-item {
|
||||
sidebar-inline-links-item();
|
||||
|
||||
if (not hexo-config('social_icons.icons_only')) {
|
||||
@ -65,17 +70,17 @@
|
||||
background: var(--body-bg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.links-of-blogroll-item {
|
||||
.links-of-blogroll-item {
|
||||
if (hexo-config('links_settings.layout') == 'inline') {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
sidebar-inline-links-item();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (hexo-config('back2top.sidebar')) {
|
||||
if (hexo-config('back2top.sidebar')) {
|
||||
// Only when back2top.sidebar is true, apply the following styles
|
||||
.back-to-top {
|
||||
background: var(--body-bg-color);
|
||||
@ -85,4 +90,5 @@ if (hexo-config('back2top.sidebar')) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
// Variables of Muse scheme
|
||||
// ==================================================
|
||||
|
||||
$sidebar-width = hexo-config('sidebar.width') is a 'unit' ? hexo-config('sidebar.width') : 320;
|
||||
$sidebar-desktop = unit($sidebar-width, 'px');
|
||||
|
||||
$content-padding-bottom = 60px;
|
||||
$posts-first-padding = 70px;
|
||||
$posts-first-padding-mobile = 35px;
|
||||
|
||||
@ -5,8 +5,8 @@
|
||||
// --------------------------------------------------
|
||||
$body-bg-color = #f5f7f9;
|
||||
|
||||
$sidebar-width = hexo-config('sidebar.width') is a 'unit' ? hexo-config('sidebar.width') : 240;
|
||||
$sidebar-desktop = unit($sidebar-width, 'px');
|
||||
$sidebar-width = hexo-config('sidebar.width_dual_column') is a 'unit' ? hexo-config('sidebar.width_dual_column') : 240;
|
||||
$sidebar-width-dual-column = unit($sidebar-width, 'px');
|
||||
$content-wrap = 'calc(100% - %s)' % unit($sidebar-width + $sidebar-offset, 'px');
|
||||
|
||||
$content-desktop = 'calc(100% - %s)' % unit($content-desktop-padding / 2, 'px');
|
||||
|
||||
@ -242,6 +242,8 @@ $tag-cloud-end-dark = #eee;
|
||||
// Variables for sidebar section elements.
|
||||
// --------------------------------------------------
|
||||
|
||||
$sidebar-width = hexo-config('sidebar.width_expanded') is a 'unit' ? hexo-config('sidebar.width_expanded') : 320;
|
||||
$sidebar-width-expanded = unit($sidebar-width, 'px');
|
||||
$sidebar-padding = hexo-config('sidebar.padding') is a 'unit' ? unit(hexo-config('sidebar.padding'), px) : 18px;
|
||||
$sidebar-offset = hexo-config('sidebar.offset') is a 'unit' ? unit(hexo-config('sidebar.offset'), px) : 12px;
|
||||
$sidebar-nav-color = $grey-dim;
|
||||
@ -281,6 +283,7 @@ $b2t-bg-color = $black-deep;
|
||||
$sidebar-toggle-inner-size = 16px;
|
||||
$sidebar-toggle-padding = 5px;
|
||||
$sidebar-toggle-size = $sidebar-toggle-inner-size + $sidebar-toggle-padding * 2;
|
||||
$sidebar-toggle-alignment = hexo-config('sidebar.position') == 'left' ? 'left' : 'right';
|
||||
|
||||
// .post-expand .post-eof
|
||||
// In Muse scheme, margin above and below the post separator
|
||||
|
||||
@ -1,53 +1,5 @@
|
||||
/* global CONFIG */
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
const isRight = CONFIG.sidebar.position === 'right';
|
||||
|
||||
const sidebarToggleMotion = {
|
||||
mouse: {},
|
||||
init : function() {
|
||||
window.addEventListener('mousedown', this.mousedownHandler.bind(this));
|
||||
window.addEventListener('mouseup', this.mouseupHandler.bind(this));
|
||||
document.querySelector('.sidebar-dimmer').addEventListener('click', this.clickHandler.bind(this));
|
||||
document.querySelector('.sidebar-toggle').addEventListener('click', this.clickHandler.bind(this));
|
||||
window.addEventListener('sidebar:show', this.showSidebar);
|
||||
window.addEventListener('sidebar:hide', this.hideSidebar);
|
||||
},
|
||||
mousedownHandler: function(event) {
|
||||
this.mouse.X = event.pageX;
|
||||
this.mouse.Y = event.pageY;
|
||||
},
|
||||
mouseupHandler: function(event) {
|
||||
const deltaX = event.pageX - this.mouse.X;
|
||||
const deltaY = event.pageY - this.mouse.Y;
|
||||
const clickingBlankPart = Math.hypot(deltaX, deltaY) < 20 && event.target.matches('.main');
|
||||
// Fancybox has z-index property, but medium-zoom does not, so the sidebar will overlay the zoomed image.
|
||||
if (clickingBlankPart || event.target.matches('img.medium-zoom-image')) {
|
||||
this.hideSidebar();
|
||||
}
|
||||
},
|
||||
clickHandler: function() {
|
||||
document.body.classList.contains('sidebar-active') ? this.hideSidebar() : this.showSidebar();
|
||||
},
|
||||
showSidebar: function() {
|
||||
document.body.classList.add('sidebar-active');
|
||||
const animateAction = isRight ? 'fadeInRight' : 'fadeInLeft';
|
||||
document.querySelectorAll('.sidebar .animated').forEach((element, index) => {
|
||||
element.style.animationDelay = (100 * index) + 'ms';
|
||||
element.classList.remove(animateAction);
|
||||
setTimeout(() => {
|
||||
// Trigger a DOM reflow
|
||||
element.classList.add(animateAction);
|
||||
});
|
||||
});
|
||||
},
|
||||
hideSidebar: function() {
|
||||
document.body.classList.remove('sidebar-active');
|
||||
}
|
||||
};
|
||||
if (CONFIG.sidebar.display !== 'remove') sidebarToggleMotion.init();
|
||||
|
||||
function updateFooterPosition() {
|
||||
const footer = document.querySelector('.footer');
|
||||
const containerHeight = document.querySelector('.main').offsetHeight + footer.offsetHeight;
|
||||
|
||||
50
source/js/sidebar.js
Normal file
50
source/js/sidebar.js
Normal file
@ -0,0 +1,50 @@
|
||||
/* global CONFIG */
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
const isRight = CONFIG.sidebar.position === 'right';
|
||||
|
||||
const sidebarToggleMotion = {
|
||||
mouse: {},
|
||||
init : function() {
|
||||
window.addEventListener('mousedown', this.mousedownHandler.bind(this));
|
||||
window.addEventListener('mouseup', this.mouseupHandler.bind(this));
|
||||
document.querySelector('.sidebar-dimmer').addEventListener('click', this.clickHandler.bind(this));
|
||||
document.querySelector('.sidebar-toggle').addEventListener('click', this.clickHandler.bind(this));
|
||||
window.addEventListener('sidebar:show', this.showSidebar);
|
||||
window.addEventListener('sidebar:hide', this.hideSidebar);
|
||||
},
|
||||
mousedownHandler: function(event) {
|
||||
this.mouse.X = event.pageX;
|
||||
this.mouse.Y = event.pageY;
|
||||
},
|
||||
mouseupHandler: function(event) {
|
||||
const deltaX = event.pageX - this.mouse.X;
|
||||
const deltaY = event.pageY - this.mouse.Y;
|
||||
const clickingBlankPart = Math.hypot(deltaX, deltaY) < 20 && event.target.matches('.main');
|
||||
// Fancybox has z-index property, but medium-zoom does not, so the sidebar will overlay the zoomed image.
|
||||
if (clickingBlankPart || event.target.matches('img.medium-zoom-image')) {
|
||||
this.hideSidebar();
|
||||
}
|
||||
},
|
||||
clickHandler: function() {
|
||||
document.body.classList.contains('sidebar-active') ? this.hideSidebar() : this.showSidebar();
|
||||
},
|
||||
showSidebar: function() {
|
||||
document.body.classList.add('sidebar-active');
|
||||
const animateAction = isRight ? 'fadeInRight' : 'fadeInLeft';
|
||||
document.querySelectorAll('.sidebar .animated').forEach((element, index) => {
|
||||
element.style.animationDelay = (100 * index) + 'ms';
|
||||
element.classList.remove(animateAction);
|
||||
setTimeout(() => {
|
||||
// Trigger a DOM reflow
|
||||
element.classList.add(animateAction);
|
||||
});
|
||||
});
|
||||
},
|
||||
hideSidebar: function() {
|
||||
document.body.classList.remove('sidebar-active');
|
||||
}
|
||||
};
|
||||
sidebarToggleMotion.init();
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user