summaryrefslogtreecommitdiff
path: root/packages/client/src/components/MkMarquee.vue
diff options
context:
space:
mode:
Diffstat (limited to 'packages/client/src/components/MkMarquee.vue')
-rw-r--r--packages/client/src/components/MkMarquee.vue106
1 files changed, 0 insertions, 106 deletions
diff --git a/packages/client/src/components/MkMarquee.vue b/packages/client/src/components/MkMarquee.vue
deleted file mode 100644
index 5ca04b0b48..0000000000
--- a/packages/client/src/components/MkMarquee.vue
+++ /dev/null
@@ -1,106 +0,0 @@
-<script lang="ts">
-import { h, onMounted, onUnmounted, ref, watch } from 'vue';
-
-export default {
- name: 'MarqueeText',
- props: {
- duration: {
- type: Number,
- default: 15,
- },
- repeat: {
- type: Number,
- default: 2,
- },
- paused: {
- type: Boolean,
- default: false,
- },
- reverse: {
- type: Boolean,
- default: false,
- },
- },
- setup(props) {
- const contentEl = ref();
-
- function calc() {
- const eachLength = contentEl.value.offsetWidth / props.repeat;
- const factor = 3000;
- const duration = props.duration / ((1 / eachLength) * factor);
-
- contentEl.value.style.animationDuration = `${duration}s`;
- }
-
- watch(() => props.duration, calc);
-
- onMounted(() => {
- calc();
- });
-
- onUnmounted(() => {
- });
-
- return {
- contentEl,
- };
- },
- render({
- $slots, $style, $props: {
- duration, repeat, paused, reverse,
- },
- }) {
- return h('div', { class: [$style.wrap] }, [
- h('span', {
- ref: 'contentEl',
- class: [
- paused
- ? $style.paused
- : undefined,
- $style.content,
- ],
- }, Array(repeat).fill(
- h('span', {
- class: $style.text,
- style: {
- animationDirection: reverse
- ? 'reverse'
- : undefined,
- },
- }, $slots.default()),
- )),
- ]);
- },
-};
-</script>
-
-<style lang="scss" module>
-.wrap {
- overflow: clip;
- animation-play-state: running;
-
- &:hover {
- animation-play-state: paused;
- }
-}
-.content {
- display: inline-block;
- white-space: nowrap;
- animation-play-state: inherit;
-}
-.text {
- display: inline-block;
- animation-name: marquee;
- animation-timing-function: linear;
- animation-iteration-count: infinite;
- animation-duration: inherit;
- animation-play-state: inherit;
-}
-.paused .text {
- animation-play-state: paused;
-}
-@keyframes marquee {
- 0% { transform:translateX(0); }
- 100% { transform:translateX(-100%); }
-}
-</style>