@phosphor/domutils

  • Version 1.1.4
  • Published
  • 25.8 kB
  • No dependencies
  • BSD-3-Clause license

Install

npm i @phosphor/domutils
yarn add @phosphor/domutils
pnpm add @phosphor/domutils

Overview

PhosphorJS - DOM Utilities

Index

Namespaces

namespace ClipboardExt

namespace ClipboardExt {}
  • The namespace for clipboard related functionality.

function copyText

copyText: (text: string) => void;
  • Copy text to the system clipboard.

    Parameter text

    The text to copy to the clipboard.

namespace ElementExt

namespace ElementExt {}
  • The namespace for element related utilities.

function boxSizing

boxSizing: (element: Element) => IBoxSizing;
  • Compute the box sizing for an element.

    Parameter element

    The element of interest.

    Returns

    The box sizing data for the specified element.

function hitTest

hitTest: (element: Element, clientX: number, clientY: number) => boolean;
  • Test whether a client position lies within an element.

    Parameter element

    The DOM element of interest.

    Parameter clientX

    The client X coordinate of interest.

    Parameter clientY

    The client Y coordinate of interest.

    Returns

    Whether the point is within the given element.

function scrollIntoViewIfNeeded

scrollIntoViewIfNeeded: (area: Element, element: Element) => void;
  • Vertically scroll an element into view if needed.

    Parameter area

    The scroll area element.

    Parameter element

    The element of interest.

    #### Notes This follows the "nearest" behavior of the native scrollIntoView method, which is not supported by all browsers. https://drafts.csswg.org/cssom-view/#element-scrolling-members

    If the element fully covers the visible area or is fully contained within the visible area, no scrolling will take place. Otherwise, the nearest edges of the area and element are aligned.

function sizeLimits

sizeLimits: (element: Element) => ISizeLimits;
  • Compute the size limits for an element.

    Parameter element

    The element of interest.

    Returns

    The size limit data for the specified element.

interface IBoxSizing

interface IBoxSizing {}
  • An object which holds the border and padding data for an element.

property borderBottom

borderBottom: number;
  • The bottom border width, in pixels.

property borderLeft

borderLeft: number;
  • The left border width, in pixels.

property borderRight

borderRight: number;
  • The right border width, in pixels.

property borderTop

borderTop: number;
  • The top border width, in pixels.

property horizontalSum

horizontalSum: number;
  • The sum of horizontal border and padding.

property paddingBottom

paddingBottom: number;
  • The bottom padding width, in pixels.

property paddingLeft

paddingLeft: number;
  • The left padding width, in pixels.

property paddingRight

paddingRight: number;
  • The right padding width, in pixels.

property paddingTop

paddingTop: number;
  • The top padding width, in pixels.

property verticalSum

verticalSum: number;
  • The sum of vertical border and padding.

interface ISizeLimits

interface ISizeLimits {}
  • An object which holds the min and max size data for an element.

property maxHeight

maxHeight: number;
  • The maximum height, in pixels.

property maxWidth

maxWidth: number;
  • The maximum width, in pixels.

property minHeight

minHeight: number;
  • The minimum height, in pixels.

property minWidth

minWidth: number;
  • The minimum width, in pixels.

namespace Platform

namespace Platform {}
  • The namespace for platform related utilities.

variable IS_EDGE

const IS_EDGE: boolean;
  • A flag indicating whether the browser is Edge.

variable IS_IE

const IS_IE: boolean;
  • A flag indicating whether the browser is IE.

variable IS_MAC

const IS_MAC: boolean;
  • A flag indicating whether the platform is Mac.

variable IS_WIN

const IS_WIN: boolean;
  • A flag indicating whether the platform is Windows.

function accelKey

accelKey: (event: KeyboardEvent | MouseEvent) => boolean;
  • Test whether the accel key is pressed.

    Parameter event

    The keyboard or mouse event of interest.

    Returns

    Whether the accel key is pressed.

    #### Notes On Mac the accel key is the command key. On all other platforms the accel key is the control key.

namespace Selector

namespace Selector {}
  • The namespace for selector related utilities.

function calculateSpecificity

calculateSpecificity: (selector: string) => number;
  • Calculate the specificity of a single CSS selector.

    Parameter selector

    The CSS selector of interest.

    Returns

    The specificity of the selector.

    #### Undefined Behavior The selector is invalid.

    #### Notes This is based on https://www.w3.org/TR/css3-selectors/#specificity

    A larger number represents a more specific selector.

    The smallest possible specificity is 0.

    The result is represented as a hex number 0x<aa><bb><cc> where each component is the count of the respective selector clause.

    If the selector contains commas, only the first clause is used.

    The computed result is cached, so subsequent calculations for the same selector are extremely fast.

function isValid

isValid: (selector: string) => boolean;
  • Test whether a selector is a valid CSS selector.

    Parameter selector

    The CSS selector of interest.

    Returns

    true if the selector is valid, false otherwise.

    #### Notes The computed result is cached, so subsequent tests for the same selector are extremely fast.

function matches

matches: (element: Element, selector: string) => boolean;
  • Test whether an element matches a CSS selector.

    Parameter element

    The element of interest.

    Parameter selector

    The valid CSS selector of interest.

    Returns

    true if the element is a match, false otherwise.

    #### Notes This function uses the builtin browser capabilities when possible, falling back onto a document query otherwise.

Package Files (5)

Dependencies (0)

No dependencies.

Dev Dependencies (14)

Peer Dependencies (0)

No peer dependencies.

Badge

To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@phosphor/domutils.

  • Markdown
    [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@phosphor/domutils)
  • HTML
    <a href="https://www.jsdocs.io/package/@phosphor/domutils"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>