添加右下角悬浮操作按钮

2023-09-06 17:51:13 +08:00 · 2023-09-06 17:51:13 +08:00 · 5212fb082e
parent f4dd2232dc
commit 5212fb082e
6 changed files with 442 additions and 73 deletions
--- a/settings.yaml
+++ b/settings.yaml
@ -2605,6 +2605,30 @@ spec:
                  value: true
                - label: 关闭
                  value: false
+        - $formkit: group
+          name: rightside
+          label: 右下角悬浮操作按钮
+          value:
+            rightsideEnable: false
+            readmode: false
+          children:
+            - $formkit: radio
+              name: rightsideEnable
+              id: rightsideEnable
+              options:
+                - label: 打开
+                  value: true
+                - label: 关闭
+                  value: false
+            - $formkit: radio
+              name: readmode
+              if: $get(rightsideEnable).value
+              label: 阅读模式
+              options:
+                - label: 打开
+                  value: true
+                - label: 关闭
+                  value: false
        - $formkit: group
          name: nav_music
          label: 音乐
--- a/templates/assets/css/read-mode.css
+++ b/templates/assets/css/read-mode.css
@ -0,0 +1,218 @@
+.read-mode {
+    --font-color: #4c4948;
+    --readmode-light-color: #fff;
+    --white: #4c4948;
+    --light-grey: #4c4948;
+    --gray: #d6dbdf;
+    --hr-border: #d6dbdf;
+    --hr-before-color: #b9c2c9;
+    --highlight-bg: #f7f7f7;
+    --exit-btn-bg: #c0c0c0;
+    --exit-btn-color: #fff;
+    --exit-btn-hover: #8d8d8d;
+    --pseudo-hover: none
+}
+
+[data-theme=dark] .read-mode {
+    --font-color: rgba(255,255,255,0.7);
+    --readmode-light-color: #0d0d0d;
+    --white: rgba(255,255,255,0.9);
+    --light-grey: rgba(255,255,255,0.7);
+    --gray: rgba(255,255,255,0.7);
+    --hr-border: rgba(255,255,255,0.5);
+    --hr-before-color: rgba(255,255,255,0.7);
+    --highlight-bg: #171717;
+    --exit-btn-bg: #1f1f1f;
+    --exit-btn-color: rgba(255,255,255,0.9);
+    --exit-btn-hover: #525252
+}
+
+.read-mode {
+    background: var(--readmode-light-color)
+}
+
+.read-mode .exit-readmode {
+    position: fixed;
+    top: 30px;
+    right: 30px;
+    z-index: 100;
+    width: 40px;
+    height: 40px;
+    border-radius: 8px;
+    background: var(--exit-btn-bg);
+    color: var(--exit-btn-color);
+    font-size: 16px;
+    -webkit-transition: background .3s;
+    -moz-transition: background .3s;
+    -o-transition: background .3s;
+    -ms-transition: background .3s;
+    transition: background .3s
+}
+
+@media screen and (max-width: 768px) {
+    .read-mode .exit-readmode {
+        top:initial;
+        bottom: 30px
+    }
+}
+
+.read-mode .exit-readmode:hover {
+    background: var(--exit-btn-hover)
+}
+
+.read-mode #aside-content {
+    display: none
+}
+
+.read-mode #page-header.post-bg {
+    background-color: transparent;
+    background-image: none!important
+}
+
+.read-mode #page-header.post-bg:before {
+    opacity: 0;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    filter: alpha(opacity=0)
+}
+
+.read-mode #page-header.post-bg>#post-info {
+    text-align: center
+}
+
+.read-mode #post {
+    margin: 0 auto;
+    background: 0 0;
+    -webkit-box-shadow: none;
+    box-shadow: none
+}
+
+.read-mode #post:hover {
+    -webkit-box-shadow: none;
+    box-shadow: none
+}
+
+.read-mode>canvas {
+    display: none!important
+}
+
+.read-mode #footer,.read-mode #nav,.read-mode #post>:not(#post-info):not(.post-content),.read-mode #rightside,.read-mode #web_bg,.read-mode .highlight-tools,.read-mode .not-top-img,.read-mode .post-outdate-notice {
+    display: none!important
+}
+
+.read-mode #article-container a {
+    color: #99a9bf
+}
+
+.read-mode #article-container .highlight:not(.js-file-line-container),.read-mode #article-container pre {
+    background: var(--highlight-bg)!important
+}
+
+.read-mode #article-container .highlight:not(.js-file-line-container) *,.read-mode #article-container pre * {
+    color: var(--font-color)!important
+}
+
+.read-mode #article-container figure.highlight {
+    border-radius: 0!important;
+    -webkit-box-shadow: none!important;
+    box-shadow: none!important
+}
+
+.read-mode #article-container figure.highlight>:not(.highlight-tools) {
+    display: block!important
+}
+
+.read-mode #article-container figure.highlight .line:before {
+    color: var(--font-color)!important
+}
+
+.read-mode #article-container figure.highlight .hljs {
+    background: var(-highlight-bg)!important
+}
+
+.read-mode #article-container h1,.read-mode #article-container h2,.read-mode #article-container h3,.read-mode #article-container h4,.read-mode #article-container h5,.read-mode #article-container h6 {
+    padding: 0
+}
+
+.read-mode #article-container h1:before,.read-mode #article-container h2:before,.read-mode #article-container h3:before,.read-mode #article-container h4:before,.read-mode #article-container h5:before,.read-mode #article-container h6:before {
+    content: ''
+}
+
+.read-mode #article-container h1:hover,.read-mode #article-container h2:hover,.read-mode #article-container h3:hover,.read-mode #article-container h4:hover,.read-mode #article-container h5:hover,.read-mode #article-container h6:hover {
+    padding: 0
+}
+
+.read-mode #article-container li:hover:before,.read-mode #article-container ol:hover:before,.read-mode #article-container ul:hover:before {
+    -webkit-transform: none!important;
+    -moz-transform: none!important;
+    -o-transform: none!important;
+    -ms-transform: none!important;
+    transform: none!important
+}
+
+.read-mode #article-container li:before,.read-mode #article-container ol:before {
+    background: 0 0!important;
+    color: var(--font-color)!important
+}
+
+.read-mode #article-container ul>li:before {
+    border-color: var(--gray)!important
+}
+
+.read-mode #article-container .tabs {
+    border: 2px solid var(--tab-border-color)
+}
+
+.read-mode #article-container .tabs>.nav-tabs {
+    background: 0 0
+}
+
+.read-mode #article-container .tabs>.nav-tabs>.tab {
+    border-top: none!important
+}
+
+.read-mode #article-container .tabs>.tab-contents .tab-item-content.active {
+    -webkit-animation: none;
+    -moz-animation: none;
+    -o-animation: none;
+    -ms-animation: none;
+    animation: none
+}
+
+.read-mode #article-container code {
+    color: var(--font-color)
+}
+
+.read-mode #article-container blockquote {
+    border-color: var(--gray);
+    background-color: var(--readmode-light-color)
+}
+
+.read-mode #article-container kbd {
+    border: 1px solid var(--gray);
+    background-color: transparent;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    color: var(--font-color)
+}
+
+.read-mode #article-container .hide-toggle {
+    border: 1px solid var(--gray)!important
+}
+
+.read-mode #article-container .btn-anzhiyu,.read-mode #article-container .hide-button,.read-mode #article-container .hl-label {
+    border: 1px solid var(--gray)!important;
+    background: var(--readmode-light-color)!important;
+    color: var(--font-color)!important
+}
+
+.read-mode #article-container .note {
+    border: 2px solid var(--gray);
+    border-left-color: var(--gray)!important;
+    filter: none;
+    background-color: var(--readmode-light-color)!important;
+    color: var(--font-color)
+}
+
+.read-mode #article-container .note .note-icon,.read-mode #article-container .note:before {
+    color: var(--font-color)
+}
--- a/templates/assets/js/main.js
+++ b/templates/assets/js/main.js
@ -170,13 +170,93 @@ document.addEventListener('DOMContentLoaded', function () {
        }
    }

+    /**
+     * Rightside
+     */
+    const rightSideFn = {
+        switchReadMode: () => { // read-mode
+            const $body = document.body
+            $body.classList.add('read-mode')
+            const newEle = document.createElement('button')
+            newEle.type = 'button'
+            newEle.className = 'fas fa-sign-out-alt exit-readmode'
+            $body.appendChild(newEle)
+
+            function clickFn () {
+                $body.classList.remove('read-mode')
+                newEle.remove()
+                newEle.removeEventListener('click', clickFn)
+            }
+
+            newEle.addEventListener('click', clickFn)
+        },
+        switchDarkMode: () => { // Switch Between Light And Dark Mode
+            const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
+            if (nowMode === 'light') {
+                activateDarkMode()
+                saveToLocal.set('theme', 'dark', 2);
+                GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night,false,2000);
+            } else {
+                activateLightMode();
+                saveToLocal.set('theme', 'light', 2);
+                GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day,false,2000);
+            }
+            // handle some cases
+            typeof utterancesTheme === 'function' && utterancesTheme()
+            typeof FB === 'object' && window.loadFBComment()
+            window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)
+        },
+        showOrHideBtn: () => { // rightside 點擊設置 按鈕 展開
+            document.getElementById('rightside-config-hide').classList.toggle('show')
+        },
+        scrollToTop: () => { // Back to top
+            btf.scrollToDest(0, 500)
+        },
+        hideAsideBtn: () => { // Hide aside
+            const $htmlDom = document.documentElement.classList
+            $htmlDom.contains('hide-aside')
+                ? saveToLocal.set('aside-status', 'show', 2)
+                : saveToLocal.set('aside-status', 'hide', 2)
+            $htmlDom.toggle('hide-aside')
+        }
+    }
+
+    document.getElementById('rightside').addEventListener('click', function (e) {
+        const $target = e.target.id || e.target.parentNode.id
+        switch ($target) {
+            case 'go-up':
+                rightSideFn.scrollToTop()
+                break
+            case 'rightside-config':
+                rightSideFn.showOrHideBtn()
+                break
+            case 'readmode':
+                rightSideFn.switchReadMode()
+                break
+            case 'darkmode':
+                rightSideFn.switchDarkMode()
+                break
+            case 'hide-aside-btn':
+                rightSideFn.hideAsideBtn()
+                break
+            default:
+                break
+        }
+    })
+
    /**
     * 滾動處理
     */
    const scrollFn = function () {
+        const $postComment = document.getElementById('post-comment')
        const $rightside = document.getElementById('rightside')
        const innerHeight = window.innerHeight + 0
-        // console.log("滚动处理运行");
+
+        if ($postComment) {
+            $('#to_comment').attr('style', 'display: block');
+        } else {
+            $('#to_comment').attr('style', 'display: none');
+        }

        // 當滾動條小于 0 的時候
        if (document.body.scrollHeight <= innerHeight) {
--- a/templates/assets/zhheo/zhheoblog.css
+++ b/templates/assets/zhheo/zhheoblog.css
@ -3672,48 +3672,6 @@ ul {
    color: rgb(133, 133, 133);
 }

-#rightside #rightside-config-hide {
-    transition: transform 0.4s ease 0s;
-    transform: translate(35px, 0px);
-}
-
-#rightside #rightside-config-hide.show {
-    transform: translate(0px, 0px) !important;
-}
-
-#rightside > div > a,
-#rightside > div > button {
-    display: block;
-    margin-bottom: 2px;
-    width: 30px;
-    height: 30px;
-    background-color: var(--btn-bg);
-    color: var(--btn-color);
-    text-align: center;
-    font-size: 16px;
-}
-
-#rightside > div > a:hover,
-#rightside > div > button:hover {
-    background-color: var(--btn-hover-color);
-}
-
-#rightside #mobile-toc-button {
-    display: none;
-}
-
-@media screen and (max-width: 900px) {
-    #rightside #mobile-toc-button {
-        display: block;
-    }
-}
-
-@media screen and (max-width: 900px) {
-    #rightside #hide-aside-btn {
-        display: none;
-    }
-}
-
 #sidebar #menu-mask {
    position: fixed;
    z-index: 1001;
@ -6481,31 +6439,105 @@ a.console_switchbutton {

 /* 右下角设置按钮间距 */
 #rightside {
-    display: none;
-    padding-right: 8px;
    position: fixed;
-    right: -38px;
-    bottom: 40px;
+    right: -48px;
+    bottom: 100px;
    z-index: 100;
    opacity: 0;
-    transition: all 0.5s ease 0s;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    filter: alpha(opacity=0);
+    -webkit-transition: all .5s;
+    -moz-transition: all .5s;
+    -o-transition: all .5s;
+    -ms-transition: all .5s;
+    transition: all .5s
 }

-#rightside > div > button,
-#rightside > div > a {
-    margin-bottom: 8px;
-    transition: 0.3s;
+@media screen and (max-width: 768px) {
+    #rightside #switch-commentBarrage {
+        display:none
+    }
 }

-#rightside > div > button,
-#rightside > div > a:hover {
-    transition: 0.3s;
-}

 #rightside #rightside-config-hide {
-    transform: translate(42px, 0);
+    height: 0;
+    opacity: 0;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    filter: alpha(opacity=0);
+    -webkit-transition: -webkit-transform .4s;
+    -moz-transition: -moz-transform .4s;
+    -o-transition: -o-transform .4s;
+    -ms-transition: -ms-transform .4s;
+    transition: transform .4s;
+    -webkit-transform: translate(45px,0);
+    -moz-transform: translate(45px,0);
+    -o-transform: translate(45px,0);
+    -ms-transform: translate(45px,0);
+    transform: translate(45px,0)
 }

+#rightside #rightside-config-hide.show {
+    height: auto;
+    opacity: 1;
+    -ms-filter: none;
+    filter: none;
+    -webkit-transform: translate(0,0);
+    -moz-transform: translate(0,0);
+    -o-transform: translate(0,0);
+    -ms-transform: translate(0,0);
+    transform: translate(0,0)
+}
+
+#rightside #rightside-config-hide.status {
+    height: auto;
+    opacity: 1;
+    -ms-filter: none;
+    filter: none
+}
+
+#rightside>div>a,#rightside>div>button {
+    display: block;
+    margin-bottom: 5px;
+    width: 35px;
+    height: 35px;
+    border-radius: 5px;
+    background-color: var(--btn-bg);
+    color: var(--btn-color);
+    text-align: center;
+    font-size: 16px;
+    line-height: 35px
+}
+
+#rightside>div>a:hover,#rightside>div>button:hover {
+    background-color: var(--btn-hover-color)
+}
+
+#rightside #mobile-toc-button {
+    display: none
+}
+
+@media screen and (max-width: 900px) {
+    #rightside #mobile-toc-button {
+        display:block
+    }
+}
+
+@media screen and (max-width: 900px) {
+    #rightside #hide-aside-btn {
+        display:none
+    }
+}
+
+.read-mode #rightside{
+    display: none!important
+}
+
+#rightside>div>button {
+    border-radius: 5px
+}
+
+
 /* footer背景色 */
 #footer {
    background: linear-gradient(180deg, var(--heo-card-bg-none) 0%, var(--heo-card-bg) 25%);
@ -9216,10 +9248,7 @@ span.recent-post-top-text {
        right: 0;
    }

-    /* 右下角设置按钮 */
-    #rightside {
-        display: none;
-    }
+

    /* 背景 */
    #web_bg {
--- a/templates/modules/common/rightside.html
+++ b/templates/modules/common/rightside.html
@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<th:block th:fragment="rightside">
+    <div id="rightside">
+        <div id="rightside-config-hide">
+            <button th:if="${htmlType == 'post' && theme.config.tool.rightside.readmode}" id="readmode" type="button" title="阅读模式"><i class="haofont hao-icon-book-open"></i></button>
+            <!-- <button id="translateLink" type="button" title="简繁转换">繁</button> -->
+            <button id="darkmode" type="button" title="浅色和深色模式转换"><i class="haofont hao-icon-circle-half-stroke"></i></button>
+            <button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="haofont hao-icon-arrows-left-right"></i></button>
+        </div>
+        <div id="rightside-config-show">
+            <button id="rightside-config" type="button" title="设置"><i class="haofont hao-icon-gear"></i></button>
+            <a id="to_comment" href="javascript:heo.scrollTo('post-comment')" title="直达评论" ><i class="haofont hao-icon-comments"></i></a>
+            <a id="switch-commentBarrage" href="javascript:heo.switchCommentBarrage();" rel="external nofollow noreferrer" title="开关弹幕" draggable="false" data-pjax-state="external"><i class="haofont hao-icon-danmu"></i></a>
+            <button id="go-up" type="button" title="回到顶部"><i class="haofont hao-icon-arrow-up"></i></button>
+        </div>
+    </div>
+    <style th:if="${!theme.config.tool.rightside.rightsideEnable}">
+        #rightside {
+            display: none;
+        }
+    </style>
+
+    <link th:if="${htmlType == 'post' && theme.config.tool.rightside.readmode && theme.config.tool.rightside.rightsideEnable}"
+          rel="stylesheet" th:href="${assets_link + '/css/read-mode.css' + theme_version}">
+</th:block>
+</html>
--- a/templates/modules/layouts/layout.html
+++ b/templates/modules/layouts/layout.html
@ -38,18 +38,9 @@
 <!-- 内容 -->
 <th:block th:replace="${content}"></th:block>

-<!-- todo 暂时没显示，是右下角悬浮操作按钮 -->
-<div id="rightside">
-    <div id="rightside-config-hide">
-        <button id="translateLink" title="简繁转换" type="button">简</button>
-        <button id="darkmode" title="浅色和深色模式转换" type="button"><i class="fas fa-adjust"></i></button>
-        <button id="hide-aside-btn" title="单栏和双栏切换" type="button"><i class="fas fa-arrows-alt-h"></i></button>
-    </div>
-    <div id="rightside-config-show">
-        <button id="rightside_config" title="设置" type="button"><i class="fas fa-cog fa-spin"></i></button>
-        <button id="go-up" title="回到顶部" type="button"><i class="fas fa-arrow-up"></i></button>
-    </div>
-</div>
+
+<!-- todo 右下角悬浮操作按钮 -->
+<th:block th:replace="~{modules/common/rightside :: rightside}"></th:block>


 <div th:replace="~{modules/right-menu :: right-menu}"></div>