Class: Reload

This CustomControl reloads the content of a url and embeds it into the dom.

You can create this control either by specifying the HTML tag <monster-reload /> directly in the HTML or using Javascript via the document.createElement('monster-reload'); method.

<monster-reload></monster-reload>

<script type="module">
import {Reload} from '@schukai/component-form/source/reload.js';
document.createElement('monster-reload');
</script>

A simple configuration can look like this

<script id="config"
        type="application/json">
    {
        "url": "./content.html",
    }
</script>

<monster-reload data-monster-options-selector="#config">
</monster-reload>

If you want to display a loader, you can insert a div with the attribute data-monster-role="container". The content of this div will be replaced by the loaded code.

<monster-reload data-monster-options-selector="#config">
<div data-monster-role="container">
LOADER ...
</div>
</monster-reload>

If you need additional structure, you can simply specify it.

<monster-reload data-monster-options-selector="#config">
<div class="row">
  <div class="col" data-monster-role="container">
      LOADER ...
  </div>
</div>
</monster-reload>

Constructor

new Reload()

A reload control

Since: 1.13.0
Copyright: schukai GmbH

Fires:

Monster.Components.event:monster-fetched

Members

defaults

To set the options via the html tag the attribute data-monster-options must be used.

Properties

Name Type Description

templates

Object

Template definitions

Properties

Name	Type	Description
`main`	string	Main template

url string

reload

string

currently the values defined are onshow and always. The default onshow removes the IntersectionObserver. This means that the content is only loaded once. reloading of the content does not occur.

filter

string

dom selectors to search for elements, if undefined then everything is taken

processors Array.<Monster.Components.Form.Processor>

fetch

Object

Fetch see Using Fetch mozilla.org

Properties

Name	Type	Default
`redirect`	String	error
`method`	String	GET
`mode`	String	same-origin
`credentials`	String	same-origin
`headers`	Object	{"accept":"text/html"}}

See: https://monsterjs.org/en/doc/#configurate-a-monster-control The individual configuration values can be found in the table.

(static) instanceSymbol

This method is called by the instanceof operator.

Since: 2.1.0

(static) observedAttributes

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

Methods

assembleMethodSymbol() → {Monster.Components.Form.Form}

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

Fires:

Monster.Components.event:monster-fetched

Throws:

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

Returns:

Type:: Monster.Components.Form.Form

fetch(url)

load content from url

It is important to know that with this function the loading is executed directly.

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.

Parameters:

Name	Type	Description
`url`	string \| undefined

initMethodSymbol()

(static) getTag() → {string}

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

Returns:

Type:: string