FullScreen

A fullscreen wrapper for media, focused work modes and immersive single-surface interactions.

Import

import { FullScreen } from "@schukai/monster/source/components/layout/full-screen.mjs";

Source

View source code

Package

@schukai/monster

Since

4.10.0

Full screen gives one existing surface temporary focus without moving the user away from the current page.

Focus mode Expand this block to inspect details without the surrounding chrome.

Introduction

The Monster FullScreen component promotes one surface into an immersive view. Use it for media, presentations or focused work states where distractions should temporarily disappear.

When to use FullScreen

Use it for media and focused views: Videos, galleries or concentrated editing surfaces are good candidates.
Use it when the surrounding UI should temporarily step back: The component emphasizes one active context.
Do not use it for routine navigation: Fullscreen is strongest when it marks a deliberate mode switch.

Typical mistakes

Preserve a clear way back. Fullscreen feels safe when users can exit it quickly and understand whether they changed the underlying content or only the viewing mode.

Full Screen Simple

This example demonstrates the use of the monster-full-screen component to enable fullscreen mode for a specific content area. The component is positioned absolutely above the target container and configured to toggle fullscreen on the element with the ID #full-site-content. When the fullscreen icon is clicked, the entire content block—containing a message and any additional elements—expands to occupy the entire screen. This allows users to focus on the content without distractions from the rest of the page.

The data-monster-option-selector attribute is used to bind the fullscreen control to a specific DOM element. In this case, it references #full-site-content, making this the element that enters and exits fullscreen mode. The absolute positioning ensures the toggle button appears visually aligned with the intended layout.

Behold! A realm of pixels that shall transcend its mortal bounds into full-screen magnificence - just activate the sacred icon to witness this digital transformation!

Javascript

import "@schukai/monster/source/components/layout/full-screen.mjs";<script type="module">//import '@schukai/monster/source/components/layout/full-screen.mjs';</script>

HTML

<section style="display:grid;gap:var(--monster-space-4);">
  <p style="margin:0;">
    Full screen is useful when a chart, dashboard card, or media surface needs a
    temporary focus mode without leaving the page.
  </p>
  <div id="full-site-content" style="position:relative;padding:var(--monster-space-6);background:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2);border:1px solid var(--monster-color-border-primary-2);min-block-size:18rem;display:grid;place-items:center;">
    <div style="display:grid;gap:var(--monster-space-3);text-align:center;">
      <strong>Operations overview</strong>
      <span>Expand this area to inspect the details without the surrounding navigation.</span>
    </div>
    <monster-full-screen style="position:absolute;top:var(--monster-space-4);right:var(--monster-space-4);" data-monster-option-selector="#full-site-content"></monster-full-screen>
  </div>
</section>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Focus Media View

This variant treats full screen as a focus tool for media and previews instead of generic page chrome.

Focus media view Use full screen when the asset itself needs the user's full attention.

Javascript

import "@schukai/monster/source/components/layout/full-screen.mjs";

HTML

<section style="display:grid;gap:var(--monster-space-4);">
  <div id="full-screen-media-demo" style="position:relative;display:grid;gap:var(--monster-space-4);padding:var(--monster-space-5);background:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2);border:1px solid var(--monster-color-border-secondary-2);min-block-size:20rem;place-items:center;">
    <div style="display:grid;gap:var(--monster-space-2);justify-items:center;">
      <strong>Focus media view</strong>
      <svg viewBox="0 0 200 120" width="100%" style="max-width:22rem;height:auto;background:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);border:1px solid var(--monster-color-border-primary-2);">
        <rect x="16" y="16" width="168" height="88" fill="currentColor" opacity="0.08"></rect>
        <circle cx="64" cy="54" r="16" fill="currentColor" opacity="0.35"></circle>
        <path d="M30 96L76 54L108 80L136 62L170 96Z" fill="currentColor" opacity="0.5"></path>
      </svg>
      <span>Use full screen when the asset itself needs the user's full attention.</span>
    </div>
    <monster-full-screen style="position:absolute;top:var(--monster-space-4);right:var(--monster-space-4);" data-monster-option-selector="#full-screen-media-demo"></monster-full-screen>
  </div>
</section>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Component Design

This component is implemented using the Shadow DOM, which provides a scoped encapsulation of its internal elements and styles. The use of a shadow root ensures that the internal structure remains unaffected by external styles or scripts.

Shadow DOM and Accessibility

The Shadow DOM encapsulation restricts direct access to the internal elements of the component. As a result, developers cannot modify or style these internal elements from outside. This encapsulation supports predictable behavior and protects the component from unintended external influences.

Customizing Through Exported Parts

To allow styling flexibility while maintaining encapsulation, the component exports certain internal elements via part attributes. These exported parts can be targeted using the ::part() CSS pseudo-element, making it possible to apply custom styles without modifying the component's internal template.

Available Part Attributes

control: The outer container element that wraps both fullscreen toggle buttons. Use this to style the control block layout or background.
fullscreen: The element that represents the “enter fullscreen” button. It is visible when the page is not in fullscreen mode.
fullscreen-exit: The element that represents the “exit fullscreen” button. It is shown only when the component is in fullscreen mode.

Below is an example of how to style these exported parts using CSS:


monster-full-screen::part(control) {
    background-color: #f8f8f8;
    padding: 0.5rem;
    display: flex;
    justify-content: center;
}

monster-full-screen::part(fullscreen) {
    color: green;
    cursor: pointer;
}

monster-full-screen::part(fullscreen-exit) {
    color: red;
    cursor: pointer;
}

Explanation of the Example

monster-full-screen::part(control): Applies background color, padding, and centers the control's content.
monster-full-screen::part(fullscreen): Styles the "enter fullscreen" icon with green color and cursor pointer.
monster-full-screen::part(fullscreen-exit): Styles the "exit fullscreen" icon with red color and cursor pointer.

Accessibility

This component follows web accessibility standards to ensure usability by all users, including those using assistive technologies. It includes support for semantic roles, keyboard interaction, and screen reader compatibility. The fullscreen toggle is activated via a button that responds to click events and reflects changes using visually distinct icons.

HTML Structure

<monster-full-screen></monster-full-screen>

JavaScript Initialization

const element = document.createElement('monster-full-screen');
document.body.appendChild(element);

Exported

FullScreen

Derived from

CustomElement

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the CustomElement.

Option

Type

Default

Description

templates

object

Template definitions

templates.main

string

undefined

Main template

selector

string

:first-child

Selector for the control

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the CustomElement.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the CustomElement.

Static methods

[instanceSymbol]()

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

getTag()

Returns

{string}

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

Returns

{Components.Layout.FullScreen

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

The current width of the area is too small to display the content correctly.