From 99eacc0fd43401d5e4e6be94caa376e239877787 Mon Sep 17 00:00:00 2001
From: tangly <tlyong1992@hotmail.com>
Date: Thu, 20 Oct 2022 14:44:08 +0800
Subject: [PATCH] =?UTF-8?q?Next=20=E4=B8=BB=E9=A2=98=E6=8C=89=E9=92=AE=20?=
 =?UTF-8?q?=E5=85=BC=E5=AE=B9FaceBookMessenger=E6=8F=92=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/next/LayoutBase.js | 23 +++++++++++++++++------
 1 file changed, 17 insertions(+), 6 deletions(-)

diff --git a/themes/next/LayoutBase.js b/themes/next/LayoutBase.js
index 7f64181b..76f56dc8 100644
--- a/themes/next/LayoutBase.js
+++ b/themes/next/LayoutBase.js
@@ -9,7 +9,7 @@ import SideAreaRight from './components/SideAreaRight'
 import TopNav from './components/TopNav'
 import { useGlobal } from '@/lib/global'
 import PropTypes from 'prop-types'
-import React, { useEffect, useRef, useState } from 'react'
+import React from 'react'
 import smoothscroll from 'smoothscroll-polyfill'
 import CONFIG_NEXT from './config_next'
 import Live2D from '@/components/Live2D'
@@ -22,11 +22,12 @@ import Live2D from '@/components/Live2D'
 const LayoutBase = (props) => {
   const { children, headerSlot, meta, sideBarSlot, floatSlot, rightAreaSlot, siteInfo } = props
   const { onLoading } = useGlobal()
-  const targetRef = useRef(null)
+  const targetRef = React.useRef(null)
+  const floatButtonGroup = React.useRef(null)
   const leftAreaSlot = <Live2D/>
 
-  const [show, switchShow] = useState(false)
-  const [percent, changePercent] = useState(0) // 页面阅读百分比
+  const [show, switchShow] = React.useState(false)
+  const [percent, changePercent] = React.useState(0) // 页面阅读百分比
   const scrollListener = () => {
     const targetRef = document.getElementById('wrapper')
     const clientHeight = targetRef?.clientHeight
@@ -41,8 +42,18 @@ const LayoutBase = (props) => {
     }
     changePercent(per)
   }
-  useEffect(() => {
+
+  React.useEffect(() => {
     smoothscroll.polyfill()
+
+    // facebook messenger 插件需要调整右下角悬浮按钮的高度
+    const fb = document.getElementsByClassName('fb-customerchat')
+    if (fb.length === 0) {
+      floatButtonGroup?.current?.classList.replace('bottom-24', 'bottom-12')
+    } else {
+      floatButtonGroup?.current?.classList.remove('bottom-12', 'bottom-24')
+    }
+
     document.addEventListener('scroll', scrollListener)
     return () => document.removeEventListener('scroll', scrollListener)
   }, [show])
@@ -66,7 +77,7 @@ const LayoutBase = (props) => {
       </main>
 
       {/* 右下角悬浮 */}
-      <div className='right-8 bottom-12 lg:right-2 fixed justify-end z-20 font-sans'>
+      <div ref={floatButtonGroup} className='right-8 bottom-12 bottom-24 lg:right-2 fixed justify-end z-20 font-sans'>
         <div className={(show ? 'animate__animated ' : 'hidden') + ' animate__fadeInUp rounded-md glassmorphism justify-center duration-500  animate__faster flex space-x-2 items-center cursor-pointer '}>
           <JumpToTopButton percent={percent}/>
           <JumpToBottomButton />