Viewer

A simple viewer component for PDF, HTML and images.

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 Viewer component is a versatile web component designed to display content such as PDFs, HTML, and images in a seamless and interactive manner. Whether you are building a simple website or a complex enterprise application, this component is tailored to enhance content presentation and improve user engagement.

Key Features

Content versatility: Supports displaying various types of content, including PDFs, images, and HTML, providing flexibility for different use cases.
Customizable appearance: Utilize CSS part attributes to customize the visual style of the component, ensuring alignment with your application's design.
Accessibility: Designed with accessibility in mind, supporting keyboard navigation, screen readers, and other assistive technologies for an inclusive user experience.
Dynamic content updates: Features methods such as setPDF, setImage, and setHTML to dynamically load and display different types of content programmatically.
Shadow DOM encapsulation: Uses the Shadow DOM to encapsulate internal structure and styling, preventing external interference and ensuring consistent behavior.

Improving the user experience

The Viewer component goes beyond static content rendering by offering an interactive and accessible user experience. Its ability to dynamically display various types of content and provide visual feedback makes it an intuitive and user-friendly solution. The seamless integration of visual design and functionality ensures a clear and responsive interaction with content, improving overall user satisfaction.

Studies on user interaction and content engagement highlight the positive impact of components like the Viewer, which combine accessibility, interactivity, and customization to enhance the browsing experience.

Efficiency in the development process

Integrating the Viewer component into your application is straightforward. Its compatibility with standard web technologies ensures seamless implementation, and its modular design allows developers to efficiently incorporate it into projects of any scale. With intuitive methods for setting and managing content, the Viewer component streamlines the development process and increases productivity while delivering a polished user experience.

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!'));

HTML

<monster-viewer>
</monster-viewer>

Stylesheet

/** no additional stylesheet is defined **/

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!'));

HTML

<monster-viewer>
</monster-viewer>

Stylesheet

/** no additional stylesheet is defined **/

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!'));

HTML

<monster-viewer>
</monster-viewer>

Stylesheet

/** no additional stylesheet is defined **/

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

classes

object

Css classes

features

object

undefined

Feature definitions

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

setContent(content)

Parameters

content {string}: content

setHTML(data)

Parameters

data {htmlelement|url|string|blob}: data

if the data is a string, it is interpreted as HTML. if the data is an 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|url|string}: data

setPDF(data,,,)

Parameters

data {blob|url|string}: data
undefined {boolean}: navigation
undefined {boolean}: toolbar
undefined {boolean}: scrollbar

Static methods

[instanceSymbol]()

Returns

{symbol}

This method is called by the instanceof operator.

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

getTag()

Returns

{string}

Other methods

[assembleMethodSymbol]()

Returns

{Viewer}

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.