phosphor-domutil

Utilities for working with the DOM.

API Docs

Package Install

Prerequisites

• node

npm install --save phosphor-domutil

Source Build

Prerequisites

• git
• node

git clone https://github.com/phosphorjs/phosphor-domutil.git
cd phosphor-domutil
npm install

Rebuild

npm run clean
npm run build

Run Tests

Follow the source build instructions first.

# run tests in Firefox
npm test

# run tests in Chrome
npm run test:chrome

# run tests in IE
npm run test:ie

Build Docs

Follow the source build instructions first.

npm run docs

Navigate to docs/index.html.

Supported Runtimes

The runtime versions which are currently known to work are listed below. Earlier versions may also work, but come with no guarantees.

• IE 11+
• Firefox 32+
• Chrome 38+

Bundle for the Browser

Follow the package install instructions first.

Any bundler that understands how to require() files with .js and .css extensions can be used with this package.

Usage Examples

Note: This module is fully compatible with Node/Babel/ES6/ES5. Simply omit the type declarations when using a language other than TypeScript.

Cursor Override:

import {
  overrideCursor
} from 'phosphor-domutil';


// force the cursor to be 'wait' for the entire document
let override = overrideCursor('wait');

// clear the override by disposing the return value
override.dispose();

Hit Testing:

import {
  hitTest
} from 'phosphor-domutil';


let div = document.createElement('div');
div.style.position = 'absolute';
div.style.left = '0px';
div.style.top = '0px';
div.style.width = '100px';
div.style.height = '100px';
document.body.appendChild(div);

hitTest(div, 50, 50);   // true
hitTest(div, 150, 150); // false

Box Sizing:

import {
  boxSizing
} from 'phosphor-domutil';

let div = document.createElement('div');
div.style.borderTop = 'solid 10px black';
document.body.appendChild(div);

let sizing = boxSizing(div);
sizing.borderTop;    // 10
sizing.paddingLeft;  // 0
// etc...

Size Limits:

import {
  sizeLimits
} from 'phosphor-domutil';

let div = document.createElement('div');
div.style.minWidth = '90px';
document.body.appendChild(div);

let limits = sizeLimits(div);
limits.minWidth;   // 90
limits.maxHeight;  // Infinity
// etc...

Custom Drag Data:

import {
  clearDragData, getDragData, setDragData
} from 'phosphor-domutil';


// pseudo-code
class SomeDragSource {

  evtDragStart(event: DragEvent): void {
    setDragData(event, 'application/x-my-custom-data', { foo: 12, bar: 42 });
  }

  evtDragEnd(event: DragEvent): void {
    clearDragData(event);
  }
}


// pseudo-code
class SomeDropTarget {

  evtDrop(event: DragEvent): void {
    let data = getDragData(event, 'application/x-my-custom-data');
    console.log(data);  // { foo: 12, bar: 42 }
  }
}