Viewer

A viewer component for embedded PDFs, HTML documents and images inside Monster layouts.

Import

import { Viewer } from "@schukai/monster/source/components/content/viewer.mjs";

Source

View source code

Package

@schukai/monster

Since

1.0.0

This is an HTML snippet.

Introduction

The Monster Viewer embeds documents and media directly into the page. Use it for PDFs, HTML previews or images that should remain inside the surrounding Monster interface.

When to use Viewer

Use it for inline previewing: Especially useful for document-centric admin and review flows.
Use it when context around the content matters: Surrounding actions can stay visible while the content is viewed.
Do not use it for interactive editing of remote apps: Embedded application runtimes may need an iframe-based approach instead.

With A PDF

The viewer is a simple control that allows you to display PDF documents, images, and HTML content seamlessly. Internally, it does not use a custom PDF viewer but instead relies on the browser's capabilities via the <object> tag. Browsers that do not support this functionality will therefore not work.

In this example, a PDF file is loaded via a URL and displayed in the control. The URL can also be passed directly to the control.

Javascript

import '@schukai/monster/source/components/content/viewer.mjs';


/**
 * A string representing the relative URL path to the PDF file.
 * This variable specifies the location of the "monster.pdf" file within
 * the assets/examples directory.
 */
const pdfUrl = "/assets/examples/monster.pdf";


/**
 * A boolean variable indicating the presence or absence of a scrollbar.
 *
 * When set to `true`, the scrollbar is enabled, allowing the user to scroll through
 * a content area. When set to `false`, the scrollbar is disabled, restricting scrolling.
 *
 * This variable can be used to toggle the visibility or functionality of a scrollbar
 * in a user interface or a specific component.
 */

const navigation = true, toolbar = true, scrollbar = false;

fetch(pdfUrl)
    .then(response => {

        if (!response.ok) {
            throw new Error('Error');
        }
        return response.blob();

    })
    .then(
    pdfData => {

        document.querySelector("monster-viewer").setPDF(pdfData, navigation, toolbar, scrollbar);
    })
    .catch(e => console.log('Error!'));<script type="module">//import '@schukai/monster/source/components/content/viewer.mjs';


const pdfUrl = "/assets/examples/monster.pdf";


const viewerId = "uDu5f3";


const navigation = true, toolbar = true, scrollbar = false;



fetch(pdfUrl)
    .then(response => {

        if (!response.ok) {
            throw new Error('Netzwerkantwort war nicht ok');
        }


        return response.blob();

    })
    .then(pdfData => {

        //const pdfUrl = URL.createObjectURL(pdfData);

        document.getElementById(viewerId).setPDF(pdfData, navigation, toolbar, scrollbar);
    })
    .catch(e => console.log('Error!'));</script>

HTML

<monster-viewer>
</monster-viewer>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

With An Image

The viewer is a simple control that allows you to display PDF documents, images, and HTML content seamlessly.

In this example, a image file is loaded via a URL and displayed in the control. The URL can also be passed directly to the control.

Javascript

import '@schukai/monster/source/components/content/viewer.mjs';


const url = "/assets/examples/monster.png";

fetch(url)
    .then(response => {

        if (!response.ok) {
            throw new Error('Error');
        }

        return response.blob();

    })
    .then(data => {
        document.querySelector("monster-viewer").setImage(data)
    })
    .catch(e => console.log('Error!'));<script type="module">//import '@schukai/monster/source/components/content/viewer.mjs';


const pdfUrl = "/assets/examples/monster.png";


const viewerId = "uDu5f2";


const navigation = true, toolbar = true, scrollbar = false;

fetch(pdfUrl)
    .then(response => {

        if (!response.ok) {
            throw new Error('Error');
        }


        return response.blob();

    })
    .then(pdfData => {

        //const pdfUrl = URL.createObjectURL(pdfData);

        document.getElementById(viewerId).setPDF(pdfData, navigation, toolbar, scrollbar);
    })
    .catch(e => console.log('Error!'));</script>

HTML

<monster-viewer>
</monster-viewer>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

With HTML Content

The viewer is a simple control that allows you to display PDF documents, images, and HTML content seamlessly.

In this example, a html file is loaded via a URL and displayed in the control. The URL can also be passed directly to the control.

Javascript

import '@schukai/monster/source/components/content/viewer.mjs';


const url = "/assets/examples/monster.html";


fetch(url)
    .then(response => {

        if (!response.ok) {
            throw new Error('Error');
        }

        return response.blob();

    })
    .then(data => {
        document.querySelector("monster-viewer").setHTML(data);
    })
    .catch(e => console.log('Error!'));<script type="module">//import '@schukai/monster/source/components/content/viewer.mjs';


const pdfUrl = "/assets/examples/monster.html";


const viewerId = "uDu5f1";


const navigation = true, toolbar = true, scrollbar = false;

fetch(pdfUrl)
    .then(response => {

        if (!response.ok) {
            throw new Error('Error');
        }


        return response.blob();

    })
    .then(pdfData => {

        //const pdfUrl = URL.createObjectURL(pdfData);

        document.getElementById(viewerId).setPDF(pdfData, navigation, toolbar, scrollbar);
    })
    .catch(e => console.log('Error!'));</script>

HTML

<monster-viewer>
</monster-viewer>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Component Design

This component is built using the Shadow DOM, which allows it to encapsulate its internal structure and styling. By using a shadow root, the component's internal elements are isolated from the rest of the webpage, ensuring that external styles or scripts cannot accidentally modify its internal layout or behavior.

Shadow DOM and Accessibility

Since the component is encapsulated within a shadow root, direct access to its internal elements is restricted. This means that developers cannot manipulate or style these elements from outside the component. The Shadow DOM helps maintain consistency in the design and behavior of the component by preventing external interference.

Customizing Through Exported Parts

While the Shadow DOM restricts direct access to the component's internal structure, customization is still possible through exported parts. Specific parts of the component are made accessible for styling by being explicitly marked for export. These exported parts can be targeted and customized using CSS, allowing you to modify the appearance of the component without compromising its encapsulation.

Available Part Attributes

viewer: This part represents the entire viewer area, where the content (e.g., PDF, HTML, or image) is displayed. Use this to style the layout or appearance of the viewer.

Below is an example of how to use CSS part attributes to customize different parts of the viewer.


monster-viewer::part(viewer) {
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 5px;
}

Explanation of the Example

monster-viewer::part(viewer): Styles the viewer area, giving it a white background, a border, and slightly rounded corners.

Accessibility

Accessibility is a key consideration in the design of this component. By following best practices for web accessibility, the component ensures that users of all abilities can interact with it effectively. This includes support for keyboard navigation, screen readers, and other assistive technologies to provide an inclusive user experience.

HTML Structure

<monster-viewer></monster-viewer>

JavaScript Initialization

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

Exported

Viewer

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

content

string

Content to be displayed in the viewer

classes

object

Css classes

classes.viewer

string

Css class for the viewer

renderers

object

Renderers for different media types

renderers.image

function

undefined

Function to render image content

renderers.html

function

undefined

Function to render HTML content

renderers.pdf

function

undefined

Function to render PDF content

renderers.plaintext

function

undefined

Function to render plain text content

renderers.markdown

function

undefined

Function to render Markdown content

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.

Structural methods

setAudio(data)

Parameters

data {blob|string}: - The audio content. This can be a Blob, a URL, or a string.

Returns

{void}: return value.

Sets the audio content for the viewer. Accepts a Blob, URL, or string and processes it to configure audio playback within the viewer. Throws an error if the input type is invalid.

setContent(content,[mediaType="text/plain"])

Parameters

content {string|object}: - The content to be set or a declarative payload.
[mediaType="text/plain"] {string}: - The media type of the content. Defaults to "text/plain" if not specified.

Returns

{void}: method does not return a value.

Throws

{Error} Throws an error if shadowRoot is not defined.

Sets the content of an element based on the provided content and media type. Supported forms: - setContent(contentString, mediaType) - setContent({ mediaType, data, encoding }) The declarative form requires an explicit encoding when data is a string. Use encoding: "url" for URLs and encoding: "base64" for base64 payloads.

setDownload(data,)

Parameters

data: data
undefined: filename

Sets the download functionality for the viewer.

setHTML(data)

Parameters

data {htmlelement|url|string|blob}: 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.

setImage(data)

Parameters

data {(blob|string)}: - The image data, which can be a Blob, a valid URL, or a string representation of the image.

Returns

{void}: not return a value.

Sets an image for the target by accepting a blob, URL, or string representation of the image.

setMarkdown(data)

Parameters

data {string|blob}: data

Renders Markdown content using built-in or custom Markdown parser. Overrideable via customRenderers['text/markdown'].

setMessage(emailData)

Parameters

emailData {object}: - The structured email data.

Sets the content for displaying an email message. The data is expected to be an object with a structure containing 'to', 'from', 'subject', 'parts', and 'headers'. The parts are processed to display plain text and HTML in separate tabs, and attachments are listed.

setPDF(data,[navigation=true],[toolbar=true],[scrollbar=false])

Parameters

data {blob|url|string|object}: The PDF data to be embedded. Can be provided as a Blob, URL, or base64 string,
[navigation=true] {boolean}: Determines whether the navigation pane is displayed in the PDF viewer.
[toolbar=true] {boolean}: Controls the visibility of the toolbar in the PDF viewer.
[scrollbar=false] {boolean}: Configures the display of the scrollbar in the PDF viewer.

Returns

{void}: method returns nothing but sets the embedded PDF as the content.

Configures and embeds a PDF document into the application with customizable display settings. Supported forms: - setPDF(blobOrUrlOrBase64String, navigation, toolbar, scrollbar) - setPDF({ data, encoding, navigation, toolbar, scrollbar }) The declarative form requires an explicit encoding when data is a string. Use encoding: "url" for URLs and encoding: "base64" for base64 payloads. or a declarative payload: { data, encoding, navigation, toolbar, scrollbar }.

setPlainText(data)

Parameters

data {blob|htmlelement|string}: - The input data to be processed. It can be a Blob object, an HTMLElement,

Returns

{void}: This method does not return any value. It processes the content and updates the relevant option

Sets the plain text content by processing the input data, which can be of various types, including Blob, HTMLElement, string, or a valid URL. The method extracts and sets the raw text content into a predefined option. a plain string, or a string formatted as a valid URL. The method determines the data type and processes it accordingly. property.

setVideo(data)

Parameters

data {blob|string}: - The video data to set. It can be a Blob, URL, or string.

Returns

{void}: method does not return a value. It updates the viewer's state.

Throws

{Error} Throws an error if the provided data is not a Blob or URL.

Sets the video content for the viewer. The method accepts a Blob, URL, or string, verifies its type, and updates the viewer's content accordingly.

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

getTag()

Returns

{string}

Lifecycle methods

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

[assembleMethodSymbol]()

Returns

{Viewer}

disconnectedCallback()

This is necessary to remove the event listener when the element is disconnected.

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

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