2 lines
9.6 KiB
JavaScript
2 lines
9.6 KiB
JavaScript
import{d as Bt,w as Ht,P as O,o as Et,a as Wt,u as Y,m as d,c as f,f as y,B as M,z as S,e as k,t as b,n as Lt,j as C,k as u,D as Dt,l as F}from"./index.js";import{e as Rt,s as Nt}from"./main.js";import"./_plugin-vue_export-helper.js";import"./useMarkdownRenderer.js";import"./CloseButton.js";const Yt={class:"tutorial-popover__header"},Pt={class:"tutorial-popover__step"},zt={class:"tutorial-popover__title"},It={class:"tutorial-popover__desc"},qt={key:0,class:"tutorial-popover__warn"},Vt={key:1,class:"tutorial-popover__hint"},Gt={key:2,class:"tutorial-popover__hint"},Ot={class:"tutorial-popover__actions"},Ft=["disabled"],X=14,j=2,Zt=Bt({name:"TutorialOverlay",__name:"TutorialOverlay",setup(Xt){const x=Rt(),{running:E,activeStep:i,visibleStepIndex:rt,totalVisibleSteps:st}=Nt(x),Q=C(null),c=C(null),_=C(120),$=C(120),A=C("center"),W=C(null);let P=null,m=null,z=null;const p=C(!0),L=u(()=>{var t;return((t=i.value)==null?void 0:t.mode)==="must_click"}),ut=u(()=>{var t;return((t=i.value)==null?void 0:t.id)==="done"}),ct=u(()=>{var t;return!!((t=i.value)!=null&&t.target)&&!c.value}),D=u(()=>!!c.value),Z=u(()=>L.value&&!!c.value),U=u(()=>{var e;const t=((e=i.value)==null?void 0:e.id)||"";return t==="personal-overview"||t==="open-personal-space"||t==="close-personal-space"||t.startsWith("tab-")||t.startsWith("page-")}),vt=u(()=>U.value),pt=u(()=>(Dt.value,ut.value?F("overlay.tutorialComplete"):L.value?c.value?F("overlay.tutorialClickFirst"):F("overlay.tutorialNextSkip"):F("overlay.tutorialNext"))),I=u(()=>({pointerEvents:"auto"})),R=u(()=>{if(!c.value)return null;const t=Math.max(0,c.value.top-j),e=Math.max(0,c.value.left-j),l=Math.max(12,c.value.width+j*2),o=Math.max(12,c.value.height+j*2);return{top:t,left:e,width:l,height:o,right:e+l,bottom:t+o}}),ht=u(()=>{const t=R.value;return t?{top:"0px",left:"0px",width:"100vw",height:`${Math.max(0,t.top)}px`}:{}}),dt=u(()=>{const t=R.value;return t?{top:`${t.top}px`,left:"0px",width:`${Math.max(0,t.left)}px`,height:`${t.height}px`}:{}}),ft=u(()=>{const t=R.value;return t?{top:`${t.top}px`,left:`${t.right}px`,width:`${Math.max(0,window.innerWidth-t.right)}px`,height:`${t.height}px`}:{}}),mt=u(()=>{const t=R.value;return t?{top:`${t.bottom}px`,left:"0px",width:"100vw",height:`${Math.max(0,window.innerHeight-t.bottom)}px`}:{}}),wt=u(()=>{const t=R.value;return t?{top:`${t.top}px`,left:`${t.left}px`,width:`${t.width}px`,height:`${t.height}px`}:{}}),gt=u(()=>({top:`${_.value}px`,left:`${$.value}px`})),tt=()=>{var s,a;if(!((s=i.value)!=null&&s.target))return x.setActiveSelector(null),null;const t=Array.from(document.querySelectorAll(i.value.target)),e=window.innerWidth,l=window.innerHeight,n=((a=t.map(r=>{const v=r.getBoundingClientRect(),N=window.getComputedStyle(r),w=Math.max(0,v.width)*Math.max(0,v.height),V=Math.max(0,Math.min(v.right,e)-Math.max(v.left,0)),G=Math.max(0,Math.min(v.bottom,l)-Math.max(v.top,0)),g=V*G;return{node:r,rect:v,area:w,visibleArea:g,display:N.display,visibility:N.visibility,opacity:Number(N.opacity||"1")}}).filter(r=>r.area<=0||r.visibleArea<=0||r.display==="none"||r.visibility==="hidden"?!1:r.opacity>.01).sort((r,v)=>v.visibleArea!==r.visibleArea?v.visibleArea-r.visibleArea:r.area-v.area)[0])==null?void 0:a.node)||null;return x.setActiveSelector(i.value.target),n},B=(t,e,l)=>Math.min(Math.max(t,e),l),et=t=>{var V,G;const e=Q.value;if(!e)return;const l=Math.max(280,e.offsetWidth||320),o=Math.max(170,e.offsetHeight||200),n=window.innerWidth,s=window.innerHeight,a=16;if(!t||((V=i.value)==null?void 0:V.placement)==="center"){A.value="center",$.value=B((n-l)/2,a,Math.max(a,n-l-a)),_.value=B((s-o)/2,a,Math.max(a,s-o-a));return}const r=((G=i.value)==null?void 0:G.placement)||"auto",v={top:t.top,right:n-t.right,bottom:s-t.bottom,left:t.left},N=r==="auto"?["right","bottom","left","top"].sort((g,h)=>v[h]-v[g]):[r,"right","bottom","left","top"];let w=null;for(const g of Array.from(new Set(N))){let h=0,T=0;g==="right"?(T=t.right+X,h=t.top+t.height/2-o/2):g==="left"?(T=t.left-l-X,h=t.top+t.height/2-o/2):g==="top"?(T=t.left+t.width/2-l/2,h=t.top-o-X):(T=t.left+t.width/2-l/2,h=t.bottom+X);const J=B(T,a,Math.max(a,n-l-a)),K=B(h,a,Math.max(a,s-o-a)),_t=T>=a&&h>=a&&T+l<=n-a&&h+o<=s-a,$t=Math.max(0,Math.min(J+l,t.right)-Math.max(J,t.left)),At=Math.max(0,Math.min(K+o,t.bottom)-Math.max(K,t.top)),it=$t*At;if(_t){A.value=g,$.value=T,_.value=h;return}(!w||it<w.overlap)&&(w={p:g,left:J,top:K,overlap:it})}if(w){A.value=w.p,$.value=w.left,_.value=w.top;return}A.value="center",$.value=B((n-l)/2,a,Math.max(a,n-l-a)),_.value=B((s-o)/2,a,Math.max(a,s-o-a))},H=()=>{var l;if(!E.value){c.value=null;return}const t=tt();if(!t){c.value=null,A.value=((l=i.value)==null?void 0:l.placement)||"center",et(null);return}const e=t.getBoundingClientRect();c.value=e.width>0&&e.height>0?{top:e.top,left:e.left,width:e.width,height:e.height,right:e.right,bottom:e.bottom}:null,et(c.value)},q=()=>{window.setTimeout(H,30)},yt=()=>{p.value=!1,c.value=null,$.value=-9999,_.value=-9999,m&&(window.clearTimeout(m),m=null)},lt=t=>{var l;if(!E.value||!L.value||!((l=i.value)!=null&&l.target))return;const e=t.target;e&&e.closest(i.value.target)&&window.setTimeout(()=>x.goNext(),280)},ot=()=>{const e=Array.from(document.querySelectorAll(".personalization-content .personal-page")).find(o=>o.scrollHeight-o.clientHeight>2);if(e)return e;const l=document.querySelector(".personalization-content");return l&&l.scrollHeight-l.clientHeight>2?l:document.querySelector('[data-tutorial="personal-content-shell"]')||l},kt=t=>{if(!U.value){t.preventDefault();return}const e=ot();if(!e){t.preventDefault();return}e.scrollBy({top:t.deltaY,left:0,behavior:"auto"}),t.preventDefault()},bt=t=>{t.touches.length&&(z=t.touches[0].clientY)},xt=t=>{if(!t.touches.length)return;const e=t.touches[0].clientY,o=(z??e)-e;if(z=e,!U.value){t.preventDefault();return}const n=ot();if(!n){t.preventDefault();return}n.scrollBy({top:o,left:0,behavior:"auto"}),t.preventDefault()},at=()=>{z=null},nt=t=>{if(!t)return;const e=t.getBoundingClientRect(),l=e.left+e.width/2,o=e.top+e.height/2;W.value={x:l,y:o},window.setTimeout(()=>{W.value=null},460)},Tt=()=>i.value?i.value.id.startsWith("tab-")?!0:window.innerWidth<=768&&i.value.id==="mobile-menu-personal":!1,Mt=()=>{var l,o,n;if((l=i.value)!=null&&l.autoOutsideClick){const a=document.querySelector(".model-mode-dropdown")||document.body;return nt(a),window.setTimeout(()=>{const r=new MouseEvent("click",{bubbles:!0,cancelable:!0,clientX:12,clientY:12});document.body.dispatchEvent(r)},420),!0}if(!((o=i.value)!=null&&o.autoClick)||!((n=i.value)!=null&&n.target))return!1;const t=tt();if(!t)return!1;const e=Tt();if(e){const s=window.innerWidth<=768;t.scrollIntoView({behavior:"smooth",block:s?"nearest":"center",inline:s?"center":"nearest"})}return window.setTimeout(()=>{nt(t)},e?220:0),window.setTimeout(()=>{t.click()},e?640:420),!0},St=()=>{var t;if(!Z.value){if(yt(),((t=i.value)==null?void 0:t.id)==="done"){x.finishTutorial();return}if(!L.value&&Mt()){window.setTimeout(()=>x.goNext(),700);return}x.goNext()}},Ct=()=>x.exitTutorial();return Ht(()=>{var t;return[E.value,(t=i.value)==null?void 0:t.id]},async([,t],[e,l])=>{if(!E.value){c.value=null,p.value=!0;return}if(!!e&&!!l&&l!==t){p.value=!1,m&&window.clearTimeout(m);const n=i.value,s=(n==null?void 0:n.mode)==="must_click"||n!=null&&n.autoClick||n!=null&&n.autoOutsideClick?500:0;m=window.setTimeout(async()=>{await O(),H(),await O(),H(),p.value=!0},s);return}await O(),H(),await O(),H(),p.value=!0}),Et(()=>{window.addEventListener("click",lt,!0),window.addEventListener("resize",q),window.addEventListener("scroll",q,!0),P=window.setInterval(H,260)}),Wt(()=>{window.removeEventListener("click",lt,!0),window.removeEventListener("resize",q),window.removeEventListener("scroll",q,!0),P&&(window.clearInterval(P),P=null),m&&(window.clearTimeout(m),m=null)}),(t,e)=>{var l,o;return Y(E)?(d(),f("div",{key:0,class:"tutorial-overlay","aria-live":"polite",onWheel:kt,onTouchstart:bt,onTouchmove:M(xt,["prevent"]),onTouchend:at,onTouchcancel:at},[y("div",{class:"tutorial-click-blocker",onClick:e[0]||(e[0]=M(()=>{},["stop"]))}),p.value&&D.value?(d(),f("div",{key:0,class:"tutorial-mask",style:S([ht.value,I.value]),onClick:e[1]||(e[1]=M(()=>{},["stop"]))},null,4)):k("",!0),p.value&&D.value?(d(),f("div",{key:1,class:"tutorial-mask",style:S([dt.value,I.value]),onClick:e[2]||(e[2]=M(()=>{},["stop"]))},null,4)):k("",!0),p.value&&D.value?(d(),f("div",{key:2,class:"tutorial-mask",style:S([ft.value,I.value]),onClick:e[3]||(e[3]=M(()=>{},["stop"]))},null,4)):k("",!0),p.value&&D.value?(d(),f("div",{key:3,class:"tutorial-mask",style:S([mt.value,I.value]),onClick:e[4]||(e[4]=M(()=>{},["stop"]))},null,4)):k("",!0),p.value&&D.value?(d(),f("div",{key:4,class:"tutorial-highlight",style:S(wt.value),"aria-hidden":"true"},null,4)):k("",!0),W.value?(d(),f("span",{key:5,class:"tutorial-click-effect",style:S({left:`${W.value.x-9}px`,top:`${W.value.y-9}px`}),"aria-hidden":"true"},null,4)):k("",!0),y("section",{ref_key:"panelRef",ref:Q,class:Lt(["tutorial-popover",[`placement-${A.value}`,{"is-hidden":!p.value}]]),style:S(gt.value),onClick:e[5]||(e[5]=M(()=>{},["stop"]))},[y("header",Yt,[y("span",Pt,b(Y(rt))+" / "+b(Y(st)),1),y("button",{type:"button",class:"tutorial-popover__close",onClick:Ct},b(t.$t("overlay.tutorialExit")),1)]),y("h3",zt,b(((l=Y(i))==null?void 0:l.title)||t.$t("overlay.tutorialFallbackTitle")),1),y("p",It,b(((o=Y(i))==null?void 0:o.description)||""),1),ct.value?(d(),f("p",qt,b(t.$t("overlay.tutorialWaitingTarget")),1)):L.value?(d(),f("p",Vt,b(t.$t("overlay.tutorialMustClickHint")),1)):k("",!0),vt.value?(d(),f("p",Gt,b(t.$t("overlay.tutorialScrollHint")),1)):k("",!0),y("footer",Ot,[y("button",{type:"button",class:"tutorial-btn",disabled:Z.value,onClick:St},b(pt.value),9,Ft)])],6)],32)):k("",!0)}}});export{Zt as default};
|