Reload

A beautiful reload control

Import

import { Reload } from "@schukai/monster/source/components/form/reload.mjs";

Source

View source code

Package

@schukai/monster

Since

1.13.0

LOADER ...

Introduction

This is a versatile web component. More than just a simple UI element, this component serves as a key element for enhancing interactivity and engagement within various web applications. Whether you are developing a basic website or a complex enterprise-level application, this component is designed to improve user interaction and satisfaction.

Key Features

Dynamic interaction: Users can interact with content dynamically, making the web experience more intuitive and user-centric.
Customizable appearance: Customize the appearance of the component to match the design of your brand or application, ensuring visual consistency.
Accessibility: Designed with accessibility in mind to ensure that all users have a seamless experience, regardless of their browsing environment.
Visual feedback effect: Provides subtle touch feedback to enhance user interaction, making actions more responsive and engaging.
Programmatic Control: Offers methods such as trigger, focus, and deactivate, allowing developers to control the component's behavior programmatically and offering greater flexibility.

Improving the user experience

This component goes beyond its traditional functionality to offer an enhanced and interactive user experience. The combination of visual feedback effects and dynamic interaction with content is not only visually appealing, but also provides clear and responsive feedback to user actions, making the web environment more intuitive and user-friendly.

These improvements are supported by user studies that demonstrate a positive impact on user engagement and satisfaction.

Efficiency in the development process

Integrating this component into your development process is straightforward. Its compatibility with standard web technologies and ease of customization ensure seamless integration with your existing tools and libraries. Whether you're working on a small project or a large-scale application, the modular design of this component guarantees easy integration, streamlining your development process and enhancing productivity.

Reload Simple

This is a reload component that allows embedding content into the page. To do this, simply use the monster-reload tag. The URL of the content is specified via the data-monster-option-url attribute.

If the reload option is set to onshow, the content is loaded only once. Otherwise, with always, the content is reloaded repeatedly.

The content is embedded into the control with the data-monster-role="container" attribute. Using the data-monster-option-filter attribute, a selector can be specified. This selector is applied to the HTML of the loaded content, enabling only a part of the content to be embedded, if desired.

LOADER ...

Javascript

import "@schukai/monster/source/components/form/reload.mjs";

HTML

<monster-reload data-monster-option-url="/assets/examples/reload-content.html">
    <div data-monster-role="container">
        LOADER ...
    </div>
</monster-reload>

Stylesheet

/** no additional stylesheet is defined **/

Component Design

The <monster-quantity> component is built using the Shadow DOM to encapsulate its structure, logic, and styling. By isolating internal elements with a shadow root, the component remains protected from unintended external interference, ensuring predictable rendering and behavior across different contexts.

Shadow DOM and Accessibility

All internal elements of the component — including the input field and control buttons — are contained within the shadow DOM. This guarantees layout stability and encapsulation but does not compromise accessibility. The component is fully keyboard-accessible, allowing users to adjust values using the ArrowUp and ArrowDown keys, or by manually typing a number (if enabled). It also supports assistive technologies and communicates state changes via standard events.

Customizing Through Exported Parts

The <monster-quantity> component uses the part attribute to expose key elements for external styling. This approach supports visual customization while maintaining internal encapsulation. Styles can be applied using the ::part() CSS selector.

Available Part Attributes

control: Outer wrapper of the entire quantity control component.
input-group: Container element wrapping the input and buttons.
decrement-button: The button used to decrease the value.
increment-button: The button used to increase the value.
input: The numeric input field element.

Example of styling the exported parts to change the layout and appearance of the component:


    monster-quantity::part(control) {
    border: 1px solid #ccc;
    padding: 6px;
    border-radius: 4px;
    display: inline-block;
    }

    monster-quantity::part(input-group) {
    display: flex;
    align-items: center;
    gap: 4px;
    }

    monster-quantity::part(input) {
    width: 60px;
    text-align: center;
    font-size: 1rem;
    }

    monster-quantity::part(decrement-button),
    monster-quantity::part(increment-button) {
    background: none;
    border: 1px solid #007acc;
    color: #007acc;
    padding: 4px 8px;
    border-radius: 3px;
    }

Explanation of the Example

monster-quantity::part(control): Adds padding and a visible border to the component wrapper.
monster-quantity::part(input-group): Aligns the input and buttons horizontally with spacing.
monster-quantity::part(input): Styles the input to be visually balanced and user-friendly.
monster-quantity::part(decrement-button) and increment-button: Applies consistent styling to both control buttons.

Accessibility

Accessibility is a core aspect of the <monster-quantity> component’s design. The component is operable via keyboard using the ArrowUp and ArrowDown keys, and screen readers can detect value changes thanks to proper form value updates and event emissions. It also supports features such as disabled state control, placeholder text, and input mode configuration for optimized mobile support. These accessibility features ensure compatibility with assistive technologies and improve usability for all users.

HTML Structure

<monster-reload></monster-reload>

JavaScript Initialization

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

Exported

Reload

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

url

string

url to fetch

reload

string

onshow

onshow, always (onshow is default and means that the content is loaded when the element is visible, always means that the content is always loaded)

filter

string

css selector

fetch

object

fetch options for the request

fetch.redirect

string

error

error, follow, manual

fetch.method

string

GET

GET, POST, PUT, DELETE

fetch.mode

string

same-origin

same-origin, cors, no-cors, navigate

fetch.credentials

string

same-origin

omit, same-origin, include

object

fetch.headers

fetch.headers.accept

string

text/html

text/html, application/json

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.

Behavioral methods

fetch(url)

Parameters

url {string|undefined}: url

load content from url It is important to know that with this function the loading is executed directly. it is loaded as well when the element is not visible.

Static methods

[instanceSymbol]()2.1.0

Returns

{symbol}

This method is called by the instanceof operator.

getTag()

Returns

{string}

This method is called internal and should not be called directly.

observedAttributes()

Returns

{string[]}

This method determines which attributes are to be monitored by attributeChangedCallback().

Lifecycle methods

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

[assembleMethodSymbol]()

Returns

{Monster.Components.Form.Form}

Throws

{Error} missing default slot
{Error} no shadow-root is defined
{Error} missing url
{Error} we won't be able to read the data
{Error} request failed
{Error} not found
{Error} undefined status or type

Events

monster-fetched

This method is called internal and should not be called directly.

[initMethodSymbol]()

Returns

{void}

Events

The component emits the following events:

monster-fetched
monster-fetched

For more information on how to handle events, see the mdn documentation.

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