Floaty

Author

Adrian Cederberg

Note

Documentation generated by typedoc on Thu Feb 20 2025 16:25:49 GMT+0000 (Coordinated Universal Time) with typedoc-plugin-markdown (and then rendered by quarto).

blog

Interfaces

TFloaty

Defined in: floaty.js:33

Properties

cards
cards: Element[];

Defined in: floaty.js:36

All of the cards in the floaty.

container
container: Element;

Defined in: floaty.js:35

The container with all of the cards.

elem
elem: HTMLElement;

Defined in: floaty.js:34

The outermost floaty div.

initialize()
initialize: () => void;

Defined in: floaty.js:42

Returns

void

overlayControls
overlayControls: null | TOverlay;

Defined in: floaty.js:37

Output of Overlay (from overlay.js).

resizeForColumns()
resizeForColumns: (countColumns) => void;

Defined in: floaty.js:38

Resize to a specified number of columns.

Parameters
countColumns

number

Returns

void

resizeForWidth()
resizeForWidth: (width?) => void;

Defined in: floaty.js:39

Resize the columns for the current window width or specified width.

Parameters
width?

number

Returns

void

toggleTooltip()
toggleTooltip: (width?) => void;

Defined in: floaty.js:40

Toggle tooltips into card descriptions and vice versa around some breakpoint.

Parameters
width?

number

Returns

void

TFloatyOptions

Defined in: floaty.js:25

Properties

overlayControls?
optional overlayControls: null | TOverlay;

Defined in: floaty.js:26

Output of Overlay (from overlay.js).

resize?
optional resize: object;

Defined in: floaty.js:27

Enable resizing.

resizeBreakpoints?
optional resizeBreakpoints: TBreakpointColumns;

Defined in: floaty.js:28

Breakpoint names mapping to the number of columns for the range. By default BREAKPOINTS_RESIZE.

tooltipsToggle?
optional tooltipsToggle: boolean;

Defined in: floaty.js:29

Toggle tooltips.

tooltipsToggleBreakpoint?
optional tooltipsToggleBreakpoint: EnumBSBreakpoint;

Defined in: floaty.js:30

Breakpoint for toggleing tooltips into card descriptions. By default, BREAKPOINT_TOOLTIPS_TRANSFORM.

Type Aliases

EnumBSBreakpoint

type EnumBSBreakpoint<> = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";

Defined in: util.js:10

Type Parameters

TBreakpointColumns

type TBreakpointColumns<> = Map<EnumBSBreakpoint, number>;

Defined in: floaty.js:10

Type Parameters

Variables

FloatyInstances

const FloatyInstances: Map<string, TFloaty>;

Defined in: floaty.js:6

Functions

Floaty()

function Floaty(elem, options): TFloaty;

Defined in: floaty.js:62

Add responsiveness to a floaty element.

Ideally, these are styled with floaty as in floaty.scss.

Responsiveness includes:

  • opening overlays and links when clicking on floaty-items,
  • moving tooltips to descriptions and vice versa at certain breakpoints,
  • resizing the grid while keeping cards of equal width using fillers,

Parameters

elem

HTMLElement

The target to add responsiveness to.

options

TFloatyOptions

Configuration options.

Returns

TFloaty

Throws

if element is not passed, or when the floaty does not contain a floaty-container element.

lazyFloaty()

function lazyFloaty(elemId, options): TFloaty;

Defined in: floaty.js:376

Wrapper for Floaty to minimize amount of js the floaty filter includes.

Parameters

elemId

string

The target element to add Floaty functionality to.

options

Configuration options.

overlayControls

null | TOverlay

Pass already existing overlayControls to Floaty (instead of creating them from overlayId).

overlayId

string

Identifier for the associated overlay.

Returns

TFloaty

Throws

when an element with identifier elemId or options.overlayId cannot be found.

References

TOverlay

Re-exports TOverlay