@fiddle-digital/string-responsive
Version:
StringResponsive is a comprehensive JavaScript library for responsive design management in web applications. It enables dynamic handling of device-specific media queries and events, allowing developers to programmatically adjust UI and functionality based
1 lines • 6.2 kB
JavaScript
var t={d:(e,i)=>{for(var a in i)t.o(i,a)&&!t.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:i[a]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{A:()=>o});let i=null,a=null;class s{constructor(t,e){this.min=void 0,this.max=void 0,this.enable=!0,this.min=null!=t?t:void 0,this.max=null!=e?e:void 0}setEnable(t=!0){this.enable=t}setRange(t,e){this.min=null!=t?t:void 0,this.max=null!=e?e:void 0}}class n{constructor(t,e){this.eventsIn=new Array,this.eventsOut=new Array,this.stringResponsive=t,this.state=e}addIn(t){this.eventsIn.includes(t)||this.eventsIn.push(t),this.stringResponsive.state==this.state&&t()}removeIn(t){const e=this.eventsIn.indexOf(t);-1!==e&&this.eventsIn.splice(e,1)}callIn(){this.eventsIn.forEach((t=>{t()}))}addOut(t){this.eventsOut.includes(t)||this.eventsOut.push(t),this.stringResponsive.state!=this.state&&t()}removeOut(t){const e=this.eventsOut.indexOf(t);-1!==e&&this.eventsOut.splice(e,1)}callOut(){this.eventsOut.forEach((t=>{t()}))}}var h;!function(t){t[t.Mobile=0]="Mobile",t[t.Tablet=1]="Tablet",t[t.Laptop=2]="Laptop",t[t.Desktop=3]="Desktop"}(h||(h={}));class l{get state(){return this._state}constructor(){this._state=h.Mobile,i=document,a=window,this.mobileQuery=new s(void 0,359),this.tabletQuery=new s(360,1079),this.laptopQuery=new s(1080,1365),this.desktopQuery=new s(1366,void 0),this.mobileMatchMedia=window.matchMedia("screen and (max-width: 359px)"),this.tabletMatchMedia=window.matchMedia("screen and (min-width: 360px) and (min-width: 1079px)"),this.laptopMatchMedia=window.matchMedia("screen and (min-width: 1080px) and (min-width: 1365px)"),this.desktopMatchMedia=window.matchMedia("screen and (min-width: 1366px)"),this.onMobileEvent=this.onMobileQuery.bind(this),this.onTabletEvent=this.onTabletQuery.bind(this),this.onLaptopEvent=this.onLaptopQuery.bind(this),this.onDesktopEvent=this.onDesktopQuery.bind(this),this.setupQueries(),this.matchMedia(),this.mobile=new n(this,h.Mobile),this.tablet=new n(this,h.Tablet),this.laptop=new n(this,h.Laptop),this.desktop=new n(this,h.Desktop)}static getInstance(){return l.instance||(l.instance=new l),l.instance}setQuery(t){var e,i,a,s,n,h,l,o;t.mobile&&(this.mobileQuery.setEnable(null!==(e=t.mobile.enable)&&void 0!==e?e:this.mobileQuery.enable),this.mobileQuery.setRange(null==t.mobile.min?this.mobileQuery.min:t.mobile.min,null!==(i=t.mobile.max)&&void 0!==i?i:this.mobileQuery.max)),t.tablet&&(this.tabletQuery.setEnable(null!==(a=t.tablet.enable)&&void 0!==a?a:this.tabletQuery.enable),this.tabletQuery.setRange(null==t.tablet.min?this.tabletQuery.min:t.tablet.min,null!==(s=t.tablet.max)&&void 0!==s?s:this.tabletQuery.max)),t.laptop&&(this.laptopQuery.setEnable(null!==(n=t.laptop.enable)&&void 0!==n?n:this.laptopQuery.enable),this.laptopQuery.setRange(null==t.laptop.min?this.laptopQuery.min:t.laptop.min,null!==(h=t.laptop.max)&&void 0!==h?h:this.laptopQuery.max)),t.desktop&&(this.desktopQuery.setEnable(null!==(l=t.desktop.enable)&&void 0!==l?l:this.desktopQuery.enable),this.desktopQuery.setRange(null==t.desktop.min?this.desktopQuery.min:t.desktop.min,null!==(o=t.desktop.max)&&void 0!==o?o:this.desktopQuery.max)),this.setupQueries(),this.matchMedia(),console.log(this.state)}setupQueries(){this.mobileMatchMedia.onchange=null,this.mobileQuery.enable&&(null!=this.mobileQuery.min&&null!=this.mobileQuery.max?this.mobileMatchMedia=window.matchMedia(`screen and (min-width: ${this.mobileQuery.min}px) and (max-width: ${this.mobileQuery.max}px)`):(null!=this.mobileQuery.min&&(this.mobileMatchMedia=window.matchMedia(`screen and (min-width: ${this.mobileQuery.min}px)`)),null!=this.mobileQuery.max&&(this.mobileMatchMedia=window.matchMedia(`screen and (max-width: ${this.mobileQuery.max}px)`))),this.mobileMatchMedia.onchange=this.onMobileEvent),this.tabletMatchMedia.onchange=null,this.tabletQuery.enable&&(null!=this.tabletQuery.min&&null!=this.tabletQuery.max?this.tabletMatchMedia=window.matchMedia(`screen and (min-width: ${this.tabletQuery.min}px) and (max-width: ${this.tabletQuery.max}px)`):(null!=this.tabletQuery.min&&(this.tabletMatchMedia=window.matchMedia(`screen and (min-width: ${this.tabletQuery.min}px)`)),null!=this.tabletQuery.max&&(this.tabletMatchMedia=window.matchMedia(`screen and (max-width: ${this.tabletQuery.max}px)`))),this.tabletMatchMedia.onchange=this.onTabletEvent),this.laptopMatchMedia.onchange=null,this.laptopQuery.enable&&(null!=this.laptopQuery.min&&null!=this.laptopQuery.max?this.laptopMatchMedia=window.matchMedia(`screen and (min-width: ${this.laptopQuery.min}px) and (max-width: ${this.laptopQuery.max}px)`):(null!=this.laptopQuery.min&&(this.laptopMatchMedia=window.matchMedia(`screen and (min-width: ${this.laptopQuery.min}px)`)),null!=this.laptopQuery.max&&(this.laptopMatchMedia=window.matchMedia(`screen and (max-width: ${this.laptopQuery.max}px)`))),this.laptopMatchMedia.onchange=this.onLaptopEvent),this.desktopMatchMedia.onchange=null,this.desktopQuery.enable&&(null!=this.desktopQuery.min&&null!=this.desktopQuery.max?this.desktopMatchMedia=window.matchMedia(`screen and (min-width: ${this.desktopQuery.min}px) and (max-width: ${this.desktopQuery.max}px)`):(null!=this.desktopQuery.min&&(this.desktopMatchMedia=window.matchMedia(`screen and (min-width: ${this.desktopQuery.min}px)`)),null!=this.desktopQuery.max&&(this.desktopMatchMedia=window.matchMedia(`screen and (max-width: ${this.desktopQuery.max}px)`))),this.desktopMatchMedia.onchange=this.onDesktopEvent)}matchMedia(){this.mobileMatchMedia.matches&&this.mobileQuery.enable&&(this._state=h.Mobile),this.tabletMatchMedia.matches&&this.tabletQuery.enable&&(this._state=h.Tablet),this.laptopMatchMedia.matches&&this.laptopQuery.enable&&(this._state=h.Laptop),this.desktopMatchMedia.matches&&this.desktopQuery.enable&&(this._state=h.Desktop)}onMobileQuery(t){t.matches?(this._state=h.Mobile,this.mobile.callIn()):this.mobile.callOut()}onTabletQuery(t){t.matches?(this._state=h.Tablet,this.tablet.callIn()):this.tablet.callOut()}onLaptopQuery(t){t.matches?(this._state=h.Laptop,this.laptop.callIn()):this.laptop.callOut()}onDesktopQuery(t){t.matches?(this._state=h.Desktop,this.desktop.callIn()):this.desktop.callOut()}}const o=l;var d=e.A;export{d as default};