Reference Source
public class | source

ReconstructiveBanner

Extends:

HTMLElement → ReconstructiveBanner

ReconstructiveBanner implements <reconstructive-banner> Custom Element. It is an unobtrusive archival replay banner to make mementos interactive and surface on-demand metadata about the archived resource. The banner houses a customizable branding logo that links to the replay home. It provides a pre-populated text input to navigate the replay to a different URI-R. A brief phrase describes the rough age of the current memento, but can be toggled with the absolute date and time of capture by repeatedly clicking on it. User's preference on absolute or relative datetime display persists across the session. Navigational links to the first, last, previous, and next mementos are also provided when present. In its default floating action bar (FAB) mode it auto-hides after a set duration of inactivity if the banner is not in focus and reappears on any user activity on the page such as scroll, mousemove, or keypress. The FAB can be dragged to repostion it on the page, which then persists across the session unless relocated again. It provides controls to expand, collapse, or completely close the banner. The expanded mode has much more real estate available to house detailed archival metadata and visualizations. Use it in an HTML page as illustrated below:

<script src="reconstructive-banner.js"></script>
<reconstructive-banner logo-src=""
                       home-href="/"
                       urir="https://example.com/"
                       memento-datetime="Mon, 06 Feb 2017 00:23:37 GMT"
                       first-urim="https://archive.host/memento/20170206002337/https://example.com/"
                       first-datetime="Mon, 06 Feb 2017 00:23:37 GMT"
                       last-urim="https://archive.host/memento/20170206002337/https://example.com/"
                       last-datetime="Mon, 06 Feb 2017 00:23:37 GMT"
                       prev-urim=""
                       prev-datetime=""
                       next-urim=""
                       next-datetime="">
</reconstructive-banner>

Constructor Summary

Public Constructor
public

Create a new ReconstructiveBanner instance and attach a Shadow DOM.

Member Summary

Public Members
public

A base64-encoded data URI of the SVG Reconstructive Logo.
public

Duration of inactivity after which the banner in FAB mode should auto-hide if not in focus.
public

A function to provide human readable dispaly datetime strings for the current memento in both relative and absolute terms.
public

Datetime (in the RFC2822 format) when the first memento was captured.
public

URI of the first memento.
public

Hyperlink (URL or path) of the homepage to be linked from the banner logo.
public

Datetime (in the RFC2822 format) when the last memento was captured.
public

URI of the last memento.
public

Source (URL or path) of the banner logo.
public

Datetime (in the RFC2822 format) when the current memento was captured.
public

Datetime (in the RFC2822 format) when the next memento was captured.
public

URI of the next memento.
public

Datetime (in the RFC2822 format) when the previous memento was captured.
public

URI of the previous memento.
public

shadow: ShadowRoot

ShadoRoot for the isolated Shadow DOM of the banner.
public

Original resource URI (URI-R).

Method Summary

Public Methods
public

Read various attributes of the element and initialize the rendition and behavious of the banner when this custom element is added to the DOM.

Public Constructors

public constructor() source

Create a new ReconstructiveBanner instance and attach a Shadow DOM.

Public Members

A base64-encoded data URI of the SVG Reconstructive Logo. Used as the default banner logo if a custom logoSrc is not specified.

public autoHideDelay: number source

Duration of inactivity after which the banner in FAB mode should auto-hide if not in focus. The default value is set to 2000 milliseconds (2 seconds).

public displayDatetime: function(): object source

A function to provide human readable dispaly datetime strings for the current memento in both relative and absolute terms. Relative datetime is a non-precise natural language phrase (e.g., "Captured one day and 3 hours ago"). Absolute datetime is a precise natural language phrase in user's locace (e.g., "Captured on 8/13/2018 at 7:23:37 PM").

public firstDatetime: string source

Datetime (in the RFC2822 format) when the first memento was captured. Read from the first-datetime attribute.

public firstUrim: string source

URI of the first memento. Read from the first-urim attribute.

public homeHref: string source

Hyperlink (URL or path) of the homepage to be linked from the banner logo. Read from the home-href attribute. Defaults to the domain root "/".

public lastDatetime: string source

Datetime (in the RFC2822 format) when the last memento was captured. Read from the last-datetime attribute.

public lastUrim: string source

URI of the last memento. Read from the last-urim attribute.

public logoSrc: string source

Source (URL or path) of the banner logo. Defaults to the inline Reconstructive Logo.

public mementoDatetime: string source

Datetime (in the RFC2822 format) when the current memento was captured. Read from the memento-datetime attribute.

public nextDatetime: string source

Datetime (in the RFC2822 format) when the next memento was captured. Read from the next-datetime attribute.

public nextUrim: string source

URI of the next memento. Read from the next-urim attribute.

public prevDatetime: string source

Datetime (in the RFC2822 format) when the previous memento was captured. Read from the prev-datetime attribute.

public prevUrim: string source

URI of the previous memento. Read from the prev-urim attribute.

public shadow: ShadowRoot source

ShadoRoot for the isolated Shadow DOM of the banner.

public urir: string source

Original resource URI (URI-R). Read from the urir attribute.

Public Methods

public connectedCallback() source

Read various attributes of the element and initialize the rendition and behavious of the banner when this custom element is added to the DOM.