hjyd/src/common/utils.js

const scaleFunc = (id, scale) => {
  if (['#case_detail_container', '#hardware_detail_container'].includes(id)) {
    document.querySelector(id).style['transform-origin'] = 'center top'
  } else {
    document.querySelector(id).style['transform-origin'] = 'center center'
  }

  document.querySelector(id).style.transform = `scale(${scale})`
  handleBottomFont(id, scale)
  handleImgScale(id, scale)
  handleCooperation(id, scale)
  handleContactUs(id, scale)
  handleSwiper(id, scale)
}

export const handleScreenAuto = id => {
  const designDraftWidth = 1920 //设计稿的宽度
  const designDraftHeight = 1080 //设计稿的高度
  //根据屏幕的变化适配的比例

  let scale = 1

  if (document.documentElement.clientWidth > designDraftWidth) {
    document.documentElement.clientWidth /
      document.documentElement.clientHeight <
    designDraftWidth / designDraftHeight
      ? 1
      : document.documentElement.clientHeight / designDraftHeight
  } else {
    scale =
      document.documentElement.clientWidth /
        document.documentElement.clientHeight <
      designDraftWidth / designDraftHeight
        ? document.documentElement.clientWidth / designDraftWidth
        : document.documentElement.clientHeight / designDraftHeight
  }
  // if (document.querySelector(id)) {
  //   const divWidth = document.querySelector(id).style.width * scale
  //   const divHeight = document.querySelector(id).style.height * scale
  //   if (divWidth > document.documentElement.clientWidth) {
  //     scale = document.documentElement.clientHeight / 1200
  //   }
  //   if (divHeight > document.documentElement.clientHeight) {
  //     scale = document.documentElement.clientWidth / 2020
  //   }
  //   if (
  //     divWidth > document.documentElement.clientWidth &&
  //     divHeight > document.documentElement.clientHeight
  //   ) {
  //     scale = document.documentElement.clientHeight / 1200
  //   }
  // }
  scaleFunc(id, scale)
}

const handleBottomFont = (id, scale) => {
  if (id == '#service_container') {
    document.getElementById('bottom_container').style.transform = `scaleX(${
      1 / scale
    })`
    document.getElementById(
      'bottom_font_save',
    ).style.transform = `scale(${scale})`
  }
}

const handleImgScale = (id, scale) => {
  if (id == '#culture_container') {
    document.getElementById('bg_img_scale').style.transform = `scale(${
      1 / scale
    })`
  }
}

const handleContactUs = (id, scale) => {
  if (id == '#contractus_container') {
    document.getElementById('contact_circle').style.transform = `scale(${
      1 / scale
    })`
    document.getElementById('contact_hand').style.transform = `scale(${
      1 / scale
    })`
  }
}

const handleSwiper = (id, scale) => {
  if (id == '#case_picture') {
    document.querySelector('#wrapper_case_picture_id').style[
      'transform-origin'
    ] = 'center top'
    document.getElementById(
      'wrapper_case_picture_id',
    ).style.transform = `scale(${1 / scale})`
  }
  if (id == '#hardware_picture_list') {
    document.querySelector('#hardware_swiper_scale_id').style[
      'transform-origin'
    ] = 'center top'
    document.getElementById(
      'hardware_swiper_scale_id',
    ).style.transform = `scale(${1 / scale})`
  }
}

const handleCooperation = (id, scale) => {
  if (id == '#cooperation_container') {
    document.getElementById('contract_bg_coop').style['transform-origin'] =
      'center 0'
    document.getElementById('contract_bg_coop').style.transform = `scale(${
      1 / scale
    })`
    document.getElementById('contract_real_coop').style['transform-origin'] =
      'center 0'
    document.getElementById(
      'contract_real_coop',
    ).style.transform = `scale(${0.8})`
  }
}

export const animateCSS = (element, animation, prefix = 'animate__') =>
  // We create a Promise and return it
  new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`
    const node = document.querySelector(element)
    node?.classList.add(`${prefix}animated`, animationName)
    // When the animation ends, we clean the classes and resolve the Promise
    function handleAnimationEnd(event) {
      event.stopPropagation()
      node?.classList.remove(`${prefix}animated`, animationName)
      resolve('Animation ended')
    }
    node?.addEventListener('animationend', handleAnimationEnd, {
      once: true,
    })
  })

// 根据 activeIndex 判断激活哪个元素的动画
export const totalPageAni = async (activeIndex, previousIndex) => {
  const isDown = previousIndex < activeIndex
  const aniName = isDown ? 'fadeInUp' : 'fadeInDown'
  if (activeIndex == 1) {
    animateCSS('#servive_big_title_ani', aniName)
  }
  if (activeIndex == 2) {
    animateCSS('#cooperation_ani', aniName)
  }
  if (activeIndex == 3) {
    animateCSS('#case_picture_list_ani', aniName)
  }
  if (activeIndex == 5) {
    animateCSS('#contract_ani', aniName)
  }
  if (activeIndex == 7) {
    animateCSS('#software_b_ani', aniName)
    animateCSS('#software_c_ani', aniName)
  }
  if (activeIndex == 8) {
    animateCSS('#hardware_detail_ani', aniName)
  }
  if (activeIndex == 9) {
    animateCSS('#webofthing_ani', aniName)
    animateCSS('#webofthing_img_ani', aniName)
  }
  if (activeIndex == 10) {
    animateCSS('#mechanical_control_ani', aniName)
  }
  if (activeIndex == 11) {
    animateCSS('#mechanical_drive_ani', aniName)
  }
  if (activeIndex == 12) {
    animateCSS('#read_widely_ani', aniName)
  }
  if (activeIndex == 13) {
    animateCSS('#culture_ani', aniName)
  }
  if (activeIndex == 14) {
    animateCSS('#post_page_title_ani', aniName)
  }
  if (activeIndex == 16) {
    animateCSS('#contract_info_ani', aniName)
    animateCSS('#contact_hand', aniName)
  }
}

// export const totalTitleAni = (activeIndex, previousIndex) => {
//   if (activeIndex == 1) {
//     animateCSS('#main_img', 'fadeInUp')
//     animateCSS('#slide_five_desc_ani', 'fadeInUp')
//   }
//   if (activeIndex == 2) {
//     animateCSS('#slide_two_ani', 'fadeInDown')
//   }
//   if (activeIndex == 3) {
//     animateCSS('#slide_one_ani', 'fadeInDown')
//   }
//   if (activeIndex == 4) {
//     animateCSS('#slide_four_ani', 'fadeInDown')
//   }
//   if (activeIndex == 5) {
//     animateCSS('#slide_three_ani', 'fadeInDown')
//   }
// }