DOM manipulation, CSS utilities, event handling, and style computation functions for browser environments.
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 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 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 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 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 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
};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 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 handling and processing utilities.
const TouchEventUtils = require('fbjs/lib/TouchEventUtils');
// Touch event utilities for mobile interaction
const TouchEventUtils: {
// Touch event processing 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 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 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 feature and capability detection.
const BrowserSupportCore = require('fbjs/lib/BrowserSupportCore');
// Browser feature detection utilities
const BrowserSupportCore: {
// Browser capability detection functions
};