{"id":19649113,"url":"https://github.com/toxic-johann/es-fullscreen","last_synced_at":"2025-04-28T16:30:33.865Z","repository":{"id":57239512,"uuid":"101049295","full_name":"toxic-johann/es-fullscreen","owner":"toxic-johann","description":"fullscreen method which can be used on IE9 and above","archived":false,"fork":false,"pushed_at":"2020-06-02T18:12:00.000Z","size":464,"stargazers_count":7,"open_issues_count":7,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-15T14:44:25.470Z","etag":null,"topics":["es6","fullscreen","fullscreen-api","javascript"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/toxic-johann.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-22T10:04:07.000Z","updated_at":"2023-03-25T11:15:45.000Z","dependencies_parsed_at":"2022-08-30T00:11:24.036Z","dependency_job_id":null,"html_url":"https://github.com/toxic-johann/es-fullscreen","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toxic-johann%2Fes-fullscreen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toxic-johann%2Fes-fullscreen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toxic-johann%2Fes-fullscreen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/toxic-johann%2Fes-fullscreen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/toxic-johann","download_url":"https://codeload.github.com/toxic-johann/es-fullscreen/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251345743,"owners_count":21574766,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["es6","fullscreen","fullscreen-api","javascript"],"created_at":"2024-11-11T14:51:38.161Z","updated_at":"2025-04-28T16:30:33.456Z","avatar_url":"https://github.com/toxic-johann.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# es-fullscreen\n\n[![Build Status](https://img.shields.io/travis/toxic-johann/es-fullscreen/master.svg?style=flat-square)](https://travis-ci.org/toxic-johann/es-fullscreen.svg?branch=master)\n[![Coverage Status](https://img.shields.io/coveralls/toxic-johann/es-fullscreen/master.svg?style=flat-square)](https://coveralls.io/github/toxic-johann/es-fullscreen?branch=master)\n[![npm](https://img.shields.io/npm/v/es-fullscreen.svg?colorB=brightgreen\u0026style=flat-square)](https://www.npmjs.com/package/es-fullscreen)\n[![npm download times](https://img.shields.io/npm/dm/es-fullscreen.svg)](https://www.npmjs.com/package/es-fullscreen)\n[![dependency Status](https://david-dm.org/toxic-johann/es-fullscreen.svg)](https://david-dm.org/toxic-johann/es-fullscreen)\n[![devDependency Status](https://david-dm.org/toxic-johann/es-fullscreen/dev-status.svg)](https://david-dm.org/toxic-johann/es-fullscreen?type=dev) [![Greenkeeper badge](https://badges.greenkeeper.io/toxic-johann/es-fullscreen.svg)](https://greenkeeper.io/)\n\n## Get start\n\n**npm**\n\nYou can install through npm.\n\n```sh\n$ npm install es-fullscreen --save-dev\n```\n\nAnd then you can use it like this.\n\n```javascript\nimport esFullscreen from 'es-fullscreen';\nesFullscreen.open(document.body);\n....\nesFullscreen.exit();\n```\n\n## Documents\n\n### open(element, [option])\n\n* Arguments\n  * {Element} element\n  * {force?: boolean} option\n* alias\n  * requestFullscreen\n* Details:\n\nTo fullscreen the element. Just like calling `element.requestFullscreen()`.\n\nWhen we already have an fullscreen target, we can't fullscreen another one. So we will dispatch `fullscreenerror` at that time. However, if you really want to fullscreen, you can set `option.force` to be true. We will force the browser to fullscreen your element by existing fullscreen mode.\n\n### exit()\n\n* alias\n  * exitFullscreen\n* Details\n\nExit the fullscreen mode. Just like calling `document.exitFullscreen()`.\n\n### fullscreenElment\n\n* type\n  * null | Element\n* Details\n\nRepresent the element which is fullscreened.\n\n### isFullscreem\n\n* type\n  * boolean\n* Details\n\nRepresent is fullscreen or not.\n\n### on(name, fn, [element])\n\n* alias\n  * addEventListener\n* Arguments\n  * {string} name: event's name, only can be 'fullscreenchange',  'fullscreenerror' or 'esfullscreenmethodchange' (supported after [0.3.0](https://github.com/toxic-johann/es-fullscreen/releases/tag/0.3.0))\n  * {Function} fn\n  * {Element} element: default to be `document`\n* Details\n\nTo let user listen on 'fullscreenchange' and 'fullscreenerror' more easily. You use it just like normal `on` event. If you want to listen on specific element, please pass in the element at the third place.\n\n* example\n\n```javascript\nimport esFullscreen from 'es-fullscreen';\nesFullscreen.on('fullscreenchange', evt =\u003e console.log('change!'));\nesFullscreen.open(document.body); // change!\n```\n\n### off(name, fn, [element])\n\n* alias\n  * removeEventlistener\n* Details\n\nTotally the same as `on`.\n\n### useStyleFirst\n\n\u003e supported after [0.3.0](https://github.com/toxic-johann/es-fullscreen/releases/tag/0.3.0)\n\n* type\n  * boolean\n* default\n  * `false`\n* Details\n\nWhen it's true, we will use style to fullscreen but not native way. You can change it and it will emit 'esfullscreenmethodchange' event.\n\n## Changelog\n\nPlease read the [realase notes](https://github.com/toxic-johann/es-fullscreen/releases).\n\n## Explanation of Different Build\n\nYou will find four differnet build in the lib.\n\n| Name             | Kind     | Meaning                                  | Need to define environment |\n| ---------------- | -------- | ---------------------------------------- | -------------------------- |\n| index.js         | commonjs | Common js, mostly used in Webpack 1.     | Yes                        |\n| index.mjs        | esmodule | in es module, mostly used in webpack 2 and rollup | Yes                        |\n| index.browser.js | umd      | Can be used in browser directly          | No(It's in development)    |\n| index.min.js     | umd      | Can be used in browser directly          | No(It's in production)     |\n\n## Development vs. Production\n\nDevelopment/production modes are hard-coded for the UMD builds: the un-minified files are for development, and the minified files are for production.\n\nCommonJS and ES Module builds are intended for bundlers, therefore we don’t provide minified versions for them. You will be responsible for minifying the final bundle yourself.\n\nCommonJS and ES Module builds also preserve raw checks for `process.env.NODE_ENV` to determine the mode they should run in. You should use appropriate bundler configurations to replace these environment variables in order to control which mode Vue will run in. Replacing `process.env.NODE_ENV` with string literals also allows minifiers like UglifyJS to completely drop the development-only code blocks, reducing final file size.\n\n### Webpack\n\nUse Webpack’s [DefinePlugin](https://webpack.js.org/plugins/define-plugin/):\n\n```\nvar webpack = require('webpack')\n\nmodule.exports = {\n  // ...\n  plugins: [\n    // ...\n    new webpack.DefinePlugin({\n      'process.env': {\n        NODE_ENV: JSON.stringify('production')\n      }\n    })\n  ]\n}\n```\n\n### Rollup\n\nUse [rollup-plugin-replace](https://github.com/rollup/rollup-plugin-replace):\n\n```\nconst replace = require('rollup-plugin-replace')\n\nrollup({s\n  // ...\n  plugins: [\n    replace({\n      'process.env.NODE_ENV': JSON.stringify('production')\n    })\n  ]\n}).then(...)\n```\n\n## License\n\n[MIT](https://opensource.org/licenses/MIT)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoxic-johann%2Fes-fullscreen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftoxic-johann%2Fes-fullscreen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftoxic-johann%2Fes-fullscreen/lists"}