refactor: refactoring side tools && add font size adjust
This commit is contained in:
XPoet
parent
90f06b8940
commit
cc6777b6e9
16
_config.yml
16
_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
|
||||
|
|
|
|||
|
|
@ -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') %>
|
||||
<% } %>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -59,12 +59,9 @@
|
|||
<%- partial('_partial/tools') %>
|
||||
</div>
|
||||
|
||||
<!-- side tools -->
|
||||
<% if (theme.side_tools.enable) { %>
|
||||
<div class="bottom-sidebar-tools">
|
||||
<%- partial('_partial/tools2') %>
|
||||
<div class="right-bottom-side-tools">
|
||||
<%- partial('_partial/side-tools-container') %>
|
||||
</div>
|
||||
<% } %>
|
||||
|
||||
<!-- page aside -->
|
||||
<aside class="page-aside">
|
||||
|
|
|
|||
|
|
@ -13,15 +13,15 @@
|
|||
|
||||
.description {
|
||||
font-weight: bold;
|
||||
font-size: 30px;
|
||||
line-height: 60px;
|
||||
font-size: 2em;
|
||||
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%);
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
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;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ window.addEventListener('DOMContentLoaded', () => {
|
|||
|
||||
...KEEP.utils,
|
||||
|
||||
back2TopButton_dom: document.querySelector('.scroll-to-top'),
|
||||
back2BottomButton_dom: document.querySelector('.scroll-to-bottom'),
|
||||
back2TopButton_dom: document.querySelector('.tool-scroll-to-top'),
|
||||
back2BottomButton_dom: document.querySelector('.tool-scroll-to-bottom'),
|
||||
|
||||
back2top() {
|
||||
const scrollTopTimer = setInterval(function () {
|
||||
|
|
@ -34,23 +34,19 @@ window.addEventListener('DOMContentLoaded', () => {
|
|||
}, 50);
|
||||
},
|
||||
|
||||
initBack2TopButton() {
|
||||
if (KEEP.utils.back2TopButton_dom) {
|
||||
KEEP.utils.back2TopButton_dom.addEventListener('click', () => {
|
||||
initBack2Top() {
|
||||
this.back2TopButton_dom.addEventListener('click', () => {
|
||||
this.back2top();
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
initBack2BottomButton() {
|
||||
if (KEEP.utils.back2BottomButton_dom) {
|
||||
KEEP.utils.back2BottomButton_dom.addEventListener('click', () => {
|
||||
initBack2Bottom() {
|
||||
this.back2BottomButton_dom.addEventListener('click', () => {
|
||||
this.back2Bottom();
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
KEEP.utils.initBack2TopButton();
|
||||
KEEP.utils.initBack2BottomButton();
|
||||
KEEP.utils.initBack2Top();
|
||||
KEEP.utils.initBack2Bottom();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
window.addEventListener('DOMContentLoaded', () => {
|
||||
KEEP.utils.modeToggle = {
|
||||
|
||||
localStorageKey: 'MAGIC',
|
||||
modeToggleButton_dom: document.querySelector('.mode-toggle'),
|
||||
iconDom: document.querySelector('.mode-toggle i'),
|
||||
localStorageKey: 'KEEP',
|
||||
modeToggleButton_dom: document.querySelector('.tool-dark-light-toggle'),
|
||||
iconDom: document.querySelector('.tool-dark-light-toggle i'),
|
||||
articleContent: document.querySelector('.main-content'),
|
||||
|
||||
setItemUtil(modeClass, prefersColorScheme) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
this.menuBarDom.addEventListener('click', () => {
|
||||
isShowHeaderDrawer = !isShowHeaderDrawer;
|
||||
document.body.style.overflow = isShowHeaderDrawer ? 'hidden' : 'auto';
|
||||
document.querySelector('.menu-bar').addEventListener('click', () => {
|
||||
this.isShowHeaderDrawer = !this.isShowHeaderDrawer;
|
||||
document.body.style.overflow = this.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');
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -13,8 +13,11 @@ window.addEventListener('DOMContentLoaded', () => {
|
|||
// init scroll
|
||||
KEEP.utils.registerWindowScroll();
|
||||
|
||||
// init tools button
|
||||
KEEP.utils.registerToolsButtonClick();
|
||||
// toggle show tools list
|
||||
KEEP.utils.toggleShowToolsList();
|
||||
|
||||
// global font adjust
|
||||
KEEP.utils.globalFontAdjust();
|
||||
|
||||
// comment
|
||||
KEEP.utils.goComment();
|
||||
|
|
|
|||
|
|
@ -53,36 +53,33 @@ KEEP.utils = {
|
|||
});
|
||||
},
|
||||
|
||||
// tools
|
||||
registerToolsButtonClick() {
|
||||
if (!KEEP.theme_config.side_tools.enable) return;
|
||||
|
||||
let isOpen = false;
|
||||
this.toolsMenuButton_dom = document.querySelector('.tools-button');
|
||||
this.toolsWrapperList_dom = document.querySelectorAll('.tools-wrapper li');
|
||||
|
||||
this.toolsMenuButton_dom.addEventListener('click', e => {
|
||||
isOpen = !isOpen;
|
||||
|
||||
const toolsMenuButtonIcon = this.toolsMenuButton_dom.querySelector('i');
|
||||
if (isOpen) {
|
||||
toolsMenuButtonIcon.classList.add('fa-minus');
|
||||
toolsMenuButtonIcon.classList.remove('fa-plus');
|
||||
} else {
|
||||
toolsMenuButtonIcon.classList.add('fa-plus');
|
||||
toolsMenuButtonIcon.classList.remove('fa-minus');
|
||||
}
|
||||
this.toolsWrapperList_dom.forEach((li, index) => {
|
||||
|
||||
if (isOpen) {
|
||||
li.style.transform = `translate3d(0, -${138 * (index + 1)}%, 0)`;
|
||||
li.style.opacity = '1';
|
||||
} else {
|
||||
li.style.opacity = '0';
|
||||
li.style.transform = 'translate3d(0, 0, 0)';
|
||||
}
|
||||
|
||||
// toggle show tools list
|
||||
toggleShowToolsList() {
|
||||
document.querySelector('.tool-toggle-show').addEventListener('click', () => {
|
||||
document.querySelector('.side-tools-list').classList.toggle('show');
|
||||
});
|
||||
},
|
||||
|
||||
// global font adjust
|
||||
defaultFontSize: 0,
|
||||
globalFontAdjust() {
|
||||
const initFontSize = document.defaultView.getComputedStyle(document.body).fontSize;
|
||||
const fs = Number(initFontSize.substring(0, initFontSize.length - 2));
|
||||
|
||||
const setFontSize = (defaultFontSize) => {
|
||||
document.body.style.fontSize = `${fs * (1 + defaultFontSize * 0.06)}px`;
|
||||
}
|
||||
|
||||
document.querySelector('.tool-font-adjust-plus').addEventListener('click', () => {
|
||||
if (this.defaultFontSize >= 5) return;
|
||||
this.defaultFontSize++;
|
||||
setFontSize(this.defaultFontSize);
|
||||
});
|
||||
|
||||
document.querySelector('.tool-font-adjust-minus').addEventListener('click', () => {
|
||||
if (this.defaultFontSize <= 0) return;
|
||||
this.defaultFontSize--;
|
||||
setFontSize(this.defaultFontSize);
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue