@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
1 lines • 18.1 kB
Source Map (JSON)
{"version":3,"file":"motion-text.cjs","names":[],"sources":["../../../components/motion_text/motion_text.vue"],"sourcesContent":["<template>\n <span\n ref=\"contentRef\"\n :class=\"motionTextClasses\"\n :style=\"componentStyles\"\n :data-text-content=\"isStaticAnimationMode ? text : undefined\"\n :aria-live=\"isAnimating ? 'polite' : 'off'\"\n :aria-label=\"screenReaderText || undefined\"\n >\n <!-- Screen reader content -->\n <span\n v-if=\"screenReaderText\"\n class=\"d-motion-text__sr-only\"\n >\n {{ screenReaderText }}\n </span>\n\n <!-- Gradient-sweep and shimmer modes: Simple static text with gradient animation -->\n <template v-if=\"isStaticAnimationMode\">\n {{ text }}\n <slot v-if=\"!text\" />\n </template>\n\n <!-- Character-by-character animated content for other modes -->\n <span\n v-else\n :key=\"animationKey\"\n class=\"d-motion-text__content\"\n :aria-hidden=\"isAnimating\"\n >\n <template\n v-for=\"(word, wordIdx) in words\"\n :key=\"`${animationKey}-${wordIdx}`\"\n >\n <Transition\n :name=\"`d-motion-text-word-${animationMode}`\"\n >\n <span\n v-if=\"wordIdx < visibleWordCount\"\n class=\"d-motion-text__word\"\n :data-text-content=\"word.text\"\n :style=\"{ '--word-index': wordIdx }\"\n >\n <template\n v-for=\"(char, charIdx) in word.chars\"\n :key=\"`${animationKey}-${wordIdx}-${charIdx}`\"\n >\n <Transition\n :name=\"`d-motion-text-char-${animationMode}`\"\n >\n <span\n v-if=\"charIdx < visibleCharsPerWord[wordIdx]\"\n class=\"d-motion-text__char\"\n :style=\"{\n '--char-index': charIdx,\n '--char-delay': `${charIdx * timing.characterDelay}ms`,\n }\"\n >{{ char }}</span>\n </Transition>\n </template>\n </span>\n </Transition>\n </template>\n </span>\n\n <!-- Fallback slot content -->\n <span\n v-if=\"!words.length && !text && !isStaticAnimationMode\"\n class=\"d-motion-text__fallback\"\n >\n <slot />\n </span>\n </span>\n</template>\n\n<script>\nimport { MOTION_TEXT_ANIMATION_MODES, MOTION_TEXT_SPEEDS, MOTION_TEXT_TIMING_PRESETS } from './motion_text_constants';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtMotionText',\n\n inheritAttrs: false,\n\n props: {\n /**\n * The text content to animate.\n * @type {string}\n */\n text: {\n type: String,\n default: '',\n },\n\n /**\n * The animation mode to use for the text reveal.\n * @values gradient-in, fade-in, slide-in, gradient-sweep, shimmer, none\n */\n animationMode: {\n type: String,\n default: 'gradient-in',\n validator: (value) => MOTION_TEXT_ANIMATION_MODES.includes(value),\n },\n\n /**\n * Animation speed using t-shirt sizing.\n * @values sm, md, lg\n */\n speed: {\n type: String,\n default: 'md',\n validator: (value) => MOTION_TEXT_SPEEDS.includes(value),\n },\n\n /**\n * Whether to start animation automatically when component is mounted.\n * @values true, false\n */\n autoStart: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Whether to loop the animation continuously.\n * @values true, false\n */\n loop: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Whether to respect the user's prefers-reduced-motion system setting.\n * @values true, false\n */\n respectsReducedMotion: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Alternative text for screen readers. If provided, this will be announced\n * instead of the animated text.\n * @type {string}\n */\n screenReaderText: {\n type: String,\n default: '',\n },\n },\n\n emits: [\n /**\n * Emitted when the animation starts.\n * @event start\n */\n 'start',\n\n /**\n * Emitted when the animation completes.\n * @event complete\n */\n 'complete',\n\n /**\n * Emitted during animation progress.\n * @event progress\n * @type {{ wordsComplete: number, totalWords: number, progress: number }}\n */\n 'progress',\n\n /**\n * Emitted when the animation is paused.\n * @event pause\n */\n 'pause',\n\n /**\n * Emitted when the animation resumes.\n * @event resume\n */\n 'resume',\n ],\n\n data () {\n return {\n words: [],\n visibleWordCount: 0,\n visibleCharsPerWord: [],\n isAnimating: false,\n isPaused: false,\n isLooped: false,\n animationTimeouts: [],\n prefersReducedMotion: false,\n animationKey: 0,\n };\n },\n\n computed: {\n /**\n * Get timing preset based on speed prop\n */\n timing () {\n return MOTION_TEXT_TIMING_PRESETS[this.speed];\n },\n\n /**\n * Computed styles with timing CSS variables\n */\n componentStyles () {\n return {\n '--d-motion-text-duration': `${this.timing.duration}ms`,\n '--d-motion-text-char-duration': `${this.timing.duration}ms`,\n '--d-motion-text-word-duration': `${this.timing.duration * 2}ms`,\n };\n },\n\n /**\n * Check if current animation mode is static (gradient-sweep or shimmer)\n */\n isStaticAnimationMode () {\n return this.animationMode === 'gradient-sweep' || this.animationMode === 'shimmer';\n },\n\n /**\n * Computed classes for the motion text element\n */\n motionTextClasses () {\n return [\n 'd-motion-text',\n `d-motion-text--${this.animationMode}`,\n {\n 'd-motion-text--animating': this.isAnimating,\n 'd-motion-text--paused': this.isPaused,\n 'd-motion-text--looped': this.isLooped,\n },\n this.$attrs.class,\n ];\n },\n },\n\n watch: {\n text () {\n this.reset();\n this.initializeContent();\n },\n\n loop: {\n handler (newVal) {\n this.isLooped = newVal;\n },\n\n immediate: true,\n },\n },\n\n mounted () {\n this.checkReducedMotion();\n this.initializeContent();\n },\n\n beforeUnmount () {\n this.clearTimeouts();\n },\n\n methods: {\n /**\n * Self-contained text processing from DOM nodes\n */\n processTextToChars (node) {\n const words = [];\n\n const processNode = (node, index = 0) => {\n if (node.nodeType === Node.TEXT_NODE) {\n const matches = node.textContent?.match(/\\S+\\s*/g) || [];\n words.push(...matches.map((text, i) => ({\n text,\n chars: text.split(''),\n index: index + i,\n })));\n return index + matches.length;\n } else if (node.nodeType === Node.ELEMENT_NODE) {\n let currentIdx = index;\n Array.from(node.childNodes).forEach(child => {\n currentIdx = processNode(child, currentIdx);\n });\n return currentIdx;\n }\n return index;\n };\n\n processNode(node);\n return words;\n },\n\n /**\n * Process direct text prop into word/character data\n */\n processDirectText (text) {\n if (!text) return [];\n\n const matches = text.match(/\\S+\\s*/g) || [];\n return matches.map((wordText, i) => ({\n text: wordText,\n chars: wordText.split(''),\n index: i,\n }));\n },\n\n /**\n * Check for reduced motion preference\n */\n checkReducedMotion () {\n if (typeof window !== 'undefined' && window.matchMedia) {\n this.prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n }\n },\n\n /**\n * Clear all animation timeouts\n */\n clearTimeouts () {\n this.animationTimeouts.forEach(timeout => clearTimeout(timeout));\n this.animationTimeouts = [];\n },\n\n /**\n * Start the animation\n * @public\n */\n start () {\n if (this.isAnimating) return;\n\n this.isAnimating = true;\n this.isPaused = false;\n this.$emit('start');\n\n // Skip animation if reduced motion is preferred and enabled\n if (this.respectsReducedMotion && this.prefersReducedMotion) {\n this.showAllContent();\n return;\n }\n\n if (this.animationMode === 'none') {\n this.showAllContent();\n return;\n }\n\n // For gradient-sweep and shimmer modes, just mark as animating (CSS handles the animation)\n if (this.isStaticAnimationMode) {\n return;\n }\n\n // Start the word-by-word animation for \"-in\" modes\n this.showNextWord();\n },\n\n /**\n * Pause the animation\n * @public\n */\n pause () {\n if (!this.isAnimating || this.isPaused) return;\n\n this.isPaused = true;\n this.clearTimeouts();\n this.$emit('pause');\n },\n\n /**\n * Resume the animation\n * @public\n */\n resume () {\n if (!this.isPaused) return;\n\n this.isPaused = false;\n this.$emit('resume');\n this.showNextWord();\n },\n\n /**\n * Reset the animation to initial state\n * @public\n */\n reset () {\n this.clearTimeouts();\n this.isAnimating = false;\n this.isPaused = false;\n this.visibleWordCount = 0;\n this.visibleCharsPerWord = Array(this.words.length).fill(0);\n this.animationKey++;\n },\n\n /**\n * Skip to the end of the animation\n * @public\n */\n skipToEnd () {\n this.showAllContent();\n },\n\n /**\n * Show all content immediately\n */\n showAllContent () {\n this.visibleWordCount = this.words.length;\n this.visibleCharsPerWord = this.words.map(word => word.chars.length);\n setTimeout(() => {\n this.isAnimating = false;\n this.$emit('complete');\n }, 0);\n },\n\n /**\n * Show next word in sequence\n */\n showNextWord () {\n if (this.isPaused || this.visibleWordCount >= this.words.length) {\n if (this.visibleWordCount >= this.words.length) {\n this.completeAnimation();\n }\n return;\n }\n\n const timeout = setTimeout(() => {\n this.visibleWordCount++;\n this.$emit('progress', {\n wordsComplete: this.visibleWordCount,\n totalWords: this.words.length,\n progress: this.visibleWordCount / this.words.length,\n });\n\n this.animateCharsForWord(this.visibleWordCount - 1);\n }, this.timing.wordDelay);\n\n this.animationTimeouts.push(timeout);\n },\n\n /**\n * Animate characters for a specific word\n */\n animateCharsForWord (wordIdx) {\n if (this.isPaused || wordIdx >= this.words.length) return;\n\n this.visibleCharsPerWord[wordIdx] = 0;\n const chars = this.words[wordIdx].chars.length;\n\n const revealChar = () => {\n if (this.isPaused || this.visibleCharsPerWord[wordIdx] >= chars) {\n if (this.visibleCharsPerWord[wordIdx] >= chars) {\n this.showNextWord();\n }\n return;\n }\n\n this.visibleCharsPerWord[wordIdx]++;\n const timeout = setTimeout(revealChar, this.timing.characterDelay);\n this.animationTimeouts.push(timeout);\n };\n\n revealChar();\n },\n\n /**\n * Complete the animation\n */\n completeAnimation () {\n this.isAnimating = false;\n this.clearTimeouts();\n\n this.$emit('complete');\n\n if (this.loop) {\n const timeout = setTimeout(() => {\n this.reset();\n this.$nextTick(() => {\n this.start();\n });\n }, 500);\n\n this.animationTimeouts.push(timeout);\n }\n },\n\n /**\n * Initialize content based on text prop or slot content\n */\n initializeContent () {\n // For gradient-sweep and shimmer modes, skip word/character processing\n if (this.isStaticAnimationMode) {\n if (this.autoStart) {\n this.$nextTick(() => this.start());\n }\n return;\n }\n\n if (this.text) {\n this.words = this.processDirectText(this.text);\n } else if (this.$refs.contentRef) {\n this.words = this.processTextToChars(this.$refs.contentRef);\n }\n\n this.visibleCharsPerWord = Array(this.words.length).fill(0);\n this.visibleWordCount = 0;\n\n if (this.autoStart && this.words.length > 0) {\n this.$nextTick(() => this.start());\n }\n },\n },\n};\n</script>\n"],"mappings":"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"}