Class: ShadowReload

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-shadow-reload /> directly in the HTML or using Javascript via the document.createElement('monster-shadow-reload'); method.

<monster-shadow-reload></monster-shadow-reload>

<script type="module">
import {Reload} from '@schukai/component-form/source/shadow-reload.js';
document.createElement('monster-shadow-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-shadow-reload data-monster-options-selector="#config">
<div class="row">
  <div class="col" data-monster-role="container">
      LOADER ...
  </div>
</div>
</monster-shadow-reload>

Constructor

new ShadowReload()

A shadow reload control

Since: 3.6.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.

Methods

(static) getTag() → {string}

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

Returns:

Type:: string