@magnit-ce/captioned-thumbnail
TypeScript icon, indicating that this package has built-in type declarations

0.0.3 • Public • Published

magnitce-captioned-thumbnail

A custom HTMLElement that displays an image or icon with a caption and interactive components.

Package size: ~6kb minified, ~8kb verbose.

Quick Reference

<captioned-thumbnail src="./smile.png" edit select>Smile</captioned-thumbnail>
<script type="module" src="/path/to/captioned-thumbnail[.min].js"></script>

Demos

https://catapart.github.io/magnitce-captioned-thumbnail/demo/

Support

  • Firefox
  • Chrome
  • Edge
  • Safari (Has not been tested; should be supported, based on custom element support)

Getting Started

  1. Install/Reference the library

Reference/Install

HTML Import (not required for vanilla js/ts; alternative to import statement)

<script type="module" src="/path/to/captioned-thumbnail[.min].js"></script>

npm

npm install @magnit-ce/captioned-thumbnail

Import

Vanilla js/ts

import "/path/to/captioned-thumbnail[.min].js"; // if you didn't reference from a <script>, reference with an import like this

import { CaptionedThumbnailElement } from "/path/to/captioned-thumbnail[.min].js";

npm

import "@magnit-ce/captioned-thumbnail"; // if you didn't reference from a <script>, reference with an import like this

import { CaptionedThumbnailElement } from "@magnit-ce/captioned-thumbnail";



Overview

The <captioned-thumbnail> element is an element that shows a small image ("thumbnail") with centered caption text below it.

It can also include the ability for selection, by clicking on the element, or editing by clicking on an "edit" button that the <captioned-thumbnail> element includes.

The <captioned-thumbnail> element does not have any dependencies and can be used arbitrarily, but it was developed with the intention of mimicing OS-native file-browser apps and the common layout of their "file" display. It should function, both in selection and appearance, similarly to those inspirations.

Selection can be done either by pointer events (clicking, tapping, etc), or by key events (tab/shift+tab).

Attributes

Attribute Name Description
label Sets the caption.
src Sets the thumbnail content to an <img> element, and sets that element's src attribute to the provided value.
select If present, allows the <captioned-thumbnail> element to be selectable. If not present, prevents the element from being selectable. [Alias: selectable]

Events

The <captioned-thumbnail> element dispatches a change event whenever it becomes selected or unselected, if the element has a select attribute. If the element has an edit attribute, it will dispatch an edit event whenever the internal edit <button> is clicked.

Parts

Part Name Description
figure An HTMLFigureElement that wraps the content of the element.
selected An HTMLInputElement that wraps the indicates whether the element has been selected or not. If selected, this element will be checked, otherwise, it will be unchecked.
edit-button An HTMLButtonElement that allows users to dispatch an edit event.
icon An HTMLSpanElement that displays the element's thumbnail.
label An HTMLFigcaptionElement that displays the element's caption.

Slots

The <captioned-thumbnail> element exposes the following slots:

Slot Name Description Default
selected An element that indicates whether or not the item has been "selected". HTMLInputElement[type="checkbox"]
edit-button A clickable element that dispatches an edit event. HTMLButtonElement
icon The element that displays the item's icon. HTMLSpanElement
label The container element for the item's caption. HTMLFigcaptionElement
[Default] Slot that holds the caption text for the item. The slot is inside of a <figcaption> element. (note: this slot has no name; all children of the <captioned-thumbnail> element that do not have a slot attribute will be placed in this default slot.) Text: Item

Styling

The <captioned-thumbnail> element can be styled with CSS, normally. The <captioned-thumbnail> element also utilizes the shadowDOM for layout, so styling the internal layout elements must be done using a ::part() selector.

In this example, the figure part is being selected for styling:

captioned-thumbnail::part(figure)
{
    /* styling */
}

For a list of all part names, see the parts section.

License

This library is in the public domain. You do not need permission, nor do you need to provide attribution, in order to use, modify, reproduce, publish, or sell it or any works using it or derived from it.

Package Sidebar

Install

npm i @magnit-ce/captioned-thumbnail

Weekly Downloads

6

Version

0.0.3

License

CC0-1.0

Unpacked Size

32.5 kB

Total Files

7

Last publish

Collaborators

  • catapart