ly-scale-screen
Version:
2 lines (1 loc) • 3.09 kB
JavaScript
(function(i,c){typeof exports=="object"&&typeof module<"u"?module.exports=c(require("vue")):typeof define=="function"&&define.amd?define(["vue"],c):(i=typeof globalThis<"u"?globalThis:i||self,i.LyScaleScreen=c(i.Vue))})(this,function(i){"use strict";function c(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 i.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=i.reactive({width:0,height:0,originalWidth:0,originalHeight:0,observer:null}),w={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"}},o=i.ref(),b=()=>new Promise(n=>{i.nextTick(()=>{var a,d;t.width&&t.height?(e.width=t.width,e.height=t.height):(e.width=(a=o.value)==null?void 0:a.clientWidth,e.height=(d=o.value)==null?void 0:d.clientHeight),(!e.originalHeight||!e.originalWidth)&&(e.originalWidth=window.screen.width,e.originalHeight=window.screen.height),n()})});function v(){t.bodyOverflowHidden&&(l=document.body.style.overflow,document.body.style.overflow="hidden")}const m=()=>{e.width&&e.height?(o.value.style.width=`${e.width}px`,o.value.style.height=`${e.height}px`):(o.value.style.width=`${e.originalWidth}px`,o.value.style.height=`${e.originalHeight}px`)},S=n=>{if(!t.autoScale)return;const a=o.value.clientWidth,d=o.value.clientHeight,g=document.body.clientWidth,h=document.body.clientHeight;o.value.style.transform=`scale(${n},${n})`;let u=Math.max((g-a*n)/2,0),s=Math.max((h-d*n)/2,0);typeof t.autoScale=="object"&&(!t.autoScale.x&&(u=0),!t.autoScale.y&&(s=0)),o.value.style.margin=`${s}px ${u}px`},f=()=>{const n=document.body.clientWidth,a=document.body.clientHeight,d=e.width||e.originalWidth,g=e.height||e.originalHeight,h=n/+d,u=a/+g;if(t.fullScreen)return o.value.style.transform=`scale(${h},${u})`,!1;const s=Math.min(h,u);S(s)},y=c(async()=>{await b(),m(),f()},t.delay),x=()=>{(e.observer=new MutationObserver(()=>{y()})).observe(o.value,{attributes:!0,attributeFilter:["style"],attributeOldValue:!0})};return i.onMounted(()=>{v(),i.nextTick(async()=>{await b(),m(),f(),window.addEventListener("resize",y),x()})}),i.onUnmounted(()=>{var n;window.removeEventListener("resize",y),(n=e.observer)==null||n.disconnect(),t.bodyOverflowHidden&&(document.body.style.overflow=l)}),i.onActivated(f),()=>{var n;return i.h("div",{className:"v-screen-box",style:{...w.box,...t.boxStyle}},[i.h("div",{className:"screen-wrapper",style:{...w.wrapper,...t.wrapperStyle},ref:o},(n=r.default)==null?void 0:n.call(r))])}}})});