Merge pull request iissnan#1717 from flashlab/patch-1

enable sidebar on mobile移动设备上开启侧栏

Author: ivan-nginx

_config.yml

@@ -206,6 +206,8 @@ sidebar:
 
   # Scroll percent label in b2t button
   scrollpercent: false
+  # Enable sidebar on narrow view
+  onmobile: false
 
 
 # Blog rolls

layout/_macro/sidebar.swig

@@ -8,6 +8,7 @@
   </div>
 
   <aside id="sidebar" class="sidebar">
+    <div id="sidebar-dimmer"></div>
     <div class="sidebar-inner">
 
       {% set display_toc = is_post and theme.toc.enable or is_page and theme.toc.enable %}

source/css/_common/components/back-to-top-sidebar.styl

@@ -11,11 +11,13 @@
   the-transition();
     &:hover { opacity: 0.8; }
 
-  +mobile() {
-    display: none;
-  }
   +tablet() {
-    display: none;
+    fixbutton() if hexo-config('sidebar.onmobile');
+    hide() if not hexo-config('sidebar.onmobile');
+  }
+  +mobile() {
+    fixbutton() if hexo-config('sidebar.onmobile');
+    hide() if not hexo-config('sidebar.onmobile');
   }
 
   &.back-to-top-on {

source/css/_common/components/back-to-top.styl

@@ -16,11 +16,13 @@
   transition-property: bottom;
   the-transition();
 
-  +mobile() {
-    display: none;
-  }
   +tablet() {
-    display: none;
+    fixbutton() if hexo-config('sidebar.onmobile');
+    hide() if not hexo-config('sidebar.onmobile');
+  }
+  +mobile() {
+    fixbutton() if hexo-config('sidebar.onmobile');
+    hide() if not hexo-config('sidebar.onmobile');
   }
 
   &.back-to-top-on {

source/css/_common/components/sidebar/sidebar-dimmer.styl

@@ -0,0 +1,21 @@
+.sidebar-active #sidebar-dimmer {
+  opacity: .7;
+  -webkit-transform: translateX(-150%);
+  transform: translateX(-150%);
+  transition: opacity .2s;
+}
+
+#sidebar-dimmer {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 100%;
+  width: 200%;
+  height: 100%;
+  background: #000;
+  opacity: 0;
+  transition: opacity .2s,transform 0s .2s;
+  +mobile() {
+    display: block;
+  }
+}

source/css/_common/components/sidebar/sidebar-toggle.styl

@@ -12,10 +12,12 @@
   -webkit-transform: translateZ(0);
 
   +tablet() {
-    display: none;
+    fixbutton() if hexo-config('sidebar.onmobile');
+    hide() if not hexo-config('sidebar.onmobile');
   }
   +mobile() {
-    display: none;
+    fixbutton() if hexo-config('sidebar.onmobile');
+    hide() if not hexo-config('sidebar.onmobile');
   }
 }
 

source/css/_common/components/sidebar/sidebar.styl

@@ -17,11 +17,12 @@
   }
 
   +tablet() {
-    display: none !important;
+    hide() if not hexo-config('sidebar.onmobile');
   }
   +mobile() {
-    display: none !important;
+    hide() if not hexo-config('sidebar.onmobile');
   }
+
 }
 
 .sidebar-inner {
@@ -36,7 +37,7 @@
 @import "site-state";
 @import "sidebar-feed-link";
 @import "sidebar-author-links";
-@import "sidebar-blogroll.styl";
+@import "sidebar-blogroll";
 @import "sidebar-nav";
 @import "sidebar-toc";
-
+@import "sidebar-dimmer";

source/css/_mixins/base.styl

@@ -40,6 +40,14 @@ transform() {
   transform: arguments
 }
 
+hide() {
+  display: none !important;
+}
+
+fixbutton() {
+  right: 20px;
+  opacity: 0.8;
+}
 
 random-color($min, $max) {
   return floor(math(0, 'random') * ($max - $min + 1) + $min);

source/js/src/motion.js

@@ -82,10 +82,12 @@ $(document).ready(function () {
 
   var sidebarToggleMotion = {
     toggleEl: $('.sidebar-toggle'),
+    dimmerEl: $('#sidebar-dimmer'),
     sidebarEl: $('.sidebar'),
     isSidebarVisible: false,
     init: function () {
       this.toggleEl.on('click', this.clickHandler.bind(this));
+      this.dimmerEl.on('click', this.clickHandler.bind(this));
       this.toggleEl.on('mouseenter', this.mouseEnterHandler.bind(this));
       this.toggleEl.on('mouseleave', this.mouseLeaveHandler.bind(this));