ZhongMianShowMacao/src/views/Panel.vue

<template>
  <div class="panel" @mousemove.prevent @touchmove.prevent :style="{ top: panelNewTop == null ? null : `${panelNewTop}px` }">
    <slot></slot>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch, nextTick, defineProps } from "vue";
import { useStore } from "vuex";

const props = defineProps({
  isOpen: {
    default: false,
  },
});

watch(
  () => props.isOpen,
  () => {
    const $panel = document.querySelector(".panel");
    let orgTop = $panel.offsetTop;
    let newTop = window.innerHeight - $panel.clientHeight;
    let value = orgTop - newTop;
    if (value > 0) {
      openPanel($panel, orgTop, value);
    } else {
      resetPanel();
    }
  }
);

const panelNewTop = ref(null);
const panelOrgTop = ref(0);

const store = useStore();

const resetPanel = () => {
  if (panelOrgTop.value > 0) {
    KanKan.Animate.transitions.start((progress) => {
      const $panel = document.querySelector(".panel");
      if (!$panel) {
        return
      }
      let orgTop = $panel.offsetTop;
      let newTop = panelOrgTop.value;
      let value = orgTop - newTop;

      panelNewTop.value = orgTop - value * progress;

      const $color = $panel.querySelectorAll(".color");
      $color.forEach((item) => {
        item.style.backgroundColor = `rgba(0, 0, 0, ${0.2})`;
      });
    }, 200);
  }
};

const openPanel = ($panel, orgTop, value) => {
  KanKan.Animate.transitions.start((progress) => {
    panelNewTop.value = orgTop - value * progress;
    let opc = progress;
    if (opc < 0.2) {
      opc = 0.2;
    } else if (opc > 0.5) {
      opc = 0.5;
    }

    const $color = $panel.querySelectorAll(".color");
    $color.forEach((item) => {
      item.style.backgroundColor = `rgba(0, 0, 0, ${opc})`;
    });
  }, 200);
};

onMounted(() => {
  nextTick(() => {
    document.querySelector(".player").addEventListener("touchstart", () => {
      resetPanel();
      // openPanel();
    });
  });
  const $panel = document.querySelector(".panel");
  const $color = $panel.querySelectorAll(".color");
  $panel.addEventListener("touchstart", down, false);
  $panel.addEventListener("mousedown", down, false);

  panelOrgTop.value = $panel.offsetTop;

  let pos = {
    top: panelOrgTop.value,
  };

  let timing = null;

  function down(e) {
    e.stopPropagation();

    pos.new = ((e.touches && e.touches[0]) || e).clientY;
    pos.org = $panel.offsetTop;
    pos.eHeight = $panel.clientHeight;
    pos.wHeight = window.innerHeight;

    $panel.addEventListener("touchmove", move, false);
    $panel.addEventListener("mousemove", move, false);
    $panel.addEventListener("touchend", up, false);
    $panel.addEventListener("mouseup", up, false);

    store.commit("SetPlayerOptions", {
      showMap: true,
      showToolbar: true,
      showDescription: false,
    });
  }
  function move(e) {
    e.stopPropagation();
    let top = ((e.touches && e.touches[0]) || e).clientY + pos.org - pos.new;
    let opc = (pos.wHeight - top) / pos.eHeight;
    if (opc < 0.2) {
      opc = 0.2;
    } else if (opc > 0.5) {
      opc = 0.5;
    }

    // if (top > pos.top) {
    //     top = pos.top;
    // }
    if (top + pos.eHeight < pos.wHeight) {
      top = pos.wHeight - pos.eHeight;
    } else if (top > panelOrgTop.value) {
      top = panelOrgTop.value;
    }

    $color.forEach((item) => {
      item.style.backgroundColor = `rgba(0, 0, 0, ${opc})`;
    });
    panelNewTop.value = top;

    if (timing == null) {
      timing = Date.now();
    }
  }

  function up(e) {
    $panel.removeEventListener("touchmove", move, false);
    $panel.removeEventListener("mousemove", move, false);
    $panel.removeEventListener("touchend", up, false);
    $panel.removeEventListener("mouseup", up, false);
    pos.end = ((e.changedTouches && e.changedTouches[0]) || e).clientY;

    if (Date.now() - timing < 500) {
      let diff = pos.end - pos.new;
      let orgTop = 0;
      let newTop = 0;

      if (Math.abs(diff) > 5) {
        let value = 0;
        if (diff > 0) {
          orgTop = $panel.offsetTop;
          newTop = panelOrgTop.value;
          value = orgTop - newTop;
        } else {
          orgTop = $panel.offsetTop;
          newTop = pos.wHeight - pos.eHeight;
          value = orgTop - newTop;
        }
        KanKan.Animate.transitions.start((progress) => {
          panelNewTop.value = orgTop - value * progress;
          let opc = (pos.wHeight - panelNewTop.value) / pos.eHeight;
          if (opc < 0.2) {
            opc = 0.2;
          } else if (opc > 0.5) {
            opc = 0.5;
          }
          $color.forEach((item) => {
            item.style.backgroundColor = `rgba(0, 0, 0, ${opc})`;
          });
        }, 200);
      }
    }
    timing = null;
  }
});
</script>

<style lang="scss" scoped>
.panel {
  position: fixed;
  top: calc(100% - 90px);
  left: 0.4rem;
  right: 0.4rem;
  z-index: 22;
}
</style>