{"id":21009225,"url":"https://github.com/shisama/toggle-fullscreen","last_synced_at":"2025-12-25T18:43:03.658Z","repository":{"id":57377659,"uuid":"99714418","full_name":"shisama/toggle-fullscreen","owner":"shisama","description":"Simple to use Fullscreen API with Promise for cross-browser.","archived":false,"fork":false,"pushed_at":"2019-03-10T13:49:37.000Z","size":22,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-26T12:46:24.576Z","etag":null,"topics":["cross-browser","fullscreen","fullscreen-api","javascript","promise"],"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/shisama.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-08T16:36:08.000Z","updated_at":"2019-03-10T13:49:39.000Z","dependencies_parsed_at":"2022-09-26T16:41:54.136Z","dependency_job_id":null,"html_url":"https://github.com/shisama/toggle-fullscreen","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shisama%2Ftoggle-fullscreen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shisama%2Ftoggle-fullscreen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shisama%2Ftoggle-fullscreen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shisama%2Ftoggle-fullscreen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shisama","download_url":"https://codeload.github.com/shisama/toggle-fullscreen/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243430893,"owners_count":20289794,"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":["cross-browser","fullscreen","fullscreen-api","javascript","promise"],"created_at":"2024-11-19T09:15:57.207Z","updated_at":"2025-12-25T18:43:03.623Z","avatar_url":"https://github.com/shisama.png","language":"JavaScript","readme":"toggle-fullscreen\n===\n[Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) based [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) for cross-browser.\n\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/shisama/toggle-fullscreen/blob/master/LICENSE)\n[![npm](https://img.shields.io/npm/dt/toggle-fullscreen.svg)](https://www.npmjs.com/package/toggle-fullscreen)\n\n```js\nasync function() {\n  const element = document.querySelector('some element');\n  await toggleFullscreen(element);\n  await otherFunc();\n}\n```\n\n## Install\n```\nnpm install --save toggle-fullscreen\n```\n\n## API\n### toggleFullscreen(target) ⇒ \u003ccode\u003ePromise\u003c\u003e\u003c/code\u003e\nRequests Fullscreen API.\nRequest to exit fullscreen mode if target is already fullscreen.\n \n| Param  | Type                | Description  |\n| ------ | ------------------- | ------------ |\n| target  | \u003ccode\u003eElement\u003c/code\u003e | target element to change fullscreen|\n\nUsage:\n```js\nvar target = document.querySelector('#target');\ntoggleFullscreen(target);\n```\nFor jQuery:\n```js\n$('#target').on('click', event =\u003e {\n\ttoggleFullscreen(event.target);\n});\n```\n\n### fullscreenChange(callback) ⇒ \u003ccode\u003ePromise\u003c\u003e\u003c/code\u003e\nAdd a listener for when the browser switches in and out of fullscreen. \n \n| Param  | Type                | Description  |\n| ------ | ------------------- | ------------ |\n| callback  | \u003ccode\u003efunction\u003c/code\u003e | function to be called when the browser switches in and out of fullscreen|\n\nUsage:\n```js\nfullscreenChange(function() {\n  console.log('switch fullscreen');\n});\n```\n### isFullscreen() ⇒ \u003ccode\u003eBoolean\u003c/code\u003e\nCheck whether fullscreen is active.\nUsage:\n```js\nif (isFullscreen()) {\n  console.log('fullscreen is active');\n} else {\n  console.log('fullscreen is not active');\n} \n```\n\n## Example\n```jsx harmony\nimport toggleFullscreen, {\n  fullscreenChange,\n  isFullscreen,\n} from 'toggle-fullscreen';\n\nonChangeFullScreen = () =\u003e {\n  const element = document.getElementById('something');\n  toggleFullscreen(element)\n    .then(() =\u003e {\n      return fullscreenChange(() =\u003e {\n        const isFullScreen = isFullscreen();\n        if (isFullScreen) {\n          // any process in fullscreen mode\n          // e.g.document.addEventListener('keydown', keydownFunction);\n        } else {\n          // any process in non-fullscreen mode\n          // e.g.document.removeEventListener('keydown', keydownFunction);\n        }\n      });\n    })\n    .then(() =\u003e {\n      console.log('successed!');\n    })\n    .catch(() =\u003e {\n      console.log('failed!');\n    });\n};\n```\n\nOr use Promise.all()\n\n```jsx harmony\nimport toggleFullscreen, {\n  fullscreenChange,\n  isFullscreen,\n} from 'toggle-fullscreen';\n\nonChangeFullScreen = () =\u003e {\n  // target element\n  const element = document.getElementById('something');\n  // callback function when fullscreen change is detected.\n  const callback = () =\u003e {\n    const isFullScreen = isFullscreen();\n    this.setState({isFullScreen: isFullScreen});\n    if (isFullScreen) {\n      document.addEventListener('keydown', this.keydownEvent);\n      element.style.width = '70%';\n    } else {\n      document.removeEventListener('keydown', this.keydownEvent);\n      element.style.width = '100%';\n    }\n  };\n  // execute toggle-fullscreen and add listener when fullscreen change detected asynchronously\n  Promise.all([toggleFullscreen(element), fullscreenChange(callback)]);\n};\n```\n\nFor async/await:\n```jsx harmony\nimport toggleFullscreen, {\n  fullscreenChange,\n  isFullscreen,\n} from 'toggle-fullscreen';\n\nonChangeFullScreen = async () =\u003e {\n  const element = document.getElementById('something');\n  await toggleFullscreen(element);\n  await fullscreenChange(() =\u003e {\n    const isFullScreen = isFullscreen();\n    if (isFullScreen) {\n      // any process in fullscreen mode\n      // e.g.document.addEventListener('keydown', keydownFunction);\n    } else {\n      // any process in non-fullscreen mode\n      // e.g.document.removeEventListener('keydown', keydownFunction);\n    }\n  });\n  console.log('successed!');\n};\n```\n\nFor callback (use if something is wrong with Promise) :\n```js\nconst toggleFullscreen = require('toggle-fullscreen');\nonChangeFullScreen = function() {\n  const element = document.getElementById('something');\n  toggleFullscreen(element, function(isFullScreen) {\n    if (isFullScreen) {\n      // any process in fullscreen mode\n      // e.g.document.addEventListener('keydown', this.keydownEvent);\n    } else {\n      // any process in non-fullscreen mode\n      // e.g.document.removeEventListener('keydown', this.keydownEvent);\n    }\n  });\n};\n```\n## Support\n- Chrome@latest\n- Firefox@latest\n- Safari@latest\n- MSEdge@latest\n- IE11\n\n## License\nThis project is licensed under the terms of the\n[MIT license](https://github.com/shisama/toggle-fullscreen/blob/master/LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshisama%2Ftoggle-fullscreen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshisama%2Ftoggle-fullscreen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshisama%2Ftoggle-fullscreen/lists"}