ly-scale-screen
Version:
2 lines (1 loc) • 2.88 kB
JavaScript
var LyScaleScreen=function(o){"use strict";function m(t,r){let l;return function(...e){l&&clearTimeout(l),l=setTimeout(()=>{typeof t=="function"&&t.apply(null,e),clearTimeout(l)},r>0?r:100)}}return o.defineComponent({name:"VScaleScreen",props:{width:{type:[String,Number],default:1920},height:{type:[String,Number],default:1080},fullScreen:{type:Boolean,default:!1},autoScale:{type:[Object,Boolean],default:!0},delay:{type:Number,default:500},boxStyle:{type:Object,default:()=>({})},wrapperStyle:{type:Object,default:()=>({})},bodyOverflowHidden:{type:Boolean,default:!0}},setup(t,{slots:r}){let l;const e=o.reactive({width:0,height:0,originalWidth:0,originalHeight:0,observer:null}),g={box:{overflow:"hidden",backgroundSize:"100% 100%",backgroundColor:"#000",width:"100vw",height:"100vh"},wrapper:{transitionProperty:"all",transitionTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)",transitionDuration:"500ms",position:"relative",overflow:"hidden",zIndex:100,transformOrigin:"left top"}},n=o.ref(),w=()=>new Promise(i=>{o.nextTick(()=>{var a,c;t.width&&t.height?(e.width=t.width,e.height=t.height):(e.width=(a=n.value)==null?void 0:a.clientWidth,e.height=(c=n.value)==null?void 0:c.clientHeight),(!e.originalHeight||!e.originalWidth)&&(e.originalWidth=window.screen.width,e.originalHeight=window.screen.height),i()})});function v(){t.bodyOverflowHidden&&(l=document.body.style.overflow,document.body.style.overflow="hidden")}const b=()=>{e.width&&e.height?(n.value.style.width=`${e.width}px`,n.value.style.height=`${e.height}px`):(n.value.style.width=`${e.originalWidth}px`,n.value.style.height=`${e.originalHeight}px`)},S=i=>{if(!t.autoScale)return;const a=n.value.clientWidth,c=n.value.clientHeight,f=document.body.clientWidth,h=document.body.clientHeight;n.value.style.transform=`scale(${i},${i})`;let d=Math.max((f-a*i)/2,0),u=Math.max((h-c*i)/2,0);typeof t.autoScale=="object"&&(!t.autoScale.x&&(d=0),!t.autoScale.y&&(u=0)),n.value.style.margin=`${u}px ${d}px`},s=()=>{const i=document.body.clientWidth,a=document.body.clientHeight,c=e.width||e.originalWidth,f=e.height||e.originalHeight,h=i/+c,d=a/+f;if(t.fullScreen)return n.value.style.transform=`scale(${h},${d})`,!1;const u=Math.min(h,d);S(u)},y=m(async()=>{await w(),b(),s()},t.delay),x=()=>{(e.observer=new MutationObserver(()=>{y()})).observe(n.value,{attributes:!0,attributeFilter:["style"],attributeOldValue:!0})};return o.onMounted(()=>{v(),o.nextTick(async()=>{await w(),b(),s(),window.addEventListener("resize",y),x()})}),o.onUnmounted(()=>{var i;window.removeEventListener("resize",y),(i=e.observer)==null||i.disconnect(),t.bodyOverflowHidden&&(document.body.style.overflow=l)}),o.onActivated(s),()=>{var i;return o.h("div",{className:"v-screen-box",style:{...g.box,...t.boxStyle}},[o.h("div",{className:"screen-wrapper",style:{...g.wrapper,...t.wrapperStyle},ref:n},(i=r.default)==null?void 0:i.call(r))])}}})}(Vue);