Repository: rafgraph/fscreen
Branch: main
Commit: 04244204efff
Files: 26
Total size: 26.1 KB

Directory structure:
gitextract_spd02a4l/

├── .gitignore
├── LICENSE
├── README.md
├── demo/
│   ├── .gitignore
│   ├── LICENSE
│   ├── README.md
│   ├── package.json
│   ├── public/
│   │   ├── 404.html
│   │   ├── CNAME
│   │   ├── favicon/
│   │   │   └── site.webmanifest
│   │   └── index.html
│   ├── src/
│   │   ├── App.test.tsx
│   │   ├── App.tsx
│   │   ├── index.tsx
│   │   ├── react-app-env.d.ts
│   │   ├── setupTests.ts
│   │   ├── stitches.config.ts
│   │   └── ui/
│   │       ├── Button.tsx
│   │       ├── DarkModeButton.tsx
│   │       ├── GitHubIconLink.tsx
│   │       └── Link.tsx
│   └── tsconfig.json
├── package.json
├── src/
│   ├── fscreen.js
│   └── index.ts
└── tsconfig.json

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
node_modules
dist
*gitigx*


================================================
FILE: LICENSE
================================================
The MIT License (MIT)

Copyright (c) 2017 Rafael Pedicini

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
# Fscreen - Fullscreen API

[![npm](https://img.shields.io/npm/dm/fscreen?label=npm)](https://www.npmjs.com/package/fscreen) [![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/fscreen?color=purple)](https://bundlephobia.com/result?p=fscreen)

Vendor agnostic access to the [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API). Build with the Fullscreen API as intended without worrying about vendor prefixes.

---

### [Live demo app for Fscreen](https://fscreen.rafgraph.dev)

Code is in the [`/demo`](/demo) folder.

---

```shell
$ npm install --save fscreen
```

```javascript
import fscreen from 'fscreen';

fscreen.fullscreenEnabled === true / false;
// boolean to tell if fullscreen mode is supported
// replacement for: document.fullscreenEnabled
// mapped to: document.vendorMappedFullscreenEnabled

fscreen.fullscreenElement === null / undefined / DOM Element;
// null if not in fullscreen mode, or the DOM element that's in fullscreen mode
// (if fullscreen is not supported by the device it will be undefined)
// replacement for: document.fullscreenElement
// mapped to: document.vendorMappedFullsceenElement
// note that fscreen.fullscreenElement uses a getter to retrieve the element
// each time the property is accessed.


fscreen.requestFullscreen(element);
// replacement for: element.requestFullscreen()
// mapped to: element.vendorMappedRequestFullscreen()

fscreen.requestFullscreenFunction(element);
// replacement for: element.requestFullscreen - without calling the function
// mapped to: element.vendorMappedRequestFullscreen

fscreen.exitFullscreen();
// replacement for: document.exitFullscreen()
// mapped to: document.vendorMappedExitFullscreen()
// note that fscreen.exitFullscreen is mapped to
// document.vendorMappedExitFullscreen - without calling the function


fscreen.onfullscreenchange = handler;
// replacement for: document.onfullscreenchange = handler
// mapped to: document.vendorMappedOnfullscreenchange = handler

fscreen.addEventListener('fullscreenchange', handler, options);
// replacement for: document.addEventListener('fullscreenchange', handler, options)
// mapped to: document.addEventListener('vendorMappedFullscreenchange', handler, options)

fscreen.removeEventListener('fullscreenchange', handler, options);
// replacement for: document.removeEventListener('fullscreenchange', handler, options)
// mapped to: document.removeEventListener('vendorMappedFullscreenchange', handler, options)


fscreen.onfullscreenerror = handler;
// replacement for: document.onfullscreenerror = handler
// mapped to: document.vendorMappedOnfullscreenerror = handler

fscreen.addEventListener('fullscreenerror', handler, options);
// replacement for: document.addEventListener('fullscreenerror', handler, options)
// mapped to: document.addEventListener('vendorMappedFullscreenerror', handler, options)

fscreen.removeEventListener('fullscreenerror', handler, options);
// replacement for: document.removeEventListener('fullscreenerror', handler, options)
// mapped to: document.removeEventListener('vendorMappedFullscreenerror', handler, options)


fscreen.fullscreenPseudoClass;
// returns: the vendorMapped fullscreen Pseudo Class
// i.e. :fullscreen, :-webkit-full-screen, :-moz-full-screen, :-ms-fullscreen
// Can be used to find any elements that are fullscreen using the vendorMapped Pseudo Class 
// e.g. document.querySelectorAll(fscreen.fullscreenPseudoClass).forEach(...);
```

## Usage

Use it just like the spec API.

```javascript
if (fscreen.fullscreenEnabled) {
 fscreen.addEventListener('fullscreenchange', handler, false);
 fscreen.requestFullscreen(element);
}

function handler() {
 if (fscreen.fullscreenElement !== null) {
   console.log('Entered fullscreen mode');
 } else {
   console.log('Exited fullscreen mode');
 }
}
```


================================================
FILE: demo/.gitignore
================================================
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
.eslintcache

npm-debug.log*
yarn-debug.log*
yarn-error.log*


================================================
FILE: demo/LICENSE
================================================
MIT License

Copyright (c) 2020 Rafael Pedicini

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: demo/README.md
================================================
# Demo App for [`fscreen`](https://github.com/rafgraph/fscreen)

Live demo app: https://fscreen.rafgraph.dev


================================================
FILE: demo/package.json
================================================
{
  "name": "fscreen-demo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@radix-ui/react-icons": "^1.0.3",
    "@stitches/react": "^0.1.9",
    "fscreen": "^1.2.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-interactive": "^1.1.0",
    "use-dark-mode": "^2.3.1"
  },
  "devDependencies": {
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^13.1.8",
    "@types/fscreen": "^1.0.1",
    "@types/jest": "^26.0.23",
    "@types/node": "^15.0.1",
    "@types/react": "^17.0.4",
    "@types/react-dom": "^17.0.3",
    "browserslist-config-css-grid": "^1.0.0",
    "gh-pages": "^3.1.0",
    "react-scripts": "4.0.3",
    "typescript": "^4.2.4"
  },
  "scripts": {
    "dev": "npm install --save ../ && npm start",
    "devCleanup": "npm install --save fscreen@latest",
    "deploy": "gh-pages --dist build --message Built-`date +%Y%m%d`-`date +%H%M%S`",
    "predeploy": "npm run devCleanup && npm run lint && npm test -- --watchAll=false && npm run build",
    "lint": "eslint src",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      "last 2 versions or > 0.2% and not dead and extends browserslist-config-css-grid"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}


================================================
FILE: demo/public/404.html
================================================
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>404</title>
  </head>
  <body>
    <script type="text/javascript">
      window.location.replace(window.location.origin);
    </script>
  </body>
</html>

================================================
FILE: demo/public/CNAME
================================================
fscreen.rafgraph.dev

================================================
FILE: demo/public/favicon/site.webmanifest
================================================
{
  "name": "fscreen",
  "icons": [
    {
      "src": "/favicon/green-grid-144-168-192-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/favicon/green-grid-144-168-192-180x180.png",
      "sizes": "180x180",
      "type": "image/png"
    },
    {
      "src": "/favicon/green-grid-144-168-192.svg",
      "type": "image/svg+xml"
    }
  ],
  "theme_color": "#000000",
  "background_color": "#007800",
  "display": "browser"
}


================================================
FILE: demo/public/index.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta
      name="description"
      content="Fscreen demo app"
    />

    <link rel="icon" type=”image/svg+xml” href="%PUBLIC_URL%/favicon/green-grid-144-168-192.svg" />
    <link rel="alternate icon" type="image/png" href="%PUBLIC_URL%/favicon/green-grid-144-168-192-512x512.png" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon/green-grid-144-168-192-180x180.png" />
    <link rel="manifest" href="%PUBLIC_URL%/favicon/site.webmanifest" />
    <meta name="theme-color" content="#000000" />

    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Fscreen Demo</title>

    <style>
      html { background-color: rgb(0, 120, 0); }
    </style>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>


================================================
FILE: demo/src/App.test.tsx
================================================
import { render } from '@testing-library/react';
import { App } from './App';

describe('renders links', () => {
  const { container } = render(<App />);
  const links = container.getElementsByTagName('a');
  const hrefs = Object.values(links).map((link) => link.getAttribute('href'));

  test('renders link to fscreen', () => {
    expect(hrefs).toContain('https://github.com/rafgraph/fscreen');
  });
});


================================================
FILE: demo/src/App.tsx
================================================
import * as React from 'react';
import fscreen from 'fscreen';
import { DarkModeButton } from './ui/DarkModeButton';
import { GitHubIconLink } from './ui/GitHubIconLink';
import { Link } from './ui/Link';
import { Button } from './ui/Button';
import { styled, globalCss } from './stitches.config';

const AppContainer = styled('div', {
  minHeight: '100%',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  backgroundColor: '$pageBackground',
});

const ContentContainer = styled('div', {
  maxWidth: '300px',
  margin: '0px 15px 6vh',
});

const HeaderContainer = styled('header', {
  display: 'flex',
  justifyContent: 'space-between',
  marginBottom: '18px',
});

const H1 = styled('h1', {
  fontSize: '26px',
  marginRight: '16px',
});

const HeaderIconContainer = styled('span', {
  width: '78px',
  display: 'inline-flex',
  justifyContent: 'space-between',
  gap: '12px',
});

const InfoContainer = styled('p', {
  fontSize: '14px',
  margin: '18px 0',
});

const Status = styled('p', {
  margin: '6px 0',
});

const Bool = styled('code', {
  variants: {
    bool: {
      true: {
        color: '$green',
      },
      false: {
        color: '$red',
      },
    },
  },
});

const FullscreenButton = styled(Button, {
  display: 'block',
  fontSize: '18px',
  border: '2px solid',
  borderRadius: '6px',
  width: '100%',
  padding: '14px',
  textAlign: 'center',
  marginTop: '36px',
});

export const App = () => {
  globalCss();

  const [inFullscreenMode, setInFullscreenMode] = React.useState(false);

  const handleFullscreenChange = React.useCallback((e) => {
    let change = '';
    if (fscreen.fullscreenElement !== null) {
      change = 'Entered fullscreen mode';
      setInFullscreenMode(true);
    } else {
      change = 'Exited fullscreen mode';
      setInFullscreenMode(false);
    }
    console.log(change, e);
  }, []);

  const handleFullscreenError = React.useCallback((e) => {
    console.log('Fullscreen Error', e);
  }, []);

  React.useEffect(() => {
    if (fscreen.fullscreenEnabled) {
      fscreen.addEventListener(
        'fullscreenchange',
        handleFullscreenChange,
        false,
      );
      fscreen.addEventListener('fullscreenerror', handleFullscreenError, false);
      return () => {
        fscreen.removeEventListener('fullscreenchange', handleFullscreenChange);
        fscreen.removeEventListener('fullscreenerror', handleFullscreenError);
      };
    }
  });

  const appElement = React.useRef<HTMLDivElement>(null!);

  const toggleFullscreen = React.useCallback(() => {
    if (inFullscreenMode) {
      fscreen.exitFullscreen();
    } else {
      fscreen.requestFullscreen(appElement.current);
    }
  }, [inFullscreenMode]);

  return (
    <AppContainer ref={appElement}>
      <ContentContainer>
        <HeaderContainer>
          <H1>Fscreen Demo</H1>
          <HeaderIconContainer>
            <DarkModeButton />
            <GitHubIconLink
              title="GitHub repository for Fscreen"
              href="https://github.com/rafgraph/fscreen"
            />
          </HeaderIconContainer>
        </HeaderContainer>
        <InfoContainer>
          Vendor agnostic access to the{' '}
          <Link href="https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API">
            Fullscreen API
          </Link>
        </InfoContainer>

        <Status>
          Fullscreen enabled:{' '}
          <Bool
            bool={fscreen.fullscreenEnabled}
          >{`${fscreen.fullscreenEnabled}`}</Bool>
        </Status>
        <Status>
          Currently in fullscreen mode:{' '}
          <Bool bool={inFullscreenMode}>{`${inFullscreenMode}`}</Bool>
        </Status>

        <FullscreenButton
          onClick={toggleFullscreen}
          disabled={!fscreen.fullscreenEnabled}
        >
          {(!fscreen.fullscreenEnabled && 'Fullscreen Is Not Available') ||
            (inFullscreenMode && 'Exit Fullscreen Mode') ||
            'Enter Fullscreen Mode'}
        </FullscreenButton>
      </ContentContainer>
    </AppContainer>
  );
};


================================================
FILE: demo/src/index.tsx
================================================
import { StrictMode } from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';

ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  document.getElementById('root'),
);


================================================
FILE: demo/src/react-app-env.d.ts
================================================
/// <reference types="react-scripts" />


================================================
FILE: demo/src/setupTests.ts
================================================
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';


================================================
FILE: demo/src/stitches.config.ts
================================================
import { createCss, StitchesCss } from '@stitches/react';

export const stitchesConfig = createCss({
  theme: {
    colors: {
      pageBackground: 'rgb(240,240,240)',
      backgroundContrast: 'rgb(216,216,216)',
      highContrast: 'rgb(0,0,0)',
      lowContrast: 'rgb(128,128,128)',
      red: 'hsl(0,100%,50%)',
      orange: 'hsl(30,100%,50%)',
      yellow: 'hsl(51,100%,40%)',
      green: 'hsl(120,100%,33%)', // same as rgb(0,168,0)
      blue: 'hsl(240,100%,50%)',
      purple: 'hsl(270,100%,60%)',
    },
    fonts: {
      mono: 'menlo, monospace',
    },
  },
});

export type CSS = StitchesCss<typeof stitchesConfig>;

export const {
  styled,
  theme,
  keyframes,
  global: createGlobalCss,
} = stitchesConfig;

export const darkThemeClass = theme({
  colors: {
    pageBackground: 'rgb(32,32,32)',
    backgroundContrast: 'rgb(64,64,64)',
    highContrast: 'rgb(192,192,192)',
    lowContrast: 'rgb(136,136,136)',
    red: 'hsl(0,100%,50%)',
    orange: 'hsl(30,90%,50%)',
    yellow: 'hsl(60,88%,50%)',
    green: 'hsl(120,85%,42%)',
    blue: 'hsl(210,100%,60%)',
    purple: 'hsl(270,85%,60%)',
  },
});

export const globalCss = createGlobalCss({
  // unset all styles on interactive elements
  'button, input, select, textarea, a, area': {
    all: 'unset',
  },
  // normalize behavior on all elements
  '*, *::before, *::after, button, input, select, textarea, a, area': {
    margin: 0,
    border: 0,
    padding: 0,
    boxSizing: 'inherit',
    font: 'inherit',
    fontWeight: 'inherit',
    textAlign: 'inherit',
    lineHeight: 'inherit',
    wordBreak: 'inherit',
    color: 'inherit',
    background: 'transparent',
    outline: 'none',
    WebkitTapHighlightColor: 'transparent',
  },
  // set base styles for the app
  body: {
    color: '$highContrast',
    fontFamily: 'system-ui, Helvetica Neue, sans-serif',
    // use word-break instead of "overflow-wrap: anywhere" because of Safari support
    wordBreak: 'break-word',
    WebkitFontSmoothing: 'antialiased',
    MozOsxFontSmoothing: 'grayscale',
    fontSize: '16px',
    boxSizing: 'border-box',
    textSizeAdjust: 'none',
  },
  code: {
    fontFamily: '$mono',
  },
  // pass down height: 100% to the #root div
  'body, html': {
    height: '100%',
  },
  '#root': {
    height: '100%',
    backgroundColor: '$pageBackground',
  },
});


================================================
FILE: demo/src/ui/Button.tsx
================================================
import { Interactive } from 'react-interactive';
import { styled } from '../stitches.config';

export const Button = styled(Interactive.Button, {
  color: '$highContrast',
  '&.hover, &.active': {
    color: '$green',
    borderColor: '$green',
  },
  '&.disabled': {
    opacity: 0.5,
  },
  variants: {
    focus: {
      outline: {
        '&.focusFromKey': {
          outline: '2px solid $colors$purple',
          outlineOffset: '2px',
        },
      },
      boxShadow: {
        '&.focusFromKey': {
          boxShadow: '0 0 0 2px $colors$purple',
        },
      },
      boxShadowOffset: {
        '&.focusFromKey': {
          boxShadow:
            '0 0 0 2px $colors$pageBackground, 0 0 0 4px $colors$purple',
        },
      },
    },
  },
  defaultVariants: {
    focus: 'boxShadowOffset',
  },
});


================================================
FILE: demo/src/ui/DarkModeButton.tsx
================================================
import * as React from 'react';
import { SunIcon } from '@radix-ui/react-icons';
import useDarkMode from 'use-dark-mode';
import { Button } from './Button';
import { darkThemeClass } from '../stitches.config';

interface DarkModeButtonProps {
  css?: React.ComponentProps<typeof Button>['css'];
}

export const DarkModeButton: React.VFC<DarkModeButtonProps> = ({
  css,
  ...props
}) => {
  // put a try catch around localStorage so this app will work in codesandbox
  // when the user blocks third party cookies in chrome,
  // which results in a security error when useDarkMode tries to access localStorage
  // see https://github.com/codesandbox/codesandbox-client/issues/5397
  let storageProvider: any = null;
  try {
    storageProvider = localStorage;
  } catch {}
  const darkMode = useDarkMode(undefined, {
    classNameDark: darkThemeClass,
    storageProvider,
  });

  // add color-scheme style to <html> element
  // so document scroll bars will have native dark mode styling
  React.useEffect(() => {
    if (darkMode.value === true) {
      // @ts-ignore because colorScheme type not added yet
      document.documentElement.style.colorScheme = 'dark';
    } else {
      // @ts-ignore
      document.documentElement.style.colorScheme = 'light';
    }
  }, [darkMode.value]);

  return (
    <Button
      {...props}
      onClick={darkMode.toggle}
      focus="boxShadow"
      css={{
        width: '36px',
        height: '36px',
        padding: '3px',
        margin: '-3px',
        borderRadius: '50%',
        // cast as any b/c of Stitches bug: https://github.com/modulz/stitches/issues/407
        ...(css as any),
      }}
      title="Toggle dark mode"
      aria-label="Toggle dark mode"
    >
      <SunIcon width="30" height="30" />
    </Button>
  );
};


================================================
FILE: demo/src/ui/GitHubIconLink.tsx
================================================
import * as React from 'react';
import { Interactive } from 'react-interactive';
import { GitHubLogoIcon } from '@radix-ui/react-icons';
import { Button } from './Button';

interface GitHubIconLinkProps {
  href?: string;
  title?: string;
  newWindow?: boolean;
  css?: React.ComponentProps<typeof Button>['css'];
}

export const GitHubIconLink: React.VFC<GitHubIconLinkProps> = ({
  newWindow = true,
  css,
  title,
  ...props
}) => (
  <Button
    {...props}
    as={Interactive.A}
    title={title}
    aria-label={title}
    target={newWindow ? '_blank' : undefined}
    rel={newWindow ? 'noopener noreferrer' : undefined}
    focus="boxShadow"
    css={{
      display: 'inline-block',
      width: '36px',
      height: '36px',
      padding: '3px',
      margin: '-3px',
      borderRadius: '50%',
      // cast as any b/c of Stitches bug: https://github.com/modulz/stitches/issues/407
      ...(css as any),
    }}
  >
    <GitHubLogoIcon
      width="30"
      height="30"
      // scale up the svg icon because it doesn't fill the view box
      // see: https://github.com/radix-ui/icons/issues/73
      style={{ transform: 'scale(1.1278)' }}
    />
  </Button>
);


================================================
FILE: demo/src/ui/Link.tsx
================================================
import * as React from 'react';
import { Interactive } from 'react-interactive';
import { styled } from '../stitches.config';

const StyledLink = styled(Interactive.A, {
  color: '$highContrast',
  textDecorationLine: 'underline',
  textDecorationStyle: 'dotted',
  textDecorationColor: '$green',
  textDecorationThickness: 'from-font',
  padding: '2px 3px',
  margin: '-2px -3px',
  borderRadius: '3px',
  '&.hover': {
    textDecorationColor: '$green',
    textDecorationStyle: 'solid',
  },
  '&.active': {
    textDecorationColor: '$green',
    textDecorationStyle: 'solid',
    color: '$green',
  },
  '&.focusFromKey': {
    boxShadow: '0 0 0 2px $colors$purple',
  },
});

interface LinkProps extends React.ComponentPropsWithoutRef<typeof StyledLink> {
  newWindow?: boolean;
}

export const Link: React.VFC<LinkProps> = ({ newWindow = true, ...props }) => (
  <StyledLink
    {...props}
    target={newWindow ? '_blank' : undefined}
    rel={newWindow ? 'noopener noreferrer' : undefined}
  />
);


================================================
FILE: demo/tsconfig.json
================================================
{
  "compilerOptions": {
    "target": "esnext",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}


================================================
FILE: package.json
================================================
{
  "name": "fscreen",
  "version": "1.2.0",
  "description": "Vendor agnostic access to the fullscreen spec api",
  "main": "dist/fscreen.cjs.js",
  "module": "dist/fscreen.esm.js",
  "sideEffects": false,
  "scripts": {
    "build": "rollpkg build",
    "watch": "rollpkg watch",
    "prepublishOnly": "npm run build",
    "lintStaged": "lint-staged"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/rafgraph/fscreen.git"
  },
  "files": [
    "dist"
  ],
  "keywords": [
    "fullscreen",
    "browser"
  ],
  "author": "Rafael Pedicini <rafael@rafgraph.dev>",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/rafgraph/fscreen/issues"
  },
  "homepage": "https://github.com/rafgraph/fscreen#readme",
  "devDependencies": {
    "lint-staged": "^10.5.4",
    "pre-commit": "^1.2.2",
    "rollpkg": "^0.5.5"
  },
  "pre-commit": "lintStaged",
  "lint-staged": {
    "(src/**/*|demo/src/**/*)": [
      "prettier --write --ignore-unknown"
    ]
  },
  "prettier": "rollpkg/configs/prettier.json"
}


================================================
FILE: src/fscreen.js
================================================
const key = {
  fullscreenEnabled: 0,
  fullscreenElement: 1,
  requestFullscreen: 2,
  exitFullscreen: 3,
  fullscreenchange: 4,
  fullscreenerror: 5,
  fullscreen: 6,
};

const webkit = [
  'webkitFullscreenEnabled',
  'webkitFullscreenElement',
  'webkitRequestFullscreen',
  'webkitExitFullscreen',
  'webkitfullscreenchange',
  'webkitfullscreenerror',
  '-webkit-full-screen',
];

const moz = [
  'mozFullScreenEnabled',
  'mozFullScreenElement',
  'mozRequestFullScreen',
  'mozCancelFullScreen',
  'mozfullscreenchange',
  'mozfullscreenerror',
  '-moz-full-screen',
];

const ms = [
  'msFullscreenEnabled',
  'msFullscreenElement',
  'msRequestFullscreen',
  'msExitFullscreen',
  'MSFullscreenChange',
  'MSFullscreenError',
  '-ms-fullscreen',
];

// so it doesn't throw if no window or document
const document =
  typeof window !== 'undefined' && typeof window.document !== 'undefined'
    ? window.document
    : {};

const vendor =
  ('fullscreenEnabled' in document && Object.keys(key)) ||
  (webkit[0] in document && webkit) ||
  (moz[0] in document && moz) ||
  (ms[0] in document && ms) ||
  [];

// prettier-ignore
export default {
  requestFullscreen: element => element[vendor[key.requestFullscreen]](),
  requestFullscreenFunction: element => element[vendor[key.requestFullscreen]],
  get exitFullscreen() { return document[vendor[key.exitFullscreen]].bind(document); },
  get fullscreenPseudoClass() { return `:${vendor[key.fullscreen]}`; },
  addEventListener: (type, handler, options) => document.addEventListener(vendor[key[type]], handler, options),
  removeEventListener: (type, handler, options) => document.removeEventListener(vendor[key[type]], handler, options),
  get fullscreenEnabled() { return Boolean(document[vendor[key.fullscreenEnabled]]); },
  set fullscreenEnabled(val) {},
  get fullscreenElement() { return document[vendor[key.fullscreenElement]]; },
  set fullscreenElement(val) {},
  get onfullscreenchange() { return document[`on${vendor[key.fullscreenchange]}`.toLowerCase()]; },
  set onfullscreenchange(handler) { return document[`on${vendor[key.fullscreenchange]}`.toLowerCase()] = handler; },
  get onfullscreenerror() { return document[`on${vendor[key.fullscreenerror]}`.toLowerCase()]; },
  set onfullscreenerror(handler) { return document[`on${vendor[key.fullscreenerror]}`.toLowerCase()] = handler; },
};


================================================
FILE: src/index.ts
================================================
import fscreen from './fscreen';
export default fscreen;


================================================
FILE: tsconfig.json
================================================
{
    "extends": "rollpkg/configs/tsconfig.json",
    "compilerOptions": {
        "target": "ES5",
        "declaration": false
    }
}