From 499d2c324e907590cd14b1b9ec33121bc2201799 Mon Sep 17 00:00:00 2001 From: Spirit Date: Fri, 20 Mar 2020 11:02:52 +0800 Subject: [PATCH 1/6] refactor: first screen the Above The Fold of mobile not depend wp_is_mobile anymore, and window height is set `vh` to fit issue-199 --- functions.php | 6 +++--- inc/swicher.php | 1 + js/sakura-app.js | 16 +++------------- 3 files changed, 7 insertions(+), 16 deletions(-) diff --git a/functions.php b/functions.php index 1e9dd90..450e8ec 100644 --- a/functions.php +++ b/functions.php @@ -199,9 +199,9 @@ function sakura_scripts() $movies = akina_option('focus_amv') ? array('url' => akina_option('amv_url'), 'name' => akina_option('amv_title'), 'live' => $mv_live) : 'close'; $auto_height = akina_option('focus_height') ? 'fixed' : 'auto'; $code_lamp = 'close'; - if (wp_is_mobile()) { - $auto_height = 'fixed'; - } + // if (wp_is_mobile()) { + // $auto_height = 'fixed'; + // } //拦截移动端 version_compare($GLOBALS['wp_version'], '5.1', '>=') ? $reply_link_version = 'new' : $reply_link_version = 'old'; wp_localize_script('app', 'Poi', array( diff --git a/inc/swicher.php b/inc/swicher.php index 7f0ca16..ad8c560 100644 --- a/inc/swicher.php +++ b/inc/swicher.php @@ -73,6 +73,7 @@ mashiro_option.float_player_on = true; mashiro_option.cover_api = ""; +mashiro_option.windowheight = /Mobile|Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent) ? 'fixed' : 'auto'; /*End of Initial Variables*/ 0) { var _height = $(window).height() + "px"; $('#centerbg').css({ - 'height': _height + 'height': '100vh' }); $('#bgvideo').css({ - 'min-height': _height + 'min-height': '100vh' }); - window.resizeFlag = null; - $(window).resize(function () { - //直接resize性能爆炸，改成延时 - if (resizeFlag = null) { - clearTimeout(resizeFlag); - } - resizeFlag = setTimeout(function () { - Siren.AH(); - }, 1000); - }) } } else { $('.headertop').addClass('headertop-bar'); From 130c8802dd7c881e5e4239ab226bc2feb6169d4a Mon Sep 17 00:00:00 2001 From: Spirit Date: Fri, 20 Mar 2020 12:28:01 +0800 Subject: [PATCH 2/6] refactor: cd_to_top and change_skin button back-to-top button function and mobile button animation issue-199 --- js/sakura-app.js | 81 +++++++++++++++++++++++++----------------------- style.css | 7 ++--- 2 files changed, 45 insertions(+), 43 deletions(-) diff --git a/js/sakura-app.js b/js/sakura-app.js index 32abbaa..9c2cc6d 100644 --- a/js/sakura-app.js +++ b/js/sakura-app.js @@ -417,22 +417,15 @@ $(document).ready(function () { preBG(); }); }); -if (document.body.clientWidth <= 860) { - window.onscroll = function () { - scrollFunction() - }; - function scrollFunction() { - if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { - addComment.I("moblieGoTop").style.display = "block"; - } else { - addComment.I("moblieGoTop").style.display = "none"; - } - } - - function topFunction() { - document.body.scrollTop = 0; - document.documentElement.scrollTop = 0; +function topFunction() { + if ('scrollBehavior' in document.documentElement.style) { + window.scrollTo({ + top: 0, + behavior: "smooth" + }) + } else { + window.scrollSmoothTo(0) } } @@ -1758,36 +1751,46 @@ var home = location.href, document.body.addEventListener('input', POWERMODE) }, GT: function () { - var offset = 100, - offset_opacity = 1200, - scroll_top_duration = 700, - $back_to_top = $('.cd-top'); - $(window).scroll(function () { - if ($(this).scrollTop() > offset) { - $back_to_top.addClass('cd-is-visible'); - $(".changeSkin-gear").css("bottom", "0"); - if ($(window).height() > 950) { - $(".cd-top.cd-is-visible").css("top", "0"); + var cwidth = document.body.clientWidth, + cheight = window.innerHeight, + pc_to_top = document.querySelector(".cd-top"), + mb_to_top = document.querySelector("#moblieGoTop"), + changeskin = document.querySelector(".changeSkin-gear"); + + $(window).scroll(function() { + if (cwidth <= 860) { + if ($(this).scrollTop() > 20) { + mb_to_top.style.display = "block"; } else { - $(".cd-top.cd-is-visible").css("top", ($(window).height() - 950) + "px"); + mb_to_top.style.display = "none"; } } else { - $(".changeSkin-gear").css("bottom", "-999px"); - $(".cd-top.cd-is-visible").css("top", "-900px"); - $back_to_top.removeClass('cd-is-visible cd-fade-out'); - } - if ($(this).scrollTop() > offset_opacity) { - $back_to_top.addClass('cd-fade-out'); + if ($(this).scrollTop() > 100) { + pc_to_top.classList.add("cd-is-visible"); + changeskin.style.bottom = "0"; + if (cheight > 950) { + pc_to_top.style.top = "0"; + } else { + pc_to_top.style.top = cheight - 950 + "px"; + } + } else { + changeskin.style.bottom = "-999px"; + pc_to_top.style.top = "-999px"; + pc_to_top.classList.remove("cd-fade-out", "cd-is-visible"); + } + if ($(this).scrollTop() > 1200) { + pc_to_top.classList.add("cd-fade-out"); + } } }); + //smooth scroll to top - $back_to_top.on('click', function (event) { - event.preventDefault(); - $('body,html').animate({ - scrollTop: 0, - }, scroll_top_duration); - return false; - }); + mb_to_top.onclick = function() { + topFunction(); + } + pc_to_top.onclick = function() { + topFunction(); + } } } $(function () { diff --git a/style.css b/style.css index c80cb53..8c121db 100644 --- a/style.css +++ b/style.css @@ -1870,7 +1870,6 @@ h1.page-title.mb- { } #moblieGoTop { - display: none; position: fixed; bottom: 10px; right: 10px; @@ -1884,9 +1883,9 @@ h1.page-title.mb- { border-radius: 10px; border-radius: 12px; box-shadow: 0 0 2px 0 rgba(0, 0, 0, .12), 0 2px 2px 0 rgba(0, 0, 0, .24); - transition: box-shadow .2s ease + transform: scale(0); + transition:transform .3s } - #moblieGoTop:hover { background-color: #fff; opacity: .8 @@ -4260,7 +4259,7 @@ i.iconfont.js-toggle-search.iconsearch { .s-search input { font-size: 1rem; - background: #none; + background: none; padding: 12px 24px 12px 64px; width: 100%; outline: 0; From 164a977f028376f078753b280de3fd971fe06662 Mon Sep 17 00:00:00 2001 From: Spirit Date: Fri, 20 Mar 2020 16:53:06 +0800 Subject: [PATCH 3/6] refactor: remove and optimize remove some unuseful code, change timeline animation issue-199 --- js/sakura-app.js | 50 +++++++++++++++++++++++++----------------------- 1 file changed, 26 insertions(+), 24 deletions(-) diff --git a/js/sakura-app.js b/js/sakura-app.js index 9c2cc6d..14be44a 100644 --- a/js/sakura-app.js +++ b/js/sakura-app.js @@ -470,10 +470,20 @@ function timeSeriesReload(flag) { var al_expand_collapse_click = 0; $('#al_expand_collapse').click(function () { if (al_expand_collapse_click == 0) { - $al_post_list.show(400); + $al_post_list.each(function(index){ + var $this = $(this), + s = setTimeout(function() { + $this.show(400); + }, 50 * index); + }); al_expand_collapse_click++; } else if (al_expand_collapse_click == 1) { - $al_post_list.hide(400); + $al_post_list.each(function(index){ + var $this = $(this), + h = setTimeout(function() { + $this.hide(400); + }, 50 * index); + }); al_expand_collapse_click--; } }); @@ -1222,13 +1232,6 @@ var home = location.href, Siren = { MN: function () { $('.iconflat').on('click', function () { - if ($("#main-container").hasClass("open")) { - $('.iconflat').css('width', '50px').css('height', '50px'); - $('.openNav').css('height', '50px'); - } else { - $('.iconflat').css('width', '100%').css('height', '100%'); - $('.openNav').css('height', '100%'); - } $('body').toggleClass('navOpen'); $('#main-container,#mo-nav,.openNav').toggleClass('open'); }); @@ -1530,17 +1533,19 @@ var home = location.href, }); }, NH: function () { - var h1 = 0; - $(window).scroll(function () { - var s = $(document).scrollTop(), - cached = $('.site-header'); - if (s == h1) { - cached.removeClass('yya'); - } - if (s > h1) { - cached.addClass('yya'); - } + if(document.body.clientWidth > 860){ + var h1 = 0; + $(window).scroll(function () { + var s = $(document).scrollTop(), + cached = $('.site-header'); + if (s == h1) { + cached.removeClass('yya'); + } + if (s > h1) { + cached.addClass('yya'); + } }); + } }, XLS: function () { $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); @@ -1760,9 +1765,9 @@ var home = location.href, $(window).scroll(function() { if (cwidth <= 860) { if ($(this).scrollTop() > 20) { - mb_to_top.style.display = "block"; + mb_to_top.style.transform = "scale(1)"; } else { - mb_to_top.style.display = "none"; + mb_to_top.style.transform = "scale(0)"; } } else { if ($(this).scrollTop() > 100) { @@ -1785,9 +1790,6 @@ var home = location.href, }); //smooth scroll to top - mb_to_top.onclick = function() { - topFunction(); - } pc_to_top.onclick = function() { topFunction(); } From 57c541e6db5a2fabf27f3da5d6eb4db9a2de6595 Mon Sep 17 00:00:00 2001 From: Spirit Date: Sat, 21 Mar 2020 16:13:01 +0800 Subject: [PATCH 4/6] perf: imporve post list float animation use css will-change to improve performance issue #199 --- js/sakura-app.js | 2 ++ style.css | 24 +++++++++++++++++++++--- 2 files changed, 23 insertions(+), 3 deletions(-) diff --git a/js/sakura-app.js b/js/sakura-app.js index 14be44a..98ef975 100644 --- a/js/sakura-app.js +++ b/js/sakura-app.js @@ -78,10 +78,12 @@ function post_list_show_animation() { function callback(entries) { entries.forEach((article) => { if (article.target.classList.contains("post-list-show")) { + article.target.style.willChange = 'auto'; io.unobserve(article.target) } else { if (article.isIntersecting) { article.target.classList.add("post-list-show"); + article.target.style.willChange = 'auto'; io.unobserve(article.target) } } diff --git a/style.css b/style.css index 8c121db..ccc88cb 100644 --- a/style.css +++ b/style.css @@ -1086,6 +1086,7 @@ a:hover { display: block } + .m-nav { display: none } @@ -1142,6 +1143,22 @@ a:hover { max-width: 100% } +@media(max-width:1200px) { + .site-top .lower nav{ + right: calc(-150px - 100%); + position: absolute; + float: right; + animation: searchbox .2s; + min-width: 860px; + } + .site-top .lower nav.navbar { + right: calc(-50px - 100%); + } + .site-top .lower nav.navbar ul { + background: #fff; + } +} + #show-nav { position: relative; float: right; @@ -1443,6 +1460,7 @@ i.iconfont.hotpost { } .post-list-thumb { + will-change: transform; float: left; width: 100%; height: 300px; @@ -1456,7 +1474,7 @@ i.iconfont.hotpost { @media (max-width:860px) { .post-list-thumb { - margin: 0; + margin: 10px 0 10px; height: auto } } @@ -6839,9 +6857,9 @@ input[type=radio]:checked:before { margin-right: 22px } -@media (max-width:800px) { +@media (max-width:860px) { .changeSkin-gear { - visibility: hidden + visibility: hidden !important } .changeSkin-gear span::before { content: "" From 7d5ff98f87721a36ac940029480a08fa4cfba2ef Mon Sep 17 00:00:00 2001 From: Spirit Date: Sat, 21 Mar 2020 17:38:05 +0800 Subject: [PATCH 5/6] fix: fix the fixes --- js/sakura-app.js | 1 + style.css | 13 ++++++++++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/js/sakura-app.js b/js/sakura-app.js index 98ef975..4c91c90 100644 --- a/js/sakura-app.js +++ b/js/sakura-app.js @@ -1722,6 +1722,7 @@ var home = location.href, $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); $('body').on('click', '#comments-navi a', function (e) { e.preventDefault(); + var path = $(this)[0].pathname; $.ajax({ type: "GET", url: $(this).attr('href'), diff --git a/style.css b/style.css index ccc88cb..0286418 100644 --- a/style.css +++ b/style.css @@ -5,7 +5,7 @@ Theme URI: https://github.com/mashirozx/Sakura/ Author: Mashiro, Spirit, Louie, Fuzzz Author URI: http://2heng.xin Description: A wonderful branch of theme Akina -Version: 3.3.6 +Version: 3.3.7 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: sakura @@ -1150,6 +1150,7 @@ a:hover { float: right; animation: searchbox .2s; min-width: 860px; + z-index: -1 } .site-top .lower nav.navbar { right: calc(-50px - 100%); @@ -4728,6 +4729,11 @@ i.iconfont.js-toggle-search.iconsearch { margin-top: 0; padding: 0 } +.wp-smiley { + height: 2em !important; + max-height: 2em !important; + vertical-align: bottom; +} embed, iframe, @@ -7584,6 +7590,11 @@ a.toc-link { } @media (max-width:860px) { + .wp-smiley { + height:20px !important; + max-height:20px !important; + vertical-align:middle + } .bili-container, .tieba-container { padding-left: 0 From a62d42d3729bc1a357c0ff8cd6a275928d1f7f71 Mon Sep 17 00:00:00 2001 From: Spirit Date: Sat, 21 Mar 2020 18:17:44 +0800 Subject: [PATCH 6/6] perf: update live-search --- inc/api.php | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/inc/api.php b/inc/api.php index 11e5ee9..bd4126b 100644 --- a/inc/api.php +++ b/inc/api.php @@ -268,21 +268,24 @@ function SMMS_API($image) */ function cache_search_json() { + global $more; $vowels = array("[", "{", "]", "}", "<", ">", "\r\n", "\r", "\n", "-", "'", '"', '`', " ", ":", ";", '\\', " ", "toc"); $regex = <<])*>|begin[\S\s]*\/begin|hermit[\S\s]*\/hermit|img[\S\s]*\/img|{{.*?}}|:.*?:/m EOS; + $more = 1; $posts = new WP_Query('posts_per_page=-1&post_status=publish&post_type=post'); while ($posts->have_posts()): $posts->the_post(); - $output .= '{"type":"post","link":"' . get_permalink() . '","title":' . json_encode(get_the_title()) . ',"comments":"' . get_comments_number('0', '1', '%') . '","text":' . json_encode(str_replace($vowels, " ", preg_replace($regex, ' ', get_the_content()))) . '},'; + $output .= '{"type":"post","link":"' . get_permalink() . '","title":' . json_encode(get_the_title()) . ',"comments":"' . get_comments_number('0', '1', '%') . '","text":' . json_encode(str_replace($vowels, " ", preg_replace($regex, ' ', apply_filters( 'the_content', get_the_content())))) . '},'; endwhile; wp_reset_postdata(); - $pages = get_pages(); - foreach ($pages as $page) { - $output .= '{"type":"page","link":"' . get_page_link($page) . '","title":' . json_encode($page->post_title) . ',"comments":"' . $page->comment_count . '","text":' . json_encode(str_replace($vowels, " ", preg_replace($regex, ' ', $page->post_content))) . '},'; - } + $pages = new WP_Query('posts_per_page=-1&post_status=publish&post_type=page'); + while ($pages->have_posts()): $pages->the_post(); + $output .= '{"type":"page","link":"' . get_permalink() . '","title":' . json_encode(get_the_title()) . ',"comments":"' . get_comments_number('0', '1', '%') . '","text":' . json_encode(str_replace($vowels, " ", preg_replace($regex, ' ', apply_filters( 'the_content', get_the_content())))) . '},'; + endwhile; + wp_reset_postdata(); $tags = get_tags(); foreach ($tags as $tag) {