diff options
author | Yue Yang <g1enyy0ung@gmail.com> | 2021-05-22 20:17:20 +0300 |
---|---|---|
committer | Yue Yang <g1enyy0ung@gmail.com> | 2021-05-22 20:17:20 +0300 |
commit | 62e245221ec2b1d0fc914b8ed46446e69effd1d5 (patch) | |
tree | 4c76e752725c62de81bf53fd775182bbe76f7391 | |
parent | 9b85c94d33387d66c758d0cc2fc48f8d0ee035e6 (diff) |
Add scrollToTop to single
-rw-r--r-- | layouts/_default/single.html | 2 | ||||
-rw-r--r-- | src/js/main.js | 15 | ||||
-rw-r--r-- | src/js/scrollToTop.js | 18 | ||||
-rw-r--r-- | src/js/theme.js | 50 | ||||
-rw-r--r-- | src/sass/site.scss | 13 | ||||
-rw-r--r-- | static/css/site.css | 2 | ||||
-rw-r--r-- | static/js/main.js | 2 | ||||
-rw-r--r-- | static/js/scrollToTop.js | 1 | ||||
-rw-r--r-- | static/js/theme.js | 2 |
9 files changed, 57 insertions, 48 deletions
diff --git a/layouts/_default/single.html b/layouts/_default/single.html index a2c5096..399b823 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -169,6 +169,8 @@ {{ partial "luxon.html" . }} {{ end }} +<script src="{{ "/js/scrollToTop.js" | relURL }}"></script> + {{ if .Site.Params.highlightjs }} <script src="{{ if .Site.Params.highlightjsCDN }}{{ .Site.Params.highlightjsCDN }}{{ else }}{{ "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js" }}{{ end}}"></script> diff --git a/src/js/main.js b/src/js/main.js index 9f502d8..974693f 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -9,12 +9,15 @@ $(document).ready(() => { : 'os-theme-dark' } - $('body').overlayScrollbars({ - className: setClassName(), - scrollbars: { - autoHide: 'scroll', - }, - }) + window.overlayScrollbarsInstance = $('body') + .overlayScrollbars({ + className: setClassName(), + scrollbars: { + autoHide: 'scroll', + clickScrolling: true, + }, + }) + .overlayScrollbars() initFilp() }) diff --git a/src/js/scrollToTop.js b/src/js/scrollToTop.js new file mode 100644 index 0000000..674b354 --- /dev/null +++ b/src/js/scrollToTop.js @@ -0,0 +1,18 @@ +setTimeout(function () { + const scrollToTop = $(` + <i class="big arrow circle up link icon dream-scroll-to-top" style="display: none;"></i> + `) + + const osInstance = window.overlayScrollbarsInstance + osInstance.options('callbacks.onScrollStop', function () { + const y = osInstance.scroll().position.y + + y > 0 ? scrollToTop.show(500) : scrollToTop.hide(500) + }) + + scrollToTop.click(function () { + osInstance.scroll(0, 500) + }) + + scrollToTop.insertAfter('.os-content') +}, 1000) diff --git a/src/js/theme.js b/src/js/theme.js index 906a4a7..5867e77 100644 --- a/src/js/theme.js +++ b/src/js/theme.js @@ -42,11 +42,7 @@ const darkHeaderElements = () => { } const darkCards = () => { - const cards = $('.dream-card') - - if (cards.length) { - cards.toggleClass(dark) - } + $('.dream-card').toggleClass(dark) } const darkSingle = () => { @@ -66,52 +62,34 @@ const darkSingle = () => { $('.toc').toggleClass(dark) $('.actions').toggleClass(dark) } + + $('.dream-scroll-to-top').toggleClass(dark) } const darkTables = () => { - const tables = $('.dream-single table') - - if (tables.length) { - tables.map(function () { - if (this.style.color) { - this.style.color = '' - } else { - this.style.color = 'black' - } - }) - } + $('.dream-single table').map(function () { + if (this.style.color) { + this.style.color = '' + } else { + this.style.color = 'black' + } + }) } const darkPostsSection = () => { - const segment = $('.ui.segment.dream-posts-section') - - if (segment.length) { - segment.toggleClass(dark) - } + $('.ui.segment.dream-posts-section').toggleClass(dark) } const darkTagsSection = () => { - const segment = $('.ui.segment.dream-tags-section') - - if (segment.length) { - segment.toggleClass(dark) - } + $('.ui.segment.dream-tags-section').toggleClass(dark) } const darkCategoriesSection = () => { - const segment = $('.ui.segment.dream-categories-section') - - if (segment.length) { - segment.toggleClass(dark) - } + $('.ui.segment.dream-categories-section').toggleClass(dark) } const darkBack = () => { - const segments = $('.dream-back .ui.segment') - - if (segments.length) { - segments.toggleClass(dark) - } + $('.dream-back .ui.segment').toggleClass(dark) } const darkFooter = () => { diff --git a/src/sass/site.scss b/src/sass/site.scss index 014efdd..15d383b 100644 --- a/src/sass/site.scss +++ b/src/sass/site.scss @@ -4,9 +4,10 @@ body { background-position: center; background-size: cover; - .os-host > .os-padding > .os-viewport > .os-content { - height: auto !important; - } + // https://github.com/KingSora/OverlayScrollbars/issues/89 + // .os-host > .os-padding > .os-viewport > .os-content { + // height: auto !important; + // } } .flip-container { @@ -310,6 +311,12 @@ body { } } +.dream-scroll-to-top { + position: fixed; + bottom: 1rem; + right: 1rem; +} + .utterances-comments { .utterances { max-width: unset; diff --git a/static/css/site.css b/static/css/site.css index 9e45c1b..53af58f 100644 --- a/static/css/site.css +++ b/static/css/site.css @@ -1 +1 @@ -body{background-position:center;background-size:cover}body .os-host>.os-padding>.os-viewport>.os-content{height:auto !important}.flip-container{width:100vw;height:100vh;-webkit-perspective:1000px;-moz-perspective:1000px;perspective:1000px}.flip-container.flip-it .flipper{transform:rotateY(180deg)}.flip-container .flipper{position:relative;width:100%;height:100%;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;transition:all .75s ease}.flip-container .front,.flip-container .back{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}.flip-container .front{transform:rotateY(0deg)}.flip-container .back{transform:rotateY(180deg)}.dream-max-width{max-width:1664px;margin:0 auto}.inverted a{color:#eee !important}.inverted a:hover{color:#fff !important}.dream-404-container{position:fixed;top:calc(50% - 54px);left:50%;width:100%;transform:translate3d(-50%, -50%, 0)}.dream-404-container .ui.header{margin-bottom:2rem}.dream-404-container .ui.header .sub.header{margin-top:.5rem}.ui.menu.dream-menu{margin-left:0;margin-right:0}.ui.menu.dream-menu.dream-socials{display:flex;flex-wrap:wrap}.ui.menu.dream-menu.dream-socials .item:first-child{padding-left:.5rem}.ui.menu.dream-menu .item{padding:.5rem}.ui.menu.dream-menu .item:first-child{padding-left:1rem}.ui.menu.dream-menu .item i{margin:0}.ui.menu.dream-menu .item a{color:rgba(0,0,0,.87)}.dream-header{display:flex;justify-content:center}.dream-header>.content{width:512px;max-width:512px;margin-left:2rem}.dream-header .ui.horizontal.list{line-height:1rem}.dream-header .tags-with-dropdown .title{display:flex}.dream-header .tags-with-dropdown .title,.dream-header .tags-with-dropdown .content{padding:0 !important}.dream-header .tags-with-dropdown .ui.list{margin-top:1rem;margin-right:.375rem}.dream-header .tags-with-dropdown .dropdown-icon{position:relative;top:2px;right:1px;padding:0 !important;text-decoration:none !important;transform-origin:center;transition:transform .5s ease !important}.dream-header .dream-tags .ui.label{margin-top:1rem}@media screen and (max-width: 768px){.dream-header{flex-direction:column;align-items:center}.dream-header>.content{width:100%;max-width:100%;margin-top:2rem;margin-left:unset;text-align:center}.dream-header .tags-with-dropdown .title{justify-content:center}}.dream-grid{margin-left:0 !important;margin-right:0 !important}.ui.card.dream-card>.image{border-top-left-radius:inherit !important;border-top-right-radius:inherit !important}.ui.card.dream-card.inverted .content .header>a{color:rgba(255,255,255,.87) !important}.ui.card.dream-card.inverted .content .meta{color:rgba(255,255,255,.6)}.ui.card.dream-card.inverted .content .description{color:rgba(255,255,255,.87)}.ui.card.dream-card.inverted .extra{color:rgba(255,255,255,.6)}.ui.card.dream-card .content .header{margin-bottom:0}.ui.card.dream-card .content .header a{color:rgba(0,0,0,.87) !important}.ui.card.dream-card .content .description{margin-top:1rem;color:rgba(0,0,0,.87);overflow-wrap:break-word}.ui.card.dream-card .content .description img{max-width:100%}.ui.card.dream-card .content .description iframe[id^=twitter-widget-]{width:100% !important}.ui.card.dream-card .extra{position:relative;display:flex;align-items:center;border-top:none !important}.ui.card.dream-card .extra .author{display:flex;align-items:center}.ui.card.dream-card .extra .reading-time{position:absolute;right:1em}.dream-single h1.ui.large.header{margin-top:.5rem;margin-bottom:1.5rem}.dream-single h1.ui.large.header .sub.header{display:flex;justify-content:space-between}@media screen and (max-width: 1024px){.dream-single h1.ui.large.header .sub.header{flex-direction:column;justify-content:unset}}.dream-single .cover{margin-bottom:1.5rem}.dream-single .ui.inverted.segment blockquote{color:rgba(255,255,255,.6)}.dream-share a{text-decoration:none !important}@media screen and (max-width: 1024px){.dream-share{margin-top:.5rem}}.dream-single-aside{position:sticky !important;top:0;height:100%}@media screen and (max-width: 768px){.dream-single-aside{display:none !important}}.toc ul{padding-left:2rem}.toc li{margin:.5rem 0}.utterances-comments .utterances{max-width:unset}#dream-search{position:fixed;top:5%;left:50%;width:30%;display:none;transform:translateX(-50%)}@media screen and (max-width: 768px){#dream-search{width:90%}}#dream-search .ui.input{width:calc(100% - 2rem)}#dream-search.inverted{border:1px solid #555}#dream-search.inverted input{color:rgba(255,255,255,.87)}#dream-search.inverted .results{background:#1b1c1d;border:none}#dream-search.inverted .results .result:hover{background:#202020}#dream-search.inverted .results .title{color:rgba(255,255,255,.87) !important}#dream-search.inverted .results .description{color:rgba(255,255,255,.6) !important}
\ No newline at end of file +body{background-position:center;background-size:cover}.flip-container{width:100vw;height:100vh;-webkit-perspective:1000px;-moz-perspective:1000px;perspective:1000px}.flip-container.flip-it .flipper{transform:rotateY(180deg)}.flip-container .flipper{position:relative;width:100%;height:100%;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;transition:all .75s ease}.flip-container .front,.flip-container .back{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}.flip-container .front{transform:rotateY(0deg)}.flip-container .back{transform:rotateY(180deg)}.dream-max-width{max-width:1664px;margin:0 auto}.inverted a{color:#eee !important}.inverted a:hover{color:#fff !important}.dream-404-container{position:fixed;top:calc(50% - 54px);left:50%;width:100%;transform:translate3d(-50%, -50%, 0)}.dream-404-container .ui.header{margin-bottom:2rem}.dream-404-container .ui.header .sub.header{margin-top:.5rem}.ui.menu.dream-menu{margin-left:0;margin-right:0}.ui.menu.dream-menu.dream-socials{display:flex;flex-wrap:wrap}.ui.menu.dream-menu.dream-socials .item:first-child{padding-left:.5rem}.ui.menu.dream-menu .item{padding:.5rem}.ui.menu.dream-menu .item:first-child{padding-left:1rem}.ui.menu.dream-menu .item i{margin:0}.ui.menu.dream-menu .item a{color:rgba(0,0,0,.87)}.dream-header{display:flex;justify-content:center}.dream-header>.content{width:512px;max-width:512px;margin-left:2rem}.dream-header .ui.horizontal.list{line-height:1rem}.dream-header .tags-with-dropdown .title{display:flex}.dream-header .tags-with-dropdown .title,.dream-header .tags-with-dropdown .content{padding:0 !important}.dream-header .tags-with-dropdown .ui.list{margin-top:1rem;margin-right:.375rem}.dream-header .tags-with-dropdown .dropdown-icon{position:relative;top:2px;right:1px;padding:0 !important;text-decoration:none !important;transform-origin:center;transition:transform .5s ease !important}.dream-header .dream-tags .ui.label{margin-top:1rem}@media screen and (max-width: 768px){.dream-header{flex-direction:column;align-items:center}.dream-header>.content{width:100%;max-width:100%;margin-top:2rem;margin-left:unset;text-align:center}.dream-header .tags-with-dropdown .title{justify-content:center}}.dream-grid{margin-left:0 !important;margin-right:0 !important}.ui.card.dream-card>.image{border-top-left-radius:inherit !important;border-top-right-radius:inherit !important}.ui.card.dream-card.inverted .content .header>a{color:rgba(255,255,255,.87) !important}.ui.card.dream-card.inverted .content .meta{color:rgba(255,255,255,.6)}.ui.card.dream-card.inverted .content .description{color:rgba(255,255,255,.87)}.ui.card.dream-card.inverted .extra{color:rgba(255,255,255,.6)}.ui.card.dream-card .content .header{margin-bottom:0}.ui.card.dream-card .content .header a{color:rgba(0,0,0,.87) !important}.ui.card.dream-card .content .description{margin-top:1rem;color:rgba(0,0,0,.87);overflow-wrap:break-word}.ui.card.dream-card .content .description img{max-width:100%}.ui.card.dream-card .content .description iframe[id^=twitter-widget-]{width:100% !important}.ui.card.dream-card .extra{position:relative;display:flex;align-items:center;border-top:none !important}.ui.card.dream-card .extra .author{display:flex;align-items:center}.ui.card.dream-card .extra .reading-time{position:absolute;right:1em}.dream-single h1.ui.large.header{margin-top:.5rem;margin-bottom:1.5rem}.dream-single h1.ui.large.header .sub.header{display:flex;justify-content:space-between}@media screen and (max-width: 1024px){.dream-single h1.ui.large.header .sub.header{flex-direction:column;justify-content:unset}}.dream-single .cover{margin-bottom:1.5rem}.dream-single .ui.inverted.segment blockquote{color:rgba(255,255,255,.6)}.dream-share a{text-decoration:none !important}@media screen and (max-width: 1024px){.dream-share{margin-top:.5rem}}.dream-single-aside{position:sticky !important;top:0;height:100%}@media screen and (max-width: 768px){.dream-single-aside{display:none !important}}.toc ul{padding-left:2rem}.toc li{margin:.5rem 0}.dream-scroll-to-top{position:fixed;bottom:1rem;right:1rem}.utterances-comments .utterances{max-width:unset}#dream-search{position:fixed;top:5%;left:50%;width:30%;display:none;transform:translateX(-50%)}@media screen and (max-width: 768px){#dream-search{width:90%}}#dream-search .ui.input{width:calc(100% - 2rem)}#dream-search.inverted{border:1px solid #555}#dream-search.inverted input{color:rgba(255,255,255,.87)}#dream-search.inverted .results{background:#1b1c1d;border:none}#dream-search.inverted .results .result:hover{background:#202020}#dream-search.inverted .results .title{color:rgba(255,255,255,.87) !important}#dream-search.inverted .results .description{color:rgba(255,255,255,.6) !important}
\ No newline at end of file diff --git a/static/js/main.js b/static/js/main.js index 959ac3c..929e890 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -1 +1 @@ -"use strict";function initFilp(){$(".dream-flip-toggle").click(function(){$(".flip-container").toggleClass("flip-it")})}$(document).ready(function(){$("body").overlayScrollbars({className:(window.backgroundDark||window.backgroundImageDark?"y"===localStore.getItem("hugo-theme-dream-is-dark"):window.darkNav)?"os-theme-light":"os-theme-dark",scrollbars:{autoHide:"scroll"}}),initFilp()});
\ No newline at end of file +"use strict";function initFilp(){$(".dream-flip-toggle").click(function(){$(".flip-container").toggleClass("flip-it")})}$(document).ready(function(){window.overlayScrollbarsInstance=$("body").overlayScrollbars({className:(window.backgroundDark||window.backgroundImageDark?"y"===localStore.getItem("hugo-theme-dream-is-dark"):window.darkNav)?"os-theme-light":"os-theme-dark",scrollbars:{autoHide:"scroll",clickScrolling:!0}}).overlayScrollbars(),initFilp()});
\ No newline at end of file diff --git a/static/js/scrollToTop.js b/static/js/scrollToTop.js new file mode 100644 index 0000000..3ee368a --- /dev/null +++ b/static/js/scrollToTop.js @@ -0,0 +1 @@ +"use strict";setTimeout(function(){var o=$('\n <i class="big arrow circle up link icon dream-scroll-to-top" style="display: none;"></i>\n '),n=window.overlayScrollbarsInstance;n.options("callbacks.onScrollStop",function(){0<n.scroll().position.y?o.show(500):o.hide(500)}),o.click(function(){n.scroll(0,500)}),o.insertAfter(".os-content")},1e3);
\ No newline at end of file diff --git a/static/js/theme.js b/static/js/theme.js index 083981d..cdfff8e 100644 --- a/static/js/theme.js +++ b/static/js/theme.js @@ -1 +1 @@ -"use strict";var dark="inverted",localStore=window.localStorage,isDark=localStore.getItem("hugo-theme-dream-is-dark");isDark=isDark||(window.defaultDark?"y":isDark);var dark404=function(){if((window.backgroundDark||window.backgroundImageDark)&&$(".dream-404-container").length){$(".dream-404-container h1").toggleClass(dark);var e=$(".dream-404-container button");e.toggleClass(dark),e.toggleClass("secondary")}},darkBackground=function(){(window.backgroundDark||window.backgroundImageDark)&&$("body").toggleClass("default").toggleClass("dark")},darkNavMenu=function(){(window.backgroundDark||window.backgroundImageDark)&&$("nav.dream-menu").toggleClass(dark)},darkHeaderElements=function(){if($(".dream-header").length){var e=$(".dream-header .ui.header"),a=$(".dream-header .ui.list");e.toggleClass(dark),a.toggleClass(dark)}},darkCards=function(){var e=$(".dream-card");e.length&&e.toggleClass(dark)},darkSingle=function(){var e=$(".dream-single .ui.segment");e.length&&(e.toggleClass(dark),$(".dream-single h1.ui.header").toggleClass(dark),setThemeForUtterances(),"function"==typeof setHighlightTheme&&setHighlightTheme(),$(".toc").toggleClass(dark),$(".actions").toggleClass(dark))},darkTables=function(){var e=$(".dream-single table");e.length&&e.map(function(){this.style.color?this.style.color="":this.style.color="black"})},darkPostsSection=function(){var e=$(".ui.segment.dream-posts-section");e.length&&e.toggleClass(dark)},darkTagsSection=function(){var e=$(".ui.segment.dream-tags-section");e.length&&e.toggleClass(dark)},darkCategoriesSection=function(){var e=$(".ui.segment.dream-categories-section");e.length&&e.toggleClass(dark)},darkBack=function(){var e=$(".dream-back .ui.segment");e.length&&e.toggleClass(dark)},darkFooter=function(){$("footer.ui.segment").toggleClass(dark)},darkSearch=function(){$("#dream-search").toggleClass(dark)};function toggleDark(){dark404(),darkBackground(),darkNavMenu(),darkHeaderElements(),darkCards(),darkSingle(),darkTables(),darkPostsSection(),darkTagsSection(),darkCategoriesSection(),darkBack(),darkFooter(),darkSearch()}var setThemeForUtterances=function(){var e=document.querySelector("iframe.utterances-frame");e&&e.contentWindow.postMessage({type:"set-theme",theme:"y"===isDark?"github-dark":"github-light"},"https://utteranc.es")};window.addEventListener("message",function(e){"https://utteranc.es"===e.origin&&setThemeForUtterances()});var iconSwitchs=$(".theme-switch");function themeSwitch(){isDark="y"===isDark?(iconSwitchs.removeClass("moon"),iconSwitchs.addClass("sun"),localStore.setItem("hugo-theme-dream-is-dark","n"),"n"):(iconSwitchs.removeClass("sun"),iconSwitchs.addClass("moon"),localStore.setItem("hugo-theme-dream-is-dark","y"),"y"),toggleDark()}"y"===isDark?(iconSwitchs.addClass("moon"),toggleDark()):iconSwitchs.addClass("sun");
\ No newline at end of file +"use strict";var dark="inverted",localStore=window.localStorage,isDark=localStore.getItem("hugo-theme-dream-is-dark");isDark=isDark||(window.defaultDark?"y":isDark);var dark404=function(){if((window.backgroundDark||window.backgroundImageDark)&&$(".dream-404-container").length){$(".dream-404-container h1").toggleClass(dark);var e=$(".dream-404-container button");e.toggleClass(dark),e.toggleClass("secondary")}},darkBackground=function(){(window.backgroundDark||window.backgroundImageDark)&&$("body").toggleClass("default").toggleClass("dark")},darkNavMenu=function(){(window.backgroundDark||window.backgroundImageDark)&&$("nav.dream-menu").toggleClass(dark)},darkHeaderElements=function(){if($(".dream-header").length){var e=$(".dream-header .ui.header"),a=$(".dream-header .ui.list");e.toggleClass(dark),a.toggleClass(dark)}},darkCards=function(){$(".dream-card").toggleClass(dark)},darkSingle=function(){var e=$(".dream-single .ui.segment");e.length&&(e.toggleClass(dark),$(".dream-single h1.ui.header").toggleClass(dark),setThemeForUtterances(),"function"==typeof setHighlightTheme&&setHighlightTheme(),$(".toc").toggleClass(dark),$(".actions").toggleClass(dark));$(".dream-scroll-to-top").toggleClass(dark)},darkTables=function(){$(".dream-single table").map(function(){this.style.color?this.style.color="":this.style.color="black"})},darkPostsSection=function(){$(".ui.segment.dream-posts-section").toggleClass(dark)},darkTagsSection=function(){$(".ui.segment.dream-tags-section").toggleClass(dark)},darkCategoriesSection=function(){$(".ui.segment.dream-categories-section").toggleClass(dark)},darkBack=function(){$(".dream-back .ui.segment").toggleClass(dark)},darkFooter=function(){$("footer.ui.segment").toggleClass(dark)},darkSearch=function(){$("#dream-search").toggleClass(dark)};function toggleDark(){dark404(),darkBackground(),darkNavMenu(),darkHeaderElements(),darkCards(),darkSingle(),darkTables(),darkPostsSection(),darkTagsSection(),darkCategoriesSection(),darkBack(),darkFooter(),darkSearch()}var setThemeForUtterances=function(){var e=document.querySelector("iframe.utterances-frame");e&&e.contentWindow.postMessage({type:"set-theme",theme:"y"===isDark?"github-dark":"github-light"},"https://utteranc.es")};window.addEventListener("message",function(e){"https://utteranc.es"===e.origin&&setThemeForUtterances()});var iconSwitchs=$(".theme-switch");function themeSwitch(){isDark="y"===isDark?(iconSwitchs.removeClass("moon"),iconSwitchs.addClass("sun"),localStore.setItem("hugo-theme-dream-is-dark","n"),"n"):(iconSwitchs.removeClass("sun"),iconSwitchs.addClass("moon"),localStore.setItem("hugo-theme-dream-is-dark","y"),"y"),toggleDark()}"y"===isDark?(iconSwitchs.addClass("moon"),toggleDark()):iconSwitchs.addClass("sun");
\ No newline at end of file |