component---src-pages-toolbox-browser-viewport-tsx-c3ef2259fd0d5f1c7494.js.map

{"version":3,"sources":["webpack:///./src/pages/toolbox/browser-viewport.tsx"],"names":["BrowserViewport","useState","innerWidth","setInnerWidth","innerHeight","setInnerHeight","outerWidth","setOuterWidth","outerHeight","setOuterHeight","clientWidth","setClientWidth","clientHeight","setClientHeight","screenWidth","setScreenWidth","screenHeight","setScreenHeight","screenAvailWidth","setScreenAvailWidth","screenAvailHeight","setScreenAvailHeight","screenOrientation","setScreenOrientation","screenDeviceXDPI","setScreenDeviceXDPI","devicePixelRatio","setDevicePixelRatio","getSize","hasWindow","screen","window","document","documentElement","width","height","availWidth","availHeight","msOrientation","mozOrientation","orientation","type","deviceXDPI","useEffect","addEventListener","removeEventListener","title","cellSpacing","className","colSpan"],"mappings":"mMAkIeA,UA5Ha,WAAM,MACIC,mBAAS,IADb,mBACzBC,EADyB,KACbC,EADa,OAEMF,mBAAS,IAFf,mBAEzBG,EAFyB,KAEZC,EAFY,OAGIJ,mBAAS,IAHb,mBAGzBK,EAHyB,KAGbC,EAHa,OAIMN,mBAAS,IAJf,mBAIzBO,EAJyB,KAIZC,EAJY,OAKMR,mBAAS,IALf,mBAKzBS,EALyB,KAKZC,EALY,OAMQV,mBAAS,IANjB,mBAMzBW,EANyB,KAMXC,EANW,OAOMZ,mBAAS,IAPf,mBAOzBa,EAPyB,KAOZC,EAPY,OAQQd,mBAAS,IARjB,mBAQzBe,EARyB,KAQXC,EARW,OASgBhB,mBAAS,IATzB,mBASzBiB,EATyB,KASPC,EATO,OAUkBlB,mBAAS,IAV3B,mBAUzBmB,EAVyB,KAUNC,EAVM,OAWkBpB,mBAAS,IAX3B,mBAWzBqB,EAXyB,KAWNC,EAXM,OAYgBtB,mBAAS,IAZzB,mBAYzBuB,EAZyB,KAYPC,EAZO,OAagBxB,mBAAS,IAbzB,oBAazByB,GAbyB,MAaPC,GAbO,MAe1BC,GAAU,WACd,GAAKC,cAAL,CAEA,IACMC,EADUC,OACOD,OACvB3B,EAAc4B,OAAO7B,WAAa,OAClCG,EAAe0B,OAAO3B,YAAc,OACpCG,EAAcwB,OAAOzB,WAAa,OAClCG,EAAesB,OAAOvB,YAAc,OACpCG,EAAeqB,SAASC,gBAAgBvB,YAAc,OACtDG,EAAgBmB,SAASC,gBAAgBrB,aAAe,OACxDG,EAAee,EAAOI,MAAQ,OAC9BjB,EAAgBa,EAAOK,OAAS,OAChChB,EAAoBW,EAAOM,WAAa,OACxCf,EAAqBS,EAAOO,YAAc,OAC1Cd,GAAsBO,EAAOQ,eAAiBR,EAAOS,gBAAkBT,EAAOU,aAAe,CAAEC,KAAM,KAAMA,MAC3GhB,EAAoBK,EAAOY,WAAcZ,EAAOY,WAAa,MAAS,OACtEf,GAAoBI,OAAOL,iBAAmB,MAehD,OAZAiB,qBAAU,WAGR,GAFAf,KAEKC,cAGL,OAFAE,OAAOa,iBAAiB,SAAUhB,IAE3B,WACAC,eACLE,OAAOc,oBAAoB,SAAUjB,OAEtC,IAGD,kBAAC,IAAD,CAAekB,MAAM,YACnB,wCAEA,2BAAOC,YAAa,GAClB,gCACA,+BAEE,wBAAIC,UAAU,SACZ,wBAAIC,QAAS,GAAb,YAEF,4BACE,mFACA,4BAAKvC,IAEP,4BACE,6FACA,4BAAKE,IAGP,wBAAIoC,UAAU,SACZ,wBAAIC,QAAS,GAAb,YAEF,4BACE,iDACA,4BAAK/C,IAEP,4BACE,0EACA,4BAAKE,IAEP,4BACE,iDACA,4BAAKE,IAEP,4BACE,kDACA,4BAAKE,IAGP,wBAAIwC,UAAU,SACZ,wBAAIC,QAAS,GAAb,WAEF,4BACE,mDACA,4BAAKnC,IAEP,4BACE,oDACA,4BAAKE,IAEP,4BACE,wDACA,4BAAKE,IAEP,4BACE,qEACA,4BAAKE,IAEP,4BACE,yDACA,4BAAKE,IAEP,4BACE,kEACA,4BAAKE,IAEP,4BACE,uDACA,4BAAKE","file":"component---src-pages-toolbox-browser-viewport-tsx-c3ef2259fd0d5f1c7494.js","sourcesContent":["import React, { FC, useEffect, useState } from 'react'\nimport { ToolboxLayout } from '../../components'\nimport './tool.scss'\nimport { IWindow } from '../../utils/interface'\nimport { hasWindow } from 'utils'\n\nconst BrowserViewport: FC = () => {\n  const [innerWidth, setInnerWidth] = useState('')\n  const [innerHeight, setInnerHeight] = useState('')\n  const [outerWidth, setOuterWidth] = useState('')\n  const [outerHeight, setOuterHeight] = useState('')\n  const [clientWidth, setClientWidth] = useState('')\n  const [clientHeight, setClientHeight] = useState('')\n  const [screenWidth, setScreenWidth] = useState('')\n  const [screenHeight, setScreenHeight] = useState('')\n  const [screenAvailWidth, setScreenAvailWidth] = useState('')\n  const [screenAvailHeight, setScreenAvailHeight] = useState('')\n  const [screenOrientation, setScreenOrientation] = useState('')\n  const [screenDeviceXDPI, setScreenDeviceXDPI] = useState('')\n  const [devicePixelRatio, setDevicePixelRatio] = useState('')\n\n  const getSize = () => {\n    if (!hasWindow()) return\n\n    const _window = window as IWindow\n    const screen = _window.screen\n    setInnerWidth(window.innerWidth + ' px')\n    setInnerHeight(window.innerHeight + ' px')\n    setOuterWidth(window.outerWidth + ' px')\n    setOuterHeight(window.outerHeight + ' px')\n    setClientWidth(document.documentElement.clientWidth + ' px')\n    setClientHeight(document.documentElement.clientHeight + ' px')\n    setScreenWidth(screen.width + ' px')\n    setScreenHeight(screen.height + ' px')\n    setScreenAvailWidth(screen.availWidth + ' px')\n    setScreenAvailHeight(screen.availHeight + ' px')\n    setScreenOrientation((screen.msOrientation || screen.mozOrientation || screen.orientation || { type: '' }).type)\n    setScreenDeviceXDPI(screen.deviceXDPI ? (screen.deviceXDPI + ' px') : 'N/A')\n    setDevicePixelRatio(window.devicePixelRatio + '')\n  }\n\n  useEffect(() => {\n    getSize()\n\n    if (!hasWindow()) return\n    window.addEventListener('resize', getSize)\n\n    return () => {\n      if (!hasWindow()) return\n      window.removeEventListener('resize', getSize)\n    }\n  }, [])\n\n  return (\n    <ToolboxLayout title='Viewport'>\n      <h1>Viewport</h1>\n\n      <table cellSpacing={0}>\n        <thead></thead>\n        <tbody>\n\n          <tr className='title'>\n            <td colSpan={2}>Content</td>\n          </tr>\n          <tr>\n            <td>document.documentElement.clientWidth (No ScrollBar)</td>\n            <td>{clientWidth}</td>\n          </tr>\n          <tr>\n            <td>document.documentElement.clientHeight (No TopBar, No DevTool)</td>\n            <td>{clientHeight}</td>\n          </tr>\n\n          <tr className='title'>\n            <td colSpan={2}>Browser</td>\n          </tr>\n          <tr>\n            <td>window.innerWidth</td>\n            <td>{innerWidth}</td>\n          </tr>\n          <tr>\n            <td>window.innerHeight (No TopBar, No DevTool)</td>\n            <td>{innerHeight}</td>\n          </tr>\n          <tr>\n            <td>window.outerWidth</td>\n            <td>{outerWidth}</td>\n          </tr>\n          <tr>\n            <td>window.outerHeight</td>\n            <td>{outerHeight}</td>\n          </tr>\n\n          <tr className='title'>\n            <td colSpan={2}>Device</td>\n          </tr>\n          <tr>\n            <td>window.screen.width</td>\n            <td>{screenWidth}</td>\n          </tr>\n          <tr>\n            <td>window.screen.height</td>\n            <td>{screenHeight}</td>\n          </tr>\n          <tr>\n            <td>window.screen.availWidth</td>\n            <td>{screenAvailWidth}</td>\n          </tr>\n          <tr>\n            <td>window.screen.availHeight (No TopBar)</td>\n            <td>{screenAvailHeight}</td>\n          </tr>\n          <tr>\n            <td>window.screen.orientation</td>\n            <td>{screenOrientation}</td>\n          </tr>\n          <tr>\n            <td>window.screen.deviceXDPI (IE Only)</td>\n            <td>{screenDeviceXDPI}</td>\n          </tr>\n          <tr>\n            <td>window.devicePixelRatio</td>\n            <td>{devicePixelRatio}</td>\n          </tr>\n        </tbody>\n      </table>\n    </ToolboxLayout>\n  )\n}\n\nexport default BrowserViewport\n"],"sourceRoot":""}