Monster.Components.Host. Viewer

The Viewer component is used to show a PDF, HTML or Image.

Dependencies: the system uses functions of the monsterjs library

You can create this control either by specifying the HTML tagdirectly in the HTML or using Javascript via thedocument.createElement('monster-viewer');` method.

<monster-viewer></monster-viewer>

Or you can create this CustomControl directly in Javascript:

import '@schukai/component-state/source/viewer.mjs';
document.createElement('monster-viewer');

The Body should have a class "hidden" to ensure that the styles are applied correctly.

body.hidden {
   visibility: hidden;
}

Constructor

new Viewer()

A simple viewer component

Fires:
  • Monster.Components.Host.Viewer.event:monster-viewer-before-open
  • Monster.Components.Host.Viewer.event:monster-viewer-open
  • Monster.Components.Host.Viewer.event:monster-viewer-before-close
  • Monster.Components.Host.Viewer.event:monster-viewer-closed

Members

defaults

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

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

Properties
NameTypeDescription
templatesObject

Template definitions

Properties
NameTypeDescription
mainstring

Main template

classesObject

Css classes

featuresObject

Feature definitions

See

(static) instanceSymbol

This method is called by the instanceof operator.

This method is called by the instanceof operator.

Methods

assembleMethodSymbol() → {Monster.Components.Host.Viewer}

setHTML(data)

if the data is a string, it is interpreted as html if the data is a url, the html is loaded from the url and set as content if the data is an HTMLElement, the outerHTML is used as content

.

if the data is a string, it is interpreted as html if the data is a url, the html is loaded from the url and set as content if the data is an HTMLElement, the outerHTML is used as content

Parameters:
NameTypeDescription
dataHTMLElement | URL | string | Blob

setImage(data)

Parameters:
NameTypeDescription
dataBlob | URL | string

setPDF(data, navigation, toolbar, scrollbar)

Parameters:
NameTypeDefaultDescription
dataBlob | URL | string
navigationbooleantrue
toolbarbooleantrue
scrollbarbooleanfalse

(static) getCSSStyleSheet() → {Array.<CSSStyleSheet>}

Returns:
Type: 
Array.<CSSStyleSheet>

(static) getTag() → {string}

Returns:
Type: 
string