From 45d6e0413dcf396ccea3482ed0291ab3239895d4 Mon Sep 17 00:00:00 2001
From: Mimi <1119186082@qq.com>
Date: Wed, 10 Jun 2020 12:59:16 +0800
Subject: [PATCH] Refactor sidebar motion

---
 .../outline/sidebar/sidebar-dimmer.styl       | 10 +++----
 source/css/_common/scaffolding/base.styl      |  7 +----
 source/css/_schemes/Muse/_sidebar.styl        | 16 +++++++++--
 source/js/schemes/muse.js                     | 27 +++----------------
 source/js/utils.js                            | 20 +-------------
 5 files changed, 24 insertions(+), 56 deletions(-)

diff --git a/source/css/_common/outline/sidebar/sidebar-dimmer.styl b/source/css/_common/outline/sidebar/sidebar-dimmer.styl
index 5027a8f..6cf170a 100644
--- a/source/css/_common/outline/sidebar/sidebar-dimmer.styl
+++ b/source/css/_common/outline/sidebar/sidebar-dimmer.styl
@@ -13,11 +13,11 @@
     top: 0;
     width: 100%;
     z-index: $zindex-1;
-  }
 
-  .sidebar-active + #sidebar-dimmer {
-    opacity: .7;
-    transform: translateX(-100%);
-    transition: opacity .5s;
+    .sidebar-active & {
+      opacity: .7;
+      transform: translateX(-100%);
+      transition: opacity .5s;
+    }
   }
 }
diff --git a/source/css/_common/scaffolding/base.styl b/source/css/_common/scaffolding/base.styl
index 032a891..8c327e5 100644
--- a/source/css/_common/scaffolding/base.styl
+++ b/source/css/_common/scaffolding/base.styl
@@ -13,12 +13,7 @@ body {
   font-family: $font-family-base;
   font-size: $font-size-base;
   line-height: $line-height-base;
-
-  +tablet-mobile() {
-    // Remove the padding of body when the sidebar is open.
-    padding-left: 0 !important;
-    padding-right: 0 !important;
-  }
+  the-transition();
 }
 
 h1, h2, h3, h4, h5, h6 {
diff --git a/source/css/_schemes/Muse/_sidebar.styl b/source/css/_schemes/Muse/_sidebar.styl
index 1d123ab..54b535e 100644
--- a/source/css/_schemes/Muse/_sidebar.styl
+++ b/source/css/_schemes/Muse/_sidebar.styl
@@ -1,8 +1,14 @@
 if (hexo-config('sidebar.position') == 'right') {
+  .sidebar-active {
+    +desktop() {
+      padding-right: $sidebar-desktop;
+    }
+  }
+
   .sidebar {
     right: 0 - $sidebar-desktop;
 
-    &.sidebar-active {
+    .sidebar-active & {
       right: 0;
     }
   }
@@ -20,10 +26,16 @@ if (hexo-config('sidebar.position') == 'right') {
     left: $b2t-position-right;
   }
 } else {
+  .sidebar-active {
+    +desktop() {
+      padding-left: $sidebar-desktop;
+    }
+  }
+
   .sidebar {
     left: 0 - $sidebar-desktop;
 
-    &.sidebar-active {
+    .sidebar-active & {
       left: 0;
     }
   }
diff --git a/source/js/schemes/muse.js b/source/js/schemes/muse.js
index 14f8b83..72349b1 100644
--- a/source/js/schemes/muse.js
+++ b/source/js/schemes/muse.js
@@ -1,10 +1,8 @@
-/* global NexT, CONFIG, Velocity */
+/* global CONFIG, Velocity */
 
 document.addEventListener('DOMContentLoaded', () => {
 
   const isRight = CONFIG.sidebar.position === 'right';
-  const SIDEBAR_WIDTH = CONFIG.sidebar.width || 320;
-  const SIDEBAR_DISPLAY_DURATION = 200;
   const mousePos = {};
 
   const sidebarToggleLines = {
@@ -23,7 +21,6 @@ document.addEventListener('DOMContentLoaded', () => {
   };
 
   const sidebarToggleMotion = {
-    sidebarEl       : document.querySelector('.sidebar'),
     isSidebarVisible: false,
     init            : function() {
       sidebarToggleLines.init();
@@ -64,7 +61,7 @@ document.addEventListener('DOMContentLoaded', () => {
     },
     showSidebar: function() {
       this.isSidebarVisible = true;
-      this.sidebarEl.classList.add('sidebar-active');
+      document.body.classList.add('sidebar-active');
       if (typeof Velocity === 'function') {
         Velocity(document.querySelectorAll('.sidebar .motion-element'), isRight ? 'transition.slideRightIn' : 'transition.slideLeftIn', {
           stagger: 50,
@@ -73,30 +70,12 @@ document.addEventListener('DOMContentLoaded', () => {
       }
 
       sidebarToggleLines.close();
-      NexT.utils.isDesktop() && window.anime(Object.assign({
-        targets : document.body,
-        duration: SIDEBAR_DISPLAY_DURATION,
-        easing  : 'linear'
-      }, isRight ? {
-        'padding-right': SIDEBAR_WIDTH
-      } : {
-        'padding-left': SIDEBAR_WIDTH
-      }));
     },
     hideSidebar: function() {
       this.isSidebarVisible = false;
-      this.sidebarEl.classList.remove('sidebar-active');
+      document.body.classList.remove('sidebar-active');
 
       sidebarToggleLines.init();
-      NexT.utils.isDesktop() && window.anime(Object.assign({
-        targets : document.body,
-        duration: SIDEBAR_DISPLAY_DURATION,
-        easing  : 'linear'
-      }, isRight ? {
-        'padding-right': 0
-      } : {
-        'padding-left': 0
-      }));
     }
   };
   sidebarToggleMotion.init();
diff --git a/source/js/utils.js b/source/js/utils.js
index a84ee82..ed0ce34 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -312,24 +312,6 @@ NexT.utils = {
     createIntersectionObserver(document.documentElement.scrollHeight);
   },
 
-  hasMobileUA: function() {
-    let ua = navigator.userAgent;
-    let pa = /iPad|iPhone|Android|Opera Mini|BlackBerry|webOS|UCWEB|Blazer|PSP|IEMobile|Symbian/g;
-    return pa.test(ua);
-  },
-
-  isTablet: function() {
-    return window.screen.width < 992 && window.screen.width > 767 && this.hasMobileUA();
-  },
-
-  isMobile: function() {
-    return window.screen.width < 767 && this.hasMobileUA();
-  },
-
-  isDesktop: function() {
-    return !this.isTablet() && !this.isMobile();
-  },
-
   supportsPDFs: function() {
     let ua = navigator.userAgent;
     let isFirefoxWithPDFJS = ua.includes('irefox') && parseInt(ua.split('rv:')[1].split('.')[0], 10) > 18;
@@ -369,7 +351,7 @@ NexT.utils = {
       document.querySelector('.sidebar-nav-overview').click();
     }
     NexT.utils.initSidebarDimension();
-    if (!this.isDesktop() || CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') return;
+    if (window.screen.width < 992 || CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini') return;
     // Expand sidebar on post detail page by default, when post has a toc.
     let display = CONFIG.page.sidebar;
     if (typeof display !== 'boolean') {