Refactor sidebar motion

layout/_scripts/noscript.swig

@@ -1,6 +1,5 @@
 <noscript>
  <style>
- .use-motion .motion-element,
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,

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

@@ -2,10 +2,8 @@
  background: $black-deep;
  bottom: 0;
  box-shadow: inset 0 2px 6px black;
- left: 0;
  position: fixed;
  top: 0;
- width: 0;
  z-index: $zindex-4;
 
  a, span.exturl {
@@ -28,7 +26,6 @@
 .sidebar-inner {
  color: $grey-dark;
  padding: 20px 10px;
- position: relative;
  text-align: center;
 }
 

source/css/_common/scaffolding/helpers.styl

@@ -73,7 +73,3 @@
  font-size: $font-size-small;
  margin-top: -20px;
 }
-
-.use-motion .motion-element {
- opacity: 0;
-}

source/css/_schemes/Muse/_sidebar.styl

@@ -1,7 +1,10 @@
 if (hexo-config('sidebar.position') == 'right') {
  .sidebar {
- left: auto;
- right: 0;
+ right: 0 - $sidebar-desktop;
+
+ &.sidebar-active {
+ right: 0;
+ }
  }
 
  .sidebar-toggle, .back-to-top {
@@ -16,12 +19,17 @@ if (hexo-config('sidebar.position') == 'right') {
  .book-mark-link {
  left: $b2t-position-right;
  }
+} else {
+ .sidebar {
+ left: 0 - $sidebar-desktop;
+
+ &.sidebar-active {
+ left: 0;
+ }
+ }
 }
 
 .sidebar {
- display: none;
-
- &.sidebar-active {
- display: block;
- }
+ transition: all .4s;
+ width: $sidebar-desktop;
 }

source/css/_schemes/Pisces/_sidebar.styl

@@ -1,7 +1,3 @@
-.use-motion .sidebar .motion-element {
- opacity: 1;
-}
-
 .sidebar {
  bottom: auto;
  right: auto;

source/css/_variables/Mist.styl

@@ -1,6 +1,8 @@
 // Variables of Mist scheme
 // =================================================
 
+@import "Muse.styl";
+
 $brand-color = $black-deep;
 $brand-hover-color = $brand-color;
 

source/css/_variables/Muse.styl

@@ -0,0 +1,5 @@
+// Variables of Muse scheme
+// =================================================
+
+$sidebar-width = hexo-config('sidebar.width') is a 'unit' ? hexo-config('sidebar.width') : 320;
+$sidebar-desktop = unit($sidebar-width, 'px');

source/css/_variables/base.styl

@@ -219,6 +219,7 @@ $posts-collapse-left-mobile = 5px;
 // Sidebar
 // Variables for sidebar section elements.
 // --------------------------------------------------
+
 $sidebar-offset = unit(hexo-config('sidebar.offset'), px) if hexo-config('sidebar.offset') is a 'unit';
 $sidebar-nav-color = $black-light;
 $sidebar-nav-hover-color = $whitesmoke;

source/js/next-boot.js

@@ -25,12 +25,9 @@ NexT.boot.registerEvents = function() {
  var item = $(event.currentTarget);
  var activeTabClassName = 'sidebar-nav-active';
  var activePanelClassName = 'sidebar-panel-active';
+ if (item.hasClass(activeTabClassName)) return;
 
  var target = $('.' + item.data('target'));
- if (item.hasClass(activeTabClassName)) {
- target.find('.motion-element').css({ opacity: 1 });
- return;
- }
  var currentTarget = target.siblings('.sidebar-panel');
  currentTarget.animate({ opacity: 0 }, TAB_ANIMATE_DURATION, () => {
  // Prevent adding TOC to Overview if Overview was selected when close & open sidebar.

source/js/schemes/muse.js

@@ -4,22 +4,19 @@ window.addEventListener('DOMContentLoaded', () => {
 
  var sidebarToggleLines = {
  lines: [],
- push : function(line) {
- this.lines.push(line);
- },
- init: function() {
+ init : function() {
  this.lines.forEach(line => {
- line.init();
+ line.transform('init');
  });
  },
  arrow: function() {
  this.lines.forEach(line => {
- line.arrow();
+ line.transform('arrow');
  });
  },
  close: function() {
  this.lines.forEach(line => {
- line.close();
+ line.transform('close');
  });
  }
  };
@@ -34,69 +31,51 @@ window.addEventListener('DOMContentLoaded', () => {
  left : 0
  }
  }, settings.status);
- this.init = function() {
- this.transform('init');
- };
- this.arrow = function() {
- this.transform('arrow');
- };
- this.close = function() {
- this.transform('close');
- };
  this.transform = function(status) {
  document.querySelector(settings.el).css(this.status[status]);
  };
  }
 
- var isRight = CONFIG.sidebar.position !== 'left';
+ var isRight = CONFIG.sidebar.position === 'right';
 
- var sidebarToggleLine1st = new SidebarToggleLine({
+ sidebarToggleLines.lines = [new SidebarToggleLine({
  el : '.sidebar-toggle-line-first',
  status: isRight
  ? {
  arrow: {width: '50%', transform: 'rotate(-45deg)', top: '2px'},
  close: {width: '100%', transform: 'rotate(-45deg)', top: '5px'}
- }
- : {
+ } : {
  arrow: {width: '50%', transform: 'rotate(45deg)', top: '2px', left: '50%'},
  close: {width: '100%', transform: 'rotate(-45deg)', top: '5px', left: '0px'}
  }
- });
- var sidebarToggleLine2nd = new SidebarToggleLine({
+ }), new SidebarToggleLine({
  el : '.sidebar-toggle-line-middle',
  status: isRight
  ? {
  arrow: {width: '90%'},
  close: {opacity: 0}
- }
- : {
+ } : {
  arrow: {width: '90%', left: '2px'},
  close: {opacity: 0, left: '0px'}
  }
- });
- var sidebarToggleLine3rd = new SidebarToggleLine({
+ }), new SidebarToggleLine({
  el : '.sidebar-toggle-line-last',
  status: isRight
  ? {
  arrow: {width: '50%', transform: 'rotate(45deg)', top: '-2px'},
  close: {width: '100%', transform: 'rotate(45deg)', top: '-5px'}
- }
- : {
+ } : {
  arrow: {width: '50%', transform: 'rotate(-45deg)', top: '-2px', left: '50%'},
  close: {width: '100%', transform: 'rotate(45deg)', top: '-5px', left: '0px'}
  }
- });
-
- sidebarToggleLines.push(sidebarToggleLine1st);
- sidebarToggleLines.push(sidebarToggleLine2nd);
- sidebarToggleLines.push(sidebarToggleLine3rd);
+ })];
 
- var SIDEBAR_WIDTH = CONFIG.sidebar.width || '320px';
- var SIDEBAR_DISPLAY_DURATION = 200;
+ var SIDEBAR_WIDTH = CONFIG.sidebar.width || 320;
+ var SIDEBAR_DISPLAY_DURATION = 400;
  var mousePos = {}; var touchPos = {};
 
  var sidebarToggleMotion = {
- sidebarEl : $('.sidebar'),
+ sidebarEl : document.querySelector('.sidebar'),
  isSidebarVisible: false,
  init : function() {
  sidebarToggleLines.init();
@@ -107,12 +86,9 @@ window.addEventListener('DOMContentLoaded', () => {
  document.querySelector('.sidebar-toggle').addEventListener('click', this.clickHandler.bind(this));
  document.querySelector('.sidebar-toggle').addEventListener('mouseenter', this.mouseEnterHandler.bind(this));
  document.querySelector('.sidebar-toggle').addEventListener('mouseleave', this.mouseLeaveHandler.bind(this));
- this.sidebarEl
- .on('touchstart', this.touchstartHandler.bind(this))
- .on('touchend', this.touchendHandler.bind(this))
- .on('touchmove', event => {
- event.preventDefault();
- });
+ this.sidebarEl.addEventListener('touchstart', this.touchstartHandler.bind(this));
+ this.sidebarEl.addEventListener('touchend', this.touchendHandler.bind(this));
+ this.sidebarEl.addEventListener('touchmove', event => event.preventDefault());
  window.addEventListener('sidebar:show', this.showSidebar.bind(this));
  window.addEventListener('sidebar:hide', this.hideSidebar.bind(this));
  },
@@ -155,50 +131,36 @@ window.addEventListener('DOMContentLoaded', () => {
  },
  showSidebar: function() {
  this.isSidebarVisible = true;
- var self = this;
-
+ this.sidebarEl.classList.add('sidebar-active');
  if (typeof $.Velocity === 'function') {
- this.sidebarEl.addClass('sidebar-active').stop().velocity({
- width: SIDEBAR_WIDTH
- }, {
- duration: SIDEBAR_DISPLAY_DURATION,
- begin : function() {
- $.Velocity(document.querySelectorAll('.sidebar .motion-element:not(.site-state)'), isRight ? 'transition.slideRightIn' : 'transition.slideLeftIn', {
- stagger: 50,
- drag : true
- });
- $.Velocity(document.querySelector('.site-state'), isRight ? 'transition.slideRightIn' : 'transition.slideLeftIn', {
- stagger: 50,
- drag : true,
- display: 'flex'
- });
- },
- complete: function() {
- NexT.utils.initSidebarDimension();
- }
+ $.Velocity(document.querySelectorAll('.sidebar .motion-element:not(.site-state)'), isRight ? 'transition.slideRightIn' : 'transition.slideLeftIn', {
+ stagger: 50,
+ drag : true
  });
- } else {
- this.sidebarEl.addClass('sidebar-active').stop().animate({
- width: SIDEBAR_WIDTH
- }, SIDEBAR_DISPLAY_DURATION, () => {
- self.sidebarEl.find('.motion-element').css({opacity: 1});
- NexT.utils.initSidebarDimension();
+ $.Velocity(document.querySelector('.site-state'), isRight ? 'transition.slideRightIn' : 'transition.slideLeftIn', {
+ stagger: 50,
+ drag : true,
+ display: 'flex'
  });
  }
 
  sidebarToggleLines.close();
- NexT.utils.isDesktop() && $('body').stop().animate(isRight ? {'padding-right': SIDEBAR_WIDTH} : {'padding-left': SIDEBAR_WIDTH}, SIDEBAR_DISPLAY_DURATION);
+ NexT.utils.isDesktop() && $('body').stop().animate(isRight ? {
+ 'padding-right': SIDEBAR_WIDTH
+ } : {
+ 'padding-left': SIDEBAR_WIDTH
+ }, SIDEBAR_DISPLAY_DURATION);
  },
  hideSidebar: function() {
- var self = this;
  this.isSidebarVisible = false;
- this.sidebarEl.find('.motion-element').css({opacity: 0});
- this.sidebarEl.stop().animate({width: 0}, SIDEBAR_DISPLAY_DURATION, () => {
- self.sidebarEl.removeClass('sidebar-active');
- });
+ this.sidebarEl.classList.remove('sidebar-active');
 
  sidebarToggleLines.init();
- NexT.utils.isDesktop() && $('body').stop().animate(isRight ? {'padding-right': 0} : {'padding-left': 0}, SIDEBAR_DISPLAY_DURATION);
+ NexT.utils.isDesktop() && $('body').stop().animate(isRight ? {
+ 'padding-right': 0
+ } : {
+ 'padding-left': 0
+ }, SIDEBAR_DISPLAY_DURATION);
  }
  };
  sidebarToggleMotion.init();

source/js/utils.js

@@ -250,8 +250,8 @@ NexT.utils = {
  sidebarNav.style.display = 'none';
  sidebarNav.classList.remove('motion-element');
  document.querySelector('.sidebar-nav-overview').click();
- return;
  }
+ NexT.utils.initSidebarDimension();
 
  const navItems = document.querySelectorAll('.post-toc li');
  const sections = [...navItems].map(element => {
@@ -375,10 +375,7 @@ NexT.utils = {
  },
 
  updateSidebarPosition: function() {
- if (!this.isDesktop() || this.isPisces() || this.isGemini()) {
- this.initSidebarDimension();
- return;
- }
+ if (!this.isDesktop() || this.isPisces() || this.isGemini()) return;
  // Expand sidebar on post detail page by default, when post has a toc.
  var $tocContent = $('.post-toc');
  var display = CONFIG.page.sidebar;