refactor: refactoring side tools && add font size adjust

_config.yml

@@ -153,20 +153,6 @@ code_copy:
   style: default        # values: default | mac
 
 
-# ---------------------------------------------------------------------------------------
-# Sidebar tools
-# ---------------------------------------------------------------------------------------
-side_tools:
-  enable: false
-
-
-# ---------------------------------------------------------------------------------------
-# Back to top
-# ---------------------------------------------------------------------------------------
-back2top:
-  enable: true
-
-
 # ---------------------------------------------------------------------------------------
 # Table of Contents in the Sidebar
 # ---------------------------------------------------------------------------------------
@@ -181,7 +167,7 @@ toc:
 
 
 # ---------------------------------------------------------------------------------------
-# # Post copyright info
+# Post copyright info
 # ---------------------------------------------------------------------------------------
 copyright_info:
   enable: true

layout/_partial/scripts.ejs

@@ -1,17 +1,11 @@
 <%- __js([
     'js/utils.js',
+    'js/main.js',
     'js/header-shrink.js',
-    'js/main.js'
+    'js/back2top.js',
+    'js/dark-light-toggle.js'
 ]) %>
 
-<% if (theme.side_tools.enable) { %>
-    <%- __js('js/dark-light-toggle.js') %>
-
-    <% if (theme.back2top.enable) { %>
-        <%- __js('js/back2top.js') %>
-    <% } %>
-<% } %>
-
 <% if (theme.local_search.enable) { %>
     <%- __js('js/local-search.js') %>
 <% } %>

layout/_partial/side-tools-container.ejs

@@ -0,0 +1,35 @@
+<div class="side-tools-container">
+
+    <ul class="side-tools-list">
+        <li class="tools-item tool-font-adjust-plus flex-center">
+            <i class="fas fa-search-plus"></i>
+        </li>
+
+        <li class="tools-item tool-font-adjust-minus flex-center">
+            <i class="fas fa-search-minus"></i>
+        </li>
+
+        <!--<li class="tools-item tool-expand-content flex-center">
+            <i class="fas fa-arrows-alt-h"></i>
+        </li>-->
+
+        <li class="tools-item tool-dark-light-toggle flex-center">
+            <i class="fas fa-moon"></i>
+        </li>
+
+        <li class="tools-item tool-scroll-to-top flex-center">
+            <i class="fas fa-arrow-up"></i>
+        </li>
+
+        <li class="tools-item tool-scroll-to-bottom flex-center">
+            <i class="fas fa-arrow-down"></i>
+        </li>
+    </ul>
+
+    <ul class="tools-ul-1">
+        <li class="tools-item tool-toggle-show flex-center">
+            <i class="fas fa-cog"></i>
+        </li>
+
+    </ul>
+</div>

layout/_partial/tools2.ejs

@@ -1,32 +0,0 @@
-<div class="tools2-container">
-
-    <button class="tools-button">
-        <i class="fas fa-plus"></i>
-    </button>
-
-    <ul class="tools-wrapper">
-        <!-- back2top -->
-        <% if (theme.back2top.enable) { %>
-            <li class="tools-item scroll-to-bottom">
-                <i class="fas fa-arrow-down"></i>
-            </li>
-            <li class="tools-item scroll-to-top">
-                <i class="fas fa-arrow-up"></i>
-            </li>
-        <% } %>
-
-        <!-- mode toggle -->
-        <li class="tools-item mode-toggle">
-            <i class="fas fa-moon"></i>
-        </li>
-
-        <!-- rss -->
-        <% if (theme.rss.enable && config.feed) { %>
-            <li class="tools-item rss">
-                <a href="<%= '/' + config.feed.path %>" target="_blank"><i class="fas fa-rss"></i></a>
-            </li>
-        <% } %>
-
-
-    </ul>
-</div>

layout/page.ejs

@@ -59,12 +59,9 @@
         <%- partial('_partial/tools') %>
     </div>
 
-    <!-- side tools -->
+    <div class="right-bottom-side-tools">
-    <% if (theme.side_tools.enable) { %>
+        <%- partial('_partial/side-tools-container') %>
-        <div class="bottom-sidebar-tools">
+    </div>
-            <%- partial('_partial/tools2') %>
-        </div>
-    <% } %>
 
     <!-- page aside -->
     <aside class="page-aside">

source/css/layout/_partial/first-screen.styl

@@ -13,15 +13,15 @@
 
     .description {
       font-weight: bold;
-      font-size: 30px;
+      font-size: 2em;
-      line-height: 60px;
+      line-height: 2em;
       text-align: center;
     }
 
     .social-icon-list {
       position: absolute;
       bottom: $component-interspace;
-      font-size: 26px;
+      font-size: 1.6em;
       left: 50%;
       transform: translateX(-50%);
 

source/css/layout/_partial/side-tools-container.styl

@@ -0,0 +1,51 @@
+$tools-item-width = 30px;
+
+.side-tools-container {
+  position: relative;
+  transition();
+
+  .tools-item {
+    width: $tools-item-width;
+    height: $tools-item-width;
+    font-size: 1.1em;
+    margin-bottom: 3px;
+    color: var(--second-text-color);
+    background: var(--background-color);
+    cursor: pointer;
+    box-shadow: 1px 1px 3px var(--shadow-color);
+    border-right: none;
+
+    &:hover {
+      transition();
+      color: var(--background-color);
+      background: var(--primary-color);
+      box-shadow: 2px 2px 6px var(--shadow-color);
+    }
+
+    +keep-tablet() {
+      width: $tools-item-width * 0.9;
+      height: $tools-item-width * 0.9;
+      font-size: 1.05em;
+      margin-bottom: 2px;
+    }
+
+    +keep-mobile() {
+      width: $tools-item-width * 0.8;
+      height: $tools-item-width * 0.8;
+      font-size: 1.0em;
+    }
+  }
+
+
+  .side-tools-list {
+    opacity: 0;
+    transform: translateX(100%);
+    transition();
+
+    &.show {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+}

source/css/layout/_partial/tools2.styl

@@ -1,88 +0,0 @@
-$li-border-radius = 5px;
-$li-margin-bottom = 12px;
-
-.tools2-container {
-
-  .tools-button {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: $circle-button-width;
-    height: $circle-button-width;
-    border-radius: 50%;
-    font-size: 1.2em;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: var(--background-color);
-    color: var(--second-text-color);
-    z-index: 9999;
-
-    hover-style(1.1, 1.1);
-
-    &:hover {
-      transition();
-      color: var(--background-color);
-      background: var(--primary-color);
-    }
-  }
-
-
-  .tools-wrapper {
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .tools-item {
-
-      position: absolute;
-      top: 0;
-      left: ($circle-button-width - $tools-button-width) / 2;
-      cursor: pointer;
-      width: $tools-button-width;
-      height: $tools-button-width;
-      border-radius: $li-border-radius;
-      font-size: 1.2em;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: var(--background-color);
-      opacity: 0;
-
-      &.hide {
-        opacity: 0;
-        transform: translate3d(0, 0, 0);
-      }
-
-      hover-style(1.1, 1.1);
-
-      &:hover {
-        transition();
-        color: var(--background-color);
-        background: var(--primary-color);
-      }
-
-      &.rss {
-
-        a {
-          border-radius: $li-border-radius;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          width: 100%;
-          height: 100%;
-
-          &:hover {
-            transition();
-            color: var(--background-color);
-            background: var(--primary-color);
-          }
-        }
-      }
-    }
-
-
-  }
-
-}

source/css/layout/article-content.styl

@@ -67,7 +67,7 @@ $post-nav-max-width = 220px;
         .level {
           margin-left: 10px;
           color: #fff;
-          font-size: 12px;
+          font-size: 0.7em;
           font-weight: 500;
           background: var(--selection-color);
           padding: 0 4px;

source/css/layout/page.styl

@@ -3,16 +3,16 @@ $temp-width = hexo-config('style.left_side_width');
 $page-aside-width = $temp-width ? convert($temp-width):260px;
 
 .page-container {
-
-  transition();
-
   position: relative;
   padding-top: $header-progress-height;
 
+  transition();
+
   +keep-tablet() {
     padding-left: 0 !important;
   }
 
+
   .page-header {
     .header-progress {
       visibility: hidden;
@@ -157,29 +157,9 @@ $page-aside-width = $temp-width ? convert($temp-width):260px;
   }
 
 
-  .bottom-sidebar-tools {
+  .right-bottom-side-tools {
     position: fixed;
     bottom: $component-interspace;
-    right: $component-interspace;
+    right: 0;
-    width: $circle-button-width;
-    height: $circle-button-width;
-
-    +keep-tablet() {
-      right: 10px;
-      transform: scale(0.82);
-      transform-origin: right bottom;
-
-    }
-
-    +keep-mobile() {
-      right: 5px;
-      transform: scale(0.72);
-      transform-origin: right bottom;
-    }
-  }
-
-  .sidebar-tools-shrink {
-    transition();
-    top: $header-shrink-height + $component-interspace;
   }
 }

source/css/style.styl

@@ -5,7 +5,7 @@
 @import "layout/_partial/comment/comment.styl"
 @import "layout/_partial/header.styl"
 @import "layout/_partial/tools.styl"
-@import "layout/_partial/tools2.styl"
+@import "layout/_partial/side-tools-container.styl"
 @import "layout/_partial/archive-list.styl"
 @import "layout/_partial/footer.styl"
 @import "layout/_partial/paginator.styl"

source/js/back2top.js

@@ -3,8 +3,8 @@ window.addEventListener('DOMContentLoaded', () => {
 
     ...KEEP.utils,
 
-    back2TopButton_dom: document.querySelector('.scroll-to-top'),
+    back2TopButton_dom: document.querySelector('.tool-scroll-to-top'),
-    back2BottomButton_dom: document.querySelector('.scroll-to-bottom'),
+    back2BottomButton_dom: document.querySelector('.tool-scroll-to-bottom'),
 
     back2top() {
       const scrollTopTimer = setInterval(function () {
@@ -34,23 +34,19 @@ window.addEventListener('DOMContentLoaded', () => {
       }, 50);
     },
 
-    initBack2TopButton() {
+    initBack2Top() {
-      if (KEEP.utils.back2TopButton_dom) {
+      this.back2TopButton_dom.addEventListener('click', () => {
-        KEEP.utils.back2TopButton_dom.addEventListener('click', () => {
+        this.back2top();
-          this.back2top();
+      });
-        });
-      }
     },
 
-    initBack2BottomButton() {
+    initBack2Bottom() {
-      if (KEEP.utils.back2BottomButton_dom) {
+      this.back2BottomButton_dom.addEventListener('click', () => {
-        KEEP.utils.back2BottomButton_dom.addEventListener('click', () => {
+        this.back2Bottom();
-          this.back2Bottom();
+      });
-        });
-      }
     },
   }
 
-  KEEP.utils.initBack2TopButton();
+  KEEP.utils.initBack2Top();
-  KEEP.utils.initBack2BottomButton();
+  KEEP.utils.initBack2Bottom();
 });

source/js/dark-light-toggle.js

@@ -1,9 +1,9 @@
 window.addEventListener('DOMContentLoaded', () => {
   KEEP.utils.modeToggle = {
 
-    localStorageKey: 'MAGIC',
+    localStorageKey: 'KEEP',
-    modeToggleButton_dom: document.querySelector('.mode-toggle'),
+    modeToggleButton_dom: document.querySelector('.tool-dark-light-toggle'),
-    iconDom: document.querySelector('.mode-toggle i'),
+    iconDom: document.querySelector('.tool-dark-light-toggle i'),
     articleContent: document.querySelector('.main-content'),
 
     setItemUtil(modeClass, prefersColorScheme) {

source/js/header-shrink.js

@@ -4,10 +4,8 @@ window.addEventListener('DOMContentLoaded', () => {
     pageTemplateDom: document.querySelector('.page-main-content'),
     sidebarToolsDom: document.querySelector('.sidebar-tools'),
     headerDom: document.querySelector('.header-wrapper'),
-    menuBarDom: document.querySelector('.menu-bar'),
-    windowMaskDom: document.querySelector('.window-mask'),
-
     isHeaderShrink: false,
+    isShowHeaderDrawer: false,
 
     init() {
       this.headerHeight = this.headerDom.getBoundingClientRect().height;
@@ -33,16 +31,17 @@ window.addEventListener('DOMContentLoaded', () => {
     },
 
     initMenuBarButton() {
-      let isShowHeaderDrawer = false;
+      document.querySelector('.menu-bar').addEventListener('click', () => {
-      this.menuBarDom.addEventListener('click', () => {
+        this.isShowHeaderDrawer = !this.isShowHeaderDrawer;
-        isShowHeaderDrawer = !isShowHeaderDrawer;
+        document.body.style.overflow = this.isShowHeaderDrawer ? 'hidden' : 'auto';
-        document.body.style.overflow = isShowHeaderDrawer ? 'hidden' : 'auto';
         this.headerDom.classList.toggle('header-drawer-show');
       });
     },
 
     initWindowMask() {
-      this.windowMaskDom.addEventListener('click', () => {
+      document.querySelector('.window-mask').addEventListener('click', () => {
+        this.isShowHeaderDrawer = !this.isShowHeaderDrawer;
+        document.body.style.overflow = this.isShowHeaderDrawer ? 'hidden' : 'auto';
         this.headerDom.classList.toggle('header-drawer-show');
       });
     },

source/js/local-search.js

@@ -1,12 +1,18 @@
 /* global CONFIG */
 window.addEventListener('DOMContentLoaded', () => {
+
+  // Search DB path
+  let searchPath = KEEP.hexo_config.path;
+  if (!searchPath) {
+    // Search DB path
+    console.warn('`hexo-generator-searchdb` plugin is not installed!');
+    return;
+  }
+
   // Popup Window
   let isfetched = false;
   let datas;
   let isXml = true;
-  // Search DB path
-  let searchPath = KEEP.hexo_config.path;
-  if (!searchPath) return false;
   if (searchPath.length === 0) {
     searchPath = 'search.xml';
   } else if (searchPath.endsWith('json')) {
@@ -222,7 +228,7 @@ window.addEventListener('DOMContentLoaded', () => {
   };
 
   const fetchData = () => {
-    fetch(KEEP.theme_config.root + searchPath)
+    fetch(KEEP.hexo_config.root + searchPath)
       .then(response => response.text())
       .then(res => {
         // Get the contents from search data

source/js/main.js

@@ -13,8 +13,11 @@ window.addEventListener('DOMContentLoaded', () => {
   // init scroll
   KEEP.utils.registerWindowScroll();
 
-  // init tools button
+  // toggle show tools list
-  KEEP.utils.registerToolsButtonClick();
+  KEEP.utils.toggleShowToolsList();
+
+  // global font adjust
+  KEEP.utils.globalFontAdjust();
 
   // comment
   KEEP.utils.goComment();

source/js/utils.js

@@ -53,36 +53,33 @@ KEEP.utils = {
     });
   },
 
-  // tools
+  // toggle show tools list
-  registerToolsButtonClick() {
+  toggleShowToolsList() {
-    if (!KEEP.theme_config.side_tools.enable) return;
+    document.querySelector('.tool-toggle-show').addEventListener('click', () => {
+      document.querySelector('.side-tools-list').classList.toggle('show');
+    });
+  },
 
-    let isOpen = false;
+  // global font adjust
-    this.toolsMenuButton_dom = document.querySelector('.tools-button');
+  defaultFontSize: 0,
-    this.toolsWrapperList_dom = document.querySelectorAll('.tools-wrapper li');
+  globalFontAdjust() {
+    const initFontSize = document.defaultView.getComputedStyle(document.body).fontSize;
+    const fs = Number(initFontSize.substring(0, initFontSize.length - 2));
 
-    this.toolsMenuButton_dom.addEventListener('click', e => {
+    const setFontSize = (defaultFontSize) => {
-      isOpen = !isOpen;
+      document.body.style.fontSize = `${fs * (1 + defaultFontSize * 0.06)}px`;
+    }
 
-      const toolsMenuButtonIcon = this.toolsMenuButton_dom.querySelector('i');
+    document.querySelector('.tool-font-adjust-plus').addEventListener('click', () => {
-      if (isOpen) {
+      if (this.defaultFontSize >= 5) return;
-        toolsMenuButtonIcon.classList.add('fa-minus');
+      this.defaultFontSize++;
-        toolsMenuButtonIcon.classList.remove('fa-plus');
+      setFontSize(this.defaultFontSize);
-      } else {
+    });
-        toolsMenuButtonIcon.classList.add('fa-plus');
-        toolsMenuButtonIcon.classList.remove('fa-minus');
-      }
-      this.toolsWrapperList_dom.forEach((li, index) => {
 
-        if (isOpen) {
+    document.querySelector('.tool-font-adjust-minus').addEventListener('click', () => {
-          li.style.transform = `translate3d(0, -${138 * (index + 1)}%, 0)`;
+      if (this.defaultFontSize <= 0) return;
-          li.style.opacity = '1';
+      this.defaultFontSize--;
-        } else {
+      setFontSize(this.defaultFontSize);
-          li.style.opacity = '0';
-          li.style.transform = 'translate3d(0, 0, 0)';
-        }
-
-      });
     });
   },