@dialpad/dialtone/dist/vue3/lib/motion-text/motion-text.cjs

Dialpad's Dialtone design system monorepo

Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`./motion-text-constants.cjs`);let n=require(`vue`);var r={compatConfig:{MODE:3},name:`DtMotionText`,inheritAttrs:!1,props:{text:{type:String,default:``},animationMode:{type:String,default:`gradient-in`,validator:e=>t.MOTION_TEXT_ANIMATION_MODES.includes(e)},speed:{type:String,default:`md`,validator:e=>t.MOTION_TEXT_SPEEDS.includes(e)},autoStart:{type:Boolean,default:!0},loop:{type:Boolean,default:!1},respectsReducedMotion:{type:Boolean,default:!0},screenReaderText:{type:String,default:``}},emits:[`start`,`complete`,`progress`,`pause`,`resume`],data(){return{words:[],visibleWordCount:0,visibleCharsPerWord:[],isAnimating:!1,isPaused:!1,isLooped:!1,animationTimeouts:[],prefersReducedMotion:!1,animationKey:0}},computed:{timing(){return t.MOTION_TEXT_TIMING_PRESETS[this.speed]},componentStyles(){return{"--d-motion-text-duration":`${this.timing.duration}ms`,"--d-motion-text-char-duration":`${this.timing.duration}ms`,"--d-motion-text-word-duration":`${this.timing.duration*2}ms`}},isStaticAnimationMode(){return this.animationMode===`gradient-sweep`||this.animationMode===`shimmer`},motionTextClasses(){return[`d-motion-text`,`d-motion-text--${this.animationMode}`,{"d-motion-text--animating":this.isAnimating,"d-motion-text--paused":this.isPaused,"d-motion-text--looped":this.isLooped},this.$attrs.class]}},watch:{text(){this.reset(),this.initializeContent()},loop:{handler(e){this.isLooped=e},immediate:!0}},mounted(){this.checkReducedMotion(),this.initializeContent()},beforeUnmount(){this.clearTimeouts()},methods:{processTextToChars(e){let t=[],n=(e,r=0)=>{if(e.nodeType===Node.TEXT_NODE){let n=e.textContent?.match(/\S+\s*/g)||[];return t.push(...n.map((e,t)=>({text:e,chars:e.split(``),index:r+t}))),r+n.length}else if(e.nodeType===Node.ELEMENT_NODE){let t=r;return Array.from(e.childNodes).forEach(e=>{t=n(e,t)}),t}return r};return n(e),t},processDirectText(e){return e?(e.match(/\S+\s*/g)||[]).map((e,t)=>({text:e,chars:e.split(``),index:t})):[]},checkReducedMotion(){typeof window<`u`&&window.matchMedia&&(this.prefersReducedMotion=window.matchMedia(`(prefers-reduced-motion: reduce)`).matches)},clearTimeouts(){this.animationTimeouts.forEach(e=>clearTimeout(e)),this.animationTimeouts=[]},start(){if(!this.isAnimating){if(this.isAnimating=!0,this.isPaused=!1,this.$emit(`start`),this.respectsReducedMotion&&this.prefersReducedMotion){this.showAllContent();return}if(this.animationMode===`none`){this.showAllContent();return}this.isStaticAnimationMode||this.showNextWord()}},pause(){!this.isAnimating||this.isPaused||(this.isPaused=!0,this.clearTimeouts(),this.$emit(`pause`))},resume(){this.isPaused&&(this.isPaused=!1,this.$emit(`resume`),this.showNextWord())},reset(){this.clearTimeouts(),this.isAnimating=!1,this.isPaused=!1,this.visibleWordCount=0,this.visibleCharsPerWord=Array(this.words.length).fill(0),this.animationKey++},skipToEnd(){this.showAllContent()},showAllContent(){this.visibleWordCount=this.words.length,this.visibleCharsPerWord=this.words.map(e=>e.chars.length),setTimeout(()=>{this.isAnimating=!1,this.$emit(`complete`)},0)},showNextWord(){if(this.isPaused||this.visibleWordCount>=this.words.length){this.visibleWordCount>=this.words.length&&this.completeAnimation();return}let e=setTimeout(()=>{this.visibleWordCount++,this.$emit(`progress`,{wordsComplete:this.visibleWordCount,totalWords:this.words.length,progress:this.visibleWordCount/this.words.length}),this.animateCharsForWord(this.visibleWordCount-1)},this.timing.wordDelay);this.animationTimeouts.push(e)},animateCharsForWord(e){if(this.isPaused||e>=this.words.length)return;this.visibleCharsPerWord[e]=0;let t=this.words[e].chars.length,n=()=>{if(this.isPaused||this.visibleCharsPerWord[e]>=t){this.visibleCharsPerWord[e]>=t&&this.showNextWord();return}this.visibleCharsPerWord[e]++;let r=setTimeout(n,this.timing.characterDelay);this.animationTimeouts.push(r)};n()},completeAnimation(){if(this.isAnimating=!1,this.clearTimeouts(),this.$emit(`complete`),this.loop){let e=setTimeout(()=>{this.reset(),this.$nextTick(()=>{this.start()})},500);this.animationTimeouts.push(e)}},initializeContent(){if(this.isStaticAnimationMode){this.autoStart&&this.$nextTick(()=>this.start());return}this.text?this.words=this.processDirectText(this.text):this.$refs.contentRef&&(this.words=this.processTextToChars(this.$refs.contentRef)),this.visibleCharsPerWord=Array(this.words.length).fill(0),this.visibleWordCount=0,this.autoStart&&this.words.length>0&&this.$nextTick(()=>this.start())}}},i=[`data-text-content`,`aria-live`,`aria-label`],a={key:0,class:`d-motion-text__sr-only`},o=[`aria-hidden`],s=[`data-text-content`],c={key:3,class:`d-motion-text__fallback`};function l(e,t,r,l,u,d){return(0,n.openBlock)(),(0,n.createElementBlock)(`span`,{ref:`contentRef`,class:(0,n.normalizeClass)(d.motionTextClasses),style:(0,n.normalizeStyle)(d.componentStyles),"data-text-content":d.isStaticAnimationMode?r.text:void 0,"aria-live":u.isAnimating?`polite`:`off`,"aria-label":r.screenReaderText||void 0},[r.screenReaderText?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,a,(0,n.toDisplayString)(r.screenReaderText),1)):(0,n.createCommentVNode)(``,!0),d.isStaticAnimationMode?((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,{key:1},[(0,n.createTextVNode)((0,n.toDisplayString)(r.text)+` `,1),r.text?(0,n.createCommentVNode)(``,!0):(0,n.renderSlot)(e.$slots,`default`,{key:0})],64)):((0,n.openBlock)(),(0,n.createElementBlock)(`span`,{key:u.animationKey,class:`d-motion-text__content`,"aria-hidden":u.isAnimating},[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(u.words,(e,t)=>((0,n.openBlock)(),(0,n.createBlock)(n.Transition,{key:`${u.animationKey}-${t}`,name:`d-motion-text-word-${r.animationMode}`},{default:(0,n.withCtx)(()=>[t<u.visibleWordCount?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,{key:0,class:`d-motion-text__word`,"data-text-content":e.text,style:(0,n.normalizeStyle)({"--word-index":t})},[((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(e.chars,(e,i)=>((0,n.openBlock)(),(0,n.createBlock)(n.Transition,{key:`${u.animationKey}-${t}-${i}`,name:`d-motion-text-char-${r.animationMode}`},{default:(0,n.withCtx)(()=>[i<u.visibleCharsPerWord[t]?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,{key:0,class:`d-motion-text__char`,style:(0,n.normalizeStyle)({"--char-index":i,"--char-delay":`${i*d.timing.characterDelay}ms`})},(0,n.toDisplayString)(e),5)):(0,n.createCommentVNode)(``,!0)]),_:2},1032,[`name`]))),128))],12,s)):(0,n.createCommentVNode)(``,!0)]),_:2},1032,[`name`]))),128))],8,o)),!u.words.length&&!r.text&&!d.isStaticAnimationMode?((0,n.openBlock)(),(0,n.createElementBlock)(`span`,c,[(0,n.renderSlot)(e.$slots,`default`)])):(0,n.createCommentVNode)(``,!0)],14,i)}var u=e.t(r,[[`render`,l]]);exports.default=u;
//# sourceMappingURL=motion-text.cjs.map