Monster.Components.Form. 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 'https://cdn.jsdelivr.net/npm/@schukai/[email protected]/dist/modules/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

Members

(static) observedAttributes

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

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

defaults

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

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

To set the options via the html tag the attribute data-monster-options must be set. As value a JSON object with the desired values must be defined.

The JSON can be specified as a DataURI.

new Monster.Types.DataUrl(btoa(JSON.stringify({
       shadowMode: 'open',
       delegatesFocus: true,
       templates: {
           main: undefined
       }
   })),'application/json',true).toString()

The attribute data-monster-options-selector can be used to access a script tag that contains additional configuration.

As value a selector must be specified, which belongs to a script tag and contains the configuration as json.

<script id="id-for-this-config" type="application/json">
   {
       "config-key": "config-value"
   }
</script>

The individual configuration values can be found in the table.

Properties
NameTypeDescription
templatesObject

Template definitions

Properties
NameTypeDescription
mainstring

Main template

urlstring
reloadstring

currently the only value defined is onshow. Currently the only value defined is onshow. this removes the IntersectionObserver. this means that the content is only loaded once. reloading of the content does not occur.

filterstring

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

processorsArray.<Monster.Components.Form.Processor>
fetchObject

Fetch see Using Fetch mozilla.org

Properties
NameTypeDefaultDescription
redirectStringerror
methodStringGET
modeStringsame-origin
credentialsStringsame-origin
headersObject{"accept":"text/html"}}

Methods

(static) getTag() → {string}

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

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

Returns:
Type: 
string

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

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

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

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

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:
NameTypeDescription
urlstring | undefined

initMethodSymbol()