格式化

src/views/Screen/hooks/useExecPlay.ts

@@ -1,10 +1,10 @@
-import { onMounted, onUnmounted, ref } from 'vue'
-import { throttle } from 'lodash'
-import { storeToRefs } from 'pinia'
-import { useSlidesStore } from '@/store'
-import { KEYS } from '@/configs/hotkey'
-import { ANIMATION_CLASS_PREFIX } from '@/configs/animation'
-import message from '@/utils/message'
+import { onMounted, onUnmounted, ref } from "vue"
+import { throttle } from "lodash"
+import { storeToRefs } from "pinia"
+import { useSlidesStore } from "@/store"
+import { KEYS } from "@/configs/hotkey"
+import { ANIMATION_CLASS_PREFIX } from "@/configs/animation"
+import message from "@/utils/message"
 
 export default () => {
   const slidesStore = useSlidesStore()
@@ -41,21 +41,21 @@ export default () => {
       }
 
       const animationName = `${ANIMATION_CLASS_PREFIX}${animation.effect}`
-      
+
       // 执行动画前先清除原有的动画状态（如果有）
-      elRef.style.removeProperty('--animate-duration')
+      elRef.style.removeProperty("--animate-duration")
       for (const classname of elRef.classList) {
         if (classname.indexOf(ANIMATION_CLASS_PREFIX) !== -1) elRef.classList.remove(classname, `${ANIMATION_CLASS_PREFIX}animated`)
       }
-      
+
       // 执行动画
-      elRef.style.setProperty('--animate-duration', `${animation.duration}ms`)
+      elRef.style.setProperty("--animate-duration", `${animation.duration}ms`)
       elRef.classList.add(animationName, `${ANIMATION_CLASS_PREFIX}animated`)
 
       // 执行动画结束，将“退场”以外的动画状态清除
       const handleAnimationEnd = () => {
-        if (animation.type !== 'out') {
-          elRef.style.removeProperty('--animate-duration')
+        if (animation.type !== "out") {
+          elRef.style.removeProperty("--animate-duration")
           elRef.classList.remove(animationName, `${ANIMATION_CLASS_PREFIX}animated`)
         }
 
@@ -66,14 +66,14 @@ export default () => {
           if (autoNext) runAnimation()
         }
       }
-      elRef.addEventListener('animationend', handleAnimationEnd, { once: true })
+      elRef.addEventListener("animationend", handleAnimationEnd, { once: true })
     }
   }
 
   onMounted(() => {
     const firstAnimations = formatedAnimations.value[0]
     if (firstAnimations && firstAnimations.animations.length) {
-      const autoExecFirstAnimations = firstAnimations.animations.every(item => item.trigger === 'auto' || item.trigger === 'meantime')
+      const autoExecFirstAnimations = firstAnimations.animations.every(item => item.trigger === "auto" || item.trigger === "meantime")
       if (autoExecFirstAnimations) runAnimation()
     }
   })
@@ -86,15 +86,15 @@ export default () => {
     for (const animation of animations) {
       const elRef: HTMLElement | null = document.querySelector(`#screen-element-${animation.elId} [class^=base-element-]`)
       if (!elRef) continue
-      
-      elRef.style.removeProperty('--animate-duration')
+
+      elRef.style.removeProperty("--animate-duration")
       for (const classname of elRef.classList) {
         if (classname.indexOf(ANIMATION_CLASS_PREFIX) !== -1) elRef.classList.remove(classname, `${ANIMATION_CLASS_PREFIX}animated`)
       }
     }
 
     // 如果撤销时该位置有且仅有强调动画，则继续执行一次撤销
-    if (animations.every(item => item.type === 'attention')) execPrev()
+    if (animations.every(item => item.type === "attention")) execPrev()
   }
 
   // 关闭自动播放
@@ -113,9 +113,13 @@ export default () => {
     loopPlay.value = loop
   }
 
-  const throttleMassage = throttle(function(msg) {
-    message.success(msg)
-  }, 1000, { leading: true, trailing: false })
+  const throttleMassage = throttle(
+    function (msg) {
+      message.success(msg)
+    },
+    1000,
+    { leading: true, trailing: false }
+  )
 
   // 向上/向下播放
   // 遇到元素动画时，优先执行动画播放，无动画则执行翻页
@@ -124,34 +128,29 @@ export default () => {
   const execPrev = () => {
     if (formatedAnimations.value.length && animationIndex.value > 0) {
       revokeAnimation()
-    }
-    else if (slideIndex.value > 0) {
+    } else if (slideIndex.value > 0) {
       slidesStore.updateSlideIndex(slideIndex.value - 1)
       if (slideIndex.value < playedSlidesMinIndex.value) {
         animationIndex.value = 0
         playedSlidesMinIndex.value = slideIndex.value
-      }
-      else animationIndex.value = formatedAnimations.value.length
-    }
-    else {
+      } else animationIndex.value = formatedAnimations.value.length
+    } else {
       if (loopPlay.value) turnSlideToIndex(slides.value.length - 1)
-      else throttleMassage('已经是第一页了')
+      else throttleMassage("已经是第一页了")
     }
     inAnimation.value = false
   }
   const execNext = () => {
     if (formatedAnimations.value.length && animationIndex.value < formatedAnimations.value.length) {
       runAnimation()
-    }
-    else if (slideIndex.value < slides.value.length - 1) {
+    } else if (slideIndex.value < slides.value.length - 1) {
       slidesStore.updateSlideIndex(slideIndex.value + 1)
       animationIndex.value = 0
       inAnimation.value = false
-    }
-    else {
+    } else {
       if (loopPlay.value) turnSlideToIndex(0)
       else {
-        throttleMassage('已经是最后一页了')
+        throttleMassage("已经是最后一页了")
         closeAutoPlay()
       }
       inAnimation.value = false
@@ -162,7 +161,7 @@ export default () => {
   const autoPlayInterval = ref(2500)
   const autoPlay = () => {
     closeAutoPlay()
-    message.success('开始自动放映')
+    message.success("开始自动放映")
     autoPlayTimer.value = setInterval(execNext, autoPlayInterval.value)
   }
 
@@ -173,18 +172,22 @@ export default () => {
   }
 
   // 鼠标滚动翻页
-  const mousewheelListener = throttle(function(e: WheelEvent) {
-    if (e.deltaY < 0) execPrev()
-    else if (e.deltaY > 0) execNext()
-  }, 500, { leading: true, trailing: false })
+  const mousewheelListener = throttle(
+    function (e: WheelEvent) {
+      if (e.deltaY < 0) execPrev()
+      else if (e.deltaY > 0) execNext()
+    },
+    500,
+    { leading: true, trailing: false }
+  )
 
   // 触摸屏上下滑动翻页
-  const touchInfo = ref<{ x: number; y: number; } | null>(null)
+  const touchInfo = ref<{ x: number; y: number } | null>(null)
 
   const touchStartListener = (e: TouchEvent) => {
     touchInfo.value = {
       x: e.changedTouches[0].pageX,
-      y: e.changedTouches[0].pageY,
+      y: e.changedTouches[0].pageY
     }
   }
   const touchEndListener = (e: TouchEvent) => {
@@ -193,7 +196,7 @@ export default () => {
     const offsetX = Math.abs(touchInfo.value.x - e.changedTouches[0].pageX)
     const offsetY = e.changedTouches[0].pageY - touchInfo.value.y
 
-    if ( Math.abs(offsetY) > offsetX && Math.abs(offsetY) > 50 ) {
+    if (Math.abs(offsetY) > offsetX && Math.abs(offsetY) > 50) {
       touchInfo.value = null
 
       if (offsetY > 0) execPrev()
@@ -206,17 +209,11 @@ export default () => {
     const key = e.key.toUpperCase()
 
     if (key === KEYS.UP || key === KEYS.LEFT || key === KEYS.PAGEUP) execPrev()
-    else if (
-      key === KEYS.DOWN || 
-      key === KEYS.RIGHT ||
-      key === KEYS.SPACE || 
-      key === KEYS.ENTER ||
-      key === KEYS.PAGEDOWN
-    ) execNext()
+    else if (key === KEYS.DOWN || key === KEYS.RIGHT || key === KEYS.SPACE || key === KEYS.ENTER || key === KEYS.PAGEDOWN) execNext()
   }
 
-  onMounted(() => document.addEventListener('keydown', keydownListener))
-  onUnmounted(() => document.removeEventListener('keydown', keydownListener))
+  onMounted(() => document.addEventListener("keydown", keydownListener))
+  onUnmounted(() => document.removeEventListener("keydown", keydownListener))
 
   // 切换到上一张/上一张幻灯片（无视元素的入场动画）
   const turnPrevSlide = () => {
@@ -258,6 +255,6 @@ export default () => {
     turnSlideToId,
     execPrev,
     execNext,
-    animationIndex,
+    animationIndex
   }
 }