or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core-utilities.mddata-structures.mddevelopment-utilities.mddom-styling.mdfunctional-programming.mdindex.mdnetwork-fetch.mdperformance-crypto.mdtext-unicode.mduser-agent-browser.md
tile.json

dom-styling.mddocs/

DOM & Styling

DOM manipulation, CSS utilities, event handling, and style computation functions for browser environments.

Capabilities

Style Utilities

CSS style property manipulation and computation.

const Style = require('fbjs/lib/Style');

/**
 * Gets computed or declared style property value
 * @param node - DOM node to get style from
 * @param name - CSS property name
 * @returns Style property value or null
 */
function get(node: DOMNode, name: string): ?string;

/**
 * Finds the nearest scrollable ancestor element
 * @param node - Starting DOM node
 * @returns Scrollable parent element or window
 */
function getScrollParent(node: ?DOMNode): ?DOMWindow|DOMElement;

Usage Examples:

const Style = require('fbjs/lib/Style');

// Get computed style
const backgroundColor = Style.get(element, 'backgroundColor');
const fontSize = Style.get(element, 'font-size');

// Find scrollable container
const scrollContainer = Style.getScrollParent(element);
if (scrollContainer) {
  scrollContainer.scrollTop = 0;
}

CSS Class Name Utilities

CSS class name manipulation and conditional class application.

const cx = require('fbjs/lib/cx');

/**
 * CSS class name utility for conditional classes
 * @param classNames - String or object with conditional classes
 * @param args - Additional class names (when first arg is string)
 * @returns Space-separated CSS class names string
 */
function cx(classNames: string|Object, ...args: Array<string>): string;

Usage Examples:

const cx = require('fbjs/lib/cx');

// String concatenation
const classes1 = cx('btn', 'btn-primary'); // 'btn btn-primary'

// Conditional classes with object
const classes2 = cx({
  'btn': true,
  'btn-primary': isPrimary,
  'btn-disabled': isDisabled,
  'btn-large': size === 'large'
}); // 'btn btn-primary btn-large' (if conditions are true)

// Mixed usage
const classes3 = cx('base-class', {
  'modifier': hasModifier,
  'active': isActive
}); // 'base-class modifier active'

CSS Variable Utilities

CSS custom property (variable) access and manipulation.

const cssVar = require('fbjs/lib/cssVar');

/**
 * Gets CSS custom property (variable) value by name
 * @param name - CSS variable name (without -- prefix)
 * @returns CSS variable value
 */
function cssVar(name: string): string;

Usage Examples:

const cssVar = require('fbjs/lib/cssVar');

// Get CSS variable value
const primaryColor = cssVar('primary-color');
const fontSize = cssVar('base-font-size');

DOM Node Utilities

DOM node detection, manipulation, and information extraction.

const isNode = require('fbjs/lib/isNode');
const isTextNode = require('fbjs/lib/isTextNode');
const containsNode = require('fbjs/lib/containsNode');
const focusNode = require('fbjs/lib/focusNode');
const getActiveElement = require('fbjs/lib/getActiveElement');

/**
 * Checks if object is a DOM node
 * @param object - Object to test
 * @returns True if object is a DOM node
 */
function isNode(object: any): boolean;

/**
 * Checks if object is a text node
 * @param object - Object to test
 * @returns True if object is a text node
 */
function isTextNode(object: any): boolean;

/**
 * Checks if outer node contains inner node
 * @param outerNode - Container node
 * @param innerNode - Node to check for containment
 * @returns True if outerNode contains innerNode
 */
function containsNode(outerNode: DOMNode, innerNode: DOMNode): boolean;

/**
 * Sets focus on DOM node
 * @param node - DOM node to focus
 */
function focusNode(node: DOMNode): void;

/**
 * Gets currently active (focused) element
 * @param doc - Document to check (defaults to document)
 * @returns Currently focused element or null
 */
function getActiveElement(doc?: Document): ?Element;

Usage Examples:

const isNode = require('fbjs/lib/isNode');
const focusNode = require('fbjs/lib/focusNode');
const getActiveElement = require('fbjs/lib/getActiveElement');

// Check node type
if (isNode(element)) {
  // Safe to use DOM methods
  element.setAttribute('data-processed', 'true');
}

// Focus management
const input = document.getElementById('search');
focusNode(input);

// Get current focus
const focused = getActiveElement();
if (focused && focused.tagName === 'INPUT') {
  console.log('Input is focused');
}

Document and Viewport Utilities

Document structure and viewport information utilities.

const getDocumentScrollElement = require('fbjs/lib/getDocumentScrollElement');
const getViewportDimensions = require('fbjs/lib/getViewportDimensions');
const getElementPosition = require('fbjs/lib/getElementPosition');
const getElementRect = require('fbjs/lib/getElementRect');

/**
 * Gets document's scrollable element
 * @param doc - Document to check (defaults to document)
 * @returns Document's scroll element
 */
function getDocumentScrollElement(doc?: Document): Element;

/**
 * Gets viewport dimensions
 * @returns Object with width and height properties
 */
function getViewportDimensions(): {width: number, height: number};

/**
 * Gets element's position relative to document
 * @param element - DOM element
 * @returns Position object with x and y coordinates
 */
function getElementPosition(element: Element): {x: number, y: number};

/**
 * Gets element's bounding rectangle
 * @param element - DOM element
 * @returns Rectangle object with position and dimensions
 */
function getElementRect(element: Element): {
  top: number,
  left: number, 
  right: number,
  bottom: number,
  width: number,
  height: number
};

Scroll Utilities

Scroll position detection and manipulation utilities.

const getScrollPosition = require('fbjs/lib/getScrollPosition');
const getUnboundedScrollPosition = require('fbjs/lib/getUnboundedScrollPosition');
const Scroll = require('fbjs/lib/Scroll');

/**
 * Gets scroll position of scrollable element
 * @param scrollable - Window or scrollable element
 * @returns Scroll position with x and y coordinates
 */
function getScrollPosition(scrollable: DOMWindow|DOMElement): {x: number, y: number};

/**
 * Gets unbounded scroll position (may be negative or exceed boundaries)
 * @param scrollable - Window or scrollable element
 * @returns Unbounded scroll position with x and y coordinates
 */
function getUnboundedScrollPosition(scrollable: DOMWindow|DOMElement): {x: number, y: number};

// Scroll utilities and constants
const Scroll: {
  // Scroll constants and utility functions
};

Style Property Utilities

CSS style property computation and vendor prefixing.

const getStyleProperty = require('fbjs/lib/getStyleProperty');
const CSSCore = require('fbjs/lib/CSSCore');

/**
 * Gets computed style property value
 * @param node - DOM node
 * @param name - CSS property name
 * @returns Computed style value or null
 */
function getStyleProperty(node: DOMNode, name: string): ?string;

// CSS manipulation utilities
const CSSCore: {
  // Core CSS manipulation functions
};

Event Utilities

Event handling and detection utilities.

const isEventSupported = require('fbjs/lib/isEventSupported');

/**
 * Checks if event is supported in current execution environment
 * @param eventNameSuffix - Event name (without 'on' prefix)
 * @param capture - Whether to test capture phase
 * @returns True if event is supported
 */
function isEventSupported(eventNameSuffix: string, capture?: boolean): boolean;

Usage Examples:

const isEventSupported = require('fbjs/lib/isEventSupported');

// Check event support
const supportsTouch = isEventSupported('touchstart');
const supportsPointer = isEventSupported('pointerdown');

if (supportsTouch) {
  // Add touch event listeners
  element.addEventListener('touchstart', handleTouch);
} else {
  // Fallback to mouse events
  element.addEventListener('mousedown', handleMouse);
}

Touch Event Utilities

Touch event handling and processing utilities.

const TouchEventUtils = require('fbjs/lib/TouchEventUtils');

// Touch event utilities for mobile interaction
const TouchEventUtils: {
  // Touch event processing utilities
};

DOM Creation Utilities

DOM node creation from markup utilities.

const createNodesFromMarkup = require('fbjs/lib/createNodesFromMarkup');
const getMarkupWrap = require('fbjs/lib/getMarkupWrap');

/**
 * Creates DOM nodes from HTML markup string
 * @param markup - HTML markup string
 * @returns NodeList of created DOM nodes
 */
function createNodesFromMarkup(markup: string): NodeList;

/**
 * Gets HTML wrapper elements for specific node types
 * @param nodeName - Node name (tag name)
 * @returns Array of opening and closing wrapper HTML
 */
function getMarkupWrap(nodeName: string): [string, string];

Usage Examples:

const createNodesFromMarkup = require('fbjs/lib/createNodesFromMarkup');

// Create DOM nodes from HTML
const nodes = createNodesFromMarkup('<div class="item">Content</div>');
const container = document.getElementById('container');
Array.from(nodes).forEach(node => container.appendChild(node));

Mouse and Wheel Event Utilities

Mouse movement tracking and wheel event normalization.

const DOMMouseMoveTracker = require('fbjs/lib/DOMMouseMoveTracker');
const normalizeWheel = require('fbjs/lib/normalizeWheel');

/**
 * Mouse movement tracking class for drag operations
 */
class DOMMouseMoveTracker {
  // Mouse movement tracking functionality
}

/**
 * Normalizes wheel event data across browsers
 * @param event - Wheel event object
 * @returns Normalized wheel data
 */
function normalizeWheel(event: WheelEvent): {
  spinX: number,
  spinY: number,
  pixelX: number,
  pixelY: number
};

React-specific DOM Utilities

React component DOM utilities.

const ReactWheelHandler = require('fbjs/lib/ReactWheelHandler');
const translateDOMPositionXY = require('fbjs/lib/translateDOMPositionXY');

/**
 * React wheel event handler
 */
class ReactWheelHandler {
  // React-specific wheel event handling
}

/**
 * DOM position translation utility for React
 */
const translateDOMPositionXY: {
  // DOM position translation functions
};

Browser Support Detection

Browser feature and capability detection.

const BrowserSupportCore = require('fbjs/lib/BrowserSupportCore');

// Browser feature detection utilities
const BrowserSupportCore: {
  // Browser capability detection functions
};