View Utilities

<- Back to views

The building blocks of any page’s template are the view’s utilities. When rendering content from a view function, these utilities are loaded to assemble and organize the given content. This approach centralizes rendering content in a single location, making it more flexible to modify as needed.

When text, images, titles and other content are rendered, they come through a utility function. No DOM content should be injected directly from a view function. This prevents conflicts between different APIs.

Text Utilities

Write Titles

This procedure inserts a heading, or title, into a layout’s structure. It takes two parameters: the importance of the title, which should be a form of headline (h1, h2, h3, etc.), and the title itself.

export function writeTitle(importance: string,text: string) {
    const title = document.createElement(importance);
    title.textContent = text;

    return title;
}

Write Paragraphs

This utility function generates a paragraph by embedding a string within an HTML <p> tag. It is important to note that an array cannot be passed to create a series of paragraphs. This is typically handled by the view function that calls this utility function.

export function writeParagraph(text: string) {
    const paragraph = document.createElement("p");
    paragraph.textContent = text;

    return paragraph;
}

Render Utilities

Build View Base

This method creates a fundamental structure, represented by a DOM element, that serves as the framework for any view page. To guarantee compliance with this requirement, it must be designed using a single-instance approach. Primarily, it creates a view div and its inner wrapper (both empty).

export function buildViewBase() {
    const viewBox = document.createElement('div');
    const viewWrapper = document.createElement('div');
    viewBox.id = 'view-box';
    viewWrapper.id = 'view-wrapper';

    viewBox.appendChild(viewWrapper);
    return viewBox;
}

Render a View

Use this function every time a new view needs to be displayed. Although this function may seem superfluous, it performs an important task: clearing the previous view’s content before printing new stuff. This function is passed within the clearWrapper(), a private function living in the utilities.

export function renderView(view: HTMLElement) {
    const viewWrapper = clearView();
    viewWrapper.appendChild(view);
}

Visual Utilities

Create a Visual Gallery

This function creates a sequence of visuals (one after the other, vertically). It takes a source url in the string format. Note that it accepts an array of string without limitations, allowing multiple visuals to be rendered from the same function.

export function createContentGallery(assetLinks: ReadonlyArray<string>) {
    const gallery = document.createElement("div");
    gallery.className = "gallery";

    assetLinks.forEach(link => {
        const screenshot = document.createElement("img");
        screenshot.src = link;
        gallery.appendChild(screenshot);
    });

    return gallery;
}

Create Video Showcase

Create a video highlight reel within your content sequence, much like images in a gallery. However, there is a greater focus on the provided parameters. Unlike images, which only require a URL array, videos necessitate uniformity, with each link pointing to the same video. The array allows for displaying multiple video formats (in case one fails in a browser version). Currently, it’s recommended to maintain this sequential structure:

1. Webm for faster, lightweight downloads
2. Mp4 for a more universal and versatile usage

export function createVideoShowcase(assetLinks: ReadonlyArray<string>) {
    const video = document.createElement("video");
    video.className = "video-showcase";
    video.autoplay = true;

    assetLinks.forEach(link => {
        const source = document.createElement("source");
        source.src = link;
        video.appendChild(source);
    });

    return video;