Merge remote-tracking branch 'origin/main'

source/css/_common/components/highlight/highlight.styl

@@ -246,6 +246,10 @@ code,
     .ic {
       margin-top: 1rem;
       @extend .up-down;
+
+      &.stop-animation {
+        animation-play-state: paused;
+      }
     }
 
     &.open {

source/css/_common/outline/header/image.styl

@@ -10,6 +10,10 @@
   background-color: #363636;
   content-visibility: auto;
   contain-intrinsic-size: 100vw 70vh;
+
+  li.stop-animation {
+    animation-play-state: paused;
+  }
 
   img {
     width: 100%;

source/css/_common/outline/header/waves.styl

@@ -18,6 +18,10 @@
   animation: wave 25s cubic-bezier(.55, .5, .45, .5) infinite;
 }
 
+use.stop-animation {
+  animation-play-state: paused;
+}
+
 .parallax>use:nth-child(1) {
   animation-delay: -2s;
   animation-duration: 7s;

source/css/_common/scaffolding/animate.styl

@@ -4,6 +4,10 @@
   animation: rotate 6s linear infinite;
 }
 
+.rotate.stop-animation  {
+  animation-play-state: paused;
+}
+
 .beat {
   animation: beat 1.33s ease-in-out infinite;
 }

source/js/_app/global.ts

@@ -170,7 +170,7 @@ const showtip = function (msg: string): void | never {
 }
 
 const resizeHandle = function (event?) {
-// 获取 siteNav 的高度
+  // 获取 siteNav 的高度
   siteNavHeight = siteNav.changeOrGetHeight()
   // 获取 siteHeader 的高度
   headerHightInner = siteHeader.changeOrGetHeight()
@@ -186,7 +186,7 @@ const resizeHandle = function (event?) {
   oWinHeight = window.innerHeight
   oWinWidth = window.innerWidth
   // 设置 sidebar .panels 元素的高度
-//   sideBar.child('.panels').changeOrGetHeight(oWinHeight + 'px')
+  //   sideBar.child('.panels').changeOrGetHeight(oWinHeight + 'px')
 }
 
 const scrollHandle = function (event) {
@@ -233,13 +233,25 @@ const scrollHandle = function (event) {
   // 计算滚动百分比
   const scrollPercent = Math.round(Math.min(100 * window.scrollY / contentVisibilityHeight, 100)) + '%'
   // 更新回到顶部按钮的文字
-  if(backToTop.child('span').innerText !== scrollPercent) {
+  if (backToTop.child('span').innerText !== scrollPercent) {
     backToTop.child('span').innerText = scrollPercent;
   }
   // 更新百分比进度条的宽度
-  if($dom('#sidebar').hasClass('affix')) {
+  if ($dom('#sidebar').hasClass('affix') || $dom('#sidebar').hasClass('on')) {
     $dom('.percent').changeOrGetWidth(scrollPercent)
   }
+  // imgs在视口外时停止动画
+  // 已被IntersectionObserver代替
+  // const { top } = document.getElementById('main').getBoundingClientRect();
+  // if (top >= 0) {
+  //   document.querySelectorAll('#imgs .item').forEach(i => {
+  //     i.classList.remove('stop-animation');
+  //   })
+  // } else {
+  //   document.querySelectorAll('#imgs .item').forEach(i => {
+  //     i.classList.add('stop-animation');
+  //   })
+  // }
 }
 
 const pagePosition = function () {

source/js/_app/page.ts

@@ -1,4 +1,4 @@
-declare const algoliasearch:any, quicklink:any, instantsearch:any
+declare const algoliasearch: any, quicklink: any, instantsearch: any
 
 const cardActive = function () {
   if (!$dom('.index.wrap')) { return }
@@ -52,7 +52,7 @@ const cardActive = function () {
 
 const registerExtURL = function () {
   $dom.each('span.exturl', function (element) {
-    const link = <HTMLAnchorElement> document.createElement('a')
+    const link = <HTMLAnchorElement>document.createElement('a')
     // https://stackoverflow.com/questions/30106476/using-javascripts-atob-to-decode-base64-doesnt-properly-decode-utf-8-strings
 
     link.href = decodeURIComponent(atob(element.dataset.url).split('').map(function (c) {
@@ -208,7 +208,7 @@ const postBeauty = function () {
       copyBtn.remove()
     } else {
       copyBtn.addEventListener('click', function (event) {
-        const target = <HTMLElement> event.currentTarget
+        const target = <HTMLElement>event.currentTarget
         let comma = ''; let code = ''
         code_container.find('pre').forEach(function (line) {
           code += comma + line.innerText
@@ -359,6 +359,30 @@ const postBeauty = function () {
       btns: []
     }).player.load(JSON.parse(element.attr('data-src'))).fetch()
   })
+
+  const angleDown = document.querySelectorAll('.show-btn .i-angle-down')
+  if (angleDown.length) {
+    if (!window.IntersectionObserver) return
+    const io = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          angleDown.forEach(i => {
+            i.classList.remove('stop-animation')
+          })
+        } else {
+          angleDown.forEach(i => {
+            i.classList.add('stop-animation')
+          })
+        }
+      })
+    }, {
+      root: null,
+      threshold: 0.5
+    });
+    angleDown.forEach(i => {
+      io.observe(i)
+    })
+  }
 }
 
 const tabFormat = function () {
@@ -508,8 +532,8 @@ const algoliaSearch = function (pjax) {
         },
         empty: function (data) {
           return '<div id="hits-empty">' +
-              LOCAL.search.empty.replace(/\$\{query}/, data.query) +
-              '</div>'
+            LOCAL.search.empty.replace(/\$\{query}/, data.query) +
+            '</div>'
         }
       },
       cssClasses: {
@@ -607,6 +631,48 @@ const domInit = function () {
       toolPlayer.player.mini()
     })
   }
+
+  const createIntersectionObserver = function () {
+    if (!window.IntersectionObserver) return
+    // waves在视口外时停止动画
+    new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) {
+        document.querySelectorAll('.parallax>use').forEach(i => {
+          i.classList.remove('stop-animation')
+        })
+        document.querySelectorAll('#imgs .item').forEach(i=>{
+          i.classList.remove('stop-animation')
+        }) 
+      } else {
+        document.querySelectorAll('.parallax>use').forEach(i => {
+          i.classList.add('stop-animation')
+        })
+        // waves不可见时imgs也应该不可见了
+        document.querySelectorAll('#imgs .item').forEach(i=>{
+          i.classList.add('stop-animation')
+        }) 
+      }
+    }, {
+      root: null,
+      threshold: 0.2
+    }).observe(document.getElementById('waves'))
+    // sakura在视口外时停止动画
+    new IntersectionObserver(([entry]) => {
+      if (entry.isIntersecting) {
+        document.querySelectorAll('.with-love>i').forEach(i => {
+          i.classList.remove('stop-animation')
+        })
+      } else {
+        document.querySelectorAll('.with-love>i').forEach(i => {
+          i.classList.add('stop-animation')
+        })
+      }
+    }, {
+      root: null,
+      threshold: 0.2
+    }).observe(document.querySelector('.with-love'))
+  }
+  createIntersectionObserver()
 }
 
 const pjaxReload = function () {