ReconstructiveBanner
Extends:
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 reposition 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 display 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 ShadowRoot 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 behaviors of the banner when this custom element is added to the DOM. |
Public Constructors
Public Members
public LOGO: string source
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 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 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 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.