FullScreen
A beautiful FullScreen that can make your life easier and also looks good.
import { FullScreen } from "@schukai/monster/source/components/layout/full-screen.mjs";'%3E%3Cpath style='stroke:none;fill-rule:nonzero;fill:%23f03c2e;fill-opacity:1' d='M90.156 41.965 50.036 1.848a5.918 5.918 0 0 0-8.372 0l-8.328 8.332 10.566 10.566a7.03 7.03 0 0 1 7.23 1.684 7.034 7.034 0 0 1 1.669 7.277l10.187 10.184a7.028 7.028 0 0 1 7.278 1.672 7.04 7.04 0 0 1 0 9.957 7.05 7.05 0 0 1-9.965 0 7.044 7.044 0 0 1-1.528-7.66l-9.5-9.497V59.36a7.04 7.04 0 0 1 1.86 11.29 7.04 7.04 0 0 1-9.957 0 7.04 7.04 0 0 1 0-9.958 7.06 7.06 0 0 1 2.304-1.539V33.926a7.049 7.049 0 0 1-3.82-9.234L29.242 14.272 1.73 41.777a5.925 5.925 0 0 0 0 8.371L41.852 90.27a5.925 5.925 0 0 0 8.37 0l39.934-39.934a5.925 5.925 0 0 0 0-8.371'/%3E%3C/g%3E%3C/svg%3E "View source code")
Introduction
The monster-full-screen component provides a user-friendly way to toggle fullscreen mode on any HTML element. This component enhances user engagement by allowing immersive viewing experiences, particularly useful in media, data visualization, and presentation interfaces. Its integration supports a wide range of use cases, from basic interfaces to complex application layouts.
Key Features
- Fullscreen toggle: Easily switch any target element in and out of fullscreen mode using a simple control interface.
- Encapsulated control logic: The logic for managing fullscreen state is fully encapsulated within the component, requiring minimal configuration.
- Customizable interface: The appearance of the toggle buttons can be customized through exported parts, ensuring it aligns with your application’s style.
- Accessible by design: Designed with accessibility considerations, including appropriate role attributes and dynamic visual state changes.
- Visual icon feedback: Clearly indicates whether fullscreen is active or not via intuitive SVG icons.
Improving the user experience
The monster-full-screen component improves user interaction by making fullscreen functionality available without additional scripting. It provides immediate visual feedback during state transitions and maintains a consistent control layout across devices and browsers.
These improvements simplify user navigation and support an immersive experience, especially in scenarios where content focus and distraction-free display are critical.
Efficiency in the development process
Integrating the monster-full-screen component is simple and effective. It works with standard HTML and JavaScript, does not require external dependencies, and adheres to Monster.js conventions. Developers can configure it declaratively via attributes and benefit from its modular design, which promotes reuse and maintainability across applications of any size.
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.
Javascript
import '@schukai/monster/source/components/layout/full-screen.mjs';HTML
<div id="full-site-content" style="position: relative;">
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!
<monster-full-screen style="position: absolute;
top: -60px;
right: 120px;" data-monster-option-selector="#full-site-content"></monster-full-screen></div>Stylesheet
/** no additional stylesheet is defined **/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
FullScreenDerived from
CustomElementOptions
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.
- 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]()instanceof operator.getCSSStyleSheet()- {CSSStyleSheet[]}
getTag()- {string}
Lifecycle methods
Lifecycle methods are called by the environment and are usually not intended to be called directly.
[assembleMethodSymbol]()- {Components.Layout.FullScreen
Events
This component does not fire any public events. It may fire events that are inherited from its parent classes.