cxf-fullscreen
Fullscreen support for CXF
Motivation
- Games are loaded into an HTML
iframe
. - CXF extensions are loaded into
iframe
s as well.
This creates an HTML document structure like this:
top(window)
|
+--- iframe #game
|
+--- iframe #cxf_1
:
:
If the #game
now switches to fullscreen mode, it does so by calling requestFullscreen(document.body)
. The browser will then go in fullscreen mode, showing only #game
, while hiding all upwards and sibling elements.
Next, a player wants to open a CXF extension, eg by clicking a button. #cxf_1 will remain invisible because the #game
is fullscreen, hiding all parent and sibling elements.
Solution
Instead of using #game
as the fullscreen element, we use top(window)
. The difficulty with this is that #game
doesn't necessarily have access to top
. To make this easier for #game
, we install a few helper functions in the CXF
global context which the game can then call to toggle fullscreen mode:
window.CXF.toggleFullscreen()
window.CXF.requestFullscreen()
window.CXF.exitFullscreen()
window.CXF.fullscreen
These functions work across all browsers and resemble the standard Fullscreen API (with the exception of toggleFullscreen()
, which is not part of that standard).
Building & Releasing
Test
- We lint all code with
xo
as part of testing. - We want 100% code coverage. This is ensured by
nyc
.
$ npm test
Release
Release runs test
and build
, then bumps the version
and commits and tags this version using standard-version.
$ npm run release
$ npm publish
Build
You likely don’t need to ever run this manually. Use Release instead
The build step bundles the package into dist/index.js
using parcel
.
Tests are run before building to ensure we’re building a working version.
$ npm run build