Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support Fullscreen mode with Other UI elements #2324

Closed
eonarheim opened this issue May 24, 2022 · 0 comments · Fixed by #2325
Closed

Support Fullscreen mode with Other UI elements #2324

eonarheim opened this issue May 24, 2022 · 0 comments · Fixed by #2325

Comments

@eonarheim
Copy link
Member

Context

See discussion #2323

Currently the Excalibur fullscreen mode only targets the canvas element, which only allows that element to go fullscreen.

Proposal

Allow ex.Screen.goFullScreen() to specify a target container element in some way.

A couple thoughts come to mind

const game = new ex.Engine({..});
// element id
game.screen.goFullScreen('target-element-id');

// element reference
const element = document.getElementById('target-element-id');
game.screen.goFullScreen(element);

// only parent element? maybe not
game.screen.goFullScreen(true);
eonarheim added a commit that referenced this issue May 25, 2022
@eonarheim
feat: [#2324] Add fullscreen target element id
99f5fb0
@eonarheim eonarheim mentioned this issue May 25, 2022
Merged
5 tasks
eonarheim added a commit that referenced this issue May 25, 2022
@eonarheim
feat: [#2324] Add FullScreen Target Element Id (#2325)
4ffca96 
Closes #2324 

This PR adds an additional optional argument to `ex.Screen.goFullScreen('some-element-id')` to target a specific element for the browser fullscreen API.

Example:

```html
<button id="fullscreen">Go Fullscreen</button>
<div id="container" class="container">
    <div class="ui" style="position: absolute; right: 0">
      <div>Some text</div>
      <button>Click me!</button>
    </div>
    <canvas id="game"></canvas>
</div>
```
```typescript
const game = new ex.Engine({
  ...
  canvasElementId: 'game'
});

var fullscreenButton = document.getElementById('fullscreen') as HTMLButtonElement;
fullscreenButton.addEventListener('click', () => {
  if (game.screen.isFullScreen) {
    game.screen.exitFullScreen();
  } else {
    game.screen.goFullScreen('container');
  }
});
```
This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: [#2324] Add FullScreen Target Element Id excaliburjs/Excalibur
1 participant
@eonarheim